fix: implements dynamic session list (#413)

* fix: implements dynamic session list

* chore: updates log msg

---------

Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>

advanced/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts

@@ -125,7 +125,12 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
       web3wallet.on('auth_request', onAuthRequest)
       // TODOs
       web3wallet.engine.signClient.events.on('session_ping', data => console.log('ping', data))
-      web3wallet.on('session_delete', data => console.log('delete', data))
+      web3wallet.on('session_delete', data => {
+        console.log('session_delete event received', data)
+        SettingsStore.setSessions(Object.values(web3wallet.getActiveSessions()))
+      })
+      // load sessions on init
+      SettingsStore.setSessions(Object.values(web3wallet.getActiveSessions()))
     }
   }, [initialized, onAuthRequest, onSessionProposal, onSessionRequest])
 }

advanced/wallets/react-wallet-v2/src/pages/sessions.tsx

@@ -1,11 +1,12 @@
 import PageHeader from '@/components/PageHeader'
 import SessionCard from '@/components/SessionCard'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import SettingsStore from '@/store/SettingsStore'
 import { Text } from '@nextui-org/react'
-import { Fragment, useState } from 'react'
+import { Fragment } from 'react'
+import { useSnapshot } from 'valtio'
 
 export default function SessionsPage() {
-  const [sessions] = useState(Object.values(web3wallet.getActiveSessions()))
+  const { sessions } = useSnapshot(SettingsStore.state)
 
   if (!sessions.length) {
     return (

advanced/wallets/react-wallet-v2/src/store/SettingsStore.ts

@@ -1,4 +1,4 @@
-import { Verify } from '@walletconnect/types'
+import { Verify, SessionTypes } from '@walletconnect/types'
 import { proxy } from 'valtio'
 
 /**
@@ -19,6 +19,7 @@ interface State {
   relayerRegionURL: string
   activeChainId: string
   currentRequestVerifyContext?: Verify.Context
+  sessions: SessionTypes.Struct[]
 }
 
 /**
@@ -37,7 +38,8 @@ const state = proxy<State>({
   tronAddress: '',
   tezosAddress: '',
   kadenaAddress: '',
-  relayerRegionURL: ''
+  relayerRegionURL: '',
+  sessions: []
 })
 
 /**
@@ -94,6 +96,9 @@ const SettingsStore = {
   setCurrentRequestVerifyContext(context: Verify.Context) {
     state.currentRequestVerifyContext = context
   },
+  setSessions(sessions: SessionTypes.Struct[]) {
+    state.sessions = sessions
+  },
 
   toggleTestNets() {
     state.testNets = !state.testNets
@@ -102,7 +107,7 @@ const SettingsStore = {
     } else {
       localStorage.removeItem('TEST_NETS')
     }
-  },
+  }
 }
 
 export default SettingsStore

advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx

@@ -33,6 +33,7 @@ import ChainAddressMini from '@/components/ChainAddressMini'
 import { getChainData } from '@/data/chainsUtil'
 import RequestModal from './RequestModal'
 import { useSnapshot } from 'valtio'
+import SettingsStore from '@/store/SettingsStore'
 
 const StyledText = styled(Text, {
   fontWeight: 400
@@ -232,6 +233,7 @@ export default function SessionProposalModal() {
           id: proposal.id,
           namespaces
         })
+        SettingsStore.setSessions(Object.values(web3wallet.getActiveSessions()))
       } catch (e) {
         setIsLoadingApprove(false)
         styledToast((e as Error).message, 'error')