thirdweb 5.94.2 → 5.95.0-nightly-64bd603301b3067b6a69a29f66a28dee7ffa38f5-20250416000349

package/src/insight/get-nfts.ts

@@ -0,0 +1,65 @@
+import {
+  type GetV1NftsBalanceByOwnerAddressData,
+  type GetV1NftsBalanceByOwnerAddressResponse,
+  getV1NftsBalanceByOwnerAddress,
+} 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 OwnedNFT = GetV1NftsBalanceByOwnerAddressResponse["data"][number];
+
+/**
+ * Get NFTs owned by an address
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const nfts = await Insight.getOwnedNFTs({
+ *   client,
+ *   chains: [sepolia],
+ *   ownerAddress: "0x1234567890123456789012345678901234567890",
+ * });
+ * ```
+ * @insight
+ */
+export async function getOwnedNFTs(args: {
+  client: ThirdwebClient;
+  chains: Chain[];
+  ownerAddress: string;
+  queryOptions?: GetV1NftsBalanceByOwnerAddressData["query"];
+}): Promise<OwnedNFT[]> {
+  const {
+    client,
+    chains,
+    ownerAddress,
+    queryOptions = {
+      chain: chains.map((chain) => chain.id),
+      metadata: "true",
+      limit: 100,
+      page: 1,
+    },
+  } = args;
+
+  const result = await getV1NftsBalanceByOwnerAddress({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    path: {
+      ownerAddress: ownerAddress,
+    },
+    query: {
+      chain: chains.map((chain) => chain.id),
+      ...queryOptions,
+    },
+  });
+
+  if (result.error) {
+    throw new Error(
+      `${result.response.status} ${result.response.statusText} - ${result.error ? stringify(result.error) : "Unknown error"}`,
+    );
+  }
+
+  return result.data?.data ?? [];
+}

package/src/insight/get-tokens.ts

@@ -0,0 +1,66 @@
+import {
+  type GetV1TokensErc20ByOwnerAddressData,
+  type GetV1TokensErc20ByOwnerAddressResponse,
+  getV1TokensErc20ByOwnerAddress,
+} 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 OwnedToken = GetV1TokensErc20ByOwnerAddressResponse["data"][number];
+
+/**
+ * Get ERC20 tokens owned by an address
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const tokens = await Insight.getOwnedTokens({
+ *   client,
+ *   chains: [sepolia],
+ *   ownerAddress: "0x1234567890123456789012345678901234567890",
+ * });
+ * ```
+ * @insight
+ */
+export async function getOwnedTokens(args: {
+  client: ThirdwebClient;
+  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;
+
+  const result = await getV1TokensErc20ByOwnerAddress({
+    baseUrl: `https://${getThirdwebDomains().insight}`,
+    fetch: getClientFetch(client),
+    path: {
+      ownerAddress: ownerAddress,
+    },
+    query: {
+      chain: chains.map((chain) => chain.id),
+      ...queryOptions,
+    },
+  });
+
+  if (result.error) {
+    throw new Error(
+      `${result.response.status} ${result.response.statusText} - ${result.error ? stringify(result.error) : "Unknown error"}`,
+    );
+  }
+
+  return result.data?.data ?? [];
+}

package/src/insight/get-transactions.ts

@@ -0,0 +1,66 @@
+import {
+  type GetV1WalletsByWalletAddressTransactionsData,
+  type GetV1WalletsByWalletAddressTransactionsResponse,
+  getV1WalletsByWalletAddressTransactions,
+} 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"]
+>[number];
+
+/**
+ * Get transactions for a wallet
+ * @example
+ * ```ts
+ * import { Insight } from "thirdweb";
+ *
+ * const transactions = await Insight.getTransactions({
+ *   client,
+ *   walletAddress: "0x1234567890123456789012345678901234567890",
+ *   chains: [sepolia],
+ * });
+ * ```
+ * @insight
+ */
+export async function getTransactions(args: {
+  client: ThirdwebClient;
+  walletAddress: string;
+  chains: Chain[];
+  queryOptions?: GetV1WalletsByWalletAddressTransactionsData["query"];
+}): Promise<Transaction[]> {
+  const threeMonthsAgoInSeconds = Math.floor(
+    (Date.now() - 3 * 30 * 24 * 60 * 60 * 1000) / 1000,
+  );
+  const {
+    client,
+    walletAddress,
+    chains,
+    queryOptions = {
+      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),
+      ...queryOptions,
+    },
+    path: {
+      wallet_address: walletAddress,
+    },
+  });
+  if (result.error) {
+    throw new Error(
+      `${result.response.status} ${result.response.statusText} - ${result.error ? stringify(result.error) : "Unknown error"}`,
+    );
+  }
+  return result.data.data || [];
+}

