@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/cjs/components/RouteCard/RouteCard.js

@@ -1,49 +0,0 @@
-"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: route.fromAmount }
-        : { ...route.toToken, amount: 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)(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

@@ -1,12 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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 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: [gas.amount?.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: [fee.amount?.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

@@ -1,15 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-"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

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

package/cjs/components/RouteCard/utils.d.ts

@@ -1,12 +0,0 @@
-import type { Route, Token } from '@lifi/sdk';
-import Big from 'big.js';
-export declare const getGasCostsBreakdown: (route: Route) => {
-    amount: Big;
-    amountUSD: number;
-    token: Token;
-}[];
-export declare const getFeeCostsBreakdown: (route: Route, included?: boolean) => {
-    amount: Big;
-    amountUSD: number;
-    token: Token;
-}[];

package/cjs/components/RouteCard/utils.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFeeCostsBreakdown = exports.getGasCostsBreakdown = void 0;
-const big_js_1 = require("big.js");
-const getGasCostsBreakdown = (route) => {
-    return Object.values(route.steps.reduce((groupedGasCosts, step) => {
-        if (step.estimate.gasCosts?.length) {
-            const { token } = step.estimate.gasCosts[0];
-            const gasCostAmount = step.estimate.gasCosts
-                .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
-                .div(10 ** token.decimals);
-            const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
-            const groupedGasCost = groupedGasCosts[token.chainId];
-            const amount = groupedGasCost
-                ? groupedGasCost.amount.plus(gasCostAmount)
-                : gasCostAmount;
-            const amountUSD = groupedGasCost
-                ? groupedGasCost.amountUSD + gasCostAmountUSD
-                : gasCostAmountUSD;
-            groupedGasCosts[token.chainId] = {
-                amount,
-                amountUSD,
-                token,
-            };
-            return groupedGasCosts;
-        }
-        return groupedGasCosts;
-    }, {}));
-};
-exports.getGasCostsBreakdown = getGasCostsBreakdown;
-const getFeeCostsBreakdown = (route, included) => {
-    return Object.values(route.steps.reduce((groupedFeeCosts, step) => {
-        let feeCosts = step.estimate.feeCosts;
-        if (typeof included === 'boolean') {
-            feeCosts = feeCosts?.filter((feeCost) => feeCost.included === included);
-        }
-        if (feeCosts?.length) {
-            const { token } = feeCosts[0];
-            const feeCostAmount = feeCosts
-                .reduce((amount, feeCost) => amount.plus((0, big_js_1.default)(feeCost.amount || 0)), (0, big_js_1.default)(0))
-                .div(10 ** token.decimals);
-            const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
-            const groupedFeeCost = groupedFeeCosts[token.chainId];
-            const amount = groupedFeeCost
-                ? groupedFeeCost.amount.plus(feeCostAmount)
-                : feeCostAmount;
-            const amountUSD = groupedFeeCost
-                ? groupedFeeCost.amountUSD + feeCostAmountUSD
-                : feeCostAmountUSD;
-            groupedFeeCosts[token.chainId] = {
-                amount,
-                amountUSD,
-                token,
-            };
-            return groupedFeeCosts;
-        }
-        return groupedFeeCosts;
-    }, {}));
-};
-exports.getFeeCostsBreakdown = getFeeCostsBreakdown;

package/cjs/components/Routes/Routes.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Routes = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const utils_1 = require("../../utils");
-const Card_1 = require("../Card");
-const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
-const RouteCard_1 = require("../RouteCard");
-const Routes = (props) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { subvariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
-    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useRoutes)();
-    const currentRoute = routes?.[0];
-    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
-        return null;
-    }
-    const handleCardClick = () => {
-        navigate(utils_1.navigationRoutes.routes);
-    };
-    const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute;
-    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: subvariant === 'nft' ? t('main.fromAmount') : t('header.youGet') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
-                    position: 'absolute',
-                    top: 8,
-                    right: 8,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCard, { route: currentRoute, variant: "cardless", active: true })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, appear: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleCardClick, disabled: isValidating || !isValid, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
-};
-exports.Routes = Routes;

