@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/_cjs/components/Insurance/Insurance.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Insurance = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const stores_1 = require("../../stores");
+const InsuranceCard_1 = require("./InsuranceCard");
+const InsuranceCollapsed_1 = require("./InsuranceCollapsed");
+const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
+    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { status: status, ...props }));
+};
+exports.Insurance = Insurance;

package/_cjs/components/Insurance/InsuranceCard.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsuranceCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const icons_1 = require("../../icons");
+const stores_1 = require("../../stores");
+const Card_1 = require("../Card");
+const Switch_1 = require("../Switch");
+const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [enabled, setEnabled] = (0, react_1.useState)(false);
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(status === stores_1.RouteExecutionStatus.Idle);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        onChange?.(checked);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
+                                    ? t('main.tags.insurance')
+                                    : t('main.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: handleSwitch, value: enabled })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                        value: feeAmountUsd,
+                                    }) }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, children: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { i18nKey: status === stores_1.RouteExecutionStatus.Idle
+                                            ? 'insurance.insure'
+                                            : 'insurance.insured', values: {
+                                            amount: insuredAmount,
+                                            tokenSymbol: insuredTokenSymbol,
+                                        }, components: [(0, jsx_runtime_1.jsx)("strong", {})] }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabled || status !== stores_1.RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            listStyleType: 'disc',
+                                            pl: 2,
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
+                                        ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                                        : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
+                                            ? t('button.learnMore')
+                                            : t('button.viewCoverage') }) })] })] }) })] }));
+};
+exports.InsuranceCard = InsuranceCard;

package/_cjs/components/Insurance/InsuranceCollapsed.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsuranceCollapsed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const InsuranceCard_1 = require("./InsuranceCard");
+const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) => {
+    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
+    const { routes } = (0, hooks_1.useRoutes)({
+        insurableRoute: routeExecution?.route,
+    });
+    const insuredRoute = routes?.[0];
+    const toggleInsurance = (checked) => {
+        if (insuredRoute) {
+            if (checked) {
+                setExecutableRoute(insuredRoute, insurableRouteId);
+            }
+            onChange?.(checked ? insuredRoute.id : insurableRouteId);
+        }
+    };
+    if (!insuredRoute) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { ...props, status: status, insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(insuredRoute.toAmountMin), insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
+};
+exports.InsuranceCollapsed = InsuranceCollapsed;

package/_cjs/components/Insurance/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Insurance"), exports);
+__exportStar(require("./types"), exports);

package/_cjs/components/Insurance/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_cjs/components/ListItemButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../utils");
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
+    },
+}));

