thirdweb 5.105.14 → 5.105.16-nightly-592bf6f1fdd4f1a2babbef94a37b93881d28b6f5-20250712000413

package/src/engine/server-wallet.ts

@@ -35,9 +35,10 @@ export type ServerWalletOptions = {
    */
   client: ThirdwebClient;
   /**
-   * The vault access token to use your server wallet.
+   * Optional vault access token to use your server wallet.
+   * If not provided, the server wallet will use the project secret key to authenticate.
    */
-  vaultAccessToken: string;
+  vaultAccessToken?: string;
   /**
    * The server wallet address to use for sending transactions inside engine.
    */
@@ -152,9 +153,11 @@ export function serverWallet(options: ServerWalletOptions): ServerWallet {
   const { client, vaultAccessToken, address, chain, executionOptions } =
     options;
 
-  const headers: HeadersInit = {
-    "x-vault-access-token": vaultAccessToken,
-  };
+  const headers: HeadersInit = vaultAccessToken
+    ? {
+        "x-vault-access-token": vaultAccessToken,
+      }
+    : {};
 
   const getExecutionOptionsWithChainId = (
     chainId: number,

package/src/react/core/hooks/useTransactionDetails.ts

@@ -81,7 +81,7 @@ export function useTransactionDetails({
       const [tokenInfo, gasCostWei] = await Promise.all([
         getToken(
           client,
-          erc20Value ? erc20Value.tokenAddress : NATIVE_TOKEN_ADDRESS,
+          erc20Value?.tokenAddress || NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
         ).catch(() => null),
         hasSponsoredTransactions
@@ -151,9 +151,11 @@ export function useTransactionDetails({
         chainMetadata.data?.nativeCurrency?.symbol || "ETH";
       const tokenSymbol = tokenInfo?.symbol || nativeTokenSymbol;
 
-      const totalCostWei = erc20Value
-        ? erc20Value.amountWei
-        : (value || 0n) + (gasCostWei || 0n);
+      const totalCostWei =
+        erc20Value &&
+        erc20Value.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
+          ? erc20Value.amountWei
+          : (value || 0n) + (gasCostWei || 0n);
       const totalCost = toTokens(totalCostWei, decimal);
 
       const price = tokenInfo?.prices[currency || "USD"] || 0;

package/src/react/native/ui/connect/ExternalWalletsList.tsx

@@ -100,6 +100,10 @@ export function AllWalletsList(
       .filter(
         (info) => !externalWallets.find((wallet) => wallet.id === info.id),
       )
+      .filter(
+        (info) =>
+          info.id !== "inApp" && info.id !== "embedded" && info.id !== "smart",
+      )
       .filter((info) => info.hasMobileSupport);
 
     const fuse = new Fuse(filteredWallets, {

package/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -1,11 +1,15 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
 import type { Token } from "../../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import {
   type Address,
   getAddress,
   shortenAddress,
 } from "../../../../utils/address.js";
+import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
+import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -77,6 +81,31 @@ export function TransactionPayment({
     wallet,
   });
 
+  // We can't use useWalletBalance here because erc20Value is a possibly async value
+  const { data: userBalance } = useQuery({
+    enabled: !!activeAccount?.address,
+    queryFn: async (): Promise<string> => {
+      if (!activeAccount?.address) {
+        return "0";
+      }
+      const erc20Value = await resolvePromisedValue(
+        uiOptions.transaction.erc20Value,
+      );
+      const walletBalance = await getWalletBalance({
+        address: activeAccount?.address,
+        chain: uiOptions.transaction.chain,
+        tokenAddress:
+          erc20Value?.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
+            ? erc20Value?.tokenAddress
+            : undefined,
+        client,
+      });
+
+      return walletBalance.displayValue;
+    },
+    queryKey: ["user-balance", activeAccount?.address],
+  });
+
   const contractName =
     transactionDataQuery.data?.contractMetadata?.name || "Unknown Contract";
   const functionName =
@@ -327,7 +356,11 @@ export function TransactionPayment({
           onClick={() => {
             if (transactionDataQuery.data?.tokenInfo) {
               onContinue(
-                transactionDataQuery.data.totalCost,
+                Math.max(
+                  0,
+                  Number(transactionDataQuery.data.totalCost) -
+                    Number(userBalance ?? "0"),
+                ).toString(),
                 transactionDataQuery.data.tokenInfo,
                 getAddress(activeAccount.address),
               );

package/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { checksumAddress } from "../../../../../utils/address.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../utils/units.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -171,9 +172,14 @@ export function FiatProviderSelection({
                         {quote.currency}
                       </Text>
                       <Text color="secondaryText" size="xs">
-                        {toTokens(
-                          quote.destinationAmount,
-                          quote.destinationToken.decimals,
+                        {formatNumber(
+                          Number(
+                            toTokens(
+                              quote.destinationAmount,
+                              quote.destinationToken.decimals,
+                            ),
+                          ),
+                          4,
                         )}{" "}
                         {quote.destinationToken.symbol}
                       </Text>

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

@@ -978,6 +978,11 @@ export function DetailsModal(props: {
         onCancel={() => setScreen("main")}
         onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
+        theme={props.theme}
+        style={{
+          border: "none",
+          borderRadius: radius.lg,
+        }}
         tokenAddress={
           props.displayBalanceToken?.[Number(requestedChainId)] as
             | `0x${string}`

package/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -39,9 +39,16 @@ function AllWalletsUI(props: {
   const setSelectionData = useSetSelectionData();
 
   const walletList = useMemo(() => {
-    return walletInfos.filter((wallet) => {
-      return props.specifiedWallets.findIndex((x) => x.id === wallet.id) === -1;
-    });
+    return walletInfos
+      .filter((wallet) => {
+        return (
+          props.specifiedWallets.findIndex((x) => x.id === wallet.id) === -1
+        );
+      })
+      .filter(
+        (info) =>
+          info.id !== "inApp" && info.id !== "embedded" && info.id !== "smart",
+      );
   }, [props.specifiedWallets]);
 
   const fuseInstance = useMemo(() => {

package/src/stories/ConnectButton/themes.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { darkTheme } from "../../react/core/design-system/index.js";
 import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
 import { storyClient } from "../utils.js";
 
@@ -27,4 +28,14 @@ export const Light: Story = {
   },
 };
 
+export const CustomBlack: Story = {
+  args: {
+    theme: darkTheme({
+      colors: {
+        modalBg: "black",
+      },
+    }),
+  },
+};
+
 export default meta;

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.14";
+export const version = "5.105.16-nightly-592bf6f1fdd4f1a2babbef94a37b93881d28b6f5-20250712000413";