coinbase / build-onchain-apps

Accelerate your onchain creativity with the Build Onchain Apps Template. ⛵️

Build Onchain Apps Template (⛵️)

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. 🧪

Getting Started

To get started building with BOAT, just run our CLI, and you will be guided to have an Onchain App and running.

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

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

Build and deploy your own contracts

Check out the Contracts README

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/.

Community ☁️ 🌁 ☁️

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

Authors

• @zizzamia (X)
• @Sneh1999 (X)
• @wespickett (X)
• @mochikuan (X)
• @renanmav (X)
• @robpolak (X)
• @kyhyco
• @cnasc (warpcast)
• @arsood (X)
• @eragon512 (X)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

build-onchain-apps's Issues

Feature Request: Setup Dependabot alerts

Is your feature request related to a problem? Please describe.

https://docs.github.com/en/code-security/dependabot/dependabot-alerts/about-dependabot-alerts

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Internationalize All Text

Describe the solution you'd like

Now that BOAT is getting worldwide attention, it would be a good idea to set it up for success by configuring the platform to be ready for translated text.

This task would be to use the FormatJS library to configure BOAT to use internationalized text throughout the codebase.

Describe alternatives you've considered.

No response

Bug Bash Jan 2024

Time to catch some bugs and ideas for BOAT

Feature Request: integrate nx repo and changeset to publish CLI in npm

Is your feature request related to a problem? Please describe.

Allow publish packages inside of monorepo using changeset and current github actions

Describe the solution you'd like

Sounds changeset and nx repo is not compatible yet, there is some hack solution here.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Typescript import path

Describe the solution you'd like

Currently, frontend code doesn't use alias import path. For example,

import import Banner from '../../src/components/banner/banner';

Should we consider an alias to make the path more readable? Some examples:

import import Banner from '@template/components/banner/banner';

import import Banner from '@/components/banner/banner';

This will require modifying template/.tsconfig.json with the following compilerOptions

{
  "compilerOptions": {
    "paths": {
      "@template": [
        "src/*"
      ]
    }
  }
}

Describe alternatives you've considered.

If we want to be very fancy, we could ask the user to set the alias like how create-next-app does.

Feature Request: Allow create projects based on our templates using CLI

Is your feature request related to a problem? Please describe.

I should be able to create a new fresh project using the CLI

Describe the solution you'd like

build-onchain-apps create nft-marketplace

Describe alternatives you've considered

No response

Additional context

No response

Integrate CI lint and type check before merging PRs

Is your feature request related to a problem? Please describe.

I want to avoid sending code with lint issues in the main branch.

Describe the solution you'd like

Use github actions and integrate with pull requests.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Mint NFT UI Enhancements

Describe the solution you'd like

The UI for the mint flow should match the Figma. This ticket is for improving the UI and bringing it up to spec.

Describe alternatives you've considered.

No response

Feature Request: Simple Minting Interface

Describe the solution you'd like

Draft ..

While reviewing our NFT Minting pages it is clear we serve a fragmented and confusing experience. Ultimately, this complexity stalls new web3 builders and makes our examples incredibly hard to follow. My goals for simplifying the minting process are as follows:

0. (Table Stakes) Teach foundation concepts by integrating with an existing mint-able contract.
1. Start with a trivial minting experience with a bare-bones ERC721 contract.
2. Layer on complexity via progression thought the guide.. Start Simple and progress iteratively.
3. Structure our examples as components / building-blocks
4. Keep the UX simple, leave the complexity in code.

So what does this mean for our project? What am I suggesting? I suggest we refactor the NFT mint experience into three separate learning flows:

(Simple) Implementing a Mint Button on your Site

First, we walk builders through adding a mint button on their page. Draw inspiration from Open Minting Platforms like mint.fun

Focus heavily on :

1. How to interact with a NFT Contract + Metadata
2. Connecting a wallet
3. Explaining the steps to implement a Smart Contract Write Function.

(Intermediate) Creating a Simple ERC 721 Contract

We layer on complexity in the next section showcasing how you can write and deploy your own ERC 721 built upon one of the many Open Source ERC721 Solidity libraries.

1. Create a basic contract
2. Deploy that contract using Foundry
3. Integrate your smart contract into the existing project.
4. Layer on some more complex examples (e.g. Minting to an ENS address via a RPC lookup)

(Complex)

Until we have developed a stronger opinion how to integrate advanced use-cases into our UX, we will keep these examples in code-only. We should move instructions to readme's inline with these code samples.

1. Signature Mint
2. AllowList Mint

However, we should pivot these examples to be extensions to the base case rather than their own new entity. For example, do we really need a whole new contract or can we just showcase how to do this with a tidy function.

