add manage wallet button

icons/settings.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.615 19h2.77a.692.692 0 0 0 .664-.692v-.942a.956.956 0 0 1 1.627-.692l.692.692a.693.693 0 0 0 .983 0l1.96-1.96a.69.69 0 0 0 0-.982l-.692-.692a.955.955 0 0 1 .692-1.627h.997a.692.692 0 0 0 .692-.693V8.643a.692.692 0 0 0-.692-.692h-.977a.955.955 0 0 1-.692-1.627l.692-.692a.693.693 0 0 0 0-.984L15.372 2.69a.692.692 0 0 0-.983 0l-.692.693a.955.955 0 0 1-1.627-.693v-.997A.692.692 0 0 0 11.378 1h-2.77a.692.692 0 0 0-.692.692v.963a.955.955 0 0 1-1.627.692l-.692-.692a.692.692 0 0 0-.983 0L2.689 4.62a.692.692 0 0 0 0 .983l.693.692a.955.955 0 0 1-.693 1.627h-.997A.692.692 0 0 0 1 8.615v2.777a.692.692 0 0 0 .692.692h.963a.956.956 0 0 1 .692 1.627l-.692.692a.691.691 0 0 0 0 .983l1.966 1.925a.691.691 0 0 0 .983 0l.692-.692a.955.955 0 0 1 1.627.692v.997a.692.692 0 0 0 .692.692Zm2.077-1.385H9.308v-.304a2.333 2.333 0 0 0-3.988-1.648l-.215.215-.983-.983.215-.215a2.333 2.333 0 0 0-1.648-3.988h-.304V9.308h.304A2.333 2.333 0 0 0 4.337 5.32l-.215-.215.983-.983.215.215a2.333 2.333 0 0 0 3.988-1.648v-.304h1.384v.304a2.332 2.332 0 0 0 3.988 1.648l.215-.215.983.983-.215.215a2.333 2.333 0 0 0 1.648 3.988h.304v1.384h-.304a2.332 2.332 0 0 0-1.648 3.988l.215.215-.983.983-.215-.215a2.333 2.333 0 0 0-3.988 1.648v.304Zm-2.615-4.737a3.461 3.461 0 1 0 3.846-5.755 3.461 3.461 0 0 0-3.846 5.755Zm.77-4.605a2.077 2.077 0 1 1 2.307 3.454 2.077 2.077 0 0 1-2.308-3.454Z" fill="currentColor"/>
+</svg>

public/icons/name.d.ts

@@ -102,6 +102,7 @@
 	| "score/score-not-ok"
 	| "score/score-ok"
 	| "search"
+	| "settings"
 	| "social/canny"
 	| "social/coingecko"
 	| "social/coinmarketcap"

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,27 @@ type Props = {
   address?: string;
   disconnect?: () => void;
   isAutoConnectDisabled?: boolean;
+  openModal: () => void;
+  close: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled }: Props) => {
+const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled, openModal, close }: Props) => {
   const { themedBackgroundOrange } = useMenuButtonColors();
+  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
 
   const onAddressClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
   }, []);
 
+  const handleOpenModal = React.useCallback(async() => {
+    setIsModalOpening(true);
+    await openModal();
+    setTimeout(() => {
+      setIsModalOpening(false);
+      close();
+    }, 500);
+  }, [ openModal, close ]);
+
   return (
     <Box>
       { isAutoConnectDisabled && (
@@ -60,6 +72,7 @@ const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled }: Props
       >
         Your wallet is used to interact with apps and contracts in the explorer.
       </Text>
+      <Flex alignItems="center" mb={ 6 }>
         <AddressEntity
           address={{ hash: address }}
           noTooltip
@@ -67,9 +80,20 @@ const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled }: Props
           fontSize="sm"
           fontWeight={ 700 }
           color="text"
-        mb={ 6 }
           onClick={ onAddressClick }
+          flex={ 1 }
+        />
+        <IconButton
+          aria-label="open wallet"
+          icon={ <IconSvg name="settings" boxSize={ 5 }/> }
+          variant="simple"
+          h="20px"
+          w="20px"
+          ml={ 1 }
+          onClick={ handleOpenModal }
+          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 }
+              openModal={ openModal }
+              close={ 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 }
+                openModal={ openModal }
+                close={ 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,