Refactor Privy package (#331)

* chore: refactor code

* chore: refactor

* chore: refactor

* chore: refactor

* fix: rename

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/DAppKitPrivyProvider.tsx

@@ -1,10 +1,11 @@
 import { createContext, ReactNode, useContext } from 'react';
 import { PrivyProvider as BasePrivyProvider } from '@privy-io/react-auth';
-import { DAppKitProvider, DAppKitUIOptions } from '@vechain/dapp-kit-react';
+import { DAppKitProvider } from '@vechain/dapp-kit-react';
 import { SmartAccountProvider } from './hooks';
 import { ChakraProvider } from '@chakra-ui/react';
 import { Theme } from './theme';
 import { PrivyLoginMethod } from './utils';
+import { DAppKitUIOptions } from '@vechain/dapp-kit-ui';
 
 type Props = {
     children: ReactNode;

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/index.ts

@@ -1,3 +1 @@
 export * from './abi';
-export * from './svg';
-export * from './icons';

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx

@@ -9,9 +9,11 @@ import {
 } from '@chakra-ui/react';
 import { useWallet } from '../../hooks';
 import { useState, useEffect } from 'react';
-import { WalletSettingsContent } from './Contents/WalletSettingsContent';
-import { MainContent } from './Contents/MainContent';
-import { SmartAccountContent } from './Contents/SmartAccountContent';
+import {
+    MainContent,
+    WalletSettingsContent,
+    SmartAccountContent,
+} from './Contents';
 import { AccountsContent } from './Contents';
 
 type Props = {

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/AccountsContent.tsx

@@ -11,12 +11,16 @@ import {
 } from '@chakra-ui/react';
 import { useWallet, Wallet } from '../../../hooks';
 import { RxExit } from 'react-icons/rx';
-import { AddressDisplay } from '../../common/AddressDisplay';
-import { FadeInViewFromBottom, ModalBackButton } from '../../common';
-import { AccountDetailsButton } from '../Components/AccountDetailsButton';
+import {
+    AddressDisplay,
+    FadeInViewFromBottom,
+    ModalBackButton,
+} from '../../common';
+import { AccountDetailsButton } from '../Components';
 import { MdAccountCircle, MdOutlineNavigateNext } from 'react-icons/md';
 import { AccountModalContentTypes } from '../AccountModal';
 import { HiOutlineWallet } from 'react-icons/hi2';
+import React from 'react';
 
 type Props = {
     setCurrentContent: React.Dispatch<

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx

@@ -18,6 +18,7 @@ import {
 } from '../../common';
 import { AccountModalContentTypes } from '../AccountModal';
 import packageJson from '../../../../../package.json';
+import React from 'react';
 
 type Props = {
     setCurrentContent: React.Dispatch<

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/SmartAccountContent.tsx

@@ -12,9 +12,12 @@ import {
 } from '@chakra-ui/react';
 import { useWallet } from '../../../hooks';
 import React, { useState } from 'react';
-import { AddressDisplay } from '../../common/AddressDisplay';
 import { IoOpenOutline } from 'react-icons/io5';
-import { FadeInViewFromBottom, ModalBackButton } from '../../common';
+import {
+    AddressDisplay,
+    FadeInViewFromBottom,
+    ModalBackButton,
+} from '../../common';
 import { AccountModalContentTypes } from '../AccountModal';
 import { getPicassoImage } from '../../../utils';
 

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/WalletSettingsContent.tsx

@@ -8,14 +8,13 @@ import {
     useColorMode,
 } from '@chakra-ui/react';
 import { usePrivy, useWallet, Wallet } from '../../../hooks';
-import { AddressDisplay } from '../../common/AddressDisplay';
 import { GiHouseKeys } from 'react-icons/gi';
 import { MdOutlineNavigateNext } from 'react-icons/md';
 import { IoIosFingerPrint } from 'react-icons/io';
-import { ActionButton } from '../Components/ActionButton';
+import { ActionButton } from '../Components';
 import { ModalBackButton } from '../../common';
 import { useDAppKitPrivyConfig } from '../../../DAppKitPrivyProvider';
-import { FadeInViewFromBottom } from '../../common';
+import { AddressDisplay, FadeInViewFromBottom } from '../../common';
 import { AccountModalContentTypes } from '../AccountModal';
 import { FaRegAddressCard } from 'react-icons/fa';
 

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/EcosystemContent.tsx

@@ -10,7 +10,7 @@ import {
 } from '@chakra-ui/react';
 import { useCrossAppAccounts, usePrivy } from '@privy-io/react-auth';
 import { useWallet } from '../../hooks';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider';
 import { FadeInViewFromRight } from '../common';
 import { ModalBackButton } from '../common';

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/MainContent.tsx

@@ -14,10 +14,10 @@ import {
 import { usePrivy } from '@privy-io/react-auth';
 import { useWalletModal } from '@vechain/dapp-kit-react';
 import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider';
-import { FadeInViewFromBottom } from '../common';
+import { AppLogos, FadeInViewFromBottom } from '../common';
 import { useFetchAppInfo } from '../../hooks/useFetchAppInfo';
-import { AppLogos } from '../common/AppLogos';
 import { PrivyAppInfo, SOCIAL_INFOS, WALLET_INFOS } from '../../utils';
+import React from 'react';
 
 type Props = {
     setCurrentContent: React.Dispatch<

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ShareButtons.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { FaTelegramPlane } from 'react-icons/fa';
 import { FaWhatsapp } from 'react-icons/fa6';
 import { RiTwitterXFill } from 'react-icons/ri';
+import React from 'react';
 
 const TWITTER_INJECT = 'https://twitter.com/intent/tweet?text=';
 

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx

@@ -25,9 +25,10 @@ export type SuccessModalContentProps = {
 /**
  * SuccessModalContent is a component that shows a success message with a lottie animation and share buttons
  * @param {SuccessModalContentProps} props - The props of the component
- * @param {boolean} props.isOpen - A boolean to control the visibility of the modal
- * @param {() => void} props.onClose - A function to close the modal
  * @param {string} props.title - The title of the modal
+ * @param {boolean} props.showSocialButtons - Whether to show the social media share buttons
+ * @param {boolean} props.showExplorerButton - Whether to show the explorer button
+ * @param {string} props.txId - The transaction ID to link to the explorer
  * @param {string} props.socialDescriptionEncoded - The encoded description to share on social media
  * @returns {React.ReactElement} The SuccessModalContent component
  */

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/index.ts

@@ -1,5 +1,4 @@
 export * from './FadeInViewFromRight';
-export * from './FadeInViewFromLeft';
 export * from './FadeInViewFromBottom';
 export * from './ModalBackButton';
 export * from './AddressDisplay';

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useCachedVechainDomain.ts

@@ -1,23 +1,23 @@
 import { useVechainDomain } from '@vechain/dapp-kit-react';
 
-interface VechainDomainResult {
+interface VeChainDomainResult {
     address?: string;
     domain?: string;
     isValidAddressOrDomain: boolean;
     isLoading: boolean;
 }
 
-interface CachedVechainDomainResult {
-    domainResult: VechainDomainResult;
+interface CachedVeChainDomainResult {
+    domainResult: VeChainDomainResult;
     getCachedDomain: () => string | null;
     saveCachedDomain: (domain: string) => void;
 }
 
 const DOMAIN_CACHE_KEY = 'vechainDomainCache';
 const CACHE_EXPIRY_TIME = 24 * 60 * 60 * 1000; // 24 hours
-export const useCachedVechainDomain = (
+export const useCachedVeChainDomain = (
     address: string,
-): CachedVechainDomainResult => {
+): CachedVeChainDomainResult => {
     const domainResult = useVechainDomain({ addressOrDomain: address });
 
     // Try to get from cache first

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useGetSmartAccountAddress.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { ABIContract } from '@vechain/sdk-core';
-import { THOR_CLIENT } from '../utils/Constants';
+import { THOR_CLIENT } from '../utils';
 import { SimpleAccountFactoryABI } from '../assets';
 
 interface UseGetSmartAccountAddressReturnType {

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSendTransaction.ts

@@ -47,7 +47,7 @@ const estimateTxGasWithNext = async (
 
     const execGas = outputs.reduce((sum, out) => sum + out.gasUsed, 0);
 
-    // Calculate the intrinsic gas (transaction fee) cast is needed as data could be undefinedin Connex.Vm.Clause
+    // Calculate the intrinsic gas (transaction fee) cast is needed as data could be undefined in Connex.Vm.Clause
     const intrinsicGas = Transaction.intrinsicGas(
         clauses as Transaction.Clause[],
     );
@@ -104,7 +104,7 @@ export type UseSendTransactionReturnValue = {
 
 /**
  * Generic hook to send a transaction using connex.
- * This hook supports both Privy and Vechain wallets.
+ * This hook supports both Privy and VeChain wallets.
  *
  * It returns a function to send the transaction and a status to indicate the state
  * of the transaction (together with the transaction id).
@@ -136,7 +136,7 @@ export const useSendTransaction = ({
      * Convert the clauses to the format expected by the vendor
      * If the clauses are a function, it will be executed and the result will be used
      * If the clauses are an array, it will be used directly
-     * If the the wallet is connected with Privy, the clauses will be converted to the format expected by the vendor
+     * If the wallet is connected with Privy, the clauses will be converted to the format expected by the vendor
      * @param clauses the clauses to convert
      * @returns the converted clauses
      */
@@ -284,11 +284,10 @@ export const useSendTransaction = ({
                 .get();
             if (!transactionData) return;
 
-            const explained = await thor
+            return await thor
                 .explain(transactionData.clauses)
                 .caller(transactionData.origin)
                 .execute();
-            return explained;
         },
         [thor],
     );

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSmartAccount.tsx

@@ -15,7 +15,7 @@ import {
     ProviderInternalBaseWallet,
     signerUtils,
 } from '@vechain/sdk-network';
-import { SimpleAccountABI, SimpleAccountFactoryABI } from '../assets/abi';
+import { SimpleAccountABI, SimpleAccountFactoryABI } from '../assets';
 import {
     ExecuteWithAuthorizationSignData,
     randomTransactionUser,
@@ -81,7 +81,7 @@ export const SmartAccountProvider = ({
     >();
     const [owner, setOwner] = useState<string | undefined>();
     const [chainId, setChainId] = useState('');
-    const thor = ThorClient.fromUrl(nodeUrl);
+    const thor = ThorClient.at(nodeUrl);
     const [isDeployed, setIsDeployed] = useState(false);
     const [accountFactory, setAccountFactory] = useState<string>();
 
@@ -199,7 +199,7 @@ export const SmartAccountProvider = ({
 
     /**
      * Send a transaction on vechain by asking the privy wallet to sign a typed data content
-     * that will allow us the execute the action with his smart account trough the executeWithAuthorization
+     * that will allow us the execute the action with his smart account through the executeWithAuthorization
      * function of the smart account.
      */
     const sendTransaction = async ({

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useTxReceipt.ts

@@ -4,9 +4,10 @@ import { useState, useEffect } from 'react';
 import { useConnex } from '@vechain/dapp-kit-react';
 
 /**
- * Poll the chain for a transaction receipt until it is found (or timeout after 3 blocks)
+ * Poll the chain for a transaction receipt until it is found (or timeout after 5 blocks)
+ * @param thor Thor instance
  * @param id Transaction id
- * @param blocksTimeout Number of blocks to wait before timeout
+ * @param blocksTimeout Number of blocks to wait for the receipt
  * @returns Transaction receipt
  */
 export const pollForReceipt = async (
@@ -19,8 +20,7 @@ export const pollForReceipt = async (
     const transaction = thor.transaction(id);
     let receipt;
 
-    //Query the transaction until it has a receipt
-    //Timeout after 3 blocks
+    // Query the transaction until it has a receipt
     for (let i = 0; i < blocksTimeout; i++) {
         receipt = await transaction.getReceipt();
         if (receipt) {
@@ -41,10 +41,10 @@ export const pollForReceipt = async (
 };
 
 /**
- *  Get the tx receipt of a tx id with a block timeout to wait for the receipt
- * @param txId  the tx id to get the receipt
- * @param blocksTimeout  the blocks to wait for the receipt
- * @returns  the tx receipt
+ * Get the tx receipt of a tx id with a block timeout to wait for the receipt
+ * @param txId The tx id to get the receipt
+ * @param blockTimeout The block timeout to wait for the receipt
+ * @returns The tx receipt
  */
 export const useTxReceipt = (txId?: string, blockTimeout?: number) => {
     const { thor } = useConnex();