Add: hide/show pool

staqeprotocol · Jul 7, 2024 · 472ff86 · 472ff86
1 parent fd47204
commit 472ff86
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 68 deletions.
diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx
@@ -37,8 +37,6 @@ function PoolPage() {
 
   const needSwitch = currentId && chainId && currentId !== chainId;
 
-  console.log("needSwitch", needSwitch, currentId, chainId, chain);
-
   useMemo(() => {
     if (!chainId || !currentId || !chain) return;
     switchChain({ chainId: chain });

diff --git a/src/app/pools/page.tsx b/src/app/pools/page.tsx
@@ -144,13 +144,15 @@ const PoolsPage = () => {
         <div className="mt-2">
           <div className="grid grid-cols-2 gap-2">
             {pools &&
-              pools.map((pool, i) => (
-                <Card
-                  pool={pool}
-                  chain={account.chainId || chainId}
-                  key={pool.id}
-                />
-              ))}
+              pools.map((pool, i) =>
+                /^ipfs/.test(pool.tokenURI) ? (
+                  <Card
+                    pool={pool}
+                    chain={account.chainId || chainId}
+                    key={pool.id}
+                  />
+                ) : undefined
+              )}
           </div>
         </div>
         {pools && pools.length > 0 ? (

diff --git a/src/components/UI/Pool/Details/Details.tsx b/src/components/UI/Pool/Details/Details.tsx
@@ -5,6 +5,7 @@ import { usePoolData } from "@/src/hooks/usePools";
 import { useTimestamp } from "@/src/hooks/useTimestamps";
 import { Manage } from "@toqen/react";
 import Image from "next/image";
+import Link from "next/link";
 import { useMemo, useState } from "react";
 import {
   PiCoinsDuotone,
@@ -149,13 +150,7 @@ export const Details = () => {
                 <div className="flex text-sm">
                   <div>{launchBlock}</div>
                   <div className="text-xs text-neutral-500 ml-auto">
-                    <a
-                      href={`${pool?.tokenURI}`}
-                      target="_blank"
-                      className="link underline-offset-4 decoration-dotted"
-                    >
-                      Block #{pool?.launchBlock.toString()}
-                    </a>
+                    Block #{pool?.launchBlock.toString()}
                   </div>
                 </div>
               </div>
@@ -224,15 +219,15 @@ export const Details = () => {
                   {pool?.owner && pool?.owner === ZERO_ADDRESS ? (
                     <>NONE</>
                   ) : (
-                    <a
-                      href={`/`}
+                    <Link
+                      href={`/dashboard?account=${pool?.owner}`}
                       target="_blank"
                       className="link underline-offset-4 decoration-dotted"
                     >
                       {pool?.owner && pool?.owner === ZERO_ADDRESS
                         ? `NONE`
                         : pool?.owner}
-                    </a>
+                    </Link>
                   )}
                 </div>
               </div>

diff --git a/src/components/UI/Pool/Hero/Hero.tsx b/src/components/UI/Pool/Hero/Hero.tsx
@@ -1,4 +1,5 @@
 import { TOKEN_LOGO, ZERO_ADDRESS as ZERO } from "@/src/constants";
+import { useWriteStaqeProtocolEditPool } from "@/src/generated";
 import { useMetadata } from "@/src/hooks/useMetadata";
 import { usePoolData } from "@/src/hooks/usePools";
 import { useTimestamp } from "@/src/hooks/useTimestamps";
@@ -76,6 +77,8 @@ export const Hero = () => {
     return result;
   }, [pool]);
 
+  const { writeContract, status: offChain } = useWriteStaqeProtocolEditPool();
+
   return (
     <div className="flex flex-col w-full h-full">
       <div className="flex items-center overflow-hidden rounded-2xl w-full h-3/5 relative bg-slate-200/10">
@@ -100,7 +103,25 @@ export const Hero = () => {
           ></span>
         )}
       </div>
-      <div className="flex flex-row items-center p-4 mx-6 mb-2 -mt-16 overflow-hidden break-words rounded-2xl backdrop-blur-2xl backdrop-saturate-200 shadow-blur border-0 bg-slate-200/10 w-auto h-1/5">
+      <div className="relative flex flex-row items-center p-4 mx-6 mb-2 -mt-16 overflow-hidden break-words rounded-2xl backdrop-blur-2xl backdrop-saturate-200 shadow-blur border-0 bg-slate-200/10 w-auto h-1/5">
+        <span
+          className="absolute right-0 top-0 rounded-bl-2xl bg-slate-800/30 text-white/30 px-4 hover:bg-slate-800/10 hover:text-white cursor-pointer text-xs backdrop-blur-2xl backdrop-saturate-200 shadow-blur"
+          onClick={() => {
+            pool?.id &&
+              writeContract({
+                args: [
+                  BigInt(pool?.id),
+                  0n,
+                  /^_/.test(pool?.tokenURI)
+                    ? `${pool?.tokenURI.replace(/^_/, "")}`
+                    : `_${pool?.tokenURI}`,
+                ],
+              });
+          }}
+        >
+          {pool?.tokenURI &&
+            (/^_/.test(pool?.tokenURI) ? `show pool` : `hide pool`)}
+        </span>
         <div className="w-auto">
           <div className="bg-slate-200/10 h-24 w-24 mask mask-hexagon-2">
             {metadata && (

diff --git a/src/components/UI/Pools/Card.tsx b/src/components/UI/Pools/Card.tsx
@@ -15,8 +15,6 @@ const Stake = ({
   erc721?: IToken | undefined;
   metadata: IMetadata | undefined;
 }) => {
-  console.log("metadata", metadata);
-
   const logoERC20 = useMemo(() => {
     if (!metadata || !erc20) return TOKEN_LOGO;
     return metadata?.logoURIs?.[erc20.tokenAddress];
@@ -64,7 +62,7 @@ const Stake = ({
       {hasERC20 && (
         <div className="tooltip" data-tip={erc20.symbol}>
           <Image
-            src={logoERC20 ?? ""}
+            src={logoERC20 || `/images/STK.svg`}
             width={0}
             height={0}
             alt="ERC20"
@@ -78,7 +76,7 @@ const Stake = ({
           data-tip={erc721?.symbol}
         >
           <Image
-            src={logoERC721 ?? ""}
+            src={logoERC721 || `/images/NFT.svg`}
             width={0}
             height={0}
             alt="ERC721"
@@ -138,7 +136,7 @@ const Reward = ({
       {hasReward ? (
         <div className="tooltip" data-tip={erc20.symbol}>
           <Image
-            src={logoReward ?? ""}
+            src={logoReward || `/images/STK.svg`}
             width={0}
             height={0}
             alt="Reward"

diff --git a/src/metadata.ts b/src/metadata.ts
@@ -4,65 +4,74 @@ import { IMetadata, defaultMetadata } from "./interfaces";
 const isBrowser = typeof window !== "undefined";
 
 interface IStorage {
-    getItem: (key: string) => string | null;
-    setItem: (key: string, value: string) => void;
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
 }
 
 const localStorageFallback: IStorage = {
-    getItem: () => null,
-    setItem: () => { },
+  getItem: () => null,
+  setItem: () => {},
 };
 
 // window.localStorage
-const storage: IStorage = isBrowser ? window.localStorage : localStorageFallback;
+const storage: IStorage = isBrowser
+  ? window.localStorage
+  : localStorageFallback;
 
-export const fetchMetadata = async (tokenURI: string | undefined): Promise<IMetadata | undefined> => {
-    if (tokenURI === undefined || tokenURI === '') return;
+export const fetchMetadata = async (
+  tokenURI: string | undefined
+): Promise<IMetadata | undefined> => {
+  if (tokenURI === undefined || tokenURI === "") return;
 
-    const lastUpdateMetadata = storage.getItem("lastUpdateMetadata");
-    const nowDate = new Date().getTime();
-    const updDate = new Date(parseInt(lastUpdateMetadata || "0", 10)).getTime();
-    const shouldFetch = nowDate - updDate > 0; // 86400000
+  const lastUpdateMetadata = storage.getItem("lastUpdateMetadata");
+  const nowDate = new Date().getTime();
+  const updDate = new Date(parseInt(lastUpdateMetadata || "0", 10)).getTime();
+  const shouldFetch = nowDate - updDate > 0; // 86400000
 
-    if (!shouldFetch) return defaultMetadata;
+  if (!shouldFetch) return defaultMetadata;
 
-    const response = await fetch(`${GATEWAY_URL}${tokenURI.replace(/ipfs:\/\//g, "")}`);
+  const response = /^ipfs/.test(tokenURI)
+    ? await fetch(`${GATEWAY_URL}${tokenURI.replace(/ipfs:\/\//g, "")}`)
+    : null;
 
-    if (!response.ok) return defaultMetadata;
+  if (!response || !response.ok) return defaultMetadata;
 
-    const metadata: IMetadata = await response.json();
+  const metadata: IMetadata = await response.json();
 
-    metadata.image = /^ipfs/.test(metadata.image)
-        ? `${GATEWAY_URL}${metadata.image.replace(/ipfs:\/\//g, "")}`
-        : metadata.image;
-    metadata.banner_image = /^ipfs/.test(metadata.banner_image ?? "")
-        ? `${GATEWAY_URL}${(metadata.banner_image ?? "").replace(/ipfs:\/\//g, "")}`
-        : metadata.banner_image;
+  metadata.image = /^ipfs/.test(metadata.image)
+    ? `${GATEWAY_URL}${metadata.image.replace(/ipfs:\/\//g, "")}`
+    : metadata.image;
+  metadata.banner_image = /^ipfs/.test(metadata.banner_image ?? "")
+    ? `${GATEWAY_URL}${(metadata.banner_image ?? "").replace(/ipfs:\/\//g, "")}`
+    : metadata.banner_image;
 
-    if (metadata.tokens && metadata.tokens.length) {
-        metadata.tokens.forEach(token => {
-            if (token.address && token.logoURI) {
-                if (!metadata.logoURIs) {
-                    metadata.logoURIs = {}
-                }
-                metadata.logoURIs[token.address] = `${GATEWAY_URL}${(token.logoURI ?? "").replace(/ipfs:\/\//g, "")}`;
-            }
-        })
-    }
+  if (metadata.tokens && metadata.tokens.length) {
+    metadata.tokens.forEach((token) => {
+      if (token.address && token.logoURI) {
+        if (!metadata.logoURIs) {
+          metadata.logoURIs = {};
+        }
+        metadata.logoURIs[token.address] =
+          `${GATEWAY_URL}${(token.logoURI ?? "").replace(/ipfs:\/\//g, "")}`;
+      }
+    });
+  }
 
-    storage.setItem(tokenURI, JSON.stringify(metadata));
-    storage.setItem("lastUpdateMetadata", nowDate.toString());
+  storage.setItem(tokenURI, JSON.stringify(metadata));
+  storage.setItem("lastUpdateMetadata", nowDate.toString());
 
-    return metadata;
+  return metadata;
 };
 
-export const getMetadata = async (tokenURI: string): Promise<IMetadata | undefined> => {
-    try {
-        const storedMetadata = storage.getItem(tokenURI);
-        // return storedMetadata ? JSON.parse(storedMetadata) : await fetchMetadata(tokenURI);
-        return await fetchMetadata(tokenURI);
-    } catch (error) {
-        console.error("Failed to fetch or parse metadata:", error);
-        return defaultMetadata;
-    }
+export const getMetadata = async (
+  tokenURI: string
+): Promise<IMetadata | undefined> => {
+  try {
+    const storedMetadata = storage.getItem(tokenURI);
+    // return storedMetadata ? JSON.parse(storedMetadata) : await fetchMetadata(tokenURI);
+    return await fetchMetadata(tokenURI);
+  } catch (error) {
+    console.error("Failed to fetch or parse metadata:", error);
+    return defaultMetadata;
+  }
 };