Add signature modal and signature functionality

components/Modal/Signature.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Heading,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '@chakra-ui/react'
+import { FaFileSignature } from '@react-icons/all-files/fa/FaFileSignature'
+import useTranslation from 'next-translate/useTranslation'
+import { FC } from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSignature: () => void
+}
+
+const SignatureModal: FC<Props> = ({ isOpen, onClose, onSignature }) => {
+  const { t } = useTranslation('components')
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="sm">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Heading as="h3" variant="heading1" color="brand.black">
+            {t('modal.signature.title')}
+          </Heading>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody textAlign="center">
+          <Icon as={FaFileSignature} w={12} h={12} color="green.500" />
+          <Heading variant="heading1">{t('modal.signature.sub-title')}</Heading>
+          <Text variant="text-sm">{t('modal.signature.description')}</Text>
+        </ModalBody>
+        <ModalFooter as="div">
+          {/* TODO: add loader */}
+          <Button onClick={onSignature} mx="auto" size="md">
+            {t('modal.signature.action')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default SignatureModal

hooks/useAccount.ts

@@ -1,6 +1,6 @@
 import { useAuthenticate, useIsLoggedIn } from '@liteflow/react'
 import { JwtPayload, jwtDecode } from 'jwt-decode'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useCookies } from 'react-cookie'
 import { Connector, useAccount as useWagmiAccount } from 'wagmi'
 import { walletClientToSigner } from './useSigner'
@@ -12,6 +12,7 @@ type AccountDetail = {
   jwtToken: string | null
   logout: () => Promise<void>
   login: (connector: Connector) => Promise<void>
+  signature: (connector: Connector) => Promise<void>
 }
 
 export const COOKIE_JWT_TOKEN = 'jwt-token'
@@ -57,14 +58,6 @@ export default function useAccount(): AccountDetail {
     [isLoggedInWhileReconnect, isLoggedInToAPI],
   )
 
-  // Reconnect based on the token and mark as logged in
-  useEffect(() => {
-    if (isLoggedInToAPI) return
-    if (!isReconnecting) return
-    if (!jwt) return
-    setAuthenticationToken(jwt.token)
-  }, [isLoggedInToAPI, isReconnecting, jwt, setAuthenticationToken])
-
   const login = useCallback(
     async (connector: Connector) => {
       const wallet = await connector.getWalletClient()
@@ -73,6 +66,14 @@ export default function useAccount(): AccountDetail {
       if (jwt && currentAddress === jwt.address) {
         return setAuthenticationToken(jwt.token)
       }
+    },
+    [jwt, setAuthenticationToken],
+  )
+
+  const signature = useCallback(
+    async (connector: Connector) => {
+      const wallet = await connector.getWalletClient()
+      const signer = walletClientToSigner(wallet)
       const { jwtToken } = await authenticate(signer)
 
       const newJwt = jwtDecode<JwtPayload>(jwtToken)
@@ -86,7 +87,7 @@ export default function useAccount(): AccountDetail {
           : {}),
       })
     },
-    [jwt, authenticate, setAuthenticationToken, setCookie],
+    [authenticate, setCookie],
   )
 
   // Server side
@@ -98,6 +99,7 @@ export default function useAccount(): AccountDetail {
       isConnected: !!jwt,
       logout,
       login,
+      signature,
     }
   }
 
@@ -108,5 +110,6 @@ export default function useAccount(): AccountDetail {
     isConnected,
     logout,
     login,
+    signature,
   }
 }

locales/en/components.json

@@ -475,6 +475,12 @@
       "title": "Sign in with your wallet",
       "description": "Connect with one of the following options.",
       "alternative": "Or sign in with"
+    },
+    "signature": {
+      "title": "Signature",
+      "sub-title": "Verify your account",
+      "description": "To complete the connection, you must sign a message in your wallet to verify that you are the owner of this account.",
+      "action": "Send message"
     }
   },
   "back": "Go back",

locales/es-mx/components.json

@@ -475,6 +475,12 @@
       "title": "Inicia sesión con tu Wallet",
       "description": "Conéctate con alguna de las siguientes opciones:",
       "alternative": "O inicia sesión con:"
+    },
+    "signature": {
+      "title": "Signature",
+      "sub-title": "Verify your account",
+      "description": "To complete the connection, you must sign a message in your wallet to verify that you are the owner of this account.",
+      "action": "Send message"
     }
   },
   "back": "Volver",

