Skip to content

zapnap/fourby_ui

Repository files navigation

Fourby UI

Fourby is a simple generative art project with a pleasing color palette and dynamic elements to document changes in transaction costs over the course of the mint. Assets are built via SVG and stored 100% on-chain.

This frontend is a Next.js + Foundry + wagmi project bootstrapped with create-wagmi. It also includes RainbowKit for wallet management and several other goodies.

Prerequisites

Install Foundry in order to build your smart contracts. This can be done by running the following command:

curl -L https://foundry.paradigm.xyz | bash

To customize your environment, set up your local .env. An example has been provided in .env.example. At minimum, you'll want to set up the Forge private key and RPC URL. You should also set up a WalletConnect Cloud project ID and an EtherScan API Key at this time.

Variables

Limited edition vs open edition? Set EDITION_SIZE. Time-limited mint? Set BLOCKS_TO_MINT (216000 = ~30d). Free vs paid mint? Set MINT_PRICE (in wei).

Developing with Foundry

Run npm run dev:foundry in your terminal to start. This starts a Next.js dev server and starts @wagmi/cli in watch mode. It also starts an Anvil local development node.

To compile and deploy contracts (in ./contracts) to the Anvil node, run npm run deploy:anvil.

Once you've done both of these things, you should be able to open localhost:3000 in your browser, connect a wallet, and mint an NFT using one of the test accounts that Foundry provides for you (check Anvil output and import the private key into your web wallet).

Deployment

To deploy your contracts to Sepolia, run npm run deploy:sepolia. You'll need to first ensure that your .env file has the appropriate values set. You can create a free account with Alchemy and set the RPC URL to your project there (make sure to also add the API key).

Support for various production blockchains can be added by making a few small adjustments. Add targets to package.jsoon and make sure the appropriate variables exist in your environment.

For frontend hosting, Vercel is a good choice. After setting up an account and installing their CLI, you can simply run the vercel command in the top level directory to deploy a copy of the frontend. Just make sure you deploy the contract first, as the contract address will be cached locally in the config.

One last note: You'll want to set NEXT_PUBLIC_APP_ENV=development if you want testnets to show up in a staging/preview deployment.

Learn more

About

Generative NFT project with on-chain SVG assets

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages