Wiring Up the React Front-End 🔌

Ready to make your UI come alive? Let's install the official VeChain tools! 🛠️

First, we need the core and network SDKs. These are optimized for VeChain's unique features like fee delegation and the dual-token model.

npm install @vechain/sdk-core @vechain/sdk-network

Next, we tell our app where the blockchain lives. For testing, we use the Testnet URL.

const thorClient = ThorClient.at('https://testnet.vechain.org');
Almost there! Now we load our contract into the app using the Address and ABI we found in Lesson 1.
const contract = thorClient.contracts.load(
    Address.of('YOUR_CONTRACT_ADDRESS'),
    ABIContract.ofAbi(YOUR_ABI_OBJECT)
);

const thorClient = ThorClient.at('https://testnet.vechain.org');
Almost there! Now we load our contract into the app using the Address and ABI we found in Lesson 1.
const contract = thorClient.contracts.load(
    Address.of('YOUR_CONTRACT_ADDRESS'),
    ABIContract.ofAbi(YOUR_ABI_OBJECT)
);

const thorClient = ThorClient.at('https://testnet.vechain.org');
Almost there! Now we load our contract into the app using the Address and ABI we found in Lesson 1.
const contract = thorClient.contracts.load(
    Address.of('YOUR_CONTRACT_ADDRESS'),
    ABIContract.ofAbi(YOUR_ABI_OBJECT)
);

Nice! You can now use this contract instance to send transactions or fetch live data. You've officially bridged the gap between Hardhat and React!

Common Pitfalls to Avoid: Don't forget to use the correct network URL (Testnet vs. Mainnet) and ensure you are passing the actual ABI object to the SDK.