thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.1-nightly-bb09e20bcb1662c088bf8b61486df7d0d92da8d0-20250618000421

package/dist/cjs/react/web/ui/Bridge/CheckoutWidget.js

@@ -0,0 +1,143 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutWidget = CheckoutWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const addresses_js_1 = require("../../../../constants/addresses.js");
+const get_token_js_1 = require("../../../../pay/convert/get-token.js");
+const address_js_1 = require("../../../../utils/address.js");
+const json_js_1 = require("../../../../utils/json.js");
+const units_js_1 = require("../../../../utils/units.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const ConnectEmbed_js_1 = require("../ConnectWallet/Modal/ConnectEmbed.js");
+const getConnectLocale_js_1 = require("../ConnectWallet/locale/getConnectLocale.js");
+const DynamicHeight_js_1 = require("../components/DynamicHeight.js");
+const Spinner_js_1 = require("../components/Spinner.js");
+const BridgeOrchestrator_js_1 = require("./BridgeOrchestrator.js");
+const UnsupportedTokenScreen_js_1 = require("./UnsupportedTokenScreen.js");
+/**
+ * Widget a prebuilt UI for purchasing a specific token.
+ *
+ * @param props - Props of type [`CheckoutWidgetProps`](https://portal.thirdweb.com/references/typescript/v5/CheckoutWidgetProps) to configure the CheckoutWidget component.
+ *
+ * @example
+ * ### Default configuration
+ *
+ * By default, the `CheckoutWidget` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *  />
+ * ```
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `CheckoutWidget` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Update the Title
+ *
+ * You can update the title of the widget by passing a `title` prop to the `CheckoutWidget` component.
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *   title="Checkout ETH"
+ * />
+ * ```
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `CheckoutWidget` component.
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *   connectOptions={{
+ *     connectModal: {
+ *       size: 'compact',
+ *       title: "Sign in",
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * Refer to the [`CheckoutWidgetConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/CheckoutWidgetConnectOptions) type for more details.
+ *
+ * @bridge
+ * @beta
+ * @react
+ */
+function CheckoutWidget(props) {
+    const localeQuery = (0, getConnectLocale_js_1.useConnectLocale)(props.locale || "en_US");
+    const theme = props.theme || "dark";
+    const bridgeDataQuery = (0, react_query_1.useQuery)({
+        queryKey: ["bridgeData", (0, json_js_1.stringify)(props)],
+        queryFn: async () => {
+            const token = await (0, get_token_js_1.getToken)(props.client, (0, address_js_1.checksumAddress)(props.tokenAddress || addresses_js_1.NATIVE_TOKEN_ADDRESS), props.chain.id).catch((err) => err.message.includes("not supported") ? undefined : Promise.reject(err));
+            if (!token) {
+                return {
+                    type: "unsupported_token",
+                    tokenAddress: (0, address_js_1.checksumAddress)(props.tokenAddress || addresses_js_1.NATIVE_TOKEN_ADDRESS),
+                    chain: props.chain,
+                };
+            }
+            return {
+                type: "success",
+                data: {
+                    mode: "direct_payment",
+                    metadata: {
+                        title: props.name,
+                        image: props.image,
+                        description: props.description,
+                    },
+                    paymentInfo: {
+                        token,
+                        amount: (0, units_js_1.toTokens)(props.amount, token.decimals),
+                        sellerAddress: props.seller,
+                        feePayer: props.feePayer === "seller" ? "receiver" : "sender", // User is sender, seller is receiver
+                    },
+                },
+            };
+        },
+    });
+    let content = null;
+    if (!localeQuery.data || bridgeDataQuery.isLoading) {
+        content = ((0, jsx_runtime_1.jsx)("div", { style: {
+                minHeight: "350px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, children: (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "xl", color: "secondaryText" }) }));
+    }
+    else if (bridgeDataQuery.data?.type === "unsupported_token") {
+        // Show unsupported token screen
+        content = (0, jsx_runtime_1.jsx)(UnsupportedTokenScreen_js_1.UnsupportedTokenScreen, { chain: bridgeDataQuery.data.chain });
+    }
+    else if (bridgeDataQuery.data?.type === "success") {
+        // Show normal bridge orchestrator
+        content = ((0, jsx_runtime_1.jsx)(BridgeOrchestrator_js_1.BridgeOrchestrator, { client: props.client, uiOptions: bridgeDataQuery.data.data, connectOptions: props.connectOptions, connectLocale: localeQuery.data, purchaseData: props.purchaseData, paymentLinkId: props.paymentLinkId, onComplete: () => {
+                props.onSuccess?.();
+            }, onError: (err) => {
+                props.onError?.(err);
+            }, onCancel: () => {
+                props.onCancel?.();
+            }, presetOptions: props.presetOptions, receiverAddress: props.seller }));
+    }
+    return ((0, jsx_runtime_1.jsx)(CustomThemeProvider_js_1.CustomThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(ConnectEmbed_js_1.EmbedContainer, { modalSize: "compact", style: props.style, className: props.className, children: (0, jsx_runtime_1.jsx)(DynamicHeight_js_1.DynamicHeight, { children: content }) }) }));
+}
+//# sourceMappingURL=CheckoutWidget.js.map

package/dist/cjs/react/web/ui/Bridge/CheckoutWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckoutWidget.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/CheckoutWidget.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/react/web/ui/Bridge/DirectPayment.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectPayment = DirectPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_js_1 = require("../../../../chains/utils.js");
+const address_js_1 = require("../../../../utils/address.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const useActiveAccount_js_1 = require("../../../core/hooks/wallets/useActiveAccount.js");
+const wallet_js_1 = require("../../../core/utils/wallet.js");
+const ConnectButton_js_1 = require("../ConnectWallet/ConnectButton.js");
+const PoweredByTW_js_1 = require("../ConnectWallet/PoweredByTW.js");
+const FiatValue_js_1 = require("../ConnectWallet/screens/Buy/swap/FiatValue.js");
+const ChainName_js_1 = require("../components/ChainName.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const basic_js_1 = require("../components/basic.js");
+const buttons_js_1 = require("../components/buttons.js");
+const text_js_1 = require("../components/text.js");
+const TokenAndChain_js_1 = require("./common/TokenAndChain.js");
+const WithHeader_js_1 = require("./common/WithHeader.js");
+function DirectPayment({ uiOptions, client, onContinue, connectOptions, }) {
+    const activeAccount = (0, useActiveAccount_js_1.useActiveAccount)();
+    const chain = (0, utils_js_1.defineChain)(uiOptions.paymentInfo.token.chainId);
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const handleContinue = () => {
+        onContinue(uiOptions.paymentInfo.amount, uiOptions.paymentInfo.token, uiOptions.paymentInfo.sellerAddress);
+    };
+    const ensName = (0, wallet_js_1.useEnsName)({
+        address: uiOptions.paymentInfo.sellerAddress,
+        client,
+    });
+    const sellerAddress = ensName.data || (0, address_js_1.shortenAddress)(uiOptions.paymentInfo.sellerAddress);
+    const buyNow = ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryButtonText", children: "Buy Now \u00B7" }), (0, jsx_runtime_1.jsx)(FiatValue_js_1.FiatValue, { tokenAmount: uiOptions.paymentInfo.amount, token: uiOptions.paymentInfo.token, chain: chain, client: client, color: "primaryButtonText", size: "md" })] }));
+    return ((0, jsx_runtime_1.jsxs)(WithHeader_js_1.WithHeader, { uiOptions: uiOptions, defaultTitle: "Direct Payment", client: client, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", gap: "3xs", style: {
+                    justifyContent: "space-between",
+                }, children: [(0, jsx_runtime_1.jsx)(FiatValue_js_1.FiatValue, { tokenAmount: uiOptions.paymentInfo.amount, token: uiOptions.paymentInfo.token, chain: chain, client: client, color: "primaryText", size: "xl", weight: 700 }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", gap: "3xs", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "secondaryText", style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                            }, children: "One-time payment" }) })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Sold by" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", style: {
+                            fontFamily: "monospace",
+                        }, children: sellerAddress })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Price" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", style: {
+                            fontFamily: "monospace",
+                        }, children: `${uiOptions.paymentInfo.amount} ${uiOptions.paymentInfo.token.symbol}` })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Network" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", center: "y", children: [(0, jsx_runtime_1.jsx)(TokenAndChain_js_1.ChainIcon, { chain: chain, size: "xs", client: client }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: chain, client: client, size: "sm", color: "primaryText", short: true, style: {
+                                    fontFamily: "monospace",
+                                } })] })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [activeAccount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "primary", fullWidth: true, onClick: handleContinue, children: buyNow })) : ((0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { client: client, theme: theme, connectButton: {
+                            label: buyNow,
+                            style: {
+                                width: "100%",
+                            },
+                        }, ...connectOptions })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(PoweredByTW_js_1.PoweredByThirdweb, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" })] })] }));
+}
+//# sourceMappingURL=DirectPayment.js.map

package/dist/cjs/react/web/ui/Bridge/DirectPayment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectPayment.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/DirectPayment.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/react/web/ui/Bridge/ErrorBanner.js

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBanner = ErrorBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_icons_1 = require("@radix-ui/react-icons");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../core/design-system/index.js");
+const useBridgeError_js_1 = require("../../../core/hooks/useBridgeError.js");
+const basic_js_1 = require("../components/basic.js");
+const buttons_js_1 = require("../components/buttons.js");
+const text_js_1 = require("../components/text.js");
+function ErrorBanner({ error, onRetry, onCancel }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const { userMessage } = (0, useBridgeError_js_1.useBridgeError)({ error });
+    return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "md", p: "lg", fullHeight: true, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { alignItems: "flex-start" }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { center: "both", style: {
+                        width: "24px",
+                        height: "24px",
+                        borderRadius: "50%",
+                        backgroundColor: theme.colors.tertiaryBg,
+                        flexShrink: 0,
+                    }, children: (0, jsx_runtime_1.jsx)(react_icons_1.CrossCircledIcon, { width: index_js_1.iconSize.md, height: index_js_1.iconSize.md, color: theme.colors.danger }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", style: { flex: 1 }, fullHeight: true, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", children: "Error" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", style: {
+                                minHeight: "100px",
+                            }, children: (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: userMessage }) }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", style: { justifyContent: "flex-end" }, children: [(0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "primary", onClick: onRetry, children: "Try Again" }), onCancel && ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }))] })] })] }) }));
+}
+//# sourceMappingURL=ErrorBanner.js.map

package/dist/cjs/react/web/ui/Bridge/ErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBanner.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/ErrorBanner.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AA0Bb,kCA2DC;;AApFD,uDAAyD;AACzD,+FAAoF;AACpF,mEAAgE;AAChE,6EAAuE;AACvE,qDAAmD;AACnD,yDAAkD;AAClD,mDAA6C;AAmB7C,SAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAoB;IACxE,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kCAAc,EAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAElD,OAAO,CACL,uBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,UAAU,kBAEjD,wBAAC,oBAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,aAChE,uBAAC,oBAAS,IACR,MAAM,EAAC,MAAM,EACb,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;wBACxC,UAAU,EAAE,CAAC;qBACd,YAED,uBAAC,8BAAgB,IACf,KAAK,EAAE,mBAAQ,CAAC,EAAE,EAClB,MAAM,EAAE,mBAAQ,CAAC,EAAE,EACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAC1B,GACQ,EAEZ,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,mBAC9D,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,sBAE5B,EACP,uBAAC,oBAAS,IACR,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,IAAI,EACR,KAAK,EAAE;gCACL,SAAS,EAAE,OAAO;6BACnB,YAED,uBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAClD,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,YAClC,WAAW,GACP,GACG,GACF,EAGZ,wBAAC,oBAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,aAClE,uBAAC,mBAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,0BAEjC,EACR,QAAQ,IAAI,CACX,uBAAC,mBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,QAAQ,uBAEpC,CACV,IACS,IACF,IACF,GACF,CACb,CAAC;AACJ,CAAC"}

package/dist/cjs/react/web/ui/Bridge/FundWallet.js

@@ -0,0 +1,122 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FundWallet = FundWallet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const address_js_1 = require("../../../../utils/address.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../core/design-system/index.js");
+const useActiveAccount_js_1 = require("../../../core/hooks/wallets/useActiveAccount.js");
+const ConnectButton_js_1 = require("../ConnectWallet/ConnectButton.js");
+const PoweredByTW_js_1 = require("../ConnectWallet/PoweredByTW.js");
+const OutlineWalletIcon_js_1 = require("../ConnectWallet/icons/OutlineWalletIcon.js");
+const WalletRow_js_1 = require("../ConnectWallet/screens/Buy/swap/WalletRow.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const basic_js_1 = require("../components/basic.js");
+const buttons_js_1 = require("../components/buttons.js");
+const formElements_js_1 = require("../components/formElements.js");
+const text_js_1 = require("../components/text.js");
+const TokenAndChain_js_1 = require("./common/TokenAndChain.js");
+const WithHeader_js_1 = require("./common/WithHeader.js");
+function FundWallet({ client, receiverAddress, uiOptions, onContinue, presetOptions = [5, 10, 20], connectOptions, }) {
+    const [amount, setAmount] = (0, react_1.useState)(uiOptions.initialAmount ?? "");
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const account = (0, useActiveAccount_js_1.useActiveAccount)();
+    const receiver = receiverAddress ?? account?.address;
+    const handleAmountChange = (inputValue) => {
+        let processedValue = inputValue;
+        // Replace comma with period if it exists
+        processedValue = processedValue.replace(",", ".");
+        if (processedValue.startsWith(".")) {
+            processedValue = `0${processedValue}`;
+        }
+        const numValue = Number(processedValue);
+        if (Number.isNaN(numValue)) {
+            return;
+        }
+        if (processedValue.startsWith("0") && !processedValue.startsWith("0.")) {
+            setAmount(processedValue.slice(1));
+        }
+        else {
+            setAmount(processedValue);
+        }
+    };
+    const getAmountFontSize = () => {
+        const length = amount.length;
+        if (length > 12)
+            return index_js_1.fontSize.md;
+        if (length > 8)
+            return index_js_1.fontSize.lg;
+        return index_js_1.fontSize.xl;
+    };
+    const isValidAmount = amount && Number(amount) > 0;
+    const focusInput = () => {
+        const input = document.querySelector("#amount-input");
+        input?.focus();
+    };
+    const handleQuickAmount = (usdAmount) => {
+        if (uiOptions.destinationToken.priceUsd === 0) {
+            return;
+        }
+        // Convert USD amount to token amount using token price
+        const tokenAmount = usdAmount / uiOptions.destinationToken.priceUsd;
+        // Format to reasonable decimal places (up to 6 decimals, remove trailing zeros)
+        const formattedAmount = Number.parseFloat(tokenAmount.toFixed(6)).toString();
+        setAmount(formattedAmount);
+    };
+    return ((0, jsx_runtime_1.jsxs)(WithHeader_js_1.WithHeader, { uiOptions: uiOptions, defaultTitle: `Buy ${uiOptions.destinationToken.symbol}`, client: client, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "both", gap: "3xs", p: "md", style: {
+                            flexWrap: "nowrap",
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            borderRadius: index_js_1.radius.md,
+                            backgroundColor: theme.colors.tertiaryBg,
+                        }, children: [(0, jsx_runtime_1.jsx)(TokenAndChain_js_1.TokenAndChain, { token: uiOptions.destinationToken, client: client, size: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", center: "x", expand: true, style: {
+                                    justifyContent: "flex-end",
+                                    alignItems: "flex-end",
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { cursor: "text" }, onClick: focusInput, onKeyDown: (e) => {
+                                            if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                focusInput();
+                                            }
+                                        }, role: "button", tabIndex: 0, children: (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "y", gap: "xs", style: {
+                                                flexWrap: "nowrap",
+                                                justifyContent: "flex-end",
+                                            }, children: (0, jsx_runtime_1.jsx)(formElements_js_1.Input, { id: "amount-input", variant: "transparent", pattern: "^[0-9]*[.,]?[0-9]*$", inputMode: "decimal", placeholder: "0", type: "text", "data-placeholder": amount === "", value: amount || "0", onClick: (e) => {
+                                                    // put cursor at the end of the input
+                                                    if (amount === "") {
+                                                        e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
+                                                    }
+                                                }, onChange: (e) => {
+                                                    handleAmountChange(e.target.value);
+                                                }, style: {
+                                                    fontSize: getAmountFontSize(),
+                                                    fontWeight: 600,
+                                                    textAlign: "right",
+                                                    padding: "0",
+                                                    border: "none",
+                                                    boxShadow: "none",
+                                                } }) }) }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "both", style: { height: index_js_1.fontSize.lg, flexWrap: "nowrap" }, children: (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "md", color: "secondaryText", style: { textWrap: "nowrap" }, children: ["\u2248 $", (Number(amount) * uiOptions.destinationToken.priceUsd).toFixed(2)] }) })] })] }), presetOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "x", gap: "xs", style: {
+                                    justifyContent: "space-evenly",
+                                }, children: presetOptions?.map((amount) => ((0, jsx_runtime_1.jsxs)(buttons_js_1.Button, { variant: "outline", onClick: () => handleQuickAmount(Number(amount)), style: {
+                                        padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                                        fontSize: index_js_1.fontSize.sm,
+                                        flex: 1,
+                                        backgroundColor: theme.colors.tertiaryBg,
+                                    }, children: ["$", amount] }, amount))) })] })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", gap: "sm", px: "md", py: "sm", center: "y", color: "secondaryText", style: {
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            backgroundColor: theme.colors.tertiaryBg,
+                            borderRadius: index_js_1.radius.md,
+                        }, children: receiver ? ((0, jsx_runtime_1.jsx)(WalletRow_js_1.WalletRow, { address: receiver, client: client, iconSize: "md", textSize: "sm" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OutlineWalletIcon_js_1.OutlineWalletIcon, { size: index_js_1.iconSize.md }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", style: {
+                                        flex: 1,
+                                    }, children: "No Wallet Connected" })] })) })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), receiver ? ((0, jsx_runtime_1.jsxs)(buttons_js_1.Button, { variant: "primary", fullWidth: true, disabled: !isValidAmount, onClick: () => {
+                    if (isValidAmount) {
+                        onContinue(amount, uiOptions.destinationToken, (0, address_js_1.getAddress)(receiver));
+                    }
+                }, style: {
+                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                    fontSize: index_js_1.fontSize.md,
+                }, children: ["Buy ", amount, " ", uiOptions.destinationToken.symbol] })) : ((0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { client: client, theme: theme, connectButton: {
+                    label: `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+                }, ...connectOptions })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(PoweredByTW_js_1.PoweredByThirdweb, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" })] }));
+}
+//# sourceMappingURL=FundWallet.js.map

package/dist/cjs/react/web/ui/Bridge/FundWallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FundWallet.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/FundWallet.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/react/web/ui/Bridge/QuoteLoader.js

@@ -0,0 +1,99 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuoteLoader = QuoteLoader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const addresses_js_1 = require("../../../../constants/addresses.js");
+const units_js_1 = require("../../../../utils/units.js");
+const useBridgePrepare_js_1 = require("../../../core/hooks/useBridgePrepare.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const Spinner_js_1 = require("../components/Spinner.js");
+const basic_js_1 = require("../components/basic.js");
+const text_js_1 = require("../components/text.js");
+function QuoteLoader({ destinationToken, paymentMethod, amount, sender, receiver, client, onQuoteReceived, onError, purchaseData, paymentLinkId, feePayer, }) {
+    // For now, we'll use a simple buy operation
+    // This will be expanded to handle different bridge types based on the payment method
+    const request = getBridgeParams({
+        paymentMethod,
+        amount,
+        destinationToken,
+        receiver,
+        sender,
+        client,
+        purchaseData,
+        paymentLinkId,
+        feePayer,
+    });
+    const prepareQuery = (0, useBridgePrepare_js_1.useBridgePrepare)(request);
+    // Handle successful quote
+    (0, react_1.useEffect)(() => {
+        if (prepareQuery.data) {
+            onQuoteReceived(prepareQuery.data, request);
+        }
+    }, [prepareQuery.data, onQuoteReceived, request]);
+    // Handle errors
+    (0, react_1.useEffect)(() => {
+        if (prepareQuery.error) {
+            onError(prepareQuery.error);
+        }
+    }, [prepareQuery.error, onError]);
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", center: "both", p: "lg", fullHeight: true, style: { minHeight: "350px" }, children: [(0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "xl", color: "secondaryText" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", center: true, style: { fontWeight: 600 }, children: "Finding the best route..." }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", center: true, children: "We're searching for the most efficient path for this payment." })] }));
+}
+function getBridgeParams(args) {
+    const { paymentMethod, amount, destinationToken, receiver, client, sender } = args;
+    switch (paymentMethod.type) {
+        case "fiat":
+            return {
+                type: "onramp",
+                client,
+                amount: (0, units_js_1.toUnits)(amount, destinationToken.decimals),
+                receiver,
+                sender,
+                chainId: destinationToken.chainId,
+                tokenAddress: destinationToken.address,
+                onramp: paymentMethod.onramp || "coinbase",
+                purchaseData: args.purchaseData,
+                currency: paymentMethod.currency,
+                onrampTokenAddress: addresses_js_1.NATIVE_TOKEN_ADDRESS, // always onramp to native token
+                paymentLinkId: args.paymentLinkId,
+                enabled: !!(destinationToken && amount && client),
+            };
+        case "wallet":
+            // if the origin token is the same as the destination token, use transfer type
+            if (paymentMethod.originToken.chainId === destinationToken.chainId &&
+                paymentMethod.originToken.address.toLowerCase() ===
+                    destinationToken.address.toLowerCase()) {
+                return {
+                    type: "transfer",
+                    client,
+                    chainId: destinationToken.chainId,
+                    tokenAddress: destinationToken.address,
+                    feePayer: args.feePayer || "sender",
+                    amount: (0, units_js_1.toUnits)(amount, destinationToken.decimals),
+                    sender: sender ||
+                        paymentMethod.payerWallet.getAccount()?.address ||
+                        receiver,
+                    receiver,
+                    purchaseData: args.purchaseData,
+                    paymentLinkId: args.paymentLinkId,
+                    enabled: !!(destinationToken && amount && client),
+                };
+            }
+            return {
+                type: "buy",
+                client,
+                originChainId: paymentMethod.originToken.chainId,
+                originTokenAddress: paymentMethod.originToken.address,
+                destinationChainId: destinationToken.chainId,
+                destinationTokenAddress: destinationToken.address,
+                amount: (0, units_js_1.toUnits)(amount, destinationToken.decimals),
+                sender: sender || paymentMethod.payerWallet.getAccount()?.address || receiver,
+                receiver,
+                purchaseData: args.purchaseData,
+                paymentLinkId: args.paymentLinkId,
+                enabled: !!(destinationToken && amount && client),
+            };
+    }
+}
+//# sourceMappingURL=QuoteLoader.js.map

package/dist/cjs/react/web/ui/Bridge/QuoteLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteLoader.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/QuoteLoader.tsx"],"names":[],"mappings":"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"}