Skip to content

Commit

Permalink
refactor: reorganized settings screen and removed notifications and l…
Browse files Browse the repository at this point in the history 
…ogout from main
  • Loading branch information
@Agilulfo1820
Agilulfo1820 committed Feb 8, 2025
1 parent 788505e commit 2f81065
Show file tree
Hide file tree
Showing 9 changed files with 127 additions and 108 deletions.
4 changes: 2 additions & 2 deletions examples/homepage/src/app/providers/VechainKitProviderWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>

Expand Down
8 changes: 5 additions & 3 deletions packages/vechain-kit/src/components/AccountModal/Components/ActionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -48,6 +48,7 @@ export const ActionButton = ({
isLoading,
loadingText,
style,
extraContent,
}: ActionButtonProps) => {
const { t } = useTranslation();
const { colorMode } = useColorMode();
Expand Down Expand Up @@ -102,9 +103,10 @@ export const ActionButton = ({
{t('Coming Soon!')}
</Tag>
)}
{extraContent}
</HStack>

<Text
{/* <Text
fontSize={'xs'}
fontWeight={'400'}
opacity={0.5}
Expand All @@ -115,7 +117,7 @@ export const ActionButton = ({
pr={rightIcon ? '0px' : '10px'}
>
{description}
</Text>
</Text> */}
</VStack>

{rightIcon && (
Expand Down
48 changes: 7 additions & 41 deletions packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import {
HStack,
Icon,
IconButton,
ModalBody,
ModalCloseButton,
ModalFooter,
ModalHeader,
VStack,
Box,
} from '@chakra-ui/react';
import {
StickyHeaderContainer,
Expand All @@ -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';

Expand All @@ -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>
Expand Down Expand Up @@ -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} />

Expand Down
36 changes: 25 additions & 11 deletions packages/vechain-kit/src/components/AccountModal/Contents/Account/EmbeddedWalletContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand All @@ -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();
Expand All @@ -61,7 +62,7 @@ export const EmbeddedWalletContent = ({ setCurrentContent }: Props) => {
textAlign={'center'}
color={isDark ? '#dfdfdd' : '#4d4d4d'}
>
{t('Embedded Wallet')}
{t('Access and security')}
</ModalHeader>

<ModalBackButton
Expand Down Expand Up @@ -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
Expand All @@ -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'}>
Expand Down
97 changes: 68 additions & 29 deletions packages/vechain-kit/src/components/AccountModal/Contents/Account/WalletSettingsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Button,
Box,
Tag,
Text,
} from '@chakra-ui/react';
import {
useCrossAppConnectionCache,
Expand All @@ -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<
Expand All @@ -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;
Expand Down Expand Up @@ -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.',
{
Expand All @@ -163,6 +199,9 @@ export const WalletSettingsContent = ({
onClick={() => setCurrentContent('faq')}
leftIcon={BsQuestionCircle}
rightIcon={MdOutlineNavigateNext}
style={{
borderTopRadius: '0px',
}}
/>
</VStack>
</ModalBody>
Expand Down
Loading

0 comments on commit 2f81065

Please sign in to comment.