Build Onchain Apps Toolkit (⛵️)

Accelerate your onchain creativity with the Build Onchain Apps Toolkit. ☕️

Build Onchain Apps Toolkit (aka BOAT ⛵️) will help you save 6+ weeks of initial onchain app setup and eliminate the hassle of integrating onchain components with web2 infrastructure. 🌊

We do this by taking an opinionated approach to streamlining early decisions you must make when building an onchain app.

Whether you're a hackathon participant or an ambitious entrepreneur looking to build the next big thing, this toolkit is designed with you in mind. 💙

Out of the box 🧰 🧙 ✨

Progressive Web App support using Next.js 🏗️
Ethereum L2 support through Base 🔵
Wallet connect integration with RainbowKit 🌈
Live examples and documentation for Minting and Payments experiences with wagmi and Viem 🚀
Latest styling best practices with Tailwind CSS 💅
Easy maintenance with linting, formatting, and tests ✅
Insights into Web Vitals performance metrics with Perfume.js 📈
Smart contract deployment with Foundry ☁️
Support for a local testnet node for testing smart contracts using Anvil. 🧪

Getting Started

To get started building with BOAT, follow this step-by-step guide. You'll be able to explore the pre-configured contracts and experiment with them.

Step 1: Kick off your onchain app

npx @coinbase/build-onchain-apps@latest create

Step 2: Set Wallet Connect Project ID

Create a .env.local file

cp .env.local.default .env.local

Next, obtain Wallet Connect Project ID from walletconnect.com and assign to the .env.local file. We leverage WalletConnect to allow end-users to connect their wallets to your site.

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE

Step 3: Install and Run your onchain app

# cd into your new project folder
cd [app-name]

# Install dependencies
yarn

# Run onchain app
yarn dev

Congrats ✨, Time to enjoy your onchain app with some coffee ☕️

Deploy your own contracts

Step 1: Kick start your contracts

# Install Foundry

curl -L https://foundry.paradigm.xyz | bash
foundryup

Follow the instructions of foundryup to completely setup foundry

Step 2: Build, test and format the sample contracts

cd contracts

# Install dependencies
forge install

# Build
forge build

Step 3: Deploy contracts to Base Sepolia

Create a .env file using the .env.example file provided in your contracts folder and add your private key. Make sure to add a 0x in front of your key to convert it to a hex string. Note: Get an API key from here for Base Sepolia by creating an account

source .env

forge script script/BuyMeACoffee.s.sol:BuyMeACoffeeScript --broadcast --verify --rpc-url base_sepolia
forge script script/SignatureMintERC721.s.sol:SignatureMintERC721Script --broadcast --verify --rpc-url base_sepolia

Note: The above command will print the address of your contract and a link to the block explorer. Click on the block explorer link to verify whether your contract has been deployed or not.

For more information on contracts, visit here

For a Live demo use

Stackblitz

Do you need gas for Base Sepolia? 🔵

Learn how you can obtain free testnet funds here: https://docs.base.org/tools/network-faucets/.

Contributing ☕️

Read below to learn how you can take part in improving Build Onchain Apps Toolkit.

Code of Conduct

Contributing Guide

Develop

To build and test either the CLI or the main App, start by cloning the repo.

# Clone the repo
git clone https://github.com/coinbase/build-onchain-apps.git

Develop the App

# Go to main application
cd template

# Install and run latest template
yarn
yarn dev

Develop the CLI

# From the root repo
# Install and build latest dependencies
yarn
yarn build

# Link the local package to the global npm registry
npm link

# Test CLI using the local package
build-onchain-apps create

# After testing, unlink the package from the global npm registry
npm unlink @coinbase/build-onchain-apps
npm uninstall -g @coinbase/build-onchain-apps