base on Accelerate your onchain creativity with the Build Onchain Apps Template. ⛵️ <img src='./docs/logo-v-0-17.png' width='800' alt='Build Onchain Apps Template'> # [Build Onchain Apps Template (⛵️)](https://github.com/coinbase/build-onchain-apps/) > Accelerate your onchain creativity with the Build Onchain Apps Template. ☕️ [](https://github.com/coinbase/build-onchain-apps/graphs/contributors) [](https://github.com/coinbase/build-onchain-apps/stargazers) [](https://github.com/coinbase/build-onchain-apps/blob/main/LICENSE) <br /> **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](https://nextjs.org/) 🏗️ - Ethereum L2 support through [Base](https://base.org/) 🔵 - Easy account creation with [Smart Wallet](https://www.smartwallet.dev/why) - Live examples and documentation for Minting and Payments experiences with [wagmi](https://wagmi.sh/) and [Viem](https://viem.sh/) 🚀 - Latest styling best practices with [Tailwind CSS](https://tailwindcss.com/) 💅 - 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](https://book.getfoundry.sh/reference/anvil/). 🧪 <br > ## Getting Started #### Step 1: Setup Environment Variables - Obtain a Base RPC URL from [Coinbase Developer Platform](https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat) and assign to the `.env.local` file ```bash NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE ``` #### Step 2: Install and Run your onchain app ```bash # Install yarn # Run yarn dev ``` ## Develop To format and lint the package locally use these quick steps. ```bash # Format fix yarn format # Lint fix yarn lint ``` ## Updating ABI After 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_ ```bash <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 address ``` ### Importing updated ABI to frontend code After 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 ```bash # from the "contract" folder jq .abi out/BuyMeACoffee/BuyMeACoffee.json ``` Take the output of `jq` and update `web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts` Done with first step! ### Deploying your smart contract and updating frontend code 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, ```bash # from the "contract" folder source .env && forge script script/LocalContract.s.sol:LocalContractScript --broadcast --rpc-url https://sepolia.base.org ``` In 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. ## Outro 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! ## Do you need gas for Base Sepolia? 🔵 Learn how you can obtain free testnet funds here: https://docs.base.org/tools/network-faucets/. ## Community ☁️ 🌁 ☁️ Check out the following places for more BOAT-related content: - Follow @zizzamia ([X](https://twitter.com/zizzamia), [Farcaster](https://warpcast.com/zizzamia)) for project updates - Join the discussions on our [OnchainKit warpcast channel](https://warpcast.com/~/channel/onchainkit) ## Authors - [@zizzamia](https://github.com/zizzamia) ([X](https://twitter.com/Zizzamia)) - [@Sneh1999](https://github.com/Sneh1999) ([X](https://twitter.com/snoopies_eth)) - [@wespickett](https://github.com/wespickett) ([X](https://twitter.com/wespickett)) - [@mochikuan](https://github.com/mochikuan) ([X](https://twitter.com/mochikuan)) - [@renanmav](https://github.com/renanmav) ([X](https://twitter.com/renanmav)) - [@robpolak](https://github.com/robpolak) ([X](https://twitter.com/0xr0b_eth)) - [@kyhyco](https://github.com/kyhyco) - [@cnasc](https://github.com/cnasc) ([warpcast](https://warpcast.com/cnasc)) - [@arsood](https://github.com/arsood) ([X](https://twitter.com/arsood)) - [@eragon512](https://github.com/eragon512) ([X](https://twitter.com/eragon5121)) ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details ", Assign "at most 3 tags" to the expected json: {"id":"8085","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"