@vechain/vechain-kit 1.5.7 → 1.5.8

package/README.md

@@ -1,7 +1,7 @@
 #### An all-in-one library for building VeChain applications.
 
 <div align="center">
-    <img src="https://i.ibb.co/k539SN7/kit-banner.png" alt="VeChain Kit Banner">
+    <img src="https://i.ibb.co/NgDN6XD3/kit-preview.png" alt="VeChain Kit Banner">
 </div>
 
 ## Introduction
@@ -41,14 +41,36 @@ yarn add @tanstack/react-query@"^5.64.2" @chakra-ui/react@"^2.8.2" @vechain/dapp
 'use client';
 
 import VeChainKitProvider from '@vechain/vechain-kit';
+
 export function VeChainKitProviderWrapper({ children }: Props) {
     return (
         <VechainKitProvider
             feeDelegation={{
                 delegatorUrl: process.env.NEXT_PUBLIC_DELEGATOR_URL!,
+                // set to false if you want to delegate ONLY social login transactions
+                delegateAllTransactions: true,
             }}
+            loginMethods={[
+                { method: 'vechain', gridColumn: 4 },
+                { method: 'dappkit', gridColumn: 4 },
+            ]}
             dappKit={{
-                allowedWallets: ['veworld', 'sync2'],
+                allowedWallets: ['veworld', 'wallet-connect', 'sync2'],
+                walletConnectOptions: {
+                    projectId:
+                        // Get this on https://cloud.reown.com/sign-in
+                        process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
+                    metadata: {
+                        name: 'Your App Name',
+                        description:
+                            'This is the description of your app visible in VeWorld upon connection request.',
+                        url:
+                            typeof window !== 'undefined'
+                                ? window.location.origin
+                                : '',
+                        icons: ['https://path-to-logo.png'],
+                    },
+                },
             }}
             darkMode={true}
             language="en"
@@ -66,7 +88,7 @@ On Next.js you will need to dynamically load the import
 
 ```typescript
 import dynamic from 'next/dynamic';
-const VeChainKitProviderWrapper = dynamic(
+const VeChainKitProvider = dynamic(
     async () => (await import('@vechain/vechain-kit')).VeChainKitProvider,
     {
         ssr: false,
@@ -77,18 +99,7 @@ interface Props {
 }
 ```
 
-### Available Login Methods
-
-The modal supports several authentication methods:
-
--   Social Login - Email and Google authentication through Privy (only available for self hosted Privy)
--   VeChain Login - Direct VeChain wallet authentication
--   Passkey - Biometric/device-based authentication (only available for self hosted Privy)
--   DappKit - Connection through VeWorld or other VeChain wallets
--   Ecosystem - Cross-app authentication within the VeChain ecosystem
--   More Options - Additional Privy-supported login methods (only available for self hosted Privy)
-
-#### Configuration
+### Login Methods
 
 The modal implements a dynamic grid layout system that can be customized through the `loginMethods` configuration.
 
@@ -102,96 +113,28 @@ The modal can be configured through the `VeChainKitProvider` props.
     }}
     loginMethods={[
         { method: 'vechain', gridColumn: 4 },
-        { method: 'email', gridColumn: 2 },
-        { method: 'passkey', gridColumn: 2 },
+        { method: 'dappkit', gridColumn: 4 }, // VeChain wallets, always available
+        { method: 'ecosystem', gridColumn: 4 }, // Mugshot, Cleanify, Greencart, ...
+        { method: 'email', gridColumn: 2 }, // only available with your own Privy
+        { method: 'passkey', gridColumn: 2 }, // only available with your own Privy
+        { method: 'google', gridColumn: 4 }, // only available with your own Privy
+        { method: 'more', gridColumn: 2 }, // will open your own Privy login, only available with your own Privy
     ]}
