Display pop-up when chains are not supported (#103)

* Check for unsupported namespace

* Add check for common walletchains and networks chains

* Format code

* Display unsupported chains

* Display Dapp info in modal

* Refactor code

* Reject request if chains are not supported

* Reject sessions

* Remove isVisible state

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 (
-    <Modal visible={visible} animationType="slide" transparent>
-      <View style={styles.modalOuterContainer}>
-        <View style={styles.modalContentContainer}>
-          <ScrollView showsVerticalScrollIndicator={true}>
+    <View>
+      {chainError !== '' ? (
+        <Modal visible={visible} animationType="slide" transparent>
+          <View style={styles.modalContentContainer}>
             <View style={styles.container}>
               {icon && (
                 <>
@@ -190,60 +219,91 @@ const PairingModal = ({
 
               <Text variant="titleMedium">{dappName}</Text>
               <Text variant="bodyMedium">{url}</Text>
-              <View style={styles.marginVertical8} />
-              <Text variant="titleMedium">Connect to this site?</Text>
-
-              {walletConnectData.walletConnectMethods.length > 0 && (
-                <View>
-                  <Text variant="titleMedium">Chains:</Text>
-                  {walletConnectData.walletConnectChains.map(chain => (
-                    <Text style={styles.centerText} key={chain}>
-                      {chain}
-                    </Text>
-                  ))}
-                </View>
-              )}
-
-              {walletConnectData.walletConnectMethods.length > 0 && (
-                <View style={styles.marginVertical8}>
-                  <Text variant="titleMedium">Methods Requested:</Text>
-                  {walletConnectData.walletConnectMethods.map(method => (
-                    <Text style={styles.centerText} key={method}>
-                      {method}
-                    </Text>
-                  ))}
-                </View>
-              )}
-
-              {walletConnectData.walletConnectEvents.length > 0 && (
-                <View style={styles.marginVertical8}>
-                  <Text variant="titleMedium">Events Requested:</Text>
-                  {walletConnectData.walletConnectEvents.map(event => (
-                    <Text style={styles.centerText} key={event}>
-                      {event}
-                    </Text>
-                  ))}
-                </View>
-              )}
+              <Text variant="titleMedium">{chainError}</Text>
+            </View>
+            <View style={styles.flexRow}>
+              <Button mode="outlined" onPress={handleClose}>
+                Close
+              </Button>
             </View>
-          </ScrollView>
-
-          <View style={styles.flexRow}>
-            <Button
-              mode="contained"
-              onPress={handleAccept}
-              loading={isLoading}
-              disabled={isLoading}>
-              {isLoading ? 'Connecting' : 'Yes'}
-            </Button>
-            <View style={styles.space} />
-            <Button mode="outlined" onPress={handleReject}>
-              No
-            </Button>
           </View>
-        </View>
-      </View>
-    </Modal>
+        </Modal>
+      ) : (
+        <Modal visible={visible} animationType="slide" transparent>
+          <View style={styles.modalOuterContainer}>
+            <View style={styles.modalContentContainer}>
+              <ScrollView showsVerticalScrollIndicator={true}>
+                <View style={styles.container}>
+                  {icon && (
+                    <>
+                      {icon.endsWith('.svg') ? (
+                        <View style={styles.dappLogo}>
+                          <SvgUri height="50" width="50" uri={icon} />
+                        </View>
+                      ) : (
+                        <Image style={styles.dappLogo} source={{ uri: icon }} />
+                      )}
+                    </>
+                  )}
+
+                  <Text variant="titleMedium">{dappName}</Text>
+                  <Text variant="bodyMedium">{url}</Text>
+                  <View style={styles.marginVertical8} />
+                  <Text variant="titleMedium">Connect to this site?</Text>
+
+                  {walletConnectData.walletConnectMethods.length > 0 && (
+                    <View>
+                      <Text variant="titleMedium">Chains:</Text>
+                      {walletConnectData.walletConnectChains.map(chain => (
+                        <Text style={styles.centerText} key={chain}>
+                          {chain}
+                        </Text>
+                      ))}
+                    </View>
+                  )}
+
+                  {walletConnectData.walletConnectMethods.length > 0 && (
+                    <View style={styles.marginVertical8}>
+                      <Text variant="titleMedium">Methods Requested:</Text>
+                      {walletConnectData.walletConnectMethods.map(method => (
+                        <Text style={styles.centerText} key={method}>
+                          {method}
+                        </Text>
+                      ))}
+                    </View>
+                  )}
+
+                  {walletConnectData.walletConnectEvents.length > 0 && (
+                    <View style={styles.marginVertical8}>
+                      <Text variant="titleMedium">Events Requested:</Text>
+                      {walletConnectData.walletConnectEvents.map(event => (
+                        <Text style={styles.centerText} key={event}>
+                          {event}
+                        </Text>
+                      ))}
+                    </View>
+                  )}
+                </View>
+              </ScrollView>
+
+              <View style={styles.flexRow}>
+                <Button
+                  mode="contained"
+                  onPress={handleAccept}
+                  loading={isLoading}
+                  disabled={isLoading}>
+                  {isLoading ? 'Connecting' : 'Yes'}
+                </Button>
+                <View style={styles.space} />
+                <Button mode="outlined" onPress={handleReject}>
+                  No
+                </Button>
+              </View>
+            </View>
+          </View>
+        </Modal>
+      )}
+    </View>
   );
 };
 

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 =>