refactor: handle account connected status on sign modal

Author: enesozturk

src/pages/Login/SignatureModal/index.tsx

@@ -1,17 +1,17 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 
 import { formatJsonRpcRequest } from '@walletconnect/jsonrpc-utils'
-import { useDisconnect, useSignMessage } from 'wagmi'
+import { useAccount, useDisconnect } from 'wagmi'
 
 import Button from '@/components/general/Button'
 import CrossIcon from '@/components/general/Icon/CrossIcon'
 import SignatureIcon from '@/components/general/Icon/SignatureIcon'
 import Wallet from '@/components/general/Icon/Wallet'
 import { Modal } from '@/components/general/Modal/Modal'
+import Spinner from '@/components/general/Spinner'
 import Text from '@/components/general/Text'
 import { useModals } from '@/utils/hooks'
 import { signatureModalService } from '@/utils/store'
-import { wagmiConfig } from '@/utils/wagmiConfig'
 
 import { SignatureLoadingVisual } from './SignatureLoadingVisual'
 
@@ -20,19 +20,15 @@ import './SignatureModal.scss'
 export const SignatureModal: React.FC<{
   message: string
 }> = ({ message }) => {
+  const { status } = useAccount()
+  const connected = status === 'connected'
+
   /*
    * If identity was already signed, and sync was requested then we are in the
    * final step.
    */
   const { isSigning } = useModals()
   const { disconnect } = useDisconnect()
-  const { signMessageAsync } = useSignMessage()
-
-  async function onSignMessage() {
-    const signature = await signMessageAsync({
-      message: 'hello world!'
-    })
-  }
 
   const onSign = () => {
     signatureModalService.startSigning()
@@ -75,9 +71,9 @@ export const SignatureModal: React.FC<{
         </Text>
         <div className="SignatureModal__button">
           <Button
-            disabled={isSigning}
+            disabled={isSigning || !connected}
             textVariant="paragraph-600"
-            rightIcon={isSigning ? null : <Wallet />}
+            rightIcon={!connected ? <Spinner /> : isSigning ? null : <Wallet />}
             onClick={onSign}
           >
             {isSigning ? 'Waiting for wallet...' : 'Sign in with wallet'}