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,18 +6,21 @@ 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>
-      <Routes>
-        <Route path="/" element={<ConnectWallet />} />
-        <Route element={<SignPageLayout />} >
-          <Route path="/sign-with-ethereum" element={<SignWithEthereum />} />
-          <Route path="/sign-with-cosmos/:ethAddress/:ethSignature" element={<SignWithCosmos />} />
-        </Route>
-        <Route path="*" element={<PageNotFound />} />
-      </Routes>
+      <WalletConnectProvider>
+        <Routes>
+          <Route path="/" element={<ConnectWallet />} />
+          <Route element={<SignPageLayout />} >
+            <Route path="/sign-with-ethereum" element={<SignWithEthereum />} />
+            <Route path="/sign-with-cosmos/:ethAddress/:ethSignature" element={<SignWithCosmos />} />
+          </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>
+    <App />
   </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,36 +10,33 @@ const ConnectWallet = () => {
 
   const navigate = useNavigate()
 
-  if (session) {
-    navigate("/sign-with-ethereum")
-  }
+  useEffect(() => {
+    if (session) {
+      navigate("/sign-with-ethereum")
+    }
+  }, [session, navigate])
+
   const handler = async () => {
     await connect();
   }
 
   return (
-    <Grid container spacing={2}>
-      <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" />
-            <Typography variant="h4" component="h6">
-              Urbit Onboarding
-            </Typography>
-          </Box>
-          <Typography variant="h6" component="h6" style={{ marginTop: '30px' }}>
-              Connect wallet
+    <Container maxWidth="lg">
+      <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" />
+          <Typography variant="h4" component="h6">
+            Urbit Onboarding
           </Typography>
-          <Button variant="contained" onClick={handler} style={{ marginTop: '20px' }}>
-            Connect
-          </Button>
         </Box>
-      </Grid>
-      <Grid item xs={2}>
-      </Grid>
-    </Grid>
+        <Typography variant="h6" component="h6" style={{ marginTop: '30px' }}>
+          Connect wallet
+        </Typography>
+        <Button variant="contained" onClick={handler} style={{ marginTop: '20px' }}>
+          Connect
+        </Button>
+      </Box>
+    </Container>
   );
 };
 

src/pages/SignWithEthereum.tsx

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