Merge pull request #10 from plottables/main

Adding support for multiple contracts

Author: jakerockland

README.md

@@ -1,11 +1,14 @@
 # Art Blocks Engine (React Template)
 [![GitPOAPs](https://public-api.gitpoap.io/v1/repo/ArtBlocks/artblocks-engine-react/badge)](https://www.gitpoap.io/gh/ArtBlocks/artblocks-engine-react)
 
-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. 
+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 contract is `GenArt721CoreV3` and your minting contract is `MinterDAExpV4` with all sales priced in ETH. 
+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. 
+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:
 
@@ -23,50 +26,75 @@ SOFTWARE.**
 
 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`. 
-
-**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.
+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/
+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.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FArtBlocks%2Fartblocks-engine-react&env=REACT_APP_EXPECTED_CHAIN_ID,REACT_APP_GRAPHQL_URL,REACT_APP_INFURA_KEY&envDescription=Required%20environment%20variables%20for%20deployment&envLink=https%3A%2F%2Fgithub.com%2FArtBlocks%2Fartblocks-engine-react%2Fblob%2Fmain%2Fsample.env)
 
 ## Customizing your configuration
 
-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.
+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](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.
 
-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.
+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`.
 
-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`.
+**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](https://github.com/plottables/media/blob/main/pages/api/getMerkleProof.tsx).
+
+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](https://github.com/plottables/media/blob/main/pages/api/getHolderProof.tsx).
 
 # Sections and Features
 
-This project includes wallet connection with [RainbowKit](https://www.rainbowkit.com/) and [wagmi.js](https://wagmi.sh/).
+This project includes wallet connection with [RainbowKit](https://www.rainbowkit.com/) and
+[wagmi.js](https://wagmi.sh/).
 
 ## Lander
 - An empty landing page
 
 ## Projects
 - Header/subheader
-- Hero area with most recent project featured
 - Title/artist name/description blurb
-- Masonry grid of recent projects
+- Grid of recent projects
 
-## Project 
+## Project
 - Breadcrumb nav
-- Status/date launched
+- Status
 - Cover image
 - Link to token shown as cover
 - Title/artist
 - Number of invocations
 - Mint button
 - Description
 - License/library
-- Display notes (optional field)
-- Code notes (optional field)
-- Masonry token grid
+- Token grid
 - Sort (by date)
 - Pagination
 
@@ -80,9 +108,15 @@ This project includes wallet connection with [RainbowKit](https://www.rainbowkit
 - Etherscan and OpenSea links
 
 ## Project list
-- Masonry grid of projects
+- 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

package.json

@@ -10,7 +10,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.86",
     "@mui/material": "^5.8.2",
-    "@rainbow-me/rainbowkit": "^0.8.0",
+    "@rainbow-me/rainbowkit": "^0.12.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -25,14 +25,15 @@
     "moment-timezone": "^0.5.39",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-markdown": "^8.0.7",
     "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.5",
     "typescript": "^4.7.3",
     "usehooks-ts": "^2.9.1",
     "util": "^0.12.4",
-    "wagmi": "^0.8.10"
+    "wagmi": "^0.12.6"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false react-scripts start",

sample.env

@@ -1,8 +1,11 @@
-REACT_APP_EXPECTED_CHAIN_ID=5
-REACT_APP_INFURA_KEY=
+# MAINNET
+#REACT_APP_EXPECTED_CHAIN_ID=1
+#REACT_APP_GRAPHQL_URL=https://api.thegraph.com/subgraphs/name/artblocks/art-blocks
+
+# TESTNET
+REACT_APP_EXPECTED_CHAIN_ID=3
 REACT_APP_GRAPHQL_URL=https://api.thegraph.com/subgraphs/name/artblocks/art-blocks-artist-staging-goerli
-REACT_APP_CORE_CONTRACT_ADDRESS=0x6200437235E9AB363e83A53666871d745BfE52F3
-REACT_APP_MINT_CONTRACT_ADDRESS=0xF470012b134262C5Ec679F5b9Fc1107018DE7cd4
-REACT_APP_MEDIA_URL=https://media-proxy-staging.artblocks.io
-REACT_APP_TOKEN_URL=https://token.staging.artblocks.io
-REACT_APP_GENERATOR_URL=https://generator-staging-goerli.artblocks.io
+
+REACT_APP_INFURA_KEY=abc123
+REACT_APP_MERKLE_PROOF_API_URL=https://media.plottables.io/api/getMerkleProof
+REACT_APP_HOLDER_PROOF_API_URL=https://media.plottables.io/api/getHolderProof

src/App.tsx

@@ -5,6 +5,7 @@ import LandingPage from "pages/LandingPage"
 import ProjectsPage from "pages/ProjectsPage"
 import ProjectPage from "pages/ProjectPage"
 import TokenPage from "pages/TokenPage"
+import UserPage from "pages/UserPage"
 import Providers from "components/Providers"
 
 function App() {
@@ -14,8 +15,9 @@ function App() {
         <Routes>
           <Route index element={<LandingPage/>}/>
           <Route path="projects" element={<ProjectsPage/>}/>
-          <Route path="project/:projectId" element={<ProjectPage/>}/>
-          <Route path="token/:id" element={<TokenPage/>}/>
+          <Route path="project/:contractAddress/:projectId" element={<ProjectPage/>}/>
+          <Route path="token/:contractAddress/:id" element={<TokenPage/>}/>
+          <Route path="user/:walletAddress" element={<UserPage/>}/>
         </Routes>
       </Router>
       <ToastContainer