import { VechainKitProvider } from '@vechain/vechain-kit';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <VechainKitProvider
            privy={{
                appId: process.env.NEXT_PUBLIC_PRIVY_APP_ID!,
                clientId: process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID!,
                loginMethods: ['google', 'twitter', 'sms', 'email'],
                appearance: {
                    walletList: ['metamask', 'rainbow'],
                    accentColor: '#696FFD',
                    loginMessage: 'Select a social media profile',
                    logo: 'https://i.ibb.co/ZHGmq3y/image-21.png',
                },
                embeddedWallets: {
                    createOnLogin: 'all-users',
                },
                allowPasskeyLinking: true,
            }}
            ...
            //other props
        >
            {children}
        </VechainKitProvider>
    );
}

import { usePrivy } from "@vechain/vechain-kit";

const { user } = usePrivy();

// dapp-kit
const { account } = useWallet()
console.log(account) // 0x000000dsadsa

// vechain-kit
const { account } = useWallet()
console.log(account.address, account.domain, account.image)

const { data, isLoading, error } = useCurrentBlock();

function BlockInfo() {
  const { data: block } = useCurrentBlock();
  
  return <div>Current Block: {block?.number}</div>;
}

const { data, isLoading, error } = useTxReceipt(txId, blockTimeout);

function TransactionStatus({ txId }) {
  const { data: receipt, isLoading } = useTxReceipt(txId);
  
  if (isLoading) return <div>Loading...</div>;
  return <div>Transaction Status: {receipt?.reverted ? 'Failed' : 'Success'}</div>;
}

const events = await getEvents({
   abi,
   contractAddress,
   eventName,
   filterParams,
   mapResponse,
   nodeUrl,
});

// Example usage of Utility hooks
import {
    useGetChainId,
    useGetNodeUrl,
    useGetCustomTokenBalances,
    useGetCustomTokenInfo,
    useLegalDocuments
} from '@vechain/vechain-kit';

const ExampleComponent = () => {
    const address = "0x..."; // User's wallet address
    const tokenAddress = "0x..."; // Custom token address

    // Get network information
    const { data: chainId } = useGetChainId();
    const nodeUrl = useGetNodeUrl();

    // Get custom token information
    const { data: tokenInfo } = useGetCustomTokenInfo(tokenAddress);

    // Get token balances
    const { 
        data: tokenBalances,
        isLoading,
        error 
    } = useGetCustomTokenBalances(address);
    
    // Get legal documents data
    const {
        documentsNotAgreed,
        documents,
        agreements,
        hasAgreedToRequiredDocuments,
    } = useLegalDocuments();

    console.log(
        'Chain ID:', chainId,
        'Node URL:', nodeUrl,
        'Token Info:', tokenInfo,
        'Token Balances:', tokenBalances,
        'Has Agreed to Required Documents:', hasAgreedToRequiredDocuments,
        'User Document Agreements:', agreements,
        'Documents Not Agreed:', documentsNotAgreed,
        'All Legal Documents:', documents
    );


    return (
        // Your component JSX here
    );
};

export default ExampleComponent;

/*
Note: These hooks require:
- A valid thor connection
- Appropriate network configuration
- Valid input parameters where applicable

The token-related hooks work with ERC20 tokens and return:
- Original values (raw from contract)
- Scaled values (adjusted for decimals)
- Formatted values (human-readable)
*/

# Remove existing installations
rm -rf node_modules
rm package-lock.json # or yarn.lock

# Reinstall packages
npm install # or yarn install

# Check what VeChain Kit expects
npm info @vechain/vechain-kit peerDependencies

# Install required peer dependencies
npm install @chakra-ui/react@^2.8.2 @tanstack/react-query@^5.64.2 @vechain/[email protected]

/* In your global CSS file (e.g., globals.css) */

/* 1. Define layers with explicit priority */
@layer vechain-kit, host-app;

/* 2. Wrap your framework in host-app layer */
@layer host-app {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Your custom styles here */
}

@layer vechain-kit, host-app;

@layer host-app {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
}

@layer vechain-kit, host-app;

/* Import Tailwind v4 */
@import "tailwindcss";

/* Your custom styles */
@layer host-app {
    /* Custom overrides */
}

@layer vechain-kit, host-app;

