Merge pull request #65 from public-assembly/63-integrate-zora-allowli…

…st-feature

[WIP]: 63 integrate zora allowlist feature

.changeset/clever-hairs-greet.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Removed console.log"

.changeset/curly-readers-work.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Added allowlist functionality and updated mint calls to use typechain

.changeset/fair-taxis-tie.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Fixes to mint quantity selection and add presale info to dropscontract return

.changeset/gold-suits-learn.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Added presale cannot mint cta

.changeset/nervous-beers-walk.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Added custom ipfs gateway, and a more robust tx success component

.changeset/olive-buttons-happen.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Add refresh rate and balanceof trigger to wagmi and drops contract provider"

.changeset/smart-jobs-breathe.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Added presale data

.changeset/smart-mirrors-wonder.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': minor
+---
+
+Max supply not number sold out bug

.changeset/twelve-mails-unite.md

@@ -0,0 +1,5 @@
+---
+'@public-assembly/zora-drops-utils': patch
+---
+
+Added conteractURI data as fallback if not edition contract

examples/nextjs-dapp/next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
+
+const withPreconstruct = require("@preconstruct/next");
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
@@ -20,4 +23,4 @@ const nextConfig = {
   },
 }
 
-module.exports = nextConfig
+module.exports = withPreconstruct({ ...nextConfig });

examples/nextjs-dapp/package.json

