[all] add ipfsfetch

components/common/IpfsImage.tsx

@@ -0,0 +1,21 @@
+import { createVerifiedFetch, VerifiedFetch } from "@helia/verified-fetch";
+import { GatewayBase } from "@lib/config";
+import { CSSProperties } from "react";
+import { useAsyncRetry } from "react-use";
+
+let verifiedFetch: VerifiedFetch;
+
+export function IpfsImage(p: { className?: string; style?: CSSProperties; cid: string }) {
+  const res = useAsyncRetry(async () => {
+    if (!verifiedFetch) verifiedFetch = await createVerifiedFetch({ gateways: [GatewayBase, "https://gw.crust-gateway.com", "https://gw.crust-gateway.xyz"] });
+    const response = await verifiedFetch(p.cid.startsWith("ipfs://") ? p.cid : `ipfs://${p.cid}`, {});
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }, [p.cid]);
+  return (
+    <div className={p.className} style={p.style}>
+      {Boolean(res.value) && <img className={p.className} style={p.style} src={res.value} />}
+      {res.loading && <div className={`${p.className} bg-slate-500 animate-pulse`} style={p.style} />}
+    </div>
+  );
+}

components/pages/main/Buckets.tsx

@@ -16,6 +16,7 @@ import { useAccount } from "wagmi";
 import { MainLayout } from "./MainLayout";
 import classnames from "classnames";
 import algoWallet from "@lib/algorand/algoWallet";
+import { IpfsImage } from "@components/common/IpfsImage";
 
 const BucketCard = React.memo((p: { data: BucketDTO; className?: string }) => {
   const { data, className } = p;
@@ -31,7 +32,8 @@ const BucketCard = React.memo((p: { data: BucketDTO; className?: string }) => {
   };
   return (
     <div className={classnames("h-min p-5 md:p-2 border border-solid border-black-1", className)}>
-      <img className="w-full aspect-[360/531] object-contain" src={ipfsUrl(data.metadata.image.replace("ipfs://", ""))} />
+      {/* <img className="w-full aspect-[360/531] object-contain" src={ipfsUrl(data.metadata.image.replace("ipfs://", ""))} /> */}
+      <IpfsImage className="w-full aspect-[360/531] object-contain" cid={data.metadata.image}/>
       <div className=" text-lg font-semibold mt-[0.625rem] truncate">{`W3BUCKET(${bucketId})`}</div>
       <div className="flex text-sm my-[2px] justify-between">
         <div>Current Usage</div>

lib/hooks/useW3BucketAbi.ts

@@ -67,5 +67,5 @@ export function useW3BucketAbi() {
         "setBucketEditionPrices"
       ),
     };
-  }, [pc, pc.chain?.id, writeContractAsync]);
+  }, [pc, pc?.chain?.id, writeContractAsync]);
 }

package.json

@@ -14,6 +14,7 @@
     "@decooio/crust-fonts": "1.1.0",
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
+    "@helia/verified-fetch": "^2.0.0",
     "@metamask/detect-provider": "1.2.0",
     "@next/font": "13.0.6",
     "@perawallet/connect": "1.3.4",