handle case when account is disabled

ui/home/HeroBanner.tsx

@@ -5,6 +5,7 @@ import config from 'configs/app';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletDesktop from 'ui/snippets/wallet/WalletDesktop';
 
 const BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
 const TEXT_COLOR_DEFAULT = 'white';
@@ -53,7 +54,10 @@ const HeroBanner = () => {
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'block' }}>
-              { config.features.account.isEnabled && <ProfileDesktop buttonVariant="hero"/> }
+              {
+                (config.features.account.isEnabled && <ProfileDesktop buttonVariant="hero"/>) ||
+                (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonVariant="hero"/>)
+              }
             </Box>
           ) }
         </Flex>

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -13,6 +13,7 @@ import LinkExternal from 'ui/shared/links/LinkExternal';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
+import WalletDesktop from 'ui/snippets/wallet/WalletDesktop';
 
 import AppSecurityReport from './AppSecurityReport';
 import ContractListModal from './ContractListModal';
@@ -98,7 +99,10 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
         />
         { !isMobile && (
           <Box ml="auto">
-            { config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/> }
+            {
+              (config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/>) ||
+              (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonSize="sm"/>)
+            }
           </Box>
         ) }
       </Flex>

ui/snippets/header/HeaderDesktop.tsx

@@ -4,9 +4,8 @@ import React from 'react';
 import config from 'configs/app';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+import WalletDesktop from 'ui/snippets/wallet/WalletDesktop';
 
 import Burger from './Burger';
 
@@ -39,9 +38,10 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
       </Box>
       { config.UI.navigation.layout === 'vertical' && (
         <Box display="flex" flexShrink={ 0 }>
-          { config.features.account.isEnabled && <ProfileMenuDesktop/> }
-          { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
-          { config.features.account.isEnabled && <ProfileDesktop/> }
+          {
+            (config.features.account.isEnabled && <ProfileDesktop/>) ||
+            (config.features.blockchainInteraction.isEnabled && <WalletDesktop/>)
+          }
         </Box>
       ) }
     </HStack>

ui/snippets/header/HeaderMobile.tsx

@@ -7,6 +7,7 @@ import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMobile from 'ui/snippets/profile/ProfileMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMobile from 'ui/snippets/wallet/WalletMobile';
 
 import Burger from './Burger';
 
@@ -47,7 +48,11 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
-          { config.features.account.isEnabled ? <ProfileMobile/> : <Box boxSize={ 10 }/> }
+          {
+            (config.features.account.isEnabled && <ProfileMobile/>) ||
+            (config.features.blockchainInteraction.isEnabled && <WalletMobile/>) ||
+            <Box boxSize={ 10 }/>
+          }
         </Flex>
       </Flex>
       { !hideSearchBar && searchBar }

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -6,8 +6,7 @@ import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+import WalletDesktop from 'ui/snippets/wallet/WalletDesktop';
 
 import TestnetBadge from '../TestnetBadge';
 import NavLink from './NavLink';
@@ -39,9 +38,10 @@ const NavigationDesktop = () => {
             }) }
           </Flex>
         </chakra.nav>
-        { config.features.account.isEnabled && <ProfileMenuDesktop buttonBoxSize="32px"/> }
-        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
-        { config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/> }
+        {
+          (config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/>) ||
+          (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonSize="sm"/>)
+        }
       </Flex>
     </Box>
   );

