Merge pull request #3 from storyprotocol/add-wallet-tos-sign-message

add SIWE and ToS

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<string>(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 (
     <ClientOnly>
       <button
-        onClick={() => open()}
+        onClick={requireSign ? signIn : () => open()}
         className={clsx({
           ['py-2 px-4 md:px-6 rounded-3xl text-white text-xs md:text-base font-semibold shadow-sm']: true,
           ['bg-sp-purple hover:bg-sp-purple-dark']: isCorrectNetwork || !isConnected,

components/Navbar/Sidebar.tsx

@@ -215,7 +215,7 @@ const Sidebar = ({ collapsed, navItems = defaultNavItems, shown, onHide }: Props
           </div>
         </div>
 
-        <Link href="/terms" className="flex flex-row my-auto pb-2">
+        <Link href="/tos.pdf" target="_blank" className="flex flex-row my-auto pb-2">
           <div
             className={classNames({
               'transition-colors duration-300': true, //animation
@@ -224,7 +224,7 @@ const Sidebar = ({ collapsed, navItems = defaultNavItems, shown, onHide }: Props
             })}
           >
             <ClientOnly>
-              <Link href="/terms" className="flex gap-2 ">
+              <Link href="/tos.pdf" target="_blank" className="flex gap-2 ">
                 {collapsed ? (
                   <DocumentCheckIcon className="w-5 h-5" />
                 ) : (

components/views/Hook/HookTableComponent.tsx

@@ -11,7 +11,7 @@ import BaseDataViewer from '../BaseDataViewer';
 const columns: ColumnDef<Hook>[] = [
   {
     accessorKey: 'txHash',
-    header: 'Txn',
+    header: 'Txn Hash',
     cell: ({ row }) => (
       <Link href={`/transactions/${row.original.txHash}`} className="capitalize font-mono underline">
         {shortenString(row.original.txHash, 20)}
@@ -20,7 +20,7 @@ const columns: ColumnDef<Hook>[] = [
   },
   {
     accessorKey: 'id',
-    header: 'ID',
+    header: 'Hook Address',
     cell: ({ row }) => (
       <Link href={`/transactions/${row.original.id}`} className="capitalize font-mono underline">
         {shortenString(row.original.id, 20)}

lib/server/platform.ts

@@ -0,0 +1,28 @@
+export async function getSignMessageRequest(walletAddress: `0x${string}`): Promise<{ signingMessage: string }> {
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/platform/web3-sign/request?walletAddress=${walletAddress}`,
+    );
+    const data = await res.json();
+    console.log({ data });
+    return data;
+  } catch (e) {
+    throw new Error('Failed to get sign message request');
+  }
+}
+
+export async function verifySignature(signature: string, walletAddress: `0x${string}`) {
+  try {
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/platform/web3-sign/verify`, {
+      method: 'POST',
+      body: JSON.stringify({
+        signature,
+        walletAddress,
+      }),
+    });
+    const response = await res.json();
+    return response;
+  } catch (e) {
+    throw new Error('Failed to verify signature');
+  }
+}