"use client";
import { WalletButton } from "@vechain/vechain-kit";
const Demo = () => {
return (
<div>
<WalletButton /> {/* Login Button */}
<p>{account?.address}</p> {/* Address of the connected account */}
</div>
)
}
| Option | Type | Required | Description |
|---|---|---|---|
allowAnalytics | boolean | No | If true, prompts users with an optional tracking policy. |
cookiePolicy | array | No | One or more cookie policy versions. |
privacyPolicy | array | No | One or more privacy policy versions. |
termsAndConditions | array | No | One or more T&C versions. |
Current language: {currentLanguage}
Current currency: {currentCurrency}
| Option | Type | Applies Gas Estimation | Applies Padding | Overwrites Estimation |
|---|---|---|---|---|
suggestedMaxGas | Integer | ❌ | ❌ | ✅ |
gasPadding | Float (0–1) | ✅ | ✅ | ❌ |
{imageMetadata.description}
{imageMetadata.attributes?.map((attr, index) => (One common issue, solvable by installing Chakra and defining <ColorModeScript />
@layer vechain-kit, host-app;
@layer host-app {
body {
/* Your body styles */
}
.your-components {
/* Component styles */
}
}
@layer host-app {
/* Fix image borders */
img {
border-style: solid !important;
}
/* Ensure body styles persist */
html body {
background: var(--your-bg);
font-family: var(--your-font);
}
}
<VeChainKitProvider
feeDelegation={{
delegatorUrl: process.env.NEXT_PUBLIC_DELEGATOR_URL,
delegateAllTransactions: false
}}
// ... other config
>
<App />
</VeChainKitProvider>
// Load data when component mounts or when form changes
const { data: gasPrice } = useQuery(['gasPrice'], fetchGasPrice, {
staleTime: 30000 // Cache for 30 seconds
});
// Transaction handler is instant
const handleTransaction = () => {
sendTransaction({
gasPrice,
// ... other pre-loaded data
});
};
Sample cross app wallet flow
Example of the upgrade modal
const executeBatchWithAuthorization = (txClauses: Connex.VM.Clause[]) => {
const toArray: string[] = [];
const valueArray: string[] = [];
const dataArray: string[] = [];
txClauses.forEach((clause) => {
toArray.push(clause.to ?? '');
valueArray.push(String(clause.value));
if (typeof clause.data === 'object' && 'abi' in clause.data) {
dataArray.push(encodeFunctionData(clause.data));
} else {
dataArray.push(clause.data || '0x');
}
});
const dataToSign = {
domain: {
name: 'Wallet',
version: '1',
chainId,
verifyingContract, // the smart account of the user
},
types: {
ExecuteBatchWithAuthorization: [
{ name: 'to', type: 'address[]' },
{ name: 'value', type: 'uint256[]' },
{ name: 'data', type: 'bytes[]' },
{ name: 'validAfter', type: 'uint256' },
{ name: 'validBefore', type: 'uint256' },
{ name: 'nonce', type: 'bytes32' },
],
EIP712Domain: [
{ name: 'name', type: 'string' },
{ name: 'version', type: 'string' },
{ name: 'chainId', type: 'uint256' },
{ name: 'verifyingContract', type: 'address' },
],
},
primaryType: 'ExecuteBatchWithAuthorization',
message: {
to: toArray,
value: valueArray,
data: dataArray,
validAfter: 0,
validBefore: Math.floor(Date.now() / 1000) + 60, // e.g. 1 minute from now
nonce: ethers.hexlify(ethers.randomBytes(32)), // nonce needs to be random
},
};
// Sign the typed data with Privy
const signature = (
await signTypedDataPrivy(typedData, {
uiOptions: {
title,
description,
buttonText,
},
})
).signature;
// Rebuild the clauses to call the executeBatchWithAuthorization
const clauses = [];
clauses.push(
Clause.callFunction(
Address.of(smartAccount.address),
ABIContract.ofAbi(SimpleAccountABI).getFunction(
'executeBatchWithAuthorization',
),
[
typedData.message.to,
typedData.message.value?.map((val) => BigInt(val)) ?? 0,
typedData.message.data,
BigInt(typedData.message.validAfter),
BigInt(typedData.message.validBefore),
typedData.message.nonce, // If your contract expects bytes32
signature as `0x${string}`,
],
),
);
//Now you can broadcast the transaction to the blockchain with one of your delegator wallets
// ...
};
Legal Docs Modal
Legal Docs Summary View
| Option | Type | Required | Description |
|---|---|---|---|
allowAnalytics | boolean | No | If true, prompts users with an optional tracking policy. |
cookiePolicy | array | No | One or more cookie policy versions. |
privacyPolicy | array | No | One or more privacy policy versions. |
termsAndConditions | array | No | One or more T&C versions. |
Privy/YourApp/Users/All Users/Add
One common issue, solvable by installing Chakra and defining <ColorModeScript />
@layer vechain-kit, host-app;
@layer host-app {
body {
/* Your body styles */
}
.your-components {
/* Component styles */
}
}
@layer host-app {
/* Fix image borders */
img {
border-style: solid !important;
}
/* Ensure body styles persist */
html body {
background: var(--your-bg);
font-family: var(--your-font);
}
}
<VeChainKitProvider
feeDelegation={{
delegatorUrl: process.env.NEXT_PUBLIC_DELEGATOR_URL,
delegateAllTransactions: false
}}
// ... other config
>
<App />
</VeChainKitProvider>
// Load data when component mounts or when form changes
const { data: gasPrice } = useQuery(['gasPrice'], fetchGasPrice, {
staleTime: 30000 // Cache for 30 seconds
});
// Transaction handler is instant
const handleTransaction = () => {
sendTransaction({
gasPrice,
// ... other pre-loaded data
});
};
{imageMetadata.description}
{imageMetadata.attributes?.map((attr, index) => (