@layer host-app {
    @import 'bootstrap/dist/css/bootstrap.css';
}

@layer vechain-kit, host-app;

@layer host-app {
    body {
        /* Your body styles */
    }

    .your-components {
        /* Component styles */
    }
}

@layer host-app {
    /* Fix image borders */
    img {
        border-style: solid !important;
    }

    /* Ensure body styles persist */
    html body {
        background: var(--your-bg);
        font-family: var(--your-font);
    }
}

import { useGetTokenUsdPrice } from '@vechain/vechain-kit';

function TokenPrice() {
  const { data: vetPrice, isLoading, error } = useGetTokenUsdPrice('VET');
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching price</div>;
  
  return <div>VET Price: ${vetPrice}</div>;
}

function TokenPrices() {
  const { data: vetPrice } = useGetTokenUsdPrice('VET');
  const { data: vthoPrice } = useGetTokenUsdPrice('VTHO');
  const { data: b3trPrice } = useGetTokenUsdPrice('B3TR');

  return (
    <div>
      <div>VET: ${vetPrice}</div>
      <div>VTHO: ${vthoPrice}</div>
      <div>B3TR: ${b3trPrice}</div>
    </div>
  );
}

import { VechainKitProvider } from '@vechain/vechain-kit';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <VechainKitProvider
            legalDocuments={{
                allowAnalytics: true, // Enables optional consent for VeChainKit tracking

                cookiePolicy: [
                    {
                        displayName: 'MyApp Policy', // (Optional) Custom display label
                        url: 'https://www.myapp.com/cookie-policy',
                        version: 1, // Increment to re-prompt users
                        required: false, // Optional: User sees a checkbox to opt in
                    },
                ],

                privacyPolicy: [
                    {
                        url: 'https://www.myapp.com/privacy-policy',
                        version: 1, // Increment to re-prompt users
                        required: false, // Optional: can be skipped or rejected
                    },
                ],

                termsAndConditions: [
                    {
                        displayName: 'MyApp T&C',
                        url: 'https://www.myapp.com/terms-and-conditions',
                        version: 1, // Increment to re-prompt users
                        required: true, // Required: must be accepted to proceed
                    },
                ],
            }}
            // ... other props
        >
            {children}
        </VechainKitProvider>
    );
}

'use client';

import {
    useWallet,
    useSendTransaction,
    useTransactionModal,
    TransactionModal,
    getConfig
} from '@vechain/vechain-kit';
import { IB3TR__factory } from '@vechain/vechain-kit/contracts';
import { humanAddress } from '@vechain/vechain-kit/utils';
import { useMemo, useCallback } from 'react';

export function TransactionExamples() {
    const { account } = useWallet();
    const b3trMainnetAddress = getConfig("main").b3trContractAddress;
    
    const clauses = useMemo(() => {
        const B3TRInterface = IB3TR__factory.createInterface();

        const clausesArray: any[] = [];
        clausesArray.push({
            to: b3trMainnetAddress,
            value: '0x0',
            data: B3TRInterface.encodeFunctionData('transfer', [
                "0x0, // receiver address
                '0', // 0 B3TR (in wei)
            ]),
            comment: `This is a dummy transaction to test the transaction modal. Confirm to transfer ${0} B3TR to ${humanAddress("Ox0")}`,
            abi: B3TRInterface.getFunction('transfer'),
        });

        return clausesArray;
    }, [connectedWallet?.address]);

    const {
        sendTransaction,
        status,
        txReceipt,
        resetStatus,
        isTransactionPending,
        error,
    } = useSendTransaction({
        signerAccountAddress: account?.address ?? '',
    });

    const {
        open: openTransactionModal,
        close: closeTransactionModal,
        isOpen: isTransactionModalOpen,
    } = useTransactionModal();

    // This is the function triggering the transaction and opening the modal
    const handleTransaction = useCallback(async () => {
        openTransactionModal();
        await sendTransaction(clauses);
    }, [sendTransaction, clauses, openTransactionModal]);
    
    const handleTryAgain = useCallback(async () => {
        resetStatus();
        await sendTransaction(clauses);
    }, [sendTransaction, clauses, resetStatus]);

    return (
        <>
            <button
                onClick={handleTransactionWithModal}
                isLoading={isTransactionPending}
                isDisabled={isTransactionPending}
            >
                Send B3TR
            </button>

            <TransactionModal
                isOpen={isTransactionModalOpen}
                onClose={closeTransactionModal}
                status={status}
                txReceipt={txReceipt}
                txError={error}
                onTryAgain={handleTryAgain}
                uiConfig={{
                    title: 'Test Transaction',
                    description: `This is a dummy transaction to test the transaction modal. Confirm to transfer ${0} B3TR to ${
                        account?.address
                    }`,
                    showShareOnSocials: true,
                    showExplorerButton: true,
                    isClosable: true,
                }}
            />
        </>
    );
}

