fix user wallet menu

toolkit/chakra/drawer.tsx

+/* eslint-disable no-restricted-imports */
 import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react';
 import * as React from 'react';
 
@@ -42,8 +43,14 @@ export const DrawerCloseTrigger = React.forwardRef<
   );
 });
 
+const EMPTY_ELEMENT = () => null;
+
+export const DrawerRoot = (props: ChakraDrawer.RootProps) => {
+  const { initialFocusEl = EMPTY_ELEMENT, ...rest } = props;
+  return <ChakraDrawer.Root { ...rest } initialFocusEl={ initialFocusEl }/>;
+};
+
 export const DrawerTrigger = ChakraDrawer.Trigger;
-export const DrawerRoot = ChakraDrawer.Root;
 export const DrawerFooter = ChakraDrawer.Footer;
 export const DrawerHeader = ChakraDrawer.Header;
 export const DrawerBody = ChakraDrawer.Body;

toolkit/theme/recipes/button.recipe.ts

@@ -10,6 +10,11 @@ export const recipe = defineRecipe({
     _disabled: {
       opacity: 0.2,
     },
+    // FIXME have to override the Chakra UI styles for the SVG icon inside the button
+    // try to find a better solution
+    '& svg': {
+      boxSize: 'auto',
+    },
   },
   variants: {
     visual: {

ui/shared/IdenticonGithub.tsx

-import { useColorModeValue, useToken, Box, chakra } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 const Identicon = dynamic<{ bg: string; string: string; size: number }>(
   async() => {
@@ -17,26 +17,25 @@ const Identicon = dynamic<{ bg: string; string: string; size: number }>(
 
 interface Props {
   className?: string;
-  size: number;
+  iconSize: number;
   seed: string;
 }
 
-const IdenticonGithub = ({ size, seed }: Props) => {
-  const bgColor = useToken('colors', useColorModeValue('gray.100', 'white'));
-
+const IdenticonGithub = ({ iconSize, seed }: Props) => {
   return (
     <Box
-      boxSize={ `${ size * 2 }px` }
+      boxSize={ `${ iconSize * 2 }px` }
       transformOrigin="left top"
       transform="scale(0.5)"
       borderRadius="full"
       overflow="hidden"
+      bg={{ _light: 'gray.100', _dark: 'white' }}
     >
       <Identicon
-        bg={ bgColor }
+        bg="transparent"
         string={ seed }
         // the displayed size is doubled for retina displays and then scaled down
-        size={ size * 2 }
+        size={ iconSize * 2 }
       />
     </Box>
   );

ui/shared/entities/address/AddressIdenticon.tsx

-import { Box, Image } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import { Image } from 'toolkit/chakra/image';
 import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface IconProps {
@@ -17,7 +18,7 @@ const Icon = dynamic(
     switch (type) {
       case 'github': {
 
-        return (props: IconProps) => <IdenticonGithub size={ props.size } seed={ props.hash }/>;
+        return (props: IconProps) => <IdenticonGithub iconSize={ props.size } seed={ props.hash }/>;
       }
 
       case 'blockie': {

ui/snippets/topBar/NetworkMenu.tsx

@@ -11,7 +11,7 @@ const NetworkMenu = () => {
 
   return (
     <PopoverRoot
-      positioning={{ placement: 'bottom-start' }}
+      positioning={{ placement: 'bottom-start', offset: { mainAxis: 6 } }}
       lazyMount
       open={ menu.open }
       onOpenChange={ menu.onOpenChange }

ui/snippets/user/wallet/UserWalletButton.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Button, Box, HStack, Tooltip } from '@chakra-ui/react';
+import { Box, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import shortenString from 'lib/shortenString';
+import { Button } from 'toolkit/chakra/button';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 
 import UserIdenticon from '../UserIdenticon';
 
 interface Props {
   size?: ButtonProps['size'];
-  variant?: ButtonProps['variant'];
-  onClick?: () => void;
+  visual?: ButtonProps['visual'];
   isPending?: boolean;
   isAutoConnectDisabled?: boolean;
   address?: string;
   domain?: string;
 }
 
-const UserWalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const UserWalletButton = ({ size, visual, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
   const isMobile = useIsMobile();
 
@@ -38,24 +39,20 @@ const UserWalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisa
 
   return (
     <Tooltip
-      label={ <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span> }
-      textAlign="center"
-      padding={ 2 }
-      isDisabled={ isMobile || Boolean(address) }
+      content={ <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span> }
+      disabled={ isMobile || Boolean(address) }
       openDelay={ 500 }
     >
       <Button
         ref={ ref }
         size={ size }
-        variant={ variant }
-        onClick={ onClick }
+        visual={ visual }
         data-selected={ Boolean(address) }
         data-warning={ isAutoConnectDisabled }
-        fontSize="sm"
-        lineHeight={ 5 }
+        textStyle="sm"
         px={ address ? 2.5 : 4 }
         fontWeight={ address ? 700 : 600 }
-        isLoading={ isPending }
+        loading={ isPending }
         loadingText={ isMobile ? undefined : 'Connecting' }
       >
         { content }

ui/snippets/user/wallet/UserWalletDesktop.tsx

-import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type ButtonProps } from '@chakra-ui/react';
+import { type ButtonProps } from '@chakra-ui/react';
 import React from 'react';
 
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import UserWalletButton from './UserWalletButton';
 import UserWalletMenuContent from './UserWalletMenuContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
-  buttonVariant?: ButtonProps['variant'];
+  buttonVisual?: ButtonProps['visual'];
 }
 
-// TODO @tom2drum check this component
-const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+const UserWalletDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
   const walletMenu = useDisclosure();
 
   const web3Wallet = useWeb3Wallet({ source: 'Header' });
@@ -36,13 +36,25 @@ const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
     walletMenu.onClose();
   }, [ web3Wallet, walletMenu ]);
 
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (!web3Wallet.isConnected) {
+      web3Wallet.openModal();
+      return;
+    }
+
+    if (open) {
+      walletMenu.onOpen();
+    } else {
+      walletMenu.onClose();
+    }
+  }, [ walletMenu, web3Wallet ]);
+
   return (
-    <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ walletMenu.isOpen } onClose={ walletMenu.onClose }>
+    <PopoverRoot positioning={{ placement: 'bottom-end' }} lazyMount open={ walletMenu.open } onOpenChange={ handleOpenChange }>
       <PopoverTrigger>
         <UserWalletButton
           size={ buttonSize }
-          variant={ buttonVariant }
-          onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
+          visual={ buttonVisual }
           address={ web3AccountWithDomain.address }
           domain={ web3AccountWithDomain.domain }
           isPending={ isPending }
@@ -63,7 +75,7 @@ const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
           </PopoverBody>
         </PopoverContent>
       ) }
-    </Popover>
+    </PopoverRoot>
   );
 };
 

ui/snippets/user/wallet/UserWalletMenuContent.tsx

-import { Box, Button, Flex, IconButton, Spinner, Text } from '@chakra-ui/react';
+import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
+import { Button } from 'toolkit/chakra/button';
+import { IconButton } from 'toolkit/chakra/icon-button';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -41,13 +43,13 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isRecon
         { 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 }
-          />
+          >
+            <IconSvg name="gear_slim" boxSize={ 5 }/>
+          </IconButton>
         ) }
       </Flex>
       <Button size="sm" width="full" variant="outline" onClick={ onDisconnect } mt={ 6 }>

ui/snippets/user/wallet/UserWalletMobile.tsx

-import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
+import { DrawerTrigger, DrawerRoot, DrawerBackdrop, DrawerContent, DrawerBody } from 'toolkit/chakra/drawer';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import UserWalletButton from './UserWalletButton';
 import UserWalletMenuContent from './UserWalletMenuContent';
@@ -29,25 +30,36 @@ const UserWalletMobile = () => {
     walletMenu.onClose();
   }, [ web3Wallet, walletMenu ]);
 
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (!web3Wallet.isConnected) {
+      web3Wallet.openModal();
+      return;
+    }
+
+    if (open) {
+      walletMenu.onOpen();
+    } else {
+      walletMenu.onClose();
+    }
+  }, [ walletMenu, web3Wallet ]);
+
   return (
-    <>
+    <DrawerRoot
+      open={ walletMenu.open }
+      onOpenChange={ handleOpenChange }
+    >
+      <DrawerBackdrop/>
+      <DrawerTrigger>
         <UserWalletButton
-        variant="header"
-        onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
+          visual="header"
           address={ web3AccountWithDomain.address }
           domain={ web3AccountWithDomain.domain }
           isPending={ isPending }
         />
-      { web3AccountWithDomain.address && (
-        <Drawer
-          isOpen={ walletMenu.isOpen }
-          placement="right"
-          onClose={ walletMenu.onClose }
-          autoFocus={ false }
-        >
-          <DrawerOverlay/>
+      </DrawerTrigger>
       <DrawerContent maxWidth="300px">
         <DrawerBody p={ 6 }>
+          { web3AccountWithDomain.address && (
             <UserWalletMenuContent
               address={ web3AccountWithDomain.address }
               domain={ web3AccountWithDomain.domain }
@@ -56,11 +68,10 @@ const UserWalletMobile = () => {
               onOpenWallet={ handleOpenWalletClick }
               onDisconnect={ handleDisconnectClick }
             />
+          ) }
         </DrawerBody>
       </DrawerContent>
-        </Drawer>
-      ) }
-    </>
+    </DrawerRoot>
   );
 };