Improves tokenURI / imageURI resolution (#363)

Some contracts return ipfs-urls. These cannot just be fetched.
As a first solution we always rewrite these to infura-ipfs URIs

src/__tests__/utils.test.ts

@@ -1,7 +1,7 @@
 import { BigNumber } from "bignumber.js";
 import { expect } from "chai";
 
-import { fromWei, toWei, TEN, ONE, ZERO } from "../utils";
+import { fromWei, toWei, TEN, ONE, ZERO, resolveIpfsUri } from "../utils";
 
 // TODO - this is super ugly at the moment and is probably missing some stuff.
 describe("toWei()", () => {
@@ -38,3 +38,15 @@ describe("fromWei()", () => {
     expect(fromWei(oneETH, 20).toFixed()).to.be.equal("0.01");
   });
 });
+
+describe("resolveIpfsUri", () => {
+  it("returns non ipfs urls unchanged", () => {
+    const normalURI = "https://gnosis-safe.io";
+    expect(resolveIpfsUri(normalURI)).to.be.equal(normalURI);
+  });
+
+  it("returns infura url for ipfs urls", () => {
+    const ipfsURI = "ipfs://SomeHash";
+    expect(resolveIpfsUri(ipfsURI)).to.be.equal("https://ipfs.infura.io/ipfs/SomeHash");
+  });
+});

src/hooks/collectibleTokenInfoProvider.ts

@@ -3,6 +3,7 @@ import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import BigNumber from "bignumber.js";
 import { ethers } from "ethers";
 import { useCallback, useMemo } from "react";
+import { resolveIpfsUri } from "src/utils";
 
 import { erc1155Instance } from "../transfers/erc1155";
 import { erc165Instance } from "../transfers/erc165";
@@ -120,19 +121,21 @@ export const useCollectibleTokenInfoProvider: () => CollectibleTokenInfoProvider
         const metaInfo: CollectibleTokenMetaInfo = {
           name: await erc721Contract.name().catch(() => undefined),
         };
-        const tokenURI = await erc721Contract.tokenURI(id.toFixed()).catch(() => undefined);
+        let tokenURI = await erc721Contract.tokenURI(id.toFixed()).catch(() => undefined);
         if (tokenURI) {
+          tokenURI = resolveIpfsUri(tokenURI);
           const metaDataJSON = await ethers.utils.fetchJson(tokenURI).catch(() => undefined);
-          metaInfo.imageURI = metaDataJSON?.image;
+          metaInfo.imageURI = metaDataJSON?.image ? resolveIpfsUri(metaDataJSON?.image) : undefined;
         }
         return metaInfo;
       } else {
         const erc1155Contract = erc1155Instance(tokenAddress, web3Provider);
         const metaInfo: CollectibleTokenMetaInfo = {};
-        const tokenURI = await erc1155Contract.uri(id.toFixed()).catch(() => undefined);
+        let tokenURI = await erc1155Contract.uri(id.toFixed()).catch(() => undefined);
         if (tokenURI) {
+          tokenURI = resolveIpfsUri(tokenURI);
           const metaDataJSON = await ethers.utils.fetchJson(tokenURI).catch(() => undefined);
-          metaInfo.imageURI = metaDataJSON?.image;
+          metaInfo.imageURI = metaDataJSON?.image ? resolveIpfsUri(metaDataJSON?.image) : undefined;
           metaInfo.name = metaDataJSON?.name;
         }
         return metaInfo;

src/utils.ts

@@ -36,3 +36,13 @@ export function toWei(amount: string | number | BigNumber, decimals: number): Bi
 export function fromWei(amount: BigNumber, decimals: number): BigNumber {
   return amount.dividedBy(TEN.pow(decimals));
 }
+
+/**
+ * Replaces ipfs:// part of the uri with the infura.io ipfs endpoint.
+ *
+ * @param uri URI which might be a ipfs url
+ * @returns URI resolved to the infura ipfs host or uri if it's not an ipfs uri.
+ */
+export function resolveIpfsUri(uri: string): string {
+  return uri.startsWith("ipfs://") ? uri.replace("ipfs://", "https://ipfs.infura.io/ipfs/") : uri;
+}