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,17 +44,18 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
             fontWeight={ 500 }
             noAltHash
           />
-          <IconButton
-            aria-label="Open wallet"
-            icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
-            variant="simple"
-            color="icon_info"
-            boxSize={ 5 }
-            onClick={ handleOpenWalletClick }
-            isLoading={ web3Wallet.isOpen }
-            flexShrink={ 0 }
-            ml="auto"
-          />
+          { web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
+            <IconButton
+              aria-label="Open wallet"
+              icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+              variant="simple"
+              color="icon_info"
+              boxSize={ 5 }
+              onClick={ handleOpenWalletClick }
+              isLoading={ web3Wallet.isOpen }
+              flexShrink={ 0 }
+            />
+          ) }
         </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,15 +38,17 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisco
           fontSize="sm"
           fontWeight={ 700 }
         />
-        <IconButton
-          aria-label="Open wallet"
-          icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
-          variant="simple"
-          color="icon_info"
-          boxSize={ 5 }
-          onClick={ handleOpenWalletClick }
-          flexShrink={ 0 }
-        />
+        { isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
+          <IconButton
+            aria-label="Open wallet"
+            icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+            variant="simple"
+            color="icon_info"
+            boxSize={ 5 }
+            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 }
               />