[WIP] Monorepo structure update

.gitignore

@@ -14,10 +14,10 @@ node_modules
 !.yarn/sdks
 !.yarn/versions
 
-examples/**/dist/**
-examples/**/.next
-examples/**/node_modules/**
-examples/**/.env.local
+apps/**/dist/**
+apps/**/.next
+apps/**/node_modules/**
+apps/**/.env.local
 
 # local env files (followinf dotenv-flow / nextjs convention)
 .env.local
@@ -37,9 +37,8 @@ yarn-error.log*
 packages/**/npm-debug.log*
 packages/**/yarn-debug.log*
 packages/**/yarn-error.log*
-
-examples/**/npm-debug.log*
-examples/**/yarn-debug.log*
-examples/**/yarn-error.log*
+apps**/npm-debug.log*
+apps/**/yarn-debug.log*
+apps/**/yarn-error.log*
 
 *.tsbuildinfo

.prettierignore

@@ -2,9 +2,9 @@ node_modules
 .next
 .idea
 
-examples/**/dist/**
-examples/**/.next
-examples/**/node_modules/**
-examples/**/.env.local
+apps/**/dist/**
+apps/**/.next
+apps/**/node_modules/**
+apps/**/.env.local
 
 packages/**/dist/**

apps/next/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CHAIN_ENV=testnet
+NEXT_PUBLIC_NETWORK=goerli

examples/nextjs-dapp/next.config.js → apps/next/next.config.js

@@ -1,13 +1,10 @@
 /** @type {import('next').NextConfig} */
 
