coinbase / build-onchain-apps Goto Github PK
View Code? Open in Web Editor NEWAccelerate your onchain creativity with the Build Onchain Apps Template. ⛵️
Home Page: https://buildonchainapps.xyz
License: MIT License
Accelerate your onchain creativity with the Build Onchain Apps Template. ⛵️
Home Page: https://buildonchainapps.xyz
License: MIT License
Allow create projects via CLI command, so I dont need to understand this project structure.
Create CLI project scaffolding to host the template generator. CLI project should be @base-org/build-onchain-apps.
No response
No response
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:
calldata
for string arguments can potentially result in gas savings during function execution.Current Implementation:
The current implementation uses memory
for string arguments...
Calldata Approach:
An alternative approach is to use calldata
instead of memory
for string arguments...
Gas Efficiency vs. Readability:
One consideration is the potential trade-off between gas efficiency and code readability...
Gas Profiling:
Prior to making changes, gas profiling and benchmarking different implementations could be conducted.
buyCoffee
function to use calldata
for string arguments?Allow create multiple NodeJS projects inside of the repo.
Simplest approach would be yarn workspaces.
No response
No response
No response
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.
No response
No response
No response
Privy onboarding for email sign up out of the box, Privy is a simple toolkit for progressive authentication in web3
No response
No response
https://docs.github.com/en/code-security/dependabot/dependabot-alerts/about-dependabot-alerts
No response
No response
No response
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.
No response
There are four states in the Mint NFT flow that should be handled with a better UI:
notConnected
onUnsupportedNetwork
deactivated
We will need designs for these states as well.
No response
Wish that I could have some code that I can easy understand how to interact with smart contracts.
Demonstrate how to interact with the demo smart contract by showcasing read and write operations. Also interested on the libraries that I can use.
No response
No response
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):
No response
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
Expected: generates an app-based Next.js project
Current: generates a pages-based Next.js project
No response
No response
https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning
No response
No response
No response
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 ⛵️.
The "Send 1 Coffee for 0.001ETH" don't return anything while out-of-gas.
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.
No response
Bad
Originally posted by @Hi2885 in octocat/Spoon-Knife#31675 (comment)
Develop the stepper UI for the Mint NFT page
No response
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.
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
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 .
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
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.
There are three pieces of tech that are worth looking into when you build the cli.
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
No response
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
I want to make sure not sending non-indented code to main branch.
Use github actions and PR checks before merging.
No response
No response
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
the app is expected to route to token/123
with 123 being passed as a prop to the component
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
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.
No response
I want to avoid sending code with lint issues in the main branch.
Use github actions and integrate with pull requests.
No response
No response
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 ⛵️
Current generateContractHook hooks have fixed addresses. Documentation requested for passing the contract address to that hook
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
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,
});
};
The app may experience longer loading times, which does not provide the same user experience as native apps.
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.
No response
No response
Want to install the build-onchain-apps easily running npm i -g @base-org/build-onchain-apps
Publish @base-org/build-onchain-apps package using Github Actions
No response
No response
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!
No response
A top of mind list
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 CIwagmi
, 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 #148In documentation seems that yarn dev command does run the project locally. But there is not this script
We need to populate the Guide section of the Buy Me a Coffee experience page. Here are some requirements:
No response
We are currently set to 18.14 for Node. This task is to upgrade Node to the latest LTS version.
No response
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
Can be great to remove it, pretty painful to get this error at every build
No response
https://docs.github.com/en/code-security/code-scanning
No response
No response
No response
I want make sure not breaking the build when adding new code or dependency.
Use github actions and PR checks before merging code.
No response
No response
Here some top of mind ideas we want to build.
Home page
Mint page
Pay page
DeFi page
Collaborate page
Solidity
Other ideas
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
No response
No response
No response
No response
No response
Allow publish packages inside of monorepo using changeset and current github actions
Sounds changeset and nx repo is not compatible yet, there is some hack solution here.
No response
No response
The UI for the mint flow should match the Figma. This ticket is for improving the UI and bringing it up to spec.
No response
We need to develop the Guide section for the Mint NFT page. Here are some requirements:
No response
I should be able to create a new fresh project using the CLI
build-onchain-apps create nft-marketplace
No response
No response
No response
No response
No response
No response
Clone
Originally posted by @Hi2885 in gosu/gosu-examples#6 (comment)
I would like to provide users of the on-chain app with the option to install the app on their home screen.
PWAs offer the functionalities to allow install the app in the home screen.
No response
No response
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:
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:
First, we walk builders through adding a mint button on their page. Draw inspiration from Open Minting Platforms like mint.fun
Focus heavily on :
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.
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.
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)
No response
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.
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.
n/a
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/*"
]
}
}
}
If we want to be very fancy, we could ask the user to set the alias like how create-next-app
does.
Spending time to format the code.
Easier to contribute to the project by auto-formatting.
Prettier
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.