// ProfileCard Types
interface ProfileCardProps {
    // Required wallet address to display
    address: string;
    // Optional callback for edit button click
    onEditClick?: () => void;
    // Optional callback for logout button click
    onLogout?: () => void;
    // Toggle header visibility (default: true)
    showHeader?: boolean;
    // Toggle social links visibility (default: true)
    showLinks?: boolean;
    // Toggle description visibility (default: true)
    showDescription?: boolean;
    // Toggle display name visibility (default: true)
    showDisplayName?: boolean;
    // Toggle edit/logout buttons visibility (default: true)
    showEdit?: boolean;
}

// Internal types used by the component
interface TextRecords {
    display?: string;
    description?: string;
    email?: string;
    url?: string;
    'com.x'?: string;
}

interface WalletInfo {
    address: string;
    domain?: string;
    image?: string;
    isLoadingMetadata?: boolean;
    metadata?: TextRecords;
}

// Example usage of ProfileCard component
import { ProfileCard } from '@vechain/vechain-kit';

const MyComponent = () => {
    // Example wallet address
    const walletAddress = "0x123...abc";

    return (
        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
            {/* Basic usage */}
            <ProfileCard
                address={walletAddress}
            />

            {/* Full featured usage */}
            <ProfileCard
                address={walletAddress}
                showHeader={true}
                showLinks={true}
                showDescription={true}
                showDisplayName={true}
                showEdit={true}
            />
        </div>
    );
};

export default MyComponent;

/*
Note: The component will automatically:
- Resolve VET domains for the address
- Fetch and display avatar
- Load text records for social links
- Handle dark/light mode
- Manage connected account state
*/

"use-client"

import { useConvertB3tr } from "@/hooks"
import { useWallet, useUpgradeRequired, useUpgradeSmartAccountModal } from "@vechain/vechain-kit"

// Example component allowing for B3TR to VOT3 conversion
export const ConvertModal = ({ isOpen, onClose }: Props) => {
  const { account, connectedWallet, connection } = useWallet()

  const isSmartAccountUpgradeRequired = useUpgradeRequired(
    account?.address ?? "",
    connectedWallet?.address ?? "",
    3
  )

  const { open: openUpgradeModal } = useUpgradeSmartAccountModal()
  
  // A custom convert b3tr to vot3 hook
  const convertB3trMutation = useConvertB3tr({
    amount,
  })

  const handleConvertB3tr = useCallback(() => {
    if (connection.isConnectedWithPrivy && isSmartAccountUpgradeRequired) {
      //Open Upgrade Modal
      openUpgradeModal()
      return
    }

    convertB3trMutation.resetStatus()
    convertB3trMutation.sendTransaction(undefined)
  }, [isSmartAccountUpgradeRequired, convertB3trMutation, openUpgradeModal, connection])


  return (
    <button onClick={handleConvertB3tr}> Convert my B3TR to VOT3 </button>
  )
}

yarn add @chakra-ui/[email protected]

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { VeChainKitProvider } from "@vechain/vechain-kit";
import {
  ChakraProvider,
  ColorModeScript,
  useColorMode,
} from "@chakra-ui/react";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { persister, queryClient } from "./utils/queryClient.ts";

export const AppWrapper = () => {
  const { colorMode } = useColorMode();

  return (
    <VeChainKitProvider
      // ... your config
    >
      <App />
    </VeChainKitProvider>
  );
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
    >
      <ChakraProvider theme={stargateStakingTheme}>
        <ColorModeScript initialColorMode="dark" />
        <AppWrapper />
      </ChakraProvider>
    </PersistQueryClientProvider>
  </React.StrictMode>
);

