Get Prepared

VeStation In-App Staking Integration Guide

This document provides guidance for integrating VeStation's B3TR staking functionality into third-party applications. Follow these instructions to allow your users to stake B3TR tokens, withdraw their staked tokens, and claim rewards directly within your application.

Prerequisites and Dependencies

Before you start integrating, make sure you have the following dependencies and configurations in place:

Required Dependencies

{
  "dependencies": {
    "@vechain/connex": "^2.0.0",
    "@vechain/dapp-kit-react": "^1.0.0",
    "lodash.find": "^4.6.0",
    "bignumber.js": "^9.0.0"
  }
}

Note: For the latest versions and detailed documentation, refer to the VeChain Developer Documentation.

ABI Files

You need to obtain and include two essential ABI files:

1. ERC20.json - Standard ERC20 token interface

2. VeDelegateV2.json - VeDelegate contract interface with staking functions

3KB

VeDelegateV2.json

DApp Kit Initialization

The VeStation integration relies on the VeChain DApp Kit for React. Set up your application following these steps:

1. WalletConnect Configuration (Optional)

If you want to support WalletConnect for improved wallet connectivity:

import type { WalletConnectOptions } from '@vechain/dapp-kit-react';

const walletConnectOptions: WalletConnectOptions = {
    // Create your project ID at: https://cloud.walletconnect.com/sign-up
    projectId: '<YOUR_PROJECT_ID>', 
    metadata: {
        name: 'My dApp',
        description: 'B3TR Staking Application',
        // Your app URL
        url: window.location.origin, 
        // Your app Icon
        icons: [`${window.location.origin}/images/app-icon.png`], 
    },
};

2. Setting up DAppKitProvider

For React applications, wrap your app with the DAppKitProvider:

import { DAppKitProvider } from '@vechain/dapp-kit-react';

function App() {
  return (
    <DAppKitProvider
      // REQUIRED: The URL of the node you want to connect to
      nodeUrl="https://mainnet.vechain.org/"
      // OPTIONAL: Required if you're not connecting to the main net
      // For testnet, use: genesis="test" with nodeUrl="https://testnet.vechain.org/"
      genesis="main"
      // OPTIONAL: Whether 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 (DEBUG, INFO, WARN, ERROR)
      logLevel="INFO"
      // OPTIONAL: theme mode 'LIGHT' or 'DARK'
      themeMode="LIGHT"
      // OPTIONAL: where to render the modal, document.body is the default
      modalParent={document.body}
      // OPTIONAL: you can choose which wallets to allow (defaults to all)
      allowedWallets={['veworld', 'wallet-connect', 'sync2']}
    >
      {/* Your application components */}
    </DAppKitProvider>
  );
}

3. Add Wallet Button to Your UI

import { WalletButton, useWallet } from '@vechain/dapp-kit-react';

const StakingComponent = () => {
  const { account, source } = useWallet();
  
  return (
    <div>
      <WalletButton />
      {account && (
        <div>Connected: {account}</div>
        // Your staking interface here
      )}
    </div>
  );
};

For more detailed information on initializing and using the DApp Kit, refer to the official VeChain DApp Kit documentation.

Network Configuration

Access the VeChain network using the Connex instance obtained from the DApp Kit:

import { useConnex, useWallet } from "@vechain/dapp-kit-react";

// In your React component
const StakingComponent = () => {
  const connex = useConnex();
  const { account } = useWallet();
  
  // Now you can use connex to interact with the blockchain
  // and account to identify the connected user
};

Important: Make sure to adjust the configuration based on your target environment (mainnet or testnet). The contract addresses provided in this document are for the mainnet environment.

Constants

// Contract Address
const VEDELEGATE_CONTRACT_ADDRESS = "0x90e594903df44171c62e93969c576c109f949ee5";

// Token Configuration
const TOKEN_B3TR = {
  symbol: "B3TR",
  decimals: 18,
  address: "0x5ef79995FE8a89e0812330E4378eB2660ceDe699"
};

Note: These addresses are for the production environment. Always verify the contract addresses before deployment to ensure they match the current environment.

React Integration

All examples in this document are for React environments. You'll need to use the connex instance from the useConnex() hook, and the user account address from the useWallet() hook:

import { useConnex, useWallet } from "@vechain/dapp-kit-react";

const connex = useConnex();
const { account } = useWallet();

Note: Ensure that your application has properly set up the VeChain dApp Kit. For initialization instructions, refer to the @vechain/dapp-kit-react documentation.