package/src/insight/index.ts

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

package/src/pay/buyWithCrypto/getHistory.ts

@@ -79,8 +79,10 @@ export async function getBuyWithCryptoHistory(
 
     // Assuming the response directly matches the SwapResponse interface
     if (!response.ok) {
-      response.body?.cancel();
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const error = await response.text().catch(() => null);
+      throw new Error(
+        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+      );
     }
 
     const data: BuyWithCryptoHistoryData = (await response.json()).result;

package/src/pay/buyWithCrypto/getStatus.ts

@@ -142,8 +142,10 @@ export async function getBuyWithCryptoStatus(
 
     // Assuming the response directly matches the BuyWithCryptoStatus interface
     if (!response.ok) {
-      response.body?.cancel();
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const error = await response.text().catch(() => null);
+      throw new Error(
+        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+      );
     }
 
     const data: BuyWithCryptoStatus = (await response.json()).result;

package/src/pay/buyWithFiat/getHistory.ts

@@ -78,8 +78,10 @@ export async function getBuyWithFiatHistory(
 
     // Assuming the response directly matches the BuyWithFiatStatus response interface
     if (!response.ok) {
-      response.body?.cancel();
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const error = await response.text().catch(() => null);
+      throw new Error(
+        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+      );
     }
 
     const data: BuyWithFiatHistoryData = (await response.json()).result;

package/src/pay/buyWithFiat/getStatus.ts

@@ -188,8 +188,10 @@ export async function getBuyWithFiatStatus(
     const response = await getClientFetch(params.client)(url);
 
     if (!response.ok) {
-      response.body?.cancel();
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const error = await response.text().catch(() => null);
+      throw new Error(
+        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+      );
     }
 
     return (await response.json()).result;

package/src/pay/getBuyHistory.ts

@@ -93,8 +93,10 @@ export async function getBuyHistory(
 
     // Assuming the response directly matches the SwapResponse interface
     if (!response.ok) {
-      response.body?.cancel();
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const error = await response.text().catch(() => null);
+      throw new Error(
+        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+      );
     }
 
     const data: BuyHistoryData = (await response.json()).result;

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -703,11 +703,7 @@ export function DetailsModal(props: {
               }}
             >
               <CoinsIcon size={iconSize.md} />
-              <Text color="primaryText">
-                {props.supportedNFTs
-                  ? locale.viewFunds.viewAssets
-                  : locale.viewFunds.title}
-              </Text>
+              <Text color="primaryText">{locale.viewFunds.viewAssets}</Text>
             </MenuButton>
           )}
 
@@ -841,34 +837,20 @@ export function DetailsModal(props: {
       />
     );
   } else if (screen === "view-assets") {
-    if (props.supportedNFTs) {
-      content = (
-        <ViewAssets
-          supportedTokens={props.supportedTokens}
-          supportedNFTs={props.supportedNFTs}
-          onBack={() => {
-            setScreen("main");
-          }}
-          theme={props.theme}
-          setScreen={setScreen}
-          client={client}
-          connectLocale={locale}
-          assetTabs={props.detailsModal?.assetTabs}
-        />
-      );
-    } else {
-      // Always show tokens (has the native token at least)
-      content = (
-        <ViewTokens
-          supportedTokens={props.supportedTokens}
-          onBack={() => {
-            setScreen("main");
-          }}
-          client={client}
-          connectLocale={locale}
-        />
-      );
-    }
+    content = (
+      <ViewAssets
+        supportedTokens={props.supportedTokens}
+        supportedNFTs={props.supportedNFTs}
+        onBack={() => {
+          setScreen("main");
+        }}
+        theme={props.theme}
+        setScreen={setScreen}
+        client={client}
+        connectLocale={locale}
+        assetTabs={props.detailsModal?.assetTabs}
+      />
+    );
   } else if (screen === "view-nfts") {
     content = (
       <ViewNFTs

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -68,7 +68,11 @@ export function SwapConfirmationScreen(props: {
 
   const uiErrorMessage = useMemo(() => {
     if (step === "approval" && status === "error" && error) {
-      if (error.toLowerCase().includes("user rejected")) {
+      if (
+        error.toLowerCase().includes("user rejected") ||
+        error.toLowerCase().includes("user closed modal") ||
+        error.toLowerCase().includes("user denied")
+      ) {
         return {
           title: "Failed to Approve",
           message: "Your wallet rejected the approval request.",
@@ -82,7 +86,11 @@ export function SwapConfirmationScreen(props: {
     }
 
     if (step === "swap" && status === "error" && error) {
-      if (error.toLowerCase().includes("user rejected")) {
+      if (
+        error.toLowerCase().includes("user rejected") ||
+        error.toLowerCase().includes("user closed modal") ||
+        error.toLowerCase().includes("user denied")
+      ) {
         return {
           title: "Failed to Confirm",
           message: "Your wallet rejected the confirmation request.",

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx

@@ -176,11 +176,11 @@ export function TokenSelectorScreen(props: {
     enabled: !!props.sourceSupportedTokens && !!chainInfo.data,
   });
 
-  if (walletsAndBalances.isLoading || !walletsAndBalances.data) {
+  if (walletsAndBalances.isLoading || chainInfo.isLoading) {
     return <LoadingScreen />;
   }
 
-  const filteredWallets = Array.from(walletsAndBalances.data.entries() || [])
+  const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
     .filter(([w]) => !props.hiddenWallets?.includes(w.id))
     .filter(([, balances]) => {
       const hasEnoughBalance = balances.some((b) => b.balance.value > 0);

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx

@@ -112,7 +112,11 @@ export function TransferConfirmationScreen(
 
   const uiErrorMessage = useMemo(() => {
     if (step === "approve" && status.id === "error" && status.error) {
-      if (status.error.toLowerCase().includes("user rejected")) {
+      if (
+        status.error.toLowerCase().includes("user rejected") ||
+        status.error.toLowerCase().includes("user closed modal") ||
+        status.error.toLowerCase().includes("user denied")
+      ) {
         return {
           title: "Failed to Approve",
           message: "Your wallet rejected the approval request.",

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

@@ -145,7 +145,11 @@ export function SendFundsForm(props: {
       return locale.transactionFailed;
     }
 
-    if (message.includes("user rejected")) {
+    if (
+      message.includes("user rejected") ||
+      message.includes("user closed modal") ||
+      message.includes("user denied")
+    ) {
       return locale.transactionRejected;
     }
 

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

@@ -82,7 +82,7 @@ export function ViewAssets(props: {
     >
       <Container p="lg">
         <ModalHeader
-          title={connectLocale.viewFunds.title}
+          title={connectLocale.viewFunds.viewAssets}
           onBack={props.onBack}
         />
       </Container>

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

@@ -1,5 +1,4 @@
-import { useQueries } from "@tanstack/react-query";
-import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
 import type { Chain } from "../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -8,6 +7,9 @@ import { getOwnedNFTs as getErc721OwnedNFTs } from "../../../../../extensions/er
 import { isERC721 } from "../../../../../extensions/erc721/read/isERC721.js";
 import { getOwnedNFTs as getErc1155OwnedNFTs } from "../../../../../extensions/erc1155/read/getOwnedNFTs.js";
 import { isERC1155 } from "../../../../../extensions/erc1155/read/isERC1155.js";
+import { getOwnedNFTs } from "../../../../../insight/get-nfts.js";
+import type { Address } from "../../../../../utils/address.js";
+import type { NFT } from "../../../../../utils/nft/parseNft.js";
 import type { Theme } from "../../../../core/design-system/index.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
@@ -16,6 +18,7 @@ import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
 import type { ConnectLocale } from "../locale/types.js";
 
 const fetchNFTs = async (
@@ -108,44 +111,90 @@ export function ViewNFTsContent(props: {
   const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
 
-  const nftList = useMemo(() => {
-    const nfts = [];
-    if (!props.supportedNFTs) return [];
-    for (const chainId in props.supportedNFTs) {
-      if (props.supportedNFTs[chainId]) {
-        nfts.push(
-          ...props.supportedNFTs[chainId].map((address) => ({
-            address,
-            chain: getCachedChain(Number.parseInt(chainId)),
-          })),
-        );
+  const nftQuery = useQuery({
+    queryKey: ["nfts", activeChain?.id, activeAccount?.address],
+    queryFn: async (): Promise<
+      (NFT & { chain: Chain; address: Address; quantityOwned: bigint })[]
+    > => {
+      if (!activeAccount) {
+        throw new Error("No active account");
       }
-    }
-    return nfts;
-  }, [props.supportedNFTs]);
+      if (!activeChain) {
+        throw new Error("No active chain");
+      }
+
+      const result = await getOwnedNFTs({
+        client: props.client,
+        chains: [activeChain],
+        ownerAddress: activeAccount.address,
+      });
+
+      return result
+        .filter((nft) => !!nft.name && !!nft.image_url)
+        .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>,
+                )
+              : {},
+          };
 
-  const results = useQueries({
-    queries: nftList.map((nft) => ({
-      queryKey: ["readContract", nft.chain.id, nft.address],
-      queryFn: () => {
-        if (!activeAccount) {
-          throw new Error("No active account");
-        }
-        return fetchNFTs(
-          props.client,
-          nft.chain,
-          nft.address,
-          activeAccount.address,
-        );
-      },
-      enabled: !!activeAccount,
-    })),
+          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,
+          };
+        });
+    },
+    enabled: !!activeChain && !!activeAccount,
   });
 
   if (!activeChain?.id || !activeAccount?.address) {
     return null;
   }
 
+  const filteredNFTs = props.supportedNFTs?.[activeChain.id]
+    ? nftQuery.data?.filter((nft) =>
+        props.supportedNFTs?.[activeChain.id]
+          ?.map((supportedNFTAddress) => supportedNFTAddress.toLowerCase())
+          .includes(nft.address.toLowerCase()),
+      )
+    : nftQuery.data;
+
   return (
     <>
       <Container
@@ -155,29 +204,21 @@ export function ViewNFTsContent(props: {
           gap: "12px",
         }}
       >
-        {results.map((result, index) => {
-          if (result.error) {
-            console.error(result.error);
-            return null;
-          }
-          return result.isLoading || !result.data ? (
-            <Skeleton
-              key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
-              height="150px"
-              width="150px"
+        {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}
             />
-          ) : (
-            result.data.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" />
     </>
@@ -198,6 +239,7 @@ function NftCard(
     <div
       style={{
         display: "flex",
+        width: "150px",
         flexDirection: "column",
         gap: "4px",
         alignItems: "center",
@@ -263,7 +305,17 @@ function NftCard(
           />
         )}
       </div>
-      <span style={{ fontWeight: 600 }}>{props.metadata.name}</span>
+      <Text
+        size="xs"
+        color="primaryText"
+        style={{
+          fontWeight: 600,
+          textAlign: "center",
+          maxLines: 2,
+        }}
+      >
+        {props.metadata.name}
+      </Text>
     </div>
   );