importtype { WalletConnectOptions } from'@vechain/dapp-kit-react';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"// OPTIONAL: theme mode 'LIGHT' or 'DARK'themeMode='LIGHT';// OPTIONAL: theme variables (check theme variables section)themeVariables={ThemeVariables}// OPTIONAL: app current languagelanguage="en";// OPTIONAL: i18n default object (check i18n section)i18n={defaultI18n}// OPTIONAL: where to render the modal, document.body is the defaultmodalParent={document.body}// OPTIONAL: handle source click to customise wallet connectonSourceClick={source =>void} // OPTIONAL: every wallet has a connection certificate, but wallet connect doesn't connect with a certificate, it uses a session; if required, with this option, we will force the user to sign a certificate after he finishes the connection with wallet connect
requireCertificate=false; > <App /> </DAppKitProvider> </React.StrictMode>,);
UI Components
WalletButton
This component mounts a button that will open a modal with the available wallets when clicked.
The user can then select a wallet of their choice and connect to it.
Once connected, account and source will be available via the useWallet hook.
import { useWallet } from'@vechain/dapp-kit-react';constMyComponent:React.FC= () => {const {// The current connected accountaccount,// The current wallet sourcesource,// certificate created during connection connectionCertificate,// 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.