Handle all dapps getting updated on adding accounts (#55)

* 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

* Clean up code

* Remove question mark

* Handle all dapps getting updated

* Remove index from map

* Move hook to different folder

---------

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

components/Accounts.tsx

@@ -12,6 +12,7 @@ import HDPathDialog from './HDPathDialog';
 import AccountDetails from './AccountDetails';
 import { useAccounts } from '../context/AccountsContext';
 import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
+import { usePrevious } from '../hooks/usePrevious';
 
 const Accounts = ({
   network,
@@ -22,7 +23,8 @@ const Accounts = ({
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
   const { accounts, setAccounts } = useAccounts();
-
+  const prevEthAccountsRef = usePrevious(accounts.ethAccounts);
+  const prevCosmosAccountsRef = usePrevious(accounts.cosmosAccounts);
   const [expanded, setExpanded] = useState(false);
   const [isAccountCreating, setIsAccountCreating] = useState(false);
   const [hdDialog, setHdDialog] = useState(false);
@@ -52,30 +54,40 @@ const Accounts = ({
 
   useEffect(() => {
     const updateSessions = async () => {
-      const sessions = web3wallet.getActiveSessions();
+      const sessions = web3wallet?.getActiveSessions() || {};
-      for (const sessionId in sessions) {
+
-        const session = sessions[sessionId];
+      for (const topic in sessions) {
+        const session = sessions[topic];
         const requiredNamespaces = session.requiredNamespaces;
         const namespaces = session.namespaces;
 
-        if (namespaces.hasOwnProperty('eip155')) {
+        if (
+          namespaces.hasOwnProperty('eip155') &&
+          prevEthAccountsRef !== accounts.ethAccounts
+        ) {
           requiredNamespaces.eip155.chains?.forEach(chainId => {
             namespaces.eip155.accounts = accounts.ethAccounts.map(
               ethAccount => `${chainId}:${ethAccount.address}`,
             );
           });
+          await web3wallet.updateSession({ topic, namespaces });
         }
-        if (namespaces.hasOwnProperty('cosmos')) {
+
+        if (
+          namespaces.hasOwnProperty('cosmos') &&
+          prevCosmosAccountsRef !== accounts.cosmosAccounts
+        ) {
           requiredNamespaces?.cosmos.chains?.forEach(chainId => {
             namespaces.cosmos.accounts = accounts.cosmosAccounts.map(
               cosmosAccount => `${chainId}:${cosmosAccount.address}`,
             );
           });
+          await web3wallet.updateSession({ topic, namespaces });
         }
-        await web3wallet.updateSession({ topic: sessionId, namespaces });
       }
     };
     updateSessions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accounts]);
 
   const addAccountHandler = async () => {

components/SignRequest.tsx

@@ -39,7 +39,9 @@ const SignRequest = ({ route }: SignRequestProps) => {
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
   const isCosmosSignDirect = useMemo(() => {
-    const requestParams = route.params!.requestEvent.params.request;
+    const requestParams = route.params!.requestEvent
+      ? route.params!.requestEvent.params.request
+      : {};
 
     return requestParams.method === 'cosmos_signDirect';
   }, [route.params]);

components/WalletConnect.tsx

@@ -16,7 +16,7 @@ export default function WalletConnect() {
       topic: sessionId,
       reason: getSdkError('USER_DISCONNECTED'),
     });
-    const sessions = web3wallet.getActiveSessions();
+    const sessions = web3wallet?.getActiveSessions() || {};
     setActiveSessions(sessions);
     return;
   };
@@ -34,31 +34,29 @@ export default function WalletConnect() {
             <Text variant="titleMedium">Active Sessions</Text>
           </View>
           <List.Section>
-            {Object.entries(activeSessions).map(
+            {Object.entries(activeSessions).map(([sessionId, session]) => (
-              ([sessionId, session], index) => (
+              <List.Item
-                <List.Item
+                style={{ paddingLeft: 12, borderBottomWidth: 0.5 }}
-                  style={{ paddingLeft: 12, borderBottomWidth: 0.5 }}
+                key={sessionId}
-                  key={sessionId}
+                title={`${session.peer.metadata.name}`}
-                  title={`${session.peer.metadata.name}`}
+                descriptionNumberOfLines={7}
-                  descriptionNumberOfLines={7}
+                //TODO: Refactor
-                  //TODO: Refactor
+                description={`${sessionId} \n\n${session.peer.metadata.url}\n\n${session.peer.metadata.description}`}
-                  description={`${sessionId} \n\n${session.peer.metadata.url}\n\n${session.peer.metadata.description}`}
+                left={() => (
-                  left={() => (
+                  <Image
-                    <Image
+                    style={styles.dappLogo}
-                      style={styles.dappLogo}
+                    source={{ uri: session.peer.metadata.icons[0] }}
-                      source={{ uri: session.peer.metadata.icons[0] }}
+                  />
-                    />
+                )}
-                  )}
+                right={() => (
-                  right={() => (
+                  <TouchableOpacity
-                    <TouchableOpacity
+                    onPress={() => disconnect(sessionId)}
-                      onPress={() => disconnect(sessionId)}
+                    style={{ display: 'flex', justifyContent: 'center' }}>
-                      style={{ display: 'flex', justifyContent: 'center' }}>
+                    <List.Icon icon="close" />
-                      <List.Icon icon="close" />
+                  </TouchableOpacity>
-                    </TouchableOpacity>
+                )}
-                  )}
+              />
-                />
+            ))}
-              ),
-            )}
           </List.Section>
         </>
       ) : (

hooks/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

index.js

@@ -22,7 +22,7 @@ export default function Main() {
     },
   };
   return (
-    <PaperProvider>
+    <PaperProvider theme={'light'}>
       <AccountsProvider>
         <WalletConnectProvider>
           <NavigationContainer linking={linking}>