@lifi/widget 2.0.0-beta.9 → 2.0.0

package/cjs/components/Insurance/InsuranceCard.js

@@ -12,7 +12,7 @@ const icons_1 = require("../../icons");
 const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const Switch_1 = require("../Switch");
-const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+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);
@@ -25,15 +25,18 @@ const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ..
         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('swap.tags.insurance')
-                                    : t('swap.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', {
+                                    ? 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: status === stores_1.RouteExecutionStatus.Idle
-                                        ? t('swap.insurance.insure')
-                                        : t('swap.insurance.insured') }), (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: {
+                                    }) }), (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('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
+                                        }, 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')

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -5,11 +5,12 @@ 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, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
+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.useSwapRoutes)({
+    const { routes } = (0, hooks_1.useRoutes)({
         insurableRoute: routeExecution?.route,
     });
     const insuredRoute = routes?.[0];
@@ -21,6 +22,9 @@ const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, fee
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    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, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
+    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)(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
 };
 exports.InsuranceCollapsed = InsuranceCollapsed;

package/cjs/components/Insurance/index.d.ts

@@ -1 +1,2 @@
 export * from './Insurance';
+export * from './types';

package/cjs/components/Insurance/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Insurance"), exports);
+__exportStar(require("./types"), exports);

package/cjs/components/Insurance/types.d.ts

@@ -1,15 +1,19 @@
 import type { BoxProps } from '@mui/material';
 import type { RouteExecutionStatus } from '../../stores';
-export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
-    insurableRouteId: string;
-    feeAmountUsd?: string;
+export interface InsuredAmount {
+    insuredAmount: string;
+    insuredTokenSymbol: string;
+}
+interface Insurance extends InsuredAmount {
+    feeAmountUsd: string;
     insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
+}
+export interface InsuranceProps extends Insurance, Omit<BoxProps, 'onChange'> {
+    insurableRouteId: string;
     onChange?: (routeId: string) => void;
 }
-export interface InsuranceCardProps {
-    feeAmountUsd?: string;
-    status?: RouteExecutionStatus;
-    insuranceCoverageId?: string;
+export interface InsuranceCardProps extends Insurance, Omit<BoxProps, 'onChange'> {
     onChange?: (checked: boolean) => void;
 }
+export {};

package/cjs/components/ListItemButton.d.ts

@@ -17,4 +17,4 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/NFT/NFT.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import type { BoxProps } from '@mui/material';
 import type { NFTProps } from './types';
-export declare const NFT: React.FC<BoxProps & NFTProps>;
+export declare const NFT: React.FC<NFTProps>;

package/cjs/components/NFT/NFT.js

@@ -2,28 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NFT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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 Token_1 = require("../Token");
-const NFT_style_1 = require("./NFT.style");
-const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
+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.SwapFormKey.ToChain, token.chainId);
-            setValue(providers_1.SwapFormKey.ToToken, token.address);
-            setValue(providers_1.SwapFormKey.ToAmount, token.amount);
+            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, { shouldTouch: true });
         }
         if (contract) {
-            setValue(providers_1.SwapFormKey.ToContractAddress, contract.address);
-            setValue(providers_1.SwapFormKey.ToContractCallData, contract.callData);
-            setValue(providers_1.SwapFormKey.ToContractGasLimit, contract.gasLimit);
+            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.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('swap.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 })] }));
+    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.d.ts

@@ -10,7 +10,7 @@ export declare const PreviewAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"circular" | "rounded" | "square", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/NFT/NFTBase.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { NFTProps } from './types';
+export declare const NFTBase: React.FC<NFTProps>;

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.d.ts

@@ -1,2 +1,3 @@
 export * from './NFT';
+export * from './NFTBase';
 export * from './types';

package/cjs/components/NFT/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./NFT"), exports);
+__exportStar(require("./NFTBase"), exports);
 __exportStar(require("./types"), exports);

package/cjs/components/NFT/types.d.ts

@@ -1,12 +1,14 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { WidgetContract } from '../../types';
-export interface NFTProps {
+export interface NFTBaseProps {
     imageUrl?: string;
     collectionName?: string;
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;
     token?: TokenAmount;
+}
+export interface NFTProps extends NFTBaseProps {
     contract?: WidgetContract;
 }
 export interface NFTOwner {

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -28,9 +28,9 @@ const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...
             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: t('tooltip.progressToNextUpdate', {
-                value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    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',

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -11,16 +11,16 @@ const ReverseTokensButton = ({ vertical, }) => {
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const handleClick = () => {
         const [fromChain, fromToken, toChain, toToken] = getValues([
-            providers_1.SwapFormKey.FromChain,
-            providers_1.SwapFormKey.FromToken,
-            providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.ToToken,
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.FromToken,
+            providers_1.FormKey.ToChain,
+            providers_1.FormKey.ToToken,
         ]);
-        setValue(providers_1.SwapFormKey.FromAmount, '', { shouldTouch: true });
-        setValue(providers_1.SwapFormKey.FromChain, toChain, { shouldTouch: true });
-        setValue(providers_1.SwapFormKey.FromToken, toToken, { shouldTouch: true });
-        setValue(providers_1.SwapFormKey.ToChain, fromChain, { shouldTouch: true });
-        setValue(providers_1.SwapFormKey.ToToken, fromToken, { shouldTouch: true });
+        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, {}) }));
 };

package/cjs/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -2,11 +2,11 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CardProps } from '../Card';
+import type { RouteCardProps } from './types';
+export declare const RouteCard: React.FC<RouteCardProps & Omit<CardProps, 'variant'>>;

package/cjs/components/{SwapRouteCard/SwapRouteCard.js → RouteCard/RouteCard.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteCard = void 0;
+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");
@@ -9,35 +9,39 @@ 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 SwapRouteCardEssentials_1 = require("./SwapRouteCardEssentials");
-const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
+const RouteCardEssentials_1 = require("./RouteCardEssentials");
+const RouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant: widgetVariant } = (0, providers_1.useWidgetConfig)();
+    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 = widgetVariant === 'nft'
+    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: [widgetVariant !== '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, { children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+    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(`swap.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(`swap.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)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
-    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+                                : '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.SwapRouteCard = SwapRouteCard;
-const InsuranceTooltip = ({ children, }) => {
+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: t('swap.insurance.insure') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    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('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+                    }, 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)();

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RouteCardEssentialsProps } from './types';
+export declare const RouteCardEssentials: React.FC<RouteCardEssentialsProps>;

package/cjs/components/{SwapRouteCard/SwapRouteCardEssentials.js → RouteCard/RouteCardEssentials.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteCardEssentials = void 0;
+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");
@@ -8,9 +8,9 @@ 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 SwapRouteCard_style_1 = require("./SwapRouteCard.style");
+const RouteCard_style_1 = require("./RouteCard.style");
 const utils_1 = require("./utils");
-const SwapRouteCardEssentials = ({ route, dense }) => {
+const RouteCardEssentials = ({ route, dense, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const executionTimeMinutes = Math.ceil(route.steps
         .map((step) => step.estimate.executionDuration)
@@ -18,10 +18,10 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
     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)(SwapRouteCard_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)(SwapRouteCard_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`, {
+    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)(SwapRouteCard_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('swap.estimatedTime', {
+                            }) })] }) }), (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)(SwapRouteCard_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 })] }) })] }));
+                            }) })] }) }), (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.SwapRouteCardEssentials = SwapRouteCardEssentials;
+exports.RouteCardEssentials = RouteCardEssentials;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+import type { RouteCardSkeletonProps } from './types';
+export declare const RouteCardSkeleton: React.FC<RouteCardSkeletonProps & BoxProps>;

package/cjs/components/{SwapRouteCard/SwapRouteCardSkeleton.js → RouteCard/RouteCardSkeleton.js}

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteCardSkeleton = void 0;
+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 SwapRouteCardSkeleton = ({ variant, ...other }) => {
-    const { variant: widgetVariant } = (0, providers_1.useWidgetConfig)();
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && widgetVariant !== '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) => ({
+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 widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
 };
-exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;
+exports.RouteCardSkeleton = RouteCardSkeleton;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RouteNotFoundCard: React.FC;

package/cjs/components/{SwapRouteCard/SwapRouteNotFoundCard.js → RouteCard/RouteNotFoundCard.js}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteNotFoundCard = void 0;
+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 SwapRouteNotFoundCard = () => {
+const RouteNotFoundCard = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: 'flex',
@@ -13,6 +13,6 @@ const SwapRouteNotFoundCard = () => {
             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('swap.info.title.routeNotFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
+        }, 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.SwapRouteNotFoundCard = SwapRouteNotFoundCard;
+exports.RouteNotFoundCard = RouteNotFoundCard;

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

@@ -0,0 +1,3 @@
+export * from './RouteCard';
+export * from './RouteCardSkeleton';
+export * from './RouteNotFoundCard';

package/cjs/components/{SwapRoutes → RouteCard}/index.js

@@ -14,5 +14,6 @@ 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("./SwapRoutes"), exports);
-__exportStar(require("./SwapRoutesExpanded"), exports);
+__exportStar(require("./RouteCard"), exports);
+__exportStar(require("./RouteCardSkeleton"), exports);
+__exportStar(require("./RouteNotFoundCard"), exports);

package/cjs/components/{SwapRouteCard → RouteCard}/types.d.ts

@@ -1,14 +1,14 @@
 import type { Route } from '@lifi/sdk';
-export interface SwapRouteCardProps {
+export interface RouteCardProps {
     route: Route;
     variant?: 'default' | 'cardless';
     active?: boolean;
     expanded?: boolean;
 }
-export interface SwapRouteCardEssentialsProps {
+export interface RouteCardEssentialsProps {
     route: Route;
     dense?: boolean;
 }
-export interface SwapRouteCardSkeletonProps {
+export interface RouteCardSkeletonProps {
     variant?: 'default' | 'cardless';
 }

package/cjs/components/{SwapRoutes/SwapRoutes.d.ts → Routes/Routes.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export declare const SwapRoutes: React.FC<BoxProps>;
+export declare const Routes: React.FC<BoxProps>;

package/cjs/components/Routes/Routes.js

@@ -0,0 +1,37 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export declare const RoutesExpanded: () => import("react/jsx-runtime").JSX.Element;
+export declare const RoutesExpandedElement: () => import("react/jsx-runtime").JSX.Element;