Build Your First dApp on CrossFi: Part 2

In Part 1, we focused on smart contract development, creating the foundation for our dApp. Now, in Part 2, we’ll set up the frontend project to interact with the smart contract using React, Reown AppKit, and TailwindCSS.

Step 1: Setting up the Frontend Project

Initialize React Project:

npm create vite@latest buy-me-a-coffee

cd buy-me-a-coffee

Install Dependencies:
- Install Reown, ethers.js, React Icons

    npm install @reown/appkit @reown/appkit-adapter-ethers ethers react-icons

TailwindCSS:

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

If you’re new to TailwindCSS, follow this guide.

Step 2: Organizing the Project Structure

Create a clear folder structure within the src/ directory.

Final Folder Structure:

src/  

├── components/  

│   ├── Header.jsx  

│   ├── BuyCoffeeForm.jsx  

│   └── MemoList.jsx  

├── config/  

│   └── connection.js  

├── App.jsx  

└── main.js

Step 3: Reown Configuration

Create AppKit Project

Go to the Reown Dashboard and create an AppKit project.
Generate a projectId and save it in your .env file as:
VITE_APPKIT_PROJECT_ID=YOUR_PROJECT_ID

Configure connection.js

Add the following code to src/config/connection.js to set up the dApp to work with CrossFi Testnet:

import { createAppKit } from "@reown/appkit/react";

import { EthersAdapter } from "@reown/appkit-adapter-ethers";

import { defineChain } from "@reown/appkit/networks";

// 1. Get projectId

const projectId = import.meta.env.VITE_APPKIT_PROJECT_ID;

// Define CrossFi Testnet

const crossFiTestnet = defineChain({

  id: 4157,

  caipNetworkId: "eip155:4157",

  chainNamespace: "eip155",

  name: "CrossFi Testnet",

  nativeCurrency: {

    decimals: 18,

    name: "XFI",

    symbol: "XFI",

  },

  rpcUrls: {

    default: {

      http: ["https://rpc.testnet.ms"],

    },

  },

  blockExplorers: {

    default: {

      name: "XFI Scan",

      url: "https://test.xfiscan.com",

    },

  },

});


// Set the networks

const networks = [crossFiTestnet];


// Metadata for the dApp

const metadata = {

  name: "Buy Me a Coffee",

  description: "Support creators by buying them coffee with XFI",

  url: "https://mywebsite.com",

  icons: ["https://avatars.mywebsite.com/"],

};


// Initialize AppKit

createAppKit({

  adapters: [new EthersAdapter()],

  networks,

  chainImages: {

    [crossFiTestnet.id]:

      "https://s2.coinmarketcap.com/static/img/coins/64x64/26202.png",

  },

  metadata,

  projectId,

  allWallets: "SHOW",

  defaultNetwork: crossFiTestnet,

  enableEIP6963: true,

  themeMode: "dark",

  themeVariables: {

    "--w3m-accent": "#F29F05",

    "--w3m-border-radius-master": "1px",

  },

  features: {

    analytics: true,

    legalCheckbox: true,

  },

});

Add this import to the top of your src/App.jsx file:

import "./config/connection";

Next Steps

Wallet Connector: Set up the Header.jsx component for wallet integration.
Buy Coffee Form: Create the BuyCoffeeForm.jsx component to handle purchases.
Memo Display: Implement the MemoList.jsx component to show messages and memos from the blockchain.

Here’s the code for Header.jsx:

import React from "react";

const Header = () => {

  return (

    <header className="bg-blue-300 text-white py-4 px-6">

      <div className="container mx-auto flex justify-between items-center">

        <h1 className="text-2xl font-bold">Buy Me a Coffee</h1>

        <appkit-button size="md" />

      </div>

    </header>

  );

};

export default Header;

Update App.jsx to Use Header

import "./config/connection";
import Header from "./components/Header";
import React, { useState } from "react";
const App = () => {
  return (
    <>
      <Header />

      <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center">

        <h1 className="text-4xl font-bold text-gray-800 mb-6">

          Buy Me a Coffee 
        </h1>
      </div>
    </>
  );
};
export default App;

Run the Application Start your project:

npm run dev.

You should have something like this:

Summary

In this guide, we initialized a Vite React project, integrated Reown AppKit for seamless wallet connection, and configured CrossFi Testnet. Up next, we’ll implement the BuyCoffeeForm.jsx and MemoList.jsx components. Stay tuned!

Build your first dApp on CrossFi: Part 2

Table of contents