From c6099427109a2bf9386cc14d448e538198fd7189 Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Tue, 27 Sep 2022 17:40:50 -0700 Subject: [PATCH 1/7] initial implementation of audio player ui --- package.json | 2 ++ pages/index.tsx | 22 ++++++++++++++-------- tailwind.config.js | 1 + utils/fakePlaylist.ts | 24 ++++++++++++++++++++++++ yarn.lock | 10 ++++++++++ 5 files changed, 51 insertions(+), 8 deletions(-) create mode 100644 utils/fakePlaylist.ts diff --git a/package.json b/package.json index 8362e4e..b0b7a54 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "@fontsource/ia-writer-mono": "^4.5.3", "@fontsource/inter": "^4.5.12", + "@public-assembly/audio-player-ui": "^0.0.4", "@public-assembly/zora-editions-audio-minter": "^0.0.0", "@rainbow-me/rainbowkit": "^0.5.0", "@zoralabs/nft-drop-contracts": "^1.0.1", @@ -22,6 +23,7 @@ "nextjs-progressbar": "^0.0.14", "react": "18.2.0", "react-dom": "18.2.0", + "react-icons": "^4.4.0", "swr": "^1.3.0", "wagmi": "^0.6.4" }, diff --git a/pages/index.tsx b/pages/index.tsx index 7e724cb..340a195 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,20 +1,26 @@ import type { NextPage } from 'next' import Head from 'next/head' -import { useEditionQuery } from '@public-assembly/zora-editions-audio-minter' +import { AudioPlayer } from '@public-assembly/audio-player-ui' +import { fakePlaylist } from 'utils/fakePlaylist' +import { useState } from 'react' const Home: NextPage = () => { - const { data } = useEditionQuery('0x674fb9ed86b847db9aee0a19e9055d5d2c0e6cc4') + const [nft, setNFT] = useState(fakePlaylist[0]) return (
- {/* - Create Next App - - - */} + Public Assembly: Audio Player UI -
{JSON.stringify(data, null, 2)}
+ {fakePlaylist.map((nft) => ( +
setNFT(nft)}> + {nft.artist} - {nft.title} +
+ ))} +
) } diff --git a/tailwind.config.js b/tailwind.config.js index 601aa05..c232efd 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}", + "@public-assembly/zora-editions-audio-minter" ] } \ No newline at end of file diff --git a/utils/fakePlaylist.ts b/utils/fakePlaylist.ts new file mode 100644 index 0000000..72847f3 --- /dev/null +++ b/utils/fakePlaylist.ts @@ -0,0 +1,24 @@ +export const fakePlaylist = [ + { + id: '1', + artist: 'Public Assembly', + title: 'First track', + image: 'https://i.imgur.com/1Q9ZQ9r.png', + audioSrc: + 'https://arena-attachments.s3.amazonaws.com/18170014/30a9e158e4001a12a1cb9e2c2f05586a.wav?1663852383', + }, + { + id: '2', + artist: 'Miles ', + title: 'Midlife crisis', + image: 'https://i.imgur.com/1Q9ZQ9r.png', + audioSrc: 'https://radio-strapi-bucket.s3.sa-east-1.amazonaws.com/53_cdd3067699.mp3', + }, + { + id: '3', + artist: 'George ', + title: 'Hi, last track', + image: 'https://i.imgur.com/1Q9ZQ9r.png', + audioSrc: 'https://radio-strapi-bucket.s3.sa-east-1.amazonaws.com/51_4c5c912f6d.mp3', + }, +] \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index db768f7..cd23c9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -785,6 +785,11 @@ resolved "https://registry.yarnpkg.com/@pedrouid/environment/-/environment-1.0.1.tgz#858f0f8a057340e0b250398b75ead77d6f4342ec" integrity sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug== +"@public-assembly/audio-player-ui@^0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@public-assembly/audio-player-ui/-/audio-player-ui-0.0.4.tgz#5f5c279bad394308ceb121f03acf712ece37a6f6" + integrity sha512-zo5FPbHVvbmSbUhf+uFi0cGG0DlpQUkizL6c2d4Cyo5ynMEyavpfZdEvuwn7md+NcpX1vJ1vUgcEmPodMXDcKQ== + "@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" @@ -4939,6 +4944,11 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-icons@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703" + integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From d192e4967a225453b575dcb88926e17e6733b694 Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Tue, 27 Sep 2022 17:42:45 -0700 Subject: [PATCH 2/7] remove audio minter package: deleted --- package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index b0b7a54..38d8b13 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@fontsource/ia-writer-mono": "^4.5.3", "@fontsource/inter": "^4.5.12", "@public-assembly/audio-player-ui": "^0.0.4", - "@public-assembly/zora-editions-audio-minter": "^0.0.0", "@rainbow-me/rainbowkit": "^0.5.0", "@zoralabs/nft-drop-contracts": "^1.0.1", "ethers": "^5.7.0", diff --git a/yarn.lock b/yarn.lock index cd23c9a..ffc9d79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -790,11 +790,6 @@ resolved "https://registry.yarnpkg.com/@public-assembly/audio-player-ui/-/audio-player-ui-0.0.4.tgz#5f5c279bad394308ceb121f03acf712ece37a6f6" integrity sha512-zo5FPbHVvbmSbUhf+uFi0cGG0DlpQUkizL6c2d4Cyo5ynMEyavpfZdEvuwn7md+NcpX1vJ1vUgcEmPodMXDcKQ== -"@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== - "@rainbow-me/rainbowkit@^0.5.0": version "0.5.0" resolved "https://registry.yarnpkg.com/@rainbow-me/rainbowkit/-/rainbowkit-0.5.0.tgz#6fcb2ec343e789ba1fa260d8bfa36abab2b79a48" From 4c269a0f87797a928b81b77ec5308198c8b7b87c Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Wed, 28 Sep 2022 11:12:32 -0700 Subject: [PATCH 3/7] add audioplayer via node_modules to tailwind config --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index c232efd..a6fb1b8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,6 @@ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", - "@public-assembly/zora-editions-audio-minter" + "./node_modules/@public-assembly/zora-editions-audio-minter" ] } \ No newline at end of file From ea83c8e1aa2265dd49a60c38ec00e2d5e91b6447 Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Wed, 28 Sep 2022 11:14:51 -0700 Subject: [PATCH 4/7] specify correct package in tailwind config --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index a6fb1b8..4402ce4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,6 @@ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", - "./node_modules/@public-assembly/zora-editions-audio-minter" + "./node_modules/@public-assembly/audio-player-ui" ] } \ No newline at end of file From c67e755d0f05359496d3a530329264d11baecfba Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Wed, 28 Sep 2022 11:33:19 -0700 Subject: [PATCH 5/7] add /**/*.{js,ts,jsx,tsx} to package specification --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 4402ce4..aebe78a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,6 @@ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", - "./node_modules/@public-assembly/audio-player-ui" + "./node_modules/@public-assembly/audio-player-ui/**/*.{js,ts,jsx,tsx}" ] } \ No newline at end of file From 64454a34c82cc4dc259418ad8061dd837e4a157e Mon Sep 17 00:00:00 2001 From: Dain Blodorn Kim Date: Wed, 28 Sep 2022 18:13:41 -0700 Subject: [PATCH 6/7] add ens name conversion --- abi/CurationManager.json | 314 ++++++++++++++++++++++++++++++++++++ components/Header.tsx | 3 +- components/Navigation.tsx | 29 ++++ components/PageWrapper.tsx | 2 +- components/TrackListing.tsx | 33 ++++ package.json | 5 +- pages/index.tsx | 52 +++--- pages/mock-playlist.tsx | 28 ++++ yarn.lock | 78 ++++++++- 9 files changed, 512 insertions(+), 32 deletions(-) create mode 100644 abi/CurationManager.json create mode 100644 components/Navigation.tsx create mode 100644 components/TrackListing.tsx create mode 100644 pages/mock-playlist.tsx diff --git a/abi/CurationManager.json b/abi/CurationManager.json new file mode 100644 index 0000000..79c7d28 --- /dev/null +++ b/abi/CurationManager.json @@ -0,0 +1,314 @@ +{ + "abi": [ + { + "inputs": [ + { "internalType": "string", "name": "_title", "type": "string" }, + { + "internalType": "contract IERC721", + "name": "_curationPass", + "type": "address" + }, + { "internalType": "uint256", "name": "_curationLimit", "type": "uint256" }, + { "internalType": "bool", "name": "_isActive", "type": "bool" } + ], + "stateMutability": "nonpayable", + "type": "constructor" + }, + { "inputs": [], "name": "Access_MissingPass", "type": "error" }, + { "inputs": [], "name": "Access_Unauthorized", "type": "error" }, + { "inputs": [], "name": "CurationLimitExceeded", "type": "error" }, + { "inputs": [], "name": "Finalized", "type": "error" }, + { "inputs": [], "name": "Inactive", "type": "error" }, + { "inputs": [], "name": "ListingAlreadyExists", "type": "error" }, + { + "anonymous": false, + "inputs": [ + { + "indexed": false, + "internalType": "address", + "name": "sender", + "type": "address" + } + ], + "name": "CurationFinalized", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "sender", + "type": "address" + }, + { + "indexed": false, + "internalType": "uint256", + "name": "curationLimit", + "type": "uint256" + } + ], + "name": "CurationLimitUpdated", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "sender", + "type": "address" + }, + { + "indexed": false, + "internalType": "address", + "name": "curationPass", + "type": "address" + } + ], + "name": "CurationPassUpdated", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": false, + "internalType": "address", + "name": "sender", + "type": "address" + } + ], + "name": "CurationPaused", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": false, + "internalType": "address", + "name": "sender", + "type": "address" + } + ], + "name": "CurationResumed", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "curator", + "type": "address" + }, + { + "indexed": true, + "internalType": "address", + "name": "listingAddress", + "type": "address" + } + ], + "name": "ListingAdded", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "curator", + "type": "address" + }, + { + "indexed": true, + "internalType": "address", + "name": "listingAddress", + "type": "address" + } + ], + "name": "ListingRemoved", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "previousOwner", + "type": "address" + }, + { + "indexed": true, + "internalType": "address", + "name": "newOwner", + "type": "address" + } + ], + "name": "OwnershipTransferred", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "internalType": "address", + "name": "sender", + "type": "address" + }, + { "indexed": false, "internalType": "string", "name": "title", "type": "string" } + ], + "name": "TitleUpdated", + "type": "event" + }, + { + "inputs": [{ "internalType": "address", "name": "listing", "type": "address" }], + "name": "addListing", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "curationLimit", + "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [], + "name": "curationPass", + "outputs": [{ "internalType": "contract IERC721", "name": "", "type": "address" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [], + "name": "finalizeCuration", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "flipIsActiveBool", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "isActive", + "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [], + "name": "isFinalized", + "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [{ "internalType": "address", "name": "", "type": "address" }], + "name": "listingCurators", + "outputs": [{ "internalType": "address", "name": "", "type": "address" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }], + "name": "listings", + "outputs": [{ "internalType": "address", "name": "", "type": "address" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [{ "internalType": "address", "name": "listing", "type": "address" }], + "name": "onwerAddListing", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "owner", + "outputs": [{ "internalType": "address", "name": "", "type": "address" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [{ "internalType": "address", "name": "listing", "type": "address" }], + "name": "ownerRemoveListing", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [{ "internalType": "address", "name": "listing", "type": "address" }], + "name": "removeListing", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "renounceOwnership", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "title", + "outputs": [{ "internalType": "string", "name": "", "type": "string" }], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [{ "internalType": "address", "name": "newOwner", "type": "address" }], + "name": "transferOwnership", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [{ "internalType": "uint256", "name": "_newLimit", "type": "uint256" }], + "name": "updateCurationLimit", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [ + { "internalType": "contract IERC721", "name": "_curationPass", "type": "address" } + ], + "name": "updateCurationPass", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [{ "internalType": "string", "name": "_title", "type": "string" }], + "name": "updateTitle", + "outputs": [], + "stateMutability": "nonpayable", + "type": "function" + }, + { + "inputs": [], + "name": "viewAllListings", + "outputs": [{ "internalType": "address[]", "name": "", "type": "address[]" }], + "stateMutability": "view", + "type": "function" + } + ] +} diff --git a/components/Header.tsx b/components/Header.tsx index 2dc5a88..7e177ed 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,9 +1,10 @@ import { ConnectButton } from './ConnectButton' +import { Navigation } from './Navigation' export function Header() { return (
- Header +
) diff --git a/components/Navigation.tsx b/components/Navigation.tsx new file mode 100644 index 0000000..daedde3 --- /dev/null +++ b/components/Navigation.tsx @@ -0,0 +1,29 @@ +import Link from "next/link" +import { useRouter } from "next/router" + +const pages = [ + { + slug: '/', + title: 'Drops Playlist' + }, + { + slug: '/mock-playlist', + title: 'Mock Playlist' + }, +] + +export function Navigation() { + const router = useRouter() + + return ( +
+ {pages.map((page) => + + {page.title} + + )} +
+ ) +} \ No newline at end of file diff --git a/components/PageWrapper.tsx b/components/PageWrapper.tsx index d1d21a0..0f9e7af 100644 --- a/components/PageWrapper.tsx +++ b/components/PageWrapper.tsx @@ -5,7 +5,7 @@ export function PageWrapper({ children, ...props }: {children?: JSX.Element}) { return ( <>
-
+
{children}