From 878b56007c5609cd3d8b4ac35b09877885da1cf9 Mon Sep 17 00:00:00 2001 From: Ron Ramano Date: Sat, 29 Jun 2024 02:01:43 +0800 Subject: [PATCH 1/3] Update index.tsx --- src/pages/index.tsx | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 37d380f..5443dca 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -56,7 +56,8 @@ export default function Home() { }; const chaingraphUrl = "https://gql.chaingraph.pat.mn/v1/graphql"; - const ipfsGateway = "https://ipfs.io/ipfs/"; + const ipfsGateway = "https://w3s.link/ipfs/"; + useEffect(() => { const url = new URL(window.location.href); @@ -68,6 +69,26 @@ export default function Home() { fetchMetadata(readTokenId); },[]); + const ipfsGateways = [ + "https://w3s.link/ipfs/", + "https://nftstorage.link/ipfs/", + "https://ipfs.io/ipfs/" + ] + + async function* getIpfsGateway(ipfsGateways: string[], cid: string) { + + for (let url of ipfsGateways) { + try { + let response = await fetch(`${url}${cid}`, { method: 'HEAD' }); + if (response.ok) { + yield url; // Yield the accessible URL + } + } catch (error: any) { + console.error(`Error while checking ${url}: ${error.message}`); + } + } + } + async function fetchMetadata(tokenId:string){ let metadataInfo:tokenMetadata | undefined; let metaDataLocation= ""; @@ -87,8 +108,21 @@ export default function Home() { httpsUrl = authChain.at(-1)?.httpsUrl; if(!bcmrLocation || !httpsUrl) return; const providedHash = authChain.at(-1)?.contentHash; + + // use own gateway - if(bcmrLocation.startsWith("ipfs://")) httpsUrl = bcmrLocation.replace("ipfs://", ipfsGateway); + if(bcmrLocation.startsWith("ipfs://")) { + const cid = bcmrLocation.replace("ipfs://", "") + let ipfsGateway = '' + for await(let ig of getIpfsGateway(ipfsGateways, cid)) { + if (ig) { + ipfsGateway = ig + break + } + } + if (!ipfsGateway) throw new Error("No accessible ipfs gateway, please try again later.") + httpsUrl = bcmrLocation.replace("ipfs://", ipfsGateway); + } metaDataLocation = bcmrLocation; await BCMR.addMetadataRegistryFromUri(httpsUrl); metadataInfo = BCMR.getTokenInfo(tokenId) as tokenMetadata; From ec67159c28bddde5fab907ebc2580ea479e5150e Mon Sep 17 00:00:00 2001 From: Ron Ramano Date: Sat, 29 Jun 2024 02:10:15 +0800 Subject: [PATCH 2/3] Update index.tsx remove ipfsGateway var --- src/pages/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5443dca..ce52462 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -56,8 +56,6 @@ export default function Home() { }; const chaingraphUrl = "https://gql.chaingraph.pat.mn/v1/graphql"; - const ipfsGateway = "https://w3s.link/ipfs/"; - useEffect(() => { const url = new URL(window.location.href); From de693f3008349c8711e62a93a53a3307f7e8e7c6 Mon Sep 17 00:00:00 2001 From: ubuntu Date: Mon, 1 Jul 2024 20:27:07 +0800 Subject: [PATCH 3/3] use ipfs gateway fallback on token icon --- src/pages/index.tsx | 41 +++++++++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ce52462..d28fcce 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,7 @@ import Head from 'next/head' import { Inter } from '@next/font/google' import styles from '@/styles/Home.module.css' import { BCMR, utf8ToBin, sha256, binToHex } from 'mainnet-js' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { queryTotalSupplyFT, queryActiveMinting, querySupplyNFTs, queryAuthchainLength } from '../utils/queryChainGraph'; const inter = Inter({ subsets: ['latin'] }) @@ -43,6 +43,7 @@ export default function Home() { const [tokenId, setTokenId] = useState(""); const [tokenInfo, setTokenInfo] = useState(); const [metadataInfo, setMetadataInfo] = useState(); + const [tokenIconUri, setTokenIconUri] = useState("") const handleChange = (e:any) => { if((e.target as HTMLInputElement)){ @@ -56,7 +57,13 @@ export default function Home() { }; const chaingraphUrl = "https://gql.chaingraph.pat.mn/v1/graphql"; - + + const ipfsGateways = useMemo(() => [ + "https://w3s.link/ipfs/", + "https://nftstorage.link/ipfs/", + "https://ipfs.io/ipfs/" + ],[]) + useEffect(() => { const url = new URL(window.location.href); const params = new URLSearchParams(url.search); @@ -65,13 +72,29 @@ export default function Home() { setTokenId(readTokenId); lookUpTokenData(readTokenId); fetchMetadata(readTokenId); + },[]); - const ipfsGateways = [ - "https://w3s.link/ipfs/", - "https://nftstorage.link/ipfs/", - "https://ipfs.io/ipfs/" - ] + useEffect(() => { + // Set Icon + (async () => { + if(metadataInfo?.tokenMetadata?.uris?.icon) { + if (!metadataInfo?.tokenMetadata?.uris?.icon?.startsWith('ipfs://')) { + return setTokenIconUri(metadataInfo?.tokenMetadata?.uris?.icon) + } + const path = metadataInfo?.tokenMetadata?.uris?.icon.replace('ipfs://','') + for await(let ig of getIpfsGateway(ipfsGateways, path)) { + if (ig) { + setTokenIconUri(`${ig}${path}`) + break + } + } + } + })() + + }, [metadataInfo, ipfsGateways]) + + async function* getIpfsGateway(ipfsGateways: string[], cid: string) { @@ -266,9 +289,7 @@ export default function Home() { {metadataInfo.tokenMetadata.uris?.icon ? <> icon: + src={tokenIconUri} />

:null} {metadataInfo.tokenMetadata.uris ? <>