@@ -12,6 +12,8 @@
     "clean": "rimraf --no-glob .next node_modules"
   },
   "dependencies": {
+    "@preconstruct/next": "^4.0.0",
+    "@public-assembly/zora-drops-utils": "*",
     "@rainbow-me/rainbowkit": "^0.6.0",
     "@tailwindcss/forms": "^0.5.3",
     "@zoralabs/nft-drop-contracts": "^1.0.1",

examples/nextjs-dapp/src/components/AppWrapper.tsx

@@ -5,10 +5,19 @@ import { publicProvider } from 'wagmi/providers/public'
 import { SWRConfig } from 'swr'
 import { NFTFetchConfiguration } from '@zoralabs/nft-hooks'
 import { ZDKFetchStrategy } from '@zoralabs/nft-hooks/dist/strategies'
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
 
 const { chains, provider } = configureChains(
   [chain.mainnet, chain.goerli],
-  [publicProvider()]
+  [
+    jsonRpcProvider({
+      priority: 0,
+      rpc: (chain) => (chain.id === 1 ? 
+        {http: "https://rpc.ankr.com/eth"} :
+        {http: "https://rpc.ankr.com/eth_goerli"}   
+      )}),
+    publicProvider()
+  ]
 )
 const { connectors } = getDefaultWallets({
   appName: 'ExampleNextjsDapp',

examples/nextjs-dapp/src/components/Header.tsx

@@ -1,9 +1,10 @@
 import { ConnectButton } from './ConnectButton'
+import { Navigation } from './Navigation'
 
 export function Header() {
   return (
     <header className="flex w-full flex-row items-center justify-between border-b border-dashed border-gray-200 px-4">
-      <span className="text-2xl">Header</span>
+      <Navigation />
       <ConnectButton />
     </header>
   )

examples/nextjs-dapp/src/components/Navigation.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link"
+import { useRouter } from "next/router"
+
+const pages = [
+  {
+    slug: '/',
+    title: 'Zora Drops Utils'
+  },
+  {
+    slug: '/presale-mint',
+    title: 'Presale Mint'
+  },
+  {
+    slug: '/drops-metadata',
+    title: 'Drops Metadata'
+  },
+]
+
+export function Navigation() {
+  const router = useRouter()
+
+  return (
+    <div className="flex flex-row gap-4">
+      {pages.map((page) =>
+        <Link passHref href={page.slug} key={page.slug}>
+          <a style={{
+             color: router.asPath === page.slug ? 'red' : 'black'
+          }}>{page.title}</a>
+        </Link>
+      )}
+    </div>
+  )
+}

examples/nextjs-dapp/src/pages/drops-metadata.tsx

@@ -0,0 +1,32 @@
+import { DropsComponents, DropsContractProvider, DropsData } from "@public-assembly/zora-drops-utils"
+
+function Page() {
+  return (
+    <section className="flex flex-col gap-4">
+      <h1>Render Drops Style Contract Metadata</h1>
+      <DropsContractProvider collectionAddress="0xb603d89f9f87fda06cd80c4a04ec6dc0440b8f42" networkId="5" ipfsGateway="zora-prod.mypinata.cloud">
+        <DropsComponents.Thumbnail style={{maxWidth: 600}} />
+        <DropsComponents.Metadata />
+        <div className="flex flex-row gap-2">
+          <DropsComponents.MintButton />
+          <DropsComponents.MintQuantity />
+        </div>
+        <DropsComponents.TxStatus />
+        <DropsData />
+      </DropsContractProvider>
+      <h1>Render Editions Style Contract Metadata</h1>
+      <DropsContractProvider collectionAddress="0x213b55e62323f918b3fb45ac02882a885f9b1da3" networkId="5" ipfsGateway="zora-prod.mypinata.cloud">
+        <DropsComponents.Thumbnail style={{maxWidth: 600}} />
+        <DropsComponents.Metadata />
+        <div className="flex flex-row gap-2">
+          <DropsComponents.MintButton />
+          <DropsComponents.MintQuantity />
+        </div>
+        <DropsComponents.TxStatus />
+        <DropsData />
+      </DropsContractProvider>
+    </section>
+  )
+}
+
+export default Page

examples/nextjs-dapp/src/pages/index.tsx

@@ -1,17 +1,26 @@
 import { DropsMinter } from '@public-assembly/zora-drops-utils'
 
-const TEST_MINT_CONTRACTS = [
-  '0xE3d8572a5B1e47cD87A6222A5F989332E88DeA69',
-  '0x47191cb94c0b6925db9f15e000cf8e3e8864fc9b',
+const TESTNET_MINT_CONTRACTS = [
+  '0xa3ba36ce1af5fa6bb8ab35a61c8ae72293b38b32',
+  '0x83b9f7ddd165e32ebea7da1b54405bf8c16708f7',
+  '0x31bed60ae0627575725f4460139f095cd9e4a08b'
 ]
 
 function Page() {
   return (
     <section className="flex flex-col gap-4">
       <h1>Nextjs App</h1>
-      {TEST_MINT_CONTRACTS.map((edition: any) =>
-        <DropsMinter key={edition} collectionAddress={edition} />
-      )}
+      <div className="grid grid-cols-3 gap-4">
+        {TESTNET_MINT_CONTRACTS.map((edition: any) =>
+          <DropsMinter
+            key={edition}
+            collectionAddress={edition}
+            ipfsGateway="zora-prod.mypinata.cloud"
+            networkId="5"
+            refreshInterval={0}
+          />
+        )}
+      </div>
     </section>
   )
 }

examples/nextjs-dapp/src/pages/presale-mint.tsx

@@ -0,0 +1,32 @@
+import { DropsComponents, DropsContractProvider, DropsData } from "@public-assembly/zora-drops-utils"
+
+function Page() {
+  return (
+    <section className="flex flex-col gap-4">
+      <h1>Presale Mint / Allowlist</h1>
+      <DropsContractProvider collectionAddress="0x213b55e62323f918b3fb45ac02882a885f9b1da3" networkId="5">
+        <DropsComponents.Thumbnail style={{maxWidth: 600}} />
+        <DropsComponents.Metadata />
+        <div className="flex flex-row gap-2">
+          <DropsComponents.MintButton />
+          <DropsComponents.MintQuantity />
+        </div>
+        <DropsComponents.TxStatus />
+        <DropsData />
+      </DropsContractProvider>
+      <hr></hr>
+      <DropsContractProvider collectionAddress="0xa5c3340d5b27407997beb72eb30b7b234bec6e95" networkId="5">
+        <DropsComponents.Thumbnail style={{maxWidth: 600}} />
+        <DropsComponents.Metadata />
+        <div className="flex flex-row gap-2">
+          <DropsComponents.MintButton />
+          <DropsComponents.MintQuantity />
+        </div>
+        <DropsComponents.TxStatus />
+        <DropsData />
+      </DropsContractProvider>
+    </section>
+  )
+}
+
+export default Page

examples/nextjs-dapp/tsconfig.json

@@ -7,13 +7,13 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
-    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

examples/reactjs-dapp/src/App.tsx

@@ -6,11 +6,21 @@ import { SWRConfig } from 'swr'
 import { NFTFetchConfiguration } from '@zoralabs/nft-hooks'
 import { ZDKFetchStrategy } from '@zoralabs/nft-hooks/dist/strategies'
 import { Header } from './components/Header'
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
 
 const { chains, provider } = configureChains(
   [chain.mainnet, chain.goerli],
-  [publicProvider()]
+  [
+    jsonRpcProvider({
+      priority: 0,
+      rpc: (chain) => (chain.id === 1 ? 
+        {http: "https://rpc.ankr.com/eth"} :
+        {http: "https://rpc.ankr.com/eth_goerli"}   
+      )}),
+    publicProvider()
+  ]
 )
+
 const { connectors } = getDefaultWallets({
   appName: 'ExampleReactjsDapp',
   chains,

package.json

@@ -61,9 +61,6 @@
     ],
     "*.json": [
       "prettier --write"
-    ],
-    "**/*.{ts,tsx}": [
-      "tsc-files --noEmit"
     ]
   },
   "engines": {

packages/zora-drops-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-assembly/zora-drops-utils",
-  "version": "0.1.5",
+  "version": "0.1.62",
   "description": "Example package with some web3 peer dependencies",
   "main": "dist/public-assembly-zora-drops-utils.cjs.js",
   "module": "dist/public-assembly-zora-drops-utils.esm.js",
@@ -27,5 +27,8 @@
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@ethersproject/constants": "^5.7.0"
   }
 }

packages/zora-drops-utils/src/components/DropsData.tsx

@@ -0,0 +1,43 @@
+/* @ts-ignore */
+import * as React from 'react'
+import { useDropsContractProvider } from './../context/DropsContractProvider'
+
+export function DropsData({ data = {} }: { data?: any }) {
+  const {
+    collectionData,
+    mintStatus,
+    purchaseLimit,
+    inventory,
+    balance,
+    errors,
+    saleStatus,
+    transaction,
+    allowList,
+  } = useDropsContractProvider()
+
+  const dataToRender = React.useMemo(
+    () =>
+      collectionData
+        ? {
+            collectionData,
+            transaction,
+            mintStatus,
+            saleStatus,
+            purchaseLimit,
+            inventory,
+            balance,
+            errors,
+            allowList,
+          }
+        : data,
+    [data, collectionData]
+  )
+
+  return (
+    <div className="raw-displayer relative w-full overflow-x-scroll rounded-xl bg-gray-200 px-5 py-3 text-left">
+      <code>
+        <pre>{JSON.stringify(dataToRender, null, 2)}</pre>
+      </code>
+    </div>
+  )
+}