Documentation Request: How to update smart contract and frontend code about build-onchain-apps

[kyhyco]

We are investing how to improve the developer workflow around updating smart contracts and frontend code.

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

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

# 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!