From 2f810654bc100f6d6e4832e4834b165a0606240a Mon Sep 17 00:00:00 2001
From: Dan Rusnac <rusnac14@gmail.com>
Date: Sat, 8 Feb 2025 11:50:06 +0100
Subject: [PATCH] refactor: reorganized settings screen and removed
 notifications and logout from main

---
 .../providers/VechainKitProviderWrapper.tsx   |  4 +-
 .../Components/AccountSelector.tsx            |  4 +-
 .../AccountModal/Components/ActionButton.tsx  |  8 +-
 .../Contents/Account/AccountMainContent.tsx   | 48 ++-------
 .../Account/EmbeddedWalletContent.tsx         | 36 ++++---
 .../Account/WalletSettingsContent.tsx         | 97 +++++++++++++------
 .../Notifications/NotificationContent.tsx     | 17 ++--
 .../PrivyLinkedAccounts.tsx                   | 13 ---
 packages/vechain-kit/src/languages/en.json    |  8 +-
 9 files changed, 127 insertions(+), 108 deletions(-)

diff --git a/examples/homepage/src/app/providers/VechainKitProviderWrapper.tsx b/examples/homepage/src/app/providers/VechainKitProviderWrapper.tsx
index 4b40357..d47b9c7 100644
--- a/examples/homepage/src/app/providers/VechainKitProviderWrapper.tsx
+++ b/examples/homepage/src/app/providers/VechainKitProviderWrapper.tsx
@@ -94,8 +94,8 @@ export function VechainKitProviderWrapper({ children }: Props) {
             }}
             loginMethods={[
                 { method: 'vechain', gridColumn: 4 },
-                { method: 'dappkit', gridColumn: 4 },
-                { method: 'ecosystem', gridColumn: 4 },
+                { method: 'dappkit', gridColumn: 2 },
+                { method: 'ecosystem', gridColumn: 2 },
             ]}
             darkMode={isDarkMode}
             language={i18n.language}
