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
fiels to set up development
or staging
environments on testnet
if you wish to do so.
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