<ChakraProvider theme={stargateStakingTheme}>
    <ColorModeScript initialColorMode="dark" />
    <AppWrapper />
</ChakraProvider>

'use client';

import { WalletButton } from '@vechain/vechain-kit';

export function Page() {
    return (
        <WalletButton />
    );
}

'use client';

import { useConnectModal, useAccountModal, useWallet } from '@vechain/vechain-kit';

export function CustomAuthButton() {
    const { connection } = useWallet();
    
    const { 
        open: openConnectModal, 
        close: closeConnectModal, 
        isOpen: isConnectModalOpen 
    } = useConnectModal();
    
    const { 
        open: openAccountModal, 
        close: closeAccountModal, 
        isOpen: isAccountModalOpen 
    } = useAccountModal();
    
    if (!connection.isConnected) {
        return (
            <button onClick={openConnectModal}>
                Connect Wallet
            </button>
        );
    }
    
    return (
        <button onClick={openAccountModal}>
            View Account
        </button>
    );
}

import { useLoginWithOAuth } from '@vechain/vechain-kit';

const SocialLoginComponent = () => {
    const { initOAuth } = useLoginWithOAuth();

    const handleOAuthLogin = async (provider: OAuthProvider) => {
        try {
            await initOAuth({ provider });
            console.log(`${provider} OAuth login initiated`);
        } catch (error) {
            console.error("OAuth login failed:", error);
        }
    };

    return (
        <div className="social-login-container">
            <h3>Sign in with:</h3>
            <div className="social-buttons">
                <button onClick={() => handleOAuthLogin('google')}>
                    <GoogleIcon /> Google
                </button>
                <button onClick={() => handleOAuthLogin('twitter')}>
                    <TwitterIcon /> Twitter
                </button>
                <button onClick={() => handleOAuthLogin('apple')}>
                    <AppleIcon /> Apple
                </button>
                <button onClick={() => handleOAuthLogin('discord')}>
                    <DiscordIcon /> Discord
                </button>
            </div>
        </div>
    );
};

export default SocialLoginComponent;

import { useDAppKitWalletModal } from '@vechain/vechain-kit';

export const WalletOnlyLogin = () => {
    const { open: openWalletModal } = useDAppKitWalletModal();

    return (
        <button onClick={openWalletModal}>
            Connect Wallet
        </button>
    );
};

import { useWallet } from '@vechain/vechain-kit';

function Component() {
    const { connection, address, source } = useWallet();
    
    if (connection.isConnected) {
        console.log('Connected wallet:', address);
        console.log('Connection source:', source);
    }
}

const handleConnect = async () => {
    try {
        await openConnectModal();
    } catch (error) {
        console.error('Connection failed:', error);
        // Show user-friendly error message
    }
};

// Transaction Types
type TransactionStatus = 'ready' | 'pending' | 'waitingConfirmation' | 'success' | 'error';

type TransactionStatusErrorType = {
    type: 'UserRejectedError' | 'RevertReasonError';
    reason: string;
};

type EnhancedClause = {
    to: string;
    value?: string;
    data?: string;
    comment?: string;
    abi?: any;
};

interface TransactionHookReturnValue {
    sendTransaction: () => Promise<void>;
    isTransactionPending: boolean;
    isWaitingForWalletConfirmation: boolean;
    txReceipt: Connex.Thor.Transaction.Receipt | null;
    status: TransactionStatus;
    resetStatus: () => void;
    error?: TransactionStatusErrorType;
}

interface TransferVETParams {
    fromAddress: string;
    receiverAddress: string;
    amount: string;
    onSuccess?: () => void;
    onError?: (error: Error) => void;
}

interface TransferERC20Params {
    fromAddress: string;
    receiverAddress: string;
    amount: string;
    tokenAddress: string;
    tokenName: string;
    onSuccess?: () => void;
    onError?: (error: Error) => void;
}

interface SendTransactionParams {
    signerAccountAddress: string;
    clauses: EnhancedClause[];
    onTxConfirmed?: () => void;
    onTxFailedOrCancelled?: () => void;
}

// Example usage of Transaction hooks
import { 
    useSendTransaction,
    useTransferERC20,
    useTransferVET 
} from '@vechain/vechain-kit';