For example, we could showcase how to add a signature mint with a new foundational building block (rather than an entire contract):

    function freeMint(address account, bytes memory signature) external {
        string ethSignedMessageHash =  "free mint";
        address signer = ECDSA.recover(ethSignedMessageHash, signature);
        require(signer == "0x0000", "Unable to verify Signature");

        // Mint the NFT
        _mint(account, ++currentId);
        emit Mint(account, currentId, 0);
    }

To do this effectively we might want to consider writing a common Solidity library for functions we need to support (e.g. signature validation)

Describe alternatives you've considered.

No response

Feature Request: Enable code scanning

Is your feature request related to a problem? Please describe.

https://docs.github.com/en/code-security/code-scanning

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Publish CLI project to NPM

Is your feature request related to a problem? Please describe.

Want to install the build-onchain-apps easily running npm i -g @base-org/build-onchain-apps

Describe the solution you'd like

Publish @base-org/build-onchain-apps package using Github Actions

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Create Changelog

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Integrate CI build check before merging PRs

Is your feature request related to a problem? Please describe.

I want make sure not breaking the build when adding new code or dependency.

Describe the solution you'd like

Use github actions and PR checks before merging code.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Support multiple projects

Is your feature request related to a problem? Please describe.

Allow create multiple NodeJS projects inside of the repo.

Describe the solution you'd like

Simplest approach would be yarn workspaces.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Privy Support

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

Privy onboarding for email sign up out of the box, Privy is a simple toolkit for progressive authentication in web3

Describe alternatives you've considered

No response

Additional context

No response

Offline caching support

Is your feature request related to a problem? Please describe.

The app may experience longer loading times, which does not provide the same user experience as native apps.

Describe the solution you'd like

Every time a page is visited it is cached locally on their device, and it will still be accessible offline. Pages once cached are served even if the user is offline.

Describe alternatives you've considered

No response

Additional context

No response

Integrate CI format check before merging PRs

Is your feature request related to a problem? Please describe.

I want to make sure not sending non-indented code to main branch.

Describe the solution you'd like

Use github actions and PR checks before merging.

Describe alternatives you've considered

No response

Additional context

No response

Build a new onchain experience and document the process behind it

Context
We are thrilled to explore the multitude of onchain experiences that can be developed using the Build Onchain Apps Toolkit.

Ask
Please feel free to create a pull request with a new page featuring a specific use case and share the details of your accomplishment.

Support
For each PR, we will review it and assist you in refining the idea. Some of them may even be merged and permanently become part of BOAT ⛵️

Optimize buyCoffee function in BuyMeACoffee.sol for gas efficiency

Describe the solution you'd like

The current implementation of the buyCoffee function uses memory for string arguments. I propose optimizing this function for gas efficiency by changing the argument types from memory to calldata as the value of the argument variable paased is not being changed inside the function.

Benefits:

1. Gas Savings: Using calldata for string arguments can potentially result in gas savings during function execution.
2. Efficiency: The change aims to improve the overall gas efficiency of the contract.

Describe alternatives you've considered.

Alternatives considered

1. Current Implementation:
   The current implementation uses memory for string arguments...

2. Calldata Approach:
   An alternative approach is to use calldata instead of memory for string arguments...

3. Gas Efficiency vs. Readability:
   One consideration is the potential trade-off between gas efficiency and code readability...

4. Gas Profiling:
   Prior to making changes, gas profiling and benchmarking different implementations could be conducted.

Questions for Discussion

• What are your thoughts on changing the buyCoffee function to use calldata for string arguments?
• Are there alternative solutions or considerations that should be taken into account?
• How will this change impact contract compatibility and upgrades?

Documentation Request: use contract hook with contract address passed as param

Is your documentation request related to a problem? Please describe.

Current generateContractHook hooks have fixed addresses. Documentation requested for passing the contract address to that hook

Support Home Screen installation via Progressive Web Application (PWA)

Is your feature request related to a problem? Please describe.

I would like to provide users of the on-chain app with the option to install the app on their home screen.

Describe the solution you'd like

PWAs offer the functionalities to allow install the app in the home screen.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Make onchainkit a dependency

Describe the solution you'd like

Currently, onchainkit is not imported as a dependency, and a copy of the folder lives in the template.

Ideally, this is a dependency so we can pickup the latest and greatest from onchainkit without copy pasta.

Describe alternatives you've considered.

No response

Feature Request: Next.js App Router support

Is your feature request related to a problem? Please describe.

For a new project heading into to 2024, at this time I would expect an App Router based Next.js starting point (as opposed to Pages router based)

