feat: new collection page

components/Footer.js

@@ -51,7 +51,7 @@ export default function Footer() {
             rel="noopener noreferrer"
           >
             <div className="w-[20px] h-[20px] relative">
-              <Image className="object-contain" src="/twitter.png" alt="" fill sizes="10vw" />
+              <Image className="object-contain" src="/twitter.png" alt="" fill sizes="5vw" />
             </div>
           </a>
           <a href="https://bayou33.app"
@@ -67,7 +67,7 @@ export default function Footer() {
             rel="noopener noreferrer"
           >
             <div className="min-w-[20px]">
-              <Image src="/drizzle.png" alt="" width={20} height={20} priority />
+              <Image src="/drizzle.png" alt="" width={20} height={20} />
             </div>
           </a>
         </div>

components/NavigationBar.js

@@ -91,7 +91,7 @@ export default function NavigationBar() {
       <div className="flex items-center gap-x-1 sm:gap-x-2">
         <Link href="/">
           <div className="w-[36px] sm:w-[50px] aspect-square relative">
-            <Image src="/logo.png" alt="" fill sizes="33vw" priority={true} />
+            <Image src="/logo.png" alt="" fill sizes="16vw" priority={true} />
           </div>
         </Link>
 

components/TokenList.js

@@ -1,88 +1,12 @@
-import { useEffect, useState } from "react"
 import Image from 'next/image'
-import { classNames, getItemsInPage } from '../lib/utils'
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid"
 import publicConfig from "../publicConfig"
-import Decimal from "decimal.js"
-import { Switch } from "@headlessui/react"
 
 export default function TokenList(props) {
   const { tokens } = props
-  const [currentPage, setCurrentPage] = useState(1)
-  const [hideZeroBalance, setHideZeroBalance] = useState(false)
-  const [filteredTokens, setFilteredTokens] = useState(tokens)
-
-  useEffect(() => {
-    if (hideZeroBalance) {
-      setFilteredTokens(tokens.filter((t) => !(new Decimal(t.balance).isZero())))
-    } else {
-      setFilteredTokens(tokens)
-    }
-  }, [tokens, hideZeroBalance])
-
-  const pageSize = 10
 
   return (
-    <div className="p-2 w-full overflow-auto h-screen">
-      <div className="flex gap-x-3 justify-between flex-wrap gap-y-3">
-        <div className="flex flex-col gap-y-2 sm:flex-row sm:gap-x-2 sm:items-center justify-center">
-          <h1 className="shrink-0 text-xl sm:text-2xl font-bold text-gray-900">
-            {`Tokens ${filteredTokens.length > 0 ? `(${filteredTokens.length})` : ""}`}
-          </h1>
-          <div className="flex gap-x-2 items-center">
-            <label className="shrink-0 block text-gray-600 text-base font-normal font-flow">
-              Hide 0 balance
-            </label>
-            <Switch
-              checked={hideZeroBalance}
-              onChange={async () => {
-                setHideZeroBalance(!hideZeroBalance)
-                setCurrentPage(1)
-              }}
-              className={classNames(
-                hideZeroBalance ? 'bg-drizzle' : 'bg-gray-200',
-                'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-drizzle'
-              )}
-            >
-              <span
-                aria-hidden="true"
-                className={classNames(
-                  hideZeroBalance ? 'translate-x-5' : 'translate-x-0',
-                  'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
-                )}
-              />
-            </Switch>
-          </div>
-        </div>
-        <div className="hidden sm:flex sm:gap-x-1 sm:items-center">
-          <label className={`cursor-pointer text-black bg-flow hover:bg-green-500 px-3 py-2 text-sm rounded-2xl font-semibold shrink-0`}>
-            <a href={`${publicConfig.bayouURL}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Bulk transfer
-            </a>
-          </label>
-          <label className={`cursor-pointer text-black bg-drizzle hover:bg-drizzle-dark px-3 py-2 text-sm rounded-2xl font-semibold shrink-0`}>
-            <a href={`${publicConfig.drizzleURL}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Create airdrop
-            </a>
-          </label>
-          <label className={`cursor-pointer text-white bg-increment hover:bg-blue-800 px-3 py-2 text-sm rounded-2xl font-semibold shrink-0`}>
-            <a href={`${publicConfig.incrementURL}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Trade at Increment
-            </a>
-          </label>
-        </div>
-      </div>
-
-      {filteredTokens.length > 0 ?
+    <div>
+      {tokens.length > 0 ?
         <div className="mt-4 flex flex-col w-full shrink-0">
           <div className="px-1 overflow-x-auto">
             <div className="inline-block min-w-full py-2 align-middle">
@@ -102,12 +26,12 @@ export default function TokenList(props) {
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-gray-200 bg-white">
-                    {getItemsInPage(filteredTokens, currentPage, pageSize).map((token, index) => (
+                    {tokens.map((token, index) => (
                       <tr key={`tokens-${index}`}>
                         <td className="py-4 px-3 text-sm">
                           <div className="flex items-center">
                             <div className="h-6 w-6 flex-shrink-0 relative">
-                              <Image className="rounded-lg object-contain" src={token.logoURL || "/token_placeholder.png"} alt="" fill sizes="10vw" />
+                              <Image className="rounded-lg object-contain" src={token.logoURL || "/token_placeholder.png"} alt="" fill sizes="5vw" />
                             </div>
                             <div className="flex flex-col ml-2">
                               <label className="block font-bold text-base text-gray-900 break-words max-w-[300px] min-w-[60px]">{token.symbol || token.contractName}</label>
@@ -135,38 +59,6 @@ export default function TokenList(props) {
               </div>
             </div>
           </div>
-          {filteredTokens.length > pageSize ?
-            <div className="mt-2 flex justify-between">
-              <button
-                className="bg-gray-50 p-2 rounded-full overflow-hidden shadow ring-1 ring-black ring-opacity-5"
-                disabled={currentPage == 1}
-                onClick={() => {
-                  if (currentPage == 1) { return }
-                  setCurrentPage(currentPage - 1)
-                }}
-              >
-                <ArrowLeftIcon
-                  className={`h-5 w-5 ${currentPage == 1 ? "text-gray-400" : "text-black"}`}
-                />
-              </button>
-              <button
-                className="bg-gray-50 h-9 w-9 rounded-full overflow-hidden shadow ring-1 ring-black ring-opacity-5"
-                disabled={true}
-              >{currentPage}</button>
-              <button
-                className="bg-gray-50 p-2 rounded-full overflow-hidden shadow ring-1 ring-black ring-opacity-5"
-                disabled={currentPage * pageSize >= filteredTokens.length}
-                onClick={() => {
-                  if (currentPage * pageSize >= filteredTokens.length) {
-                    return
-                  }
-                  setCurrentPage(currentPage + 1)
-                }}
-              >
-                <ArrowRightIcon className={`h-5 w-5 ${currentPage * pageSize >= filteredTokens.length ? "text-gray-400" : "text-black"}`} />
-              </button>
-            </div> : null
-          }
         </div> :
         <div className="flex mt-10 h-[70px] text-gray-400 text-base justify-center">
           Nothing found

components/common/CollectionView.js

@@ -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&nbsp;
-            <a href={`${publicConfig.linkURL}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline font-bold decoration-drizzle decoration-2"
-            >
-              {`RELINK`}
-            </a>
-            &nbsp;to show the metadata</label> : null
-      }
-      {
-        showNFTs ?
-          <CollectionDisplayView collection={collection} setNeedRelink={setNeedRelink} /> : null
-      }
     </div>
   )
 }

components/common/Key.js → components/common/KeyView.js

@@ -37,7 +37,7 @@ const dataField = (title, value) => {
   )
 }
 
-export default function Key(props) {
+export default function KeyView(props) {
   const [transactionInProgress, setTransactionInProgress] = useRecoilState(transactionInProgressState)
   const [, setTransactionStatus] = useRecoilState(transactionStatusState)
   const [, setShowBasicNotification] = useRecoilState(showBasicNotificationState)