Add IPFS gateway to remote image

[wachunei]

Description

This PR uses current IPFS gateway selected in advanced settings to resolve IPFS scheme URIs

TODO:

• Add support for tokens in token list, eg: FNX token
• Add support for NFTs

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

Issue

Resolves #3274 #2817 #2838

[kinggongzilla]

thank you for the proposed fix! Looking forward to being accepted.
We are facing an issue where the token URI to the metadata is also a "ipfs://" URI. When adding the NFT to MetaMask wallet it does not show up at all. Not even a "gray square".
Does this fix also address "ipfs://" token URIs or only the "media" URI in "ipfs://" format?

[wachunei]

Hello @kinggongzilla, can you provide an example of "ipfs:// token URI" please? This is currently fixing the resolution of the token icon URL.

[kinggongzilla]

Hi @wachunei

Oh okay, I thought this was a fix for using IPFS protocol URIs in the tokenURI or for the "image" key in the metadata of an NFT.

This is the base URI we use in our smart contract:

function _baseURI() internal pure override returns (string memory) {
        return "ipfs://";
    }

It points to the JSON Metadata on IPFS which looks like this for example:
{ "name":"Example title ", "description":"example description", "image":"ipfs://bafybeifaouybr23dzhe77m4vvgztarlcjzwuuogm7lr4hf24rvaucfbrbi/nft.mp4", "artist":"example artist" }

The problem is that MetaMask mobile app does not display our NFTs at all, while they are correctly displayed on OpenSea: https://opensea.io/collection/beyond-mars

[wachunei]

@kinggongzilla I see your point, yes, I'm aiming to add support to that case as well, thank you the example.

[kinggongzilla]

@wachunei thank you!

[maximgeerinck]

Happy to help on this if needed, we just tackled this issue on our marketplace with extensive test cases

[wachunei]

Hey @maximgeerinck, how can I reach out to you? Having some testnet NFTs with ipfs media types to test against would be very helpful.

[maximgeerinck]

@wachunei you can mint different types here: https://app-testnet.refinable.com/

• Video (MOV, MPV4)
• Image (PNG, JPG, GIF, ...)

let me know if you need something else. For the ipfs i used following:

• first we validate the ipfs url (there are way too many broken incorrect token urls)

import isIpfs, { url } from "is-ipfs";
 const isValidUrl =
    isIpfs.ipfsUrl(url) ||
    isIpfs.ipnsUrl(url) ||
    isIpfs.path(url) ||
    isIpfs.cid(url.replace("ipfs://", "")) ||
    isIpfs.cidPath(url.replace("ipfs://", ""));
  if (!isValidUrl) {
    console.error(url);
    throw new Error("given ipfs url is not valid!");
  }

then we replace the hash by a public node, we did add fallback for multiple nodes as it can be that for very new NFTs, not all public nodes picked up the document yet

const IPFS_GATEWAY = "https://cloudflare-ipfs.com";
gateway = gateway.replace("/ipfs/", "");

const hasIpfsHash = url.match(
  /\/ipfs\/Qm[1-9A-HJ-NP-Za-km-z]{44}(\/.*)?|^\/ipns\/.+/gm
);

if (hasIpfsHash) {
  return `${gateway}${hasIpfsHash[0]}`;
}

return url.replace("ipfs://", `${gateway}/ipfs/`);

some don't even use ipfs, so we return when the url starts with http

Test case can look like:

it.each([
  [
    "ipfs://QmY8VYrfNV1kQ9YjGjA2YdYZbZS9a1AUBM69ABkvNafH4U",
    "https://cloudflare-ipfs.com/ipfs/QmY8VYrfNV1kQ9YjGjA2YdYZbZS9a1AUBM69ABkvNafH4U",
  ],
  [
    "https://gateway.pinata.cloud/ipfs/QmSb8FZBPJA3mxmYnMP5SGWiMwvFtYbNokTp8PU4453ax4/token/63.json",
    "https://gateway.pinata.cloud/ipfs/QmSb8FZBPJA3mxmYnMP5SGWiMwvFtYbNokTp8PU4453ax4/token/63.json",
  ],
  ["https://something-random", "https://something-random"],
  [
    "https://cloudflare-ipfs.com/ipfs/QmY8VYrfNV1kQ9YjGjA2YdYZbZS9a1AUBM69ABkvNafH4U",
    "https://cloudflare-ipfs.com/ipfs/QmY8VYrfNV1kQ9YjGjA2YdYZbZS9a1AUBM69ABkvNafH4U",
  ],
  [
    "ipfs://Qmeg18ZUcmcZG7Lne5bWF1kRPrSQ7LCToBRukYZcvoq8fw/nft.png",
    "https://cloudflare-ipfs.com/ipfs/Qmeg18ZUcmcZG7Lne5bWF1kRPrSQ7LCToBRukYZcvoq8fw/nft.png",
  ],
])(`%s is a valid ipfs url`, async (url, result) => {
  expect(resolvePublicIPFSUrl(url)).toEqual(result);
});

it.each([
  ["gewgwegwge"],
  ["ipfs://weweg/few/weg/gwe"],
  ["ipfs://00545411850545614840"],
])(`%s is not a valid ipfs url`, async (url) => {
  expect(() => resolvePublicIPFSUrl(url)).toThrowError();
});

^All the types above we've already encountered on public collections (also the invalid ones sadly)

[wachunei]

This PR will focus on ERC720 tokens with IPFS logo image url. NFTs support will be tracked in this issue: #3310

[Cal-L]

LGTM

[wachunei]

Hey @cortisiko, here are some tokens with ipfs:// images to check:

• 0x9a48bd0ec040ea4f1d3147c025cd4076a2e71e3e
• 0x158079ee67fce2f58472a96584a73c7ab9ac95c1
• 0xe17f017475a709de58e976081eb916081ff4c9d5

[cortisiko]

This guy is 👍