[SDK] Use insight for erc721/getNFTs and erc721/getOwnedNFTs (#6741)

Author: joaquim-verges

.changeset/purple-bats-march.md

@@ -0,0 +1,34 @@
+---
+"thirdweb": patch
+---
+
+Use insight for erc821/getNFT, erc721/getNFTs and erc721/getOwnedNFTs
+
+Standard ERC721 getNFT, getNFTs and getOwnedNFTs now use insight, our in house indexer by default. If indexer is not availbale, will fallback to RPC.
+
+You can also use the indexer directly using the Insight API:
+
+for an entire collection
+
+```ts
+import { Insight } from "thirdweb";
+
+const events = await Insight.getContractNFTs({
+  client,
+  chains: [sepolia],
+  contractAddress: "0x1234567890123456789012345678901234567890",
+});
+```
+
+or for a single NFT
+
+```ts
+import { Insight } from "thirdweb";
+
+const events = await Insight.getNFT({
+  client,
+  chains: [sepolia],
+  contractAddress: "0x1234567890123456789012345678901234567890",
+  tokenId: 1n,
+});
+```

.github/workflows/CI.yml

@@ -16,6 +16,7 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
   TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  TW_CLIENT_ID: ${{ secrets.TW_CLIENT_ID }}
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:

apps/dashboard/src/@/actions/getWalletNFTs.ts

@@ -81,6 +81,7 @@ export async function getWalletNFTs(params: {
       const result = await transformMoralisResponseToNFT(
         await parsedResponse,
         owner,
+        chainId,
       );
 
       return { result };
@@ -194,6 +195,8 @@ async function getWalletNFTsFromInsight(params: {
       tokenURI: nft.metadata_url,
       type: nft.token_type === "erc721" ? "ERC721" : "ERC1155",
       supply: nft.balance,
+      tokenAddress: nft.contract.address,
+      chainId: nft.contract.chain_id,
     };
 
     return walletNFT;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -205,6 +205,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           owner: nft.owner,
           type: "ERC721",
           tokenURI: nft.tokenURI,
+          chainId: nft.chainId,
+          tokenAddress: nft.tokenAddress,
         };
       }
       return {
@@ -216,6 +218,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         owner: nft.owner,
         type: "ERC1155",
         tokenURI: nft.tokenURI,
+        chainId: nft.chainId,
+        tokenAddress: nft.tokenAddress,
       };
     }) as WalletNFT[];
   }, [ownedNFTs, form]);

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx

@@ -21,6 +21,7 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
   owner: `0x_fake_${idx}`,
   type: "ERC721",
   supply: 1n,
+  tokenAddress: ZERO_ADDRESS,
 });
 
 interface NFTCardsProps {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx

@@ -33,6 +33,7 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({
         type: nft.type,
         contractAddress: nft.contractAddress,
         chainId: contract.chain.id,
+        tokenAddress: nft.tokenAddress,
       }))}
       allNfts
       isPending={isWalletNFTsLoading}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx

@@ -7,7 +7,7 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ArrowRightIcon } from "lucide-react";
 import { useMemo } from "react";
-import type { ThirdwebContract } from "thirdweb";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import {
   type DirectListing,
   type EnglishAuction,
@@ -237,13 +237,17 @@ const dummyMetadata: (idx: number) => ListingData = (idx) => ({
     supply: BigInt(1),
     tokenURI: "",
     type: "ERC721",
+    tokenAddress: ZERO_ADDRESS,
+    chainId: 1,
   },
   currencyValuePerToken: {
     decimals: 18,
     displayValue: "0.0",
     name: "Ether",
     symbol: "ETH",
     value: 0n,
+    tokenAddress: ZERO_ADDRESS,
+    chainId: 1,
   },
   creatorAddress: "0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef",
   type: "direct-listing",
@@ -253,6 +257,8 @@ const dummyMetadata: (idx: number) => ListingData = (idx) => ({
     value: 0n,
     displayValue: "0.0",
     decimals: 18,
+    tokenAddress: ZERO_ADDRESS,
+    chainId: 1,
   },
 });
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx

@@ -46,8 +46,15 @@ export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
         tokenSupplyQuery.data,
         tokenMetadataQuery.data.decimals,
       ),
+      tokenAddress: contract.address,
+      chainId: contract.chain.id,
     };
-  }, [tokenMetadataQuery.data, tokenSupplyQuery.data]);
+  }, [
+    tokenMetadataQuery.data,
+    tokenSupplyQuery.data,
+    contract.address,
+    contract.chain.id,
+  ]);
 
   return (
     <TokenDetailsCardUI

apps/dashboard/src/lib/wallet/nfts/moralis.ts

@@ -26,6 +26,7 @@ export function generateMoralisUrl({ chainId, owner }: GenerateURLParams) {
 export async function transformMoralisResponseToNFT(
   moralisResponse: MoralisResponse,
   owner: string,
+  chainId: number,
 ): Promise<WalletNFT[]> {
   return (
     await Promise.all(
@@ -47,6 +48,8 @@ export async function transformMoralisResponseToNFT(
             tokenURI: moralisNft.token_uri,
             supply: moralisNft.amount || "1",
             type: moralisNft.contract_type,
+            tokenAddress: moralisNft.token_address,
+            chainId,
           } as WalletNFT;
         } catch {
           return undefined as unknown as WalletNFT;

packages/thirdweb/src/chains/utils.ts

@@ -296,8 +296,9 @@ export function getChainMetadata(chain: Chain): Promise<ChainMetadata> {
           `https://api.thirdweb.com/v1/chains/${chainId}`,
         );
         if (!res.ok) {
-          res.body?.cancel();
-          throw new Error(`Failed to fetch chain data for chainId ${chainId}`);
+          throw new Error(
+            `Failed to fetch chain data for chainId ${chainId}. ${res.status} ${res.statusText}`,
+          );
         }
 
         const response = (await res.json()) as FetchChainResponse;
@@ -356,8 +357,9 @@ export function getChainServices(chain: Chain): Promise<ChainService[]> {
           `https://api.thirdweb.com/v1/chains/${chainId}/services`,
         );
         if (!res.ok) {
-          res.body?.cancel();
-          throw new Error(`Failed to fetch services for chainId ${chainId}`);
+          throw new Error(
+            `Failed to fetch services for chainId ${chainId}. ${res.status} ${res.statusText}`,
+          );
         }
 
         const response = (await res.json()) as FetchChainServiceResponse;