feat: changed account style in settings page

vechain · Feb 8, 2025 · 8425000 · 8425000
1 parent 6e83b23
commit 8425000
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 34 deletions.
diff --git a/packages/vechain-kit/src/components/AccountModal/Components/Profile.tsx b/packages/vechain-kit/src/components/AccountModal/Components/Profile.tsx
@@ -0,0 +1,73 @@
+import {
+    Box,
+    Button,
+    Card,
+    CardBody,
+    CardFooter,
+    Icon,
+} from '@chakra-ui/react';
+import { AccountAvatar, AddressDisplay } from '@/components/common';
+import { useWallet } from '@/hooks';
+import { useVeChainKitConfig } from '@/providers';
+import { FaEdit } from 'react-icons/fa';
+import { picasso } from '@vechain/picasso';
+
+type ProfileProps = {
+    onEditClick: () => void;
+};
+
+export const Profile = ({ onEditClick }: ProfileProps) => {
+    const { darkMode: isDark } = useVeChainKitConfig();
+    const { account } = useWallet();
+
+    const headerImageSvg = picasso(account?.address ?? '');
+
+    return (
+        <Card
+            bg={isDark ? 'blackAlpha.400' : 'whiteAlpha.400'}
+            borderRadius="xl"
+            width="full"
+            position="relative"
+            overflow="visible"
+        >
+            <Box
+                p={0}
+                backgroundSize="100% !important"
+                backgroundPosition="center"
+                position="relative"
+                h="80px"
+                background={`no-repeat url('data:image/svg+xml;utf8,${headerImageSvg}')`}
+                w="100%"
+                borderRadius="14px 14px 0 0"
+            />
+            <Box
+                position="absolute"
+                top="30px"
+                left="50%"
+                transform="translateX(-50%)"
+            >
+                <AccountAvatar
+                    wallet={account}
+                    props={{
+                        width: '100px',
+                        height: '100px',
+                        boxShadow: '0px 0px 3px 2px #00000024',
+                    }}
+                />
+            </Box>
+            <CardBody pt="14" pb="6" backgroundColor={'none'} border={'none'}>
+                <AddressDisplay wallet={account} />
+            </CardBody>
+            <CardFooter pt={0} justify="center">
+                <Button
+                    size="sm"
+                    variant="ghost"
+                    leftIcon={<Icon as={FaEdit} />}
+                    onClick={onEditClick}
+                >
+                    Edit
+                </Button>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/packages/vechain-kit/src/components/AccountModal/Components/index.ts b/packages/vechain-kit/src/components/AccountModal/Components/index.ts
@@ -5,3 +5,4 @@ export * from './BalanceSection';
 export * from './Tabs/AssetsSection';
 export * from './QuickActionsSection';
 export * from './Alerts';
+export * from './Profile';
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Account/SettingsContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Account/SettingsContent.tsx
@@ -6,7 +6,6 @@ import {
     ModalHeader,
     Button,
     Box,
-    Tag,
     Text,
 } from '@chakra-ui/react';
 import {
@@ -15,21 +14,15 @@ import {
     useWallet,
 } from '@/hooks';
 import { MdOutlineNavigateNext } from 'react-icons/md';
-import { ActionButton } from '@/components';
-import {
-    AccountAvatar,
-    AddressDisplay,
-    ModalBackButton,
-    StickyHeaderContainer,
-} from '@/components/common';
+import { ActionButton, Profile } from '@/components';
+import { ModalBackButton, StickyHeaderContainer } from '@/components/common';
 import { useVeChainKitConfig } from '@/providers/VeChainKitProvider';
 import { AccountModalContentTypes } from '../../Types';
 import { useTranslation } from 'react-i18next';
 import { VscDebugDisconnect } from 'react-icons/vsc';
 import { useEffect, useRef } from 'react';
 import { RiLogoutBoxLine } from 'react-icons/ri';
 import { BsQuestionCircle } from 'react-icons/bs';
-import { CgProfile } from 'react-icons/cg';
 import { BiBell } from 'react-icons/bi';
 import { useNotifications } from '@/hooks/notifications';
 import { IoShieldOutline } from 'react-icons/io5';
@@ -48,9 +41,9 @@ export const SettingsContent = ({
     const contentRef = useRef<HTMLDivElement>(null);
     const { t } = useTranslation();
 
-    const { privy, darkMode: isDark, network } = useVeChainKitConfig();
+    const { privy, darkMode: isDark } = useVeChainKitConfig();
 
-    const { connection, disconnect, account } = useWallet();
+    const { connection, disconnect } = useWallet();
 
     const { getConnectionCache } = useCrossAppConnectionCache();
     const connectionCache = getConnectionCache();
@@ -84,7 +77,7 @@ export const SettingsContent = ({
             </StickyHeaderContainer>
 
             <ModalBody w={'full'}>
-                <VStack justify={'center'}>
+                {/* <VStack justify={'center'}>
                     <AccountAvatar wallet={account} props={{ maxW: '100px' }} />
                     <AddressDisplay wallet={account} />
                     {network.type !== 'main' && (
@@ -100,10 +93,16 @@ export const SettingsContent = ({
                                 : t('Unknown')}
                         </Tag>
                     )}
-                </VStack>
+                </VStack> */}
 
-                <VStack mt={10} w={'full'} spacing={0}>
-                    <ActionButton
+                <Profile
+                    onEditClick={() =>
+                        setCurrentContent('account-customization')
+                    }
+                />
+
+                <VStack w={'full'} spacing={0}>
+                    {/* <ActionButton
                         title={t('Customize profile')}
                         description={t(
                             'Customize your account with a nickname and a picture to easily identify it.',
@@ -113,7 +112,7 @@ export const SettingsContent = ({
                         }}
                         leftIcon={CgProfile}
                         rightIcon={MdOutlineNavigateNext}
-                    />
+                    /> */}
 
                     <ActionButton
                         style={{

diff --git a/...n-kit/src/components/AccountModal/Contents/ConnectionDetails/ConnectionDetailsContent.tsx b/...n-kit/src/components/AccountModal/Contents/ConnectionDetails/ConnectionDetailsContent.tsx
@@ -27,7 +27,6 @@ import {
     WalletSecuredBy,
 } from './Components';
 import { useVeChainKitConfig } from '@/providers';
-import { useWallet as useDappKitWallet } from '@vechain/dapp-kit-react';
 
 type Props = {
     onGoBack: () => void;
@@ -39,7 +38,6 @@ export const ConnectionDetailsContent = ({ onGoBack }: Props) => {
 
     const { privy, darkMode: isDark } = useVeChainKitConfig();
     const { connection } = useWallet();
-    const { source } = useDappKitWallet();
 
     const { data: appInfo } = useFetchAppInfo(privy?.appId ?? '');
 
@@ -77,19 +75,6 @@ export const ConnectionDetailsContent = ({ onGoBack }: Props) => {
                 {connection.isConnectedWithDappKit && (
                     <VStack align="stretch" textAlign={'center'} mt={5}>
                         <DappKitConnectionCard />
-
-                        <Text
-                            fontSize={'sm'}
-                            opacity={0.5}
-                            textAlign={'center'}
-                        >
-                            {t(
-                                'This is your main wallet and identity. Please be sure to keep it safe and backed up. Go to {{element}} app or extension to manage your security settings.',
-                                {
-                                    element: source,
-                                },
-                            )}
-                        </Text>
                     </VStack>
                 )}
 

diff --git a/packages/vechain-kit/src/components/common/AddressDisplay.tsx b/packages/vechain-kit/src/components/common/AddressDisplay.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Text, VStack, Icon, HStack } from '@chakra-ui/react';
+import { Text, VStack, Icon, HStack, PropsOf } from '@chakra-ui/react';
 import { useState } from 'react';
 import { IoCopyOutline, IoCheckmarkOutline } from 'react-icons/io5';
 import { humanAddress } from '@/utils';
@@ -10,9 +10,15 @@ type Props = {
     wallet: Wallet;
     label?: string;
     size?: string;
+    style?: PropsOf<typeof VStack>;
 };
 
-export const AddressDisplay = ({ wallet, label, size = 'lg' }: Props) => {
+export const AddressDisplay = ({
+    wallet,
+    label,
+    size = 'lg',
+    style,
+}: Props) => {
     const [copied, setCopied] = useState(false);
     const [copiedDomain, setCopiedDomain] = useState(false);
 
@@ -28,7 +34,7 @@ export const AddressDisplay = ({ wallet, label, size = 'lg' }: Props) => {
     };
 
     return (
-        <VStack w={'full'} justifyContent={'center'}>
+        <VStack w={'full'} justifyContent={'center'} {...style}>
             <VStack>
                 {label && (
                     <Text fontSize={'sm'} opacity={0.7}>