thirdweb 5.102.7-nightly-9f6c1a4820e37428dec6427cf77a12ab463f119d-20250616000412 → 5.103.0

package/dist/cjs/react/web/ui/Bridge/common/TokenAndChain.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainIcon = void 0;
+exports.TokenAndChain = TokenAndChain;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const addresses_js_1 = require("../../../../../constants/addresses.js");
+const ipfs_js_1 = require("../../../../../utils/ipfs.js");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const useChainQuery_js_1 = require("../../../../core/hooks/others/useChainQuery.js");
+const walletIcon_js_1 = require("../../../../core/utils/walletIcon.js");
+const nativeToken_js_1 = require("../../ConnectWallet/screens/nativeToken.js");
+const ChainName_js_1 = require("../../components/ChainName.js");
+const Img_js_1 = require("../../components/Img.js");
+const basic_js_1 = require("../../components/basic.js");
+const fallbackChainIcon_js_1 = require("../../components/fallbackChainIcon.js");
+const text_js_1 = require("../../components/text.js");
+function TokenAndChain({ token, client, size, style, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const chain = (0, utils_js_1.getCachedChain)(token.chainId);
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", gap: "sm", style: {
+            flexWrap: "nowrap",
+            ...style,
+        }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { style: {
+                    position: "relative",
+                    width: index_js_1.iconSize[size],
+                    height: index_js_1.iconSize[size],
+                }, children: [(0, jsx_runtime_1.jsx)(TokenIconWithFallback, { token: token, size: size, client: client }), chain.id !== 1 && ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                            position: "absolute",
+                            bottom: "-2px",
+                            right: "-6px",
+                            width: size === "lg" || size === "xl" ? index_js_1.iconSize.sm : index_js_1.iconSize.xs,
+                            height: size === "lg" || size === "xl" ? index_js_1.iconSize.sm : index_js_1.iconSize.xs,
+                            borderRadius: "50%",
+                            background: theme.colors.borderColor,
+                            border: `1.5px solid ${theme.colors.modalBg}`,
+                        }, children: (0, jsx_runtime_1.jsx)(exports.ChainIcon, { chain: chain, size: size === "xl" || size === "lg" ? "sm" : "xs", client: client }) }))] }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: size === "xl" ? "lg" : "sm", color: "primaryText", weight: 600, style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                        }, children: token.name }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: chain, size: size === "xl" ? "sm" : "xs", client: client, short: true })] })] }));
+}
+function TokenIconWithFallback(props) {
+    const chain = (0, utils_js_1.getCachedChain)(props.token.chainId);
+    const chainMeta = (0, useChainQuery_js_1.useChainMetadata)(chain).data;
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const tokenImage = (0, react_1.useMemo)(() => {
+        if ((0, nativeToken_js_1.isNativeToken)(props.token) ||
+            props.token.address === addresses_js_1.NATIVE_TOKEN_ADDRESS) {
+            if (chainMeta?.nativeCurrency.symbol === "ETH") {
+                return "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/ethereum/512.png"; // ETH icon
+            }
+            return chainMeta?.icon?.url;
+        }
+        return props.token.iconUri;
+    }, [props.token, chainMeta?.icon?.url, chainMeta?.nativeCurrency.symbol]);
+    return tokenImage ? ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: tokenImage, style: {
+            borderRadius: "50%",
+        }, width: index_js_1.iconSize[props.size], height: index_js_1.iconSize[props.size], fallbackImage: walletIcon_js_1.genericTokenIcon, client: props.client })) : ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+            width: `${index_js_1.iconSize.md}px`,
+            height: `${index_js_1.iconSize.md}px`,
+            borderRadius: "50%",
+            backgroundColor: theme.colors.secondaryButtonBg,
+            border: `1px solid ${theme.colors.borderColor}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: index_js_1.spacing.xs,
+        }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: props.size === "xl" ? "sm" : "xs", color: "secondaryText", style: { fontWeight: 600 }, children: props.token.symbol.slice(0, 1) }) }));
+}
+const ChainIcon = (props) => {
+    const { url } = (0, useChainQuery_js_1.useChainIconUrl)(props.chain);
+    return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            alignItems: "center",
+        }, children: (0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: getSrcChainIcon({
+                client: props.client,
+                chainIconUrl: url,
+            }), width: index_js_1.iconSize[props.size], height: index_js_1.iconSize[props.size], fallbackImage: fallbackChainIcon_js_1.fallbackChainIcon, client: props.client }) }));
+};
+exports.ChainIcon = ChainIcon;
+const getSrcChainIcon = (props) => {
+    const url = props.chainIconUrl;
+    if (!url) {
+        return fallbackChainIcon_js_1.fallbackChainIcon;
+    }
+    try {
+        return (0, ipfs_js_1.resolveScheme)({
+            uri: url,
+            client: props.client,
+        });
+    }
+    catch {
+        return fallbackChainIcon_js_1.fallbackChainIcon;
+    }
+};
+//# sourceMappingURL=TokenAndChain.js.map

package/dist/cjs/react/web/ui/Bridge/common/TokenAndChain.js.map

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenBalanceRow = TokenBalanceRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("@emotion/styled");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const FiatValue_js_1 = require("../../ConnectWallet/screens/Buy/swap/FiatValue.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("./TokenAndChain.js");
+function TokenBalanceRow({ client, token, amount, onClick, style, }) {
+    const chain = (0, utils_js_1.getCachedChain)(token.chainId);
+    return ((0, jsx_runtime_1.jsxs)(StyledButton, { onClick: () => onClick(token), variant: "secondary", style: {
+            display: "flex",
+            justifyContent: "space-between",
+            padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+            ...style,
+        }, children: [(0, jsx_runtime_1.jsx)(TokenAndChain_js_1.TokenAndChain, { token: token, client: client, size: "lg", style: { maxWidth: "50%", flex: 1 } }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "y", gap: "4xs", color: "secondaryText", style: {
+                    flex: "1",
+                    maxWidth: "50%",
+                    minWidth: 0,
+                    justifyContent: "flex-end",
+                    flexWrap: "nowrap",
+                }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", color: "secondaryText", gap: "3xs", style: {
+                        alignItems: "flex-end",
+                        minWidth: 0,
+                        overflow: "hidden",
+                    }, children: [(0, jsx_runtime_1.jsx)(FiatValue_js_1.FiatValue, { tokenAmount: amount, token: token, chain: chain, client: client, color: "primaryText", size: "sm" }), (0, jsx_runtime_1.jsx)(text_js_1.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__ */ (0, styled_1.default)(buttons_js_1.Button)((props) => {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    return {
+        background: "transparent",
+        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        padding: index_js_1.spacing.sm,
+        paddingRight: index_js_1.spacing.xs,
+        gap: index_js_1.spacing.sm,
+        "&:hover": {
+            background: theme.colors.secondaryButtonBg,
+        },
+        transition: "background 200ms ease, transform 150ms ease",
+        ...props.style,
+    };
+});
+//# sourceMappingURL=TokenBalanceRow.js.map

package/dist/cjs/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":";;AAYA,0CAiFC;;AA7FD,4CAAqC;AAErC,6DAAgE;AAEhE,kGAAuF;AACvF,sEAAkE;AAClE,oFAA8E;AAC9E,wDAAsD;AACtD,4DAAqD;AACrD,sDAAgD;AAChD,yDAAmD;AAEnD,SAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,GAON;IACC,MAAM,KAAK,GAAG,IAAA,yBAAc,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5C,OAAO,CACL,wBAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,eAAe;YAC/B,OAAO,EAAE,GAAG,kBAAO,CAAC,EAAE,IAAI,kBAAO,CAAC,EAAE,EAAE;YACtC,GAAG,KAAK;SACT,aAED,uBAAC,gCAAa,IACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,GACnC,EAEF,uBAAC,oBAAS,IACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAC,GAAG,EACV,GAAG,EAAC,KAAK,EACT,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;oBACL,IAAI,EAAE,GAAG;oBACT,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,CAAC;oBACX,cAAc,EAAE,UAAU;oBAC1B,QAAQ,EAAE,QAAQ;iBACnB,YAED,wBAAC,oBAAS,IACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,eAAe,EACrB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE;wBACL,UAAU,EAAE,UAAU;wBACtB,QAAQ,EAAE,CAAC;wBACX,QAAQ,EAAE,QAAQ;qBACnB,aAED,uBAAC,wBAAS,IACR,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,IAAI,GACT,EACF,uBAAC,cAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gCACL,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;gCACxB,UAAU,EAAE,QAAQ;6BACrB,YAEA,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE;gCAC3C,qBAAqB,EAAE,CAAC;gCACxB,qBAAqB,EAAE,CAAC;6BACzB,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,GACf,IACG,GACF,IACC,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,eAAe,CAAC,IAAA,gBAAM,EAAC,mBAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAC/B,OAAO;QACL,UAAU,EAAE,aAAa;QACzB,cAAc,EAAE,eAAe;QAC/B,QAAQ,EAAE,QAAQ;QAClB,aAAa,EAAE,KAAK;QACpB,OAAO,EAAE,kBAAO,CAAC,EAAE;QACnB,YAAY,EAAE,kBAAO,CAAC,EAAE;QACxB,GAAG,EAAE,kBAAO,CAAC,EAAE;QACf,SAAS,EAAE;YACT,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB;SAC3C;QACD,UAAU,EAAE,6CAA6C;QACzD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithHeader = WithHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ipfs_js_1 = require("../../../../../utils/ipfs.js");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const Spacer_js_1 = require("../../components/Spacer.js");
+const basic_js_1 = require("../../components/basic.js");
+const text_js_1 = require("../../components/text.js");
+function WithHeader({ children, uiOptions, defaultTitle, client, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [uiOptions.metadata?.image && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    width: "100%",
+                    borderRadius: `${index_js_1.radius.md} ${index_js_1.radius.md} 0 0`,
+                    overflow: "hidden",
+                    aspectRatio: "16/9",
+                    backgroundColor: theme.colors.tertiaryBg,
+                    backgroundImage: `url(${(0, ipfs_js_1.resolveScheme)({
+                        client,
+                        uri: uiOptions.metadata.image,
+                    })})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                } })), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", px: "lg", children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", weight: 700, children: uiOptions.metadata?.title || defaultTitle }), uiOptions.metadata?.description && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: uiOptions.metadata?.description })] })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), children] })] }));
+}
+//# sourceMappingURL=WithHeader.js.map

