feat: changed flow of settings, removed accounts list, now always sho…

…w active wallet
vechain · Jan 23, 2025 · 94fed80 · 94fed80
1 parent 6a18517
commit 94fed80
Show file tree

Hide file tree

Showing 20 changed files with 423 additions and 596 deletions.
diff --git a/examples/sample-next-vechain-app/src/app/pages/Home.tsx b/examples/sample-next-vechain-app/src/app/pages/Home.tsx
@@ -12,6 +12,7 @@ import {
     Box,
     Spinner,
     Select,
+    Image,
 } from '@chakra-ui/react';
 import {
     useWallet,
@@ -109,21 +110,31 @@ export default function Home(): ReactElement {
         await sendTransaction(clauses);
     }, [sendTransaction, clauses]);
 
-    if (connection.isLoading) {
+    if (!account) {
         return (
             <Container justifyContent={'center'}>
-                <VStack>
-                    <Spinner />
-                </VStack>
-            </Container>
-        );
-    }
-
-    if (!connection.isConnected) {
-        return (
-            <Container justifyContent={'center'}>
-                <VStack>
-                    <WalletButton />
+                <VStack justify={'center'} align={'center'} spacing={2}>
+                    <Image
+                        src={
+                            'https://i.ibb.co/ncysMF9/vechain-kit-logo-transparent.png'
+                        }
+                        maxW={'180px'}
+                        maxH={'90px'}
+                        // m={8}
+                        alt="logo"
+                    />
+                    <Text
+                        // color={isDark ? '#dfdfdd' : '#4d4d4d'}
+                        fontSize={'sm'}
+                        fontWeight={'200'}
+                        textAlign={'center'}
+                        maxW={'300px'}
+                    >
+                        {t(
+                            "Hi there! I'm VeChain Kit, a new way to access applications on VeChain. I'm here to help you connect to the blockchain and interact with smart contracts.",
+                        )}
+                    </Text>
+                    <WalletButton buttonStyle={{ mt: 10 }} />
                 </VStack>
             </Container>
         );
@@ -210,7 +221,7 @@ export default function Home(): ReactElement {
 
                 <Box>
                     <Heading size={'md'}>
-                        <b>Multilanguage</b>
+                        <b>Multilanguage</b> (currently disabled)
                     </Heading>
                     <VStack mt={4} spacing={4} alignItems="flex-start">
                         <Text>

diff --git a/examples/sample-next-vechain-app/src/app/providers/VechainKitProviderWrapper.tsx b/examples/sample-next-vechain-app/src/app/providers/VechainKitProviderWrapper.tsx
@@ -72,9 +72,10 @@ export function VechainKitProviderWrapper({ children }: Props) {
             }}
             loginModalUI={{
                 // preferredLoginMethods: ['google'],
+                variant: 'vechain-and-wallet',
                 logo: appLogo,
                 description:
-                    "Hi there! I'm VeChain Kit, a new way to access applications on VeChain. Choose between social login through VeChain or by connecting your wallet.",
+                    'Choose between social login through VeChain or by connecting your wallet.',
             }}
             // Uncomment this to remove the ecosystem button
             // privyEcosystemAppIDS={[]}

diff --git a/packages/vechain-kit/src/components/AccountModal/AccountModal.tsx b/packages/vechain-kit/src/components/AccountModal/AccountModal.tsx
@@ -6,8 +6,7 @@ import { BaseModal } from '@/components/common';
 import {
     AccountMainContent,
     WalletSettingsContent,
-    SmartAccountContent,
-    AccountsListContent,
+    EmbeddedWalletContent,
     SendTokenContent,
     SendTokenSummaryContent,
     ReceiveTokenContent,
@@ -73,20 +72,12 @@ export const AccountModal = ({ isOpen, onClose }: Props) => {
                         onLogoutSuccess={onClose}
                     />
                 );
-            case 'smart-account':
+            case 'embedded-wallet':
                 return (
-                    <SmartAccountContent
+                    <EmbeddedWalletContent
                         setCurrentContent={setCurrentContent}
                     />
                 );
-            case 'accounts':
-                return (
-                    <AccountsListContent
-                        setCurrentContent={setCurrentContent}
-                        onClose={onClose}
-                        wallet={account}
-                    />
-                );
             case 'receive-token':
                 return (
                     <ReceiveTokenContent

diff --git a/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx b/packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx
@@ -2,57 +2,47 @@
 
 import { Text, Icon, HStack, Button } from '@chakra-ui/react';
 import { humanAddress } from '../../../utils';
-import { useState } from 'react';
-import { IoCheckmarkOutline, IoCopyOutline } from 'react-icons/io5';
 import { Wallet } from '@/types';
 import { MdOutlineNavigateNext } from 'react-icons/md';
+import { RxExit } from 'react-icons/rx';
+
 type Props = {
     wallet: Wallet;
     size?: string;
     onClick?: () => void;
     mt?: number;
+    onDisconnect?: () => void;
 };
 
 export const AccountSelector = ({
     wallet,
     size = 'md',
     onClick,
+    onDisconnect,
     mt,
 }: Props) => {
-    const [copied, setCopied] = useState(false);
-
-    const copyToClipboard = async (textToCopy: string) => {
-        await navigator.clipboard.writeText(textToCopy);
-        setCopied(true);
-        setTimeout(() => {
-            setCopied(false);
-        }, 2000);
-    };
-
     return (
         <HStack mt={mt}>
             <Button
                 p={2}
-                px={4}
                 h={9}
+                aria-label="Disconnect"
                 variant="vechainKitSelector"
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
-                    copyToClipboard(wallet?.address ?? '');
+                    onDisconnect?.();
                 }}
             >
-                <Icon
-                    boxSize={5}
-                    as={copied ? IoCheckmarkOutline : IoCopyOutline}
-                />
+                <Icon boxSize={4} as={RxExit} />
             </Button>
 
             <Button
                 w="fit-content"
                 p={2}
                 pl={4}
                 h={9}
+                aria-label="Wallet"
                 onClick={onClick}
                 variant="vechainKitSelector"
             >

diff --git a/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx b/packages/vechain-kit/src/components/AccountModal/Contents/Account/AccountMainContent.tsx
@@ -6,7 +6,6 @@ import {
     ModalHeader,
     VStack,
 } from '@chakra-ui/react';
-import { useWallet } from '@/hooks';
 import {
     StickyHeaderContainer,
     VersionFooter,
@@ -22,6 +21,7 @@ import {
 import { Wallet } from '@/types';
 import { useTranslation } from 'react-i18next';
 import { useVeChainKitConfig } from '@/providers';
+import { useWallet } from '@/hooks';
 
 type Props = {
     setCurrentContent: React.Dispatch<
@@ -31,11 +31,14 @@ type Props = {
     wallet: Wallet;
 };
 
-export const AccountMainContent = ({ setCurrentContent, wallet }: Props) => {
+export const AccountMainContent = ({
+    setCurrentContent,
+    wallet,
+    onClose,
+}: Props) => {
     const { t } = useTranslation();
     const { darkMode: isDark } = useVeChainKitConfig();
-
-    const { smartAccount } = useWallet();
+    const { disconnect, connection } = useWallet();
 
     return (
         <>
@@ -48,7 +51,9 @@ export const AccountMainContent = ({ setCurrentContent, wallet }: Props) => {
                     textAlign={'center'}
                     color={isDark ? '#dfdfdd' : '#4d4d4d'}
                 >
-                    {t('Account')}
+                    {connection.isConnectedWithPrivy
+                        ? t('Account')
+                        : t('Wallet')}
                 </ModalHeader>
 
                 <ModalCloseButton />
@@ -60,11 +65,11 @@ export const AccountMainContent = ({ setCurrentContent, wallet }: Props) => {
                         <AccountSelector
                             mt={0}
                             onClick={() => {
-                                if (smartAccount.isActive) {
-                                    setCurrentContent('accounts');
-                                } else {
-                                    setCurrentContent('settings');
-                                }
+                                setCurrentContent('settings');
+                            }}
+                            onDisconnect={() => {
+                                disconnect();
+                                onClose();
                             }}
                             wallet={wallet}
                         />