Add testnet support to NFT and NFTGallery (#270)

Author: Dhaiwat10

.changeset/tidy-dancers-draw.md

@@ -0,0 +1,19 @@
+---
+'@web3-ui/components': minor
+---
+
+The NFT and NFTGallery components now support testnets (rinkeby only for now)! You can pass in `isTestnet` to the components if you want to fetch the NFT data from the testnet API. 🎉
+
+```tsx
+<NFT
+  contractAddress="0xd067fae3311a5daefe21b81ec17224c7b2652ca6"
+  tokenId="20"
+  isTestnet
+/>
+
+<NFTGallery
+  address="0x0ED6Cec17F860fb54E21D154b49DAEFd9Ca04106"
+  gridWidth={2}
+  isTestnet
+/>
+```

packages/components/README.md

@@ -67,7 +67,7 @@ You need to pass in a `provider` prop if you want to use ENS names.
 
 ### NFT
 
-The NFT component takes in the contract address and the token ID of an NFT and displays it as a card.
+The NFT component takes in the contract address and the token ID of an NFT and displays it as a card. You can also pass in `isTestnet` to fetch the NFT data from the testnet API (only Rinkeby for now).
 
 ```tsx
 <NFT contractAddress="0xxxxx0x0x0x0x0x" tokenId={30} size="md" />
@@ -79,7 +79,7 @@ The `size` prop is optional.
 
 ### NFTGallery
 
-The NFTGallery component renders a grid of all the NFTs owned by an account. It accepts ENS names too.
+The NFTGallery component renders a grid of all the NFTs owned by an account. It accepts ENS names too. You can also pass in `isTestnet` to fetch the NFT data from the testnet API (only Rinkeby for now).
 
 ```tsx
 <NFTGallery address="vitalik.eth" web3Provider={provider} gridWidth={4} />

packages/components/src/components/NFT/NFT.stories.tsx

@@ -42,4 +42,12 @@ export const Big = () => (
   />
 );
 
+export const Rinkeby = () => (
+  <NFT
+    contractAddress="0xd067fae3311a5daefe21b81ec17224c7b2652ca6"
+    tokenId="20"
+    isTestnet
+  />
+);
+
 export const Error = () => <NFT contractAddress="abcd" tokenId="1" />;

packages/components/src/components/NFT/NFT.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Box,
   Heading,
@@ -25,6 +25,10 @@ export interface NFTProps {
    * The size of the NFT card.
    */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * Use testnet API (Rinkeby) instead of mainnet
+   */
+  isTestnet?: boolean;
 }
 
 export interface NFTData {
@@ -39,16 +43,27 @@ export interface NFTData {
 /**
  * Component to fetch and display NFT data
  */
-export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
+export const NFT = ({
+  contractAddress,
+  tokenId,
+  size = 'xs',
+  isTestnet = false,
+}: NFTProps) => {
   const _isMounted = useRef(true);
   const [nftData, setNftData] = React.useState<NFTData>();
   const [errorMessage, setErrorMessage] = React.useState<string>();
 
   const fetchNFTData = useCallback(async () => {
+    const apiSubDomain = isTestnet ? `rinkeby-api` : `api`;
+
     try {
       const res = await fetch(
-        `https://api.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`
+        `https://${apiSubDomain}.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`
       );
+      if (isTestnet)
+        console.log(
+          `⚠️ OpenSea currently only supports Rinkedby with testnets.`
+        );
       if (!res.ok) {
         throw Error(
           `OpenSea request failed with status: ${res.status}. Make sure you are on mainnet.`
@@ -92,11 +107,14 @@ export const NFTCard = ({
   data,
   errorMessage = '',
   size,
+  hideIfError = false,
 }: {
   data: NFTData | undefined | null;
   errorMessage?: string | undefined;
   size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  hideIfError?: boolean;
 }) => {
+  const [error, setError] = useState(false);
   const name = data?.name;
   const imageUrl = data?.imageUrl;
   const assetContractName = data?.assetContractName;
@@ -105,7 +123,8 @@ export const NFTCard = ({
   const tokenId = data?.tokenId;
   const displayName = name || `${assetContractSymbol} #${tokenId}`;
 
-  if (errorMessage) {
+  if (errorMessage || error || imageUrl === '(unknown)' || !imageUrl) {
+    if (hideIfError) return null;
     return (
       <Alert status="error">
         <AlertIcon />
@@ -125,6 +144,7 @@ export const NFTCard = ({
                 alt={displayName}
                 borderRadius="lg"
                 w={size}
+                onError={() => setError(true)}
               />
               <audio
                 src={animationUrl}

packages/components/src/components/NFTGallery/NFTGallery.stories.tsx

@@ -36,4 +36,12 @@ nftsOwnedByAnENS.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
+export const rinkeby = () => (
+  <NFTGallery
+    address="0x0ED6Cec17F860fb54E21D154b49DAEFd9Ca04106"
+    gridWidth={2}
+    isTestnet
+  />
+);
+
 export const WithAnError = () => <NFTGallery address="bad_address" />;

packages/components/src/components/NFTGallery/NFTGallery.tsx

@@ -17,6 +17,10 @@ export interface NFTGalleryProps {
    * A Web3Provider. Only needed if the address will be an ENS name.
    */
   web3Provider?: ethers.providers.Web3Provider;
+  /**
+   * Use testnet api instead of mainnet
+   */
+  isTestnet?: boolean;
 }
 
 export interface OpenSeaAsset {
@@ -38,20 +42,28 @@ export const NFTGallery = ({
   address,
   gridWidth = 4,
   web3Provider,
+  isTestnet = false,
 }: NFTGalleryProps) => {
   const [nfts, setNfts] = React.useState<OpenSeaAsset[]>([]);
   const [errorMessage, setErrorMessage] = React.useState(null);
 
   useEffect(() => {
     async function exec() {
       let resolvedAddress: string | null = address;
+      const apiSubDomain = isTestnet ? `rinkeby-api` : `api`;
+      if (isTestnet)
+        console.log(
+          `⚠️ OpenSea currently only supports Rinkedby with testnets.`
+        );
       if (address.endsWith('.eth')) {
         if (!web3Provider) {
           return console.error('Please provide a web3 provider');
         }
         resolvedAddress = await web3Provider.resolveName(address);
       }
-      fetch(`https://api.opensea.io/api/v1/assets?owner=${resolvedAddress}`)
+      fetch(
+        `https://${apiSubDomain}.opensea.io/api/v1/assets?owner=${resolvedAddress}`
+      )
         .then((res) => {
           if (!res.ok) {
             throw Error(
@@ -89,6 +101,7 @@ export const NFTGallery = ({
               assetContractSymbol: nft.asset_contract.symbol,
             }}
             size="xs"
+            hideIfError
           />
         ))}
       </Grid>