diff --git a/dapps/react-dapp-auth/pages/index.tsx b/dapps/react-dapp-auth/pages/index.tsx index 2ac99ac..e4ba4a3 100644 --- a/dapps/react-dapp-auth/pages/index.tsx +++ b/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(""); const [address, setAddress] = useState(""); + 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"); diff --git a/dapps/react-dapp-auth/views/SignedInView.tsx b/dapps/react-dapp-auth/views/SignedInView.tsx index 986f7b9..b8b21c6 100644 --- a/dapps/react-dapp-auth/views/SignedInView.tsx +++ b/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(); + const [balance, setBalance] = useState(); const [avatar, setAvatar] = useState(); const [isLoading, setLoading] = useState(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) { diff --git a/wallets/react-wallet-auth/src/views/AuthenticationRequestModal.tsx b/wallets/react-wallet-auth/src/views/AuthenticationRequestModal.tsx index 5c75463..d1000b0 100644 --- a/wallets/react-wallet-auth/src/views/AuthenticationRequestModal.tsx +++ b/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,27 +15,30 @@ 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 }) - - const signature = await eip155Wallets[eip155Addresses[0]].signMessage(message) - await authClient.respond( - { - id, - signature: { - s: signature, - t: 'eip191' - } - }, - iss - ) - ModalStore.close() + try { + const signature = await eip155Wallets[eip155Addresses[0]].signMessage(message) + await authClient.respond( + { + id, + signature: { + s: signature, + t: 'eip191' + } + }, + iss + ) + } catch (onApproveError) { + console.log({ onApproveError }) + } finally { + ModalStore.close() + } } }, [authenticationRequest, eip155Addresses, eip155Wallets, id, iss, message]) @@ -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() }