handle reconnecting state of web3wallet

lib/web3/useWallet.ts

 import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
 import React from 'react';
-import { useAccount, useDisconnect, useAccountEffect } from 'wagmi';
+import { useDisconnect, useAccountEffect } from 'wagmi';
 
 import * as mixpanel from 'lib/mixpanel/index';
+import useAccount from 'lib/web3/useAccount';
 
 interface Params {
   source: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
@@ -44,16 +45,17 @@ export default function useWeb3Wallet({ source }: Params) {
 
   useAccountEffect({ onConnect: handleAccountConnected });
 
-  const { address, isDisconnected } = useAccount();
-
-  const isConnected = isClientLoaded && !isDisconnected && address !== undefined;
+  const account = useAccount();
+  const address = account.address;
+  const isConnected = isClientLoaded && !account.isDisconnected && account.address !== undefined;
 
   return React.useMemo(() => ({
     connect: handleConnect,
     disconnect: handleDisconnect,
     isOpen: isOpening || isOpen,
     isConnected,
+    isReconnecting: account.isReconnecting,
     address,
     openModal,
-  }), [ handleConnect, handleDisconnect, isOpen, isOpening, isConnected, address, openModal ]);
+  }), [ handleConnect, handleDisconnect, isOpening, isOpen, isConnected, account.isReconnecting, address, openModal ]);
 }

ui/snippets/user/profile/UserProfileContentWallet.tsx

-import { chakra, Box, Button, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Box, Button, Flex, IconButton, useColorModeValue, Spinner } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
@@ -34,7 +34,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
   const content = (() => {
     if (web3Wallet.isConnected && web3AccountWithDomain.address) {
       return (
-        <Flex alignItems="center" columnGap={ 2 } bgColor={ walletSnippetBgColor } px={ 2 } py="10px" borderRadius="base">
+        <Flex alignItems="center" columnGap={ 2 } bgColor={ walletSnippetBgColor } px={ 2 } py="10px" borderRadius="base" justifyContent="space-between">
           <AddressEntity
             address={{ hash: web3AccountWithDomain.address, ens_domain_name: web3AccountWithDomain.domain }}
             isLoading={ web3AccountWithDomain.isLoading }
@@ -44,6 +44,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
             fontWeight={ 500 }
             noAltHash
           />
+          { web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
             <IconButton
               aria-label="Open wallet"
               icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
@@ -53,8 +54,8 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
               onClick={ handleOpenWalletClick }
               isLoading={ web3Wallet.isOpen }
               flexShrink={ 0 }
-            ml="auto"
             />
+          ) }
         </Flex>
       );
     }

ui/snippets/user/wallet/UserWalletDesktop.tsx

@@ -55,6 +55,7 @@ const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
               address={ web3AccountWithDomain.address }
               domain={ web3AccountWithDomain.domain }
               isAutoConnectDisabled={ isAutoConnectDisabled }
+              isReconnecting={ web3Wallet.isReconnecting }
               onOpenWallet={ handleOpenWalletClick }
               onDisconnect={ handleDisconnectClick }
             />

ui/snippets/user/wallet/UserWalletMenuContent.tsx

-import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, IconButton, Spinner, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
@@ -11,11 +11,12 @@ interface Props {
   address: string;
   domain?: string;
   isAutoConnectDisabled?: boolean;
+  isReconnecting?: boolean;
   onDisconnect: () => void;
   onOpenWallet: () => void;
 }
 
-const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnect, onOpenWallet }: Props) => {
+const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isReconnecting, onDisconnect, onOpenWallet }: Props) => {
 
   const handleOpenWalletClick = React.useCallback(async() => {
     await delay(100);
@@ -29,7 +30,7 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisco
       <Text fontSize="sm" mb={ 5 } fontWeight={ 400 } color="text_secondary">
         Your wallet is used to interact with apps and contracts in the explorer.
       </Text>
-      <Flex alignItems="center" columnGap={ 2 }>
+      <Flex alignItems="center" columnGap={ 2 } justifyContent="space-between">
         <AddressEntity
           address={{ hash: address, ens_domain_name: domain }}
           isTooltipDisabled
@@ -37,6 +38,7 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisco
           fontSize="sm"
           fontWeight={ 700 }
         />
+        { isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
           <IconButton
             aria-label="Open wallet"
             icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
@@ -46,6 +48,7 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisco
             onClick={ handleOpenWalletClick }
             flexShrink={ 0 }
           />
+        ) }
       </Flex>
       <Button size="sm" width="full" variant="outline" onClick={ onDisconnect } mt={ 6 }>
         Disconnect

ui/snippets/user/wallet/UserWalletMobile.tsx

@@ -52,6 +52,7 @@ const UserWalletMobile = () => {
                 address={ web3AccountWithDomain.address }
                 domain={ web3AccountWithDomain.domain }
                 isAutoConnectDisabled={ isAutoConnectDisabled }
+                isReconnecting={ web3Wallet.isReconnecting }
                 onOpenWallet={ handleOpenWalletClick }
                 onDisconnect={ handleDisconnectClick }
               />