package/_cjs/components/ListItemText.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemText = void 0;
+const material_1 = require("@mui/material");
+const ListItemText_1 = require("@mui/material/ListItemText");
+const styles_1 = require("@mui/material/styles");
+exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+    [`.${ListItemText_1.listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/_cjs/components/NFT/NFT.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../../providers");
+const NFTBase_1 = require("./NFTBase");
+const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, }) => {
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => {
+        if (token) {
+            setValue(providers_1.FormKey.ToChain, token.chainId, { shouldTouch: true });
+            setValue(providers_1.FormKey.ToToken, token.address, { shouldTouch: true });
+            setValue(providers_1.FormKey.ToAmount, token.amount?.toString(), {
+                shouldTouch: true,
+            });
+        }
+        if (contract) {
+            setValue(providers_1.FormKey.ToContractAddress, contract.address, {
+                shouldTouch: true,
+            });
+            setValue(providers_1.FormKey.ToContractCallData, contract.callData, {
+                shouldTouch: true,
+            });
+            setValue(providers_1.FormKey.ToContractGasLimit, contract.gasLimit, {
+                shouldTouch: true,
+            });
+        }
+    }, [contract, setValue, token]);
+    return ((0, jsx_runtime_1.jsx)(NFTBase_1.NFTBase, { isLoading: isLoading, imageUrl: imageUrl, collectionName: collectionName, assetName: assetName, owner: owner, token: token }));
+};
+exports.NFT = NFT;

package/_cjs/components/NFT/NFT.style.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewAvatar = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.PreviewAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.shape.borderRadius,
+}));

package/_cjs/components/NFT/NFTBase.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFTBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Token_1 = require("../Token");
+const NFT_style_1 = require("./NFT.style");
+const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('main.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+};
+exports.NFTBase = NFTBase;

package/_cjs/components/NFT/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NFT"), exports);
+__exportStar(require("./NFTBase"), exports);
+__exportStar(require("./types"), exports);

package/_cjs/components/NFT/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_cjs/components/NotFound.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFound = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Block_1 = require("@mui/icons-material/Block");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const NotFound = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            flex: 1,
+            padding: 3,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(Block_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
+};
+exports.NotFound = NotFound;

package/_cjs/components/PoweredBy/PoweredBy.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredBy = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_router_dom_1 = require("react-router-dom");
+const version_1 = require("../../config/version");
+const providers_1 = require("../../providers");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const PoweredBy_style_1 = require("./PoweredBy.style");
+const PoweredBy = () => {
+    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    if (pathname.includes(utils_1.navigationRoutes.fromToken) ||
+        pathname.includes(utils_1.navigationRoutes.toToken) ||
+        pathname.includes(utils_1.navigationRoutes.transactionHistory)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 1, pb: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 1000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
+};
+exports.PoweredBy = PoweredBy;

package/_cjs/components/PoweredBy/PoweredBy.style.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    ':hover': {
+        color: theme.palette.primary.main,
+    },
+}));

package/_cjs/components/PoweredBy/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredBy = void 0;
+var PoweredBy_1 = require("./PoweredBy");
+Object.defineProperty(exports, "PoweredBy", { enumerable: true, get: function () { return PoweredBy_1.PoweredBy; } });

package/_cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressToNextUpdate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
+    ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
+    : 0;
+const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
+const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+    const [value, setValue] = (0, react_1.useState)(() => getProgressValue(updatedAt, timeToUpdate));
+    (0, react_1.useEffect)(() => {
+        setValue(getProgressValue(updatedAt, timeToUpdate));
+        const id = setInterval(() => {
+            const time = getProgressValue(updatedAt, timeToUpdate);
+            setValue(time);
+            if (time >= 100) {
+                clearInterval(id);
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    }, [timeToUpdate, updatedAt]);
+    (0, react_1.useEffect)(() => {
+        if (isLoading) {
+            setValue(0);
+        }
+    }, [isLoading]);
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: onClick, disabled: isLoading, ...other, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { i18nKey: "tooltip.progressToNextUpdate", values: {
+                    value: getSecondsToUpdate(updatedAt, timeToUpdate),
+                }, components: [(0, jsx_runtime_1.jsx)("br", {})] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    placeItems: 'center',
+                    width: 24,
+                    height: 24,
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
+                            position: 'absolute',
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.grey[300]
+                                : theme.palette.grey[800],
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: isLoading ? 'indeterminate' : 'determinate', size: 24, value: value, sx: (theme) => ({
+                            opacity: value === 100 && !isLoading ? 0.5 : 1,
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.primary.main
+                                : theme.palette.primary.light,
+                        }) })] }) }) }));
+};
+exports.ProgressToNextUpdate = ProgressToNextUpdate;

package/_cjs/components/ProgressToNextUpdate/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ProgressToNextUpdate"), exports);

package/_cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReverseTokensButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SwapHoriz_1 = require("@mui/icons-material/SwapHoriz");
+const SwapVert_1 = require("@mui/icons-material/SwapVert");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../../providers");
+const ReverseTokensButton_style_1 = require("./ReverseTokensButton.style");
+const ReverseTokensButton = ({ vertical, }) => {
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const handleClick = () => {
+        const [fromChain, fromToken, toChain, toToken] = getValues([
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.FromToken,
+            providers_1.FormKey.ToChain,
+            providers_1.FormKey.ToToken,
+        ]);
+        setValue(providers_1.FormKey.FromAmount, '', { shouldTouch: true });
+        setValue(providers_1.FormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(providers_1.FormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(providers_1.FormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(providers_1.FormKey.ToToken, fromToken, { shouldTouch: true });
+    };
+    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, { onClick: handleClick, size: "small", children: vertical ? (0, jsx_runtime_1.jsx)(SwapVert_1.default, {}) : (0, jsx_runtime_1.jsx)(SwapHoriz_1.default, {}) }));
+};
+exports.ReverseTokensButton = ReverseTokensButton;

package/_cjs/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid`,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    zIndex: 1100,
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.darken)(theme.palette.background.paper, 0.02)
+            : (0, styles_1.lighten)(theme.palette.background.paper, 0.02),
+    },
+}));

