From 611ccf59d569f3832b9c261348b6c658ce2275e1 Mon Sep 17 00:00:00 2001 From: Allen Date: Thu, 7 Dec 2023 14:27:31 -0800 Subject: [PATCH 1/4] SIWE and ToS --- components/Navbar/ConnectWalletButton.tsx | 53 +++++++++++++++++++++-- lib/server/platform.ts | 28 ++++++++++++ 2 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 lib/server/platform.ts diff --git a/components/Navbar/ConnectWalletButton.tsx b/components/Navbar/ConnectWalletButton.tsx index 332ce27..ab29f14 100644 --- a/components/Navbar/ConnectWalletButton.tsx +++ b/components/Navbar/ConnectWalletButton.tsx @@ -1,20 +1,65 @@ 'use client'; + import { shortenAddress } from '@/utils'; import { useWeb3Modal } from '@web3modal/wagmi/react'; -import { useAccount, useNetwork } from 'wagmi'; +import { useAccount, useNetwork, useSignMessage } from 'wagmi'; import ClientOnly from '../../utils/ClientOnly'; import { useEffect, useState } from 'react'; import clsx from 'clsx'; import { sepolia } from 'wagmi/chains'; +import { getSignMessageRequest, verifySignature } from '@/lib/server/platform'; export default function ConnectWalletButton() { + const notConnectedText = 'Connect Wallet'; + const { open } = useWeb3Modal(); const { address, isConnected } = useAccount(); + const { signMessageAsync } = useSignMessage(); const { chain } = useNetwork(); + const [buttonText, setButtonText] = useState(notConnectedText); + const [requireSign, setRequireSign] = useState(false); const [isCorrectNetwork, setIsCorrectNetwork] = useState(false); const connectedText = address ? `Connected: ${shortenAddress(address as string)} (${chain ? chain.name : ''})` : ''; - const notConnectedText = 'Connect Wallet'; - const buttonText = isConnected ? (isCorrectNetwork ? connectedText : 'Switch to sepolia') : notConnectedText; + + useEffect(() => { + // check if address previously signed + const validatedAddress = sessionStorage.getItem('validatedAddress'); + if (isConnected) { + if (isCorrectNetwork) { + if (!validatedAddress) { + setRequireSign(true); + setButtonText('Sign Message'); + } else { + setButtonText(connectedText); + } + } else { + setButtonText('Switch to sepolia'); + } + } + }, [connectedText, isConnected, isCorrectNetwork]); + + const signIn = async () => { + try { + const chainId = chain?.id; + if (!address || !chainId) return; + + setButtonText('Signing in...'); + + const { signingMessage } = await getSignMessageRequest(address); + + console.log({ signingMessage }); + const signature = await signMessageAsync({ message: signingMessage }); + const verifyRes = await verifySignature(signature, address); + console.log({ verifyRes }); + + sessionStorage.setItem('validatedAddress', address); + setRequireSign(false); + setButtonText(connectedText); + } catch (e) { + setRequireSign(true); + setButtonText('Sign Message'); + } + }; useEffect(() => { if (chain?.id === sepolia.id) { @@ -27,7 +72,7 @@ export default function ConnectWalletButton() { return (