Update sessions on adding accounts (#53)

* Replace QR icon with WC logo

* Change screen title

* Change title

* Display session topic in list item

* Move useEffect to WalletConnectContext

* Disconnect sessions on resetting wallet

* Update dapp session on adding account

* Update sessions inside useEffect

* Remove button from toast

* Clean up code

* Remove question mark

* Remove label from snackbar

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>

App.tsx

@@ -197,12 +197,7 @@ const App = (): React.JSX.Element => {
       <Snackbar
         visible={toastVisible}
         onDismiss={() => setToastVisible(false)}
-        action={{
+        duration={3000}>
-          label: 'Ok',
-          onPress: () => {
-            setToastVisible(false);
-          },
-        }}>
         Session approved
       </Snackbar>
     </>

components/Accounts.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
 import { Button, List, Text, useTheme } from 'react-native-paper';
 
@@ -11,6 +11,7 @@ import styles from '../styles/stylesheet';
 import HDPathDialog from './HDPathDialog';
 import AccountDetails from './AccountDetails';
 import { useAccounts } from '../context/AccountsContext';
+import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
 
 const Accounts = ({
   network,
@@ -49,6 +50,34 @@ const Accounts = ({
     }
   };
 
+  useEffect(() => {
+    const updateSessions = async () => {
+      const sessions = web3wallet.getActiveSessions();
+      for (const sessionId in sessions) {
+        const session = sessions[sessionId];
+        const requiredNamespaces = session.requiredNamespaces;
+        const namespaces = session.namespaces;
+
+        if (namespaces.hasOwnProperty('eip155')) {
+          requiredNamespaces.eip155.chains?.forEach(chainId => {
+            namespaces.eip155.accounts = accounts.ethAccounts.map(
+              ethAccount => `${chainId}:${ethAccount.address}`,
+            );
+          });
+        }
+        if (namespaces.hasOwnProperty('cosmos')) {
+          requiredNamespaces?.cosmos.chains?.forEach(chainId => {
+            namespaces.cosmos.accounts = accounts.cosmosAccounts.map(
+              cosmosAccount => `${chainId}:${cosmosAccount.address}`,
+            );
+          });
+        }
+        await web3wallet.updateSession({ topic: sessionId, namespaces });
+      }
+    };
+    updateSessions();
+  }, [accounts]);
+
   const addAccountHandler = async () => {
     setIsAccountCreating(true);
     const newAccount = await addAccount(network);

components/WalletConnect.tsx

@@ -16,7 +16,7 @@ export default function WalletConnect() {
       topic: sessionId,
       reason: getSdkError('USER_DISCONNECTED'),
     });
-    const sessions = await web3wallet?.getActiveSessions();
+    const sessions = web3wallet.getActiveSessions();
     setActiveSessions(sessions);
     return;
   };
@@ -24,7 +24,7 @@ export default function WalletConnect() {
   useEffect(() => {
     const sessions = web3wallet.getActiveSessions();
     setActiveSessions(sessions);
-  }, []);
+  }, [setActiveSessions]);
 
   return (
     <View>