package/_cjs/components/ReverseTokensButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ReverseTokensButton"), exports);

package/_cjs/components/RouteCard/RouteCard.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const StepActions_1 = require("../StepActions");
+const Token_1 = require("../Token");
+const RouteCardEssentials_1 = require("./RouteCardEssentials");
+const RouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(expanded);
+    const insurable = route.insurance?.state === 'INSURABLE';
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const token = subvariant === 'nft'
+        ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+        : { ...route.toToken, amount: BigInt(route.toAmount) };
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : react_1.Fragment;
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsx)(InsuranceTooltip, { insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`main.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(RecommendedTagTooltip, { children: (0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`main.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(RouteCardEssentials_1.RouteCardEssentials, { route: route })] }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+};
+exports.RouteCard = RouteCard;
+const InsuranceTooltip = ({ insuredAmount, insuredTokenSymbol, children }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { i18nKey: "insurance.insure", values: {
+                            amount: insuredAmount,
+                            tokenSymbol: insuredTokenSymbol,
+                        }, components: [(0, jsx_runtime_1.jsx)("strong", {})] }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/_cjs/components/RouteCard/RouteCard.style.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTypography = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.IconTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.common.black, 0.24)
+        : (0, styles_1.alpha)(theme.palette.common.white, 0.32),
+    lineHeight: 0,
+    marginRight: theme.spacing(0.5),
+}));

package/_cjs/components/RouteCard/RouteCardEssentials.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteCardEssentials = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccessTimeFilled_1 = require("@mui/icons-material/AccessTimeFilled");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const Layers_1 = require("@mui/icons-material/Layers");
+const MonetizationOn_1 = require("@mui/icons-material/MonetizationOn");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
+const RouteCard_style_1 = require("./RouteCard.style");
+const utils_1 = require("./utils");
+const RouteCardEssentials = ({ route, dense, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const executionTimeMinutes = Math.ceil(route.steps
+        .map((step) => step.estimate.executionDuration)
+        .reduce((duration, x) => duration + x, 0) / 60);
+    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+    const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
+    const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat((0, viem_1.formatUnits)(gas.amount, gas.token.decimals))?.toFixed(9), ' ', gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat((0, viem_1.formatUnits)(fee.amount, fee.token.decimals))?.toFixed(9), ' ', fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+                                value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('main.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(Layers_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })] }));
+};
+exports.RouteCardEssentials = RouteCardEssentials;

package/_cjs/components/RouteCard/RouteCardSkeleton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteCardSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const providers_1 = require("../../providers");
+const Card_1 = require("../Card");
+const RouteCardSkeleton = ({ variant, ...other }) => {
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [subvariant !== 'refuel' && subvariant !== 'nft' ? ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                    }) }) })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
+};
+exports.RouteCardSkeleton = RouteCardSkeleton;

package/_cjs/components/RouteCard/RouteNotFoundCard.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteNotFoundCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Route_1 = require("@mui/icons-material/Route");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const RouteNotFoundCard = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flex: 1,
+        }, py: 1.625, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(Route_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.routeNotFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.routeNotFound') })] }));
+};
+exports.RouteNotFoundCard = RouteNotFoundCard;

package/_cjs/components/RouteCard/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RouteCard"), exports);
+__exportStar(require("./RouteCardSkeleton"), exports);
+__exportStar(require("./RouteNotFoundCard"), exports);

package/_cjs/components/RouteCard/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });