Accelerate your onchain creativity with the Build Onchain Apps Template. ☕️
Build Onchain Apps Template (aka BOAT ⛵️) will help you save weeks of initial app setup and 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 template is designed with you in mind. 💙
Out of the box 🧰 🧙 ✨
- Progressive Web App support using Next.js 🏗️
- Ethereum L2 support through Base 🔵
- Easy account creation with Smart Wallet
- 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. 🧪
- Obtain a Base RPC URL from Coinbase Developer Platform and assign to the
.env.localfile
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE# Install
yarn
# Run
yarn devTo format and lint the package locally use these quick steps.
# Format fix
yarn format
# Lint fix
yarn lintAfter you create a project using BOAT, these are the folders and files you are interested in when updating a smart contract: Using BuyMeACoffee smart contract as an example below
<project-name>
├── contracts
│ ├── src
│ │ └── BuyMeACoffee.sol ← smart contract code
│ └──out/BuyMeACoffee.sol
│ └── BuyMeACoffee.json ← output from "forge build" which contains the updated ABI
│
└── web/app/buy-me-coffee
└── _contracts
├── BuyMeACoffeeABI.ts ← copy of ABI from contracts/out/BuyMeACoffee.json
└── useBuyMeACoffeeContract.ts ← deploy addressAfter updating your smart contract code, run forge build in the contracts folder. This will create a json in the contracts/out directory.
The output json contains additional information. We only need the abi property from that json object. Let's use jq to extract just the abi property
# from the "contract" folder
jq .abi out/BuyMeACoffee/BuyMeACoffee.jsonTake the output of jq and update web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts
Done with first step!
Make sure you got all the environment variables squared away in contracts/.env and get some base sepolia eth from a faucet!
To deploy your smart contract,
# from the "contract" folder
source .env && forge script script/LocalContract.s.sol:LocalContractScript --broadcast --rpc-url https://sepolia.base.orgIn the long output, find the value for Contract Address.
Copy that value and update web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts with the new address.
This is one of the more error prone steps. Take it step by step.
If you are new smart contract deployment, just try deploying the existing BuyMeACoffee contract and replace the contract address. After, try updating BuyMeACoffee.sol and get the new ABI in your frontend code.
We are thinking of ways to make this step easier in the future! Happy hacking!
Learn how you can obtain free testnet funds here: https://docs.base.org/tools/network-faucets/.
Check out the following places for more BOAT-related content:
- Follow @zizzamia (X, Farcaster) for project updates
- Join the discussions on our OnchainKit warpcast channel
- @zizzamia (X)
- @Sneh1999 (X)
- @wespickett (X)
- @mochikuan (X)
- @renanmav (X)
- @robpolak (X)
- @kyhyco
- @cnasc (warpcast)
- @arsood (X)
- @eragon512 (X)
This project is licensed under the MIT License - see the LICENSE.md file for details