thirdweb 5.105.9 → 5.105.11-nightly-692cedf9211fb5a6c24406df69155b920f7d2557-20250709000414

package/src/react/web/ui/PayEmbed.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Address } from "../../../utils/address.js";
@@ -10,27 +10,18 @@ import type { AppMetadata } from "../../../wallets/types.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../core/design-system/index.js";
-import {
-  type SiweAuthOptions,
-  useSiweAuth,
-} from "../../core/hooks/auth/useSiweAuth.js";
+import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
-import { useActiveAccount } from "../../core/hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
-import { AutoConnect } from "../../web/ui/AutoConnect/AutoConnect.js";
 import { BuyWidget } from "./Bridge/BuyWidget.js";
 import { CheckoutWidget } from "./Bridge/CheckoutWidget.js";
 import { TransactionWidget } from "./Bridge/TransactionWidget.js";
-import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
-import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
-import { Spinner } from "./components/Spinner.js";
 import type { LocaleId } from "./types.js";
 
 /**
@@ -309,17 +300,8 @@ export type PayEmbedProps = {
  * @deprecated Use `BuyWidget`, `CheckoutWidget` or `TransactionWidget` instead.
  */
 export function PayEmbed(props: PayEmbedProps) {
-  const localeQuery = useConnectLocale(props.locale || "en_US");
-  const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
   const connectionManager = useConnectionManager();
-  const activeAccount = useActiveAccount();
-  const activeWallet = useActiveWallet();
-  const siweAuth = useSiweAuth(
-    activeWallet,
-    activeAccount,
-    props.connectOptions?.auth,
-  );
 
   // Add props.chain and props.chains to defined chains store
   useEffect(() => {
@@ -340,7 +322,7 @@ export function PayEmbed(props: PayEmbedProps) {
     }
   }, [props.activeWallet, connectionManager]);
 
-  let content = null;
+  const content = null;
   const metadata =
     props.payOptions && "metadata" in props.payOptions
       ? props.payOptions.metadata
@@ -421,51 +403,6 @@ export function PayEmbed(props: PayEmbedProps) {
     );
   }
 
-  if (!localeQuery.data) {
-    content = (
-      <div
-        style={{
-          alignItems: "center",
-          display: "flex",
-          justifyContent: "center",
-          minHeight: "350px",
-        }}
-      >
-        <Spinner color="secondaryText" size="xl" />
-      </div>
-    );
-  } else {
-    content = (
-      <>
-        <AutoConnect client={props.client} siweAuth={siweAuth} />
-        {screen === "buy" && (
-          <BuyScreen
-            client={props.client}
-            connectLocale={localeQuery.data}
-            connectOptions={props.connectOptions}
-            hiddenWallets={props.hiddenWallets}
-            isEmbed={true}
-            onBack={undefined}
-            onDone={() => {
-              if (props.payOptions?.mode === "transaction") {
-                setScreen("execute-tx");
-              }
-            }}
-            paymentLinkId={props.paymentLinkId}
-            payOptions={
-              props.payOptions || {
-                mode: "fund_wallet",
-              }
-            }
-            supportedTokens={props.supportedTokens}
-            theme={theme}
-            title={metadata?.name || "Buy"}
-          />
-        )}
-      </>
-    );
-  }
-
   return (
     <CustomThemeProvider theme={theme}>
       <EmbedContainer

package/src/react/web/ui/components/Modal.tsx

@@ -150,7 +150,7 @@ export const Modal: React.FC<{
   );
 };
 