const ExampleComponent = () => {
    // Example of sending VET
    const { 
        sendTransaction: sendVET,
        isTransactionPending: isVETPending,
        status: vetStatus,
        error: vetError 
    } = useTransferVET({
        fromAddress: "0x...",
        receiverAddress: "0x...",
        amount: "1.5",
        onSuccess: () => console.log("VET transfer successful"),
        onError: () => console.log("VET transfer failed")
    });

    // Example of sending ERC20 tokens
    const {
        sendTransaction: sendToken,
        isTransactionPending: isTokenPending,
        status: tokenStatus,
        error: tokenError
    } = useTransferERC20({
        fromAddress: "0x...",
        receiverAddress: "0x...",
        amount: "100",
        tokenAddress: "0x...",
        tokenName: "TOKEN",
        onSuccess: () => console.log("Token transfer successful"),
        onError: () => console.log("Token transfer failed")
    });

    // Example of custom transaction
    const {
        sendTransaction: sendCustomTx,
        isTransactionPending: isCustomPending,
        status: customStatus,
        error: customError
    } = useSendTransaction({
        signerAccountAddress: "0x...",
        clauses: [
            {
                to: "0x...",
                value: "0x0",
                data: "0x...",
                comment: "Custom transaction"
            }
        ],
        onTxConfirmed: () => console.log("Custom transaction successful"),
        onTxFailedOrCancelled: () => console.log("Custom transaction failed")
    });

    const handleVETTransfer = async () => {
        try {
            await sendVET();
        } catch (error) {
            console.error("VET transfer error:", error);
        }
    };

    const handleTokenTransfer = async () => {
        try {
            await sendToken();
        } catch (error) {
            console.error("Token transfer error:", error);
        }
    };

    const handleCustomTransaction = async () => {
        try {
            await sendCustomTx();
        } catch (error) {
            console.error("Custom transaction error:", error);
        }
    };

    return (
        <div>
            <button 
                onClick={handleVETTransfer} 
                disabled={isVETPending}
            >
                Send VET
            </button>
            <button 
                onClick={handleTokenTransfer} 
                disabled={isTokenPending}
            >
                Send Tokens
            </button>
            <button 
                onClick={handleCustomTransaction} 
                disabled={isCustomPending}
            >
                Send Custom Transaction
            </button>

            {/* Status displays */}
            {vetStatus === 'pending' && <div>VET Transfer Pending...</div>}
            {tokenStatus === 'pending' && <div>Token Transfer Pending...</div>}
            {customStatus === 'pending' && <div>Custom Transaction Pending...</div>}

            {/* Error displays */}
            {vetError && <div>VET Error: {vetError.reason}</div>}
            {tokenError && <div>Token Error: {tokenError.reason}</div>}
            {customError && <div>Custom Error: {customError.reason}</div>}
        </div>
    );
};

export default ExampleComponent;

/*
Note: These hooks require:
- Valid thor connection
- Network configuration
- Valid wallet connection
- For ERC20 transfers: valid token contract address
- All amounts should be in their base units (e.g., wei for VET)
*/

// NFT Types
interface NFTMetadata {
    name: string;
    description: string;
    image: string;
    attributes: {
        trait_type: string;
        value: string | number;
    }[];
}

interface NFTImageHookParams {
    address: string;
    contractAddress: string;
}

interface NFTMetadataUriParams {
    tokenId: string;
    contractAddress: string;
}

interface NFTImageHookResult {
    imageData: string | null;
    imageMetadata: NFTMetadata | null;
    tokenID: string | null;
    isLoading: boolean;
    error: Error | null;
}

interface NFTMetadataUriResult {
    data: string | null;
    isLoading: boolean;
    error: Error | null;
}

// Example usage of NFT hooks
import { useNFTImage, useNFTMetadataUri } from '@vechain/vechain-kit';