locales/ja/components.json

@@ -475,6 +475,12 @@
       "title": "ウォレットでサインインする",
       "description": "次のいずれかのオプションを使用して接続します。",
       "alternative": "または、"
+    },
+    "signature": {
+      "title": "Signature",
+      "sub-title": "Verify your account",
+      "description": "To complete the connection, you must sign a message in your wallet to verify that you are the owner of this account.",
+      "action": "Send message"
     }
   },
   "back": "戻る",

locales/zh-cn/components.json

@@ -475,6 +475,12 @@
       "title": "使用钱包登录",
       "description": "使用以下选项之一进行连接。",
       "alternative": "或使用"
+    },
+    "signature": {
+      "title": "Signature",
+      "sub-title": "Verify your account",
+      "description": "To complete the connection, you must sign a message in your wallet to verify that you are the owner of this account.",
+      "action": "Send message"
     }
   },
   "back": "返回",

pages/_app.tsx

@@ -1,7 +1,7 @@
 import { ApolloProvider } from '@apollo/client'
 import Bugsnag from '@bugsnag/js'
 import BugsnagPluginReact from '@bugsnag/plugin-react'
-import { Box, ChakraProvider } from '@chakra-ui/react'
+import { Box, ChakraProvider, useDisclosure } from '@chakra-ui/react'
 import { LiteflowProvider } from '@liteflow/react'
 import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit'
 import '@rainbow-me/rainbowkit/styles.css'
@@ -18,11 +18,12 @@ import React, {
   Fragment,
   JSX,
   PropsWithChildren,
+  useCallback,
   useEffect,
   useMemo,
   useState,
 } from 'react'
-import { Cookies, CookiesProvider } from 'react-cookie'
+import { Cookies, CookiesProvider, useCookies } from 'react-cookie'
 import {
   WagmiConfig,
   useDisconnect,
@@ -31,6 +32,7 @@ import {
 import getClient from '../client'
 import CartContext from '../components/CartContext'
 import Footer from '../components/Footer/Footer'
+import SignatureModal from '../components/Modal/Signature'
 import Navbar from '../components/Navbar/Navbar'
 import connectors from '../connectors'
 import getEnvironment, { Environment, EnvironmentContext } from '../environment'
@@ -125,14 +127,18 @@ function AccountProvider({
   onError,
 }: PropsWithChildren<{ onError: (code: number) => void }>) {
   const { LITEFLOW_API_KEY, BASE_URL } = useEnvironment()
-  const { login, jwtToken, logout } = useAccount()
+  const { jwtToken, login, logout, signature } = useAccount()
   const { disconnect } = useDisconnect()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [cookies] = useCookies<string, COOKIES>([COOKIE_JWT_TOKEN])
 
   const { connector } = useWagmiAccount({
     async onConnect({ connector }) {
       if (!connector) return
       try {
         await login(connector)
+        // jwtToken from useAccount is null on refresh, so we need to check the cookies
+        if (!cookies[COOKIE_JWT_TOKEN]) onOpen()
       } catch (e: any) {
         disconnect()
       }
@@ -142,6 +148,17 @@ function AccountProvider({
     },
   })
 
+  const onSignature = useCallback(async () => {
+    if (!connector) return
+    try {
+      await signature(connector)
+    } catch (e: any) {
+      disconnect()
+    } finally {
+      onClose()
+    }
+  }, [connector, disconnect, onClose, signature])
+
   // handle change of account
   useEffect(() => {
     if (!connector) return
@@ -150,7 +167,7 @@ function AccountProvider({
     return () => {
       connector.off('change', handleLogin)
     }
-  }, [connector, login])
+  }, [connector, login, onError, onOpen])
 
   const client = useMemo(
     // The client needs to be reset when the jwtToken changes but only on the client as the server will
@@ -166,7 +183,19 @@ function AccountProvider({
     [jwtToken, onError, LITEFLOW_API_KEY, BASE_URL],
   )
 
-  return <ApolloProvider client={client}>{children}</ApolloProvider>
+  return (
+    <>
+      <ApolloProvider client={client}>{children}</ApolloProvider>
+      <SignatureModal
+        isOpen={isOpen}
+        onClose={() => {
+          onClose()
+          disconnect()
+        }}
+        onSignature={onSignature}
+      />
+    </>
+  )
 }
 
 export type MyAppProps = {