A guide to building a next.js app on Base using OnchainKit
Bootstrap with OnchainKit
Install and initialize Foundry
Counter.sol
contract file in the /contracts/src
folder. You’ll find the simple logic for our tally app.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.Configure Foundry with Base
.env
file in your contracts
directory and add the Base and Base Sepolia RPC URLsSecure your private key
~/.foundry/keystores
which is not tracked by git.Run the deploy script
<contract-path>:<contract-name>
.Save the contract address
.env
fileLoad the new environment variable
Verify Your Deployment
cast
command to interact with your deployed contract from the command linenumber
storage variable, which will be 0
.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.
Add the Transaction component
Transaction
component to our page.tsx
file. Delete the existing content in the main
tag and replace it with the snippet below.Defining the contract calls
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
file contains the details of the contract interaction, including the contract address, which we saved in the previous step.Testing the component
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.increment
transaction gasless by integrating with Paymaster