+    allowCustomTokens={false} // allow the user to manage custom tokens
 >
     {children}
 </VeChainKitProvider>
 ```
 
-#### Ecosystem button
-
-The ways to show the ecosystem login button are:
-
-1. You define "ecosystem" in the loginMethods in the config
-2. You do not define the loginMethods in the config, so we default to showing the ecosystem login button
+### Setup Fee Delegation (mandatory if allowing social login)
 
-To not show the ecosystem login button, you must explicitly define the loginMethods array in the config and not include ecosystem in the options.
-
-By default we have a list of default apps that will be shown as ecosystem login options. If you want to customize this list you can pass the `allowedApps` array prop. You can find the app ids in the [Ecosystem](https://dashboard.privy.io/) tab in the Privy dashboard.
-
-### Setup Fee Delegation (mandatory)
-
-Fee delegation is mandatory in order to use this kit. Learn how to setup fee delegation in the following guide:
+Fee delegation is mandatory if you want to use this kit with social login. Learn how to setup fee delegation in the following guide:
 
 [Fee Delegation](https://docs.vechainkit.vechain.org/vechain-kit/fee-delegation)
 
-### Setup Privy (optional)
-
-If you already use Privy you can pass an additional prop with you settings and you will be able to access Privy SDK, customizing the login modal based on your needs.
-
-Pros of self hosting Privy:
-
--   No UI confirmations on users transactions
--   Allow your users to backup their keys and update security settings directly in your app
--   Targetted social login methods
-
-Cons:
+### Show the login button
 
--   Price
--   Responsibilities to correctly secure your Privy account, since it contains access to user's wallet settings
--   Your users will need to login into other apps through ecosystem mode
-
-To setup Privy you need to add the following parameters:
-
-```typescript
-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', 'metamask'],
-                appearance: {
-                    accentColor: '#696FFD',
-                    loginMessage: 'Select a social media profile',
-                    logo: 'https://i.ibb.co/ZHGmq3y/image-21.png',
-                },
-                embeddedWallets: {
-                    createOnLogin: 'all-users',
-                },
-            }}
-            ...
-            //other props
-        >
-            {children}
-        </VechainKitProvider>
-    );
-}
-```
-
-Go to privy.io and create an app. You will find the APP ID and the CLIENT ID in the App Settings tab.
-For further information on how to implement Privy SDK please refer to their [docs](https://docs.privy.io/)
-
-This project uses:
-
--   `@privy-io/react-auth` for Privy connection type
--   `@privy-io/cross-app-connect` for ecosystem cross app connection
-
-You can import privy from the kit as
-
-```typescript
-import { usePrivy } from '@vechain/vechain-kit';
-
-const { user } = usePrivy();
-```
-
-### Use the kit
-
-Once you setup the kit provider and created your fee delegation service you are good to go and you can allow your users to login.
+Once you set up the kit provider, you are good to go, and you can allow your users to login, customizing the login experience based on your needs.
 
 #### Wallet Button
 
@@ -243,12 +186,17 @@ export function Page() {
 }
 ```
 
-# Usage Guide
+# Hooks
+
+The kit provides hooks for developers to interact with smart contracts like VeBetterDAO, VePassport, veDelegate, and price oracles.
+
+The hooks in this package provide a standardized way to interact with various blockchain and web services. All hooks are built using TanStack Query (formerly React Query), which provides powerful data-fetching and caching capabilities.
+
+## Main Hooks
 
-## Wallet Information
+### useWallet
 
-The `useWallet` hook provides a unified interface for managing wallet connections in a VeChain application, supporting multiple connection methods including social logins (via Privy), direct wallet connections (via DappKit), and cross-application connections.
-This will be the hook you will use more frequently and it provides quite a few useful informations.
+The `useWallet` hook will be the one you will use more frequently and it provides quite a few useful informations like the connected account, the connected wallet, the smart account, the dappkit wallet, the embedded wallet, the cross app wallet, the privy user and the connection status.
 
 ```typescript
 import { useWallet } from "@vechain/vechain-kit";
@@ -258,10 +206,6 @@ function MyComponent = () => {
         account,
         connectedWallet,
         smartAccount,
-        dappKitWallet,
-        embeddedWallet,
-        crossAppWallet,
-        privyUser,
         connection,
         disconnect
     } = useWallet();
@@ -270,9 +214,7 @@ function MyComponent = () => {
 }
 ```
 