package/dist/cjs/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":";;AASA,gCAuDC;;AA/DD,0DAA6D;AAC7D,kGAAuF;AACvF,sEAAiE;AACjE,0DAAoD;AACpD,wDAAsD;AACtD,sDAAgD;AAGhD,SAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,GAMP;IACC,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAC/B,OAAO,CACL,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,aAErB,SAAS,CAAC,QAAQ,EAAE,KAAK,IAAI,CAC5B,gCACE,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,YAAY,EAAE,GAAG,iBAAM,CAAC,EAAE,IAAI,iBAAM,CAAC,EAAE,MAAM;oBAC7C,QAAQ,EAAE,QAAQ;oBAClB,WAAW,EAAE,MAAM;oBACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;oBACxC,eAAe,EAAE,OAAO,IAAA,uBAAa,EAAC;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,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,aAC9B,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,uBAAC,cAAI,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,6DACE,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EACjB,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,YAClC,SAAS,CAAC,QAAQ,EAAE,WAAW,GAC3B,IACN,CACJ,EAED,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAChB,QAAQ,IACC,IACF,CACb,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,121 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentDetails = PaymentDetails;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const formatTokenBalance_js_1 = require("../../ConnectWallet/screens/formatTokenBalance.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 PaymentOverview_js_1 = require("./PaymentOverview.js");
+function PaymentDetails({ uiOptions, client, paymentMethod, preparedQuote, onConfirm, onBack, onError, }) {
+    const theme = (0, CustomThemeProvider_js_1.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: (0, formatTokenBalance_js_1.formatTokenAmount)(preparedQuote.originAmount, token.decimals),
+                    destinationAmount: (0, formatTokenBalance_js_1.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: (0, formatTokenBalance_js_1.formatTokenAmount)(preparedQuote.originAmount, method.originToken.decimals),
+                    destinationAmount: (0, formatTokenBalance_js_1.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: (0, formatTokenBalance_js_1.formatCurrencyAmount)(method.currency, Number(preparedQuote.currencyAmount)),
+                    destinationAmount: (0, formatTokenBalance_js_1.formatTokenAmount)(preparedQuote.destinationAmount, preparedQuote.destinationToken.decimals),
+                    estimatedTime: undefined,
+                };
+            }
+            default: {
+                throw new Error(`Unsupported bridge prepare type: ${preparedQuote.type}`);
+            }
+        }
+    };
+    const displayData = getDisplayData();
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", fullHeight: true, p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: "Payment Details", onBack: onBack }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [displayData.destinationToken && ((0, jsx_runtime_1.jsx)(PaymentOverview_js_1.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 })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", style: { justifyContent: "center", flex: 1 }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Estimated Time" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: displayData.estimatedTime
+                                                    ? `~${Math.ceil(displayData.estimatedTime / 60000)} min`
+                                                    : "~2 min" })] }), preparedQuote.steps.length > 1 ? ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", style: { justifyContent: "center", flex: 1 }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Route Length" }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", children: [preparedQuote.steps.length, " step", preparedQuote.steps.length !== 1 ? "s" : ""] })] })) : null] })] }), preparedQuote.steps.length > 1 && ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", style: {
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                    borderRadius: index_js_1.radius.md,
+                                    backgroundColor: theme.colors.tertiaryBg,
+                                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                                }, children: preparedQuote.steps.map((step, stepIndex) => ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.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: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "accentButtonText", children: stepIndex + 1 }) }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "y", gap: "sm", style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", children: [step.originToken.symbol, " \u2192", " ", step.destinationToken.symbol] }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "xs", color: "secondaryText", children: [step.originToken.name, " to", " ", step.destinationToken.name] })] }) })] }) }, `step-${stepIndex}-${step.originToken.address}-${step.destinationToken.address}`))) })] })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: handleConfirm, children: "Confirm Payment" }) })] })] }));
+}
+//# sourceMappingURL=PaymentDetails.js.map

