artblocks / artblocks-engine-react

Template to build Art Blocks Engine apps.

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

artblocks-engine-react's Issues

a few small issues

Hello! I ran into a few small issues when setting up this front end with the plottables contract.

1. Here data.projects was sorted in the opposite direction than was coded for so the pagination wasn't working correctly. My simple fix: const { projectId } = data.projects[0];

2. I was having an issue with the useProject subgraph query. Upon further investigation the contract address that the subgraph was expecting is all lowercase. Not sure if this would be an issue for other PBAB contracts but just wanted to add a note here. It was easily fixed by just changing the REACT_APP_CORE_CONTRACT_ADDRESS .env variable to match what was expected by the subgraph.

3. Here I believe the contract address is expected to be in the REACT_APP_GENERATOR_URL .env variable directly. This matches up with this line as well. This was causing all of the live links and iframes to be broken. Easy fix: src={${generatorUrl}/${tokenId}} or change line 75 to match 39.

That is all I have found so far. Haven't had a chance to test out minting functionality yet though. Happy to put this in a PR - just let me know.

Anyway thanks so much for putting this together!

Spin up example Vercel deployment for reference.

A basic version of this is deployed at artblocks-engine-react.vercel.app/ but it needs to be revamped after #10