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 int
npm install @vechain/dapp-kit-react@vechain/dapp-kit-reactThe 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
``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(
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();
`
- 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 (
<>
>
);
};
`
- 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 (
<>
>
);
};
``