From 8b22f83fb67acc8f4b512a9f24aba0d67c4376e9 Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Sun, 2 Oct 2022 16:35:30 -0700 Subject: [PATCH 1/2] added decoupled UI option --- components/SimpleMint.tsx | 20 ++++++++++ package.json | 4 +- pages/_app.tsx | 1 + pages/index.tsx | 39 ++++++++++--------- styles/drop.css | 38 +++++++++++++++++++ tailwind.config.js | 1 + yarn.lock | 80 ++++++++++++++++++++++++++++++++++++--- 7 files changed, 160 insertions(+), 23 deletions(-) create mode 100644 components/SimpleMint.tsx create mode 100644 styles/drop.css diff --git a/components/SimpleMint.tsx b/components/SimpleMint.tsx new file mode 100644 index 0000000..d1483c3 --- /dev/null +++ b/components/SimpleMint.tsx @@ -0,0 +1,20 @@ +import { DropsComponents } from '@public-assembly/erc721-drops-minter' +import { DropsContractProvider } from '@public-assembly/zora-drops-utils' + +export function SimpleMintUi() { + return ( +
+ + +
+ ) +} + +export function SimpleMint() { + return ( + + + + + ) +} diff --git a/package.json b/package.json index 8362e4e..d18927a 100644 --- 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 index 219ef96..e7ce40c 100644 --- 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 index 7e724cb..170596c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,22 +1,27 @@ -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 ( -
- - {/* - Create Next App - - - */} - -
{JSON.stringify(data, null, 2)}
-
+
+

MY DROP

+
+ +
+ {TEST_MINT_CONTRACTS.map((edition: any) => + + )} +
) } -export default Home +export default Page diff --git a/styles/drop.css b/styles/drop.css new file mode 100644 index 0000000..9f0dddd --- /dev/null +++ b/styles/drop.css @@ -0,0 +1,38 @@ +/* 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; +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 601aa05..ff27b80 100644 --- 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}" ] } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index db768f7..52fd1d0 100644 --- 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" +mime-db@1.52.0: + 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" From e75a0af22ba340fbb6d0d1d1d68848e304e8ce91 Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Sun, 2 Oct 2022 16:54:37 -0700 Subject: [PATCH 2/2] demo layout --- components/Header.tsx | 2 +- components/SimpleMint.tsx | 21 ++++++++++++++++----- pages/index.tsx | 12 +++--------- styles/drop.css | 13 +++++++++++++ styles/globals.css | 1 + 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/components/Header.tsx b/components/Header.tsx index 2dc5a88..6a02524 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -3,7 +3,7 @@ import { ConnectButton } from './ConnectButton' export function Header() { return (
- Header + ✨ My funky mint page ✨
) diff --git a/components/SimpleMint.tsx b/components/SimpleMint.tsx index d1483c3..5f941e8 100644 --- a/components/SimpleMint.tsx +++ b/components/SimpleMint.tsx @@ -6,15 +6,26 @@ export function SimpleMintUi() {
+
) } -export function SimpleMint() { +export function SimpleMint({collectionAddress = '0xb7a791c3b5a0aa833e638250f982ebd29194f02c'}: {collectionAddress?: string}) { return ( - - - - +
+ + +
+ +
+ +
) } diff --git a/pages/index.tsx b/pages/index.tsx index 170596c..960e7aa 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,16 +9,10 @@ const TEST_MINT_CONTRACTS = [ function Page() { return ( -
-

MY DROP

-
- -
+
+ {TEST_MINT_CONTRACTS.map((edition: any) => - + )}
) diff --git a/styles/drop.css b/styles/drop.css index 9f0dddd..13ac0b8 100644 --- a/styles/drop.css +++ b/styles/drop.css @@ -35,4 +35,17 @@ 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; } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 9fea35b..ab7c98f 100644 --- 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 {