Welcome to the Base quickstart guide! In this walkthrough, we’ll create a simple onchain app from start to finish. Whether you’re a seasoned developer or just starting out, this guide has got you covered.

​
What You’ll Achieve

By the end of this quickstart, you’ll have built an onchain app by:

  • Configuring your development environment
  • Deploying your smart contracts to Base
  • Interacting with your deployed contracts from the frontend

Our simple app will be an onchain tally app which lets you add to a total tally, stored onchain, by pressing a button.

Why Base?

Base is a fast, low-cost, builder-friendly Ethereum L2 built to bring the next billion users onchain. By following this guide, you’ll join a vibrant ecosystem of developers, creators, and innovators who are building a global onchain economy.

​
Set Up Your Development Environment

1

Bootstrap with OnchainKit

OnchainKit is a library of ready-to-use React components and Typescript utilities for building onchain apps. Run the following command in your terminal and follow the prompts to bootstrap your project.

Terminal
npm create onchain@latest

The prompots will ask you for a CDP API Key which you can get here.

Once you’ve gone through the prompts, you’ll have a new project directory with a basic OnchainKit app. Run the following to see it live.

Terminal
cd my-onchainkit-app
npm install
npm run dev

You should see the following screen.

OnchainKit Template

Once we’ve deployed our contracts, we’ll add a button that lets us interact with our contracts.

2

Install and initialize Foundry

The total tally will be stored onchain in a smart contract. We’ll use the Foundry framework to deploy our contract to the Base Sepolia testnet.

  1. Create a new “contracts” folder in the root of your project
Terminal
mkdir contracts && cd contracts
  1. Install and initialize Foundry
Terminal
curl -L https://foundry.paradigm.xyz | bash
foundryup
forge init --no-git

Open the project and find the Counter.sol contract file in the /contracts/src folder. You’ll find the simple logic for our tally app.

—no-git

Because contracts is a folder in our project, we don’t want to initialize a separate git repository for it, so we add the --no-git flag.

3

Configure Foundry with Base

To deploy your smart contracts to Base, you need two key components:

  1. A node connection to interact with the Base network
  2. A funded private key to deploy the contract

Let’s set up both of these:

  • Create a .env file in your contracts directory and add the Base and Base Sepolia RPC URLs
contracts/.env
BASE_RPC_URL="https://mainnet.base.org"
BASE_SEPOLIA_RPC_URL="https://sepolia.base.org"

-Load your environment variables

Terminal
source .env

Base Sepolia

Base Sepolia is the test network for Base, which we will use for the rest of this guide. You can obtain free Base Sepolia ETH from one of the faucets listed here.

4

Secure your private key

A private key with testnet funds is required to deploy the contract. You can generate a fresh private key here.

  1. Store your private key in Foundry’s secure keystore
Terminal
cast wallet import deployer --interactive
  1. When prompted enter your private key and a password.

Your private key is stored in ~/.foundry/keystores which is not tracked by git.

Never share or commit your private key. Always keep it secure and handle with care.

​
Deploy Your Contracts

Now that your environment is set up, let’s deploy your contracts to Base Sepolia. The foundry project provides a deploy script that will deploy the Counter.sol contract.

1

Run the deploy script

  1. Use the following command to compile and deploy your contract
Terminal
forge create ./src/Counter.sol:Counter --rpc-url $BASE_SEPOLIA_RPC_URL --account deployer

Note the format of the contract being deployed is <contract-path>:<contract-name>.

2

Save the contract address

After successful deployment, the transaction hash will be printed to the console output

Copy the deployed contract address and add it to your .env file

COUNTER_CONTRACT_ADDRESS="0x..."
3

Load the new environment variable

Terminal
source .env
4

Verify Your Deployment

To ensure your contract was deployed successfully:

  1. Check the transaction on Sepolia Basescan.
  2. Use the cast command to interact with your deployed contract from the command line
cast call $COUNTER_CONTRACT_ADDRESS "number()(uint256)" --rpc-url $BASE_SEPOLIA_RPC_URL

This will return the initial value of the Counter contract’s number storage variable, which will be 0.

Congratulations! You’ve deployed your smart contract to Base Sepolia!

Now lets connect the frontend to interact with your recently deployed contract.

​
Interacting with your contract

To interact with the smart contract logic, we need to submit an onchain transaction. We can do this easily with the Transaction component. This is a simplified version of the Transaction component, designed to streamline the integration process. Instead of manually defining each subcomponent and prop, we can use this shorthand version which renders our suggested implementation of the component and includes the TransactionButton and TransactionToast components.

1

Add the Transaction component

Lets add the Transaction component to our page.tsx file. Delete the existing content in the main tag and replace it with the snippet below.

page.tsx
// @noErrors: 2307 - Cannot find module '@/calls'
import { Transaction } from '@coinbase/onchainkit/transaction';
import { calls } from '@/calls';

<main className="flex flex-grow items-center justify-center">
  <div className="w-full max-w-4xl p-4">
    <div className="mx-auto mb-6 w-1/3">
      <Transaction calls={calls} />
    </div>
  </div>
</main>;
2

Defining the contract calls

In the previous code snippet, you’ll see we imported calls from the calls.ts file. This file provides the details needed to interact with our contract and call the increment function. Create a new calls.ts file in the same folder as your page.tsx file and add the following code.

calls.ts
const counterContractAddress = '0x...'; // add your contract address here
const counterContractAbi = [
  {
    type: 'function',
    name: 'increment',
    inputs: [],
    outputs: [],
    stateMutability: 'nonpayable',
  },
] as const;

export const calls = [
  {
    address: counterContractAddress,
    abi: counterContractAbi,
    functionName: 'increment',
    args: [],
  },
];

Contract Address

The calls.ts file contains the details of the contract interaction, including the contract address, which we saved in the previous step.

3

Testing the component

Now, when you connect a wallet and click on the Transact button and approve the transaction, it will increment the tally onchain by one.

We can verify that the onchain count took place onchain by once again using cast to call the number function on our contract.

Terminal
cast call $COUNTER_CONTRACT_ADDRESS "number()(uint256)" --rpc-url $BASE_SEPOLIA_RPC_URL

If the transaction was successful, the tally should have incremented by one!

We now have a working onchain tally app! While the example is simple, it illustrates the end to end process of building on onchain app. We:

  • Configured a project with frontend and onchain infrastructure
  • Deployed a smart contract to Base Sepolia
  • Interacted with the contract from the frontend

​
Further Improvements

This is just the beginning. There are many ways we can improve upon this app. For example, we could:

  • Make the increment transaction gasless by integrating with Paymaster
  • Improve the wallet connection and sign up flow with the WalletModal component
  • Add onchain Identity so we know who added the most recent tally