thirdweb 5.105.11 → 5.105.13

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

@@ -17,6 +17,7 @@ import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { formatCurrencyAmount } from "../ConnectWallet/screens/formatTokenBalance.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { Input } from "../components/formElements.js";
@@ -56,6 +57,12 @@ export interface FundWalletProps {
    * Connect options for wallet connection
    */
   connectOptions?: PayEmbedConnectOptions;
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function FundWallet({
@@ -65,6 +72,7 @@ export function FundWallet({
   onContinue,
   presetOptions = [5, 10, 20],
   connectOptions,
+  showThirdwebBranding = true,
 }: FundWalletProps) {
   const [amount, setAmount] = useState(uiOptions.initialAmount ?? "");
   const theme = useCustomTheme();
@@ -108,11 +116,13 @@ export function FundWallet({
   };
 
   const handleQuickAmount = (usdAmount: number) => {
-    if (uiOptions.destinationToken.priceUsd === 0) {
+    const price =
+      uiOptions.destinationToken.prices[uiOptions.currency || "USD"] || 0;
+    if (price === 0) {
       return;
     }
     // Convert USD amount to token amount using token price
-    const tokenAmount = usdAmount / uiOptions.destinationToken.priceUsd;
+    const tokenAmount = usdAmount / price;
     // Format to reasonable decimal places (up to 6 decimals, remove trailing zeros)
     const formattedAmount = numberToPlainString(
       Number.parseFloat(tokenAmount.toFixed(6)),
@@ -221,9 +231,13 @@ export function FundWallet({
                 size="md"
                 style={{ textWrap: "nowrap" }}
               >
-                ≈ $
-                {(Number(amount) * uiOptions.destinationToken.priceUsd).toFixed(
-                  2,
+                ≈{" "}
+                {formatCurrencyAmount(
+                  uiOptions.currency || "USD",
+                  Number(amount) *
+                    (uiOptions.destinationToken.prices[
+                      uiOptions.currency || "USD"
+                    ] || 0),
                 )}
               </Text>
             </Container>
@@ -335,9 +349,12 @@ export function FundWallet({
         />
       )}
 
-      <Spacer y="md" />
-
-      <PoweredByThirdweb />
+      {showThirdwebBranding ? (
+        <div>
+          <Spacer y="md" />
+          <PoweredByThirdweb />
+        </div>
+      ) : null}
       <Spacer y="lg" />
     </WithHeader>
   );

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

@@ -48,6 +48,12 @@ export interface TransactionPaymentProps {
    * Connect options for wallet connection
    */
   connectOptions?: PayEmbedConnectOptions;
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function TransactionPayment({
@@ -55,6 +61,7 @@ export function TransactionPayment({
   client,
   onContinue,
   connectOptions,
+  showThirdwebBranding = true,
 }: TransactionPaymentProps) {
   const theme = useCustomTheme();
   const activeAccount = useActiveAccount();
@@ -121,10 +128,13 @@ export function TransactionPayment({
           }}
         />
 
-        <Spacer y="md" />
-
-        <PoweredByThirdweb />
-        <Spacer y="md" />
+        {showThirdwebBranding ? (
+          <div>
+            <Spacer y="md" />
+            <PoweredByThirdweb />
+            <Spacer y="md" />
+          </div>
+        ) : null}
       </WithHeader>
     );
   }
@@ -342,9 +352,12 @@ export function TransactionPayment({
         />
       )}
 
-      <Spacer y="md" />
-
-      <PoweredByThirdweb />
+      {showThirdwebBranding ? (
+        <div>
+          <Spacer y="md" />
+          <PoweredByThirdweb />
+        </div>
+      ) : null}
       <Spacer y="lg" />
     </WithHeader>
   );

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

@@ -7,6 +7,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { getToken } from "../../../../pay/convert/get-token.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { PurchaseData } from "../../../../pay/types.js";
 import {
   type PreparedTransaction,
@@ -106,6 +107,12 @@ export type TransactionWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The token address needed to complete this transaction. Leave undefined if no token is required.
    */
@@ -176,6 +183,12 @@ export type TransactionWidgetProps = {
    * @default ["crypto", "card"]
    */
   paymentMethods?: ("crypto" | "card")[];
+
+  /**
+   * The currency to use for the payment.
+   * @default "USD"
+   */
+  currency?: SupportedFiatCurrency;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -335,6 +348,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
 
       return {
         data: {
+          currency: props.currency || "USD",
           metadata: {
             description: props.description,
             image: props.image,
@@ -413,6 +427,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        showThirdwebBranding={props.showThirdwebBranding}
       />
     );
   }

package/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import type { Token } from "../../../../../bridge/index.js";
 import { getCachedChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { spacing } from "../../../../core/design-system/index.js";
 import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
@@ -16,12 +17,14 @@ export function TokenBalanceRow({
   amount,
   onClick,
   style,
+  currency,
 }: {
   client: ThirdwebClient;
   token: Token;
   amount: string;
   onClick: (token: Token) => void;
   style?: React.CSSProperties;
+  currency?: SupportedFiatCurrency;
 }) {
   const chain = getCachedChain(token.chainId);
   return (
@@ -66,6 +69,7 @@ export function TokenBalanceRow({
           }}
         >
           <FiatValue
+            currency={currency}
             chain={chain}
             client={client}
             color="primaryText"

package/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -63,6 +63,7 @@ export function PaymentOverview(props: {
         )}
         {props.paymentMethod.type === "wallet" && (
           <TokenBalanceRow
+            currency={props.uiOptions.currency}
             amount={props.fromAmount}
             client={props.client}
             onClick={() => {}}
@@ -158,6 +159,7 @@ export function PaymentOverview(props: {
               style={{ alignItems: "flex-end" }}
             >
               <FiatValue
+                currency={props.uiOptions.currency}
                 chain={defineChain(props.toToken.chainId)}
                 client={props.client}
                 color="primaryText"
@@ -174,6 +176,7 @@ export function PaymentOverview(props: {
         )}
         {props.uiOptions.mode === "fund_wallet" && (
           <TokenBalanceRow
+            currency={props.uiOptions.currency}
             amount={props.toAmount}
             client={props.client}
             onClick={() => {}}

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

@@ -1,6 +1,7 @@
 "use client";
 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 { toTokens } from "../../../../../utils/units.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
@@ -24,6 +25,7 @@ interface FiatProviderSelectionProps {
   toTokenAddress: string;
   toAddress: string;
   toAmount?: string;
+  currency?: SupportedFiatCurrency;
 }
 
 const PROVIDERS = [
@@ -54,6 +56,7 @@ export function FiatProviderSelection({
   toTokenAddress,
   toAddress,
   toAmount,
+  currency,
 }: FiatProviderSelectionProps) {
   const theme = useCustomTheme();
 
@@ -62,7 +65,7 @@ export function FiatProviderSelection({
     amount: toAmount || "0",
     chainId: toChainId,
     client,
-    currency: "USD",
+    currency: currency || "USD",
     receiver: checksumAddress(toAddress),
     tokenAddress: checksumAddress(toTokenAddress),
   });

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

@@ -5,6 +5,7 @@ import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { Token } from "../../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import type { Address } from "../../../../../utils/address.js";
 import { toUnits } from "../../../../../utils/units.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
@@ -82,6 +83,12 @@ export interface PaymentSelectionProps {
    * Fee payer
    */
   feePayer?: "sender" | "receiver";
+
+  /**
+   * The currency to use for the payment.
+   * @default "USD"
+   */
+  currency?: SupportedFiatCurrency;
 }
 
 type Step =
@@ -103,6 +110,7 @@ export function PaymentSelection({
   includeDestinationToken,
   paymentMethods = ["crypto", "card"],
   feePayer,
+  currency,
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -290,6 +298,7 @@ export function PaymentSelection({
             toAmount={destinationAmount}
             toChainId={destinationToken.chainId}
             toTokenAddress={destinationToken.address}
+            currency={currency}
           />
         )}
       </Container>

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

@@ -2,12 +2,13 @@ import { useQuery } from "@tanstack/react-query";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { convertCryptoToFiat } from "../../../../../../../pay/convert/cryptoToFiat.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import type { SupportedFiatCurrency } from "../../../../../../../pay/convert/type.js";
 import { fontSize } from "../../../../../../core/design-system/index.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import type { TextProps } from "../../../../components/text.js";
 import { Text } from "../../../../components/text.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
+import { formatCurrencyAmount } from "../../formatTokenBalance.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { getTokenAddress } from "../../nativeToken.js";
 
@@ -17,6 +18,7 @@ export function FiatValue(
     token: ERC20OrNativeToken;
     chain: Chain;
     client: ThirdwebClient;
+    currency?: SupportedFiatCurrency;
   } & TextProps,
 ) {
   const deferredTokenAmount = useDebouncedValue(props.tokenAmount, 500);
@@ -27,7 +29,7 @@ export function FiatValue(
         client: props.client,
         fromAmount: Number(deferredTokenAmount),
         fromTokenAddress: getTokenAddress(props.token),
-        to: "USD",
+        to: props.currency || "USD",
       }),
     queryKey: [
       "cryptoToFiat",
@@ -43,13 +45,10 @@ export function FiatValue(
 
   return cryptoToFiatQuery.data?.result ? (
     <Text {...props}>
-      $
-      {Number(
-        formatNumber(cryptoToFiatQuery.data.result, 2).toFixed(2),
-      ).toLocaleString(undefined, {
-        maximumFractionDigits: 2,
-        minimumFractionDigits: 2,
-      })}
+      {formatCurrencyAmount(
+        props.currency || "USD",
+        cryptoToFiatQuery.data.result,
+      )}
     </Text>
   ) : null;
 }

package/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts

@@ -1,6 +1,5 @@
 import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../utils/units.js";
-import { getCurrencyMeta } from "./Buy/fiat/currencies.js";
 
 /**
  * @internal
@@ -34,11 +33,17 @@ export function formatTokenAmount(
   ).toString();
 }
 
-export function formatCurrencyAmount(
-  currency: string,
-  amount: number,
-  decimals = 2,
-) {
-  const symbol = getCurrencyMeta(currency).symbol;
-  return `${symbol}${formatNumber(amount, decimals).toFixed(decimals)}`;
+export function formatCurrencyAmount(currency: string, amount: number) {
+  return formatMoney(amount, "en-US", currency);
+}
+
+function formatMoney(
+  value: number,
+  locale: string,
+  currencyCode: string,
+): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currencyCode,
+  }).format(value);
 }

package/src/stories/Bridge/fixtures.ts

@@ -26,7 +26,9 @@ export const ETH: Token = {
   iconUri:
     "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png",
   name: "Ethereum",
-  priceUsd: 1000,
+  prices: {
+    USD: 1000,
+  },
   symbol: "ETH",
 };
 
@@ -37,7 +39,9 @@ export const USDC: Token = {
   iconUri:
     "https://coin-images.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
   name: "USD Coin",
-  priceUsd: 1,
+  prices: {
+    USD: 1,
+  },
   symbol: "USDC",
 };
 
@@ -48,7 +52,9 @@ export const UNI: Token = {
   iconUri:
     "https://coin-images.coingecko.com/coins/images/12504/large/uniswap-uni.png",
   name: "Uniswap",
-  priceUsd: 1000,
+  prices: {
+    USD: 1000,
+  },
   symbol: "UNI",
 };
 
@@ -93,7 +99,9 @@ export const simpleOnrampQuote: BridgePrepareResult = JSON.parse(
       iconUri:
         "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
       name: "USD Coin (PoS)",
-      priceUsd: 1.0,
+      prices: {
+        USD: 1.0,
+      },
       symbol: "USDC",
     },
     id: "onramp-simple-123",
@@ -122,7 +130,9 @@ export const onrampWithSwapsQuote: BridgePrepareResult = JSON.parse(
       chainId: 1,
       decimals: 18,
       name: "Ethereum",
-      priceUsd: 2500.0,
+      prices: {
+        USD: 2500.0,
+      },
       symbol: "ETH",
     },
     id: "onramp-swaps-456",
@@ -143,7 +153,9 @@ export const onrampWithSwapsQuote: BridgePrepareResult = JSON.parse(
           chainId: 137,
           decimals: 18,
           name: "Wrapped Ether",
-          priceUsd: 2500.0,
+          prices: {
+            USD: 2500.0,
+          },
           symbol: "WETH",
         },
         estimatedExecutionTimeMs: 30000, // 110 USDC
@@ -155,7 +167,9 @@ export const onrampWithSwapsQuote: BridgePrepareResult = JSON.parse(
           iconUri:
             "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
           name: "USD Coin (PoS)",
-          priceUsd: 1.0,
+          prices: {
+            USD: 1.0,
+          },
           symbol: "USDC",
         },
         transactions: [
@@ -186,7 +200,9 @@ export const onrampWithSwapsQuote: BridgePrepareResult = JSON.parse(
           chainId: 1,
           decimals: 18,
           name: "Ethereum",
-          priceUsd: 2500.0,
+          prices: {
+            USD: 2500.0,
+          },
           symbol: "ETH",
         },
         estimatedExecutionTimeMs: 180000, // 0.044 WETH
@@ -196,7 +212,9 @@ export const onrampWithSwapsQuote: BridgePrepareResult = JSON.parse(
           chainId: 137,
           decimals: 18,
           name: "Wrapped Ether",
-          priceUsd: 2500.0,
+          prices: {
+            USD: 2500.0,
+          },
           symbol: "WETH",
         },
         transactions: [
@@ -251,7 +269,9 @@ export const simpleBuyQuote: BridgePrepareResult = JSON.parse(
           iconUri:
             "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
           name: "USD Coin",
-          priceUsd: 1.0,
+          prices: {
+            USD: 1.0,
+          },
           symbol: "USDC",
         },
         estimatedExecutionTimeMs: 60000,
@@ -263,7 +283,9 @@ export const simpleBuyQuote: BridgePrepareResult = JSON.parse(
           iconUri:
             "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
           name: "Ethereum",
-          priceUsd: 2500.0,
+          prices: {
+            USD: 2500.0,
+          },
           symbol: "ETH",
         },
         transactions: [
@@ -309,7 +331,9 @@ export const longTextBuyQuote: BridgePrepareResult = JSON.parse(
           iconUri:
             "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
           name: "USD Coin (USDC.e on Etherlink)",
-          priceUsd: 1.0,
+          prices: {
+            USD: 1.0,
+          },
           symbol: "USDC.e",
         },
         estimatedExecutionTimeMs: 60000,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.11";
+export const version = "5.105.13";

package/src/wallets/__generated__/wallet/ag.jup/index.ts

@@ -2,31 +2,31 @@
 // Do not modify this file manually.
 
 export const wallet = {
+  id: "ag.jup",
+  name: "Jupiter",
+  homepage: "https://jup.ag/mobile",
+  image_id: "7601bec3-144f-4c9d-30a1-2d4a372ede00",
   app: {
+    browser: null,
+    ios: "https://apps.apple.com/us/app/jupiter-solana-swap-wallet/id6484069059",
     android:
       "https://play.google.com/store/apps/details?id=ag.jup.jupiter.android",
-    browser: null,
+    mac: null,
+    windows: null,
+    linux: null,
     chrome: null,
-    edge: null,
     firefox: null,
-    ios: "https://apps.apple.com/us/app/jupiter-solana-swap-wallet/id6484069059",
-    linux: null,
-    mac: null,
-    opera: null,
     safari: null,
-    windows: null,
-  },
-  desktop: {
-    native: null,
-    universal: null,
+    edge: null,
+    opera: null,
   },
-  homepage: "https://jup.ag/mobile",
-  id: "ag.jup",
-  image_id: "7601bec3-144f-4c9d-30a1-2d4a372ede00",
+  rdns: null,
   mobile: {
     native: "jupiter://",
     universal: null,
   },
-  name: "Jupiter",
-  rdns: null,
+  desktop: {
+    native: null,
+    universal: null,
+  },
 } as const;

package/src/wallets/__generated__/wallet/ai.hacken/index.ts

@@ -2,31 +2,31 @@
 // Do not modify this file manually.
 
 export const wallet = {
+  id: "ai.hacken",
+  name: "hAI by Hacken",
+  homepage: "https://hacken.ai",
+  image_id: "d2ff6baf-5051-4bf2-edec-32450b451000",
   app: {
+    browser: "https://hacken.ai",
+    ios: "https://apps.apple.com/us/app/hai-by-hacken/id1501384789",
     android:
       "https://play.google.com/store/apps/details?id=com.hackenai.hackenaiapp&hl=en_US",
-    browser: "https://hacken.ai",
+    mac: null,
+    windows: null,
+    linux: null,
     chrome: null,
-    edge: null,
     firefox: null,
-    ios: "https://apps.apple.com/us/app/hai-by-hacken/id1501384789",
-    linux: null,
-    mac: null,
-    opera: null,
     safari: null,
-    windows: null,
-  },
-  desktop: {
-    native: null,
-    universal: null,
+    edge: null,
+    opera: null,
   },
-  homepage: "https://hacken.ai",
-  id: "ai.hacken",
-  image_id: "d2ff6baf-5051-4bf2-edec-32450b451000",
+  rdns: null,
   mobile: {
     native: "hai://",
     universal: "https://hacken.ai",
   },
-  name: "hAI by Hacken",
-  rdns: null,
+  desktop: {
+    native: null,
+    universal: null,
+  },
 } as const;

package/src/wallets/__generated__/wallet/ai.pundi/index.ts

@@ -2,31 +2,31 @@
 // Do not modify this file manually.
 
 export const wallet = {
+  id: "ai.pundi",
+  name: "Pundi Wallet",
+  homepage: "https://pundi.ai/",
+  image_id: "f095abd7-575e-4851-cf9c-79c2c4e4cc00",
   app: {
+    browser: null,
+    ios: "https://apps.apple.com/us/app/f-x-wallet-by-function-x-labs/id1504798360",
     android:
       "https://play.google.com/store/apps/details?id=com.pundix.functionx",
-    browser: null,
+    mac: null,
+    windows: null,
+    linux: null,
     chrome: null,
-    edge: null,
     firefox: null,
-    ios: "https://apps.apple.com/us/app/f-x-wallet-by-function-x-labs/id1504798360",
-    linux: null,
-    mac: null,
-    opera: null,
     safari: null,
-    windows: null,
-  },
-  desktop: {
-    native: null,
-    universal: null,
+    edge: null,
+    opera: null,
   },
-  homepage: "https://pundi.ai/",
-  id: "ai.pundi",
-  image_id: "f095abd7-575e-4851-cf9c-79c2c4e4cc00",
+  rdns: null,
   mobile: {
     native: "fxwallet://",
     universal: "https://fx.wallet/wc",
   },
-  name: "Pundi Wallet",
-  rdns: null,
+  desktop: {
+    native: null,
+    universal: null,
+  },
 } as const;