-const withPreconstruct = require("@preconstruct/next");
+const withTM = require('next-transpile-modules')(['@public-assembly/zora-drops-utils'])
 
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  experimental: {
-    externalDir: true,
-  },
   webpack: (config) => {
     config.module.rules.push({
       test: /\.(md|mdx)?$/,
@@ -23,4 +20,4 @@ const nextConfig = {
   },
 }
 
-module.exports = withPreconstruct({ ...nextConfig });
+module.exports = withTM(nextConfig)

examples/nextjs-dapp/package.json → apps/next/package.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
-    "@public-assembly/zora-drops-utils": "*",
-    "@rainbow-me/rainbowkit": "^0.6.0",
+    "@public-assembly/zora-drops-utils": "workspace:*",
+    "@rainbow-me/rainbowkit": "^0.8.1",
     "@tailwindcss/forms": "^0.5.3",
     "@zoralabs/nft-drop-contracts": "^1.0.1",
     "@zoralabs/nft-hooks": "^1.1.9",
@@ -26,16 +26,18 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "swr": "^1.3.0",
-    "wagmi": "^0.6.6"
+    "wagmi": "0.9.6"
   },
   "devDependencies": {
     "@mdx-js/loader": "^2.1.3",
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
+    "assert": "^2.0.0",
     "autoprefixer": "^10.4.11",
     "eslint": "^8.23.1",
     "eslint-config-next": "^12.3.0",
+    "next-transpile-modules": "^10.0.0",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.8.3"

examples/nextjs-dapp/src/components/AppWrapper.tsx → apps/next/src/components/AppWrapper.tsx

@@ -1,40 +1,17 @@
 import '@rainbow-me/rainbowkit/styles.css'
-import { getDefaultWallets, RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit'
-import { createClient, chain, configureChains, WagmiConfig } from 'wagmi'
-import { publicProvider } from 'wagmi/providers/public'
+import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit'
 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],
-  [
-    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',
-  chains,
-})
-
-const wagmiClient = createClient({
-  autoConnect: true,
-  connectors,
-  provider,
-})
+import { WagmiConfig } from 'wagmi'
+import { client, chains } from '../lib/wagmi.client'
 
 export const strategy = new ZDKFetchStrategy('1', 'https://api.zora.co/graphql')
 
 export function AppWrapper({ children }: { children: JSX.Element }) {
   return (
-    <WagmiConfig client={wagmiClient}>
+    <WagmiConfig client={client}>
       <RainbowKitProvider
         chains={chains}
         coolMode

examples/nextjs-dapp/src/components/Avatar.tsx → apps/next/src/components/Avatar.tsx

@@ -1,4 +1,4 @@
-import { useAuth } from './../hooks/useAuth'
+import { useAuth } from '../hooks/useAuth'
 
 /**
  * Type sizes, or should this be in a global theme object?

apps/next/src/components/Navigation.tsx

@@ -0,0 +1,36 @@
+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/components/SimpleMint.tsx → apps/next/src/components/SimpleMint.tsx

@@ -14,8 +14,5 @@ export function SimpleMintUi() {
 */
 
 export function SimpleMint() {
-  return (
-    <div>
-    </div>
-  )
+  return <div></div>
 }

apps/next/src/components/testing/DropMintTest.tsx

@@ -0,0 +1,3 @@
+export function DropMintTest({ collectionAddress }: { collectionAddress: string }) {
+  return <div>test mint {collectionAddress}</div>
+}

apps/next/src/components/testing/DropsArray.tsx

@@ -0,0 +1,12 @@
+import { useSWRDropsArray } from '@public-assembly/zora-drops-utils/src/hooks'
+import { RawDisplayer } from '../RawDisplayer'
+
+export function DropsArray({ contracts = [] }: { contracts: string[] }) {
+  const { data } = useSWRDropsArray({ contractAddresses: contracts, refreshInterval: 0 })
+
+  return (
+    <div>
+      <RawDisplayer data={data} />
+    </div>
+  )
+}

apps/next/src/components/testing/ProviderImage.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useDropContextProvider, addIPFSGateway } from '@public-assembly/zora-drops-utils'
+
+export function ProviderImage() {
+  const { data } = useDropContextProvider()
+
+  const src = React.useMemo(
+    () =>
+      data?.editionMetadata?.imageURI
+        ? addIPFSGateway(data?.editionMetadata?.imageURI)
+        : '',
+    [data]
+  )
+
+  return (
+    <div style={{ width: 300, height: 300 }} className="relative">
+      <img
+        src={src}
+        alt={data?.editionMetadata?.imageURI}
+        className="object-cover inset-0 absolute"
+      />
+    </div>
+  )
+}

apps/next/src/components/testing/Test.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import {
+  returnDropEndpoint,
+  DropContextProvider,
+  DropsContextProvider,
+} from '@public-assembly/zora-drops-utils'
+import { RawDisplayer } from '../RawDisplayer'
+import { TestProviderConsumer } from './TestProviderConsumer'
+import { TestHooks } from './TestingHooks'
+import { DropsArray } from './DropsArray'
+import { TestArrayProviderConsumer } from './TestArrayProviderConsumer'
+import { DropMintTest } from './DropMintTest'
+
+const goreliEndpoint = returnDropEndpoint('5')
+const mainnetEndpoint = returnDropEndpoint('1')
+
+const TEST_CONTRACTS = [
+  '0xb7a791c3b5a0aa833e638250f982ebd29194f02c',
+  '0x674fb9ed86b847db9aee0a19e9055d5d2c0e6cc4',
+  '0x2f0146ca3c62a33177959565ae9df2f86cf01551',
+]
+
+const TEST_MINT_CONTRACTS = [
+  '0xb7a791c3b5a0aa833e638250f982ebd29194f02c',
+  '0x674fb9ed86b847db9aee0a19e9055d5d2c0e6cc4',
+]
+
+const tracks = [
+  '0x78Fb0b8D4502ae69A61C0d0321141629553472bd',
+  '0x973aEE1e38aAfAfB8A3c817117Cf2aD43aB90ef7',
+  '0x6bdc3155dd9535f002cD539E664c408eC42C060f',
+  '0x3e28d99c9DFF6F183E04a47fF82BDF83D6D07FBE',
+  '0x423E2e4687a368b970c28ceEc20448048B3eC8ab',
+  '0x1495F8419C544071717375518b9DfF1975d907FA',
+  '0xC989AC6D12eC65650DfFaAD88CFB4BDA261Cc7FB',
+  '0x173BF29946b6BeAc8Ceac628bb65b5F8f13B8524',
+  '0x6026A17D359A9B721f0709c963aD948dB33F56DD',
+  '0x970Eeca75562Ac20080459B16EA8aC1c54D6124B',
+  '0x092882162387eAEAcE2d2f9D093F4f015eD73690',
+  '0x54Dab8d172B408a14fDB7991Ebe243C27c7eF702',
+  '0x06064b039C2a2096eFFC638B86f632327e91da0D',
+  '0xA1b3920F56ac834b5D0b93B24378e609DA2202Af',
+  '0x3AA59b2610ab3A94c52BD840eC753b01F6134bB1',
+  '0x40B34C125a79C8deE404091ffB64ba2bD56348ce',
+  '0x24271B4B616180e1a42bBEB93C75532EA34FD077',
+  '0x4b29bBc353afa48c9D21716a3C051deB6a8145bD',
+  '0x06CE5D865251d29b0957DF602111970Eb161eC6c',
+  '0x14214694847bA90Da2E9b08B6dE397bd06d5a626',
+  '0x676777D784EbCc9D3Ff3e28ce73757864a8333B4',
+]
+
+export function TestComponent() {
+  const [address, setAddress] = React.useState(TEST_CONTRACTS[0])
+  const handleSetAddress = React.useCallback(
+    (event: any) => {
+      setAddress(event?.target.value)
+    },
+    [setAddress]
+  )
+
+  return (
+    <>
+      {TEST_MINT_CONTRACTS.map((address) => (
+        <DropMintTest key={address} collectionAddress={address} />
+      ))}
+      <div className="flex flex-col p-4 border border-solid border-1 rounded-xl">
+        <h1 className="text-xl">Endpoints:</h1>
+        <br />
+        <RawDisplayer
+          data={{
+            mainnet: mainnetEndpoint,
+            goerli: goreliEndpoint,
+          }}
+        />
+        <br />
+        <h1 className="text-xl">Array of Drops:</h1>
+        <br />
+        <DropsArray contracts={tracks} />
+        <br />
+        <hr className="border border-b-0 border-dashed" />
+        <br />
+        <DropsContextProvider contractAddresses={tracks} refreshInterval={0}>
+          <TestArrayProviderConsumer />
+        </DropsContextProvider>
+        <br />
+        <hr className="border border-b-0 border-dashed" />
+        <br />
+        <h1 className="text-xl pb-2">Select A Contract:</h1>
+        <select
+          className="border border-solid border-1 p-2 border-black rounded-md"
+          onChange={handleSetAddress}
+          value={address}>
+          {TEST_CONTRACTS.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
+        <br />
+        <hr className="border border-b-0 border-dashed" />
+        <br />
+        <DropContextProvider contractAddress={address}>
+          <TestProviderConsumer />
+        </DropContextProvider>
+        <br />
+        <hr className="border border-b-0 border-dashed" />
+        <br />
+        <TestHooks contractAddress={address} />
+        <br />
+        <br />
+        <br />
+      </div>
+    </>
+  )
+}

apps/next/src/components/testing/TestArrayProviderConsumer.tsx

@@ -0,0 +1,37 @@
+import { useDropsContextProvider } from '@public-assembly/zora-drops-utils'
+import { addIPFSGateway } from '@public-assembly/zora-drops-utils'
+
+export function ConsumerImage({ src }: { src: string }) {
+  return (
+    <div style={{ width: 300, height: 300 }} className="relative">
+      <img src={addIPFSGateway(src)} className="object-cover inset-0 absolute" />
+    </div>
+  )
+}
+
+export function TestArrayProviderConsumer() {
+  const { data, isLoading } = useDropsContextProvider()
+  return (
+    <div className="flex flex-col">
+      <h1 className="text-xl">Using Array Provider:</h1>
+      <p>Image is separate component with no props passed in.</p>
+      <br />
+      {!isLoading ? (
+        <div className="flex flex-row gap-6">
+          {/**
+           * @ts-ignore
+           */}
+          {data &&
+            data.map((edition: any) => (
+              <ConsumerImage
+                key={edition?.name}
+                src={edition?.editionMetadata?.imageURI}
+              />
+            ))}
+        </div>
+      ) : (
+        <p>...loading</p>
+      )}
+    </div>
+  )
+}