From 2f2cc8f2d6714e15a992f36f9488351e8ccd1df6 Mon Sep 17 00:00:00 2001
From: Gancho Radkov <43912948+ganchoradkov@users.noreply.github.com>
Date: Mon, 15 Jan 2024 15:09:47 +0200
Subject: [PATCH] fix: implements dynamic session list (#413)

* fix: implements dynamic session list

* chore: updates log msg

---------

Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
---
 .../src/hooks/useWalletConnectEventsManager.ts        |  7 ++++++-
 .../wallets/react-wallet-v2/src/pages/sessions.tsx    |  7 ++++---
 .../react-wallet-v2/src/store/SettingsStore.ts        | 11 ++++++++---
 .../src/views/SessionProposalModal.tsx                |  2 ++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/advanced/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts b/advanced/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
index c0c7629..af4f6c2 100644
--- a/advanced/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
+++ b/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])
 }
diff --git a/advanced/wallets/react-wallet-v2/src/pages/sessions.tsx b/advanced/wallets/react-wallet-v2/src/pages/sessions.tsx
index cd785f7..f51c8bc 100644
--- a/advanced/wallets/react-wallet-v2/src/pages/sessions.tsx
+++ b/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 (
diff --git a/advanced/wallets/react-wallet-v2/src/store/SettingsStore.ts b/advanced/wallets/react-wallet-v2/src/store/SettingsStore.ts
index 89a682d..56edf6a 100644
--- a/advanced/wallets/react-wallet-v2/src/store/SettingsStore.ts
+++ b/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
diff --git a/advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
index ae73ad9..60aed4d 100644
--- a/advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
+++ b/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')