@vechain/dapp-kit-react

The Vechain DApp Kit serves as a sophisticated layer built upon @vechain/sdk-network and @vechain/sdk-core , providing a simplified and efficient
avenue for engaging with a multitude of Vechain wallets. This innovative toolkit enhances the ease of interaction,
offering developers a seamless bridge to connect with diverse Vechain wallet functionalities. For more information,
please refer to the official Vechain Docs

Installation

``bash
yarn add @vechain/dapp-kit-react
`

- Optional: Configure wallet connect options

`typescript
import type { WalletConnectOptions } from '@vechain/dapp-kit';

const walletConnectOptions: WalletConnectOptions = {
// Create your project here: https://cloud.walletconnect.com/sign-up
projectId: '',
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],
},
};
`

- Initialise the DAppKitProvider

`typescript jsx
import { DAppKitProvider } from '@vechain/dapp-kit-react';

ReactDOM.createRoot(document.getElementById('root')!).render(

// REQUIRED: The URL of the node you want to connect to
node={'https://testnet.vechain.org/'}
// OPTIONAL: Whether or not to persist state in local storage (account, wallet source)
usePersistence={true}
// OPTIONAL: Options to enable wallet connect
walletConnectOptions={walletConnectOptions}
// OPTIONAL: A log level for console logs
logLevel="DEBUG"
>


,
);
`

- Use the hooks provided by the DAppKitProvider

`typescript jsx
import { useWallet, useThor } from '@vechain/dapp-kit-react';
import type { WalletSource } from '@vechain/dapp-kit';

// type WalletSource = 'wallet-connect' | 'veworld' | 'sync2' | 'sync';
const mySource: WalletSource = 'veworld';

const { connect, setSource } = useWallet();

setSource(mySource);

const { account } = await connect();

//Start using Thor vendor
const thor = useThor();
`

$3

- Use the ConnectWalletButton component to display a modal with the available wallets

`typescript jsx
import { WalletButton } from '@vechain/dapp-kit-react';
import { useWallet } from '@vechain/dapp-kit-react';

const MyComponent = (): JSX.Element => {
const { account } = useWallet();

useEffect(() => {
if (account) {
// account connected!!
}
}, [account]);

return (
<>


);
};
`

$3

- Use the ConnectWalletModal component to display a modal with the available wallets

`typescript jsx
import { useWallet, useWalletModal } from '@vechain/dapp-kit-react';

export const MyComponent = (): JSX.Element => {
const { account } = useWallet();
const { open, close } = useWalletModal();

useEffect(() => {
if (account) {
// account connected!!
}
}, [account]);

return (
<>
Connect Wallet

);
};
``