ui/snippets/profile/ProfileButton.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import type { UserInfo } from 'types/api/account';
 
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import shortenString from 'lib/shortenString';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -23,6 +24,8 @@ interface Props {
 
 const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   const [ isFetched, setIsFetched ] = React.useState(false);
+  const isMobile = useIsMobile();
+
   const { data, isLoading } = profileQuery;
   const web3AccountWithDomain = useWeb3AccountWithDomain(!data?.address_hash);
   const { isAutoConnectDisabled } = useMarketplaceContext();
@@ -77,7 +80,7 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
       label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
       textAlign="center"
       padding={ 2 }
-      isDisabled={ isFetched || Boolean(data) }
+      isDisabled={ isMobile || isFetched || Boolean(data) }
       openDelay={ 500 }
     >
       <Skeleton isLoaded={ isFetched } borderRadius="base" ref={ ref }>
@@ -92,7 +95,7 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
           px={ data ? 2.5 : 4 }
           fontWeight={ data ? 700 : 600 }
           isLoading={ isPending }
-          loadingText="Connecting"
+          loadingText={ isMobile ? undefined : 'Connecting' }
         >
           { content }
         </Button>

ui/snippets/profile/ProfileMenuContent.tsx

-import { Box, Divider, Flex, Text, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Box, Divider, Flex, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavLink } from './types';
@@ -8,8 +8,8 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
-import IconSvg from 'ui/shared/IconSvg';
 import useLogout from 'ui/snippets/auth/useLogout';
+import WalletAutoConnectDisabledAlert from 'ui/snippets/wallet/WalletAutoConnectDisabledAlert';
 
 import ProfileMenuNavLink from './ProfileMenuNavLink';
 import ProfileMenuWallet from './ProfileMenuWallet';
@@ -50,31 +50,11 @@ interface Props {
 
 const ProfileMenuContent = ({ data, onClose }: Props) => {
   const { isAutoConnectDisabled } = useMarketplaceContext();
-  const alertBgColor = useColorModeValue('orange.100', 'orange.900');
   const logout = useLogout();
 
   return (
     <Box>
-      { isAutoConnectDisabled && (
-        <Flex
-          borderRadius="base"
-          p={ 3 }
-          mb={ 3 }
-          alignItems="center"
-          bgColor={ alertBgColor }
-        >
-          <IconSvg
-            name="integration/partial"
-            color="text"
-            boxSize={ 5 }
-            flexShrink={ 0 }
-            mr={ 2 }
-          />
-          <Text fontSize="xs" lineHeight="16px">
-            Connect your wallet in the app below
-          </Text>
-        </Flex>
-      ) }
+      { isAutoConnectDisabled && <WalletAutoConnectDisabledAlert/> }
 
       <Flex alignItems="center" justifyContent="space-between">
         <ProfileMenuNavLink

ui/snippets/wallet/WalletAutoConnectDisabledAlert.tsx

+import { Text, Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+const WalletAutoConnectDisabledAlert = () => {
+  const bgColor = useColorModeValue('orange.100', 'orange.900');
+
+  return (
+    <Flex
+      borderRadius="base"
+      p={ 3 }
+      mb={ 3 }
+      alignItems="center"
+      bgColor={ bgColor }
+    >
+      <IconSvg
+        name="integration/partial"
+        color="text"
+        boxSize={ 5 }
+        flexShrink={ 0 }
+        mr={ 2 }
+      />
+      <Text fontSize="xs" lineHeight="16px">
+        Connect your wallet in the app below
+      </Text>
+    </Flex>
+  );
+};
+
+export default React.memo(WalletAutoConnectDisabledAlert);

ui/snippets/wallet/WalletButton.tsx

+import type { ButtonProps } from '@chakra-ui/react';
+import { Button, Box, HStack, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import shortenString from 'lib/shortenString';
+import ProfileAddressIcon from 'ui/snippets/profile/ProfileAddressIcon';
+
+interface Props {
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  onClick?: () => void;
+  isPending?: boolean;
+  isAutoConnectDisabled?: boolean;
+  address?: string;
+  domain?: string;
+}
+
+const WalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+
+  const isMobile = useIsMobile();
+
+  const content = (() => {
+    if (!address) {
+      return 'Connect';
+    }
+
+    const text = domain || shortenString(address);
+
+    return (
+      <HStack gap={ 2 }>
+        <ProfileAddressIcon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+        <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
+      </HStack>
+    );
+  })();
+
+  return (
+    <Tooltip
+      label={ <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span> }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ isMobile || Boolean(address) }
+      openDelay={ 500 }
+    >
+      <Button
+        ref={ ref }
+        size={ size }
+        variant={ variant }
+        onClick={ onClick }
+        data-selected={ Boolean(address) }
+        data-warning={ isAutoConnectDisabled }
+        fontSize="sm"
+        lineHeight={ 5 }
+        px={ address ? 2.5 : 4 }
+        fontWeight={ address ? 700 : 600 }
+        isLoading={ isPending }
+        loadingText={ isMobile ? undefined : 'Connecting' }
+      >
+        { content }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.memo(React.forwardRef(WalletButton));

ui/snippets/wallet/WalletDesktop.tsx

+import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type ButtonProps } from '@chakra-ui/react';
+import React from 'react';
+
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import Popover from 'ui/shared/chakra/Popover';
+import useWeb3AccountWithDomain from 'ui/snippets/profile/useWeb3AccountWithDomain';
+import useWallet from 'ui/snippets/walletMenu/useWallet';
+
+import WalletButton from './WalletButton';
+import WalletMenuContent from './WalletMenuContent';
+
+interface Props {
+  buttonSize?: ButtonProps['size'];
+  buttonVariant?: ButtonProps['variant'];
+}
+
+const WalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+  const walletMenu = useDisclosure();
+
+  const walletUtils = useWallet({ source: 'Header' });
+  const web3AccountWithDomain = useWeb3AccountWithDomain(walletUtils.isWalletConnected);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+
+  const isPending =
+    (walletUtils.isWalletConnected && web3AccountWithDomain.isLoading) ||
+    (!walletUtils.isWalletConnected && (walletUtils.isModalOpening || walletUtils.isModalOpen));
+
+  const handleOpenWalletClick = React.useCallback(() => {
+    walletUtils.openModal();
+    walletMenu.onClose();
+  }, [ walletUtils, walletMenu ]);
+
+  const handleDisconnectClick = React.useCallback(() => {
+    walletUtils.disconnect();
+    walletMenu.onClose();
+  }, [ walletUtils, walletMenu ]);
+
+  return (
+    <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ walletMenu.isOpen } onClose={ walletMenu.onClose }>
+      <PopoverTrigger>
+        <WalletButton
+          size={ buttonSize }
+          variant={ buttonVariant }
+          onClick={ walletUtils.isWalletConnected ? walletMenu.onOpen : walletUtils.openModal }
+          address={ web3AccountWithDomain.address }
+          domain={ web3AccountWithDomain.domain }
+          isPending={ isPending }
+          isAutoConnectDisabled={ isAutoConnectDisabled }
+        />
+      </PopoverTrigger>
+      { web3AccountWithDomain.address && (
+        <PopoverContent w="235px">
+          <PopoverBody>
+            <WalletMenuContent
+              address={ web3AccountWithDomain.address }
+              domain={ web3AccountWithDomain.domain }
+              isAutoConnectDisabled={ isAutoConnectDisabled }
+              onOpenWallet={ handleOpenWalletClick }
+              onDisconnect={ handleDisconnectClick }
+            />
+          </PopoverBody>
+        </PopoverContent>
+      ) }
+    </Popover>
+  );
+};
+
+export default React.memo(WalletDesktop);

ui/snippets/wallet/WalletMenuContent.tsx

+import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import delay from 'lib/delay';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import WalletAutoConnectDisabledAlert from './WalletAutoConnectDisabledAlert';
+
+interface Props {
+  address: string;
+  domain?: string;
+  isAutoConnectDisabled?: boolean;
+  onDisconnect: () => void;
+  onOpenWallet: () => void;
+}
+
+const WalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnect, onOpenWallet }: Props) => {
+
+  const handleOpenWalletClick = React.useCallback(async() => {
+    await delay(100);
+    onOpenWallet();
+  }, [ onOpenWallet ]);
+
+  return (
+    <Box>
+      { isAutoConnectDisabled && <WalletAutoConnectDisabledAlert/> }
+      <Text fontSize="sm" fontWeight={ 600 } mb={ 1 }>My wallet</Text>
+      <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 }>
+        <AddressEntity
+          address={{ hash: address, ens_domain_name: domain }}
+          isTooltipDisabled
+          truncation="dynamic"
+          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 }
+        />
+      </Flex>
+      <Button size="sm" width="full" variant="outline" onClick={ onDisconnect } mt={ 6 }>
+        Disconnect
+      </Button>
+    </Box>
+  );
+};
+
+export default React.memo(WalletMenuContent);

