IV. App's Frontend

The DApp Kit

Unlike Ethereum app frontends, which often use web3.js or Ethers.js, on VeChain we have the DApp Kit to simplify app development.

The DApp Kit provides React hooks and components for connecting to VeChain wallets and sending transactions. You will leverage these to avoid dealing with low-level details.

The frontend you will build for this lesson will be composed of a few main components:

1. Connect Wallet (provided by DApp kit UI): Allows the user to choose VeWorld and connect their wallet.

2. BuyCoffee Component: A form/modal where a user enters their name, a message, and an amount of VET to tip the owner.

3. SendCoffee Component: A form to send a coffee to someone else by entering a recipient address (plus name, message, and amount).

4. TransactionHistory Component: Displays the list of all coffee sales (with names, messages, amounts, timestamps) by reading from the contract.

You will integrate the contract’s address and ABI into the app so that the frontend knows how to call the contract’s functions and decode its data.

Before you start with this part of the course, there are four key elements required:

1. Frontend framework knowledge: Basic familiarity with React and JavaScript/TypeScript is assumed. You’ll be using React with hooks and a functional component style.

2. Node.js environment: Ensure you have Node and npm/yarn to run the React app.
   
   

3. Navigate to apps/frontend to launch the app's front end:

   cd apps/frontend
   npm run dev

   
   All the dependencies should be installed at this stage. Otherwise, revisit I. Getting started with your first VeChain app to make sure you didn't skip any steps.

Your contract will automatically be included in packages/config-contract/config.ts. This ensures your front-end is interacting with your smart contract.

> @repo/fe@0.0.0 dev
> vite

  VITE v6.2.1  ready in 6329 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open your localhost in your preferred browser (make sure you have the VeWorld wallet extension installed) and you'll be ready to interact with your first app.