show connected wallet address in button

types/api/account.ts

@@ -71,6 +71,7 @@ export interface UserInfo {
   name?: string;
   nickname?: string;
   email: string | null;
+  address_hash: string | null;
   avatar?: string;
 }
 

ui/shared/UserAvatar.tsx

@@ -11,6 +11,7 @@ interface Props {
   fallbackIconSize?: number;
 }
 
+// TODO @tom2drum remove this component
 const UserAvatar = ({ size, fallbackIconSize = 20 }: Props) => {
   const appProps = useAppContext();
   const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, appProps.cookies));

ui/snippets/profile/ProfileAddressIcon.tsx

+import { Box, Center, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  address: string;
+  isAutoConnectDisabled?: boolean;
+};
+
+const ProfileAddressIcon = ({ address, isAutoConnectDisabled }: Props) => {
+  const borderColor = useColorModeValue('orange.100', 'orange.900');
+
+  return (
+    <Box position="relative">
+      <AddressIdenticon size={ 20 } hash={ address }/>
+      { isAutoConnectDisabled && (
+        <Center
+          boxSize="14px"
+          position="absolute"
+          bottom="-1px"
+          right="-3px"
+          backgroundColor="rgba(16, 17, 18, 0.80)"
+          borderRadius="full"
+          border="1px solid"
+          borderColor={ borderColor }
+        >
+          <IconSvg
+            name="integration/partial"
+            color="white"
+            boxSize={ 2 }
+          />
+        </Center>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(ProfileAddressIcon);

ui/snippets/profile/ProfileButton.tsx

@@ -5,8 +5,12 @@ import React from 'react';
 
 import type { UserInfo } from 'types/api/account';
 
-import UserAvatar from 'ui/shared/UserAvatar';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import shortenString from 'lib/shortenString';
+import IconSvg from 'ui/shared/IconSvg';
 
+import ProfileAddressIcon from './ProfileAddressIcon';
+import useWeb3AccountWithDomain from './useWeb3AccountWithDomain';
 import { getUserHandle } from './utils';
 
 interface Props {
@@ -19,6 +23,8 @@ interface Props {
 const ProfileButton = ({ profileQuery, size, variant, onClick }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   const [ isFetched, setIsFetched ] = React.useState(false);
   const { data, isLoading } = profileQuery;
+  const web3AccountWithDomain = useWeb3AccountWithDomain(!data?.address_hash);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
 
   React.useEffect(() => {
     if (!isLoading) {
@@ -31,11 +37,33 @@ const ProfileButton = ({ profileQuery, size, variant, onClick }: Props, ref: Rea
       return 'Connect';
     }
 
+    const address = data.address_hash || web3AccountWithDomain.address;
+    if (address) {
+      const text = (() => {
+        if (data.address_hash) {
+          return shortenString(data.address_hash);
+        }
+
+        if (web3AccountWithDomain.domain) {
+          return web3AccountWithDomain.domain;
+        }
+
+        return shortenString(address);
+      })();
+
+      return (
+        <HStack gap={ 2 }>
+          <ProfileAddressIcon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+          <Text display={{ base: 'none', md: 'block' }}>{ text }</Text>
+        </HStack>
+      );
+    }
+
     if (data.email) {
       return (
         <HStack gap={ 2 }>
-          <UserAvatar size={ 20 }/>
-          <Text>{ getUserHandle(data.email) }</Text>
+          <IconSvg name="profile" boxSize={ 5 }/>
+          <Text display={{ base: 'none', md: 'block' }}>{ getUserHandle(data.email) }</Text>
         </HStack>
       );
     }
@@ -57,6 +85,11 @@ const ProfileButton = ({ profileQuery, size, variant, onClick }: Props, ref: Rea
           variant={ variant }
           onClick={ onClick }
           data-selected={ Boolean(data) }
+          data-warning={ isAutoConnectDisabled }
+          fontSize="sm"
+          lineHeight={ 5 }
+          px={ data ? 2.5 : 4 }
+          fontWeight={ data ? 700 : 600 }
         >
           { content }
         </Button>

ui/snippets/profile/ProfileMenuContent.tsx

-import { Box, Divider, Flex, Text, VStack } from '@chakra-ui/react';
+import { Box, Divider, Flex, Text, VStack, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavLink } from './types';
@@ -7,6 +7,8 @@ import type { UserInfo } from 'types/api/account';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ProfileMenuNavLink from './ProfileMenuNavLink';
 import ProfileMenuWallet from './ProfileMenuWallet';
@@ -46,9 +48,32 @@ interface Props {
 }
 
 const ProfileMenuContent = ({ data, onClose }: Props) => {
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+  const alertBgColor = useColorModeValue('orange.100', 'orange.900');
 
   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>
+      ) }
+
       <Flex alignItems="center" justifyContent="space-between">
         <ProfileMenuNavLink
           text="Profile"

ui/snippets/profile/ProfileMenuWallet.tsx

@@ -2,12 +2,12 @@ import { Button, Divider, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
 import delay from 'lib/delay';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
 import useWallet from '../walletMenu/useWallet';
+import useWeb3AccountWithDomain from './useWeb3AccountWithDomain';
 
 interface Props {
   onClose?: () => void;
@@ -16,15 +16,7 @@ interface Props {
 const ProfileMenuWallet = ({ onClose }: Props) => {
   const wallet = useWallet({ source: 'Header' });
 
-  const addressDomainQuery = useApiQuery('address_domain', {
-    pathParams: {
-      chainId: config.chain.id,
-      address: wallet.address,
-    },
-    queryOptions: {
-      enabled: config.features.nameService.isEnabled && Boolean(wallet.address),
-    },
-  });
+  const web3AccountWithDomain = useWeb3AccountWithDomain(true);
 
   const handleConnectWalletClick = React.useCallback(async() => {
     wallet.openModal();
@@ -42,14 +34,14 @@ const ProfileMenuWallet = ({ onClose }: Props) => {
     return <Divider/>;
   }
 
-  if (wallet.isWalletConnected) {
+  if (wallet.isWalletConnected && web3AccountWithDomain.address) {
     return (
       <>
         <Divider/>
         <Flex alignItems="center" columnGap={ 2 } py="14px">
           <AddressEntity
-            address={{ hash: wallet.address, ens_domain_name: addressDomainQuery.data?.domain?.name }}
-            isLoading={ addressDomainQuery.isPending }
+            address={{ hash: web3AccountWithDomain.address, ens_domain_name: web3AccountWithDomain.domain }}
+            isLoading={ web3AccountWithDomain.isLoading }
             isTooltipDisabled
             truncation="dynamic"
             fontSize="sm"

ui/snippets/profile/useWeb3AccountWithDomain.tsx

+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import useAccount from 'lib/web3/useAccount';
+
+export default function useWeb3AccountWithDomain(isEnabled: boolean) {
+  const { address } = useAccount();
+
+  const isQueryEnabled = config.features.nameService.isEnabled && Boolean(address) && Boolean(isEnabled);
+
+  const domainQuery = useApiQuery('address_domain', {
+    pathParams: {
+      chainId: config.chain.id,
+      address,
+    },
+    queryOptions: {
+      enabled: isQueryEnabled,
+      refetchOnMount: false,
+    },
+  });
+
+  return React.useMemo(() => {
+    return {
+      address: isEnabled ? address : undefined,
+      domain: domainQuery.data?.domain?.name,
+      isLoading: isQueryEnabled && domainQuery.isLoading,
+    };
+  }, [ address, domainQuery.data?.domain?.name, domainQuery.isLoading, isEnabled, isQueryEnabled ]);
+}