perf: use IPFS fetching lib (#512)

.env.mainnet

@@ -3,7 +3,6 @@ VITE_BLOCK_EXPLORER = "https://optimistic.etherscan.io/"
 VITE_WORLD_ADDRESS = 
 VITE_WORLD_BLOCK_NUMBER = 
 VITE_SPATIAL_DOMAIN = "https://geoweb.app/"
-VITE_IPFS_GATEWAY = https://gateway.pinata.cloud/ipfs
 VITE_GRAPH_URI=https://gateway-arbitrum.network.thegraph.com/api/6f359a9519137a5048fdc3d24f78f630/subgraphs/id/4DC8D9kNX7sw8ayCNgsWUNcHtJvQiDTwKTkWudWDowKC
 VITE_SSX_HOST = https://ssx.geoweb.network
 VITE_ANALYTICS_ID = geoweb.land

.env.testnet

@@ -4,7 +4,6 @@ VITE_WORLD_ADDRESS = 0x943e0b3F1926008f2e1bEFCBc55FA2A75CeC2452
 VITE_WORLD_BLOCK_NUMBER = 6992231
 VITE_SPATIAL_DOMAIN = "https://testnet.geoweb.app/"
 VITE_GRAPH_URI=https://gateway-arbitrum.network.thegraph.com/api/6f359a9519137a5048fdc3d24f78f630/subgraphs/id/Dv2u1QabAxCxjN59putrh24pLPuBCy8PidbEc4fZBFAo
-VITE_IPFS_GATEWAY = https://gateway.pinata.cloud/ipfs
 VITE_SSX_HOST = https://ssx-stg.geoweb.network
 VITE_ANALYTICS_ID =
 VITE_REFERRAL_HOST = https://referral-stg.geoweb.network

package.json

@@ -9,6 +9,7 @@
     "@geo-web/mud-world-base-contracts": "0.1.0",
     "@geo-web/mud-world-base-setup": "0.2.2",
     "@geo-web/sdk": "^4.4.0",
+    "@helia/verified-fetch": "^1.3.14",
     "@latticexyz/common": "2.0.0-next.11",
     "@latticexyz/protocol-parser": "2.0.0-next.11",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",

src/context/Allo.tsx

@@ -3,13 +3,14 @@ import { Address } from "viem";
 import { usePublicClient } from "wagmi";
 import { optimism, optimismSepolia } from "wagmi/chains";
 import { SQFSuperFluidStrategy } from "@allo-team/allo-v2-sdk/";
+import { createVerifiedFetch } from "@helia/verified-fetch";
 import { recipientIds } from "../lib/governance/recipientIds";
 import { sqfStrategyAbi } from "../lib/abi/sqfStrategy";
-import { getGatewayUrl } from "../lib/utils";
 import {
   RPC_URLS_HTTP,
   SQF_STRATEGY_ADDRESS,
   ALLO_POOL_ID,
+  IPFS_GATEWAYS,
 } from "../lib/constants";
 
 export type Recipient = {
@@ -128,14 +129,21 @@ export function AlloContextProvider({
 
         if (pointer) {
           try {
-            const detailsRes = await fetch(getGatewayUrl(pointer));
+            const verifiedFetch = await createVerifiedFetch({
+              gateways: IPFS_GATEWAYS,
+            });
+            const detailsRes = await verifiedFetch(pointer);
+
             const { name, description, image, website, social } =
               await detailsRes.json();
 
+            const imageRes = await verifiedFetch(image);
+            const imageBlob = await imageRes.blob();
+
             recipientsDetails.push({
               name,
               description,
-              image: getGatewayUrl(image),
+              image: URL.createObjectURL(imageBlob),
               website,
               social,
             });

src/hooks/geo-web-content/basicProfile.ts

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 import { Contracts } from "@geo-web/sdk/dist/contract/types";
-import { IPFS_GATEWAY } from "../../lib/constants";
+import { IPFS_GATEWAYS } from "../../lib/constants";
 import { ethers } from "ethers";
+import { createVerifiedFetch } from "@helia/verified-fetch";
 
 export type BasicProfile = { name?: string; external_url?: string };
 
@@ -76,9 +77,11 @@ function useBasicProfile(
         return basicProfile;
       }
 
-      const basicProfileRes = await fetch(
-        `${IPFS_GATEWAY}/${tokenURI.slice(7)}`
-      );
+      const verifiedFetch = await createVerifiedFetch({
+        gateways: IPFS_GATEWAYS,
+      });
+      const basicProfileRes = await verifiedFetch(tokenURI);
+
       basicProfile = await basicProfileRes.json();
     } catch (err) {
       console.warn(err);

src/lib/constants.ts

@@ -44,7 +44,14 @@ export const PAYMENT_TOKEN_FAUCET_URL = "https://faucet.paradigm.xyz";
 export const BETA_AGREEMENT_KEY = "storedBetaAgreement";
 export const STORAGE_WORKER_ENDPOINT =
   "https://storage-workers.geo-web.workers.dev";
-export const IPFS_GATEWAY = import.meta.env.VITE_IPFS_GATEWAY;
+export const IPFS_GATEWAYS = [
+  "https://trustless-gateway.link",
+  "https://gateway.pinata.cloud",
+  "https://storry.tv",
+  "https://cloudflare-ipfs.com",
+  "https://4everland.io",
+  "https://ipfs.runfission.com",
+];
 
 export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const SECONDS_IN_WEEK = 60 * 60 * 24 * 7;

src/lib/utils.ts

@@ -1,7 +1,6 @@
 import { formatEther } from "viem";
 import { BigNumber } from "ethers";
 import { Framework, NativeAssetSuperToken } from "@superfluid-finance/sdk-core";
-import { IPFS_GATEWAY } from "./constants";
 
 export enum TimeInterval {
   DAY = "/day",
@@ -98,10 +97,6 @@ export function calculateAuctionValue(
   return forSalePrice.sub(priceDecrease);
 }
 
-export function getGatewayUrl(uri: string) {
-  return uri.startsWith("ipfs://") ? `${IPFS_GATEWAY}/${uri.slice(7)}` : uri;
-}
-
 export function perSecondToPerMonth(amount: number) {
   return amount * 2628000;
 }