thirdweb 5.94.1 → 5.95.0-nightly-4c1f384a635054a8cfaaa487e3ba7ada63b221ec-20250415110008

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>
   );
 

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

@@ -1,5 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { getOwnedTokens } from "../../../../../insight/get-tokens.js";
+import { toTokens } from "../../../../../utils/units.js";
 import { fontSize } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
@@ -38,7 +41,7 @@ export function ViewTokens(props: {
     >
       <Container p="lg">
         <ModalHeader
-          title={props.connectLocale.viewFunds.title}
+          title={props.connectLocale.viewFunds.viewTokens}
           onBack={props.onBack}
         />
       </Container>
@@ -63,15 +66,49 @@ export function ViewTokensContent(props: {
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
 }) {
+  const account = useActiveAccount();
   const activeChain = useActiveWalletChain();
-  if (!activeChain) {
-    return null;
-  }
+
   const supportedTokens = props.supportedTokens || defaultTokens;
 
   const tokenList =
     (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
 
+  const erc20TokensQuery = useQuery({
+    queryKey: ["tokens", activeChain?.id, account?.address],
+    queryFn: async () => {
+      if (!activeChain) {
+        throw new Error("No active chain");
+      }
+
+      if (!account) {
+        throw new Error("No account");
+      }
+
+      const result = await getOwnedTokens({
+        client: props.client,
+        chains: [activeChain],
+        ownerAddress: account.address,
+      });
+
+      return result.filter(
+        (token) =>
+          !defaultTokens[activeChain.id]?.some(
+            (t) =>
+              t.address.toLowerCase() === token.token_address.toLowerCase(),
+          ),
+      );
+    },
+    // only fetch tokens if no explicit supported tokens are provided
+    enabled:
+      !!activeChain &&
+      !!account &&
+      (!props.supportedTokens || !props.supportedTokens[activeChain.id]),
+  });
+
+  if (!activeChain || !account) {
+    return null;
+  }
   return (
     <>
       <TokenInfo
@@ -90,6 +127,37 @@ export function ViewTokensContent(props: {
           />
         );
       })}
+
+      {erc20TokensQuery.isLoading && (
+        <Container flex="column" gap="sm" p="sm">
+          <Skeleton height={fontSize.md} width="100%" />
+          <Skeleton height={fontSize.md} width="100%" />
+        </Container>
+      )}
+
+      {erc20TokensQuery.data?.map((token) => {
+        return (
+          <TokenInfo
+            token={{
+              address: token.token_address,
+              name: token.name ?? "",
+              symbol: token.symbol ?? "",
+            }}
+            key={token.token_address}
+            chain={activeChain}
+            client={props.client}
+            balanceData={{
+              symbol: token.symbol ?? "",
+              name: token.name ?? "",
+              decimals: token.decimals ?? 18,
+              displayValue: toTokens(
+                BigInt(token.balance),
+                token.decimals ?? 18,
+              ),
+            }}
+          />
+        );
+      })}
     </>
   );
 }
@@ -98,14 +166,27 @@ function TokenInfo(props: {
   token: ERC20OrNativeToken;
   chain: Chain;
   client: ThirdwebClient;
+  balanceData?: {
+    symbol: string;
+    name: string;
+    decimals: number;
+    displayValue: string;
+  };
 }) {
   const account = useActiveAccount();
-  const tokenBalanceQuery = useWalletBalance({
-    address: account?.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
+  const tokenBalanceQuery = useWalletBalance(
+    {
+      address: account?.address,
+      chain: props.chain,
+      tokenAddress: isNativeToken(props.token)
+        ? undefined
+        : props.token.address,
+      client: props.client,
+    },
+    {
+      enabled: props.balanceData === undefined,
+    },
+  );
 
   const tokenName = isNativeToken(props.token)
     ? tokenBalanceQuery.data?.name
@@ -129,7 +210,9 @@ function TokenInfo(props: {
           <Skeleton height={fontSize.md} width="150px" />
         )}
 
-        {tokenBalanceQuery.data ? (
+        {props.balanceData ? (
+          <Text size="xs"> {formatTokenBalance(props.balanceData)}</Text>
+        ) : tokenBalanceQuery.data ? (
           <Text size="xs"> {formatTokenBalance(tokenBalanceQuery.data)}</Text>
         ) : (
           <Skeleton height={fontSize.xs} width="100px" />

package/src/react/web/ui/MediaRenderer/useResolvedMediaType.ts

@@ -42,7 +42,10 @@ export function useResolvedMediaType(
   });
 
   return {
-    mediaInfo: { url: resolvedUrl, mimeType: resolvedMimeType.data },
+    mediaInfo: {
+      url: resolvedUrl,
+      mimeType: resolvedMimeType.data || "image/", // default to image if no mime type is found
+    },
     isFetched: resolvedMimeType.isFetched || !!mimeType,
   };
 }

package/src/react/web/utils/errors.ts

@@ -1,6 +1,7 @@
 type ApiError = {
   code: string;
-  message?: string;
+  title: string;
+  message: string;
   data?: {
     minimumAmountUSDCents?: string;
     requestedAmountUSDCents?: string;
@@ -9,19 +10,25 @@ type ApiError = {
   };
 };
 
-export const defaultMessage = "Unable to get price quote";
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 export function getErrorMessage(err: any): ApiError {
   if (typeof err.error === "object" && err.error.code) {
     if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
       return {
         code: "MINIMUM_PURCHASE_AMOUNT",
-        message: "Purchase amount is too low",
+        title: "Amount Too Low",
+        message:
+          "The requested amount is less than the minimum purchase. Try another provider or amount.",
       };
     }
   }
+
+  console.error(err);
+
   return {
     code: "UNABLE_TO_GET_PRICE_QUOTE",
-    message: defaultMessage,
+    title: "Failed to Find Quote",
+    message:
+      "We couldn't get a quote for this token pair. Select another token or pay with a debit card.",
   };
 }

package/src/transaction/transaction-store.ts

@@ -1,9 +1,8 @@
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
+import { getTransactions } from "../insight/get-transactions.js";
 import { type Store, createStore } from "../reactive/store.js";
-import { getThirdwebDomains } from "../utils/domains.js";
 import type { Hex } from "../utils/encoding/hex.js";
-import { getClientFetch } from "../utils/fetch.js";
 
 export type StoredTransaction = {
   transactionHash: Hex;
@@ -76,26 +75,16 @@ export async function getPastTransactions(options: {
   const oneMonthsAgoInSeconds = Math.floor(
     (Date.now() - 1 * 30 * 24 * 60 * 60 * 1000) / 1000,
   );
-  const url = new URL(
-    `https://${getThirdwebDomains().insight}/v1/wallets/${walletAddress}/transactions`,
-  );
-  url.searchParams.set("limit", "10");
-  url.searchParams.set("chain", chain.id.toString());
-  url.searchParams.set(
-    "filter_block_timestamp_gte",
-    oneMonthsAgoInSeconds.toString(),
-  );
-  const clientFetch = getClientFetch(client);
-  const result = await clientFetch(url.toString());
-  const json = (await result.json()) as {
-    data: {
-      chain_id: number;
-      hash: string;
-      status: number;
-      to_address: string;
-    }[];
-  };
-  return json.data.map((tx) => ({
+  const result = await getTransactions({
+    client,
+    walletAddress,
+    chains: [chain],
+    queryOptions: {
+      filter_block_timestamp_gte: oneMonthsAgoInSeconds,
+      limit: 20,
+    },
+  });
+  return result.map((tx) => ({
     transactionHash: tx.hash as Hex,
     chainId: tx.chain_id,
     receipt: {

package/src/utils/fetch.ts

@@ -20,16 +20,17 @@ export function getClientFetch(client: ThirdwebClient, ecosystem?: Ecosystem) {
    * @internal
    */
   async function fetchWithHeaders(
-    url: string,
+    url: string | Request,
     init?: Omit<RequestInit, "signal"> & { requestTimeoutMs?: number },
   ): Promise<Response> {
     const { requestTimeoutMs = DEFAULT_REQUEST_TIMEOUT, ...restInit } =
       init || {};
 
     let headers = restInit.headers ? new Headers(restInit.headers) : undefined;
+    const urlString = typeof url === "string" ? url : url.url;
 
     // check if we are making a request to a thirdweb service (we don't want to send any headers to non-thirdweb services)
-    if (isThirdwebUrl(url)) {
+    if (isThirdwebUrl(urlString)) {
       if (!headers) {
         headers = new Headers();
       }
@@ -49,9 +50,9 @@ export function getClientFetch(client: ThirdwebClient, ecosystem?: Ecosystem) {
       // pay urls should never send the auth token, because we always want the "developer" to be the one making the request, not the "end user"
       if (
         authToken &&
-        !isPayUrl(url) &&
-        !isInAppWalletUrl(url) &&
-        !isBundlerUrl(url)
+        !isPayUrl(urlString) &&
+        !isInAppWalletUrl(urlString) &&
+        !isBundlerUrl(urlString)
       ) {
         headers.set("authorization", `Bearer ${authToken}`);
       } else if (secretKey) {

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.94.1";
+export const version = "5.95.0-nightly-4c1f384a635054a8cfaaa487e3ba7ada63b221ec-20250415110008";

package/src/wallets/injected/index.ts

@@ -63,6 +63,9 @@ export async function connectEip1193Wallet({
       });
     } catch (e) {
       console.error(e);
+      if (extractErrorMessage(e)?.toLowerCase()?.includes("rejected")) {
+        throw e;
+      }
       await new Promise((resolve) => setTimeout(resolve, 500));
     }
     attempts++;
@@ -375,3 +378,16 @@ async function switchChain(provider: EIP1193Provider, chain: Chain) {
     });
   }
 }
+
+function extractErrorMessage(e: unknown) {
+  if (e instanceof Error) {
+    return e.message;
+  }
+  if (typeof e === "string") {
+    return e;
+  }
+  if (typeof e === "object" && e !== null) {
+    return JSON.stringify(e);
+  }
+  return String(e);
+}