package/dist/cjs/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/cjs/react/web/ui/Bridge/payment-details/PaymentOverview.js

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

package/dist/cjs/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/cjs/react/web/ui/Bridge/payment-selection/FiatProviderSelection.js

@@ -0,0 +1,83 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiatProviderSelection = FiatProviderSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const address_js_1 = require("../../../../../utils/address.js");
+const units_js_1 = require("../../../../../utils/units.js");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const useBuyWithFiatQuotesForProviders_js_1 = require("../../../../core/hooks/pay/useBuyWithFiatQuotesForProviders.js");
+const Img_js_1 = require("../../components/Img.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 buttons_js_1 = require("../../components/buttons.js");
+const text_js_1 = require("../../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",
+    },
+];
+function FiatProviderSelection({ onProviderSelected, client, toChainId, toTokenAddress, toAddress, toAmount, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    // Fetch quotes for all providers
+    const quoteQueries = (0, useBuyWithFiatQuotesForProviders_js_1.useBuyWithFiatQuotesForProviders)({
+        client,
+        chainId: toChainId,
+        tokenAddress: (0, address_js_1.checksumAddress)(toTokenAddress),
+        receiver: (0, address_js_1.checksumAddress)(toAddress),
+        amount: toAmount || "0",
+        currency: "USD",
+    });
+    const quotes = (0, react_1.useMemo)(() => {
+        return quoteQueries.map((q) => q.data).filter((q) => !!q);
+    }, [quoteQueries]);
+    // TODO: add a "remember my choice" checkbox
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(basic_js_1.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 ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { animate: "fadein", style: {
+                        animationDelay: `${index * 100}ms`,
+                    }, children: (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: () => onProviderSelected(provider.id), style: {
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            borderRadius: index_js_1.radius.md,
+                            padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                            backgroundColor: theme.colors.tertiaryBg,
+                            textAlign: "left",
+                        }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", style: { width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                                        width: `${index_js_1.iconSize.md}px`,
+                                        height: `${index_js_1.iconSize.md}px`,
+                                        borderRadius: "50%",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        padding: index_js_1.spacing.xs,
+                                        overflow: "hidden",
+                                    }, children: (0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: provider.iconUri, alt: provider.name, width: index_js_1.iconSize.md, height: index_js_1.iconSize.md, client: client }) }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", style: { fontWeight: 600 }, children: provider.name }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { alignItems: "flex-end" }, children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", style: { fontWeight: 500 }, children: ["$", quote.currencyAmount.toLocaleString(undefined, {
+                                                    minimumFractionDigits: 2,
+                                                    maximumFractionDigits: 2,
+                                                }), " ", quote.currency] }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "xs", color: "secondaryText", children: [(0, units_js_1.toTokens)(quote.destinationAmount, quote.destinationToken.decimals), " ", quote.destinationToken.symbol] })] })] }) }) }, provider.id));
+            })) : ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", center: "both", style: { minHeight: "120px" }, children: [(0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "lg", color: "secondaryText" }), (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: "Generating quotes..." })] })) }) }));
+}
+//# sourceMappingURL=FiatProviderSelection.js.map