const ExampleComponent = () => {
    const walletAddress = "0x...";
    const tokenId = "1";
    const contractAddress = "0x...";

    // Get complete NFT data including image
    const { 
        imageData,
        imageMetadata,
        tokenID,
        isLoading: isLoadingNFT,
        error: nftError 
    } = useNFTImage({
        address: walletAddress,
        contractAddress: contractAddress
    });

    // Get just the metadata URI
    const {
        data: metadataUri,
        isLoading: isLoadingUri,
        error: uriError
    } = useNFTMetadataUri({
        tokenId,
        contractAddress
    });

    // Handle loading states
    if (isLoadingNFT || isLoadingUri) {
        return <div>Loading NFT data...</div>;
    }

    // Handle errors
    if (nftError || uriError) {
        return <div>Error: {nftError?.message || uriError?.message}</div>;
    }

    console.log(
        'NFT Image:', imageData,
        'NFT Metadata:', imageMetadata,
        'Token ID:', tokenID,
        'Metadata URI:', metadataUri
    );

    // Example of using the NFT data
    return (
        <div>
            {imageData && (
                <img 
                    src={imageData} 
                    alt={imageMetadata?.name || 'NFT'} 
                />
            )}
            {imageMetadata && (
                <div>
                    <h2>{imageMetadata.name}</h2>
                    <p>{imageMetadata.description}</p>
                    {imageMetadata.attributes?.map((attr, index) => (
                        <div key={index}>
                            {attr.trait_type}: {attr.value}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default ExampleComponent;

/*
Note: These hooks require:
- Valid thor connection
- Network type configuration
- Valid IPFS gateway for image fetching
- The hooks handle the complete flow:
  1. Get token ID from address
  2. Get metadata URI from token ID
  3. Fetch metadata from IPFS
  4. Fetch image from IPFS

Types:
interface NFTMetadata {
    name: string;
    description: string;
    image: string;
    attributes: {
        trait_type: string;
        value: string;
    }[];
}
*/

// Error: Type 'string' is not assignable to type '`0x${string}`'
const address: `0x${string}` = userAddress;

// ✅ Solution
const contractAddress = getConfig(networkType).contractAddress as `0x${string}`;
const method = 'convertedB3trOf' as const;

// ✅ Validate addresses
import { humanAddress } from '@vechain/vechain-kit/utils';
const validatedAddress = humanAddress(address);

import { hashFn } from 'wagmi/query';
// Error: Do not know how to serialize a BigInt

// ✅ Solution: set wagmi's hashfn as default queryKeyHashFn
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: hashFn,
      retry: 0,
      retryOnMount: false,
      staleTime: 30000,
      // other options
    },
  },
})

// ✅ Good: Consistent query key structure
const queryKey = getCallClauseQueryKeyWithArgs({
  abi: VOT3__factory.abi,
  address: contractAddress,
  method: 'balanceOf' as const,
  args: [userAddress],
});

// ✅ Proper invalidation
queryClient.invalidateQueries({ queryKey });

// Old pattern
const functionAbi = vot3Abi.find((e) => e.name === "convertedB3trOf");
const res = await thor.account(contractAddress).method(functionAbi).call(address);

// ✅ New pattern
import { VOT3__factory } from '@vechain/vechain-kit/contracts';
return useCallClause({
  abi: VOT3__factory.abi,
  address: contractAddress,
  method: 'convertedB3trOf' as const,
  args: [address ?? ''],
  queryOptions: { enabled: !!address },
});

// Old manual transaction building
const buildConvertTx = (thor: Connex.Thor, amount: string) => {
  const functionAbi = abi.find((e) => e.name === "convertToVOT3");
  const clause = thor.account(contractAddress).method(functionAbi).asClause(amount);
  return { ...clause, comment: `Convert ${amount}`, abi: functionAbi };
};

// ✅ New clause building
import { VOT3__factory } from '@vechain/vechain-kit/contracts';
const buildConvertTx = (thor: ThorClient, amount: string): EnhancedClause => {
  const { clause } = thor.contracts
    .load(contractAddress, VOT3__factory.abi)
    .clause.convertToVOT3(ethers.parseEther(amount));

  return {
    ...clause,
    comment: `Convert ${humanNumber(amount)} B3TR to VOT3`,
  };
};

// ✅ Batch multiple calls
const useTokenData = (tokenAddress: string) => {
  return useQuery({
    queryKey: ['TOKEN_DATA', tokenAddress],
    queryFn: async () => {
      const results = await executeMultipleClausesCall({
        thor,
        calls: [
          { abi: ERC20__factory.abi, functionName: 'symbol', address: tokenAddress, args: [] },
          { abi: ERC20__factory.abi, functionName: 'decimals', address: tokenAddress, args: [] },
          { abi: ERC20__factory.abi, functionName: 'totalSupply', address: tokenAddress, args: [] },
        ],
      });
      
      return {
        symbol: results[0][0],
        decimals: results[1][0],
        totalSupply: results[2][0],
      };
    },
    enabled: !!tokenAddress,
    staleTime: 60000, // Cache for 1 minute
  });
};

// ✅ retry configuration
const { data, error } = useCallClause({
  queryOptions: {
    retry: (failureCount, error) => {
      if (error.message.includes('reverted')) return false;
      if (error.message.includes('invalid')) return false;
      return failureCount < 3;
    },
    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
  },
});

// ✅ Mock VeChain Kit hooks
jest.mock('@vechain/vechain-kit', () => ({
  useWallet: () => ({
    account: { address: '0x123...' },
    isConnected: true,
  }),
  useCallClause: () => ({
    data: [BigInt('1000000000000000000')],
    isLoading: false,
    error: null,
  }),
}));

'use client';

import { VeChainKitProvider } from "@vechain/vechain-kit";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <VeChainKitProvider
      network={{ type: "test" }}
      feeDelegation={{
        delegatorUrl: "https://sponsor-testnet.vechain.energy/by/441",
        delegateAllTransactions: false,
      }}
    >
      {children}
    </VeChainKitProvider>
  );
}

import dynamic from 'next/dynamic';

const VeChainKitProvider = dynamic(
  async () => (await import('@vechain/vechain-kit')).VeChainKitProvider,
  { ssr: false }
);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <VeChainKitProvider
      // ... configuration
    >
      {children}
    </VeChainKitProvider>
  );
}

