refactoring

ui/snippets/profile/useWeb3AccountWithDomain.tsx → lib/web3/useAccountWithDomain.ts

@@ -2,9 +2,10 @@ 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) {
+import useAccount from './useAccount';
+
+export default function useAccountWithDomain(isEnabled: boolean) {
   const { address } = useAccount();
 
   const isQueryEnabled = config.features.nameService.isEnabled && Boolean(address) && Boolean(isEnabled);

ui/home/HeroBanner.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 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';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
 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';
@@ -55,8 +55,8 @@ const HeroBanner = () => {
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'block' }}>
               {
-                (config.features.account.isEnabled && <ProfileDesktop buttonVariant="hero"/>) ||
-                (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonVariant="hero"/>)
+                (config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
+                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)
               }
             </Box>
           ) }

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -12,8 +12,8 @@ import IconSvg from 'ui/shared/IconSvg';
 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 UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
 import AppSecurityReport from './AppSecurityReport';
 import ContractListModal from './ContractListModal';
@@ -100,8 +100,8 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
         { !isMobile && (
           <Box ml="auto">
             {
-              (config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/>) ||
-              (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonSize="sm"/>)
+              (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
+              (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
             }
           </Box>
         ) }

ui/snippets/header/HeaderDesktop.tsx

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

ui/snippets/header/HeaderMobile.tsx

@@ -5,9 +5,9 @@ import { useInView } from 'react-intersection-observer';
 import config from 'configs/app';
 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 UserProfileMobile from 'ui/snippets/user/profile/UserProfileMobile';
+import UserWalletMobile from 'ui/snippets/user/wallet/UserWalletMobile';
 
 import Burger from './Burger';
 
@@ -49,8 +49,8 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
           {
-            (config.features.account.isEnabled && <ProfileMobile/>) ||
-            (config.features.blockchainInteraction.isEnabled && <WalletMobile/>) ||
+            (config.features.account.isEnabled && <UserProfileMobile/>) ||
+            (config.features.blockchainInteraction.isEnabled && <UserWalletMobile/>) ||
             <Box boxSize={ 10 }/>
           }
         </Flex>

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -5,8 +5,8 @@ import config from 'configs/app';
 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 WalletDesktop from 'ui/snippets/wallet/WalletDesktop';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
 import TestnetBadge from '../TestnetBadge';
 import NavLink from './NavLink';
@@ -39,8 +39,8 @@ const NavigationDesktop = () => {
           </Flex>
         </chakra.nav>
         {
-          (config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/>) ||
-          (config.features.blockchainInteraction.isEnabled && <WalletDesktop buttonSize="sm"/>)
+          (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
+          (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
         }
       </Flex>
     </Box>

ui/snippets/user/README.md

+Component in `/profile` directory are used when Account and WalletConnect features are enabled.
+Component in `/wallet` directory are used when only WalletConnect features is enabled.
\ No newline at end of file

ui/snippets/profile/ProfileAddressIcon.tsx → ui/snippets/user/UserIdenticon.tsx

@@ -9,7 +9,7 @@ type Props = {
   isAutoConnectDisabled?: boolean;
 };
 
-const ProfileAddressIcon = ({ address, isAutoConnectDisabled }: Props) => {
+const UserIdenticon = ({ address, isAutoConnectDisabled }: Props) => {
   const borderColor = useColorModeValue('orange.100', 'orange.900');
 
   return (
@@ -37,4 +37,4 @@ const ProfileAddressIcon = ({ address, isAutoConnectDisabled }: Props) => {
   );
 };
 
-export default React.memo(ProfileAddressIcon);
+export default React.memo(UserIdenticon);

ui/snippets/wallet/WalletAutoConnectDisabledAlert.tsx → ui/snippets/user/UserWalletAutoConnectAlert.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-const WalletAutoConnectDisabledAlert = () => {
+const UserWalletAutoConnectAlert = () => {
   const bgColor = useColorModeValue('orange.100', 'orange.900');
 
   return (
@@ -28,4 +28,4 @@ const WalletAutoConnectDisabledAlert = () => {
   );
 };
 
-export default React.memo(WalletAutoConnectDisabledAlert);
+export default React.memo(UserWalletAutoConnectAlert);

ui/snippets/profile/ProfileButton.tsx → ui/snippets/user/profile/UserProfileButton.tsx

@@ -8,10 +8,10 @@ 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 useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import IconSvg from 'ui/shared/IconSvg';
 
-import ProfileAddressIcon from './ProfileAddressIcon';
-import useWeb3AccountWithDomain from './useWeb3AccountWithDomain';
+import UserIdenticon from '../UserIdenticon';
 import { getUserHandle } from './utils';
 
 interface Props {
@@ -22,7 +22,7 @@ interface Props {
   isPending?: boolean;
 }
 
-const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   const [ isFetched, setIsFetched ] = React.useState(false);
   const isMobile = useIsMobile();
 
@@ -57,7 +57,7 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
 
       return (
         <HStack gap={ 2 }>
-          <ProfileAddressIcon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+          <UserIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
           <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
         </HStack>
       );
@@ -104,4 +104,4 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
   );
 };
 
-export default React.memo(React.forwardRef(ProfileButton));
+export default React.memo(React.forwardRef(UserProfileButton));

ui/snippets/profile/ProfileMenuContent.tsx → ui/snippets/user/profile/UserProfileContent.tsx

@@ -9,10 +9,10 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useLogout from 'ui/snippets/auth/useLogout';
-import WalletAutoConnectDisabledAlert from 'ui/snippets/wallet/WalletAutoConnectDisabledAlert';
 
-import ProfileMenuNavLink from './ProfileMenuNavLink';
-import ProfileMenuWallet from './ProfileMenuWallet';
+import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert';
+import UserProfileContentNavLink from './UserProfileContentNavLink';
+import UserProfileContentWallet from './UserProfileContentWallet';
 import { getUserHandle } from './utils';
 
 const navLinks: Array<NavLink> = [
@@ -48,16 +48,16 @@ interface Props {
   onClose?: () => void;
 }
 
-const ProfileMenuContent = ({ data, onClose }: Props) => {
+const UserProfileContent = ({ data, onClose }: Props) => {
   const { isAutoConnectDisabled } = useMarketplaceContext();
   const logout = useLogout();
 
   return (
     <Box>
-      { isAutoConnectDisabled && <WalletAutoConnectDisabledAlert/> }
+      { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
 
       <Flex alignItems="center" justifyContent="space-between">
-        <ProfileMenuNavLink
+        <UserProfileContentNavLink
           text="Profile"
           href={ route({ pathname: '/auth/profile' }) }
           icon="profile"
@@ -66,11 +66,11 @@ const ProfileMenuContent = ({ data, onClose }: Props) => {
         { data?.email && <Text variant="secondary" fontSize="sm">{ getUserHandle(data.email) }</Text> }
       </Flex>
 
-      { config.features.blockchainInteraction.isEnabled ? <ProfileMenuWallet onClose={ onClose }/> : <Divider/> }
+      { config.features.blockchainInteraction.isEnabled ? <UserProfileContentWallet onClose={ onClose }/> : <Divider/> }
 
       <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
         { navLinks.map((item) => (
-          <ProfileMenuNavLink
+          <UserProfileContentNavLink
             key={ item.text }
             { ...item }
             onClick={ onClose }
@@ -80,7 +80,7 @@ const ProfileMenuContent = ({ data, onClose }: Props) => {
 
       <Divider my={ 1 }/>
 
-      <ProfileMenuNavLink
+      <UserProfileContentNavLink
         text="Sign out"
         icon="sign_out"
         onClick={ logout }
@@ -89,4 +89,4 @@ const ProfileMenuContent = ({ data, onClose }: Props) => {
   );
 };
 
-export default React.memo(ProfileMenuContent);
+export default React.memo(UserProfileContent);

ui/snippets/profile/ProfileMenuNavLink.tsx → ui/snippets/user/profile/UserProfileContentNavLink.tsx

@@ -8,7 +8,7 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 
 type Props = NavLink
 
-const ProfileMenuNavLink = ({ href, icon, text, onClick }: Props) => {
+const UserProfileContentNavLink = ({ href, icon, text, onClick }: Props) => {
 
   return (
     <LinkInternal
@@ -27,4 +27,4 @@ const ProfileMenuNavLink = ({ href, icon, text, onClick }: Props) => {
   );
 };
 
-export default React.memo(ProfileMenuNavLink);
+export default React.memo(UserProfileContentNavLink);

ui/snippets/profile/ProfileMenuWallet.tsx → ui/snippets/user/profile/UserProfileContentWallet.tsx

@@ -2,17 +2,16 @@ import { Button, Divider, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
-import useWeb3AccountWithDomain from './useWeb3AccountWithDomain';
-
 interface Props {
   onClose?: () => void;
 }
 
-const ProfileMenuWallet = ({ onClose }: Props) => {
+const UserProfileContentWallet = ({ onClose }: Props) => {
   const web3Wallet = useWeb3Wallet({ source: 'Header' });
 
   const web3AccountWithDomain = useWeb3AccountWithDomain(true);
@@ -72,4 +71,4 @@ const ProfileMenuWallet = ({ onClose }: Props) => {
   );
 };
 
-export default React.memo(ProfileMenuWallet);
+export default React.memo(UserProfileContentWallet);

ui/snippets/profile/ProfileDesktop.tsx → ui/snippets/user/profile/UserProfileDesktop.tsx

@@ -8,15 +8,15 @@ import Popover from 'ui/shared/chakra/Popover';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
-import ProfileButton from './ProfileButton';
-import ProfileMenuContent from './ProfileMenuContent';
+import UserProfileButton from './UserProfileButton';
+import UserProfileContent from './UserProfileContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
   buttonVariant?: ButtonProps['variant'];
 }
 
-const ProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   const router = useRouter();
 
   const authModal = useDisclosure();
@@ -43,7 +43,7 @@ const ProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
     <>
       <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ profileMenu.isOpen } onClose={ profileMenu.onClose }>
         <PopoverTrigger>
-          <ProfileButton
+          <UserProfileButton
             profileQuery={ profileQuery }
             size={ buttonSize }
             variant={ buttonVariant }
@@ -54,7 +54,7 @@ const ProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
         { profileQuery.data && (
           <PopoverContent maxW="280px" minW="220px" w="min-content">
             <PopoverBody>
-              <ProfileMenuContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
+              <UserProfileContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
             </PopoverBody>
           </PopoverContent>
         ) }
@@ -69,4 +69,4 @@ const ProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   );
 };
 
-export default React.memo(ProfileDesktop);
+export default React.memo(UserProfileDesktop);

ui/snippets/profile/ProfileMobile.tsx → ui/snippets/user/profile/UserProfileMobile.tsx

@@ -7,10 +7,10 @@ import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
-import ProfileButton from './ProfileButton';
-import ProfileMenuContent from './ProfileMenuContent';
+import UserProfileButton from './UserProfileButton';
+import UserProfileContent from './UserProfileContent';
 
-const ProfileMobile = () => {
+const UserProfileMobile = () => {
   const router = useRouter();
 
   const authModal = useDisclosure();
@@ -35,7 +35,7 @@ const ProfileMobile = () => {
 
   return (
     <>
-      <ProfileButton
+      <UserProfileButton
         profileQuery={ profileQuery }
         variant="header"
         onClick={ handleProfileButtonClick }
@@ -50,7 +50,7 @@ const ProfileMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="300px">
             <DrawerBody p={ 6 }>
-              <ProfileMenuContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
+              <UserProfileContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
             </DrawerBody>
           </DrawerContent>
         </Drawer>
@@ -65,4 +65,4 @@ const ProfileMobile = () => {
   );
 };
 
-export default React.memo(ProfileMobile);
+export default React.memo(UserProfileMobile);

ui/snippets/wallet/WalletButton.tsx → ui/snippets/user/wallet/UserWalletButton.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import shortenString from 'lib/shortenString';
-import ProfileAddressIcon from 'ui/snippets/profile/ProfileAddressIcon';
+
+import UserIdenticon from '../UserIdenticon';
 
 interface Props {
   size?: ButtonProps['size'];
@@ -16,7 +17,7 @@ interface Props {
   domain?: string;
 }
 
-const WalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const UserWalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
   const isMobile = useIsMobile();
 
@@ -29,7 +30,7 @@ const WalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled
 
     return (
       <HStack gap={ 2 }>
-        <ProfileAddressIcon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+        <UserIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
         <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
       </HStack>
     );
@@ -63,4 +64,4 @@ const WalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled
   );
 };
 
-export default React.memo(React.forwardRef(WalletButton));
+export default React.memo(React.forwardRef(UserWalletButton));

ui/snippets/wallet/WalletDesktop.tsx → ui/snippets/user/wallet/UserWalletDesktop.tsx

@@ -2,12 +2,12 @@ import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type Button
 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 useWeb3AccountWithDomain from 'ui/snippets/profile/useWeb3AccountWithDomain';
 
-import WalletButton from './WalletButton';
-import WalletMenuContent from './WalletMenuContent';
+import UserWalletButton from './UserWalletButton';
+import UserWalletMenuContent from './UserWalletMenuContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
@@ -38,7 +38,7 @@ const WalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   return (
     <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ walletMenu.isOpen } onClose={ walletMenu.onClose }>
       <PopoverTrigger>
-        <WalletButton
+        <UserWalletButton
           size={ buttonSize }
           variant={ buttonVariant }
           onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
@@ -51,7 +51,7 @@ const WalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
       { web3AccountWithDomain.address && (
         <PopoverContent w="235px">
           <PopoverBody>
-            <WalletMenuContent
+            <UserWalletMenuContent
               address={ web3AccountWithDomain.address }
               domain={ web3AccountWithDomain.domain }
               isAutoConnectDisabled={ isAutoConnectDisabled }

ui/snippets/wallet/WalletMenuContent.tsx → ui/snippets/user/wallet/UserWalletMenuContent.tsx

@@ -5,7 +5,7 @@ import delay from 'lib/delay';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
-import WalletAutoConnectDisabledAlert from './WalletAutoConnectDisabledAlert';
+import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert';
 
 interface Props {
   address: string;
@@ -15,7 +15,7 @@ interface Props {
   onOpenWallet: () => void;
 }
 
-const WalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnect, onOpenWallet }: Props) => {
+const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnect, onOpenWallet }: Props) => {
 
   const handleOpenWalletClick = React.useCallback(async() => {
     await delay(100);
@@ -24,7 +24,7 @@ const WalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnec
 
   return (
     <Box>
-      { isAutoConnectDisabled && <WalletAutoConnectDisabledAlert/> }
+      { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
       <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.
@@ -54,4 +54,4 @@ const WalletMenuContent = ({ isAutoConnectDisabled, address, domain, onDisconnec
   );
 };
 
-export default React.memo(WalletMenuContent);
+export default React.memo(UserWalletMenuContent);

ui/snippets/wallet/WalletMobile.tsx → ui/snippets/user/wallet/UserWalletMobile.tsx

@@ -2,13 +2,13 @@ import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from
 import React from 'react';
 
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
-import useWeb3AccountWithDomain from 'ui/snippets/profile/useWeb3AccountWithDomain';
 
-import WalletButton from './WalletButton';
-import WalletMenuContent from './WalletMenuContent';
+import UserWalletButton from './UserWalletButton';
+import UserWalletMenuContent from './UserWalletMenuContent';
 
-const WalletMobile = () => {
+const UserWalletMobile = () => {
   const walletMenu = useDisclosure();
 
   const web3Wallet = useWeb3Wallet({ source: 'Header' });
@@ -31,7 +31,7 @@ const WalletMobile = () => {
 
   return (
     <>
-      <WalletButton
+      <UserWalletButton
         variant="header"
         onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
         address={ web3AccountWithDomain.address }
@@ -48,7 +48,7 @@ const WalletMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="300px">
             <DrawerBody p={ 6 }>
-              <WalletMenuContent
+              <UserWalletMenuContent
                 address={ web3AccountWithDomain.address }
                 domain={ web3AccountWithDomain.domain }
                 isAutoConnectDisabled={ isAutoConnectDisabled }
@@ -63,4 +63,4 @@ const WalletMobile = () => {
   );
 };
 
-export default React.memo(WalletMobile);
+export default React.memo(UserWalletMobile);