This is also based on Next.js's recommendation

Describe the solution you'd like

Expected: generates an app-based Next.js project

Current: generates a pages-based Next.js project

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: exercises

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

We may be able to create some incomplete applications that can be used as exercises. For example, we have the scaffolding of the mint page, but the onchain interaction doesn't work yet and has failing unit tests. The goal is to complete the page, indicated by a passing test suite. This offers newcomers a chance to level up, and maybe we can mint a diploma NFT for them if they complete all the challenges.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Upgrade Node to Latest LTS

Describe the solution you'd like

We are currently set to 18.14 for Node. This task is to upgrade Node to the latest LTS version.

Describe alternatives you've considered.

No response

Feature Request: Prettier support

Is your feature request related to a problem? Please describe.

Spending time to format the code.

Describe the solution you'd like

Easier to contribute to the project by auto-formatting.

Describe alternatives you've considered

Prettier

Additional context

No response

Feature Request: Mint NFT Flow - Better Design for States

Describe the solution you'd like

There are four states in the Mint NFT flow that should be handled with a better UI:

1. Contract status is notConnected
2. Contract status is onUnsupportedNetwork
3. Contract status is deactivated
4. Collection metadata is loading

We will need designs for these states as well.

Describe alternatives you've considered.

No response

Clone

Clone

Originally posted by @Hi2885 in gosu/gosu-examples#6 (comment)

Feature Request: Create Documentation Request

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Bug: “Buy me coffee” button does not work when out of gas

Describe the bug and the steps to reproduce it

The "Send 1 Coffee for 0.001ETH" don't return anything while out-of-gas.

What's the expected behavior?

Could be great to add an alert or visual notification when trying to use it.
Other buttons open Metamask pop-up, but this one don't.

What version of the libraries are you using?

No response

Feature Request: ERC 721 and 1155 Support for Mint NFT

Describe the solution you'd like

More an open question than a feature request, but do we want to support ERC 721 and 1155 tokens through the Mint NFT page? Does it make sense to show two separate flows for these?

@robpolak @Zizzamia @Sneh1999

Describe alternatives you've considered.

No response

Feature Request: Template Folder Restructure

Describe the solution you'd like

IMO, contracts should not live within the Nextjs project.

The foundry project has a completely different build environment, deployment process, and potentially different team working on it.

A folder structure like this seems to make more sense:

.
├── README.md
├── .gitmodules
├── contracts
│   ├── foundry.toml
│   ├── lib
│   ├── src
│   ├── test
│   └── ...
└── web
    ├── package.json
    ├── public
    ├── src
    ├── tsconfig.json
    ├── yarn.lock
    └── ...

For example, like this project: https://github.com/papercliplabs/frames

Describe alternatives you've considered.

No response

Bad

Bad

Originally posted by @Hi2885 in octocat/Spoon-Knife#31675 (comment)

Feature Request: Enable secret scanning

Is your feature request related to a problem? Please describe.

https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Guide for Mint NFT Page

Describe the solution you'd like

We need to develop the Guide section for the Mint NFT page. Here are some requirements:

• Use the Figma as a guide for the frontend UI
• Use the CodeBlock component to show code snippets
• Explain the goal of the experience
• Explain how the contract works and the main operations
• Explain how we interact with the contract on the frontend

Describe alternatives you've considered.

No response

Feature Request: Mint NFT Stepper UI

Describe the solution you'd like

Develop the stepper UI for the Mint NFT page

Design here

Describe alternatives you've considered.

No response

Bug: NextJs dynamic routing not working

Describe the bug and the steps to reproduce it

the app/ folder in the repo drives the routing. nextjs documentation says that adding a file [slug].tsx with the brackets in the folder will add a dynamic route -- the equivalent of having a token/:address route in other kinds of routers. I currently have a basic page at file token/[slug].tsx

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  console.log('router', router);
  return (<p>{router.query.slug}</p>);
}

but when i go to the route /token/123, i get a 404, suggesting the routing isn't working. for reference, the route /token is displaying properly, via the index.tsx file in my token/ folder

What's the expected behavior?

the app is expected to route to token/123 with 123 being passed as a prop to the component

What version of the libraries are you using?

I'm not sure exactly where to find the BOAT version, but I cloned the repo about one week ago.

next 13.5.6
react ^18

Feature Request: Component folder organization

Describe the solution you'd like

I see you've adopted the app router suggestion, nice.