package/cjs/components/Routes/RoutesExpanded.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RoutesExpandedElement = exports.RoutesExpanded = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const utils_1 = require("../../utils");
-const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
-const RouteCard_1 = require("../RouteCard");
-const RoutesExpanded_style_1 = require("./RoutesExpanded.style");
-const timeout = { enter: 225, exit: 225, appear: 0 };
-const RoutesExpanded = () => {
-    const element = (0, react_router_dom_1.useMatch)('/');
-    return ((0, jsx_runtime_1.jsx)(RoutesExpanded_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.RoutesExpandedElement, {}) }) }) }) }));
-};
-exports.RoutesExpanded = RoutesExpanded;
-const RoutesExpandedElement = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
-    const { subvariant, containerStyle } = (0, providers_1.useWidgetConfig)();
-    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useRoutes)();
-    const currentRoute = routes?.[0];
-    const handleRouteClick = (route) => {
-        if (isValid && !isValidating) {
-            setExecutableRoute(route);
-            navigate(utils_1.navigationRoutes.transactionExecution, {
-                state: { routeId: route.id },
-            });
-        }
-    };
-    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
-    const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(RoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(RoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(RoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: subvariant === 'nft'
-                                        ? t('main.fromAmount')
-                                        : t('header.youGet') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
-};
-exports.RoutesExpandedElement = RoutesExpandedElement;

package/cjs/components/Routes/RoutesExpanded.style.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const AppContainer_1 = require("../AppContainer");
-exports.CollapseContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    height: AppContainer_1.maxHeight,
-    zIndex: 0,
-}));
-exports.ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
-    overflowY: 'auto',
-    height: '100%',
-    width: '100%',
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-});
-exports.Container = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
-    overflow: 'auto',
-    width: 436,
-    maxHeight: AppContainer_1.maxHeight,
-    marginLeft: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'column',
-}));
-exports.Header = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
-    backdropFilter: 'blur(12px)',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(1.5, 3),
-    position: 'sticky',
-    top: 0,
-    zIndex: 1200,
-}));

package/cjs/components/Routes/index.js

@@ -1,18 +0,0 @@
-"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("./Routes"), exports);
-__exportStar(require("./RoutesExpanded"), exports);