ui/snippets/wallet/WalletMobile.tsx

+import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useWeb3AccountWithDomain from 'ui/snippets/profile/useWeb3AccountWithDomain';
+import useWallet from 'ui/snippets/walletMenu/useWallet';
+
+import WalletButton from './WalletButton';
+import WalletMenuContent from './WalletMenuContent';
+
+const WalletMobile = () => {
+  const walletMenu = useDisclosure();
+
+  const walletUtils = useWallet({ source: 'Header' });
+  const web3AccountWithDomain = useWeb3AccountWithDomain(walletUtils.isWalletConnected);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+
+  const isPending =
+    (walletUtils.isWalletConnected && web3AccountWithDomain.isLoading) ||
+    (!walletUtils.isWalletConnected && (walletUtils.isModalOpening || walletUtils.isModalOpen));
+
+  const handleOpenWalletClick = React.useCallback(() => {
+    walletUtils.openModal();
+    walletMenu.onClose();
+  }, [ walletUtils, walletMenu ]);
+
+  const handleDisconnectClick = React.useCallback(() => {
+    walletUtils.disconnect();
+    walletMenu.onClose();
+  }, [ walletUtils, walletMenu ]);
+
+  return (
+    <>
+      <WalletButton
+        variant="header"
+        onClick={ walletUtils.isWalletConnected ? walletMenu.onOpen : walletUtils.openModal }
+        address={ web3AccountWithDomain.address }
+        domain={ web3AccountWithDomain.domain }
+        isPending={ isPending }
+      />
+      { web3AccountWithDomain.address && (
+        <Drawer
+          isOpen={ walletMenu.isOpen }
+          placement="right"
+          onClose={ walletMenu.onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="300px">
+            <DrawerBody p={ 6 }>
+              <WalletMenuContent
+                address={ web3AccountWithDomain.address }
+                domain={ web3AccountWithDomain.domain }
+                isAutoConnectDisabled={ isAutoConnectDisabled }
+                onOpenWallet={ handleOpenWalletClick }
+                onDisconnect={ handleDisconnectClick }
+              />
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(WalletMobile);