importtype { WalletConnectOptions } from'@vechain/dapp-kit';constwalletConnectOptions:WalletConnectOptions= {// Create your project here: https://cloud.walletconnect.com/sign-up 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`], },};
2. Initialise theDAppKitProvider
import { DAppKitProvider } from'@vechain/dapp-kit-react';ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <DAppKitProvider// REQUIRED: The URL of the node you want to connect tonodeUrl={'https://testnet.vechain.org/'}// OPTIONAL: Required if you're not connecting to the main netgenesis={'test'}// OPTIONAL: Whether or not to persist state in local storage (account, wallet source)usePersistence={true}// OPTIONAL: Options to enable wallet connectwalletConnectOptions={walletConnectOptions}// OPTIONAL: A log level for console logslogLevel="DEBUG" > <App /> </DAppKitProvider> </React.StrictMode>,);
Hooks
useWallet
import { useWallet } from'@vechain/dapp-kit-react';constMyComponent:React.FC= () => {const {// The current connected accountaccount,// The current wallet sourcesource,// Set the wallet sourcesetSource,// Connect to the walletconnect,// A list of available walletsavailableWallets,// Disconnect from the walletdisconnect, } =useWallet();return <div>...</div>;}
useConnex
This hook exposes the thor and vendor instances of @vechain/connex. To interact with a wallet, you must useWallet and call setSource first.