public-assembly · dblodorn · Oct 2, 2022 · Oct 2, 2022
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,7 +3,7 @@ import { ConnectButton } from './ConnectButton'
 export function Header() {
   return (
     <header className="flex flex-row justify-between items-center w-full px-8">
-      <span className="text-2xl">Header</span>
+      <span className="text-2xl" style={{fontFamily: 'luminari'}}>✨ My funky mint page ✨</span>
       <ConnectButton />
     </header>
   )

diff --git a/components/SimpleMint.tsx b/components/SimpleMint.tsx
@@ -0,0 +1,31 @@
+import { DropsComponents } from '@public-assembly/erc721-drops-minter'
+import { DropsContractProvider } from '@public-assembly/zora-drops-utils'
+
+export function SimpleMintUi() {
+  return (
+    <div style={{width: 400}}>
+      <DropsComponents.Thumbnail />
+      <DropsComponents.MintButton />
+      <DropsComponents.MintQuantity />
+    </div>
+  )
+}
+
+export function SimpleMint({collectionAddress = '0xb7a791c3b5a0aa833e638250f982ebd29194f02c'}: {collectionAddress?: string}) {
+  return (
+    <div
+      className="p-10 overflow-hidden border-4"
+      style={{
+        maxWidth: 500,
+        backgroundImage: `url(https://db13.mypinata.cloud/ipfs/QmYqWrUgUJkMcWosgFk85SDQFGRwjACzgTksp7aiuf9yRr)`
+      }}
+    >
+      <DropsContractProvider collectionAddress={collectionAddress}>
+        <SimpleMintUi />
+        <div>
+          <DropsComponents.SalesInfo />
+        </div>
+      </DropsContractProvider>
+    </div>
+  )
+}
diff --git a/package.json b/package.json
@@ -13,10 +13,12 @@
   "dependencies": {
     "@fontsource/ia-writer-mono": "^4.5.3",
     "@fontsource/inter": "^4.5.12",
-    "@public-assembly/zora-editions-audio-minter": "^0.0.0",
+    "@public-assembly/erc721-drops-minter": "^0.0.2",
     "@rainbow-me/rainbowkit": "^0.5.0",
     "@zoralabs/nft-drop-contracts": "^1.0.1",
     "ethers": "^5.7.0",
+    "graphql": "^16.6.0",
+    "graphql-request": "^5.0.0",
     "lodash": "^4.17.21",
     "next": "12.2.5",
     "nextjs-progressbar": "^0.0.14",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import 'styles/globals.css'
+import 'styles/drop.css'
 import type { AppProps } from 'next/app'
 import { AppWrapper, PageWrapper } from './../components'
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,22 +1,21 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import { useEditionQuery } from '@public-assembly/zora-editions-audio-minter'
+import { DropsMinter } from '@public-assembly/erc721-drops-minter'
+import { SimpleMint } from 'components/SimpleMint'
 
-const Home: NextPage = () => {
-  const { data } = useEditionQuery('0x674fb9ed86b847db9aee0a19e9055d5d2c0e6cc4')
-
+const TEST_MINT_CONTRACTS = [
+  '0x47191cb94c0b6925db9f15e000cf8e3e8864fc9b',
+  '0xb7a791c3b5a0aa833e638250f982ebd29194f02c',
+  '0x674fb9ed86b847db9aee0a19e9055d5d2c0e6cc4',
+]
+
+function Page() {
   return (
-    <div>
-      <Head>
-        {/*
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-        */}
-      </Head>
-      <div>{JSON.stringify(data, null, 2)}</div>
-    </div>
+    <section className="flex flex-row gap-4 p-4" style={{flexWrap: 'wrap'}}>
+
+      {TEST_MINT_CONTRACTS.map((edition: any) =>
+        <SimpleMint key={edition} collectionAddress={edition} />
+      )}
+    </section>
   )
 }
 
-export default Home
+export default Page
diff --git a/styles/drop.css b/styles/drop.css
@@ -0,0 +1,51 @@
+/* ADDING CUSTOM STYLES TO DROPS UI */
+.drops-ui__metadata--copy {
+  color: red;
+  font-family: verdana;
+  font-size: 10px;
+}
+
+.drops-ui__metadata--title {
+  color: purple;
+  font-family: 'Brush Script MT', cursive;
+}
+
+.drops-ui__thumbnail--component {
+  transform: rotate(-3deg);
+  filter: drop-shadow(0 2px 10px rgb(160, 0, 210));
+}
+
+.drops-ui__mint-button--component {
+  transform: rotate(3deg);
+  z-index: 100;
+  position: relative;
+}
+
+.drops-ui__mint-button--component button {
+  background-color: pink;
+  border-radius: 30px;
+  border: inset 3px green;
+  font-family: 'Brush Script MT', cursive;
+  filter: drop-shadow(0 2px 10px rgb(160, 0, 210));
+}
+
+.drops-ui__metadata--component {
+  background-color: #cbcbcb;
+  padding: 30px;
+  border-radius: 30px;
+  filter: drop-shadow(0 2px 10px rgb(160, 0, 210));
+  z-index: 10;
+}
+
+.drops-ui__sales-info--component {
+  background-color: pink;
+  padding: 20px;
+  overflow: hidden;
+  font-family: 'comic sans ms';
+}
+
+.drops-ui__sales-info--collection-address {
+  font-size: 30px;
+  line-height: 1;
+  color: red;
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -9,6 +9,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
     Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: lightgreen;
 }
 
 a {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,5 +3,6 @@ module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@public-assembly/erc721-drops-minter/**/*.{js,ts,jsx,tsx}"
   ]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -503,6 +503,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.12.tgz#a6236379bf710658db048d7087ec588754962cb6"
   integrity sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg==
 
+"@graphql-typed-document-node/core@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
+  integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"
@@ -785,10 +790,17 @@
   resolved "https://registry.yarnpkg.com/@pedrouid/environment/-/environment-1.0.1.tgz#858f0f8a057340e0b250398b75ead77d6f4342ec"
   integrity sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug==
 
-"@public-assembly/zora-editions-audio-minter@^0.0.0":
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/@public-assembly/zora-editions-audio-minter/-/zora-editions-audio-minter-0.0.0.tgz#3f4efd7c4b22fd52000e4b9b4356fde8516b6953"
-  integrity sha512-RZHtA7VflLWyfEiAmrYtNeBf/CXoF9nazywENGMGKhXm01HvjTCp9RnZJuS4I12eluJRmdacmngShe4ktZZ4mw==
+"@public-assembly/erc721-drops-minter@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@public-assembly/erc721-drops-minter/-/erc721-drops-minter-0.0.2.tgz#2a4185ea76f7f6d0ed72d01291856d1a818d15d0"
+  integrity sha512-X/dsoQ7ml8qPoEWdHJIerd1QfTDpsnwLtDfBMtFhxviDPfckicKJTKnbFHntCdyHN0mqDdfvqVIx4kBZhPi2gg==
+  dependencies:
+    "@public-assembly/zora-drops-utils" "^0.0.9"
+
+"@public-assembly/zora-drops-utils@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@public-assembly/zora-drops-utils/-/zora-drops-utils-0.0.9.tgz#80bf536104ed2219139b4040a6a7afdd1634aa2b"
+  integrity sha512-QMxDy5xDA5wccTyqYONhyz3SfxIoLTjXeMieLTkH9Z5O0tB2KaSZRxIWCKjAAbEaFosa1nGr0wQHva3HcWVSCQ==
 
 "@rainbow-me/rainbowkit@^0.5.0":
   version "0.5.0"
@@ -1525,6 +1537,11 @@ async-mutex@^0.2.6:
   dependencies:
     tslib "^2.0.0"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@^10.4.9:
   version "10.4.9"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.9.tgz#40f932f7d0535264823882031f9254ea72c693e5"
@@ -1980,6 +1997,13 @@ colorette@^2.0.16, colorette@^2.0.17:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 comma-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
@@ -2068,7 +2092,7 @@ create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-fetch@^3.1.4:
+cross-fetch@^3.1.4, cross-fetch@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
   integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
@@ -2185,6 +2209,11 @@ delay@^5.0.0:
   resolved "https://registry.yarnpkg.com/delay/-/delay-5.0.0.tgz#137045ef1b96e5071060dd5be60bf9334436bd1d"
   integrity sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 dequal@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
@@ -2858,6 +2887,11 @@ extend@^3.0.0:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
+extract-files@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
+  integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
+
 eyes@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
@@ -3005,6 +3039,15 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -3173,6 +3216,21 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphql-request@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-5.0.0.tgz#7504a807d0e11be11a3c448e900f0cc316aa18ef"
+  integrity sha512-SpVEnIo2J5k2+Zf76cUkdvIRaq5FMZvGQYnA4lUWYbc99m+fHh4CZYRRO/Ff4tCLQ613fzCm3SiDT64ubW5Gyw==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.1"
+    cross-fetch "^3.1.5"
+    extract-files "^9.0.0"
+    form-data "^3.0.0"
+
+graphql@^16.6.0:
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
+  integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -4313,6 +4371,18 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"