link wallet from profile

ui/myProfile/MyProfileWallet.tsx

-import { Button, Heading } from '@chakra-ui/react';
+import { Box, Button, Heading, useColorModeValue } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
 import type { UserInfo } from 'types/api/account';
 
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
 interface Props {
   profileQuery: UseQueryResult<UserInfo, unknown>;
+  onAddWallet: () => void;
 }
 
-const MyProfileWallet = ({ profileQuery }: Props) => {
+const MyProfileWallet = ({ profileQuery, onAddWallet }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
   return (
     <section>
       <Heading as="h2" size="sm" mb={ 3 }>My linked wallet</Heading>
-      { !profileQuery.data?.address_hash && <Button size="sm">Link wallet</Button> }
+      { profileQuery.data?.address_hash ? (
+        <Box px={ 3 } py="18px" bgColor={ bgColor } borderRadius="base">
+          <AddressEntity
+            address={{ hash: profileQuery.data.address_hash }}
+            fontWeight="500"
+          />
+        </Box>
+      ) : <Button size="sm" onClick={ onAddWallet }>Link wallet</Button> }
     </section>
   );
 };

ui/pages/MyProfile.tsx

-import { Flex } from '@chakra-ui/react';
+import { Flex, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Screen } from 'ui/snippets/auth/types';
+
 import config from 'configs/app';
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
@@ -9,11 +11,20 @@ import MyProfileWallet from 'ui/myProfile/MyProfileWallet';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import AuthModal from 'ui/snippets/auth/AuthModal';
 
 const MyProfile = () => {
+  const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>();
+  const authModal = useDisclosure();
+
   const profileQuery = useFetchProfileInfo();
   useRedirectForInvalidAuthToken();
 
+  const handleAddWalletClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
   const content = (() => {
     if (profileQuery.isPending) {
       return <ContentLoader/>;
@@ -24,10 +35,13 @@ const MyProfile = () => {
     }
 
     return (
-      <Flex maxW="480px" mt={ 8 } flexDir="column" rowGap={ 12 }>
-        <MyProfileEmail profileQuery={ profileQuery }/>
-        { config.features.blockchainInteraction.isEnabled && <MyProfileWallet profileQuery={ profileQuery }/> }
-      </Flex>
+      <>
+        <Flex maxW="480px" mt={ 8 } flexDir="column" rowGap={ 12 }>
+          <MyProfileEmail profileQuery={ profileQuery }/>
+          { config.features.blockchainInteraction.isEnabled && <MyProfileWallet profileQuery={ profileQuery } onAddWallet={ handleAddWalletClick }/> }
+        </Flex>
+        { authModal.isOpen && authInitialScreen && <AuthModal initialScreen={ authInitialScreen } onClose={ authModal.onClose }/> }
+      </>
     );
   })();
 

ui/snippets/auth/AuthModal.tsx

@@ -30,9 +30,9 @@ const AuthModal = ({ initialScreen, onClose }: Props) => {
     setSteps((prev) => prev.length > 1 ? prev.slice(0, -1) : prev);
   }, []);
 
-  const onReset = React.useCallback(() => {
-    setSteps([ initialScreen ]);
-  }, [ initialScreen ]);
+  const onReset = React.useCallback((isAuth?: boolean) => {
+    isAuth ? onClose() : setSteps([ initialScreen ]);
+  }, [ initialScreen, onClose ]);
 
   const onAuthSuccess = React.useCallback(async(screen: ScreenSuccess) => {
     const { data } = await profileQuery.refetch();

ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx

@@ -7,7 +7,7 @@ import useSignInWithWallet from '../useSignInWithWallet';
 
 interface Props {
   onSuccess: (screen: ScreenSuccess) => void;
-  onError: () => void;
+  onError: (isAuth?: boolean) => void;
   isAuth?: boolean;
 }
 
@@ -19,8 +19,8 @@ const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth }: Props) =>
   }, [ onSuccess, isAuth ]);
 
   const handleSignInError = React.useCallback(() => {
-    onError();
-  }, [ onError ]);
+    onError(isAuth);
+  }, [ onError, isAuth ]);
 
   const { start } = useSignInWithWallet({ onSuccess: handleSignInSuccess, onError: handleSignInError });