Quickstart

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.

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.

cd my-onchainkit-app
npm install
npm run dev

You should see the following screen.

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

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

mkdir contracts && cd contracts

2. Install and initialize Foundry

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.

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

BASE_RPC_URL="https://mainnet.base.org"
BASE_SEPOLIA_RPC_URL="https://sepolia.base.org"

-Load your environment variables

source .env

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

cast wallet import deployer --interactive

2. When prompted enter your private key and a password.

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

1. Use the following command to compile and deploy your contract

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>.

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..."

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.

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

import { TransactionDefault } 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">
      <TransactionDefault calls={calls} />
    </div>
  </div>
</main>;

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.

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: [],
  },
];

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.

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!