thirdweb 5.94.2 → 5.95.0-nightly-64bd603301b3067b6a69a29f66a28dee7ffa38f5-20250416000349

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/rpc/fetch-rpc.ts

@@ -72,9 +72,9 @@ export async function fetchRpc(
   });
 
   if (!response.ok) {
-    response.body?.cancel();
+    const error = await response.text().catch(() => null);
     throw new Error(
-      `RPC request failed with status ${response.status} - ${response.statusText}`,
+      `RPC request failed with status ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
     );
   }
 
@@ -116,8 +116,10 @@ export async function fetchSingleRpc(
   });
 
   if (!response.ok) {
-    response.body?.cancel();
-    throw new Error(`RPC request failed with status ${response.status}`);
+    const error = await response.text().catch(() => null);
+    throw new Error(
+      `RPC request failed with status ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
+    );
   }
   if (response.headers.get("Content-Type")?.startsWith("application/json")) {
     return await response.json();

package/src/transaction/actions/gasless/providers/biconomy.ts

@@ -139,7 +139,6 @@ export async function relayBiconomyTransaction(
     },
   );
   if (!response.ok) {
-    response.body?.cancel();
     throw new Error(`Failed to send transaction: ${await response.text()}`);
   }
   const json = await response.json();

package/src/transaction/actions/gasless/providers/openzeppelin.ts

@@ -157,7 +157,6 @@ export async function relayOpenZeppelinTransaction(
   });
 
   if (!response.ok) {
-    response.body?.cancel();
     throw new Error(`Failed to send transaction: ${await response.text()}`);
   }
   const json = await response.json();

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.2";
+export const version = "5.95.0-nightly-64bd603301b3067b6a69a29f66a28dee7ffa38f5-20250416000349";