-export const CrossContainer = /* @__PURE__ */ StyledDiv({
+const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
   right: spacing.lg,
   top: spacing.lg,

package/src/react/web/ui/components/buttons.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../../core/design-system/index.js";
 import { StyledButton } from "../design-system/elements.js";
 
-export type ButtonProps = {
+type ButtonProps = {
   variant: "primary" | "secondary" | "link" | "accent" | "outline" | "ghost";
   unstyled?: boolean;
   fullWidth?: boolean;

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.9";
+export const version = "5.105.11-nightly-692cedf9211fb5a6c24406df69155b920f7d2557-20250709000414";

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.js

@@ -1,468 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BuyScreen;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const pay_js_1 = require("../../../../../../analytics/track/pay.js");
-const utils_js_1 = require("../../../../../../chains/utils.js");
-const addresses_js_1 = require("../../../../../../constants/addresses.js");
-const formatNumber_js_1 = require("../../../../../../utils/formatNumber.js");
-const index_js_1 = require("../../../../../core/design-system/index.js");
-const useActiveAccount_js_1 = require("../../../../../core/hooks/wallets/useActiveAccount.js");
-const invalidateWalletBalance_js_1 = require("../../../../../core/providers/invalidateWalletBalance.js");
-const ErrorState_js_1 = require("../../../../wallets/shared/ErrorState.js");
-const LoadingScreen_js_1 = require("../../../../wallets/shared/LoadingScreen.js");
-const basic_js_1 = require("../../../components/basic.js");
-const buttons_js_1 = require("../../../components/buttons.js");
-const ChainName_js_1 = require("../../../components/ChainName.js");
-const formElements_js_1 = require("../../../components/formElements.js");
-const Spacer_js_1 = require("../../../components/Spacer.js");
-const TokenSymbol_js_1 = require("../../../components/token/TokenSymbol.js");
-const ConnectButton_js_1 = require("../../ConnectButton.js");
-const NetworkSelector_js_1 = require("../../NetworkSelector.js");
-const PoweredByTW_js_1 = require("../../PoweredByTW.js");
-const nativeToken_js_1 = require("../nativeToken.js");
-const TokenSelector_js_1 = require("../TokenSelector.js");
-const WalletSwitcherConnectionScreen_js_1 = require("../WalletSwitcherConnectionScreen.js");
-const DirectPaymentModeScreen_js_1 = require("./DirectPaymentModeScreen.js");
-const CurrencySelection_js_1 = require("./fiat/CurrencySelection.js");
-const FiatScreenContent_js_1 = require("./fiat/FiatScreenContent.js");
-const OnRampScreen_js_1 = require("./fiat/OnRampScreen.js");
-const useEnabledPaymentMethods_js_1 = require("./main/useEnabledPaymentMethods.js");
-const useUISelectionStates_js_1 = require("./main/useUISelectionStates.js");
-const PayTokenIcon_js_1 = require("./PayTokenIcon.js");
-const BuyTokenInput_js_1 = require("./swap/BuyTokenInput.js");
-const FiatValue_js_1 = require("./swap/FiatValue.js");
-const fetchBalancesForWallet_js_1 = require("./swap/fetchBalancesForWallet.js");
-const SwapFlow_js_1 = require("./swap/SwapFlow.js");
-const SwapScreenContent_js_1 = require("./swap/SwapScreenContent.js");
-const TokenSelectorScreen_js_1 = require("./swap/TokenSelectorScreen.js");
-const TransferFlow_js_1 = require("./swap/TransferFlow.js");
-const useSwapSupportedChains_js_1 = require("./swap/useSwapSupportedChains.js");
-const TransactionModeScreen_js_1 = require("./TransactionModeScreen.js");
-const usePayerSetup_js_1 = require("./usePayerSetup.js");
-/**
- * @internal
- */
-function BuyScreen(props) {
-    const isTestMode = props.payOptions.buyWithCrypto
-        ? props.payOptions.buyWithCrypto.testMode
-        : undefined;
-    const supportedDestinationsQuery = (0, useSwapSupportedChains_js_1.useBuySupportedDestinations)(props.client, isTestMode);
-    if (supportedDestinationsQuery.isError) {
-        return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { center: "both", flex: "row", fullHeight: true, style: {
-                minHeight: "350px",
-            }, children: (0, jsx_runtime_1.jsx)(ErrorState_js_1.ErrorState, { onTryAgain: supportedDestinationsQuery.refetch, title: "Something went wrong" }) }));
-    }
-    if (!supportedDestinationsQuery.data) {
-        return (0, jsx_runtime_1.jsx)(LoadingScreen_js_1.LoadingScreen, {});
-    }
-    const supportedDestinations = props.supportedTokens
-        ? Object.entries(props.supportedTokens).map(([chainId, tokens]) => ({
-            chain: (0, utils_js_1.getCachedChain)(Number.parseInt(chainId)),
-            tokens: tokens.map((t) => ({
-                ...t,
-                buyWithCryptoEnabled: true,
-                buyWithFiatEnabled: true,
-            })),
-        }))
-        : supportedDestinationsQuery.data;
-    return ((0, jsx_runtime_1.jsx)(BuyScreenContent, { ...props, supportedDestinations: supportedDestinations }));
-}
-/**
- * @internal
- */
-function BuyScreenContent(props) {
-    const { client, supportedDestinations, connectLocale, payOptions } = props;
-    const activeAccount = (0, useActiveAccount_js_1.useActiveAccount)();
-    const { payer, setPayer } = (0, usePayerSetup_js_1.usePayerSetup)();
-    const [screen, setScreen] = (0, react_1.useState)({
-        id: "main",
-    });
-    const { tokenAmount, setTokenAmount, toChain, setToChain, deferredTokenAmount, toToken, setToToken, } = (0, useUISelectionStates_js_1.useToTokenSelectionStates)({
-        payOptions,
-        supportedDestinations,
-    });
-    const [hasEditedAmount, setHasEditedAmount] = (0, react_1.useState)(false);
-    const onDone = (0, react_1.useCallback)(() => {
-        setScreen({ id: "main" });
-        props.onDone();
-    }, [props.onDone]);
-    // check if the screen is expanded or not
-    // update supportedSources whenever toToken or toChain is updated
-    const supportedSourcesQuery = (0, useSwapSupportedChains_js_1.useBuySupportedSources)({
-        client: props.client,
-        destinationChainId: toChain.id,
-        destinationTokenAddress: (0, nativeToken_js_1.isNativeToken)(toToken)
-            ? addresses_js_1.NATIVE_TOKEN_ADDRESS
-            : toToken.address,
-    });
-    const destinationSupportedTokens = (0, react_1.useMemo)(() => {
-        return createSupportedTokens(supportedDestinations, payOptions, props.supportedTokens);
-    }, [props.supportedTokens, supportedDestinations, payOptions]);
-    const sourceSupportedTokens = (0, react_1.useMemo)(() => {
-        if (!supportedSourcesQuery.data) {
-            return undefined;
-        }
-        const supportedSources = supportedSourcesQuery.data;
-        return createSupportedTokens(supportedSources, payOptions, props.supportedTokens);
-    }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
-    // preload wallets and balances
-    (0, fetchBalancesForWallet_js_1.useWalletsAndBalances)({
-        client: props.client,
-        mode: payOptions.mode,
-        sourceSupportedTokens: sourceSupportedTokens || [],
-        toChain: toChain,
-        toToken: toToken,
-    });
-    const { fromChain, setFromChain, fromToken, setFromToken } = (0, useUISelectionStates_js_1.useFromTokenSelectionStates)({
-        payOptions,
-        supportedSources: supportedSourcesQuery.data || [],
-    });
-    const { selectedCurrency, setSelectedCurrency } = (0, useUISelectionStates_js_1.useFiatCurrencySelectionStates)({
-        payOptions,
-    });
-    const enabledPaymentMethods = (0, useEnabledPaymentMethods_js_1.useEnabledPaymentMethods)({
-        payOptions: props.payOptions,
-        supportedDestinations: props.supportedDestinations,
-        toChain: toChain,
-        toToken: toToken,
-    });
-    const payDisabled = enabledPaymentMethods.buyWithCryptoEnabled === false &&
-        enabledPaymentMethods.buyWithFiatEnabled === false;
-    // screens ----------------------------
-    const queryClient = (0, react_query_1.useQueryClient)();
-    const onSwapSuccess = (0, react_1.useCallback)((_status) => {
-        props.payOptions.onPurchaseSuccess?.({
-            status: _status,
-            type: "crypto",
-        });
-        (0, invalidateWalletBalance_js_1.invalidateWalletBalance)(queryClient);
-    }, [props.payOptions.onPurchaseSuccess, queryClient]);
-    const onFiatSuccess = (0, react_1.useCallback)((_status) => {
-        props.payOptions.onPurchaseSuccess?.({
-            status: _status,
-            type: "fiat",
-        });
-        (0, invalidateWalletBalance_js_1.invalidateWalletBalance)(queryClient);
-    }, [props.payOptions.onPurchaseSuccess, queryClient]);
-    if (screen.id === "connect-payer-wallet") {
-        return ((0, jsx_runtime_1.jsx)(WalletSwitcherConnectionScreen_js_1.WalletSwitcherConnectionScreen, { accountAbstraction: props.connectOptions?.accountAbstraction, appMetadata: props.connectOptions?.appMetadata, chain: toChain || props.connectOptions?.chain, chains: [toChain, ...(props.connectOptions?.chains || [])], client: props.client, connectLocale: props.connectLocale, hiddenWallets: props.hiddenWallets, isEmbed: props.isEmbed, onBack: () => setScreen(screen.backScreen), onSelect: (w) => {
-                const account = w.getAccount();
-                const chain = w.getChain();
-                if (w && account && chain) {
-                    setPayer({
-                        account,
-                        chain,
-                        wallet: w,
-                    });
-                }
-            }, recommendedWallets: props.connectOptions?.recommendedWallets, showAllWallets: props.connectOptions?.showAllWallets === undefined
-                ? true
-                : props.connectOptions?.showAllWallets, walletConnect: props.connectOptions?.walletConnect, wallets: props.connectOptions?.wallets?.filter((w) => w.id !== "inApp") }));
-    }
-    if (screen.id === "swap-flow" && payer) {
-        return ((0, jsx_runtime_1.jsx)(SwapFlow_js_1.SwapFlow, { approvalAmount: screen.approvalAmount, buyWithCryptoQuote: screen.quote, client: client, isEmbed: props.isEmbed, isFiatFlow: false, onBack: () => {
-                setScreen({
-                    id: "buy-with-crypto",
-                });
-            }, onDone: onDone, onSuccess: onSwapSuccess, onTryAgain: () => {
-                setScreen({
-                    id: "buy-with-crypto",
-                });
-            }, payer: payer, title: props.title, transactionMode: payOptions.mode === "transaction" }));
-    }
-    if (screen.id === "fiat-flow" && payer) {
-        const defaultRecipientAddress = props.payOptions?.paymentInfo?.sellerAddress;
-        const receiverAddress = defaultRecipientAddress || payer.account.address;
-        return ((0, jsx_runtime_1.jsx)(OnRampScreen_js_1.OnRampScreen, { client: client, isEmbed: props.isEmbed, onBack: () => {
-                setScreen({
-                    id: "buy-with-fiat",
-                });
-            }, onDone: onDone, onSuccess: onFiatSuccess, payer: payer, paymentLinkId: props.paymentLinkId, quote: screen.quote, receiverAddress: receiverAddress, testMode: props.payOptions.buyWithFiat !== false &&
-                props.payOptions.buyWithFiat?.testMode === true, theme: typeof props.theme === "string" ? props.theme : props.theme.type, title: props.title, transactionMode: payOptions.mode === "transaction" }));
-    }
-    if (screen.id === "transfer-flow" && payer && activeAccount) {
-        const goBack = () => setScreen({ id: "buy-with-crypto" });
-        // TODO (pay) pass it via screen props
-        const defaultRecipientAddress = props.payOptions?.paymentInfo?.sellerAddress;
-        const receiverAddress = defaultRecipientAddress || activeAccount.address;
-        return ((0, jsx_runtime_1.jsx)(TransferFlow_js_1.TransferFlow, { chain: toChain, client: props.client, isEmbed: props.isEmbed, onBack: goBack, onDone: onDone, onSuccess: onSwapSuccess, onTryAgain: () => {
-                setScreen({
-                    id: "buy-with-crypto",
-                });
-            }, payer: payer, paymentLinkId: props.paymentLinkId, payOptions: payOptions, receiverAddress: receiverAddress, title: props.title, token: toToken, tokenAmount: tokenAmount, transactionMode: props.payOptions.mode === "transaction" }));
-    }
-    if (screen.id === "select-currency") {
-        const goBack = () => setScreen(screen.backScreen);
-        return ((0, jsx_runtime_1.jsx)(CurrencySelection_js_1.CurrencySelection, { onBack: goBack, onSelect: (currency) => {
-                goBack();
-                setSelectedCurrency(currency);
-            } }));
-    }
-    if (screen.id === "select-to-token") {
-        const chains = supportedDestinations.map((x) => x.chain);
-        const goBack = () => setScreen(screen.backScreen);
-        const allowEdits = payOptions?.prefillBuy
-            ?.allowEdits;
-        // if token selection is disabled - only show network selector screen
-        if (allowEdits?.token === false) {
-            return ((0, jsx_runtime_1.jsx)(ChainSelectionScreen, { chains: chains, client: props.client, connectLocale: props.connectLocale, goBack: goBack, setChain: setToChain }));
-        }
-        return ((0, jsx_runtime_1.jsx)(TokenSelector_js_1.TokenSelector, { chain: toChain, chainSelection: 
-            // hide chain selection if it's disabled
-            allowEdits?.chain !== false
-                ? {
-                    chains: chains,
-                    select: (c) => {
-                        setToChain(c);
-                    },
-                }
-                : undefined, client: client, connectLocale: connectLocale, modalTitle: props.title, onBack: goBack, onTokenSelect: (tokenInfo) => {
-                setToToken(tokenInfo);
-                goBack();
-            }, tokenList: ((toChain?.id ? destinationSupportedTokens[toChain.id] : undefined) ||
-                []).filter((x) => x.address.toLowerCase() !== addresses_js_1.NATIVE_TOKEN_ADDRESS.toLowerCase()) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { animate: "fadein", children: (0, jsx_runtime_1.jsxs)("div", { children: [screen.id === "main" && ((0, jsx_runtime_1.jsx)(MainScreen, { client: client, connectOptions: props.connectOptions, enabledPaymentMethods: enabledPaymentMethods, hasEditedAmount: hasEditedAmount, onBack: props.onBack, onSelectBuyToken: () => setScreen({ backScreen: screen, id: "select-to-token" }), payerAccount: payer?.account, payOptions: payOptions, setFromChain: setFromChain, setFromToken: setFromToken, setHasEditedAmount: setHasEditedAmount, setScreen: setScreen, setToChain: setToChain, setTokenAmount: setTokenAmount, setToToken: setToToken, supportedDestinations: supportedDestinations, theme: props.theme, title: props.title, toChain: toChain, tokenAmount: tokenAmount, toToken: toToken })), (screen.id === "select-payment-method" ||
-                    screen.id === "buy-with-crypto" ||
-                    screen.id === "buy-with-fiat" ||
-                    screen.id === "select-from-token") &&
-                    payer && ((0, jsx_runtime_1.jsxs)(TokenSelectedLayout, { client: client, disabled: ("prefillBuy" in payOptions &&
-                        payOptions.prefillBuy?.allowEdits?.amount === false) ||
-                        payOptions.mode !== "fund_wallet", onBack: () => {
-                        if ((screen.id === "buy-with-crypto" ||
-                            screen.id === "buy-with-fiat") &&
-                            enabledPaymentMethods.buyWithCryptoEnabled) {
-                            setScreen({
-                                backScreen: { id: "main" },
-                                id: "select-from-token",
-                            });
-                        }
-                        else if (screen.id === "select-from-token") {
-                            setScreen(screen.backScreen);
-                        }
-                        else {
-                            setScreen({ id: "main" });
-                        }
-                    }, selectedChain: toChain, selectedToken: toToken, setTokenAmount: setTokenAmount, title: props.title, tokenAmount: tokenAmount, children: [screen.id === "buy-with-crypto" && activeAccount && ((0, jsx_runtime_1.jsx)(SwapScreenContent_js_1.SwapScreenContent, { activeAccount: activeAccount, client: client, connectLocale: connectLocale, connectOptions: props.connectOptions, disableTokenSelection: payDisabled === true ||
-                                (payOptions.buyWithCrypto !== false &&
-                                    payOptions.buyWithCrypto?.prefillSource?.allowEdits
-                                        ?.chain === false &&
-                                    payOptions.buyWithCrypto?.prefillSource?.allowEdits
-                                        ?.token === false), fromChain: fromChain, fromToken: fromToken, isEmbed: props.isEmbed, onDone: onDone, payer: payer, paymentLinkId: props.paymentLinkId, payOptions: payOptions, setHasEditedAmount: setHasEditedAmount, setPayer: setPayer, setScreen: setScreen, setTokenAmount: setTokenAmount, 
-                            // pass it even though we are passing payer, because payer might be different
-                            showFromTokenSelector: () => {
-                                setScreen({
-                                    backScreen: screen,
-                                    id: "select-from-token",
-                                });
-                            }, toChain: toChain, tokenAmount: deferredTokenAmount, toToken: toToken })), screen.id === "buy-with-fiat" && ((0, jsx_runtime_1.jsx)(FiatScreenContent_js_1.FiatScreenContent, { client: client, isEmbed: props.isEmbed, onDone: onDone, payer: payer, paymentLinkId: props.paymentLinkId, payOptions: payOptions, selectedCurrency: selectedCurrency, setHasEditedAmount: setHasEditedAmount, setScreen: setScreen, setTokenAmount: setTokenAmount, showCurrencySelector: () => {
-                                setScreen({
-                                    backScreen: screen,
-                                    id: "select-currency",
-                                });
-                            }, theme: props.theme, toChain: toChain, tokenAmount: deferredTokenAmount, toToken: toToken })), screen.id === "select-from-token" &&
-                            supportedSourcesQuery.data &&
-                            sourceSupportedTokens && ((0, jsx_runtime_1.jsx)(TokenSelectorScreen_js_1.TokenSelectorScreen, { client: props.client, fiatSupported: props.payOptions.buyWithFiat !== false, hiddenWallets: props.hiddenWallets, mode: payOptions.mode, onConnect: () => {
-                                setScreen({
-                                    backScreen: screen,
-                                    id: "connect-payer-wallet",
-                                });
-                            }, onPayWithFiat: () => {
-                                setScreen({
-                                    id: "buy-with-fiat",
-                                });
-                            }, onSelectToken: (w, token, chain) => {
-                                const account = w.getAccount();
-                                if (account) {
-                                    setPayer({
-                                        account,
-                                        chain,
-                                        wallet: w,
-                                    });
-                                    setFromToken(token);
-                                    setFromChain(chain);
-                                }
-                                setScreen({ id: "buy-with-crypto" });
-                            }, sourceSupportedTokens: sourceSupportedTokens, sourceTokens: sourceSupportedTokens, toChain: toChain, tokenAmount: tokenAmount, toToken: toToken }))] }))] }) }));
-}
-function SelectedTokenInfo(props) {
-    const getWidth = () => {
-        const amount = (0, formatNumber_js_1.formatNumber)(Number(props.tokenAmount), 6).toString();
-        let chars = amount.replace(".", "").length;
-        const hasDot = amount.includes(".");
-        if (hasDot) {
-            chars += 0.3;
-        }
-        return `calc(${`${Math.max(1, chars)}ch + 2px`})`;
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { center: "y", flex: "row", gap: "sm", style: {
-                justifyContent: "space-between",
-            }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { center: "y", flex: "row", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(formElements_js_1.Input, { "data-placeholder": props.tokenAmount === "", disabled: props.disabled, inputMode: "decimal", onChange: (e) => {
-                                let value = e.target.value;
-                                // Replace comma with period if it exists
-                                value = value.replace(",", ".");
-                                if (value.startsWith(".")) {
-                                    value = `0${value}`;
-                                }
-                                if (value.length > 10) {
-                                    return;
-                                }
-                                const numValue = Number(value);
-                                if (Number.isNaN(numValue)) {
-                                    return;
-                                }
-                                if (value.startsWith("0") && !value.startsWith("0.")) {
-                                    props.setTokenAmount(value.slice(1));
-                                }
-                                else {
-                                    props.setTokenAmount(value);
-                                }
-                            }, onClick: (e) => {
-                                // put cursor at the end of the input
-                                if (props.tokenAmount === "") {
-                                    e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-                                }
-                            }, pattern: "^[0-9]*[.,]?[0-9]*$", placeholder: "0", style: {
-                                border: "none",
-                                borderRadius: "0",
-                                boxShadow: "none",
-                                fontSize: index_js_1.fontSize.lg,
-                                fontWeight: 600,
-                                padding: "0",
-                                paddingBlock: "2px",
-                                textAlign: "left",
-                                width: getWidth(),
-                            }, tabIndex: -1, type: "text", value: props.tokenAmount || "0", variant: "outline" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { center: "y", flex: "row", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { chain: props.selectedChain, color: "secondaryText", size: "md", token: props.selectedToken }), (0, jsx_runtime_1.jsx)(PayTokenIcon_js_1.PayTokenIcon, { chain: props.selectedChain, client: props.client, size: "sm", token: props.selectedToken })] }), (0, jsx_runtime_1.jsx)(FiatValue_js_1.FiatValue, { chain: props.selectedChain, client: props.client, size: "sm", token: props.selectedToken, tokenAmount: props.tokenAmount })] }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: props.selectedChain, client: props.client, short: true, size: "sm" })] }) }));
-}
-function MainScreen(props) {
-    const { setTokenAmount, setToChain, setToToken, setFromChain, setFromToken, payerAccount, client, tokenAmount, payOptions, toToken, toChain, supportedDestinations, enabledPaymentMethods, } = props;
-    const { buyWithCryptoEnabled, buyWithFiatEnabled } = enabledPaymentMethods;
-    const disableContinue = !tokenAmount;
-    switch (payOptions.mode) {
-        case "transaction": {
-            return ((0, jsx_runtime_1.jsx)(TransactionModeScreen_js_1.TransactionModeScreen, { client: client, connectOptions: props.connectOptions, onContinue: (tokenAmount, toChain, toToken) => {
-                    setTokenAmount(tokenAmount);
-                    setToChain(toChain);
-                    setFromChain(toChain);
-                    setFromToken(toToken);
-                    setToToken(toToken);
-                    if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
-                        props.setScreen({ id: "buy-with-fiat" });
-                    }
-                    else {
-                        props.setScreen({
-                            backScreen: { id: "main" },
-                            id: "select-from-token",
-                        });
-                    }
-                }, payerAccount: payerAccount, payUiOptions: payOptions, supportedDestinations: supportedDestinations }));
-        }
-        case "direct_payment": {
-            return ((0, jsx_runtime_1.jsx)(DirectPaymentModeScreen_js_1.DirectPaymentModeScreen, { client: client, connectOptions: props.connectOptions, onContinue: (tokenAmount, toChain, toToken) => {
-                    setTokenAmount(tokenAmount);
-                    setToChain(toChain);
-                    setFromChain(toChain);
-                    setFromToken(toToken);
-                    setToToken(toToken);
-                    if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
-                        props.setScreen({ id: "buy-with-fiat" });
-                    }
-                    else {
-                        props.setScreen({
-                            backScreen: { id: "main" },
-                            id: "select-from-token",
-                        });
-                    }
-                }, payerAccount: payerAccount, payUiOptions: payOptions, supportedDestinations: supportedDestinations }));
-        }
-        default: {
-            return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { px: "lg", children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { onBack: props.onBack, title: props.title }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(BuyTokenInput_js_1.BuyTokenInput, { chain: toChain, client: props.client, freezeAmount: payOptions.prefillBuy?.allowEdits?.amount === false, freezeChainAndToken: (payOptions.prefillBuy?.allowEdits?.chain === false &&
-                            payOptions.prefillBuy?.allowEdits?.token === false) ||
-                            (payOptions.buyWithCrypto !== false &&
-                                payOptions.buyWithCrypto?.prefillSource?.allowEdits?.token ===
-                                    false &&
-                                payOptions.buyWithCrypto?.prefillSource?.allowEdits?.chain ===
-                                    false), onChange: async (value) => {
-                            props.setHasEditedAmount(true);
-                            setTokenAmount(value);
-                        }, onSelectToken: props.onSelectBuyToken, token: toToken, value: tokenAmount }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: !payerAccount ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { ...props.connectOptions, client: props.client, connectButton: {
-                                    style: {
-                                        width: "100%",
-                                    },
-                                }, theme: props.theme }) })) : ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { "data-disabled": disableContinue, disabled: disableContinue, fullWidth: true, onClick: () => {
-                                if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
-                                    props.setScreen({ id: "buy-with-fiat" });
-                                }
-                                else {
-                                    props.setScreen({
-                                        backScreen: { id: "main" },
-                                        id: "select-from-token",
-                                    });
-                                }
-                                (0, pay_js_1.trackPayEvent)({
-                                    client,
-                                    event: "choose_payment_method_fund_wallet_mode",
-                                    toChainId: toChain.id,
-                                    toToken: (0, nativeToken_js_1.isNativeToken)(toToken)
-                                        ? undefined
-                                        : toToken.address,
-                                    walletAddress: payerAccount.address,
-                                });
-                            }, variant: "accent", children: "Continue" })) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), payOptions.showThirdwebBranding !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PoweredByTW_js_1.PoweredByThirdweb, { link: "https://playground.thirdweb.com/connect/pay?utm_source=ub_text" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" })] }))] }));
-        }
-    }
-}
-function TokenSelectedLayout(props) {
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { p: "lg", children: (0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { onBack: props.onBack, title: props.title }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { px: "lg", style: {
-                    paddingBottom: index_js_1.spacing.lg,
-                }, children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(SelectedTokenInfo, { client: props.client, disabled: props.disabled, selectedChain: props.selectedChain, selectedToken: props.selectedToken, setTokenAmount: props.setTokenAmount, tokenAmount: props.tokenAmount }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), props.children] })] }));
-}
-function createSupportedTokens(data, payOptions, supportedTokensOverrides) {
-    // dev override
-    if (supportedTokensOverrides) {
-        return supportedTokensOverrides;
-    }
-    const tokens = {};
-    const isBuyWithFiatDisabled = payOptions.buyWithFiat === false;
-    const isBuyWithCryptoDisabled = payOptions.buyWithCrypto === false;
-    for (const x of data) {
-        tokens[x.chain.id] = x.tokens.filter((t) => {
-            if (t.address === addresses_js_1.ZERO_ADDRESS) {
-                return false;
-            }
-            // for source tokens, data is not provided, so we include all of them
-            if (t.buyWithCryptoEnabled === undefined &&
-                t.buyWithFiatEnabled === undefined) {
-                return true;
-            }
-            // it token supports both - include it
-            if (t.buyWithCryptoEnabled && t.buyWithFiatEnabled) {
-                return true;
-            }
-            // if buyWithFiat is disabled, and buyWithCrypto is not supported by token - exclude the token
-            if (!t.buyWithCryptoEnabled && isBuyWithFiatDisabled) {
-                return false;
-            }
-            // if buyWithCrypto is disabled, and buyWithFiat is not supported by token - exclude the token
-            if (!t.buyWithFiatEnabled && isBuyWithCryptoDisabled) {
-                return false;
-            }
-            return true; // include the token
-        });
-    }
-    return tokens;
-}
-function ChainSelectionScreen(props) {
-    return ((0, jsx_runtime_1.jsx)(NetworkSelector_js_1.NetworkSelectorContent, { chains: props.chains, client: props.client, closeModal: props.goBack, connectLocale: props.connectLocale, networkSelector: {
-            renderChain(renderChainProps) {
-                return ((0, jsx_runtime_1.jsx)(NetworkSelector_js_1.ChainButton, { chain: renderChainProps.chain, client: props.client, confirming: false, connectLocale: props.connectLocale, onClick: () => {
-                        props.setChain(renderChainProps.chain);
-                        props.goBack();
-                    }, switchingFailed: false }));
-            },
-        }, onBack: props.goBack, showTabs: false }));
-}
-//# sourceMappingURL=BuyScreen.js.map