Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
package-lock.json
/.pnp
.pnp.js

Expand All @@ -13,13 +12,14 @@

# misc
.DS_Store
.env
*.env
.env.local
.env.development.local
.env.test.local
.env.production.local
!sample.env

npm-debug.log*
yarn-debug.log*
yarn-error.log*

.env
2 changes: 1 addition & 1 deletion CODEOWNERS
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# Request review from the best fit approvers group for this repo.
* @ArtBlocks/Eng-Approvers-Frontend
* @ArtBlocks/Eng-Approvers-Frontend
4 changes: 2 additions & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2022 Art Blocks
Copyright (c) 2023 Art Blocks

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -18,4 +18,4 @@ 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.
SOFTWARE.
71 changes: 31 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,86 +1,77 @@
# artblocks-engine-react
# Art Blocks Engine (React Template)

This project is meant ot be used as a template to build Art Blocks Engine web apps.
It contains all of the pages and views necessary for users to browse projects, tokens and be able to purchase mints.
This project is meant to be used as a template to build Art Blocks Engine web apps. It contains all of the 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 contract is `GenArt721CoreV3` and your minting contract is `MinterDAExpV2` with all sales priced in ETH. It is NOT intended for production use. Please modify for your needs and test extensively before using. Absolutely no warranty of any kind is provided. Please review from The MIT License:

## Quick Start
## Warning

Run `npm install` or `yarn` to install dependencies.
**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.**

You will need to create a `.env` configuration file. You can get started by copying `sample.env` and renaming it as `.env`
# Quick Start

You will need a JSON RPC provider URL.
For instance, you could use infura: `https://mainnet.infura.io/v3/<API_KEY>`
You will need to set up JSON RPC urls for each chain you need to support.
Run `npm install` or `yarn` to install dependencies.

You can find the chains configuration in `src/utils/chains.ts`
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.

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

## Customizing your configuration

In order to customize `abengine-react` for your specific Art Blocks Engine implementation, you will need to edit the default configuration provided on the `sample.env` file.

First of all, you will need to replace the contract addresses with your own.

You will also need to change the expected `chainId`, graph ql urls and possibly others, to set up `development` or `staging` environments on `testnet` if you wish to do so.
In order to customize your specific implementation, you will need to edit the default configuration provided on the `sample.env` file. First of all, you will need to replace the contract addresses with your own.

There are additional configuration values you could customize like the number of projects per page, or tokens per page. You will find those parameters in `src/config.ts`
You must specify an API key from [Infura](https://www.infura.io/) 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.

## Chains configuration

By default, `artblocks-engine-react` supports Ethereum Mainnet, Ropsten and Goerli.

____
There are additional configuration values you could customize like the number of projects per page, or tokens per page. You will find those parameters in `src/config.ts`.

# Sections and Features

This project includes wallet connection with Metamask, Wallet Connect and coinbase Wallet, implemented using [web3-react](https://github.com/Uniswap/web3-react)
This project includes wallet connection with [RainbowKit](https://www.rainbowkit.com/) and [wagmi.js](https://wagmi.sh/).

In addition, there are different sections described below:
## Lander
- An empty landing page

## Main (Home Page)
The main page includes the following features:
## Projects
- Header/subheader
- Hero area with most recent project featured
- Title/artist name/description blurb
- Masonry grid of recent projects (max n = 6)
- Masonry grid of recent projects

## Project
Features:
- Breadcrumb nav
- Status/date launched
- Cover image w/ links to live & img views
- Cover image
- Link to token shown as cover
- Title/artist name/# minted
- Title/artist
- Number of invocations
- Mint button
- Description
- License/library
- Artist link/OS link
- Display notes (optional field)
- Code notes (optional field)
- Masonry token grid
- Sort (by: Newest/oldest)
- Masonry token grid
- Sort (by date)
- Pagination

## Token
Features:
- Breadcrumb nav
- Date minted
- Token cover img w/ links to live & img views
- Owned by: wallet/eth address
- Token cover img with links to live/static views
- Owned by address or ens
- Title/artist name
- Features table
- Etherscan link/OS link
- Etherscan and OpenSea links

## Project list
Features:
- Masonry grid of projects
- Cover images
- Link to token shown as cover
- Title/artist name
- Description blurb (ellipses after n chars/words)
- Pagination

- Description blurb
- Pagination
Loading