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) {