package/dist/cjs/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":";AAAA,YAAY,CAAC;;AAiDb,sDAwIC;;AAxLD,iCAAgC;AAEhC,gEAAkE;AAClE,4DAAyD;AACzD,kGAAuF;AACvF,sEAIiD;AACjD,wHAAkH;AAClH,oDAA8C;AAC9C,0DAAoD;AACpD,4DAAsD;AACtD,wDAAsD;AACtD,4DAAqD;AACrD,sDAAgD;AAWhD,MAAM,SAAS,GAAG;IAChB;QACE,EAAE,EAAE,UAAmB;QACvB,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,0BAA0B;QACvC,OAAO,EAAE,uCAAuC;KACjD;IACD;QACE,EAAE,EAAE,QAAiB;QACrB,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,4BAA4B;QACzC,OAAO,EAAE,wCAAwC;KAClD;IACD;QACE,EAAE,EAAE,SAAkB;QACtB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,yBAAyB;QACtC,OAAO,EAAE,yDAAyD;KACnE;CACF,CAAC;AAEF,SAAgB,qBAAqB,CAAC,EACpC,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,cAAc,EACd,SAAS,EACT,QAAQ,GACmB;IAC3B,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAE/B,iCAAiC;IACjC,MAAM,YAAY,GAAG,IAAA,sEAAgC,EAAC;QACpD,MAAM;QACN,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,IAAA,4BAAe,EAAC,cAAc,CAAC;QAC7C,QAAQ,EAAE,IAAA,4BAAe,EAAC,SAAS,CAAC;QACpC,MAAM,EAAE,QAAQ,IAAI,GAAG;QACvB,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,4CAA4C;IAE5C,OAAO,CACL,2DACE,uBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC9B,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACnB,MAAM;iBACH,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,cAAc,CAAC;iBACnD,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAC7B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CACpC,CAAC;gBACF,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACd,OAAO,IAAI,CAAC;gBACd,CAAC;gBAED,OAAO,CACL,uBAAC,oBAAS,IAER,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE;wBACL,cAAc,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;qBACnC,YAED,uBAAC,mBAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,QACT,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC9C,KAAK,EAAE;4BACL,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;4BAC/C,YAAY,EAAE,iBAAM,CAAC,EAAE;4BACvB,OAAO,EAAE,GAAG,kBAAO,CAAC,EAAE,IAAI,kBAAO,CAAC,EAAE,EAAE;4BACtC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;4BACxC,SAAS,EAAE,MAAM;yBAClB,YAED,wBAAC,oBAAS,IACR,IAAI,EAAC,KAAK,EACV,GAAG,EAAC,IAAI,EACR,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE9C,uBAAC,oBAAS,IACR,KAAK,EAAE;wCACL,KAAK,EAAE,GAAG,mBAAQ,CAAC,EAAE,IAAI;wCACzB,MAAM,EAAE,GAAG,mBAAQ,CAAC,EAAE,IAAI;wCAC1B,YAAY,EAAE,KAAK;wCACnB,OAAO,EAAE,MAAM;wCACf,UAAU,EAAE,QAAQ;wCACpB,cAAc,EAAE,QAAQ;wCACxB,OAAO,EAAE,kBAAO,CAAC,EAAE;wCACnB,QAAQ,EAAE,QAAQ;qCACnB,YAED,uBAAC,YAAG,IACF,GAAG,EAAE,QAAQ,CAAC,OAAO,EACrB,GAAG,EAAE,QAAQ,CAAC,IAAI,EAClB,KAAK,EAAE,mBAAQ,CAAC,EAAE,EAClB,MAAM,EAAE,mBAAQ,CAAC,EAAE,EACnB,MAAM,EAAE,MAAM,GACd,GACQ,EACZ,uBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACnD,uBAAC,cAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAEzB,QAAQ,CAAC,IAAI,GACT,GACG,EACZ,wBAAC,oBAAS,IACR,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAEjC,wBAAC,cAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,kBAGzB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,SAAS,EAAE;oDAC9C,qBAAqB,EAAE,CAAC;oDACxB,qBAAqB,EAAE,CAAC;iDACzB,CAAC,EAAE,GAAG,EACN,KAAK,CAAC,QAAQ,IACV,EACP,wBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,aAClC,IAAA,mBAAQ,EACP,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAChC,EAAE,GAAG,EACL,KAAK,CAAC,gBAAgB,CAAC,MAAM,IACzB,IACG,IACF,GACL,IA9EJ,QAAQ,CAAC,EAAE,CA+EN,CACb,CAAC;YACJ,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACF,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAClE,uBAAC,oBAAO,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAG,EAC3C,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EACjB,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,EAAC,MAAM,2CAErC,IACG,CACb,GACS,GACX,CACJ,CAAC;AACJ,CAAC"}