From 798c840b6c9f9dd282e21d7e5853a7f4e660ef02 Mon Sep 17 00:00:00 2001 From: pranavjadhav007 Date: Wed, 9 Jul 2025 16:56:39 +0530 Subject: [PATCH 1/6] Add base network and handle ethereum layer 2 transaction --- src/App.tsx | 17 +++++++ src/screens/ApproveTransfer.tsx | 61 +++++++++++++++----------- src/screens/SignRequest.tsx | 4 +- src/screens/WalletConnect.tsx | 21 +++++---- src/utils/accounts.ts | 2 +- src/utils/constants.ts | 10 +++++ src/utils/wallet-connect/EIP155Data.ts | 9 ++++ 7 files changed, 88 insertions(+), 36 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9cbe0bf..52bbadb 100644 --- a/src/App.tsx +++ b/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 = { diff --git a/src/screens/ApproveTransfer.tsx b/src/screens/ApproveTransfer.tsx index f32e2a3..103bcc6 100644 --- a/src/screens/ApproveTransfer.tsx +++ b/src/screens/ApproveTransfer.tsx @@ -82,23 +82,27 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => { useState(); 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 && ( - + {transaction.value !== undefined && transaction.value !== null && ( + + )} {namespace === COSMOS && ( { ); 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( diff --git a/src/screens/WalletConnect.tsx b/src/screens/WalletConnect.tsx index 4728826..c007a86 100644 --- a/src/screens/WalletConnect.tsx +++ b/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") ? ( - - SvgURI peerMetaDataIcon - + {session.peer.metadata.icons && session.peer.metadata.icons.length > 0 ? ( + session.peer.metadata.icons[0].endsWith(".svg") ? ( + + SvgURI peerMetaDataIcon + + ) : ( + + ) ) : ( - + // Render nothing if no icon is available + // Or simply null )} )} diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts index 380922f..96fdaa9 100644 --- a/src/utils/accounts.ts +++ b/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 () => { diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 05a303e..173dd87 100644 --- a/src/utils/constants.ts +++ b/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, diff --git a/src/utils/wallet-connect/EIP155Data.ts b/src/utils/wallet-connect/EIP155Data.ts index f52aa05..31ace22 100644 --- a/src/utils/wallet-connect/EIP155Data.ts +++ b/src/utils/wallet-connect/EIP155Data.ts @@ -32,6 +32,14 @@ export const EIP155_CHAINS: Record = { 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 = { export const EIP155_SIGNING_METHODS = { PERSONAL_SIGN: 'personal_sign', ETH_SEND_TRANSACTION: 'eth_sendTransaction', + WALLET_GET_CAPABILITIES: 'wallet_getCapabilities' }; -- 2.45.2 From 74ebd7a412aca03f204c10194e4916a295f60c0b Mon Sep 17 00:00:00 2001 From: pranavjadhav007 Date: Thu, 10 Jul 2025 19:22:53 +0530 Subject: [PATCH 2/6] Look for fees while checking for Insufficient funds --- src/screens/ApproveTransfer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/ApproveTransfer.tsx b/src/screens/ApproveTransfer.tsx index 103bcc6..8a5c54a 100644 --- a/src/screens/ApproveTransfer.tsx +++ b/src/screens/ApproveTransfer.tsx @@ -576,8 +576,7 @@ const ApproveTransfer = ({ route }: ApproveTransferProps) => { }, [cosmosStargateClient, isSufficientFunds, sendMsg, transaction,txMemo]); useEffect(() => { - const feesAsBigNumber = fees !== '' ? BigNumber.from(fees) : BigNumber.from('0'); - if (balance && !isSufficientFunds && feesAsBigNumber.gt(0)) { + if (balance && !isSufficientFunds && !fees) { setTxError('Insufficient funds'); setIsTxErrorDialogOpen(true); } -- 2.45.2 From ce4185219a9286ee790ba08fcbd0623107c9d793 Mon Sep 17 00:00:00 2001 From: pranavjadhav007 Date: Fri, 11 Jul 2025 19:26:21 +0530 Subject: [PATCH 3/6] Add selectors for buttons --- src/App.tsx | 9 ++++---- src/components/PairingModal.tsx | 32 +++++++++++++++----------- src/screens/AddSession.tsx | 2 +- src/screens/SignRequest.tsx | 1 + src/utils/constants.ts | 2 ++ src/utils/wallet-connect/EIP155Data.ts | 4 +++- 6 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 52bbadb..52b76ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -148,14 +148,14 @@ const App = (): React.JSX.Element => { break; case EIP155_SIGNING_METHODS.WALLET_GET_CAPABILITIES: + const supportedNetworks = networksData + .filter(network => network.namespace === EIP155) + .map(network => `${network.namespace}:${network.chainId}`); const capabilitiesResponse = formatJsonRpcResult(id, { accountManagement: true, sessionManagement: true, - transactionCapabilities: { - sponsoredTransactions: true, - }, supportedAuthMethods: ['personal_sign', 'eth_sendTransaction'], - supportedNetworks: ['eip155:1', 'eip155:8453'], + supportedNetworks: supportedNetworks, }); await web3wallet!.respondSessionRequest({ @@ -364,6 +364,7 @@ const App = (): React.JSX.Element => { // eslint-disable-next-line react/no-unstable-nested-components headerRight: () => ( - - - + + {currentProposal && namespaces && ( + + + + + + )} + diff --git a/src/screens/AddSession.tsx b/src/screens/AddSession.tsx index 430cccb..5beaa8a 100644 --- a/src/screens/AddSession.tsx +++ b/src/screens/AddSession.tsx @@ -44,7 +44,7 @@ const AddSession = () => { /> - diff --git a/src/screens/SignRequest.tsx b/src/screens/SignRequest.tsx index e7fe921..16c5bc1 100644 --- a/src/screens/SignRequest.tsx +++ b/src/screens/SignRequest.tsx @@ -310,6 +310,7 @@ const SignRequest = ({ route }: SignRequestProps) => { )} -- 2.45.2