NFT component improvements

[Dhaiwat10]

• ENS support
• GIF support
• Video support
• Audio support
• Fix the tests
• Fetch data more efficiently. At the moment, both the Gallery and the NFT components are fetching the same data twice.

Also refactored the <NFT /> component to expect contractAddress and tokenId instead of accepting imageUrl etc.

Closes #61

[etr2460]

a few comments, looking awesome!

[etr2460]

do you think we could take the approach i mentioned here for the NFT component:#46 (comment)

Add a wrapper around NFT (and make the current implementation private) that uses a tokenId and contract address to fetch metadata about it

We should keep the existing component around and use it for the NFTGallery component so we don't need to refetch the NFT data that already comes from the previous API

[Dhaiwat10]

@etr2460 missed that. That sounds fair

[etr2460]

let's cleanup this TODO (now that it's done)

[etr2460]

not every NFT has a name. that's why this was nullable and i had const displayName = name || tokenId; below

[Dhaiwat10]

Gotcha

[etr2460]

maybe let's render a loader with a box around it the size of the NFT card by default, so that we don't have the cards pop in and move the layout around?

[Dhaiwat10]

Yep, good idea

[etr2460]

don't forget error handling!

Also, we should decide as a group if we wanna use .then or async/awaits for fetching. i'm fine either way, but let's be consistent

[Dhaiwat10]

Yeah, will add error handling.

I prefer async/await. Wbu? And @crondinini?

[etr2460]

me too, let's go with async/await. i was probably a bit lazy on my other PR to not factor that out. Maybe it's worth moving all the api requests into their own file too, that way any component can import them.

[crondinini]

I'm more of an async/await kinda of person. But I'm fine either way as long as we have consistency.

In this case though, I don't think we need the 2 awaits. As far as I know .json() does not return a promise. I also think we don't need useCallback at this point.

Could do:

const response = (
      await fetch(`https://api.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`)
    ).json();

or

  const fetchNFTData = async () => {
    const fetchResponse = await fetch(`https://api.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`);

    if (_isMounted.current) {
      const response = fetchResponse.json();
      setNftData({
        tokenId: response.token_id,
        imageUrl: response.image_url,
        name: response.name,
        assetContractName: response.asset_contract.name,
        assetContractSymbol: response.asset_contract.symbol,
        animationUrl: response.animation_url,
      });
    }
  };

[etr2460]

you should need 2 awaits. json() is async, because parsing the response can be expensive for extremely large responses

[etr2460]

weird that prettier didn't prettify this originally. must be a config issue