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

package/dist/esm/react/web/ui/Bridge/common/TokenBalanceRow.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { spacing } from "../../../../core/design-system/index.js";
+import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { TokenAndChain } from "./TokenAndChain.js";
+export function TokenBalanceRow({ client, token, amount, onClick, style, }) {
+    const chain = getCachedChain(token.chainId);
+    return (_jsxs(StyledButton, { onClick: () => onClick(token), variant: "secondary", style: {
+            display: "flex",
+            justifyContent: "space-between",
+            padding: `${spacing.sm} ${spacing.md}`,
+            ...style,
+        }, children: [_jsx(TokenAndChain, { token: token, client: client, size: "lg", style: { maxWidth: "50%", flex: 1 } }), _jsx(Container, { flex: "row", center: "y", gap: "4xs", color: "secondaryText", style: {
+                    flex: "1",
+                    maxWidth: "50%",
+                    minWidth: 0,
+                    justifyContent: "flex-end",
+                    flexWrap: "nowrap",
+                }, children: _jsxs(Container, { flex: "column", color: "secondaryText", gap: "3xs", style: {
+                        alignItems: "flex-end",
+                        minWidth: 0,
+                        overflow: "hidden",
+                    }, children: [_jsx(FiatValue, { tokenAmount: amount, token: token, chain: chain, client: client, color: "primaryText", size: "sm" }), _jsx(Text, { size: "xs", color: "secondaryText", style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                            }, children: `${Number(amount).toLocaleString(undefined, {
+                                maximumFractionDigits: 6,
+                                minimumFractionDigits: 0,
+                            })} ${token.symbol}` })] }) })] }));
+}
+const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
+    const theme = useCustomTheme();
+    return {
+        background: "transparent",
+        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        padding: spacing.sm,
+        paddingRight: spacing.xs,
+        gap: spacing.sm,
+        "&:hover": {
+            background: theme.colors.secondaryButtonBg,
+        },
+        transition: "background 200ms ease, transform 150ms ease",
+        ...props.style,
+    };
+});
+//# sourceMappingURL=TokenBalanceRow.js.map

package/dist/esm/react/web/ui/Bridge/common/TokenBalanceRow.js.map

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

