How to Build an Onchain Dapp on Base

Hey there, Buidlers! If you've been thinking about diving into the world of on-chain dapps, you've come to the right place.

In this guide, we'll walk you through building an on-chain dapp on the Base chain, starting from scratch.

Whether you're a seasoned developer or just getting started, we'll break it down in an easy-to-follow way. If this is your first time deploying a smart contract on Base, we suggest starting with this guide.

Let's get started!

By the end of this guide, you'll be able to:

1. Understand the role of wallet aggregators in on-chain apps.
2. Evaluate the benefits and drawbacks of using app templates.
3. Integrate wallet connections into a standard app template.
4. Create an NFT collection and mint new NFTs using Thirdweb.
5. Develop an NFT gallery app using a prebuilt Thirdweb template.
6. Deploy a Next.js app using the Coinbase Smart Wallet on Fleek.
7. Integrate with GitHub for Continuous Integration/Continuous Deployment (CI/CD).

1. Building the Basics: Setting Up Your Next.js App

First things first, let's set up a basic Next.js app. We'll use Next.js 13, a popular React framework, as our starting point.

Run the following command to create a new Next.js app:

npx create-next-app@latest --use-yarn

During the setup, you'll be prompted to make a few choices. Here's what we recommend:

• Use Typescript? Yes
• Use ESLint? Yes
• Use Tailwind? Your preference
• Use src/ directory? Yes
• Use App Router? Yes
• Customize the default import alias? No

This script will set up a basic Next.js app with TypeScript and Tailwind CSS (if you choose to use it). Once the setup is complete, run the app to make sure everything's working:

yarn dev

2. Manually Installing RainbowKit, Wagmi, and Viem

Now that we have our basic app set up, it's time to add some onchain magic. For this, we'll use RainbowKit, Wagmi, and Viem. These libraries make it super easy to interact with the blockchain from your React app.

Install the dependencies with:

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

3. Adding Imports, Connectors, Config

With our dependencies installed, we need to set up our blockchain provider context. In Next.js 14, the root of your app is found in app/layout.tsx. However, we need to separate the client-side logic into a different file due to Next.js's server-client separation.

Create a new file in the app folder called providers.tsx and add the following code:

4. Using Your New Providers

Next, we need to use our newly created Providers component in layout.tsx to wrap the entire application. This will ensure that the blockchain provider context is available throughout your app.

Update layout.tsx to look like this:

You can customize the ConnectButton as needed. For instance, if you don't want to display the user's balance, you can disable it like this:
 

5. Adding the Connect Button

With everything set up, it's time to add a Connect Button to your app. This button will allow users to connect their wallets to your app.

Open page.tsx and import the ConnectButton component:

You can customize the ConnectButton as needed. For instance, if you don't want to display the user's balance, you can disable it like this:

Before We Dive In: What Do You Need?

Before we dive in, there are a couple of things you'll need to set up:

1. Setting Up a Coinbase Wallet: To interact with the blockchain, you'll need a Web3 wallet. We recommend using the Coinbase Wallet, which can be easily created by downloading the Coinbase Wallet browser extension.

2. Wallet Funding: To deploy smart contracts, you'll need to cover gas fees. For this tutorial, we'll use the Base Sepolia test network. You can get Base Sepolia ETH from one of the faucets listed on the Base Network Faucets page.

    

Let's start by creating an NFT collection using Thirdweb. This collection will serve as the foundation for our NFT gallery app.

Steps to Create an NFT Collection:

1. Visit the Thirdweb Dashboard: Go to the Thirdweb dashboard and click the "Connect Wallet" button in the upper right corner to connect your wallet.
    
2. Browse Contracts: Click on "Browse contracts" to explore a list of deployable smart contracts.
    
3. Select NFT Collection: Navigate to the NFTs section and select the "NFT Collection" smart contract.
    
4. Deploy the Contract: Click "Deploy now" and provide the required details for your NFT collection:
    
   • Contract metadata (image, name, symbol, description)
      
   • Network: Choose Base Sepolia Testnet
      

   • Click "Deploy Now"
     
     
      
     Source

5. Minting NFTs:

   1. After deployment, go to the Thirdweb dashboard and select "View contracts" to see your deployed contracts.
   2. Select the NFT Collection contract and navigate to the "NFTs" tab.
   3. Click "Mint" to create a new NFT by filling in the metadata details (name, media, description, properties) and click "Mint NFT".
   4. Repeat to mint as many NFTs as you'd like.

   
   

   Source

    

Building an NFT Gallery App

