fix behaviour "connect wallet" button on contract page

ui/address/contract/methods/ContractConnectWallet.tsx

@@ -5,29 +5,15 @@ import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useWeb3Wallet from 'lib/web3/useWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import useIsAuth from 'ui/snippets/auth/useIsAuth';
-import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
 interface Props {
   isLoading?: boolean;
 }
 
 const ContractConnectWallet = ({ isLoading }: Props) => {
-  const signInWithWallet = useSignInWithWallet({ source: 'Smart contracts' });
-  const isAuth = useIsAuth();
   const web3Wallet = useWeb3Wallet({ source: 'Smart contracts' });
   const isMobile = useIsMobile();
 
-  const shouldSignIn = config.features.account.isEnabled && !isAuth;
-
-  const handleConnectClick = React.useCallback(() => {
-    if (shouldSignIn) {
-      signInWithWallet.start();
-    } else {
-      web3Wallet.connect();
-    }
-  }, [ signInWithWallet, web3Wallet, shouldSignIn ]);
-
   const content = (() => {
     if (!web3Wallet.isConnected) {
       return (
@@ -35,10 +21,10 @@ const ContractConnectWallet = ({ isLoading }: Props) => {
           <span>Disconnected</span>
           <Button
             ml={ 3 }
-            onClick={ handleConnectClick }
+            onClick={ web3Wallet.connect }
             size="sm"
             variant="outline"
-            isLoading={ shouldSignIn ? signInWithWallet.isPending : web3Wallet.isOpen }
+            isLoading={ web3Wallet.isOpen }
             loadingText="Connect wallet"
           >
             Connect wallet

ui/snippets/user/profile/UserProfileButton.tsx

@@ -27,7 +27,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
   const isMobile = useIsMobile();
 
   const { data, isLoading } = profileQuery;
-  const web3AccountWithDomain = useWeb3AccountWithDomain(!data?.address_hash);
+  const web3AccountWithDomain = useWeb3AccountWithDomain(true);
   const { isAutoConnectDisabled } = useMarketplaceContext();
 
   React.useEffect(() => {
@@ -37,10 +37,6 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
   }, [ isLoading ]);
 
   const content = (() => {
-    if (!data) {
-      return 'Log in';
-    }
-
     if (web3AccountWithDomain.address) {
       return (
         <HStack gap={ 2 }>
@@ -52,6 +48,10 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
       );
     }
 
+    if (!data) {
+      return 'Log in';
+    }
+
     return (
       <HStack gap={ 2 }>
         <IconSvg name="profile" boxSize={ 5 }/>
@@ -73,7 +73,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
           size={ size }
           variant={ variant }
           onClick={ onClick }
-          data-selected={ Boolean(data) }
+          data-selected={ Boolean(data) || Boolean(web3AccountWithDomain.address) }
           data-warning={ isAutoConnectDisabled }
           fontSize="sm"
           lineHeight={ 5 }

ui/snippets/user/profile/UserProfileContent.tsx

-import { Box, Divider, Flex, Link, VStack } from '@chakra-ui/react';
+import { Box, Button, Divider, Flex, Link, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavLink } from './types';
@@ -46,16 +46,27 @@ const navLinks: Array<NavLink> = [
 ].filter(Boolean);
 
 interface Props {
-  data: UserInfo;
+  data: UserInfo | undefined;
   onClose: () => void;
+  onLogin: () => void;
   onAddEmail: () => void;
   onAddAddress: () => void;
 }
 
-const UserProfileContent = ({ data, onClose, onAddEmail, onAddAddress }: Props) => {
+const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }: Props) => {
   const { isAutoConnectDisabled } = useMarketplaceContext();
   const logout = useLogout();
 
+  if (!data) {
+    return (
+      <Box>
+        { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
+        { config.features.blockchainInteraction.isEnabled && <UserProfileContentWallet onClose={ onClose }/> }
+        <Button mt={ 3 } onClick={ onLogin } size="sm" w="100%">Log in</Button>
+      </Box>
+    );
+  }
+
   return (
     <Box>
       { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
@@ -65,6 +76,7 @@ const UserProfileContent = ({ data, onClose, onAddEmail, onAddAddress }: Props)
         href={ route({ pathname: '/auth/profile' }) }
         icon="profile"
         onClick={ onClose }
+        py="8px"
       />
 
       <Box fontSize="xs" lineHeight={ 4 } fontWeight="500" borderColor="divider" borderWidth="1px" borderRadius="base">
@@ -85,7 +97,7 @@ const UserProfileContent = ({ data, onClose, onAddEmail, onAddAddress }: Props)
         </Flex>
       </Box>
 
-      { config.features.blockchainInteraction.isEnabled ? <UserProfileContentWallet onClose={ onClose }/> : <Divider/> }
+      { config.features.blockchainInteraction.isEnabled && <UserProfileContentWallet onClose={ onClose } mt={ 3 }/> }
 
       <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden" mt={ 3 }>
         { navLinks.map((item) => (

ui/snippets/user/profile/UserProfileContentNavLink.tsx

+import type { SpaceProps } from '@chakra-ui/react';
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
@@ -6,9 +7,11 @@ import type { NavLink } from './types';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
-type Props = NavLink
+type Props = NavLink & {
+  py?: SpaceProps['py'];
+}
 
-const UserProfileContentNavLink = ({ href, icon, text, onClick }: Props) => {
+const UserProfileContentNavLink = ({ href, icon, text, onClick, py }: Props) => {
 
   return (
     <LinkInternal
@@ -16,7 +19,7 @@ const UserProfileContentNavLink = ({ href, icon, text, onClick }: Props) => {
       display="flex"
       alignItems="center"
       columnGap={ 3 }
-      py="14px"
+      py={ py ?? '14px' }
       color="initial"
       _hover={{ textDecoration: 'none', color: 'link_hovered' }}
       onClick={ onClick }

ui/snippets/user/profile/UserProfileContentWallet.tsx

-import { Box, Button, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Box, Button, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
@@ -10,9 +10,10 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClose?: () => void;
+  className?: string;
 }
 
-const UserProfileContentWallet = ({ onClose }: Props) => {
+const UserProfileContentWallet = ({ onClose, className }: Props) => {
   const walletSnippetBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const web3Wallet = useWeb3Wallet({ source: 'Profile dropdown' });
 
@@ -70,7 +71,7 @@ const UserProfileContentWallet = ({ onClose }: Props) => {
   })();
 
   return (
-    <Box mt={ 3 }>
+    <Box className={ className }>
       <Flex px={ 2 } py={ 1 } mb={ 1 } fontSize="xs" lineHeight={ 4 } fontWeight="500">
         <span>Wallet for apps or contracts</span>
         <Hint label="Wallet for apps or contracts" boxSize={ 4 } ml={ 1 }/>
@@ -80,4 +81,4 @@ const UserProfileContentWallet = ({ onClose }: Props) => {
   );
 };
 
-export default React.memo(UserProfileContentWallet);
+export default React.memo(chakra(UserProfileContentWallet));

ui/snippets/user/profile/UserProfileDesktop.tsx

@@ -6,6 +6,7 @@ import type { Screen } from 'ui/snippets/auth/types';
 
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
+import useAccount from 'lib/web3/useAccount';
 import Popover from 'ui/shared/chakra/Popover';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
@@ -30,9 +31,10 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
 
   const profileQuery = useProfileQuery();
   const signInWithWallet = useSignInWithWallet({});
+  const { address: web3Address } = useAccount();
 
   const handleProfileButtonClick = React.useCallback(() => {
-    if (profileQuery.data) {
+    if (profileQuery.data || web3Address) {
       mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_ACCESS, { Action: 'Dropdown open' });
       profileMenu.onOpen();
       return;
@@ -44,7 +46,7 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
     }
 
     authModal.onOpen();
-  }, [ profileQuery.data, router.pathname, authModal, profileMenu, signInWithWallet ]);
+  }, [ profileQuery.data, router.pathname, authModal, profileMenu, signInWithWallet, web3Address ]);
 
   const handleAddEmailClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'email', isAuth: true });
@@ -68,12 +70,13 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
             isPending={ signInWithWallet.isPending }
           />
         </PopoverTrigger>
-        { profileQuery.data && (
+        { (profileQuery.data || web3Address) && (
           <PopoverContent w="280px">
             <PopoverBody>
               <UserProfileContent
                 data={ profileQuery.data }
                 onClose={ profileMenu.onClose }
+                onLogin={ authModal.onOpen }
                 onAddEmail={ handleAddEmailClick }
                 onAddAddress={ handleAddAddressClick }
               />

ui/snippets/user/profile/UserProfileMobile.tsx

@@ -6,6 +6,7 @@ import type { Screen } from 'ui/snippets/auth/types';
 
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
+import useAccount from 'lib/web3/useAccount';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
@@ -24,9 +25,10 @@ const UserProfileMobile = () => {
 
   const profileQuery = useProfileQuery();
   const signInWithWallet = useSignInWithWallet({});
+  const { address: web3Address } = useAccount();
 
   const handleProfileButtonClick = React.useCallback(() => {
-    if (profileQuery.data) {
+    if (profileQuery.data || web3Address) {
       mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_ACCESS, { Action: 'Dropdown open' });
       profileMenu.onOpen();
       return;
@@ -38,7 +40,7 @@ const UserProfileMobile = () => {
     }
 
     authModal.onOpen();
-  }, [ profileQuery.data, router.pathname, authModal, profileMenu, signInWithWallet ]);
+  }, [ profileQuery.data, web3Address, router.pathname, authModal, profileMenu, signInWithWallet ]);
 
   const handleAddEmailClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'email', isAuth: true });
@@ -57,7 +59,7 @@ const UserProfileMobile = () => {
         variant="header"
         onClick={ handleProfileButtonClick }
       />
-      { profileQuery.data && (
+      { (profileQuery.data || web3Address) && (
         <Drawer
           isOpen={ profileMenu.isOpen }
           placement="right"
@@ -70,6 +72,7 @@ const UserProfileMobile = () => {
               <UserProfileContent
                 data={ profileQuery.data }
                 onClose={ profileMenu.onClose }
+                onLogin={ authModal.onOpen }
                 onAddEmail={ handleAddEmailClick }
                 onAddAddress={ handleAddAddressClick }
               />