diff --git a/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx b/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx
index f2c2bee..8ac3cff 100644
--- a/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx
@@ -20,7 +20,7 @@ export const AccountSelector = ({
     mt,
 }: Props) => {
     return (
-        <HStack mt={mt}>
+        <HStack mt={mt} w={'full'} justify={'center'}>
             <Button
                 w="fit-content"
                 p={2}
@@ -36,7 +36,7 @@ export const AccountSelector = ({
                         props={{ width: 5, height: 5 }}
                     />
                     <Text fontSize={size} fontWeight="500">
-                        {humanDomain(wallet?.domain ?? '', 6, 4) ||
+                        {humanDomain(wallet?.domain ?? '', 20, 0) ||
                             humanAddress(wallet?.address ?? '', 6, 4)}
                     </Text>
 
diff --git a/packages/vechain-kit/src/components/AccountModal/Components/ActionButton.tsx b/packages/vechain-kit/src/components/AccountModal/Components/ActionButton.tsx
index 5277520..965fd64 100644
--- a/packages/vechain-kit/src/components/AccountModal/Components/ActionButton.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Components/ActionButton.tsx
@@ -30,13 +30,13 @@ type ActionButtonProps = {
     isLoading?: boolean;
     loadingText?: string;
     style?: ButtonProps;
+    extraContent?: React.ReactNode;
 };
 
 export const ActionButton = ({
     leftIcon,
     rightIcon,
     title,
-    description,
     onClick,
     leftImage,
     hide = false,
@@ -48,6 +48,7 @@ export const ActionButton = ({
     isLoading,
     loadingText,
     style,
+    extraContent,
 }: ActionButtonProps) => {
     const { t } = useTranslation();
     const { colorMode } = useColorMode();
@@ -102,9 +103,10 @@ export const ActionButton = ({
                                 {t('Coming Soon!')}
                             </Tag>
                         )}
+                        {extraContent}
                     </HStack>
 
-                    <Text
+                    {/* <Text
                         fontSize={'xs'}
                         fontWeight={'400'}
                         opacity={0.5}
@@ -115,7 +117,7 @@ export const ActionButton = ({
                         pr={rightIcon ? '0px' : '10px'}
                     >
                         {description}
-                    </Text>
+                    </Text> */}
                 </VStack>
 
                 {rightIcon && (
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx
index 9b9dbd7..b5ffd9a 100644
--- a/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx
@@ -1,13 +1,9 @@
 import {
-    HStack,
-    Icon,
-    IconButton,
     ModalBody,
     ModalCloseButton,
     ModalFooter,
     ModalHeader,
     VStack,
-    Box,
 } from '@chakra-ui/react';
 import {
     StickyHeaderContainer,
@@ -25,8 +21,6 @@ import { Wallet } from '@/types';
 import { useTranslation } from 'react-i18next';
 import { useVeChainKitConfig } from '@/providers';
 import { useWallet } from '@/hooks';
-import { BiBell } from 'react-icons/bi';
-import { useNotifications } from '@/hooks/notifications';
 import { FeatureAnnouncementCard } from '../../Components/Alerts';
 import React from 'react';
 
@@ -42,9 +36,6 @@ export const AccountMainContent = ({ setCurrentContent, wallet }: Props) => {
     const { t } = useTranslation();
     const { darkMode: isDark } = useVeChainKitConfig();
     const { connection, account } = useWallet();
-    const { getNotifications } = useNotifications();
-    const notifications = getNotifications();
-    const hasUnreadNotifications = notifications.some((n) => !n.isRead);
 
     return (
         <ScrollToTopWrapper>
@@ -72,38 +63,13 @@ export const AccountMainContent = ({ setCurrentContent, wallet }: Props) => {
                         />
                     )}
 
-                    <HStack justify={'space-between'}>
-                        <AccountSelector
-                            mt={0}
-                            onClick={() => {
-                                setCurrentContent('settings');
-                            }}
-                            wallet={wallet}
-                        />
-                        <Box position="relative">
-                            <IconButton
-                                p={2}
-                                h={9}
-                                variant="vechainKitSelector"
-                                aria-label="notifications"
-                                icon={<Icon boxSize={5} as={BiBell} />}
-                                onClick={() =>
-                                    setCurrentContent('notifications')
-                                }
-                            />
-                            {hasUnreadNotifications && (
-                                <Box
-                                    position="absolute"
-                                    top={1}
-                                    right={1}
-                                    width="8px"
-                                    height="8px"
-                                    bg="red.500"
-                                    borderRadius="full"
-                                />
-                            )}
-                        </Box>
-                    </HStack>
+                    <AccountSelector
+                        mt={0}
+                        onClick={() => {
+                            setCurrentContent('settings');
+                        }}
+                        wallet={wallet}
+                    />
 
                     <BalanceSection mt={14} />
 
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Account/EmbeddedWalletContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Account/EmbeddedWalletContent.tsx
index 8e6c97e..78da6e4 100644
--- a/packages/vechain-kit/src/components/AccountModal/Contents/Account/EmbeddedWalletContent.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Contents/Account/EmbeddedWalletContent.tsx
@@ -28,6 +28,7 @@ import { ActionButton } from '../../Components';
 import { GiHouseKeys } from 'react-icons/gi';
 import { MdManageAccounts, MdOutlineNavigateNext } from 'react-icons/md';
 import { WalletSecuredBy } from '../ConnectionDetails/Components';
+import { IoIosFingerPrint } from 'react-icons/io';
 
 type Props = {
     setCurrentContent: React.Dispatch<
@@ -41,13 +42,13 @@ export const EmbeddedWalletContent = ({ setCurrentContent }: Props) => {
 
     const { connectedWallet } = useWallet();
 
-    const { exportWallet } = usePrivy();
+    const { exportWallet, linkPasskey } = usePrivy();
 
     const walletImage = getPicassoImage(connectedWallet?.address ?? '');
 
     const { getConnectionCache } = useCrossAppConnectionCache();
 
-    const { darkMode: isDark } = useVeChainKitConfig();
+    const { darkMode: isDark, privy } = useVeChainKitConfig();
     const { connection } = useWallet();
 
     const connectionCache = getConnectionCache();
@@ -61,7 +62,7 @@ export const EmbeddedWalletContent = ({ setCurrentContent }: Props) => {
                     textAlign={'center'}
                     color={isDark ? '#dfdfdd' : '#4d4d4d'}
                 >
-                    {t('Embedded Wallet')}
+                    {t('Access and security')}
                 </ModalHeader>
 
                 <ModalBackButton
@@ -192,18 +193,16 @@ export const EmbeddedWalletContent = ({ setCurrentContent }: Props) => {
                     {/* TODO: Go to {{element}} website to manage your login methods and security settings. */}
 
                     <ActionButton
-                        title={t('Backup your wallet')}
+                        title={t('Passkey')}
                         description={t(
-                            connection.isConnectedWithSocialLogin
-                                ? 'Store your Recovery Phrase or Private Key in a secure location, avoid losing access to your assets.'
-                                : 'Backup can be done only in the app securing your wallet.',
+                            'Enable one click login by adding a passkey to your account.',
                         )}
                         onClick={() => {
-                            exportWallet();
+                            linkPasskey();
                         }}
-                        isDisabled={!connection.isConnectedWithSocialLogin}
-                        leftIcon={GiHouseKeys}
-                        rightIcon={MdOutlineNavigateNext}
+                        leftIcon={IoIosFingerPrint}
+                        rightIcon={undefined}
+                        isDisabled={!privy?.allowPasskeyLinking}
                     />
 
                     <ActionButton
@@ -220,6 +219,21 @@ export const EmbeddedWalletContent = ({ setCurrentContent }: Props) => {
                         leftIcon={MdManageAccounts}
                         rightIcon={MdOutlineNavigateNext}
                     />
+
+                    <ActionButton
+                        title={t('Backup your wallet')}
+                        description={t(
+                            connection.isConnectedWithSocialLogin
+                                ? 'Store your Recovery Phrase or Private Key in a secure location, avoid losing access to your assets.'
+                                : 'Backup can be done only in the app securing your wallet.',
+                        )}
+                        onClick={() => {
+                            exportWallet();
+                        }}
+                        isDisabled={!connection.isConnectedWithSocialLogin}
+                        leftIcon={GiHouseKeys}
+                        rightIcon={MdOutlineNavigateNext}
+                    />
                 </VStack>
             </ModalBody>
             <ModalFooter w={'full'}>
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Account/WalletSettingsContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Account/WalletSettingsContent.tsx
index 90b5c74..3e75c08 100644
--- a/packages/vechain-kit/src/components/AccountModal/Contents/Account/WalletSettingsContent.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Contents/Account/WalletSettingsContent.tsx
@@ -7,6 +7,7 @@ import {
     Button,
     Box,
     Tag,
+    Text,
 } from '@chakra-ui/react';
 import {
     useCrossAppConnectionCache,
@@ -25,11 +26,13 @@ import { useVeChainKitConfig } from '@/providers/VeChainKitProvider';
 import { AccountModalContentTypes } from '../../Types';
 import { useTranslation } from 'react-i18next';
 import { VscDebugDisconnect } from 'react-icons/vsc';
-import { HiOutlineWallet } from 'react-icons/hi2';
 import { useEffect, useRef } from 'react';
 import { RiLogoutBoxLine } from 'react-icons/ri';
 import { BsQuestionCircle } from 'react-icons/bs';
-import { GiPaintBrush } from 'react-icons/gi';
+import { CgProfile } from 'react-icons/cg';
+import { BiBell } from 'react-icons/bi';
+import { useNotifications } from '@/hooks/notifications';
+import { IoShieldOutline } from 'react-icons/io5';
 
 type Props = {
     setCurrentContent: React.Dispatch<
@@ -54,6 +57,10 @@ export const WalletSettingsContent = ({
 
     const { data: appInfo } = useFetchAppInfo(privy?.appId ?? '');
 
+    const { getNotifications } = useNotifications();
+    const notifications = getNotifications();
+    const hasUnreadNotifications = notifications.some((n) => !n.isRead);
+
     useEffect(() => {
         if (contentRef.current) {
             contentRef.current.scrollTop = 0;
@@ -95,62 +102,91 @@ export const WalletSettingsContent = ({
                     )}
                 </VStack>
 
-                <VStack mt={10} w={'full'} spacing={3}>
-                    {/* <ActionButton
-                                title={t('Manage MFA')}
-                                description={t(
-                                    'Manage multi-factor authentication settings for your wallet.',
-                                )}
-                                onClick={() => {
-                                    // linkPasskey();
-                                }}
-                                showComingSoon={true}
-                                isDisabled={!privyUser?.mfaMethods?.length}
-                                hide={connection.isConnectedWithCrossApp}
-                                leftIcon={FaShieldAlt}
-                                rightIcon={MdOutlineNavigateNext}
-                            /> */}
-
+                <VStack mt={10} w={'full'} spacing={0}>
                     <ActionButton
-                        title={t('Connection Details')}
+                        title={t('Customize profile')}
                         description={t(
-                            'View the details of your connection to this app.',
+                            'Customize your account with a nickname and a picture to easily identify it.',
                         )}
                         onClick={() => {
-                            setCurrentContent('connection-details');
+                            setCurrentContent('account-customization');
                         }}
-                        leftIcon={VscDebugDisconnect}
+                        leftIcon={CgProfile}
                         rightIcon={MdOutlineNavigateNext}
                     />
 
                     <ActionButton
-                        title={t('Customize account')}
+                        style={{
+                            marginTop: '10px',
+                            borderBottomRadius: connection.isConnectedWithPrivy
+                                ? '0px'
+                                : '12px',
+                        }}
+                        title={t('Connection details')}
                         description={t(
-                            'Customize your account with a nickname and a picture to easily identify it.',
+                            'View the details of your connection to this app.',
                         )}
                         onClick={() => {
-                            setCurrentContent('account-customization');
+                            setCurrentContent('connection-details');
                         }}
-                        leftIcon={GiPaintBrush}
+                        leftIcon={VscDebugDisconnect}
                         rightIcon={MdOutlineNavigateNext}
                     />
 
                     {connection.isConnectedWithPrivy && (
                         <ActionButton
-                            title={t('Embedded Wallet')}
+                            style={{
+                                borderTopRadius: '0px',
+                            }}
+                            title={t('Access and security')}
                             description={t(
                                 'Manage your embedded wallet security settings or back it up to a new device.',
                             )}
                             onClick={() => {
                                 setCurrentContent('embedded-wallet');
                             }}
-                            leftIcon={HiOutlineWallet}
+                            leftIcon={IoShieldOutline}
                             rightIcon={MdOutlineNavigateNext}
                         />
                     )}
 
                     <ActionButton
-                        title={t('FAQs')}
+                        style={{
+                            marginTop: '10px',
+                            borderBottomRadius: '0px',
+                        }}
+                        title={t('Notifications')}
+                        description={t('View your notifications and updates.')}
+                        onClick={() => {
+                            setCurrentContent('notifications');
+                        }}
+                        leftIcon={BiBell}
+                        rightIcon={MdOutlineNavigateNext}
+                        extraContent={
+                            hasUnreadNotifications && (
+                                <Box
+                                    minWidth="16px"
+                                    height="16px"
+                                    bg="red.500"
+                                    borderRadius="full"
+                                    display="flex"
+                                    alignItems="center"
+                                    justifyContent="center"
+                                    ml={2}
+                                >
+                                    <Text fontSize="xs" color="white">
+                                        {
+                                            notifications.filter(
+                                                (n) => !n.isRead,
+                                            ).length
+                                        }
+                                    </Text>
+                                </Box>
+                            )
+                        }
+                    />
+                    <ActionButton
+                        title={t('Help')}
                         description={t(
                             'Still have some doubts? Check out our FAQs and learn more.',
                             {
@@ -163,6 +199,9 @@ export const WalletSettingsContent = ({
                         onClick={() => setCurrentContent('faq')}
                         leftIcon={BsQuestionCircle}
                         rightIcon={MdOutlineNavigateNext}
+                        style={{
+                            borderTopRadius: '0px',
+                        }}
                     />
                 </VStack>
             </ModalBody>
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Notifications/NotificationContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Notifications/NotificationContent.tsx
index 97a2a5e..7d4c7d8 100644
--- a/packages/vechain-kit/src/components/AccountModal/Contents/Notifications/NotificationContent.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Contents/Notifications/NotificationContent.tsx
@@ -8,10 +8,13 @@ import {
     ModalFooter,
     Button,
     HStack,
-    Box,
 } from '@chakra-ui/react';
 import { BiBell, BiArchive } from 'react-icons/bi';
-import { ModalBackButton, StickyHeaderContainer } from '@/components/common';
+import {
+    ModalBackButton,
+    ScrollToTopWrapper,
+    StickyHeaderContainer,
+} from '@/components/common';
 import { AccountModalContentTypes } from '../../Types';
 import { useTranslation } from 'react-i18next';
 import { useVeChainKitConfig } from '@/providers';
@@ -82,9 +85,11 @@ export const NotificationsContent = ({ setCurrentContent }: Props) => {
     });
 
     return (
-        <Box>
+        <ScrollToTopWrapper>
             <StickyHeaderContainer>
-                <ModalBackButton onClick={() => setCurrentContent('main')} />
+                <ModalBackButton
+                    onClick={() => setCurrentContent('settings')}
+                />
                 <ModalHeader
                     fontSize={'md'}
                     fontWeight={'500'}
@@ -98,7 +103,7 @@ export const NotificationsContent = ({ setCurrentContent }: Props) => {
                 <ModalCloseButton />
             </StickyHeaderContainer>
 
-            <Container maxW={'container.lg'} h="350px">
+            <Container maxW={'container.lg'} h={['auto', '540px']}>
                 <ModalBody w={'full'}>
                     <VStack spacing={4} align="stretch" w="full">
                         <HStack justify="space-between">
@@ -143,6 +148,6 @@ export const NotificationsContent = ({ setCurrentContent }: Props) => {
                 </ModalBody>
                 <ModalFooter></ModalFooter>
             </Container>
-        </Box>
+        </ScrollToTopWrapper>
     );
 };
diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/PrivyLinkedAccounts/PrivyLinkedAccounts.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/PrivyLinkedAccounts/PrivyLinkedAccounts.tsx
index 8fcb689..f9a7b9b 100644
--- a/packages/vechain-kit/src/components/AccountModal/Contents/PrivyLinkedAccounts/PrivyLinkedAccounts.tsx
+++ b/packages/vechain-kit/src/components/AccountModal/Contents/PrivyLinkedAccounts/PrivyLinkedAccounts.tsx
@@ -306,19 +306,6 @@ export const PrivyLinkedAccounts = ({ onBack }: PrivyLinkedAccountsProps) => {
                 </StickyHeaderContainer>
                 <ModalBody>
                     <VStack spacing={3} align="stretch">
-                        <ActionButton
-                            title={t('Handle Passkey Login')}
-                            description={t(
-                                'Enable one click login by adding a passkey to your account.',
-                            )}
-                            onClick={() => {
-                                linkPasskey();
-                            }}
-                            leftIcon={IoIosFingerPrint}
-                            rightIcon={undefined}
-                            isDisabled={!privy?.allowPasskeyLinking}
-                        />
-
                         {canLinkGoogle && (
                             <ActionButton
                                 title={t('Link Google Account')}
diff --git a/packages/vechain-kit/src/languages/en.json b/packages/vechain-kit/src/languages/en.json
index 4d1f62f..f622258 100644
--- a/packages/vechain-kit/src/languages/en.json
+++ b/packages/vechain-kit/src/languages/en.json
@@ -341,5 +341,11 @@
     "Sign in with a wallet from other x2earn apps.": "Sign in with a wallet from other x2earn apps.",
     "Select an app": "Select an app",
     "Other": "Other",
-    "Apps": "Apps"
+    "Apps": "Apps",
+    "View your notifications and updates.": "View your notifications and updates.",
+    "Access and security": "Access and security",
+    "Connection details": "Connection details",
+    "Customize profile": "Customize profile",
+    "Help": "Help",
+    "Add Passkey": "Add Passkey"
 }