Feat/UI refactor (#328)

* fix: typo * feat: new type + cached domains * feat: refactored useWallet everywhere * feat: refactored-ui * feat: added hooks * Revert "feat: added hooks" This reverts commit 42f2f85. * feat: add copy btns * feat: updated accounts content * style: remove margin * fix: show address display if connected with veworld
vechain · Dec 20, 2024 · 7e47d74 · 7e47d74
1 parent a43642c
commit 7e47d74
Show file tree

Hide file tree

Showing 20 changed files with 573 additions and 284 deletions.
diff --git a/examples/sample-next-privy-app/src/app/pages/homepage.tsx b/examples/sample-next-privy-app/src/app/pages/homepage.tsx
@@ -30,32 +30,26 @@ const HomePage = (): ReactElement => {
     const { toggleColorMode: toggleDAppKitPrivyColorMode } =
         useDAppKitPrivyColorMode();
 
-    const {
-        isConnected,
-        connectedAccount,
-        smartAccount,
-        isLoadingConnection,
-        connectionType,
-    } = useWallet();
+    const { connection, smartAccount, connectedWallet } = useWallet();
 
     // A dummy tx sending 0 b3tr tokens
     const clauses = useMemo(() => {
-        if (!connectedAccount) return [];
+        if (!connectedWallet.address) return [];
 
         const clausesArray: any[] = [];
         const abi = new Interface(b3trAbi);
         clausesArray.push({
             to: b3trMainnetAddress,
             value: '0x0',
             data: abi.encodeFunctionData('transfer', [
-                connectedAccount,
+                connectedWallet.address,
                 '0', // 1 B3TR (in wei)
             ]),
             comment: `Transfer ${1} B3TR to `,
             abi: abi.getFunction('transfer'),
         });
         return clausesArray;
-    }, [connectedAccount]);
+    }, [connectedWallet.address]);
 
     const {
         sendTransaction,
@@ -65,7 +59,7 @@ const HomePage = (): ReactElement => {
         isTransactionPending,
         error,
     } = useSendTransaction({
-        signerAccount: smartAccount.address,
+        signerAccount: smartAccount,
         privyUIOptions: {
             title: 'Sign to confirm',
             description:
@@ -74,16 +68,19 @@ const HomePage = (): ReactElement => {
         },
     });
 
-    const transactionModal = useDisclosure();
-    const transactionAlert = useDisclosure();
+    const transactionToast = useDisclosure();
+    const handleTransactionWithToast = useCallback(async () => {
+        transactionToast.onOpen();
+        await sendTransaction(clauses);
+    }, [sendTransaction, clauses]);
 
-    const handleTransaction = useCallback(async () => {
-        // transactionModal.onOpen();
-        transactionAlert.onOpen();
+    const transactionModal = useDisclosure();
+    const handleTransactionWithModal = useCallback(async () => {
+        transactionModal.onOpen();
         await sendTransaction(clauses);
     }, [sendTransaction, clauses]);
 
-    if (isLoadingConnection) {
+    if (connection.isLoadingPrivyConnection) {
         return (
             <Container>
                 <HStack justifyContent={'center'}>
@@ -93,7 +90,7 @@ const HomePage = (): ReactElement => {
         );
     }
 
-    if (!isConnected) {
+    if (!connection.isConnected) {
         return (
             <Container>
                 <HStack justifyContent={'center'}>
@@ -134,37 +131,47 @@ const HomePage = (): ReactElement => {
                             <Text>
                                 Deployed: {smartAccount.isDeployed.toString()}
                             </Text>
+                            <Text>Owner: {smartAccount.owner}</Text>
                         </Box>
                     )}
 
                     <Box>
                         <Heading size={'md'}>
                             <b>Wallet</b>
                         </Heading>
-                        <Text>Address: {connectedAccount}</Text>
-                        {<Text>Connection Type: {connectionType}</Text>}
+                        <Text>Address: {connectedWallet?.address}</Text>
+                        <Text>Connection Type: {connection.source.type}</Text>
                     </Box>
 
                     <Box mt={4}>
                         <Heading size={'md'}>
                             <b>Actions</b>
                         </Heading>
                         <HStack mt={4} spacing={4}>
-                            <Button
-                                onClick={handleTransaction}
-                                isLoading={isTransactionPending}
-                                isDisabled={isTransactionPending}
-                            >
-                                Test Tx
-                            </Button>
+                            <HStack mt={4} spacing={4}>
+                                <Button
+                                    onClick={handleTransactionWithToast}
+                                    isLoading={isTransactionPending}
+                                    isDisabled={isTransactionPending}
+                                >
+                                    Test Tx with toast
+                                </Button>
+                                <Button
+                                    onClick={handleTransactionWithModal}
+                                    isLoading={isTransactionPending}
+                                    isDisabled={isTransactionPending}
+                                >
+                                    Test Tx with modal
+                                </Button>
+                            </HStack>
                         </HStack>
                     </Box>
                 </VStack>
             </Stack>
 
             <TransactionToast
-                isOpen={transactionAlert.isOpen}
-                onClose={transactionAlert.onClose}
+                isOpen={transactionToast.isOpen}
+                onClose={transactionToast.onClose}
                 status={status}
                 error={error}
                 txReceipt={txReceipt}

diff --git a/...es/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx b/...es/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx
@@ -8,17 +8,22 @@ import {
     useMediaQuery,
 } from '@chakra-ui/react';
 import { useWallet } from '../../hooks';
-import { getPicassoImage } from '../../utils';
 import { useState, useEffect } from 'react';
-import { WalletSettingsContent } from './WalletSettingsContent';
-import { AccountModalMainContent } from './AccountModalMainContent';
-import { SmartAccountContent } from './SmartAccountContent';
+import { WalletSettingsContent } from './Contents/WalletSettingsContent';
+import { MainContent } from './Contents/MainContent';
+import { SmartAccountContent } from './Contents/SmartAccountContent';
+import { AccountsContent } from './Contents';
+
 type Props = {
     isOpen: boolean;
     onClose: () => void;
 };
 
-export type AccountModalContentTypes = 'main' | 'settings' | 'smart-account';
+export type AccountModalContentTypes =
+    | 'main'
+    | 'settings'
+    | 'smart-account'
+    | 'accounts';
 
 export const AccountModal = ({ isOpen, onClose }: Props) => {
     const [isDesktop] = useMediaQuery('(min-width: 768px)');
@@ -34,9 +39,7 @@ export const AccountModal = ({ isOpen, onClose }: Props) => {
               overflowX: 'hidden',
           };
 
-    const { connectedAccount } = useWallet();
-
-    const walletImage = getPicassoImage(connectedAccount ?? '');
+    const { selectedAccount } = useWallet();
 
     const [currentContent, setCurrentContent] =
         useState<AccountModalContentTypes>('main');
@@ -50,10 +53,10 @@ export const AccountModal = ({ isOpen, onClose }: Props) => {
         switch (currentContent) {
             case 'main':
                 return (
-                    <AccountModalMainContent
+                    <MainContent
                         setCurrentContent={setCurrentContent}
                         onClose={onClose}
-                        walletImage={walletImage}
+                        wallet={selectedAccount}
                     />
                 );
             case 'settings':
@@ -68,6 +71,14 @@ export const AccountModal = ({ isOpen, onClose }: Props) => {
                         setCurrentContent={setCurrentContent}
                     />
                 );
+            case 'accounts':
+                return (
+                    <AccountsContent
+                        setCurrentContent={setCurrentContent}
+                        onClose={onClose}
+                        wallet={selectedAccount}
+                    />
+                );
         }
     };
 

diff --git a/...nts/AccountModal/AccountDetailsButton.tsx → ...Modal/Components/AccountDetailsButton.tsx b/...nts/AccountModal/AccountDetailsButton.tsx → ...Modal/Components/AccountDetailsButton.tsx
@@ -10,7 +10,7 @@ import {
     Tag,
 } from '@chakra-ui/react';
 import { ElementType } from 'react';
-import { humanAddress } from '../../utils';
+import { humanAddress } from '../../../utils';
 
 interface AccountDetailsButtonProps {
     title: string;

diff --git a/.../components/AccountModal/ActionButton.tsx → .../AccountModal/Components/ActionButton.tsx b/.../components/AccountModal/ActionButton.tsx → .../AccountModal/Components/ActionButton.tsx
@@ -19,7 +19,7 @@ interface ActionButtonProps {
     leftImage?: string;
     backgroundColor?: string;
     border?: string;
-    isDisabled?: boolean;
+    hide?: boolean;
     showComingSoon?: boolean;
 }
 
@@ -30,7 +30,7 @@ export const ActionButton = ({
     description,
     onClick,
     leftImage,
-    isDisabled = false,
+    hide = false,
     showComingSoon = false,
 }: ActionButtonProps) => {
     return (
@@ -40,8 +40,8 @@ export const ActionButton = ({
             h={'fit-content'}
             py={4}
             onClick={onClick}
-            opacity={isDisabled ? 0.5 : 1}
-            isDisabled={isDisabled}
+            display={hide ? 'none' : 'flex'}
+            isDisabled={showComingSoon}
         >
             <HStack w={'full'} justify={'space-between'}>
                 <Box minW={'40px'}>

diff --git a/...dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/index.ts b/...dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/index.ts
@@ -0,0 +1,2 @@
+export * from './AccountDetailsButton';
+export * from './ActionButton';
diff --git a/.../AccountModal/AccountModalMainContent.tsx → ...AccountModal/Contents/AccountsContent.tsx b/.../AccountModal/AccountModalMainContent.tsx → ...AccountModal/Contents/AccountsContent.tsx
@@ -2,56 +2,36 @@ import {
     Button,
     Grid,
     HStack,
-    Image,
     ModalBody,
     ModalCloseButton,
     ModalFooter,
     ModalHeader,
-    Text,
     VStack,
     useColorMode,
 } from '@chakra-ui/react';
-import { useWallet } from '../../hooks';
+import { useWallet, Wallet } from '../../../hooks';
 import { RxExit } from 'react-icons/rx';
-import { AddressDisplay } from '../common/AddressDisplay';
-import { FadeInViewFromBottom } from '../common';
-import { AccountDetailsButton } from './AccountDetailsButton';
-import packageJson from '../../../../package.json';
+import { AddressDisplay } from '../../common/AddressDisplay';
+import { FadeInViewFromBottom, ModalBackButton } from '../../common';
+import { AccountDetailsButton } from '../Components/AccountDetailsButton';
 import { MdAccountCircle, MdOutlineNavigateNext } from 'react-icons/md';
-import { AccountModalContentTypes } from './AccountModal';
+import { AccountModalContentTypes } from '../AccountModal';
 import { HiOutlineWallet } from 'react-icons/hi2';
 
 type Props = {
     setCurrentContent: React.Dispatch<
         React.SetStateAction<AccountModalContentTypes>
     >;
     onClose: () => void;
-    walletImage: string;
+    wallet?: Wallet;
 };
 
-export const AccountModalMainContent = ({
-    setCurrentContent,
-    onClose,
-    walletImage,
-}: Props) => {
+export const AccountsContent = ({ setCurrentContent, onClose }: Props) => {
     const { colorMode } = useColorMode();
     const isDark = colorMode === 'dark';
 
-    const {
-        logoutAndDisconnect,
-        isConnectedWithPrivy,
-        connectedAccount,
-        smartAccount,
-        vetDomain,
-        connectionType,
-    } = useWallet();
-
-    const connectionSource =
-        connectionType === 'privy-cross-app'
-            ? 'app'
-            : connectionType === 'privy'
-            ? 'social'
-            : 'wallet';
+    const { disconnect, connection, selectedAccount, connectedWallet } =
+        useWallet();
 
     return (
         <FadeInViewFromBottom>
@@ -61,31 +41,15 @@ export const AccountModalMainContent = ({
                 textAlign={'center'}
                 color={isDark ? '#dfdfdd' : '#4d4d4d'}
             >
-                {'Connected to ' + connectionSource}
-                <Text
-                    fontSize={'xs'}
-                    fontWeight={'400'}
-                    w={'full'}
-                    textAlign={'center'}
-                    opacity={0.3}
-                    mt={2}
-                >
-                    v{packageJson.version}
-                </Text>
+                {'Your accounts'}
             </ModalHeader>
-            <VStack justify={'center'}>
-                <Image
-                    src={walletImage}
-                    w={'100px'}
-                    m={10}
-                    borderRadius="50%"
-                />
-            </VStack>
 
+            <ModalBackButton onClick={() => setCurrentContent('main')} />
             <ModalCloseButton />
+
             <ModalBody w={'full'}>
                 <HStack justify={'space-between'} w={'full'}>
-                    {isConnectedWithPrivy ? (
+                    {connection.isConnectedWithPrivy ? (
                         <Grid
                             gap={2}
                             templateColumns={['repeat(1, 1fr)']}
@@ -94,7 +58,7 @@ export const AccountModalMainContent = ({
                         >
                             <AccountDetailsButton
                                 title="Smart Account"
-                                address={smartAccount.address ?? ''}
+                                address={selectedAccount.address ?? ''}
                                 isActive
                                 onClick={() => {
                                     setCurrentContent('smart-account');
@@ -104,7 +68,7 @@ export const AccountModalMainContent = ({
                             />
                             <AccountDetailsButton
                                 title="Wallet"
-                                address={smartAccount.ownerAddress ?? ''}
+                                address={connectedWallet?.address}
                                 onClick={() => {
                                     setCurrentContent('settings');
                                 }}
@@ -113,10 +77,7 @@ export const AccountModalMainContent = ({
                             />
                         </Grid>
                     ) : (
-                        <AddressDisplay
-                            address={connectedAccount ?? ''}
-                            domain={vetDomain}
-                        />
+                        <AddressDisplay wallet={connectedWallet} />
                     )}
                 </HStack>
             </ModalBody>
@@ -125,7 +86,7 @@ export const AccountModalMainContent = ({
                     <Button
                         w={'full'}
                         onClick={() => {
-                            logoutAndDisconnect();
+                            disconnect();
                             onClose();
                         }}
                         fontSize={'sm'}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './AccountDetailsButton';
		export * from './ActionButton';