-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from 33-Labs/feature/collection_page
feat: new collection page
- Loading branch information
Showing
24 changed files
with
1,440 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,69 @@ | ||
| import Image from "next/image" | ||
| import CollectionDisplayView from "./CollectionDisplayView" | ||
| import publicConfig from "../../publicConfig" | ||
| import { getImageSrcFromMetadataViewsFile } from "../../lib/utils" | ||
| import { useState } from "react" | ||
| import { useRouter } from "next/router" | ||
| import { ArrowRightIcon } from "@heroicons/react/outline" | ||
|
|
||
| export default function CollectionView(props) { | ||
| const { collection } = props | ||
|
|
||
| const [showNFTs, setShowNFTs] = useState(false) | ||
| const [needRelink, setNeedRelink] = useState(false) | ||
| const router = useRouter() | ||
| const { account, collection } = props | ||
|
|
||
| return ( | ||
| <div className="flex flex-col max-w-[1094px] min-w-[1076px] gap-y-3 p-4 shadow-md rounded-2xl bg-white"> | ||
|
|
||
| <div className="flex flex-col max-w-[1094px] min-w-[1076px] gap-y-3 p-4 shadow-md rounded-2xl bg-white" | ||
| onClick={() => { | ||
| if (collection.tokenIDs.length == 0) { | ||
| return | ||
| } | ||
| router.push({ | ||
| pathname: `${router.pathname}/[collection]`, | ||
| query: { account: account, collection: collection.path.replace("/storage/", "") } | ||
| }, undefined, { shallow: true }) | ||
| }} | ||
| > | ||
| <div className="flex gap-x-3 justify-between"> | ||
| <div className="flex items-center gap-x-3"> | ||
| <div className="w-11 rounded-full overflow-hidden aspect-square relative"> | ||
| <Image src={collection.squareImage ? getImageSrcFromMetadataViewsFile(collection.squareImage.file) : "/token_placeholder.png"} alt="" fill sizes="10vw" priority={true} /> | ||
| <Image src={collection.squareImage ? getImageSrcFromMetadataViewsFile(collection.squareImage.file) : "/token_placeholder.png"} alt="" fill sizes="5vw" /> | ||
| </div> | ||
| <div className="flex flex-col w-full"> | ||
| { | ||
| collection.collectionIdentifier ? | ||
| collection.name ? | ||
| <label className="text-lg font-bold"> | ||
| {`${collection.collectionIdentifier} (${collection.tokenIDs.length})`} | ||
| {`${collection.name} (${collection.tokenIDs.length})`} | ||
| </label> | ||
| : <label className="font-bold text-lg">{`${collection.contractName} (${collection.tokenIDs.length})`}</label> | ||
| } | ||
| <label> | ||
| { | ||
| collection.collectionIdentifier ? | ||
| <a | ||
| href={`${publicConfig.flowscanURL}/contract/${collection.uuid}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="underline font-sm font-bold decoration-drizzle decoration-2"> | ||
| {collection.uuid} | ||
| </a> : collection.path | ||
| } | ||
|
|
||
| {collection.path} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| <div className="flex gap-x-1 items-center"> | ||
| { | ||
| collection.tokenIDs.length > 0 ? | ||
| <button | ||
| type="button" | ||
| className={"text-black bg-drizzle hover:bg-drizzle-dark px-3 py-2 text-sm rounded-2xl font-semibold shrink-0"} | ||
| onClick={async () => { | ||
| setShowNFTs(!showNFTs) | ||
| }} | ||
| > | ||
| { | ||
| showNFTs ? "Hide NFTs" : "Show NFTs" | ||
| } | ||
| </button> : null | ||
| } | ||
|
|
||
| <div className="flex gap-x-2 items-center"> | ||
| { | ||
| collection.collectionIdentifier ? | ||
| <label className={`cursor-pointer text-white bg-catalog hover:bg-catalog-dark px-3 py-2 text-sm rounded-2xl font-semibold shrink-0`}> | ||
| <a href={`${publicConfig.nftCatalogURL}/${collection.collectionIdentifier}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| View on NFTCatalog | ||
| </a> | ||
| <label className={`cursor-pointer shrink-0`}> | ||
| <div className="h-[24px] aspect-square shrink-0 relative" | ||
| onClick={(event) => { | ||
| window.open(`${publicConfig.nftCatalogURL}/${collection.collectionIdentifier}`) | ||
| event.stopPropagation() | ||
| }}> | ||
| <Image src={"/nft-catalog.png"} alt="" fill sizes="5vw" className="object-contain" /> | ||
| </div> | ||
| </label> : null | ||
| } | ||
| { | ||
| <button | ||
| type="button" | ||
| className={"text-drizzle disabled:text-drizzle-light shrink-0"} | ||
| disabled={collection.tokenIDs.length == 0} | ||
| onClick={async () => { | ||
| }} | ||
| > | ||
| <ArrowRightIcon className=" w-[24px] aspect-square shrink-0" /> | ||
| </button> | ||
| } | ||
| </div> | ||
| </div> | ||
| { | ||
| showNFTs && collection.collectionIdentifier && needRelink ? | ||
| <label className="text-rose-500">This collection need | ||
| <a href={`${publicConfig.linkURL}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="underline font-bold decoration-drizzle decoration-2" | ||
| > | ||
| {`RELINK`} | ||
| </a> | ||
| to show the metadata</label> : null | ||
| } | ||
| { | ||
| showNFTs ? | ||
| <CollectionDisplayView collection={collection} setNeedRelink={setNeedRelink} /> : null | ||
| } | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
b5602deThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
flowview – ./
flowview-git-main-33lab.vercel.app
flowview.app
flowview.vercel.app
flowview-33lab.vercel.app
www.flowview.app