Merge pull request #1838 from blockscout/manage-wallet-button

Add manage wallet button

ui/snippets/walletMenu/WalletMenuContent.tsx

-import { Box, Button, Text, Flex } from '@chakra-ui/react';
+import { Box, Button, Text, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
 import * as mixpanel from 'lib/mixpanel/index';
@@ -12,15 +12,24 @@ type Props = {
   address?: string;
   disconnect?: () => void;
   isAutoConnectDisabled?: boolean;
+  openWeb3Modal: () => void;
+  closeWalletMenu: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled }: Props) => {
+const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled, openWeb3Modal, closeWalletMenu }: Props) => {
   const { themedBackgroundOrange } = useMenuButtonColors();
+  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
 
   const onAddressClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
   }, []);
 
+  const handleOpenWeb3Modal = React.useCallback(async() => {
+    setIsModalOpening(true);
+    await openWeb3Modal();
+    setTimeout(closeWalletMenu, 300);
+  }, [ openWeb3Modal, closeWalletMenu ]);
+
   return (
     <Box>
       { isAutoConnectDisabled && (
@@ -60,16 +69,28 @@ const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled }: Props
       >
         Your wallet is used to interact with apps and contracts in the explorer.
       </Text>
-      <AddressEntity
-        address={{ hash: address }}
-        noTooltip
-        truncation="dynamic"
-        fontSize="sm"
-        fontWeight={ 700 }
-        color="text"
-        mb={ 6 }
-        onClick={ onAddressClick }
-      />
+      <Flex alignItems="center" mb={ 6 }>
+        <AddressEntity
+          address={{ hash: address }}
+          noTooltip
+          truncation="dynamic"
+          fontSize="sm"
+          fontWeight={ 700 }
+          color="text"
+          onClick={ onAddressClick }
+          flex={ 1 }
+        />
+        <IconButton
+          aria-label="open wallet"
+          icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+          variant="simple"
+          h="20px"
+          w="20px"
+          ml={ 1 }
+          onClick={ handleOpenWeb3Modal }
+          isLoading={ isModalOpening }
+        />
+      </Flex>
       <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
         Disconnect
       </Button>

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -20,7 +20,7 @@ type Props = {
 };
 
 const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet({ source: 'Header' });
+  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const isMobile = useIsMobile();
@@ -82,7 +82,7 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
               variant={ variant }
               colorScheme="blue"
               flexShrink={ 0 }
-              isLoading={ isModalOpening || isModalOpen }
+              isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected }
               loadingText="Connect wallet"
               onClick={ isWalletConnected ? openPopover : connect }
               fontSize="sm"
@@ -102,7 +102,13 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">
-            <WalletMenuContent address={ address } disconnect={ disconnect } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+            <WalletMenuContent
+              address={ address }
+              disconnect={ disconnect }
+              isAutoConnectDisabled={ isAutoConnectDisabled }
+              openWeb3Modal={ openModal }
+              closeWalletMenu={ setIsPopoverOpen.off }
+            />
           </PopoverBody>
         </PopoverContent>
       ) }

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -14,7 +14,7 @@ import WalletTooltip from './WalletTooltip';
 
 const WalletMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet({ source: 'Header' });
+  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const isMobile = useIsMobile();
   const { isAutoConnectDisabled } = useMarketplaceContext();
@@ -48,7 +48,7 @@ const WalletMenuMobile = () => {
           color={ themedColor }
           borderColor={ !isWalletConnected ? themedBorderColor : undefined }
           onClick={ isWalletConnected ? openPopover : connect }
-          isLoading={ isModalOpening || isModalOpen }
+          isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected }
         />
       </WalletTooltip>
       { isWalletConnected && (
@@ -61,7 +61,13 @@ const WalletMenuMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="260px">
             <DrawerBody p={ 6 }>
-              <WalletMenuContent address={ address } disconnect={ disconnect } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+              <WalletMenuContent
+                address={ address }
+                disconnect={ disconnect }
+                isAutoConnectDisabled={ isAutoConnectDisabled }
+                openWeb3Modal={ openModal }
+                closeWalletMenu={ onClose }
+              />
             </DrawerBody>
           </DrawerContent>
         </Drawer>

ui/snippets/walletMenu/useWallet.tsx

@@ -45,6 +45,7 @@ export default function useWallet({ source }: Params) {
   const isWalletConnected = isClientLoaded && !isDisconnected && address !== undefined;
 
   return {
+    openModal: open,
     isWalletConnected,
     address: address || '',
     connect: handleConnect,