With your NFT collection set up, it's time to build an NFT gallery app to display your NFTs. We'll use the Thirdweb CLI to generate a new app project using the NFT Gallery template.
 

Steps to Build the NFT Gallery App:
 

Create the App: Run the following command to generate a new app project:

npx thirdweb create --template nft-gallery

 Update Configuration: The template is configured for the Ethereum Mainnet by default. We'll update it to work with the Base Sepolia Testnet.

1. Open the project in your preferred code editor.
2. Open the src/consts/parameters.ts file and update:
   1. contractAddress: Your NFT collection's contract address (found on the Thirdweb dashboard).
   2. chain: base-sepolia.
   3. blockExplorer: https://sepolia.basescan.org.
3. Open src/main.tsx and replace the content with the following code:

Running the Application: To view your NFT collection in the app, start the application by running:

yarn dev

Now that you're done building an onchain dapp on Base, it's about time we deploy it.

Fleek aims to address this by providing a fast and trustless Content Delivery Network (CDN) through the Fleek Network.

Let’s guide you through deploying a site built with the "An Onchain App in 100 Components" template using Fleek.

Prerequisites

• Next.js: Familiarity with Next.js is helpful but not required.
   

• Onchain Apps: Basic knowledge of deploying apps and connecting to smart contracts is assumed. For a primer, check out the "Building an Onchain App" tutorial on Base Learn.
   

  Setting up the Template
   

• If you haven't already set up an app based on the template, follow these steps:
   
• Clone the Template Repository:
  • Go to the "An Onchain App in 100 Components" template, click the green "Use this template" button, and create a new repository.
     
  • Clone the repository and open it in your code editor.

• Install Dependencies:

  • If you don't have bun installed, install it using the following command:
     

  curl -fsSL https://bun.sh/install | bash
   

• Install the necessary packages:
  
  bun i
   
• Run the Next.js app:
  
  bun run dev
   

• Verify the app is running by navigating to localhost:3000 and then shut down the server.
   

   

Installing and Configuring Fleek

Fleek requires static pages, so you'll need to adjust your build process to produce them:

1. Update next.config.js:
   • In your project, open next.config.js and modify it as follows:
     
     
      
   • Save and close the file.
      
   • Run bun run build and confirm that an out directory is created.
      
2. Set Up Fleek Account:
   1. Go to Fleek's website, create an account or log in if you have one.
       
   2. Click "First Project" (you can rename it later if needed).
       
3. Link Fleek to GitHub:
   1. Click "Add New" in the upper right corner, then select "Deploy My Site".
       
   2. Choose your code location, log into your Git provider, and install the Fleek app.
       
   3. Grant permissions to the repository you want to deploy.
       
4. Configure Site on Fleek:
   1. In the Configure Site window, ensure the following:
      1. Site Name: Your site's name
      2. Framework: Next.js
      3. Branch: main
      4. Publish Directory: out
      5. Build Command: npm install && npm run build
   2. Click "Deploy Site". An initial deploy may fail—this is expected.
       
5. Install Fleek CLI:

   1. Open a terminal and install the Fleek CLI:

      npm install -g @fleek-platform/cli

   2. Log in to Fleek:

      fleek login
   3. Confirm your login through the provided web link.
       
6. Initialize and Link Site with Fleek:

   1. In your project directory, run:

      fleek sites init

       

   2. Select your project and existing site from the list.
       
7. Configure Deployment Settings:
   1. Specify the directory containing the site files (out).
       
   2. Include the optional "build" command (npm install && npm run build).
       
   3. Select JSON for the configuration file (fleek.config.json).
       

Deployment

Deploying your site can be triggered automatically through CI/CD.

1. Automatic Deployment:
   • Make a change in your project, such as editing src/app/page.tsx.
      
   • Commit and push your changes to GitHub.
      
2. Confirm Deployment on Fleek Dashboard:
   • Go to your Fleek dashboard, click on the "Sites" tab, and open your site's details.
      
   • Monitor the deployment status in the "Deploys" tab.
      

And there you have it! You've just built the foundation of an onchain app on Base. This guide walked you through setting up a Next.js app, manually installing necessary libraries, and adding a wallet connection. You also learned how to get templates from Thirdweb and integrate them into your app, as well as how to deploy your app using Fleek. Now, you can customize and expand your app as needed.

When you're ready to launch on mainnet, make sure to audit your smart contracts to ensure security and reliability. Whether you're building a full-fledged dApp or just exploring the possibilities of Web3, remember that the community and resources available are immense. Don't hesitate to reach out, ask questions, and keep experimenting!

Happy building!