thirdweb 5.95.0-nightly-64bd603301b3067b6a69a29f66a28dee7ffa38f5-20250416000349 → 5.95.0-nightly-e7b01108037ebef07fba95f888be1905c8fab5df-20250417000348

package/src/insight/common.ts

@@ -0,0 +1,24 @@
+import type { Chain } from "../chains/types.js";
+import { getChainServices } from "../chains/utils.js";
+
+export async function assertInsightEnabled(chains: Chain[]) {
+  const chainData = await Promise.all(
+    chains.map((chain) =>
+      getChainServices(chain).then((services) => ({
+        chain,
+        enabled: services.some((c) => c.service === "insight" && c.enabled),
+      })),
+    ),
+  );
+
+  const insightEnabled = chainData.every((c) => c.enabled);
+
+  if (!insightEnabled) {
+    throw new Error(
+      `Insight is not available for chains ${chainData
+        .filter((c) => !c.enabled)
+        .map((c) => c.chain.id)
+        .join(", ")}`,
+    );
+  }
+}

package/src/insight/get-events.ts

@@ -1,15 +1,11 @@
-import {
-  type GetV1EventsByContractAddressData,
-  type GetV1EventsByContractAddressResponse,
-  getV1EventsByContractAddress,
+import type {
+  GetV1EventsByContractAddressData,
+  GetV1EventsByContractAddressResponse,
 } from "@thirdweb-dev/insight";
 import type { AbiEvent } from "ox/AbiEvent";
-import { stringify } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
 import type { PreparedEvent } from "../event/prepare-event.js";
-import { getThirdwebDomains } from "../utils/domains.js";
-import { getClientFetch } from "../utils/fetch.js";
 
 export type ContractEvent = NonNullable<
   GetV1EventsByContractAddressResponse["data"]
@@ -37,11 +33,30 @@ export async function getContractEvents(options: {
   contractAddress: string;
   event?: PreparedEvent<AbiEvent>;
   decodeLogs?: boolean;
-  queryOptions?: GetV1EventsByContractAddressData["query"];
+  queryOptions?: Omit<
+    GetV1EventsByContractAddressData["query"],
+    "chain" | "decode"
+  >;
 }): Promise<ContractEvent[]> {
+  const [
+    { getV1EventsByContractAddress },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("../utils/json.js"),
+  ]);
+
   const { client, chains, contractAddress, event, queryOptions, decodeLogs } =
     options;
 
+  await assertInsightEnabled(chains);
+
   const defaultQueryOptions: GetV1EventsByContractAddressData["query"] = {
     chain: chains.map((chain) => chain.id),
     limit: 100,
@@ -62,7 +77,6 @@ export async function getContractEvents(options: {
       contractAddress,
     },
     query: {
-      chain: chains.map((chain) => chain.id),
       ...defaultQueryOptions,
       ...queryOptions,
     },

package/src/insight/get-nfts.ts

@@ -1,15 +1,16 @@
-import {
-  type GetV1NftsBalanceByOwnerAddressData,
-  type GetV1NftsBalanceByOwnerAddressResponse,
-  getV1NftsBalanceByOwnerAddress,
+import type {
+  GetV1NftsByContractAddressByTokenIdData,
+  GetV1NftsByContractAddressData,
+  GetV1NftsByContractAddressResponse,
+  GetV1NftsData,
+  GetV1NftsResponse,
 } from "@thirdweb-dev/insight";
-import { stringify } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
-import { getThirdwebDomains } from "../utils/domains.js";
-import { getClientFetch } from "../utils/fetch.js";
+import type { NFT } from "../utils/nft/parseNft.js";
 
-export type OwnedNFT = GetV1NftsBalanceByOwnerAddressResponse["data"][number];
+type OwnedNFT = GetV1NftsResponse["data"][number];
+type ContractNFT = GetV1NftsByContractAddressResponse["data"][number];
 
 /**
  * Get NFTs owned by an address
@@ -29,28 +30,199 @@ export async function getOwnedNFTs(args: {
   client: ThirdwebClient;
   chains: Chain[];
   ownerAddress: string;
-  queryOptions?: GetV1NftsBalanceByOwnerAddressData["query"];
-}): Promise<OwnedNFT[]> {
+  includeMetadata?: boolean;
+  queryOptions?: Omit<GetV1NftsData["query"], "owner_address" | "chain">;
+}): Promise<(NFT & { quantityOwned: bigint })[]> {
+  const [
+    { getV1Nfts },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("viem"),
+  ]);
+
+  // TODO (insight): add support for contract address filters
+  const { client, chains, ownerAddress, queryOptions } = args;
+
+  await assertInsightEnabled(chains);
+
+  const defaultQueryOptions: GetV1NftsData["query"] = {
+    chain: chains.map((chain) => chain.id),
+    // metadata: includeMetadata ? "true" : "false", TODO (insight): add support for this
+    limit: 50,
+    owner_address: ownerAddress,
+  };
+
+  const result = await getV1Nfts({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    query: {
+      ...defaultQueryOptions,
+      ...queryOptions,
+    },
+  });
+
+  if (result.error) {
+    throw new Error(
+      `${result.response.status} ${result.response.statusText} - ${result.error ? stringify(result.error) : "Unknown error"}`,
+    );
+  }
+
+  const transformedNfts = await transformNFTModel(
+    result.data?.data ?? [],
+    ownerAddress,
+  );
+  return transformedNfts.map((nft) => ({
+    ...nft,
+    quantityOwned: nft.quantityOwned ?? 1n,
+  }));
+}
+
+/**
+ * Get all NFTs from a contract
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const nfts = await Insight.getContractNFTs({
+ *   client,
+ *   chains: [sepolia],
+ *   contractAddress: "0x1234567890123456789012345678901234567890",
+ * });
+ * ```
+ * @insight
+ */
+export async function getContractNFTs(args: {
+  client: ThirdwebClient;
+  chains: Chain[];
+  contractAddress: string;
+  includeMetadata?: boolean;
+  includeOwners?: boolean;
+  queryOptions?: Omit<GetV1NftsByContractAddressData["query"], "chain">;
+}): Promise<NFT[]> {
+  const [
+    { getV1NftsByContractAddress },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("../utils/json.js"),
+  ]);
+
   const {
     client,
     chains,
-    ownerAddress,
-    queryOptions = {
-      chain: chains.map((chain) => chain.id),
-      metadata: "true",
-      limit: 100,
-      page: 1,
+    contractAddress,
+    includeOwners = true,
+    queryOptions,
+  } = args;
+
+  const defaultQueryOptions: GetV1NftsByContractAddressData["query"] = {
+    chain: chains.map((chain) => chain.id),
+    // metadata: includeMetadata ? "true" : "false", TODO (insight): add support for this
+    limit: 50,
+    include_owners:
+      includeOwners === true ? ("true" as const) : ("false" as const),
+  };
+
+  await assertInsightEnabled(chains);
+
+  const result = await getV1NftsByContractAddress({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    path: {
+      contract_address: contractAddress,
+    },
+    query: {
+      ...defaultQueryOptions,
+      ...queryOptions,
     },
+  });
+
+  if (result.error) {
+    throw new Error(
+      `${result.response.status} ${result.response.statusText} - ${result.error ? stringify(result.error) : "Unknown error"}`,
+    );
+  }
+
+  return transformNFTModel(result.data?.data ?? []);
+}
+
+/**
+ * Get NFT metadata by contract address and token id
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const nft = await Insight.getNFT({
+ *   client,
+ *   chain: sepolia,
+ *   contractAddress: "0x1234567890123456789012345678901234567890",
+ *   tokenId: 1n,
+ * });
+ * ```
+ * @insight
+ */
+export async function getNFT(args: {
+  client: ThirdwebClient;
+  chain: Chain;
+  contractAddress: string;
+  tokenId: bigint | number | string;
+  includeOwners?: boolean;
+  queryOptions?: GetV1NftsByContractAddressByTokenIdData["query"];
+}): Promise<NFT | undefined> {
+  const [
+    { getV1NftsByContractAddressByTokenId },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("../utils/json.js"),
+  ]);
+
+  const {
+    client,
+    chain,
+    contractAddress,
+    tokenId,
+    includeOwners = true,
+    queryOptions,
   } = args;
 
-  const result = await getV1NftsBalanceByOwnerAddress({
+  await assertInsightEnabled([chain]);
+
+  const defaultQueryOptions: GetV1NftsByContractAddressByTokenIdData["query"] =
+    {
+      chain: chain.id,
+      include_owners:
+        includeOwners === true ? ("true" as const) : ("false" as const),
+    };
+
+  const result = await getV1NftsByContractAddressByTokenId({
     baseUrl: `https://${getThirdwebDomains().insight}`,
     fetch: getClientFetch(client),
     path: {
-      ownerAddress: ownerAddress,
+      contract_address: contractAddress,
+      token_id: tokenId.toString(),
     },
     query: {
-      chain: chains.map((chain) => chain.id),
+      ...defaultQueryOptions,
       ...queryOptions,
     },
   });
@@ -61,5 +233,64 @@ export async function getOwnedNFTs(args: {
     );
   }
 
-  return result.data?.data ?? [];
+  const transformedNfts = await transformNFTModel(result.data?.data ?? []);
+  return transformedNfts?.[0];
+}
+
+async function transformNFTModel(
+  nfts: (ContractNFT | OwnedNFT)[],
+  ownerAddress?: string,
+): Promise<(NFT & { quantityOwned?: bigint })[]> {
+  const { parseNFT } = await import("../utils/nft/parseNft.js");
+
+  return nfts.map((nft) => {
+    let parsedNft: NFT;
+    const {
+      contract,
+      extra_metadata,
+      collection,
+      metadata_url,
+      chain_id,
+      token_id,
+      status,
+      balance,
+      token_type,
+      ...rest
+    } = nft;
+    const metadata = {
+      uri: nft.metadata_url ?? "",
+      image: nft.image_url,
+      attributes: nft.extra_metadata?.attributes ?? undefined,
+      ...rest,
+    };
+
+    const owner_addresses = ownerAddress
+      ? [ownerAddress]
+      : "owner_addresses" in nft
+        ? nft.owner_addresses
+        : undefined;
+
+    if (contract?.type === "erc1155") {
+      parsedNft = parseNFT(metadata, {
+        tokenId: BigInt(token_id),
+        tokenUri: metadata_url ?? "",
+        type: "ERC1155",
+        owner: owner_addresses?.[0],
+        tokenAddress: contract?.address ?? "",
+        chainId: contract?.chain_id ?? 0,
+        supply: balance ? BigInt(balance) : 0n, // TODO (insight): this is wrong, needs to be added in the API
+      });
+    } else {
+      parsedNft = parseNFT(metadata, {
+        tokenId: BigInt(token_id),
+        type: "ERC721",
+        owner: owner_addresses?.[0],
+        tokenUri: metadata_url ?? "",
+        tokenAddress: contract?.address ?? "",
+        chainId: contract?.chain_id ?? 0,
+      });
+    }
+
+    return parsedNft;
+  });
 }

package/src/insight/get-tokens.ts

@@ -1,15 +1,12 @@
-import {
-  type GetV1TokensErc20ByOwnerAddressData,
-  type GetV1TokensErc20ByOwnerAddressResponse,
-  getV1TokensErc20ByOwnerAddress,
+import type {
+  GetV1TokensErc20ByOwnerAddressData,
+  GetV1TokensErc20ByOwnerAddressResponse,
 } from "@thirdweb-dev/insight";
-import { stringify } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
-import { getThirdwebDomains } from "../utils/domains.js";
-import { getClientFetch } from "../utils/fetch.js";
+import type { GetWalletBalanceResult } from "../wallets/utils/getWalletBalance.js";
 
-export type OwnedToken = GetV1TokensErc20ByOwnerAddressResponse["data"][number];
+type OwnedToken = GetV1TokensErc20ByOwnerAddressResponse["data"][number];
 
 /**
  * Get ERC20 tokens owned by an address
@@ -30,19 +27,31 @@ export async function getOwnedTokens(args: {
   chains: Chain[];
   ownerAddress: string;
   queryOptions?: GetV1TokensErc20ByOwnerAddressData["query"];
-}): Promise<OwnedToken[]> {
-  const {
-    client,
-    chains,
-    ownerAddress,
-    queryOptions = {
-      chain: chains.map((chain) => chain.id),
-      include_spam: "false",
-      metadata: "true",
-      limit: 100,
-      page: 1,
-    },
-  } = args;
+}): Promise<GetWalletBalanceResult[]> {
+  const [
+    { getV1TokensErc20ByOwnerAddress },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("../utils/json.js"),
+  ]);
+
+  const { client, chains, ownerAddress, queryOptions } = args;
+
+  await assertInsightEnabled(chains);
+
+  const defaultQueryOptions: GetV1TokensErc20ByOwnerAddressData["query"] = {
+    chain: chains.map((chain) => chain.id),
+    include_spam: "false",
+    metadata: "true",
+    limit: 50,
+  };
 
   const result = await getV1TokensErc20ByOwnerAddress({
     baseUrl: `https://${getThirdwebDomains().insight}`,
@@ -51,7 +60,7 @@ export async function getOwnedTokens(args: {
       ownerAddress: ownerAddress,
     },
     query: {
-      chain: chains.map((chain) => chain.id),
+      ...defaultQueryOptions,
       ...queryOptions,
     },
   });
@@ -62,5 +71,24 @@ export async function getOwnedTokens(args: {
     );
   }
 
-  return result.data?.data ?? [];
+  return transformOwnedToken(result.data?.data ?? []);
+}
+
+async function transformOwnedToken(
+  token: OwnedToken[],
+): Promise<GetWalletBalanceResult[]> {
+  const { toTokens } = await import("../utils/units.js");
+  return token.map((t) => {
+    const decimals = t.decimals ?? 18;
+    const value = BigInt(t.balance);
+    return {
+      value,
+      displayValue: toTokens(value, decimals),
+      tokenAddress: t.token_address,
+      chainId: t.chain_id,
+      decimals,
+      symbol: t.symbol ?? "",
+      name: t.name ?? "",
+    };
+  });
 }

package/src/insight/get-transactions.ts

@@ -1,13 +1,9 @@
-import {
-  type GetV1WalletsByWalletAddressTransactionsData,
-  type GetV1WalletsByWalletAddressTransactionsResponse,
-  getV1WalletsByWalletAddressTransactions,
+import type {
+  GetV1WalletsByWalletAddressTransactionsData,
+  GetV1WalletsByWalletAddressTransactionsResponse,
 } from "@thirdweb-dev/insight";
-import { stringify } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
-import { getThirdwebDomains } from "../utils/domains.js";
-import { getClientFetch } from "../utils/fetch.js";
 
 export type Transaction = NonNullable<
   GetV1WalletsByWalletAddressTransactionsResponse["data"]
@@ -33,24 +29,38 @@ export async function getTransactions(args: {
   chains: Chain[];
   queryOptions?: GetV1WalletsByWalletAddressTransactionsData["query"];
 }): Promise<Transaction[]> {
+  const [
+    { getV1WalletsByWalletAddressTransactions },
+    { getThirdwebDomains },
+    { getClientFetch },
+    { assertInsightEnabled },
+    { stringify },
+  ] = await Promise.all([
+    import("@thirdweb-dev/insight"),
+    import("../utils/domains.js"),
+    import("../utils/fetch.js"),
+    import("./common.js"),
+    import("../utils/json.js"),
+  ]);
+
+  await assertInsightEnabled(args.chains);
   const threeMonthsAgoInSeconds = Math.floor(
     (Date.now() - 3 * 30 * 24 * 60 * 60 * 1000) / 1000,
   );
-  const {
-    client,
-    walletAddress,
-    chains,
-    queryOptions = {
+  const { client, walletAddress, chains, queryOptions } = args;
+
+  const defaultQueryOptions: GetV1WalletsByWalletAddressTransactionsData["query"] =
+    {
+      chain: chains.map((chain) => chain.id),
       filter_block_timestamp_gte: threeMonthsAgoInSeconds,
       limit: 100,
-      page: 1,
-    },
-  } = args;
+    };
+
   const result = await getV1WalletsByWalletAddressTransactions({
     baseUrl: `https://${getThirdwebDomains().insight}`,
     fetch: getClientFetch(client),
     query: {
-      chain: chains.map((chain) => chain.id),
+      ...defaultQueryOptions,
       ...queryOptions,
     },
     path: {

package/src/insight/index.ts

@@ -1,4 +1,8 @@
-export { getOwnedNFTs, type OwnedNFT } from "./get-nfts.js";
-export { getOwnedTokens, type OwnedToken } from "./get-tokens.js";
+export {
+  getContractNFTs,
+  getOwnedNFTs,
+  getNFT,
+} from "./get-nfts.js";
+export { getOwnedTokens } from "./get-tokens.js";
 export { getTransactions, type Transaction } from "./get-transactions.js";
 export { getContractEvents, type ContractEvent } from "./get-events.js";

package/src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx

@@ -130,53 +130,12 @@ export function ViewNFTsContent(props: {
       });
 
       return result
-        .filter((nft) => !!nft.name && !!nft.image_url)
+        .filter((nft) => !!nft.metadata.name && !!nft.metadata.image)
         .map((nft) => {
-          let parsedNft: NFT;
-          const metadata = {
-            name: nft.name,
-            description: nft.description,
-            image: nft.image_url,
-            animation_url: nft.video_url,
-            external_url: nft.external_url,
-            background_color: nft.background_color,
-            uri: nft.metadata_url ?? "",
-            image_url: nft.image_url,
-            attributes: Array.isArray(nft.extra_metadata?.attributes)
-              ? nft.extra_metadata?.attributes?.reduce(
-                  (acc, attr) => {
-                    acc[attr.trait_type] = attr.value;
-                    return acc;
-                  },
-                  {} as Record<string, unknown>,
-                )
-              : {},
-          };
-
-          if (nft.contract?.type === "erc1155") {
-            parsedNft = {
-              id: BigInt(nft.token_id),
-              type: "ERC1155",
-              owner: activeAccount.address,
-              tokenURI: nft.metadata_url ?? "",
-              supply: BigInt(nft.balance), // TODO: this is wrong
-              metadata,
-            };
-          } else {
-            parsedNft = {
-              id: BigInt(nft.token_id),
-              type: "ERC721",
-              owner: activeAccount.address,
-              tokenURI: nft.metadata_url ?? "",
-              metadata,
-            };
-          }
-
           return {
-            chain: getCachedChain(nft.chain_id),
-            address: nft.token_address as Address,
-            quantityOwned: BigInt(nft.balance),
-            ...parsedNft,
+            chain: getCachedChain(nft.chainId),
+            address: nft.tokenAddress as Address,
+            ...nft,
           };
         });
     },
@@ -197,29 +156,45 @@ export function ViewNFTsContent(props: {
 
   return (
     <>
-      <Container
-        style={{
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr",
-          gap: "12px",
-        }}
-      >
-        {nftQuery.error ? (
-          <Text>Error loading NFTs</Text>
-        ) : nftQuery.isLoading || !filteredNFTs ? (
-          <Skeleton height="150px" width="150px" />
-        ) : (
-          filteredNFTs.map((nft) => (
-            <NftCard
-              key={`${nft.chain.id}:${nft.address}:${nft.id}`}
-              {...nft}
-              client={props.client}
-              chain={nft.chain}
-              theme={props.theme}
-            />
-          ))
-        )}
-      </Container>
+      {nftQuery.error ? (
+        <Container center="both" py="lg">
+          <Text size="sm" color="secondaryText" center>
+            Error loading NFTs
+          </Text>
+        </Container>
+      ) : nftQuery.data?.length === 0 && !nftQuery.isLoading ? (
+        <Container center="both" py="lg">
+          <Text size="sm" color="secondaryText" center>
+            No NFTs found on this chain
+          </Text>
+        </Container>
+      ) : (
+        <Container
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "12px",
+          }}
+        >
+          {nftQuery.isLoading || !filteredNFTs ? (
+            <>
+              <Skeleton height="150px" width="150px" />
+              <Skeleton height="150px" width="150px" />
+              <Skeleton height="150px" width="150px" />
+            </>
+          ) : (
+            filteredNFTs.map((nft) => (
+              <NftCard
+                key={`${nft.chain.id}:${nft.address}:${nft.id}`}
+                {...nft}
+                client={props.client}
+                chain={nft.chain}
+                theme={props.theme}
+              />
+            ))
+          )}
+        </Container>
+      )}
       <Spacer y="lg" />
     </>
   );