refactor: new chain abstraction handling

ganchoradkov · ganchoradkov · commit cfd845a3f001 · 2024-12-19T10:41:09.000+02:00
diff --git a/wallets/rn_cli_wallet/android/app/build.gradle b/wallets/rn_cli_wallet/android/app/build.gradle
@@ -89,7 +89,7 @@ android {
         applicationId "com.walletconnect.web3wallet.rnsample"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 52
+        versionCode 53
         versionName "1.0"
         resValue "string", "build_config_package", "com.walletconnect.web3wallet.rnsample"
     }
diff --git a/wallets/rn_cli_wallet/package.json b/wallets/rn_cli_wallet/package.json
@@ -33,10 +33,10 @@
     "@react-navigation/native-stack": "6.10.1",
     "@react-navigation/stack": "6.4.1",
     "@reown/appkit-ui-react-native": "1.0.1",
-    "@reown/walletkit": "1.1.1-canary-ca-3",
+    "@reown/walletkit": "1.1.1-canary-ca-10",
     "@sentry/react-native": "5.32.0",
     "@walletconnect/core": "2.17.2",
-    "@walletconnect/react-native-compat": "2.17.2-canary-ca-5",
+    "@walletconnect/react-native-compat": "2.17.2-canary-ca-6",
     "dayjs": "1.11.11",
     "ethers": "5.7.2",
     "patch-package": "8.0.0",
diff --git a/wallets/rn_cli_wallet/src/modals/SessionSendTransactionModal.tsx b/wallets/rn_cli_wallet/src/modals/SessionSendTransactionModal.tsx
@@ -1,6 +1,13 @@
 import {useSnapshot} from 'valtio';
 import {useCallback, useEffect, useMemo, useState} from 'react';