package/dist/esm/react/web/ui/Bridge/common/WithHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius } from "../../../../core/design-system/index.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+export function WithHeader({ children, uiOptions, defaultTitle, client, }) {
+    const theme = useCustomTheme();
+    return (_jsxs(Container, { flex: "column", children: [uiOptions.metadata?.image && (_jsx("div", { style: {
+                    width: "100%",
+                    borderRadius: `${radius.md} ${radius.md} 0 0`,
+                    overflow: "hidden",
+                    aspectRatio: "16/9",
+                    backgroundColor: theme.colors.tertiaryBg,
+                    backgroundImage: `url(${resolveScheme({
+                        client,
+                        uri: uiOptions.metadata.image,
+                    })})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                } })), _jsxs(Container, { flex: "column", px: "lg", children: [_jsx(Spacer, { y: "lg" }), _jsx(Text, { size: "lg", color: "primaryText", weight: 700, children: uiOptions.metadata?.title || defaultTitle }), uiOptions.metadata?.description && (_jsxs(_Fragment, { children: [_jsx(Spacer, { y: "xs" }), _jsx(Text, { size: "sm", color: "secondaryText", children: uiOptions.metadata?.description })] })), _jsx(Spacer, { y: "lg" }), children] })] }));
+}
+//# sourceMappingURL=WithHeader.js.map

package/dist/esm/react/web/ui/Bridge/common/WithHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithHeader.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/common/WithHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAGhD,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,GAMP;IACC,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO,CACL,MAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,aAErB,SAAS,CAAC,QAAQ,EAAE,KAAK,IAAI,CAC5B,cACE,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,YAAY,EAAE,GAAG,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC,EAAE,MAAM;oBAC7C,QAAQ,EAAE,QAAQ;oBAClB,WAAW,EAAE,MAAM;oBACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;oBACxC,eAAe,EAAE,OAAO,aAAa,CAAC;wBACpC,MAAM;wBACN,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK;qBAC9B,CAAC,GAAG;oBACL,cAAc,EAAE,OAAO;oBACvB,kBAAkB,EAAE,QAAQ;iBAC7B,GACD,CACH,EACD,MAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,aAC9B,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,EAAC,MAAM,EAAE,GAAG,YAC5C,SAAS,CAAC,QAAQ,EAAE,KAAK,IAAI,YAAY,GACrC,EAGN,SAAS,CAAC,QAAQ,EAAE,WAAW,IAAI,CAClC,8BACE,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EACjB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,YAClC,SAAS,CAAC,QAAQ,EAAE,WAAW,GAC3B,IACN,CACJ,EAED,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAChB,QAAQ,IACC,IACF,CACb,CAAC;AACJ,CAAC"}

package/dist/esm/react/web/ui/Bridge/payment-details/PaymentDetails.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
+import {} from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
+import { formatCurrencyAmount, formatTokenAmount, } from "../../ConnectWallet/screens/formatTokenBalance.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { PaymentOverview } from "./PaymentOverview.js";
+export function PaymentDetails({ uiOptions, client, paymentMethod, preparedQuote, onConfirm, onBack, onError, }) {
+    const theme = useCustomTheme();
+    const handleConfirm = () => {
+        try {
+            onConfirm();
+        }
+        catch (error) {
+            onError(error);
+        }
+    };
+    // Extract common data based on quote type
+    const getDisplayData = () => {
+        switch (preparedQuote.type) {
+            case "transfer": {
+                const token = paymentMethod.type === "wallet"
+                    ? paymentMethod.originToken
+                    : undefined;
+                if (!token) {
+                    // can never happen
+                    onError(new Error("Invalid payment method"));
+                    return {
+                        originToken: undefined,
+                        destinationToken: undefined,
+                        originAmount: "0",
+                        destinationAmount: "0",
+                        estimatedTime: 0,
+                    };
+                }
+                return {
+                    originToken: token,
+                    destinationToken: token,
+                    originAmount: formatTokenAmount(preparedQuote.originAmount, token.decimals),
+                    destinationAmount: formatTokenAmount(preparedQuote.destinationAmount, token.decimals),
+                    estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+                };
+            }
+            case "buy": {
+                const method = paymentMethod.type === "wallet" ? paymentMethod : undefined;
+                if (!method) {
+                    // can never happen
+                    onError(new Error("Invalid payment method"));
+                    return {
+                        originToken: undefined,
+                        destinationToken: undefined,
+                        originAmount: "0",
+                        destinationAmount: "0",
+                        estimatedTime: 0,
+                    };
+                }
+                return {
+                    originToken: paymentMethod.type === "wallet"
+                        ? paymentMethod.originToken
+                        : undefined,
+                    destinationToken: preparedQuote.steps[preparedQuote.steps.length - 1]
+                        ?.destinationToken,
+                    originAmount: formatTokenAmount(preparedQuote.originAmount, method.originToken.decimals),
+                    destinationAmount: formatTokenAmount(preparedQuote.destinationAmount, preparedQuote.steps[preparedQuote.steps.length - 1]
+                        ?.destinationToken?.decimals ?? 18),
+                    estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+                };
+            }
+            case "onramp": {
+                const method = paymentMethod.type === "fiat" ? paymentMethod : undefined;
+                if (!method) {
+                    // can never happen
+                    onError(new Error("Invalid payment method"));
+                    return {
+                        originToken: undefined,
+                        destinationToken: undefined,
+                        originAmount: "0",
+                        destinationAmount: "0",
+                        estimatedTime: 0,
+                    };
+                }
+                return {
+                    originToken: undefined, // Onramp starts with fiat
+                    destinationToken: preparedQuote.destinationToken,
+                    originAmount: formatCurrencyAmount(method.currency, Number(preparedQuote.currencyAmount)),
+                    destinationAmount: formatTokenAmount(preparedQuote.destinationAmount, preparedQuote.destinationToken.decimals),
+                    estimatedTime: undefined,
+                };
+            }
+            default: {
+                throw new Error(`Unsupported bridge prepare type: ${preparedQuote.type}`);
+            }
+        }
+    };
+    const displayData = getDisplayData();
+    return (_jsxs(Container, { flex: "column", fullHeight: true, p: "lg", children: [_jsx(ModalHeader, { title: "Payment Details", onBack: onBack }), _jsx(Spacer, { y: "xl" }), _jsxs(Container, { flex: "column", children: [_jsxs(Container, { flex: "column", children: [displayData.destinationToken && (_jsx(PaymentOverview, { uiOptions: uiOptions, sender: preparedQuote.intent.sender ||
+                                    paymentMethod.payerWallet.getAccount()?.address, client: client, paymentMethod: paymentMethod, toToken: displayData.destinationToken, receiver: preparedQuote.intent.receiver, fromAmount: displayData.originAmount, toAmount: displayData.destinationAmount })), _jsx(Spacer, { y: "md" }), _jsxs(Container, { flex: "row", gap: "sm", children: [_jsxs(Container, { flex: "row", gap: "xs", style: { justifyContent: "center", flex: 1 }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Estimated Time" }), _jsx(Text, { size: "sm", color: "primaryText", children: displayData.estimatedTime
+                                                    ? `~${Math.ceil(displayData.estimatedTime / 60000)} min`
+                                                    : "~2 min" })] }), preparedQuote.steps.length > 1 ? (_jsxs(Container, { flex: "row", gap: "xs", style: { justifyContent: "center", flex: 1 }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Route Length" }), _jsxs(Text, { size: "sm", color: "primaryText", children: [preparedQuote.steps.length, " step", preparedQuote.steps.length !== 1 ? "s" : ""] })] })) : null] })] }), preparedQuote.steps.length > 1 && (_jsxs(Container, { flex: "column", children: [_jsx(Spacer, { y: "sm" }), _jsx(Container, { flex: "column", gap: "sm", style: {
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                    borderRadius: radius.md,
+                                    backgroundColor: theme.colors.tertiaryBg,
+                                    padding: `${spacing.sm} ${spacing.md}`,
+                                }, children: preparedQuote.steps.map((step, stepIndex) => (_jsx(Container, { flex: "column", gap: "sm", children: _jsxs(Container, { flex: "row", gap: "md", style: { alignItems: "center" }, children: [_jsx(Container, { center: "both", flex: "row", style: {
+                                                    width: "24px",
+                                                    height: "24px",
+                                                    borderRadius: "50%",
+                                                    backgroundColor: theme.colors.accentButtonBg,
+                                                    color: theme.colors.accentButtonText,
+                                                    fontSize: "12px",
+                                                    fontWeight: "bold",
+                                                    flexShrink: 0,
+                                                }, children: _jsx(Text, { size: "xs", color: "accentButtonText", children: stepIndex + 1 }) }), _jsx(Container, { flex: "row", center: "y", gap: "sm", style: { flex: 1 }, children: _jsxs(Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [_jsxs(Text, { size: "sm", color: "primaryText", children: [step.originToken.symbol, " \u2192", " ", step.destinationToken.symbol] }), _jsxs(Text, { size: "xs", color: "secondaryText", children: [step.originToken.name, " to", " ", step.destinationToken.name] })] }) })] }) }, `step-${stepIndex}-${step.originToken.address}-${step.destinationToken.address}`))) })] })), _jsx(Spacer, { y: "lg" }), _jsx(Container, { flex: "column", gap: "sm", children: _jsx(Button, { variant: "accent", fullWidth: true, onClick: handleConfirm, children: "Confirm Payment" }) })] })] }));
+}
+//# sourceMappingURL=PaymentDetails.js.map

package/dist/esm/react/web/ui/Bridge/payment-details/PaymentDetails.js.map

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

package/dist/esm/react/web/ui/Bridge/payment-details/PaymentOverview.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineChain } from "../../../../../chains/utils.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
+import { useTransactionDetails } from "../../../../core/hooks/useTransactionDetails.js";
+import { getFiatCurrencyIcon } from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
+import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
+import { StepConnectorArrow } from "../../ConnectWallet/screens/Buy/swap/StepConnector.js";
+import { WalletRow } from "../../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { Container } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { TokenBalanceRow } from "../common/TokenBalanceRow.js";
+export function PaymentOverview(props) {
+    const theme = useCustomTheme();
+    const sender = props.sender ||
+        (props.paymentMethod.type === "wallet"
+            ? props.paymentMethod.payerWallet.getAccount()?.address
+            : undefined);
+    const isDifferentRecipient = props.receiver.toLowerCase() !== sender?.toLowerCase();
+    return (_jsxs(Container, { children: [_jsxs(Container, { bg: "tertiaryBg", flex: "column", style: {
+                    borderRadius: radius.lg,
+                    border: `1px solid ${theme.colors.borderColor}`,
+                }, children: [sender && (_jsx(Container, { flex: "row", gap: "sm", px: "md", py: "sm", style: {
+                            borderBottom: `1px solid ${theme.colors.borderColor}`,
+                        }, children: _jsx(WalletRow, { address: sender, client: props.client, iconSize: "md", textSize: "sm" }) })), props.paymentMethod.type === "wallet" && (_jsx(TokenBalanceRow, { token: props.paymentMethod.originToken, client: props.client, amount: props.fromAmount, onClick: () => { }, style: {
+                            background: "transparent",
+                            borderRadius: 0,
+                            border: "none",
+                        } })), props.paymentMethod.type === "fiat" && (_jsxs(Container, { flex: "row", gap: "sm", px: "md", py: "sm", center: "y", style: { justifyContent: "space-between" }, children: [_jsxs(Container, { flex: "row", gap: "sm", center: "y", children: [getFiatCurrencyIcon({
+                                        currency: props.paymentMethod.currency,
+                                        size: "lg",
+                                    }), _jsxs(Container, { flex: "column", gap: "3xs", center: "y", children: [_jsx(Text, { size: "sm", color: "primaryText", style: { fontWeight: 600 }, children: props.paymentMethod.currency }), _jsx(Text, { size: "xs", color: "secondaryText", children: props.paymentMethod.onramp.charAt(0).toUpperCase() +
+                                                    props.paymentMethod.onramp.slice(1) })] })] }), _jsx(Text, { size: "sm", color: "primaryText", style: { fontWeight: 600 }, children: props.fromAmount })] }))] }), _jsx(StepConnectorArrow, {}), _jsxs(Container, { flex: "column", bg: "tertiaryBg", style: {
+                    borderRadius: radius.lg,
+                    border: `1px solid ${theme.colors.borderColor}`,
+                }, children: [isDifferentRecipient && (_jsx(Container, { flex: "row", gap: "sm", px: "md", py: "sm", style: {
+                            borderBottom: `1px solid ${theme.colors.borderColor}`,
+                        }, children: _jsx(WalletRow, { address: props.receiver, client: props.client, iconSize: "md", textSize: "sm" }) })), props.uiOptions.mode === "direct_payment" && (_jsxs(Container, { flex: "row", gap: "sm", p: "md", center: "y", style: { justifyContent: "space-between" }, children: [_jsxs(Container, { flex: "column", gap: "3xs", center: "y", style: { flex: 1 }, children: [_jsx(Text, { size: "sm", color: "primaryText", style: { fontWeight: 600 }, children: props.uiOptions.metadata?.title || "Payment" }), props.uiOptions.metadata?.description && (_jsx(Text, { size: "xs", color: "secondaryText", children: props.uiOptions.metadata.description }))] }), _jsxs(Container, { flex: "column", gap: "3xs", center: "y", style: { alignItems: "flex-end" }, children: [_jsx(FiatValue, { tokenAmount: props.uiOptions.paymentInfo.amount, token: props.toToken, client: props.client, chain: defineChain(props.toToken.chainId), weight: 600, color: "primaryText", size: "sm" }), _jsxs(Text, { size: "xs", color: "secondaryText", children: [props.uiOptions.paymentInfo.amount, " ", props.toToken.symbol] })] })] })), props.uiOptions.mode === "fund_wallet" && (_jsx(TokenBalanceRow, { token: props.toToken, client: props.client, amount: props.toAmount, onClick: () => { }, style: {
+                            background: "transparent",
+                            borderRadius: 0,
+                            border: "none",
+                        } })), props.uiOptions.mode === "transaction" && (_jsx(TransactionOverViewCompact, { uiOptions: props.uiOptions, client: props.client }))] })] }));
+}
+const TransactionOverViewCompact = (props) => {
+    const theme = useCustomTheme();
+    const txInfo = useTransactionDetails({
+        transaction: props.uiOptions.transaction,
+        client: props.client,
+    });
+    if (!txInfo.data) {
+        // Skeleton loading state
+        return (_jsxs(Container, { flex: "row", gap: "sm", p: "md", center: "y", style: { justifyContent: "space-between" }, children: [_jsxs(Container, { flex: "column", gap: "3xs", center: "y", style: { flex: 1 }, children: [_jsx("div", { style: {
+                                width: "120px",
+                                height: "16px",
+                                backgroundColor: theme.colors.skeletonBg,
+                                borderRadius: spacing.xs,
+                            } }), props.uiOptions.metadata?.description && (_jsx("div", { style: {
+                                width: "80px",
+                                height: "12px",
+                                backgroundColor: theme.colors.skeletonBg,
+                                borderRadius: spacing.xs,
+                            } }))] }), _jsx(Container, { flex: "column", gap: "3xs", center: "y", style: { alignItems: "flex-end" }, children: _jsx("div", { style: {
+                            width: "100px",
+                            height: "24px",
+                            backgroundColor: theme.colors.skeletonBg,
+                            borderRadius: spacing.sm,
+                        } }) })] }));
+    }
+    return (_jsxs(Container, { flex: "row", gap: "sm", p: "md", center: "y", style: { justifyContent: "space-between" }, children: [_jsxs(Container, { flex: "column", gap: "3xs", center: "y", style: { flex: 1 }, children: [_jsx(Text, { size: "sm", color: "primaryText", style: { fontWeight: 600 }, children: props.uiOptions.metadata?.title || "Transaction" }), props.uiOptions.metadata?.description && (_jsx(Text, { size: "xs", color: "secondaryText", children: props.uiOptions.metadata.description }))] }), _jsx(Container, { flex: "column", gap: "3xs", center: "y", style: { alignItems: "flex-end" }, children: _jsx(Text, { size: "xs", color: "secondaryText", style: {
+                        fontFamily: "monospace",
+                        textAlign: "right",
+                        backgroundColor: theme.colors.secondaryButtonBg,
+                        padding: `${spacing.xs} ${spacing.sm}`,
+                        borderRadius: spacing.sm,
+                    }, children: txInfo.data.functionInfo.functionName }) })] }));
+};
+//# sourceMappingURL=PaymentOverview.js.map

package/dist/esm/react/web/ui/Bridge/payment-details/PaymentOverview.js.map

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

package/dist/esm/react/web/ui/Bridge/payment-selection/FiatProviderSelection.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { checksumAddress } from "../../../../../utils/address.js";
+import { toTokens } from "../../../../../utils/units.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, radius, spacing, } from "../../../../core/design-system/index.js";
+import { useBuyWithFiatQuotesForProviders } from "../../../../core/hooks/pay/useBuyWithFiatQuotesForProviders.js";
+import { Img } from "../../components/Img.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Spinner } from "../../components/Spinner.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+const PROVIDERS = [
+    {
+        id: "coinbase",
+        name: "Coinbase",
+        description: "Fast and secure payments",
+        iconUri: "https://i.ibb.co/LDJ3Rk2t/Frame-5.png",
+    },
+    {
+        id: "stripe",
+        name: "Stripe",
+        description: "Trusted payment processing",
+        iconUri: "https://i.ibb.co/CpgQC2Lf/images-3.png",
+    },
+    {
+        id: "transak",
+        name: "Transak",
+        description: "Global payment solution",
+        iconUri: "https://i.ibb.co/Xx2r882p/Transak-official-symbol-1.png",
+    },
+];
+export function FiatProviderSelection({ onProviderSelected, client, toChainId, toTokenAddress, toAddress, toAmount, }) {
+    const theme = useCustomTheme();
+    // Fetch quotes for all providers
+    const quoteQueries = useBuyWithFiatQuotesForProviders({
+        client,
+        chainId: toChainId,
+        tokenAddress: checksumAddress(toTokenAddress),
+        receiver: checksumAddress(toAddress),
+        amount: toAmount || "0",
+        currency: "USD",
+    });
+    const quotes = useMemo(() => {
+        return quoteQueries.map((q) => q.data).filter((q) => !!q);
+    }, [quoteQueries]);
+    // TODO: add a "remember my choice" checkbox
+    return (_jsx(_Fragment, { children: _jsx(Container, { flex: "column", gap: "sm", children: quotes.length > 0 ? (quotes
+                .sort((a, b) => a.currencyAmount - b.currencyAmount)
+                .map((quote, index) => {
+                const provider = PROVIDERS.find((p) => p.id === quote.intent.onramp);
+                if (!provider) {
+                    return null;
+                }
+                return (_jsx(Container, { animate: "fadein", style: {
+                        animationDelay: `${index * 100}ms`,
+                    }, children: _jsx(Button, { variant: "secondary", fullWidth: true, onClick: () => onProviderSelected(provider.id), style: {
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            borderRadius: radius.md,
+                            padding: `${spacing.sm} ${spacing.md}`,
+                            backgroundColor: theme.colors.tertiaryBg,
+                            textAlign: "left",
+                        }, children: _jsxs(Container, { flex: "row", gap: "sm", style: { width: "100%", alignItems: "center" }, children: [_jsx(Container, { style: {
+                                        width: `${iconSize.md}px`,
+                                        height: `${iconSize.md}px`,
+                                        borderRadius: "50%",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        padding: spacing.xs,
+                                        overflow: "hidden",
+                                    }, children: _jsx(Img, { src: provider.iconUri, alt: provider.name, width: iconSize.md, height: iconSize.md, client: client }) }), _jsx(Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: _jsx(Text, { size: "md", color: "primaryText", style: { fontWeight: 600 }, children: provider.name }) }), _jsxs(Container, { flex: "column", gap: "3xs", style: { alignItems: "flex-end" }, children: [_jsxs(Text, { size: "sm", color: "primaryText", style: { fontWeight: 500 }, children: ["$", quote.currencyAmount.toLocaleString(undefined, {
+                                                    minimumFractionDigits: 2,
+                                                    maximumFractionDigits: 2,
+                                                }), " ", quote.currency] }), _jsxs(Text, { size: "xs", color: "secondaryText", children: [toTokens(quote.destinationAmount, quote.destinationToken.decimals), " ", quote.destinationToken.symbol] })] })] }) }) }, provider.id));
+            })) : (_jsxs(Container, { flex: "column", center: "both", style: { minHeight: "120px" }, children: [_jsx(Spinner, { size: "lg", color: "secondaryText" }), _jsx(Spacer, { y: "sm" }), _jsx(Text, { size: "sm", color: "secondaryText", center: true, children: "Generating quotes..." })] })) }) }));
+}
+//# sourceMappingURL=FiatProviderSelection.js.map

package/dist/esm/react/web/ui/Bridge/payment-selection/FiatProviderSelection.js.map

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

package/dist/esm/react/web/ui/Bridge/payment-selection/PaymentSelection.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { defineChain } from "../../../../../chains/utils.js";
+import { toUnits } from "../../../../../utils/units.js";
+import { usePaymentMethods } from "../../../../core/hooks/usePaymentMethods.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
+import { WalletSwitcherConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { FiatProviderSelection } from "./FiatProviderSelection.js";
+import { TokenSelection } from "./TokenSelection.js";
+import { WalletFiatSelection } from "./WalletFiatSelection.js";
+export function PaymentSelection({ destinationToken, client, destinationAmount, receiverAddress, onPaymentMethodSelected, onError, onBack, connectOptions, connectLocale, includeDestinationToken, }) {
+    const connectedWallets = useConnectedWallets();
+    const activeWallet = useActiveWallet();
+    const [currentStep, setCurrentStep] = useState({
+        type: "walletSelection",
+    });
+    const payerWallet = currentStep.type === "tokenSelection"
+        ? currentStep.selectedWallet
+        : activeWallet;
+    const { data: paymentMethods, isLoading: paymentMethodsLoading, error: paymentMethodsError, } = usePaymentMethods({
+        destinationToken,
+        destinationAmount,
+        client,
+        includeDestinationToken: includeDestinationToken ||
+            receiverAddress?.toLowerCase() !==
+                payerWallet?.getAccount()?.address?.toLowerCase(),
+        payerWallet,
+    });
+    // Handle error from usePaymentMethods
+    useEffect(() => {
+        if (paymentMethodsError) {
+            onError(paymentMethodsError);
+        }
+    }, [paymentMethodsError, onError]);
+    const handlePaymentMethodSelected = (paymentMethod) => {
+        try {
+            onPaymentMethodSelected(paymentMethod);
+        }
+        catch (error) {
+            onError(error);
+        }
+    };
+    const handleWalletSelected = (wallet) => {
+        setCurrentStep({ type: "tokenSelection", selectedWallet: wallet });
+    };
+    const handleConnectWallet = async () => {
+        setCurrentStep({ type: "walletConnection" });
+    };
+    const handleFiatSelected = () => {
+        setCurrentStep({ type: "fiatProviderSelection" });
+    };
+    const handleBackToWalletSelection = () => {
+        setCurrentStep({ type: "walletSelection" });
+    };
+    const handleOnrampProviderSelected = (provider) => {
+        if (!payerWallet) {
+            onError(new Error("No wallet available for fiat payment"));
+            return;
+        }
+        const fiatPaymentMethod = {
+            type: "fiat",
+            payerWallet,
+            currency: "USD", // Default to USD for now
+            onramp: provider,
+        };
+        handlePaymentMethodSelected(fiatPaymentMethod);
+    };
+    const getStepTitle = () => {
+        switch (currentStep.type) {
+            case "walletSelection":
+                return "Choose Payment Method";
+            case "tokenSelection":
+                return "Select Token";
+            case "fiatProviderSelection":
+                return "Select Payment Provider";
+            case "walletConnection":
+                return "Connect Wallet";
+        }
+    };
+    const getBackHandler = () => {
+        switch (currentStep.type) {
+            case "walletSelection":
+                return onBack;
+            case "tokenSelection":
+            case "fiatProviderSelection":
+            case "walletConnection":
+                return handleBackToWalletSelection;
+        }
+    };
+    // Handle rendering WalletSwitcherConnectionScreen
+    if (currentStep.type === "walletConnection") {
+        const destinationChain = destinationToken
+            ? defineChain(destinationToken.chainId)
+            : undefined;
+        const chains = destinationChain
+            ? [destinationChain, ...(connectOptions?.chains || [])]
+            : connectOptions?.chains;
+        return (_jsx(WalletSwitcherConnectionScreen, { accountAbstraction: connectOptions?.accountAbstraction, appMetadata: connectOptions?.appMetadata, chain: destinationChain || connectOptions?.chain, chains: chains, client: client, connectLocale: connectLocale, isEmbed: false, onBack: handleBackToWalletSelection, onSelect: handleWalletSelected, hiddenWallets: [], recommendedWallets: connectOptions?.recommendedWallets, showAllWallets: connectOptions?.showAllWallets === undefined
+                ? true
+                : connectOptions?.showAllWallets, walletConnect: connectOptions?.walletConnect, wallets: connectOptions?.wallets?.filter((w) => w.id !== "inApp") }));
+    }
+    return (_jsxs(Container, { flex: "column", p: "lg", children: [_jsx(ModalHeader, { title: getStepTitle(), onBack: getBackHandler() }), _jsx(Spacer, { y: "xl" }), _jsxs(Container, { flex: "column", children: [currentStep.type === "walletSelection" && (_jsx(WalletFiatSelection, { connectedWallets: connectedWallets, client: client, onWalletSelected: handleWalletSelected, onFiatSelected: handleFiatSelected, onConnectWallet: handleConnectWallet })), currentStep.type === "tokenSelection" && (_jsx(TokenSelection, { paymentMethods: paymentMethods, paymentMethodsLoading: paymentMethodsLoading, client: client, onPaymentMethodSelected: handlePaymentMethodSelected, onBack: handleBackToWalletSelection, destinationToken: destinationToken, destinationAmount: toUnits(destinationAmount, destinationToken.decimals) })), currentStep.type === "fiatProviderSelection" && (_jsx(FiatProviderSelection, { client: client, onProviderSelected: handleOnrampProviderSelected, toChainId: destinationToken.chainId, toTokenAddress: destinationToken.address, toAddress: receiverAddress || "", toAmount: destinationAmount }))] })] }));
+}
+//# sourceMappingURL=PaymentSelection.js.map

package/dist/esm/react/web/ui/Bridge/payment-selection/PaymentSelection.js.map

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