thirdweb 5.102.7-nightly-9f6c1a4820e37428dec6427cf77a12ab463f119d-20250616000412 → 5.103.0

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

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { getToken } from "../../../../pay/convert/get-token.js";
+import { checksumAddress } from "../../../../utils/address.js";
+import { stringify } from "../../../../utils/json.js";
+import { toTokens } from "../../../../utils/units.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
+import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
+import { DynamicHeight } from "../components/DynamicHeight.js";
+import { Spinner } from "../components/Spinner.js";
+import { BridgeOrchestrator } from "./BridgeOrchestrator.js";
+import { UnsupportedTokenScreen } from "./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}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can use `disableOnramps` to prevent the use of onramps in the widget.
+ *
+ * ```tsx
+ * <CheckoutWidget
+ *   client={client}
+ *   disableOnramps
+ *  />
+ * ```
+ *
+ * ### 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
+ */
+export function CheckoutWidget(props) {
+    const localeQuery = useConnectLocale(props.locale || "en_US");
+    const theme = props.theme || "dark";
+    const bridgeDataQuery = useQuery({
+        queryKey: ["bridgeData", stringify(props)],
+        queryFn: async () => {
+            const token = await getToken(props.client, checksumAddress(props.tokenAddress || NATIVE_TOKEN_ADDRESS), props.chain.id).catch((err) => err.message.includes("not supported") ? undefined : Promise.reject(err));
+            if (!token) {
+                return {
+                    type: "unsupported_token",
+                    tokenAddress: checksumAddress(props.tokenAddress || 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: 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 = (_jsx("div", { style: {
+                minHeight: "350px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, children: _jsx(Spinner, { size: "xl", color: "secondaryText" }) }));
+    }
+    else if (bridgeDataQuery.data?.type === "unsupported_token") {
+        // Show unsupported token screen
+        content = _jsx(UnsupportedTokenScreen, { chain: bridgeDataQuery.data.chain });
+    }
+    else if (bridgeDataQuery.data?.type === "success") {
+        // Show normal bridge orchestrator
+        content = (_jsx(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 (_jsx(CustomThemeProvider, { theme: theme, children: _jsx(EmbedContainer, { modalSize: "compact", style: props.style, className: props.className, children: _jsx(DynamicHeight, { children: content }) }) }));
+}
+//# sourceMappingURL=CheckoutWidget.js.map

package/dist/esm/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/esm/react/web/ui/Bridge/DirectPayment.js

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

package/dist/esm/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":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAgB,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAwBpD,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,UAAU,EACV,cAAc,GACK;IACnB,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,UAAU,CACR,SAAS,CAAC,WAAW,CAAC,MAAM,EAC5B,SAAS,CAAC,WAAW,CAAC,KAAK,EAC3B,SAAS,CAAC,WAAW,CAAC,aAAa,CACpC,CAAC;IACJ,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,aAAa;QAC5C,MAAM;KACP,CAAC,CAAC;IACH,MAAM,aAAa,GACjB,OAAO,CAAC,IAAI,IAAI,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IAEtE,MAAM,MAAM,GAAG,CACb,MAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,aAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,mBAAmB,+BAElC,EACP,KAAC,SAAS,IACR,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,EACzC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,EAClC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,IAAI,GACT,IACQ,CACb,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,YAAY,EAAC,gBAAgB,EAC7B,MAAM,EAAE,MAAM,aAGd,MAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,GAAG,EACV,GAAG,EAAC,KAAK,EACT,KAAK,EAAE;oBACL,cAAc,EAAE,eAAe;iBAChC,aAED,KAAC,SAAS,IACR,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,EACzC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,EAClC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,MAAM,EAAE,GAAG,GACX,EACF,KAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,YAC7B,KAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gCACL,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;gCACxB,UAAU,EAAE,QAAQ;6BACrB,iCAGI,GACG,IACF,EAEZ,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,KAAC,IAAI,KAAG,EAER,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,MAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;oBACL,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;iBACrB,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,wBAE9B,EACP,KAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;4BACL,UAAU,EAAE,WAAW;yBACxB,YAEA,aAAa,GACT,IACG,EAEZ,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,MAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;oBACL,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;iBACrB,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,sBAE9B,EACP,KAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;4BACL,UAAU,EAAE,WAAW;yBACxB,YAEA,GAAG,SAAS,CAAC,WAAW,CAAC,MAAM,IAAI,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,GACnE,IACG,EAEZ,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,MAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;oBACL,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;iBACrB,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,wBAE9B,EACP,MAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,GAAG,aACxC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,EACvD,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,EACnB,KAAK,QACL,KAAK,EAAE;oCACL,UAAU,EAAE,WAAW;iCACxB,GACD,IACQ,IACF,EAEZ,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,KAAC,IAAI,KAAG,EAER,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,MAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,aACrB,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,SAAS,QAAC,OAAO,EAAE,cAAc,YACxD,MAAM,GACA,CACV,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE;4BACb,KAAK,EAAE,MAAM;4BACb,KAAK,EAAE;gCACL,KAAK,EAAE,MAAM;6BACd;yBACF,KACG,cAAc,GAClB,CACH,EAED,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,KAAC,iBAAiB,KAAG,EACrB,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,IACP,IACD,CACd,CAAC;AACJ,CAAC"}

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

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

package/dist/esm/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;;AACb,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAmB7C,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAoB;IACxE,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,UAAU,kBAEjD,MAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,aAChE,KAAC,SAAS,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,KAAC,gBAAgB,IACf,KAAK,EAAE,QAAQ,CAAC,EAAE,EAClB,MAAM,EAAE,QAAQ,CAAC,EAAE,EACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAC1B,GACQ,EAEZ,MAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,mBAC9D,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,sBAE5B,EACP,KAAC,SAAS,IACR,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,IAAI,EACR,KAAK,EAAE;gCACL,SAAS,EAAE,OAAO;6BACnB,YAED,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAClD,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,YAClC,WAAW,GACP,GACG,GACF,EAGZ,MAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,aAClE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,0BAEjC,EACR,QAAQ,IAAI,CACX,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,QAAQ,uBAEpC,CACV,IACS,IACF,IACF,GACF,CACb,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { getAddress } from "../../../../utils/address.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { fontSize, iconSize, radius, spacing, } from "../../../core/design-system/index.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
+import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
+import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
+import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { Spacer } from "../components/Spacer.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Input } from "../components/formElements.js";
+import { Text } from "../components/text.js";
+import { TokenAndChain } from "./common/TokenAndChain.js";
+import { WithHeader } from "./common/WithHeader.js";
+export function FundWallet({ client, receiverAddress, uiOptions, onContinue, presetOptions = [5, 10, 20], connectOptions, }) {
+    const [amount, setAmount] = useState(uiOptions.initialAmount ?? "");
+    const theme = useCustomTheme();
+    const account = 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 fontSize.md;
+        if (length > 8)
+            return fontSize.lg;
+        return 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 (_jsxs(WithHeader, { uiOptions: uiOptions, defaultTitle: `Buy ${uiOptions.destinationToken.symbol}`, client: client, children: [_jsxs(Container, { flex: "column", children: [_jsxs(Container, { flex: "row", center: "both", gap: "3xs", p: "md", style: {
+                            flexWrap: "nowrap",
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            borderRadius: radius.md,
+                            backgroundColor: theme.colors.tertiaryBg,
+                        }, children: [_jsx(TokenAndChain, { token: uiOptions.destinationToken, client: client, size: "xl" }), _jsxs(Container, { flex: "column", gap: "3xs", center: "x", expand: true, style: {
+                                    justifyContent: "flex-end",
+                                    alignItems: "flex-end",
+                                }, children: [_jsx("div", { style: { cursor: "text" }, onClick: focusInput, onKeyDown: (e) => {
+                                            if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                focusInput();
+                                            }
+                                        }, role: "button", tabIndex: 0, children: _jsx(Container, { flex: "row", center: "y", gap: "xs", style: {
+                                                flexWrap: "nowrap",
+                                                justifyContent: "flex-end",
+                                            }, children: _jsx(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",
+                                                } }) }) }), _jsx(Container, { flex: "row", center: "both", style: { height: fontSize.lg, flexWrap: "nowrap" }, children: _jsxs(Text, { size: "md", color: "secondaryText", style: { textWrap: "nowrap" }, children: ["\u2248 $", (Number(amount) * uiOptions.destinationToken.priceUsd).toFixed(2)] }) })] })] }), presetOptions && (_jsxs(_Fragment, { children: [_jsx(Spacer, { y: "md" }), _jsx(Container, { flex: "row", center: "x", gap: "xs", style: {
+                                    justifyContent: "space-evenly",
+                                }, children: presetOptions?.map((amount) => (_jsxs(Button, { variant: "outline", onClick: () => handleQuickAmount(Number(amount)), style: {
+                                        padding: `${spacing.sm} ${spacing.md}`,
+                                        fontSize: fontSize.sm,
+                                        flex: 1,
+                                        backgroundColor: theme.colors.tertiaryBg,
+                                    }, children: ["$", amount] }, amount))) })] })), _jsx(Spacer, { y: "md" }), _jsx(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: radius.md,
+                        }, children: receiver ? (_jsx(WalletRow, { address: receiver, client: client, iconSize: "md", textSize: "sm" })) : (_jsxs(_Fragment, { children: [_jsx(OutlineWalletIcon, { size: iconSize.md }), _jsx(Text, { size: "sm", color: "secondaryText", style: {
+                                        flex: 1,
+                                    }, children: "No Wallet Connected" })] })) })] }), _jsx(Spacer, { y: "lg" }), receiver ? (_jsxs(Button, { variant: "primary", fullWidth: true, disabled: !isValidAmount, onClick: () => {
+                    if (isValidAmount) {
+                        onContinue(amount, uiOptions.destinationToken, getAddress(receiver));
+                    }
+                }, style: {
+                    padding: `${spacing.sm} ${spacing.md}`,
+                    fontSize: fontSize.md,
+                }, children: ["Buy ", amount, " ", uiOptions.destinationToken.symbol] })) : (_jsx(ConnectButton, { client: client, theme: theme, connectButton: {
+                    label: `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+                }, ...connectOptions })), _jsx(Spacer, { y: "md" }), _jsx(PoweredByThirdweb, {}), _jsx(Spacer, { y: "lg" })] }));
+}
+//# sourceMappingURL=FundWallet.js.map

package/dist/esm/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":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAgB,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;AACpF,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,GACR,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAiCpD,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,eAAe,EACf,SAAS,EACT,UAAU,EACV,aAAa,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAC3B,cAAc,GACE;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,QAAQ,GAAG,eAAe,IAAI,OAAO,EAAE,OAAO,CAAC;IACrD,MAAM,kBAAkB,GAAG,CAAC,UAAkB,EAAE,EAAE;QAChD,IAAI,cAAc,GAAG,UAAU,CAAC;QAEhC,yCAAyC;QACzC,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAElD,IAAI,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACnC,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QACxC,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QACxC,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACvE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,cAAc,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC7B,IAAI,MAAM,GAAG,EAAE;YAAE,OAAO,QAAQ,CAAC,EAAE,CAAC;QACpC,IAAI,MAAM,GAAG,CAAC;YAAE,OAAO,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,QAAQ,CAAC,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAEnD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAqB,CAAC;QAC1E,KAAK,EAAE,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,EAAE;QAC9C,IAAI,SAAS,CAAC,gBAAgB,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,uDAAuD;QACvD,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC;QACpE,gFAAgF;QAChF,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CACvC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CACvB,CAAC,QAAQ,EAAE,CAAC;QACb,SAAS,CAAC,eAAe,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,OAAO,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,EACxD,MAAM,EAAE,MAAM,aAEd,MAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,aAEtB,MAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,MAAM,EACb,GAAG,EAAC,KAAK,EACT,CAAC,EAAC,IAAI,EACN,KAAK,EAAE;4BACL,QAAQ,EAAE,QAAQ;4BAClB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;4BAC/C,YAAY,EAAE,MAAM,CAAC,EAAE;4BACvB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;yBACzC,aAED,KAAC,aAAa,IACZ,KAAK,EAAE,SAAS,CAAC,gBAAgB,EACjC,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,IAAI,GACT,EAEF,MAAC,SAAS,IACR,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,KAAK,EACT,MAAM,EAAC,GAAG,EACV,MAAM,QACN,KAAK,EAAE;oCACL,cAAc,EAAE,UAAU;oCAC1B,UAAU,EAAE,UAAU;iCACvB,aAED,cACE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;4CACpD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gDACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gDACnB,UAAU,EAAE,CAAC;4CACf,CAAC;wCACH,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,YAEX,KAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,GAAG,EACV,GAAG,EAAC,IAAI,EACR,KAAK,EAAE;gDACL,QAAQ,EAAE,QAAQ;gDAClB,cAAc,EAAE,UAAU;6CAC3B,YAED,KAAC,KAAK,IACJ,EAAE,EAAC,cAAc,EACjB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAC,qBAAqB,EAC7B,SAAS,EAAC,SAAS,EACnB,WAAW,EAAC,GAAG,EACf,IAAI,EAAC,MAAM,sBACO,MAAM,KAAK,EAAE,EAC/B,KAAK,EAAE,MAAM,IAAI,GAAG,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oDACb,qCAAqC;oDACrC,IAAI,MAAM,KAAK,EAAE,EAAE,CAAC;wDAClB,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAC/B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,EAC5B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAC7B,CAAC;oDACJ,CAAC;gDACH,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oDACd,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gDACrC,CAAC,EACD,KAAK,EAAE;oDACL,QAAQ,EAAE,iBAAiB,EAAE;oDAC7B,UAAU,EAAE,GAAG;oDACf,SAAS,EAAE,OAAO;oDAClB,OAAO,EAAE,GAAG;oDACZ,MAAM,EAAE,MAAM;oDACd,SAAS,EAAE,MAAM;iDAClB,GACD,GACQ,GACR,EAGN,KAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAElD,MAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,yBAG5B,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAC7D,CAAC,CACF,IACI,GACG,IACF,IACF,EAGX,aAAa,IAAI,CAChB,8BACE,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EACjB,KAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,GAAG,EACV,GAAG,EAAC,IAAI,EACR,KAAK,EAAE;oCACL,cAAc,EAAE,cAAc;iCAC/B,YAEA,aAAa,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAEhD,KAAK,EAAE;wCACL,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,OAAO,CAAC,EAAE,EAAE;wCACtC,QAAQ,EAAE,QAAQ,CAAC,EAAE;wCACrB,IAAI,EAAE,CAAC;wCACP,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;qCACzC,kBAEC,MAAM,KARH,MAAM,CASJ,CACV,CAAC,GACQ,IACX,CACJ,EAED,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,KAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,GAAG,EAAC,IAAI,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,GAAG,EACV,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;4BACL,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;4BAC/C,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;4BACxC,YAAY,EAAE,MAAM,CAAC,EAAE;yBACxB,YAEA,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,SAAS,IACR,OAAO,EAAE,QAAQ,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAC,IAAI,GACb,CACH,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,iBAAiB,IAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,EACxC,KAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;wCACL,IAAI,EAAE,CAAC;qCACR,oCAGI,IACN,CACJ,GACS,IACF,EAEZ,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGhB,QAAQ,CAAC,CAAC,CAAC,CACV,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,SAAS,QACT,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,aAAa,EAAE,CAAC;wBAClB,UAAU,CACR,MAAM,EACN,SAAS,CAAC,gBAAgB,EAC1B,UAAU,CAAC,QAAQ,CAAC,CACrB,CAAC;oBACJ,CAAC;gBACH,CAAC,EACD,KAAK,EAAE;oBACL,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,OAAO,CAAC,EAAE,EAAE;oBACtC,QAAQ,EAAE,QAAQ,CAAC,EAAE;iBACtB,qBAEI,MAAM,OAAG,SAAS,CAAC,gBAAgB,CAAC,MAAM,IACxC,CACV,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE;oBACb,KAAK,EAAE,OAAO,MAAM,IAAI,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE;iBAC5D,KACG,cAAc,GAClB,CACH,EAED,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,KAAC,iBAAiB,KAAG,EACrB,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,IACN,CACd,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { toUnits } from "../../../../utils/units.js";
+import { useBridgePrepare, } from "../../../core/hooks/useBridgePrepare.js";
+import { Spacer } from "../components/Spacer.js";
+import { Spinner } from "../components/Spinner.js";
+import { Container } from "../components/basic.js";
+import { Text } from "../components/text.js";
+export 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 = useBridgePrepare(request);
+    // Handle successful quote
+    useEffect(() => {
+        if (prepareQuery.data) {
+            onQuoteReceived(prepareQuery.data, request);
+        }
+    }, [prepareQuery.data, onQuoteReceived, request]);
+    // Handle errors
+    useEffect(() => {
+        if (prepareQuery.error) {
+            onError(prepareQuery.error);
+        }
+    }, [prepareQuery.error, onError]);
+    return (_jsxs(Container, { flex: "column", center: "both", p: "lg", fullHeight: true, style: { minHeight: "350px" }, children: [_jsx(Spinner, { size: "xl", color: "secondaryText" }), _jsx(Spacer, { y: "md" }), _jsx(Text, { size: "lg", color: "primaryText", center: true, style: { fontWeight: 600 }, children: "Finding the best route..." }), _jsx(Spacer, { y: "sm" }), _jsx(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: toUnits(amount, destinationToken.decimals),
+                receiver,
+                sender,
+                chainId: destinationToken.chainId,
+                tokenAddress: destinationToken.address,
+                onramp: paymentMethod.onramp || "coinbase",
+                purchaseData: args.purchaseData,
+                currency: paymentMethod.currency,
+                onrampTokenAddress: 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: 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: 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/esm/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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"}