Using the VeChain dApp kit UI components


import { DAppKitUI } from '@vechain/dapp-kit-ui';
import type { WalletConnectOptions } from '@vechain/dapp-kit';
import type { DAppKitOptions } from '@vechain/dapp-kit-ui';

const walletConnectOptions: WalletConnectOptions = {
     // Create your project here:
    projectId: '<PROJECT_ID>',
    metadata: {
        name: 'My dApp',
        description: 'My dApp description',
        // Your app URL
        url: window.location.origin, 
        // Your app Icon
        icons: [`${window.location.origin}/images/my-dapp-icon.png`], 

const vechainWalletKitOptions: DAppKitOptions = {
    // Required - The URL of the node to connect to
    node: '', 
    // Optional - "main" | "test" | Connex.Thor.Block
    network: 'test', 
    // Optional - Wallet connect options
    // Optional - Defaults to false. If true, the account and source will be persisted in local storage
    usePersistence: true, 
    // Optional - Defaults to the first available wallet. Default value is false
    useFirstDetectedSource: true,
    // Optional - Set a log level to debug the library
    logLevel: 'DEBUG'

const dappKit = DAppKitUI.configure(vechainWalletKitOptions);

console.log(`DAppKit configured`,;

Place the custom element in your HTML

    <vwk-vechain-dapp-connect-kit mode="DARK"></vwk-vechain-dapp-connect-kit>

Last updated