-## Transaction Management
-
-You need to use the `useSendTransaction` hook to send transactions to the blockchain, all you will need is to build the clause and pass it to the hook.
+### useSendTransaction
 
 This hook will take care of checking your connection type and handle the transaction submission between privy, cross-app and wallet connections.
 When implementing VeChain Kit it is mandatory to use this hook to send transaction.
@@ -283,8 +225,6 @@ When implementing VeChain Kit it is mandatory to use this hook to send transacti
 import {
     useWallet,
     useSendTransaction,
-    useTransactionModal,
-    TransactionModal,
     getConfig
 } from '@vechain/vechain-kit';
 import { IB3TR__factory } from '@vechain/vechain-kit/contracts';
@@ -324,23 +264,12 @@ export function TransactionExamples() {
         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
@@ -350,31 +279,11 @@ export function TransactionExamples() {
             >
                 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,
-                }}
-            />
         </>
     );
 }
 ```
 
-You can also use `useSignMessage` and `useSignTypedData` hooks to sign messages and typed data.
-
 ## Blockchain Data Reading
 
 The kit provides hooks for developers to interact with smart contracts like VeBetterDAO, VePassport, veDelegate, and price oracles. These hooks work with react-query, improving query capabilities by caching responses and offering real-time states like isLoading and isError. This helps developers manage and update user interfaces effectively, ensuring a responsive experience.
@@ -388,3 +297,15 @@ const { data: balance, isLoading, isError } = useGetB3trBalance('0x.....');
 
 console.log(balance.formatted, balance.original, balance.scaled);
 ```