-import {View, StyleSheet, Image, Text, Alert} from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Alert,
+  NativeModules,
+} from 'react-native';
 import {SignClientTypes} from '@walletconnect/types';
 import {ChainAbstractionTypes} from '@reown/walletkit';
 import {
@@ -22,12 +29,13 @@ import {isVerified} from '@/utils/HelperUtil';
 import {VerifiedDomain} from '@/components/VerifiedDomain';
 import {Loader} from '@/components/Loader';
 import {ethers} from 'ethers';
+import {TransactionType} from '@/utils/TypesUtil';
 
 export default function SessionSendTransactionModal() {
   const {data} = useSnapshot(ModalStore.state);
   const [payingAmount, setPayingAmount] = useState('');
   const [bridgingTransactions, setBridgingTransactions] =
-    useState<ChainAbstractionTypes.Transaction[]>();
+    useState<TransactionType[]>();
   const [fundingFrom, setFundingFrom] =
     useState<
       {symbol: string; chainId: string; amount: string; tokenContract: string}[]
@@ -49,7 +57,9 @@ export default function SessionSendTransactionModal() {
   const params = requestEvent?.params;
   const chainId = params?.chainId as string;
   const request = params?.request;
-  const [transaction, setTransaction] = useState<any>(request?.params[0]);
+  const [transaction, setTransaction] = useState<TransactionType>(
+    request?.params[0],
+  );
   const isLinkMode = session?.transportType === 'link_mode';
   const peerMetadata = session?.peer?.metadata as SignClientTypes.Metadata;
 
@@ -70,7 +80,7 @@ export default function SessionSendTransactionModal() {
 
   useEffect(() => {
     const value = transaction.value;
-    if (value > 0) {
+    if (value) {
       setPayingAmount(`${value} ETH`);
       return;
     }
@@ -104,6 +114,7 @@ export default function SessionSendTransactionModal() {
       from: transaction.from,
       to: transaction.to,
       data: transaction.data,
+      chainId: chainId,
       nonce: await getNonce(transaction.from, chainId),
       value: transaction.value || '0',
       maxFeePerGas: fees.maxFeePerGas,
@@ -121,68 +132,78 @@ export default function SessionSendTransactionModal() {
     }
     setFetchingRoutes(true);
     setFetchingGas(true);
-    console.log('fetching routes...');
-    const result = await walletKit.canFulfil({
-      transaction: {
-        from: transaction.from,
-        to: transaction.to,
-        data: transaction.data,
-        nonce: '1',
-        gas: '0',
-        gasPrice: '0',
-        value: '0',
-        maxFeePerGas: '0',
-        maxPriorityFeePerGas: '0',
-        chainId: chainId,
-      },
-    });
-    console.log('routes done');
-    if (result.status === 'error') {
-      setRoutingStatus(`Error: ${result.reason}`);
-      setHasError(true);
-    } else if (result.status === 'available') {
-      const data = result.data;
-      const routes = data.routes;
+    try {
+      console.log('fetching routes...');
+      const result = await walletKit.prepareFulfilment({
+        transaction: {
+          from: transaction.from,
+          to: transaction.to,
+          data: transaction.data,
+          chainId: chainId,
+        },
+      });
+      console.log('routes done');
+      if (result.status === 'error') {
+        setRoutingStatus(`Error: ${result.reason}`);
+        setHasError(true);
+      } else if (result.status === 'available') {
+        console.log('checking details --------');
 
-      console.log('ui fields', JSON.stringify(data.routesDetails, null, 2));
-      const uiFields = data.routesDetails;
+        const details = await walletKit.getFulfilmentDetails({
+          fulfilmentId: result.data.fulfilmentId,
+        });
 
-      const transactions: any[] = [];
-      for (const tx of routes.transactions) {
-        const txData = {
-          ...tx,
-          gasLimit: tx.gas,
-          ...(await calculateEip155Gas(tx, tx.chainId)),
-        };
-        delete txData.gas;
-        delete txData.gasPrice;
-        transactions.push(txData);
-      }
+        console.log('details --------', JSON.stringify(details, null, 2));
 
-      console.log('bridging txs', JSON.stringify(transactions, null, 2));
+        const transactions: any[] = [];
 
-      setNetworkFee(
-        `${uiFields.totalFees.formattedAlt} ${uiFields.totalFees.symbol}`,
-      );
-      const txData = {
-        ...transaction,
-        ...(await calculateEip155Gas(transaction, chainId)),
-      };
-      delete txData.gas;
-      delete txData.gasPrice;
+        const routes = result.data;
+        for (const detail of details.routeDetails) {
+          const tx: TransactionType = {
+            data: detail.transaction.input,
+            from: detail.transaction.from,
+            to: detail.transaction.to,
+            nonce: detail.transaction.nonce,
+            value: detail.transaction.value,
+            gasLimit: detail.transaction.gasLimit,
+            maxFeePerGas: detail.transaction.maxFeePerGas,
+            maxPriorityFeePerGas: detail.transaction.maxPriorityFeePerGas,
+            chainId: detail.transaction.chainId,
+          };
+          transactions.push(tx);
+        }
 
-      setTransaction({
-        ...txData,
-        nonce: await getNonce(transaction.from, chainId),
-      });
+        setNetworkFee(
+          `${details.totalFee.formattedAlt} ${details.totalFee.symbol}`,
+        );
 
-      setBridgingTransactions(transactions);
-      setFundingFrom(routes.funding);
-    } else {
-      setRoutingStatus(result.status);
-      await calculateInitialTxFees();
-    }
+        const initialTransaction: TransactionType = {
+          data: details.initialTransactionDetails.transaction.input,
+          from: details.initialTransactionDetails.transaction.from,
+          to: details.initialTransactionDetails.transaction.to,
+          nonce: details.initialTransactionDetails.transaction.nonce,
+          value: details.initialTransactionDetails.transaction.value,
+          gasLimit: details.initialTransactionDetails.transaction.gasLimit,
+          maxFeePerGas:
+            details.initialTransactionDetails.transaction.maxFeePerGas,
+          maxPriorityFeePerGas:
+            details.initialTransactionDetails.transaction.maxPriorityFeePerGas,
+          chainId: details.initialTransactionDetails.transaction.chainId,
+        };
 
+        setTransaction(initialTransaction);
+        setBridgingTransactions(transactions);
+        setFundingFrom(routes.funding);
+      } else {
+        setRoutingStatus(result.status);
+        await calculateInitialTxFees();
+      }
+    } catch (e) {
+      console.log('error', e);
+      const error = e as Error;
+      setRoutingStatus(error.message);
+      setHasError(true);
+    }
     setFetchingRoutes(false);
     setFetchingGas(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/wallets/rn_cli_wallet/src/utils/EIP155WalletUtil.ts b/wallets/rn_cli_wallet/src/utils/EIP155WalletUtil.ts
@@ -3,6 +3,7 @@ import EIP155Lib from '../lib/EIP155Lib';
 import {ethers} from 'ethers';
 import {PresetsUtil} from '../utils/PresetsUtil';
 import {getAbiByPrefix, parseChainId} from './HelperUtil';
+import {TransactionType} from './TypesUtil';
 
 export let wallet1: EIP155Lib;
 export let wallet2: EIP155Lib;
@@ -58,7 +59,10 @@ export async function replaceMnemonic(mnemonicOrPrivateKey: string) {
   }
 }
 
-export async function calculateEip155Gas(transaction: any, chainId: string) {
+export async function calculateEip155Gas(
+  transaction: TransactionType,
+  chainId: string,
+) {
   console.log('calculateEip155Gas:', chainId);
   const chainData = PresetsUtil.getChainData(parseChainId(chainId));
   let provider = new ethers.providers.JsonRpcProvider(chainData.rpcUrl);
@@ -77,7 +81,18 @@ export async function calculateEip155Gas(transaction: any, chainId: string) {
   // Calculate the max fee per gas (base fee + priority fee)
   const maxFeePerGas = baseFee!.add(maxPriorityFeePerGas);
 
-  const gasLimit = ethers.BigNumber.from(0x05b6a8);
+  let gasLimit;
+  try {
+    gasLimit = await provider.estimateGas({
+      ...transaction,
+      chainId: chainData.id,
+    });
+    console.log('Gas Limit estimated:', gasLimit.toString());
+  } catch (error) {
+    console.error('Error estimating gas:', error);
+    gasLimit = ethers.BigNumber.from(0x05b6a8);
+  }
+
   // Log the details of the gas fees
   console.log('Base Fee:', ethers.utils.formatUnits(baseFee!, 'gwei'), 'Gwei');
   console.log(
@@ -124,7 +139,7 @@ export async function getNonce(address: string, chainId: string) {
 
   const nonce = await provider.getTransactionCount(address);
   console.log('getNonce:', nonce);
-  return nonce;
+  return nonce.toString();
 }
 
 export async function getTransferDetails(
diff --git a/wallets/rn_cli_wallet/src/utils/TypesUtil.ts b/wallets/rn_cli_wallet/src/utils/TypesUtil.ts
@@ -112,3 +112,15 @@ export type Chain = {
   rpcUrl: string;
   blockExplorer: string;
 };
+
+export type TransactionType = {
+  chainId: string;
+  from: string;
+  to: string;
+  value: string;
+  data: string;
+  gasLimit: string;
+  nonce: string;
+  maxFeePerGas: string;
+  maxPriorityFeePerGas: string;
+};
diff --git a/wallets/rn_cli_wallet/yarn.lock b/wallets/rn_cli_wallet/yarn.lock
@@ -3392,9 +3392,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reown/walletkit@npm:1.1.1-canary-ca-3":
-  version: 1.1.1-canary-ca-3
-  resolution: "@reown/walletkit@npm:1.1.1-canary-ca-3"
+"@reown/walletkit@npm:1.1.1-canary-ca-10":
+  version: 1.1.1-canary-ca-10
+  resolution: "@reown/walletkit@npm:1.1.1-canary-ca-10"
   dependencies:
     "@walletconnect/core": 2.17.3
     "@walletconnect/jsonrpc-provider": 1.0.14
@@ -3403,7 +3403,7 @@ __metadata:
     "@walletconnect/sign-client": 2.17.3
     "@walletconnect/types": 2.17.3
     "@walletconnect/utils": 2.17.3
-  checksum: 50fb9e7d25ccee2fdff89d6ac771d4d2b92fce96f62f436a6e4a040d4427959bb569bfbdaf1c4d29eff8ee4ca3ebfb902ec6c26d16567bfb57f7345e53e58b3c
+  checksum: 23b98816a192a72385d3fbdffa5b6f739d336885d60be03792173e41b368dfecece1d4dbb968b96d9fc4aec7a6e48a7a65be3138e4f6b99801e9ecff3bc2da87
   languageName: node
   linkType: hard
 
@@ -4431,9 +4431,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@walletconnect/react-native-compat@npm:2.17.2-canary-ca-5":
-  version: 2.17.2-canary-ca-5
-  resolution: "@walletconnect/react-native-compat@npm:2.17.2-canary-ca-5"
+"@walletconnect/react-native-compat@npm:2.17.2-canary-ca-6":
+  version: 2.17.2-canary-ca-6
+  resolution: "@walletconnect/react-native-compat@npm:2.17.2-canary-ca-6"
   dependencies:
     events: 3.3.0
     fast-text-encoding: 1.0.6
@@ -4447,7 +4447,7 @@ __metadata:
   peerDependenciesMeta:
     expo-application:
       optional: true
-  checksum: 9ea0b26165ca94062577de8aafe4c93a69d1703878d68480792020c1ea4ce43c10e87ce75f6f0cb5ed647fabaae6ffb3204899efef590787b905539c0d26b7f6
+  checksum: 4a9c4c7b5f07429f5439f254fa519371f10436119ecf6af5e56e7fb0dfd2472c79a612ef3d97a345cacc1897c9ae9a0cdfd5d0ff09c0859ad377a1d42c2d2cff
   languageName: node
   linkType: hard
 
@@ -13305,13 +13305,13 @@ __metadata:
     "@react-navigation/native-stack": 6.10.1
     "@react-navigation/stack": 6.4.1
     "@reown/appkit-ui-react-native": 1.0.1
-    "@reown/walletkit": 1.1.1-canary-ca-3
+    "@reown/walletkit": 1.1.1-canary-ca-10
     "@sentry/react-native": 5.32.0
     "@types/lodash.clonedeep": ^4.5.9
     "@types/react": ^18.2.6
     "@types/react-test-renderer": ^18.0.0
     "@walletconnect/core": 2.17.2
-    "@walletconnect/react-native-compat": 2.17.2-canary-ca-5
+    "@walletconnect/react-native-compat": 2.17.2-canary-ca-6
     babel-jest: ^29.6.3
     babel-plugin-module-resolver: ^5.0.0
     dayjs: 1.11.11

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ android {`
`89`	`89`	`applicationId "com.walletconnect.web3wallet.rnsample"`
`90`	`90`	`minSdkVersion rootProject.ext.minSdkVersion`
`91`	`91`	`targetSdkVersion rootProject.ext.targetSdkVersion`
`92`		`- versionCode 52`
	`92`	`+ versionCode 53`
`93`	`93`	`versionName "1.0"`
`94`	`94`	`resValue "string", "build_config_package", "com.walletconnect.web3wallet.rnsample"`
`95`	`95`	`}`