import type { WalletConnectOptions } from '@vechain/dapp-kit';
const walletConnectOptions: 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 to
nodeUrl={'https://testnet.vechain.org/'}
// OPTIONAL: Required if you're not connecting to the main net
genesis={'test'}
// 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"
>
<App />
</DAppKitProvider>
</React.StrictMode>,
);
Hooks
useWallet
import { useWallet } from '@vechain/dapp-kit-react';
const MyComponent: React.FC = () => {
const {
// The current connected account
account,
// The current wallet source
source,
// Set the wallet source
setSource,
// Connect to the wallet
connect,
// A list of available wallets
availableWallets,
// Disconnect from the wallet
disconnect,
} = 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.