+
+# Resources
+
+Read the complete documentation on [VeChain Kit Docs](https://docs.vechainkit.vechain.org/)
+
+Are you having issues using the kit? Join our discord server to receive support from our devs or open an issue on our Github!
+
+Check our [Troubleshooting](https://docs.vechainkit.vechain.org/vechain-kit/troubleshooting) section.
+
+Contact us on [Discord](https://discord.gg/wGkQnPpRVq)
+
+Open an issue on [Github](https://github.com/vechain/vechain-kit/issues)

package/dist/{Constants-CUrs_fy0.d.cts → Constants-aAc8EZtG.d.cts}

@@ -120,6 +120,7 @@ type PrivyAppInfo = {
     google_oauth: boolean;
     twitter_oauth: boolean;
     url: string;
+    website?: string;
 };
 type PrivyLoginMethod = LoginMethodOrderOption;
 interface CrossAppConnectionCache {
@@ -128,6 +129,7 @@ interface CrossAppConnectionCache {
         name: string;
         logoUrl?: string;
         appId: string;
+        website?: string;
     };
 }
 declare enum NFTMediaType {
@@ -186,5 +188,11 @@ declare enum TogglePassportCheck {
     ParticipationScoreCheck = 4,
     GmOwnershipCheck = 5
 }
+type PrivyEcosystemApp = {
+    id: string;
+    name: string;
+    website: string;
+};
+declare const DEFAULT_PRIVY_ECOSYSTEM_APPS: PrivyEcosystemApp[];
 
-export { type ConnectionSource as C, type EnhancedClause as E, type NETWORK_TYPE as N, type PrivyLoginMethod as P, type SmartAccount as S, TogglePassportCheck as T, VePassportUserStatus as V, type Wallet as W, type Network as a, type PrivyAppInfo as b, type TransactionStatus as c, type TransactionStatusErrorType as d, type ENSRecords as e, NFTMediaType as f, type CrossAppConnectionCache as g, type ExecuteWithAuthorizationSignData as h, type ExecuteBatchWithAuthorizationSignData as i, TOKEN_LOGOS as j, TOKEN_LOGO_COMPONENTS as k, VECHAIN_PRIVY_APP_ID as l, notFoundImage as n };
+export { type ConnectionSource as C, DEFAULT_PRIVY_ECOSYSTEM_APPS as D, type EnhancedClause as E, type NETWORK_TYPE as N, type PrivyLoginMethod as P, type SmartAccount as S, TogglePassportCheck as T, VePassportUserStatus as V, type Wallet as W, type Network as a, type PrivyAppInfo as b, type TransactionStatus as c, type TransactionStatusErrorType as d, type ENSRecords as e, NFTMediaType as f, type CrossAppConnectionCache as g, type ExecuteWithAuthorizationSignData as h, type ExecuteBatchWithAuthorizationSignData as i, TOKEN_LOGOS as j, TOKEN_LOGO_COMPONENTS as k, VECHAIN_PRIVY_APP_ID as l, type PrivyEcosystemApp as m, notFoundImage as n };

package/dist/{Constants-CUrs_fy0.d.ts → Constants-aAc8EZtG.d.ts}

@@ -120,6 +120,7 @@ type PrivyAppInfo = {
     google_oauth: boolean;
     twitter_oauth: boolean;
     url: string;
+    website?: string;
 };
 type PrivyLoginMethod = LoginMethodOrderOption;
 interface CrossAppConnectionCache {
@@ -128,6 +129,7 @@ interface CrossAppConnectionCache {
         name: string;
         logoUrl?: string;
         appId: string;
+        website?: string;
     };
 }
 declare enum NFTMediaType {
@@ -186,5 +188,11 @@ declare enum TogglePassportCheck {
     ParticipationScoreCheck = 4,
     GmOwnershipCheck = 5
 }
+type PrivyEcosystemApp = {
+    id: string;
+    name: string;
+    website: string;
+};
+declare const DEFAULT_PRIVY_ECOSYSTEM_APPS: PrivyEcosystemApp[];
 
-export { type ConnectionSource as C, type EnhancedClause as E, type NETWORK_TYPE as N, type PrivyLoginMethod as P, type SmartAccount as S, TogglePassportCheck as T, VePassportUserStatus as V, type Wallet as W, type Network as a, type PrivyAppInfo as b, type TransactionStatus as c, type TransactionStatusErrorType as d, type ENSRecords as e, NFTMediaType as f, type CrossAppConnectionCache as g, type ExecuteWithAuthorizationSignData as h, type ExecuteBatchWithAuthorizationSignData as i, TOKEN_LOGOS as j, TOKEN_LOGO_COMPONENTS as k, VECHAIN_PRIVY_APP_ID as l, notFoundImage as n };
+export { type ConnectionSource as C, DEFAULT_PRIVY_ECOSYSTEM_APPS as D, type EnhancedClause as E, type NETWORK_TYPE as N, type PrivyLoginMethod as P, type SmartAccount as S, TogglePassportCheck as T, VePassportUserStatus as V, type Wallet as W, type Network as a, type PrivyAppInfo as b, type TransactionStatus as c, type TransactionStatusErrorType as d, type ENSRecords as e, NFTMediaType as f, type CrossAppConnectionCache as g, type ExecuteWithAuthorizationSignData as h, type ExecuteBatchWithAuthorizationSignData as i, TOKEN_LOGOS as j, TOKEN_LOGO_COMPONENTS as k, VECHAIN_PRIVY_APP_ID as l, type PrivyEcosystemApp as m, notFoundImage as n };

package/dist/assets/index.cjs

@@ -1,93 +1,97 @@
 'use strict';
 
-var chunkFID67WC3_cjs = require('../chunk-FID67WC3.cjs');
+var chunkA4NZ5AVL_cjs = require('../chunk-A4NZ5AVL.cjs');
 require('../chunk-Q7SFCCGT.cjs');
 
 
 
 Object.defineProperty(exports, "GoogleLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.GoogleLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.GoogleLogo; }
 });
 Object.defineProperty(exports, "PrivyLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.PrivyLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.PrivyLogo; }
 });
 Object.defineProperty(exports, "SimpleAccountABI", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.SimpleAccountABI; }
+  get: function () { return chunkA4NZ5AVL_cjs.SimpleAccountABI; }
 });
 Object.defineProperty(exports, "SimpleAccountFactoryABI", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.SimpleAccountFactoryABI; }
+  get: function () { return chunkA4NZ5AVL_cjs.SimpleAccountFactoryABI; }
 });
 Object.defineProperty(exports, "TwitterLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.TwitterLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.TwitterLogo; }
 });
 Object.defineProperty(exports, "VETLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VETLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.VETLogo; }
 });
 Object.defineProperty(exports, "VTHOLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VTHOLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.VTHOLogo; }
 });
 Object.defineProperty(exports, "VeBetterIcon", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterIcon; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterIcon; }
 });
 Object.defineProperty(exports, "VeBetterIconDark", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterIconDark; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterIconDark; }
 });
 Object.defineProperty(exports, "VeBetterIconLight", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterIconLight; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterIconLight; }
 });
 Object.defineProperty(exports, "VeBetterLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterLogo; }
 });
 Object.defineProperty(exports, "VeBetterLogoDark", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterLogoDark; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterLogoDark; }
 });
 Object.defineProperty(exports, "VeBetterLogoLight", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VeBetterLogoLight; }
