fix(error-handling): close modal on reject and fix overflow error (#147)

* fix(error-handling): improve auth examples error handling & close modal on auth request rejection

* fix(bignum-overflow): convert bignumber to string to avoid overflow

dapps/react-dapp-auth/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, useToast } from "@chakra-ui/react";
 import AuthClient, { generateNonce } from "@walletconnect/auth-client";
 import { Web3Modal } from "@web3modal/standalone";
 import type { NextPage } from "next";
@@ -23,6 +23,7 @@ const Home: NextPage = () => {
   const [hasInitialized, setHasInitialized] = useState(false);
   const [uri, setUri] = useState<string>("");
   const [address, setAddress] = useState<string>("");
+  const toast = useToast();
 
   const onSignIn = useCallback(() => {
     if (!client) return;
@@ -66,15 +67,26 @@ const Home: NextPage = () => {
     client.on("auth_response", ({ params }) => {
       if ("code" in params) {
         console.error(params);
-        return;
+        return web3Modal.closeModal();
       }
       if ("error" in params) {
         console.error(params.error);
-        return;
+        if ("message" in params.error) {
+          toast({
+            status: "error",
+            title: params.error.message,
+          });
         }
+        return web3Modal.closeModal();
+      }
+      toast({
+        status: "success",
+        title: "Auth request successfully approved",
+        colorScheme: "whatsapp",
+      });
       setAddress(params.result.p.iss.split(":")[4]);
     });
-  }, [client]);
+  }, [client, toast]);
 
   const [view, changeView] = useState<"default" | "qr" | "signedIn">("default");
 

dapps/react-dapp-auth/views/SignedInView.tsx

@@ -14,7 +14,7 @@ import { providers } from "ethers";
 import { useCallback, useEffect, useState } from "react";
 
 const SignedInView: React.FC<{ address: string }> = ({ address }) => {
-  const [balance, setBalance] = useState<number>();
+  const [balance, setBalance] = useState<string>();
   const [avatar, setAvatar] = useState<string | null>();
   const [isLoading, setLoading] = useState<boolean>(false);
 
@@ -25,9 +25,9 @@ const SignedInView: React.FC<{ address: string }> = ({ address }) => {
         `https://rpc.walletconnect.com/v1/?chainId=eip155:1&projectId=${process.env.NEXT_PUBLIC_PROJECT_ID}`
       );
       const avatar = await provider.getAvatar(address);
-      const balance = await provider.getBalance(address);
+      const bigNumBalance = await provider.getBalance(address);
       setAvatar(avatar);
-      setBalance(balance.toNumber());
+      setBalance(bigNumBalance.toString());
       setLoading(false);
     };
     if (address) {

wallets/react-wallet-auth/src/views/AuthenticationRequestModal.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useCallback, useEffect, useState } from 'react'
 import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
-import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Modal, Row, Text } from '@nextui-org/react'
 import { createOrRestoreEIP155Wallet } from '@/utils/EIP155WalletUtil'
 import { authClient } from '@/utils/WalletConnectUtil'
 
@@ -15,15 +15,14 @@ export default function AuthenticationRequestModal() {
   useEffect(() => {
     if (message) return
     const address = eip155Addresses[0]
-    const iss = `did:pkh:${authenticationRequest.params.cacaoPayload.chainId}:${address}`
-    setMessage(authClient.formatMessage(authenticationRequest.params.cacaoPayload, iss))
+    const iss = `did:pkh:${params.cacaoPayload.chainId}:${address}`
+    setMessage(authClient.formatMessage(params.cacaoPayload, iss))
     setIss(iss)
-  }, [authenticationRequest.params.cacaoPayload, eip155Addresses, message])
+  }, [params.cacaoPayload, eip155Addresses, message])
 
   const onApprove = useCallback(async () => {
     if (authenticationRequest && iss && message) {
-      console.log({ eip155Wallets })
-
+      try {
         const signature = await eip155Wallets[eip155Addresses[0]].signMessage(message)
         await authClient.respond(
           {
@@ -35,8 +34,12 @@ export default function AuthenticationRequestModal() {
           },
           iss
         )
+      } catch (onApproveError) {
+        console.log({ onApproveError })
+      } finally {
         ModalStore.close()
       }
+    }
   }, [authenticationRequest, eip155Addresses, eip155Wallets, id, iss, message])
 
   if (!authenticationRequest) {
@@ -45,6 +48,22 @@ export default function AuthenticationRequestModal() {
 
   // Handle reject action
   async function onReject() {
+    if (id && iss) {
+      try {
+        await authClient.respond(
+          {
+            id,
+            error: {
+              code: 4001,
+              message: 'Auth request has been rejected'
+            }
+          },
+          iss
+        )
+      } catch (onRejectError) {
+        console.log({ onRejectError })
+      }
+    }
     ModalStore.close()
   }