Add listeners for session update and delete event (#8)

* Add event listeners for session update and delete

* Use container instead of grid

* Rename variable

src/App.tsx

@@ -6,10 +6,12 @@ import SignWithEthereum from "./pages/SignWithEthereum";
 import SignWithCosmos from "./pages/SignWithCosmos";
 import PageNotFound from "./pages/PageNotFound";
 import SignPageLayout from "./layout/SignPageLayout";
+import { WalletConnectProvider } from "./context/WalletConnectContext";
 
 function App() {
   return (
     <Router>
+      <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />} >
@@ -18,6 +20,7 @@ function App() {
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Routes>
+      </WalletConnectProvider >
     </Router>
   );
 }

src/context/WalletConnectContext.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
 } from "react";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router-dom";
 
 import SignClient from "@walletconnect/sign-client";
 import { WalletConnectModal } from "@walletconnect/modal";
@@ -45,6 +46,7 @@ export const WalletConnectProvider = ({
 }) => {
   const [signClient, setSignClient] = useState<SignClient>();
   const [session, setSession] = useState<SessionTypes.Struct | null>(null);
+  const navigate = useNavigate()
 
   const disconnect = useCallback(async () => {
     if (signClient && session) {
@@ -65,6 +67,23 @@ export const WalletConnectProvider = ({
     }
   }, []);
 
+  const subscribeToEvents = useCallback(
+    async (client: SignClient) => {
+      client.on("session_update", ({ topic, params }) => {
+        const { namespaces } = params;
+        const currentSession = client.session.get(topic);
+        const updatedSession = { ...currentSession, namespaces };
+        setSession(updatedSession);
+      });
+
+      client.on("session_delete", () => {
+        setSession(null);
+        navigate("/")
+      });
+    },
+    [navigate]
+  );
+
   const createClient = useCallback(async () => {
     const signClient = await SignClient.init({
       projectId: PROJECT_ID,
@@ -77,8 +96,9 @@ export const WalletConnectProvider = ({
     });
 
     setSignClient(signClient);
+    await subscribeToEvents(signClient);
     await checkPersistedState(signClient);
-  }, [checkPersistedState]);
+  }, [checkPersistedState, subscribeToEvents])
 
   const connect = async () => {
     if (!signClient) {

src/index.tsx

@@ -4,7 +4,6 @@ import { Buffer } from "buffer";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { WalletConnectProvider } from './context/WalletConnectContext';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -13,9 +12,7 @@ const root = ReactDOM.createRoot(
 globalThis.Buffer = Buffer;
 root.render(
   <React.StrictMode>
-    <WalletConnectProvider>
     <App />
-    </WalletConnectProvider>
   </React.StrictMode>
 );
 

src/pages/ConnectWallet.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom'
 
-import { Typography, Button, Box, Grid, Avatar } from '@mui/material';
+import { Typography, Button, Box, Container, Avatar } from '@mui/material';
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
@@ -10,18 +10,18 @@ const ConnectWallet = () => {
 
   const navigate = useNavigate()
 
+  useEffect(() => {
     if (session) {
       navigate("/sign-with-ethereum")
     }
+  }, [session, navigate])
+
   const handler = async () => {
     await connect();
   }
 
   return (
-    <Grid container spacing={2}>
+    <Container maxWidth="lg">
-      <Grid item xs={2}>
-      </Grid>
-      <Grid item xs={8}>
       <Box display="flex" flexDirection="column" alignItems="center" height="50vh" justifyContent="center" padding={5}>
         <Box display="flex" alignItems="center">
           <Avatar alt="Urbit logo" src="https://avatars.githubusercontent.com/u/5237680?s=200&v=4" />
@@ -36,10 +36,7 @@ const ConnectWallet = () => {
           Connect
         </Button>
       </Box>
-      </Grid>
+    </Container>
-      <Grid item xs={2}>
-      </Grid>
-    </Grid>
   );
 };
 

src/pages/SignWithEthereum.tsx

@@ -120,7 +120,7 @@ const SignWithEthereum = () => {
             ))}
           </Select>
 
-          { Boolean(ethAddress) && (<Box
+          {(Boolean(ethAddress) && Boolean(cosmosAddress)) && (<Box
             sx={{
               backgroundColor: "lightgray",
               padding: 3,