+  get: function () { return chunkA4NZ5AVL_cjs.VeBetterLogoLight; }
+});
+Object.defineProperty(exports, "VechainEnergy", {
+  enumerable: true,
+  get: function () { return chunkA4NZ5AVL_cjs.VechainEnergy; }
 });
 Object.defineProperty(exports, "VechainIcon", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainIcon; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainIcon; }
 });
 Object.defineProperty(exports, "VechainIconDark", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainIconDark; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainIconDark; }
 });
 Object.defineProperty(exports, "VechainIconLight", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainIconLight; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainIconLight; }
 });
 Object.defineProperty(exports, "VechainLogo", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainLogo; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainLogo; }
 });
 Object.defineProperty(exports, "VechainLogoDark", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainLogoDark; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainLogoDark; }
 });
 Object.defineProperty(exports, "VechainLogoHorizontalDark", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainLogoHorizontalDark; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainLogoHorizontalDark; }
 });
 Object.defineProperty(exports, "VechainLogoHorizontalLight", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainLogoHorizontalLight; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainLogoHorizontalLight; }
 });
 Object.defineProperty(exports, "VechainLogoLight", {
   enumerable: true,
-  get: function () { return chunkFID67WC3_cjs.VechainLogoLight; }
+  get: function () { return chunkA4NZ5AVL_cjs.VechainLogoLight; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/assets/index.d.cts

@@ -1071,76 +1071,82 @@ declare const SimpleAccountFactoryABI: readonly [{
     readonly type: "function";
 }];
 
-type Props$i = {
+type Props$j = {
     boxSize?: string | number;
 } & Omit<BoxProps, 'dangerouslySetInnerHTML'>;
-declare const GoogleLogo: React__default.FC<Props$i>;
+declare const GoogleLogo: React__default.FC<Props$j>;
 
-type Props$h = {
+type Props$i = {
     isDark?: boolean;
     boxSize?: string | number;
 } & Omit<BoxProps, 'dangerouslySetInnerHTML'>;
-declare const TwitterLogo: React__default.FC<Props$h>;
+declare const TwitterLogo: React__default.FC<Props$i>;
 
-type Props$g = {
+type Props$h = {
     isDark?: boolean;
 } & Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainLogo: React__default.FC<Props$g>;
+declare const VechainLogo: React__default.FC<Props$h>;
+
+type Props$g = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VechainLogoDark: React__default.FC<Props$g>;
 
 type Props$f = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainLogoDark: React__default.FC<Props$f>;
+declare const VechainLogoLight: React__default.FC<Props$f>;
 
 type Props$e = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainLogoLight: React__default.FC<Props$e>;
+declare const VechainLogoHorizontalDark: React__default.FC<Props$e>;
 
 type Props$d = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainLogoHorizontalDark: React__default.FC<Props$d>;
-
-type Props$c = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainLogoHorizontalLight: React__default.FC<Props$c>;
+declare const VechainLogoHorizontalLight: React__default.FC<Props$d>;
 
-type Props$b = {
+type Props$c = {
     isDark?: boolean;
 } & Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainIcon: React__default.FC<Props$b>;
+declare const VechainIcon: React__default.FC<Props$c>;
 
-type Props$a = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainIconLight: React__default.FC<Props$a>;
+type Props$b = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VechainIconLight: React__default.FC<Props$b>;
 
-type Props$9 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VechainIconDark: React__default.FC<Props$9>;
+type Props$a = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VechainIconDark: React__default.FC<Props$a>;
 
-type Props$8 = {
+type Props$9 = {
     isDark?: boolean;
 } & Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterLogo: React__default.FC<Props$8>;
+declare const VeBetterLogo: React__default.FC<Props$9>;
 
-type Props$7 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterLogoLight: React__default.FC<Props$7>;
+type Props$8 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VeBetterLogoLight: React__default.FC<Props$8>;
 
-type Props$6 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterLogoDark: React__default.FC<Props$6>;
+type Props$7 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VeBetterLogoDark: React__default.FC<Props$7>;
 
-type Props$5 = {
+type Props$6 = {
     isDark?: boolean;
 } & Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterIcon: React__default.FC<Props$5>;
+declare const VeBetterIcon: React__default.FC<Props$6>;
+
+type Props$5 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
+declare const VeBetterIconLight: React__default.FC<Props$5>;
 
 type Props$4 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterIconLight: React__default.FC<Props$4>;
+declare const VeBetterIconDark: React__default.FC<Props$4>;
 
 type Props$3 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VeBetterIconDark: React__default.FC<Props$3>;
+declare const VETLogo: React__default.FC<Props$3>;
 
 type Props$2 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VETLogo: React__default.FC<Props$2>;
+declare const VTHOLogo: React__default.FC<Props$2>;
 
-type Props$1 = Omit<IconProps, 'dangerouslySetInnerHTML'>;
-declare const VTHOLogo: React__default.FC<Props$1>;
+type Props$1 = {
+    isDark?: boolean;
+} & Omit<ImageProps, 'dangerouslySetInnerHTML'>;
+declare const PrivyLogo: React__default.FC<Props$1>;
 
 type Props = {
     isDark?: boolean;
-} & Omit<ImageProps, 'dangerouslySetInnerHTML'>;
-declare const PrivyLogo: React__default.FC<Props>;
+    boxSize?: string | number;
+} & Omit<BoxProps, 'dangerouslySetInnerHTML'>;
+declare const VechainEnergy: React__default.FC<Props>;
 
-export { GoogleLogo, PrivyLogo, SimpleAccountABI, SimpleAccountFactoryABI, TwitterLogo, VETLogo, VTHOLogo, VeBetterIcon, VeBetterIconDark, VeBetterIconLight, VeBetterLogo, VeBetterLogoDark, VeBetterLogoLight, VechainIcon, VechainIconDark, VechainIconLight, VechainLogo, VechainLogoDark, VechainLogoHorizontalDark, VechainLogoHorizontalLight, VechainLogoLight };
+export { GoogleLogo, PrivyLogo, SimpleAccountABI, SimpleAccountFactoryABI, TwitterLogo, VETLogo, VTHOLogo, VeBetterIcon, VeBetterIconDark, VeBetterIconLight, VeBetterLogo, VeBetterLogoDark, VeBetterLogoLight, VechainEnergy, VechainIcon, VechainIconDark, VechainIconLight, VechainLogo, VechainLogoDark, VechainLogoHorizontalDark, VechainLogoHorizontalLight, VechainLogoLight };