Art Blocks Engine (React Template)

This project is meant to be used as a template to build Art Blocks Engine web apps. It contains all pages and views necessary for users to browse projects, tokens and be able to purchase mints. This repository serves as a prototype or template.

It assumes your core contracts are either GenArt721CoreV2 or GenArt721CoreV3, and supports the following minters: GenArt721Minter, MinterSetPriceV4, MinterSetPriceERC20V4, MinterMerkleV5, and MinterHolderV4.

It is NOT intended for production use as-is. Please modify for your needs and test extensively before using.

Absolutely no warranty of any kind is provided. Please review from The MIT License:

Warning

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Quick Start

Run npm install or yarn to install dependencies.

To run the project locally you will need to create a .env configuration file. You can get started by copying sample.env and renaming it as .env.

Run npm start or yarn start to run the project locally.

After making any changes to the .env file, you will need to restart the app.

The default values specified in the provided sample.env file are reflected in the demo hosting found at: https://artblocks-engine-react.vercel.app/

Important note: if you are planning to run/host this template via Vercel, you will populate these environment variables in the Vercel "Environment Variables" settings rather than defining them in your local .env file.

Customizing your configuration

In order to customize your specific implementation, you will need to edit the default configuration provided on the sample.env file.

You must specify an API key from Infura as well as a chain id in your environment file. Use 1 for mainnet or 5 for goerli. Alternative providers can be used by modifying the src/components/Providers.tsx file. Use multiple .env fields to set up development or staging environments on testnet if you wish to do so.

You must also obtain and supply a projectId from WalletConnect Cloud. This is free and only takes a few minutes.

Additionally, you will need to edit the default configuration in the src/contractConfig.ts file - here you will find arrays for your mainnet and testnet contracts. Further configuration values like the number of projects per page, tokens per page, etc. can be found in src/config.ts.

Important note: if you intend to support either of the MinterMerkleV5 or MinterHolderV4 minters there are a few extra necessary requirements and configurations.

Support for the MinterMerkleV5 minter requires a custom API endpoint that is responsible for calculating the merkle root for a given wallet address - the url for this endpoint must be configured in the .env file with the REACT_APP_MERKLE_PROOF_API_URL key. It is assumed that this endpoint takes the following url parameters: ?contractAddress={}&projectId={}&walletAddress={} - this can be customized in the src/components/MinterInterfaces/MinterMerkleV5Interface.tsx file. For an example of this endpoint please see here.

Support for the MinterHolderV4 minter requires a custom API endpoint that is responsible for determining the holder proof for a given wallet address - the url for this endpoint must be configured in the .env file with the REACT_APP_HOLDER_PROOF_API_URL key. It is assumed that this endpoint takes the following url parameters: ?contractAddress={}&projectId={}&walletAddress={}&isMainnet={} - this can be customized in the src/components/MinterInterfaces/MinterHolderV4Interface.tsx file. For an example of this endpoint please see here.

Sections and Features

This project includes wallet connection with RainbowKit and wagmi.js.

Lander

• An empty landing page

Projects

• Header/subheader
• Title/artist name/description blurb
• Grid of recent projects

Project

• Breadcrumb nav
• Status
• Cover image
• Link to token shown as cover
• Title/artist
• Number of invocations
• Mint button
• Description
• License/library
• Token grid
• Sort (by date)
• Pagination

Token

• Breadcrumb nav
• Date minted
• Token cover img with links to live/static views
• Owned by address or ens
• Title/artist name
• Features table
• Etherscan and OpenSea links

Project list

• Grid of projects
• Cover images
• Link to token shown as cover
• Title/artist name
• Description blurb
• Pagination

Owned Tokens

• List of projects with tokens owned by wallet
• Title/artist name with link to project page
• Images/Links to owned tokens with pagination
• Pagination