Handle case where wallet rejects the pairing request (#7)

* Handle case where pairing request is rejected

* Remove unused import

---------

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

src/context/WalletConnectContext.tsx

@@ -7,6 +7,7 @@ import React, {
   useEffect,
   useCallback,
 } from "react";
+import { SnackbarProvider, enqueueSnackbar } from "notistack";
 
 import SignClient from "@walletconnect/sign-client";
 import { WalletConnectModal } from "@walletconnect/modal";
@@ -20,7 +21,7 @@ interface ContextValue {
   connect: () => Promise<void>;
   session: SessionTypes.Struct | null;
   signClient: SignClient | undefined;
-  checkPersistedState: (client: SignClient)=> Promise<void>
+  checkPersistedState: (client: SignClient) => Promise<void>;
   disconnect: () => Promise<void>;
 }
 
@@ -28,7 +29,7 @@ const walletConnectContext = createContext<ContextValue>({
   connect: () => Promise.resolve(),
   session: null,
   signClient: undefined,
-  checkPersistedState: ()=> Promise.resolve(),
+  checkPersistedState: () => Promise.resolve(),
   disconnect: () => Promise.resolve(),
 });
 
@@ -37,7 +38,6 @@ const web3Modal = new WalletConnectModal({
   chains: ["eip155:1"],
 });
 
-// TODO: Disconnect session
 export const WalletConnectProvider = ({
   children,
 }: {
@@ -54,18 +54,16 @@ export const WalletConnectProvider = ({
       });
     }
 
-    setSession(null)
+    setSession(null);
   }, [signClient, session]);
 
-  const checkPersistedState = useCallback(async(client: SignClient)=>{
+  const checkPersistedState = useCallback(async (client: SignClient) => {
     if (client.session.length) {
       const lastKeyIndex = client.session.keys.length - 1;
-      const session = client.session.get(
-        client.session.keys[lastKeyIndex]
-      );
-      setSession(session)
+      const session = client.session.get(client.session.keys[lastKeyIndex]);
+      setSession(session);
     }
-  }, [])
+  }, []);
 
   const createClient = useCallback(async () => {
     const signClient = await SignClient.init({
@@ -79,8 +77,8 @@ export const WalletConnectProvider = ({
     });
 
     setSignClient(signClient);
-    await checkPersistedState(signClient)
-  }, [checkPersistedState])
+    await checkPersistedState(signClient);
+  }, [checkPersistedState]);
 
   const connect = async () => {
     if (!signClient) {
@@ -106,8 +104,13 @@ export const WalletConnectProvider = ({
 
     if (uri) {
       web3Modal.openModal({ uri });
-      const session = await approval();
-      setSession(session); // Update session state
+      try {
+        const session = await approval();
+        setSession(session);
+      } catch (error) {
+        enqueueSnackbar("User rejected pairing request", { variant: "error" });
+        console.log(error);
+      }
       web3Modal.closeModal();
     }
   };
@@ -119,34 +122,32 @@ export const WalletConnectProvider = ({
   }, [signClient, createClient]);
 
   return (
-    <walletConnectContext.Provider
-      value={{
-        connect,
-        session,
-        signClient,
-        checkPersistedState,
-        disconnect
-      }}
-    >
-      {children}
-    </walletConnectContext.Provider>
+    <>
+      <walletConnectContext.Provider
+        value={{
+          connect,
+          session,
+          signClient,
+          checkPersistedState,
+          disconnect,
+        }}
+      >
+        {children}
+      </walletConnectContext.Provider>
+      <SnackbarProvider />
+    </>
   );
 };
 
 export const useWalletConnectContext = () => {
-  const {
-    connect,
-    session,
-    signClient,
-    checkPersistedState,
-    disconnect
-  } = useContext(walletConnectContext);
+  const { connect, session, signClient, checkPersistedState, disconnect } =
+    useContext(walletConnectContext);
 
   return {
     connect,
     session,
     signClient,
     checkPersistedState,
-    disconnect
+    disconnect,
   };
 };

src/pages/ConnectWallet.tsx

@@ -15,7 +15,6 @@ const ConnectWallet = () => {
   }
   const handler = async () => {
     await connect();
-    navigate("/sign-with-ethereum")
   }
 
   return (

src/pages/SignWithCosmos.tsx

@@ -42,15 +42,11 @@ const SignWithCosmos = () => {
   }, [ethAddress, cosmosSignature, ethSignature, innerMessage]);
 
   const message = useMemo(() => {
-    return canonicalStringify(
-      {
-        msg: "Onboarding my Azimuth ID onto UrbitChain",
-        address: ethAddress,
-        payload: innerMessage,
-      },
-      null,
-      2
-    );
+    return {
+      msg: "Onboarding my Azimuth ID onto UrbitChain",
+      address: ethAddress,
+      payload: innerMessage,
+    };
   }, [ethAddress, innerMessage]);
 
   const signCosmos = async () => {
@@ -60,7 +56,7 @@ const SignWithCosmos = () => {
           msgs: [],
           fee: { amount: [], gas: "23" },
           chain_id: "cosmos:cosmoshub-4",
-          memo: message,
+          memo: canonicalStringify(message),
           account_number: "7",
           sequence: "54",
         };
@@ -106,7 +102,9 @@ const SignWithCosmos = () => {
           wordWrap: "break-word",
         }}
       >
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{message} </pre>
+        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+          {JSON.stringify(message, null, 2)}{" "}
+        </pre>
       </Box>
 
       <Box>