package/cjs/components/Select.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const material_1 = require("@mui/material");
-const InputBase_1 = require("@mui/material/InputBase");
-const ListItemIcon_1 = require("@mui/material/ListItemIcon");
-const OutlinedInput_1 = require("@mui/material/OutlinedInput");
-const Select_1 = require("@mui/material/Select");
-const styles_1 = require("@mui/material/styles");
-exports.Select = (0, styles_1.styled)(material_1.Select, {
-    shouldForwardProp: (prop) => prop !== 'dense',
-})(({ theme, dense }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? theme.palette.common.white
-        : theme.palette.background.paper,
-    [`.${InputBase_1.inputBaseClasses.input}`]: {
-        padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
-        display: 'flex',
-        alignItems: 'center',
-    },
-    [`.${Select_1.selectClasses.icon}`]: {
-        right: 10,
-        color: theme.palette.text.primary,
-    },
-    [`.${ListItemIcon_1.listItemIconClasses.root}`]: {
-        minWidth: 38,
-    },
-    [`.${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
-        display: 'none',
-    },
-}));

package/cjs/components/SelectChainAndToken.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectChainAndToken = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
-const ReverseTokensButton_1 = require("../components/ReverseTokensButton");
-const SelectTokenButton_1 = require("../components/SelectTokenButton");
-const providers_1 = require("../providers");
-const types_1 = require("../types");
-const SelectChainAndToken = (props) => {
-    const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, hiddenUI, subvariant } = (0, providers_1.useWidgetConfig)();
-    const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
-        name: [
-            providers_1.FormKey.FromChain,
-            providers_1.FormKey.ToChain,
-            providers_1.FormKey.FromToken,
-            providers_1.FormKey.ToToken,
-        ],
-    });
-    const hiddenReverse = subvariant === 'refuel' ||
-        disabledUI?.includes(types_1.DisabledUI.FromToken) ||
-        disabledUI?.includes(types_1.DisabledUI.ToToken) ||
-        hiddenUI?.includes(types_1.HiddenUI.ToToken);
-    const hiddenToToken = subvariant === 'nft' || hiddenUI?.includes(types_1.HiddenUI.ToToken);
-    const isCompact = fromChain &&
-        toChain &&
-        fromToken &&
-        toToken &&
-        !prefersNarrowView &&
-        !hiddenToToken;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
-};
-exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectTokenButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const utils_1 = require("../../utils");
-const Card_1 = require("../Card");
-const TokenAvatar_1 = require("../TokenAvatar");
-const SelectTokenButton_style_1 = require("./SelectTokenButton.style");
-const SelectTokenButton = ({ formType, compact }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { disabledUI, subvariant } = (0, providers_1.useWidgetConfig)();
-    const swapOnly = (0, hooks_1.useSwapOnly)();
-    const tokenKey = providers_1.FormKeyHelper.getTokenKey(formType);
-    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.FormKeyHelper.getChainKey(formType), tokenKey],
-    });
-    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);
-    const { token, isLoading: isTokenLoading } = (0, hooks_1.useToken)(chainId, tokenAddress);
-    const handleClick = () => {
-        navigate(formType === 'from'
-            ? utils_1.navigationRoutes.fromToken
-            : subvariant === 'refuel'
-                ? utils_1.navigationRoutes.toTokenNative
-                : utils_1.navigationRoutes.toToken);
-    };
-    const isSelected = !!(chain && token);
-    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
-        ? t('main.selectChain')
-        : formType === 'to' && swapOnly
-            ? t('main.selectToken')
-            : t('main.selectChainAndToken');
-    const cardTitle = formType === 'from' && subvariant === 'nft'
-        ? t(`header.payWith`)
-        : t(`main.${formType}`);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
-};
-exports.SelectTokenButton = SelectTokenButton;

package/cjs/components/SelectTokenButton/SelectTokenButton.style.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectTokenCardHeader = void 0;
-const CardHeader_1 = require("@mui/material/CardHeader");
-const styles_1 = require("@mui/material/styles");
-const Card_1 = require("../Card");
-exports.SelectTokenCardHeader = (0, styles_1.styled)(Card_1.CardHeader, {
-    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
-})(({ theme, selected, compact }) => ({
-    height: 64,
-    [`.${CardHeader_1.cardHeaderClasses.title}`]: {
-        color: selected
-            ? theme.palette.text.primary
-            : theme.palette.text.secondary,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        width: compact ? 92 : 256,
-        fontWeight: selected ? 500 : 400,
-        fontSize: compact && !selected ? '1rem' : '1.125rem',
-        [theme.breakpoints.down(392)]: {
-            width: compact ? 92 : 224,
-        },
-    },
-    [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        width: compact ? 92 : 256,
-        [theme.breakpoints.down(392)]: {
-            width: compact ? 92 : 224,
-        },
-    },
-}));

package/cjs/components/SelectTokenButton/index.js

@@ -1,17 +0,0 @@
-"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("./SelectTokenButton"), exports);

package/cjs/components/SendToWallet/SendToWallet.js

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SendToWalletFormHelperText = exports.SendToWallet = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const address_1 = require("@ethersproject/address");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const types_1 = require("../../types");
-const Card_1 = require("../Card");
-const SendToWallet_style_1 = require("./SendToWallet.style");
-exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { trigger, getValues, setValue, clearErrors } = (0, react_hook_form_1.useFormContext)();
-    const { account } = (0, providers_1.useWallet)();
-    const { disabledUI, hiddenUI, requiredUI, toAddress } = (0, providers_1.useWidgetConfig)();
-    const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
-    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
-    const hiddenToAddress = hiddenUI?.includes(types_1.HiddenUI.ToAddress);
-    const disabledToAddress = disabledUI?.includes(types_1.DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI?.includes(types_1.RequiredUI.ToAddress);
-    const requiredToAddressRef = (0, react_1.useRef)(requiredToAddress);
-    const { field: { onChange, onBlur, name, value }, } = (0, react_hook_form_1.useController)({
-        name: providers_1.FormKey.ToAddress,
-        rules: {
-            required: requiredToAddress && t('error.title.walletAddressRequired'),
-            onChange: (e) => {
-                setValue(providers_1.FormKey.ToAddress, e.target.value.trim());
-            },
-            validate: async (value) => {
-                try {
-                    if (!value) {
-                        return true;
-                    }
-                    const address = await account.signer?.provider?.resolveName(value);
-                    return ((0, address_1.isAddress)(address || value) ||
-                        t('error.title.walletAddressInvalid'));
-                }
-                catch {
-                    return t('error.title.walletEnsAddressInvalid');
-                }
-            },
-            onBlur: () => trigger(providers_1.FormKey.ToAddress),
-        },
-    });
-    // We want to show toAddress field if it is set via widget configuration and not hidden
-    const showInstantly = Boolean(!showSendToWalletDirty &&
-        showDestinationWallet &&
-        toAddress &&
-        !hiddenToAddress) || requiredToAddress;
-    (0, react_1.useEffect)(() => {
-        if (showInstantly) {
-            setSendToWallet(true);
-        }
-    }, [showInstantly, setSendToWallet]);
-    (0, react_1.useEffect)(() => {
-        const value = getValues(providers_1.FormKey.ToAddress);
-        if (value) {
-            trigger(providers_1.FormKey.ToAddress);
-            // Trigger validation if we change requiredToAddress in the runtime
-        }
-        else if (requiredToAddressRef.current !== requiredToAddress) {
-            requiredToAddressRef.current = requiredToAddress;
-            trigger(providers_1.FormKey.ToAddress).then(() => clearErrors(providers_1.FormKey.ToAddress));
-        }
-    }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
-    if (hiddenToAddress) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { required: requiredToAddress, children: t('main.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('main.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] })] }) }));
-});
-const SendToWalletFormHelperText = () => {
-    const { errors } = (0, react_hook_form_1.useFormState)();
-    return ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: !!errors.toAddress, children: errors.toAddress?.message }));
-};
-exports.SendToWalletFormHelperText = SendToWalletFormHelperText;