Re: UI components, why not move them into the app folder as well? Instead of keeping them in somewhat disjointed src\components, src\pageComponents folders? (aren't most of the files in a project source code anyway?)

Something like this (from Next.js docs):

Describe alternatives you've considered.

No response

Feature Request: top of mind ideas we want to build

Here some top of mind ideas we want to build.

Home page

• Similar to what Radix or Viem site does, explain how to use Build Onchain Apps and the value from it
• ~~~

Mint page

• Show a link on where the minted NFT is, either on testnet or mainnet.
• After something is minted show a status/confirmation message.
• Have a documentation that shows the steps on how to mix the pre-build functionality:
  - how to use a Mint contract
  - how connect the contract with the UI
• ~~~~

Pay page

• Re-Design the buying coffee experience to make it more intuitive to use, right there is simple confusion on why do I need a name or a message. And explain if you send it, it will add the memo and name Onchain.
• Why do we need names? We should default to ENS!!! Or ask a Name if you don't have an ENS.
• Have the UI reflect all functionality of the Contract.
• ~~~~

DeFi page

• ~~~~
• ~~~~

Collaborate page

• ~~~~
• ~~~~

Solidity

• In the main README, have a bit more clear the Out of the Box Onchain blocks for both contract and UI. Completed here
• Explain in the README how to build an ABI for a contract. Completed here
• Explain how to deploy a new contract that is not pre-made. Completed here

Other ideas

• Would be cool to have https://www.npmjs.com/package/stylelint-order working, so the CSS is a bit easier to read. #159
• Would love to see how we can use similar style and energy of Vitepress without using Vitepress. I might going to create a small library that recreates Vitepress for React, just the basic functionality.
• ~~~

Address any bugs/optimizations based on your experience!

Context
The Build Onchain Apps Toolkit is an ongoing effort, and there may be some bugs or optimizations that we have missed.

Ask
If you come across any bugs or optimizations that you think will enhance the experience, please create pull requests (PRs).

Support
We will review each PR and assist you in refining the code. Some of them may even be merged and become a permanent part of BOAT ⛵️.

Bug: metadata.metadataBase is not set for resolving social open graph or twitter images

Describe the bug and the steps to reproduce it

Warning during development : metadata.metadataBase is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

What's the expected behavior?

Can be great to remove it, pretty painful to get this error at every build

What version of the libraries are you using?

No response

Feature Request: Smart Contract Read/Write interactions

Is your feature request related to a problem? Please describe.

Wish that I could have some code that I can easy understand how to interact with smart contracts.

Describe the solution you'd like

Demonstrate how to interact with the demo smart contract by showcasing read and write operations. Also interested on the libraries that I can use.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: CLI scaffolding

Is your feature request related to a problem? Please describe.

Allow create projects via CLI command, so I dont need to understand this project structure.

Describe the solution you'd like

Create CLI project scaffolding to host the template generator. CLI project should be @base-org/build-onchain-apps.

Describe alternatives you've considered

No response

Additional context

No response

Feature Request: Guide for Buy Me a Coffee Experience

Describe the solution you'd like

We need to populate the Guide section of the Buy Me a Coffee experience page. Here are some requirements:

• Use Figma as UI guide
• Use the CodeBlock component
• Implement three sections: overall goal, how the contract works and the main operations, and lastly how we interact with the contract on the frontend.

Describe alternatives you've considered.

No response

Bug: top of mind issues to solve

A top of mind list

• for app/build-onchain-apps when running yarn build seems not working anymore, seems related with the recent babel changes. Also to prevent future build breaking we should add a yarn build check in CI
• types seems not working for wagmi, viem and abitype. It says Cannot find module 'abitype'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?. It's odd because I can see in the node_module files the .d.ts file being ship. Done #148
• I was testing the minting experience and the network fee was like $19, which seems a bit too high. Let's deep dive on it and see what's going on there. Btw it was on Base Goerli.

Feature Request: Out of the box Account Abstraction support

Is your feature request related to a problem? Please describe.

Today a big issue is non-crypto native users having to deal with gas fees. Account Abstraction fixes this. Having an opinionated out-of-the-box AA implementation would be a great way to make it easier to build on top of Ethereum quickly.

Describe the solution you'd like

• Given this project supports base, use a combination of base paymaster with one of the following:

account kit or biconomy.

Maybe there is a complete AA solution being built at Coinbase that I'm unfamiliar with. If so disregard the second point above, Generally speaking though this is key to making as many viral onchain applications as possible.

I'd imagine this could be done with a combination of a provider + hook that lets the signed-in user interact with their smart contract wallet.

Describe alternatives you've considered

• For now support a solution like https://www.alchemy.com/account-kit or https://www.biconomy.io/ fully.

Additional context

n/a

Feature Request: Use react-query and/or wagmi instead of custom fetch hooks for datafetching

Describe the solution you'd like

react-query is already a dependency and it is also part of wagmi hooks. It handles caching very well, you can pass expiration, cache time to each hook and also use custom storage if needed.

I noticed 3 hooks that use custom solutions where I beleive react-query or wagmi would work better

• useEnsName
• ensAvatar
• useCollectionMetadata

Describe alternatives you've considered.

useCollectionMetadata should use react query to use all the benefits of react-query caching and have consistent api with other hooks. Both useEnsName and ensAvatar can use wagmi's hooks directly. Alternatively a custom react-query hook similar to:

/**
 * A hook to get ENS avatar
 * @param ensAddressOrName - either EVM address or an ens name like bitfalls.eth
 * @param chainId - defaults to 1 for ethereum as generally ENS is there only
 * @param skip - used to conditionally skip the hook call
 */
export const useGetEnsIdentity = ({
  ensAddressOrName,
  chainId = ENS_CHAIN_ID,
  skip = false,
}: {
  ensAddressOrName?: string;
  chainId?: number;
  skip?: boolean;
}) => {
  return useQuery<string | null>({
    queryKey: ['useGetEnsAvatar', ensAddressOrName, chainId],
    queryFn: async () => {
      const ensName =
        ensAddressOrName && getIsValidEthereumAddress(ensAddressOrName)
          ? await getEnsName(wagmiConfig, { address: ensAddressOrName, chainId })
          : ensAddressOrName;
      const ensResolver = ensName
        ? await getEnsResolver(wagmiConfig, { chainId, name: ensName })
        : null;

      const publicClient = getPublicClient(wagmiConfig, {
        chainId,
      });

      if (!ensResolver || !ensName) {
        return null;
      }

      const avatar = await publicClient.getEnsAvatar({ name: normalize(ensName) });

      return avatar;
    },
    gcTime: CACHE_TIME,
    enabled: !skip,
    refetchOnWindowFocus: false,
  });
};

Feature Request: General feedback and advice

Is your feature request related to a problem? Please describe.

Love that you are doing this! Just wanted to provide some helpful feedback since i'm building a similar project right now for EVMts. I also built the optimism starterkit which got a lot of positive feedback.

Describe the solution you'd like

Name the package create-foo

By naming the package create-onchain-app instead of @base-org/build-onchain-app it will follow the standard tooling expects and work seemlessly with all package managers. e.g npx create-onchain-app npm init onchain-app pnpm create onchain-app and yarn create onchain-app will all work.

Also make sure you add the binary to bin in package.json

Consider building with tsup

Small tip but if you use tsup to build the app it has a nice feature of automatically making the build output executable https://tsup.egoist.dev/#building-cli-app .

Eslint config is way too opinionated

Lots of rules in the eslint config but in general this is too opinoinated for a general starterkit. Myself, I would never use an eslint config based off of air bnb. IMO only the most important rules that prevent bugs should be included and it should be otherwise less opinionated

Tailwind is too opinoinated

I think including tailwind is a step too far. I plan on including tailwind as an option for create-evmts-app via including it as an option. This is how create-t3-app works too.

Some command line tech I like that could be helpful

There are three pieces of tech that are worth looking into when you build the cli.

1. Clack - just a really good way of building a cli app
2. pastel - React based cli framework that I'm using for create-evmts-app
3. cac - this is a great more robust option than comandeer while still being as minimal. This was my goto before I switched to using pastel and also what the create-wagmi-app cli uses
   

Docs

Optimism starter got great feedback mostly from it's really detailed docs and readme. It might be a good starting point for the create onchain app readme https://github.com/ethereum-optimism/optimism-starter.

Additionally the optimism starter has a signifcant amount of links to documentation in the source code that could be helpful pattern to follow

Describe alternatives you've considered

No response

Additional context

My WIP create-evmts-app cli is here https://github.com/evmts/evmts-monorepo/pull/650/files. Sharing just in case it sparks any ideas or inspiration. Feel free to copy anything from it.

Also I would love to add the onchain-app template as an option later.

Here is a video of what I implemented so far:
Untitled_ Nov 9 2023 1_08 PM.webm

Documentation Request: yarn dev script does not exist

Is your documentation request related to a problem? Please describe.

In documentation seems that yarn dev command does run the project locally. But there is not this script

Feature Request: Automatic contracts and UI abi syncing

Describe the solution you'd like

Currently, it's a manual process to update abi generated from a smart contract and to copy-pasta to UI

Once a contract has been deployed, we need to update which chain and the new address as well.

There are several ways to do this... let's discuss!

Describe alternatives you've considered.

No response