refactor: sui transactions

advanced/dapps/react-dapp-v2/src/contexts/JsonRpcContext.tsx

@@ -572,7 +572,7 @@ export function JsonRpcContextProvider({
         // check the session.sessionProperties first for capabilities
         const capabilitiesJson = session?.sessionProperties?.["capabilities"];
         const walletCapabilities =
-          capabilitiesJson && JSON.parse(capabilitiesJson);
+          capabilitiesJson && JSON.parse(capabilitiesJson as string);
         let capabilities = walletCapabilities[address] as
           | GetCapabilitiesResult
           | undefined;
@@ -2142,7 +2142,7 @@ export function JsonRpcContextProvider({
         let result;
         if (addresses) {
           console.log("cached addresses", addresses);
-          const parsed = JSON.parse(addresses);
+          const parsed = JSON.parse(addresses as string);
           result = isOrdinal ? parsed.ordinal : parsed.payment;
           console.log("parsed", result);
         } else {
@@ -2285,12 +2285,15 @@ export function JsonRpcContextProvider({
         tx.setSender(address);
         tx.transferObjects([coin], recipient?.trim() || address);
 
-        const serialized = await tx.toJSON();
+        const suiClient = getSuiClient(chainId);
+        const bcsTransaction = await tx.build({ client: suiClient });
+
         const req = {
-          transaction: Buffer.from(serialized).toString("base64"),
+          transaction: Buffer.from(bcsTransaction).toString("base64"),
           address,
         };
-        console.log("req", req, serialized);
+
+        console.log("req", req, Buffer.from(bcsTransaction).toString("base64"));
         const result = await client!.request<{ digest: string }>({
           topic: session!.topic,
           chainId: chainId,
@@ -2323,12 +2326,16 @@ export function JsonRpcContextProvider({
 
         tx.transferObjects([coin], address);
 
-        const serialized = await tx.toJSON();
+        const suiClient = getSuiClient(chainId);
+
+        const bcsTransaction = await tx.build({ client: suiClient });
+
         const req = {
-          transaction: Buffer.from(serialized).toString("base64"),
+          transaction: Buffer.from(bcsTransaction).toString("base64"),
           address,
         };
-        console.log("req", req, serialized);
+
+        console.log("req", req, Buffer.from(bcsTransaction).toString("base64"));
         const result = await client!.request<{
           signature: string;
           transactionBytes: string;

advanced/dapps/react-dapp-v2/src/helpers/sui.ts

@@ -3,9 +3,9 @@ import { SuiClient } from "@mysten/sui/client";
 // Cache clients
 const clients = new Map<string, SuiClient>();
 
-export async function getSuiClient(chainId: string) {
+export function getSuiClient(chainId: string): SuiClient {
   if (clients.has(chainId)) {
-    return clients.get(chainId);
+    return clients.get(chainId)!;
   }
   let client: SuiClient;
   switch (chainId) {

advanced/dapps/react-dapp-v2/src/pages/index.tsx

@@ -237,7 +237,8 @@ const Home: NextPage = () => {
     let availableActions: AccountAction[] = [];
     const chainIdAsHex = `0x${numberToHex(parseInt(chainId))}`;
     const capabilitiesJson = session?.sessionProperties?.["capabilities"];
-    const walletCapabilities = capabilitiesJson && JSON.parse(capabilitiesJson);
+    const walletCapabilities =
+      capabilitiesJson && JSON.parse(capabilitiesJson as string);
     session?.namespaces?.["eip155"].methods.forEach((methodName) => {
       const action: AccountAction | undefined =
         actions[methodName as keyof typeof actions];

advanced/wallets/react-wallet-v2/src/lib/SuiLib.ts

@@ -76,7 +76,7 @@ export default class SuiLib {
   }
 
   public async signTransaction({ transaction, chainId }: ISignTransactionArguments) {
-    const tx = Transaction.from(Buffer.from(transaction, 'base64').toString('utf8'))
+    const tx = Transaction.from(transaction)
     const client = this.getSuiClient(chainId)
     console.log('tx', tx)
     const signature = await tx.sign({ signer: this.keypair, client })
@@ -93,7 +93,7 @@ export default class SuiLib {
     transaction,
     chainId
   }: ISignAndExecuteTransactionArguments) {
-    const tx = Transaction.from(Buffer.from(transaction, 'base64').toString('utf8'))
+    const tx = Transaction.from(transaction)
     const client = this.getSuiClient(chainId)
     const executor = new SerialTransactionExecutor({ signer: this.keypair, client })
     const result = await executor.executeTransaction(tx)
@@ -121,4 +121,15 @@ export default class SuiLib {
     }
     return this.suiClients[chainId]
   }
+
+  public async getJsonTransactionFromBase64(transaction: string) {
+    try {
+      const tx = Transaction.from(transaction)
+      const jsonTx = await tx.toJSON()
+      return jsonTx
+    } catch (e) {
+      console.error('Error decoding transaction', e)
+      return undefined
+    }
+  }
 }

advanced/wallets/react-wallet-v2/src/views/SessionSignAndExecuteSuiTransactionModal.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Col, Divider, Row, Text } from '@nextui-org/react'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import RequesDetailsCard from '@/components/RequestDetalilsCard'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { styledToast } from '@/utils/HelperUtil'
 import { walletkit } from '@/utils/WalletConnectUtil'
 import RequestModal from '../components/RequestModal'
-import { suiAddresses } from '@/utils/SuiWalletUtil'
+import { getWallet, suiAddresses } from '@/utils/SuiWalletUtil'
 import { approveSuiRequest, rejectSuiRequest } from '@/utils/SuiRequestHandlerUtil'
 
 export default function SessionSignSuiAndExecuteTransactionModal() {
@@ -17,6 +17,7 @@ export default function SessionSignSuiAndExecuteTransactionModal() {
   const requestSession = ModalStore.state.data?.requestSession
   const [isLoadingApprove, setIsLoadingApprove] = useState(false)
   const [isLoadingReject, setIsLoadingReject] = useState(false)
+  const [transaction, setTransaction] = useState<string | undefined>(undefined)
 
   // Ensure request and wallet are defined
   if (!requestEvent || !requestSession) {
@@ -27,10 +28,13 @@ export default function SessionSignSuiAndExecuteTransactionModal() {
   const { topic, params } = requestEvent
   const { request, chainId } = params
 
-  // Get message, convert it to UTF8 string if it is valid hex
-  const transaction = request.params?.transaction
-    ? Buffer.from(request.params.transaction, 'base64').toString('utf8')
-    : ''
+  // transaction is a base64 encoded BCS transaction
+  useMemo(async () => {
+    if (transaction) return
+    const wallet = await getWallet()
+    const jsonTx = await wallet.getJsonTransactionFromBase64(request.params.transaction)
+    setTransaction(jsonTx?.toString())
+  }, [request.params, transaction])
 
   // Handle approve action (logic varies based on request method)
   const onApprove = useCallback(async () => {

advanced/wallets/react-wallet-v2/src/views/SessionSignSuiTransactionModal.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Col, Divider, Row, Text } from '@nextui-org/react'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import RequesDetailsCard from '@/components/RequestDetalilsCard'
 import ModalStore from '@/store/ModalStore'
 import { styledToast } from '@/utils/HelperUtil'
 import { walletkit } from '@/utils/WalletConnectUtil'
 import RequestModal from '../components/RequestModal'
-import { suiAddresses } from '@/utils/SuiWalletUtil'
+import { suiAddresses, getWallet } from '@/utils/SuiWalletUtil'
 import { approveSuiRequest, rejectSuiRequest } from '@/utils/SuiRequestHandlerUtil'
 
 export default function SessionSignSuiTransactionModal() {
   // Get request and wallet data from store
   const requestEvent = ModalStore.state.data?.requestEvent
   const requestSession = ModalStore.state.data?.requestSession
+  const [transaction, setTransaction] = useState<string | undefined>(undefined)
   const [isLoadingApprove, setIsLoadingApprove] = useState(false)
   const [isLoadingReject, setIsLoadingReject] = useState(false)
 
@@ -26,10 +27,13 @@ export default function SessionSignSuiTransactionModal() {
   const { topic, params } = requestEvent
   const { request, chainId } = params
 
-  // Get message, convert it to UTF8 string if it is valid hex
-  const transaction = request.params?.transaction
-    ? Buffer.from(request.params.transaction, 'base64').toString('utf8')
-    : ''
+  // transaction is a base64 encoded BCS transaction
+  useMemo(async () => {
+    if (transaction) return
+    const wallet = await getWallet()
+    const jsonTx = await wallet.getJsonTransactionFromBase64(request.params.transaction)
+    setTransaction(jsonTx?.toString())
+  }, [request.params, transaction])
 
   // Handle approve action (logic varies based on request method)
   const onApprove = useCallback(async () => {