'use client';

import { VeChainKitProvider } from "@vechain/vechain-kit";

export function VeChainKitProviderWrapper({ children }: { children: React.ReactNode }) {
  return (
    <VeChainKitProvider
      // Network Configuration
      network={{
        type: "test", // "main" | "test" | "solo"
      }}
      
      // Fee Delegation
      feeDelegation={{
        delegatorUrl: "https://sponsor-testnet.vechain.energy/by/441",
        delegateAllTransactions: false, // Set to true to delegate all transactions
      }}
      
      // Login Methods Configuration
      loginMethods={[
        { method: "vechain", gridColumn: 4 },
        { method: "dappkit", gridColumn: 4 },
        { method: "ecosystem", gridColumn: 4 },
      ]}
      
      // DApp Kit Configuration
      dappKit={{
        allowedWallets: ["veworld", "wallet-connect", "sync2"],
        walletConnectOptions: {
          projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
          metadata: {
            name: "Your DApp Name",
            description: "Your DApp description visible in wallets",
            url: typeof window !== "undefined" ? window.location.origin : "",
            icons: ["https://your-domain.com/logo.png"],
          },
        },
      }}
      
      // UI Configuration
      darkMode={false}
      language="en"
      allowCustomTokens={false}
      
      // Login Modal UI Customization
      loginModalUI={{
        logo: '/your-logo.png',
        description: 'Welcome to our DApp',
      }}
    >
      {children}
    </VeChainKitProvider>
  );
}

network: {
  type: "main" | "test" | "solo" // Select mainnet or testnet or solo
}

feeDelegation: {
  delegatorUrl: string,           // Fee delegation service URL
  delegateAllTransactions: boolean // true: delegate all | false: only social login
}

loginMethods: [
  // Always available methods
  { method: "vechain", gridColumn: 4 },    // VeChain login
  { method: "dappkit", gridColumn: 4 },    // VeChain wallets
  { method: "ecosystem", gridColumn: 4 },  // Ecosystem apps (Mugshot, Cleanify, Greencart, etc.)
  
  // Privy-dependent methods (require privy configuration)
  { method: "email", gridColumn: 2 },      // Email login
  { method: "passkey", gridColumn: 2 },    // Passkey authentication
  { method: "google", gridColumn: 4 },     // Google OAuth
  { method: "more", gridColumn: 2 },       // Additional Privy methods
]

dappKit: {
  allowedWallets: ["veworld", "wallet-connect", "sync2"],
  walletConnectOptions: {
    projectId: "YOUR_WALLET_CONNECT_PROJECT_ID", // Get from https://cloud.reown.com
    metadata: {
      name: string,
      description: string,
      url: string,
      icons: string[]
    }
  }
}

