Merge branch 'main' into dependabot/npm_and_yarn/sveltejs/kit-2.8.3

vechain · Dec 20, 2024 · 21cf77f · 21cf77f
2 parents 348dc3d + 92c7fa8
commit 21cf77f
Show file tree

Hide file tree

Showing 26 changed files with 581 additions and 292 deletions.
diff --git a/examples/sample-next-app/package.json b/examples/sample-next-app/package.json
@@ -14,7 +14,7 @@
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
-        "next": "14.2.10",
+        "next": "14.2.15",
         "react": "^18",
         "react-dom": "^18"
     },

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/packages/dapp-kit-react-privy/package.json b/packages/dapp-kit-react-privy/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-react-privy",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "private": false,
     "homepage": "https://github.com/vechain/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",

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';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './AccountDetailsButton';
		export * from './ActionButton';