Add base network and handle ethereum layer 2 transaction

src/App.tsx

@@ -146,6 +146,23 @@ const App = (): React.JSX.Element => {
             requestSessionData,
           });
           break;
+        
+        case EIP155_SIGNING_METHODS.WALLET_GET_CAPABILITIES:
+          const capabilitiesResponse = formatJsonRpcResult(id, {
+            accountManagement: true,
+            sessionManagement: true,
+            transactionCapabilities: {
+              sponsoredTransactions: true,
+            },
+            supportedAuthMethods: ['personal_sign', 'eth_sendTransaction'],
+            supportedNetworks: ['eip155:1', 'eip155:8453'],
+          });
+
+          await web3wallet!.respondSessionRequest({
+            topic,
+            response: capabilitiesResponse,
+          });
+          break;
 
         case COSMOS_METHODS.COSMOS_SIGN_DIRECT:
           const message = {

src/screens/ApproveTransfer.tsx

@@ -82,23 +82,27 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => {
     useState<BigNumber | null>();
 
   const isSufficientFunds = useMemo(() => {
-    if (!transaction.value) {
-      return;
-    }
-
     if (!balance) {
       return;
     }
 
-    const amountBigNum = BigNumber.from(String(transaction.value));
-    const balanceBigNum = BigNumber.from(balance);
-
-    if (amountBigNum.gte(balanceBigNum)) {
-      return false;
-    } else {
-      return true;
+    if (!fees) {
+      return; 
     }
-  }, [balance, transaction]);
+
+    const balanceBigNum = BigNumber.from(balance);
+    const feesBigNum = BigNumber.from(fees);
+    let totalRequiredBigNum = feesBigNum;
+
+    if (transaction.value) {
+      const amountBigNum = BigNumber.from(String(transaction.value));
+      totalRequiredBigNum = amountBigNum.add(feesBigNum);
+    } 
+
+    // Compare the user's balance with the total required amount
+    const isSufficient = balanceBigNum.gte(totalRequiredBigNum);
+    return isSufficient;
+  }, [balance, transaction.value, fees]);
 
   const requestedNetwork = networksData.find(
     networkData =>
@@ -273,8 +277,12 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => {
 
   useEffect(() => {
     if (namespace === EIP155) {
-      const ethFees = BigNumber.from(ethGasLimit ?? 0)
-        .mul(BigNumber.from(ethMaxFee ?? ethGasPrice ?? 0))
+      if (!ethGasLimit || !(ethMaxFee || ethGasPrice)){
+        return;
+      }
+
+      const ethFees = BigNumber.from(ethGasLimit)
+        .mul(BigNumber.from(ethMaxFee ?? ethGasPrice))
         .toString();
       setFees(ethFees);
     } else {
@@ -495,7 +503,7 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => {
   useEffect(() => {
     const getEthGas = async () => {
       try {
-        if (!isSufficientFunds || !provider) {
+        if (!provider) {
           return;
         }
 
@@ -568,11 +576,12 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => {
   }, [cosmosStargateClient, isSufficientFunds, sendMsg, transaction,txMemo]);
 
   useEffect(() => {
-    if (balance && !isSufficientFunds) {
+    const feesAsBigNumber = fees !== '' ? BigNumber.from(fees) : BigNumber.from('0');
+    if (balance && !isSufficientFunds && feesAsBigNumber.gt(0)) {
       setTxError('Insufficient funds');
       setIsTxErrorDialogOpen(true);
     }
-  }, [isSufficientFunds, balance]);
+  }, [isSufficientFunds, balance, fees]);
 
   return (
     <>
@@ -614,14 +623,16 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => {
             {transaction && (
               <View style={styles.approveTransfer}>
                 <DataBox label="To" data={transaction.to!} />
-                <DataBox
-                  label={`Amount (${
-                    namespace === EIP155 ? 'wei' : requestedNetwork!.nativeDenom
-                  })`}
-                  data={BigNumber.from(
-                    transaction.value?.toString(),
-                  ).toString()}
-                />
+                {transaction.value !== undefined && transaction.value !== null && (
+                  <DataBox
+                    label={`Amount (${
+                      namespace === EIP155 ? 'wei' : requestedNetwork!.nativeDenom
+                    })`}
+                    data={BigNumber.from(
+                      transaction.value?.toString(),
+                    ).toString()}
+                  />
+                )}
                 {namespace === COSMOS && (
                   <DataBox
                     label="Memo"

src/screens/SignRequest.tsx

@@ -116,7 +116,8 @@ const SignRequest = ({ route }: SignRequestProps) => {
   );
 
   useEffect(() => {
-    if (route.path) {
+    const requestEvent = route.params.requestEvent;
+    if (route.path && !requestEvent) {
       const sanitizedRoute = sanitizePath(route.path);
       sanitizedRoute &&
         retrieveData(
@@ -127,7 +128,6 @@ const SignRequest = ({ route }: SignRequestProps) => {
         );
       return;
     }
-    const requestEvent = route.params.requestEvent;
     const requestChainId = requestEvent?.params.chainId;
 
     const requestedChain = networksData.find(

src/screens/WalletConnect.tsx

@@ -43,15 +43,20 @@ export default function WalletConnect() {
                 // eslint-disable-next-line react/no-unstable-nested-components
                 left={() => (
                   <>
-                    {session.peer.metadata.icons[0].endsWith(".svg") ? (
-                      <View style={styles.dappLogo}>
-                        <Text>SvgURI peerMetaDataIcon</Text>
-                      </View>
+                    {session.peer.metadata.icons && session.peer.metadata.icons.length > 0 ? (
+                      session.peer.metadata.icons[0].endsWith(".svg") ? (
+                        <View style={styles.dappLogo}>
+                          <Text>SvgURI peerMetaDataIcon</Text>
+                        </View>
+                      ) : (
+                        <Image
+                          style={styles.dappLogo}
+                          source={{ uri: session.peer.metadata.icons[0] }}
+                        />
+                      )
                     ) : (
-                      <Image
-                        style={styles.dappLogo}
-                        source={{ uri: session.peer.metadata.icons[0] }}
-                      />
+                      // Render nothing if no icon is available
+                      <View style={styles.dappLogo} /> // Or simply null
                     )}
                   </>
                 )}

src/utils/accounts.ts

@@ -344,7 +344,7 @@ const retrieveSingleAccount = async (
     throw new Error('Accounts for given chain not found');
   }
 
-  return loadedAccounts.find(account => account.address === address);
+  return loadedAccounts.find(account => account.address.toLowerCase() === address.toLowerCase());
 };
 
 const resetWallet = async () => {

src/utils/constants.ts

@@ -40,6 +40,16 @@ export const DEFAULT_NETWORKS: NetworksFormData[] = [
     coinType: '60',
     isDefault: true,
   },
+  {
+    chainId: '8453',
+    networkName: EIP155_CHAINS['eip155:8453'].name,
+    namespace: EIP155,
+    rpcUrl: EIP155_CHAINS['eip155:8453'].rpc,
+    blockExplorerUrl: '',
+    currencySymbol: 'ETH',
+    coinType: '60',
+    isDefault: true,
+  },
   {
     chainId: 'provider',
     networkName: COSMOS_TESTNET_CHAINS['cosmos:provider'].name,

src/utils/wallet-connect/EIP155Data.ts

@@ -32,6 +32,14 @@ export const EIP155_CHAINS: Record<string, EIP155Chain> = {
     rpc: 'https://cloudflare-eth.com/',
     namespace: 'eip155',
   },
+  'eip155:8453': {
+    chainId: 8453,
+    name: 'Ethereum Layer 2',
+    logo: '/chain-logos/eip155-1.png',
+    rgb: '99, 125, 234',
+    rpc: 'https://mainnet.base.org',
+    namespace: 'eip155',
+  },
 };
 
 /**
@@ -40,4 +48,5 @@ export const EIP155_CHAINS: Record<string, EIP155Chain> = {
 export const EIP155_SIGNING_METHODS = {
   PERSONAL_SIGN: 'personal_sign',
   ETH_SEND_TRANSACTION: 'eth_sendTransaction',
+  WALLET_GET_CAPABILITIES: 'wallet_getCapabilities'
 };