<VeChainKitProvider
  privy={{
    appId: "your-privy-app-id",
    clientId: "your-privy-client-id",
    // Additional Privy configuration
  }}
  loginMethods={[
    // Now you can use Privy-dependent methods
    { method: "email", gridColumn: 2 },
    { method: "google", gridColumn: 4 },
    { method: "passkey", gridColumn: 2 },
  ]}
>
  {children}
</VeChainKitProvider>

// ❌ This will show a type error
const invalidConfig = {
  // No privy configuration
  loginMethods: [
    { method: 'email' }  // Type error: 'email' requires Privy
  ]
};

// ✅ This is valid
const validConfig = {
  privy: { appId: 'xxx', clientId: 'yyy' },
  loginMethods: [
    { method: 'email' },   // OK: Privy is configured
    { method: 'vechain' }  // OK: Always available
  ]
};

<VeChainKitProvider
  loginMethods={[
    { method: "ecosystem", gridColumn: 4 }
  ]}
  ecosystemApps={{
    allowedApps: ["app-id-1", "app-id-2"], // Find app IDs in Privy dashboard
  }}
>
  {children}
</VeChainKitProvider>

# .env.local
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id_here

'use client';

import {
    useWallet,
    useSendTransaction,
    useTransactionModal,
    TransactionModal,
    getConfig
} from '@vechain/vechain-kit';
import { IB3TR__factory } from '@vechain/vechain-kit/contracts';
import { humanAddress } from '@vechain/vechain-kit/utils';
import { useMemo, useCallback } from 'react';

export function TransactionExamples() {
    const { account } = useWallet();
    const b3trMainnetAddress = getConfig("main").b3trContractAddress;
    
    const clauses = useMemo(() => {
        const B3TRInterface = IB3TR__factory.createInterface();

        const clausesArray: any[] = [];
        clausesArray.push({
            to: b3trMainnetAddress,
            value: '0x0',
            data: B3TRInterface.encodeFunctionData('transfer', [
                "0x0, // receiver address
                '0', // 0 B3TR (in wei)
            ]),
            comment: `This is a dummy transaction to test the transaction modal. Confirm to transfer ${0} B3TR to ${humanAddress("Ox0")}`,
            abi: B3TRInterface.getFunction('transfer'),
        });

        return clausesArray;
    }, [connectedWallet?.address]);

    const {
        sendTransaction,
        status,
        txReceipt,
        resetStatus,
        isTransactionPending,
        error,
    } = useSendTransaction({
        signerAccountAddress: account?.address ?? '',
    });

    const {
        open: openTransactionModal,
        close: closeTransactionModal,
        isOpen: isTransactionModalOpen,
    } = useTransactionModal();

    // This is the function triggering the transaction and opening the modal
    const handleTransaction = useCallback(async () => {
        openTransactionModal();
        await sendTransaction(clauses);
    }, [sendTransaction, clauses, openTransactionModal]);
    
    const handleTryAgain = useCallback(async () => {
        resetStatus();
        await sendTransaction(clauses);
    }, [sendTransaction, clauses, resetStatus]);

    return (
        <>
            <button
                onClick={handleTransactionWithModal}
                isLoading={isTransactionPending}
                isDisabled={isTransactionPending}
            >
                Send B3TR
            </button>

            <TransactionModal
                isOpen={isTransactionModalOpen}
                onClose={closeTransactionModal}
                status={status}
                txReceipt={txReceipt}
                txError={error}
                onTryAgain={handleTryAgain}
                uiConfig={{
                    title: 'Test Transaction',
                    description: `This is a dummy transaction to test the transaction modal. Confirm to transfer ${0} B3TR to ${
                        account?.address
                    }`,
                    showShareOnSocials: true,
                    showExplorerButton: true,
                    isClosable: true,
                }}
            />
        </>
    );
}

useSendTransaction({
  ..., //other config
  suggestedMaxGas: 40000000, // Sets the gas limit directly
});

useSendTransaction({
  ..., //other config
  gasPadding: 0.1, // Adds 10% buffer to estimated gas
});

import { useWallet } from "@vechain/vechain-kit"; 

function MyComponent = () => {
    const {
        account,
        connectedWallet,
        smartAccount,
        privyUser,
        connection,
        disconnect
    } = useWallet();
    
    return <></>
}