diff --git a/src/components/PairingModal.tsx b/src/components/PairingModal.tsx index e100759..31abc13 100644 --- a/src/components/PairingModal.tsx +++ b/src/components/PairingModal.tsx @@ -24,6 +24,7 @@ const PairingModal = ({ const { accounts, currentIndex } = useAccounts(); const { selectedNetwork, networksData } = useNetworks(); const [isLoading, setIsLoading] = useState(false); + const [chainError, setChainError] = useState(''); const dappName = currentProposal?.params?.proposer?.metadata.name; const url = currentProposal?.params?.proposer?.metadata.url; @@ -96,20 +97,43 @@ const PairingModal = ({ const { optionalNamespaces, requiredNamespaces } = currentProposal.params; - const nameSpaces = await getNamespaces( - optionalNamespaces, - requiredNamespaces, - networksData, - selectedNetwork!, - accounts, - currentIndex, - ); + try { + const nameSpaces = await getNamespaces( + optionalNamespaces, + requiredNamespaces, + networksData, + selectedNetwork!, + accounts, + currentIndex, + ); + setSupportedNamespaces(nameSpaces); + } catch (err) { + setChainError((err as Error).message); - setSupportedNamespaces(nameSpaces); + const { id } = currentProposal; + await web3wallet!.rejectSession({ + id, + reason: getSdkError('UNSUPPORTED_CHAINS'), + }); + setCurrentProposal(undefined); + setWalletConnectData({ + walletConnectMethods: [], + walletConnectEvents: [], + walletConnectChains: [], + }); + } }; getSupportedNamespaces(); - }, [currentProposal, networksData, selectedNetwork, accounts, currentIndex]); + }, [ + currentProposal, + networksData, + selectedNetwork, + accounts, + currentIndex, + setCurrentProposal, + setModalVisible, + ]); const namespaces = useMemo(() => { return ( @@ -152,6 +176,11 @@ const PairingModal = ({ } }; + const handleClose = () => { + setChainError(''); + setModalVisible(false); + }; + const handleReject = async () => { if (currentProposal) { const { id } = currentProposal; @@ -171,10 +200,10 @@ const PairingModal = ({ }; return ( - - - - + + {chainError !== '' ? ( + + {icon && ( <> @@ -190,60 +219,91 @@ const PairingModal = ({ {dappName} {url} - - Connect to this site? - - {walletConnectData.walletConnectMethods.length > 0 && ( - - Chains: - {walletConnectData.walletConnectChains.map(chain => ( - - {chain} - - ))} - - )} - - {walletConnectData.walletConnectMethods.length > 0 && ( - - Methods Requested: - {walletConnectData.walletConnectMethods.map(method => ( - - {method} - - ))} - - )} - - {walletConnectData.walletConnectEvents.length > 0 && ( - - Events Requested: - {walletConnectData.walletConnectEvents.map(event => ( - - {event} - - ))} - - )} + {chainError} + + + - - - - - - - - - + + ) : ( + + + + + + {icon && ( + <> + {icon.endsWith('.svg') ? ( + + + + ) : ( + + )} + + )} + + {dappName} + {url} + + Connect to this site? + + {walletConnectData.walletConnectMethods.length > 0 && ( + + Chains: + {walletConnectData.walletConnectChains.map(chain => ( + + {chain} + + ))} + + )} + + {walletConnectData.walletConnectMethods.length > 0 && ( + + Methods Requested: + {walletConnectData.walletConnectMethods.map(method => ( + + {method} + + ))} + + )} + + {walletConnectData.walletConnectEvents.length > 0 && ( + + Events Requested: + {walletConnectData.walletConnectEvents.map(event => ( + + {event} + + ))} + + )} + + + + + + + + + + + + )} + ); }; diff --git a/src/utils/wallet-connect/helpers.ts b/src/utils/wallet-connect/helpers.ts index 306ff64..a732cc2 100644 --- a/src/utils/wallet-connect/helpers.ts +++ b/src/utils/wallet-connect/helpers.ts @@ -65,6 +65,16 @@ export const getNamespaces = async ( if (!(walletConnectChains.length > 0)) { return; } + // Check for unsupported chains + const networkChains = networksData.map( + network => `${network.namespace}:${network.chainId}`, + ); + if (!walletConnectChains.every(chain => networkChains.includes(chain))) { + const unsupportedChains = walletConnectChains.filter( + chain => !networkChains.includes(chain), + ); + throw new Error(`Unsupported chains : ${unsupportedChains.join(',')}`); + } // Get required networks const requiredNetworks = networksData.filter(network =>