@lifi/widget 2.0.0-beta.9 → 2.0.0

package/components/NFT/NFT.js

@@ -1,25 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { SwapFormKey } from '../../providers';
-import { Token } from '../Token';
-import { PreviewAvatar } from './NFT.style';
-export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
-    const { t } = useTranslation();
+import { FormKey } from '../../providers';
+import { NFTBase } from './NFTBase';
+export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, }) => {
     const { setValue } = useFormContext();
     useEffect(() => {
         if (token) {
-            setValue(SwapFormKey.ToChain, token.chainId);
-            setValue(SwapFormKey.ToToken, token.address);
-            setValue(SwapFormKey.ToAmount, token.amount);
+            setValue(FormKey.ToChain, token.chainId, { shouldTouch: true });
+            setValue(FormKey.ToToken, token.address, { shouldTouch: true });
+            setValue(FormKey.ToAmount, token.amount, { shouldTouch: true });
         }
         if (contract) {
-            setValue(SwapFormKey.ToContractAddress, contract.address);
-            setValue(SwapFormKey.ToContractCallData, contract.callData);
-            setValue(SwapFormKey.ToContractGasLimit, contract.gasLimit);
+            setValue(FormKey.ToContractAddress, contract.address, {
+                shouldTouch: true,
+            });
+            setValue(FormKey.ToContractCallData, contract.callData, {
+                shouldTouch: true,
+            });
+            setValue(FormKey.ToContractGasLimit, contract.gasLimit, {
+                shouldTouch: true,
+            });
         }
     }, [contract, setValue, token]);
-    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+    return (_jsx(NFTBase, { isLoading: isLoading, imageUrl: imageUrl, collectionName: collectionName, assetName: assetName, owner: owner, token: token }));
 };

package/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/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/components/NFT/NFTBase.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Token } from '../Token';
+import { PreviewAvatar } from './NFT.style';
+export const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token, }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('main.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+};

package/components/NFT/index.d.ts

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

package/components/NFT/index.js

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

package/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/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
     ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
     : 0;
@@ -25,9 +25,9 @@ export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onCli
             setValue(0);
         }
     }, [isLoading]);
-    return (_jsx(IconButton, { onClick: onClick, disabled: isLoading, ...other, children: _jsx(Tooltip, { title: t('tooltip.progressToNextUpdate', {
-                value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { sx: {
+    return (_jsx(IconButton, { onClick: onClick, disabled: isLoading, ...other, children: _jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "tooltip.progressToNextUpdate", values: {
+                    value: getSecondsToUpdate(updatedAt, timeToUpdate),
+                }, components: [_jsx("br", {})] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -2,22 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
 import { useFormContext } from 'react-hook-form';
-import { SwapFormKey } from '../../providers';
+import { FormKey } from '../../providers';
 import { IconButton } from './ReverseTokensButton.style';
 export const ReverseTokensButton = ({ vertical, }) => {
     const { setValue, getValues } = useFormContext();
     const handleClick = () => {
         const [fromChain, fromToken, toChain, toToken] = getValues([
-            SwapFormKey.FromChain,
-            SwapFormKey.FromToken,
-            SwapFormKey.ToChain,
-            SwapFormKey.ToToken,
+            FormKey.FromChain,
+            FormKey.FromToken,
+            FormKey.ToChain,
+            FormKey.ToToken,
         ]);
-        setValue(SwapFormKey.FromAmount, '', { shouldTouch: true });
-        setValue(SwapFormKey.FromChain, toChain, { shouldTouch: true });
-        setValue(SwapFormKey.FromToken, toToken, { shouldTouch: true });
-        setValue(SwapFormKey.ToChain, fromChain, { shouldTouch: true });
-        setValue(SwapFormKey.ToToken, fromToken, { shouldTouch: true });
+        setValue(FormKey.FromAmount, '', { shouldTouch: true });
+        setValue(FormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(FormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(FormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(FormKey.ToToken, fromToken, { shouldTouch: true });
     };
     return (_jsx(IconButton, { onClick: handleClick, size: "small", children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) }));
 };

package/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/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/components/{SwapRouteCard/SwapRouteCard.js → RouteCard/RouteCard.js}

@@ -4,36 +4,40 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
+import { formatTokenAmount } from '../../utils';
 import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
-import { SwapRouteCardEssentials } from './SwapRouteCardEssentials';
-export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
+import { RouteCardEssentials } from './RouteCardEssentials';
+export const RouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = useTranslation();
-    const { variant: widgetVariant } = useWidgetConfig();
+    const { subvariant } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = 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 : Fragment;
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
                                 ? 'insurance-icon'
-                                : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(RecommendedTagTooltip, { children: _jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
-    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+                                : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`main.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(RecommendedTagTooltip, { children: _jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`main.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(RouteCardEssentials, { route: route })] }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
-const InsuranceTooltip = ({ children, }) => {
+const InsuranceTooltip = ({ insuredAmount, insuredTokenSymbol, children }) => {
     const { t } = useTranslation();
-    return (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", children: t('swap.insurance.insure') }), _jsxs(Box, { sx: {
+    return (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", children: _jsx(Trans, { i18nKey: "insurance.insure", values: {
+                            amount: insuredAmount,
+                            tokenSymbol: insuredTokenSymbol,
+                        }, components: [_jsx("strong", {})] }) }), _jsxs(Box, { sx: {
                         listStyleType: 'disc',
                         pl: 2,
-                    }, children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+                    }, children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(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 } = useTranslation();

package/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/components/{SwapRouteCard/SwapRouteCardEssentials.js → RouteCard/RouteCardEssentials.js}

@@ -5,9 +5,9 @@ import LayersIcon from '@mui/icons-material/Layers';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { IconTypography } from './SwapRouteCard.style';
+import { IconTypography } from './RouteCard.style';
 import { getFeeCostsBreakdown, getGasCostsBreakdown } from './utils';
-export const SwapRouteCardEssentials = ({ route, dense }) => {
+export const RouteCardEssentials = ({ route, dense, }) => {
     const { t } = useTranslation();
     const executionTimeMinutes = Math.ceil(route.steps
         .map((step) => step.estimate.executionDuration)
@@ -17,7 +17,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const feeCosts = getFeeCostsBreakdown(route, false);
     return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
-                            }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+                            }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('main.estimatedTime', {
                                 value: executionTimeMinutes,
                             }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(IconTypography, { children: _jsx(LayersIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })] }));
 };

package/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/components/{SwapRouteCard/SwapRouteCardSkeleton.js → RouteCard/RouteCardSkeleton.js}

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
 import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
-export const SwapRouteCardSkeleton = ({ variant, ...other }) => {
-    const { variant: widgetVariant } = useWidgetConfig();
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && widgetVariant !== 'nft' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+export const RouteCardSkeleton = ({ variant, ...other }) => {
+    const { subvariant } = useWidgetConfig();
+    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && subvariant !== 'nft' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
                         borderRadius: `${theme.shape.borderRadius}px`,
                     }) }) })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16 }), _jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), _jsx(Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
-    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
 };

package/components/RouteCard/RouteNotFoundCard.d.ts

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RouteIcon from '@mui/icons-material/Route';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-export const SwapRouteNotFoundCard = () => {
+export const RouteNotFoundCard = () => {
     const { t } = useTranslation();
     return (_jsxs(Box, { sx: {
             display: 'flex',
@@ -10,5 +10,5 @@ export const SwapRouteNotFoundCard = () => {
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 1.625, children: [_jsx(Typography, { fontSize: 48, children: _jsx(RouteIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.routeNotFound') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
+        }, py: 1.625, children: [_jsx(Typography, { fontSize: 48, children: _jsx(RouteIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.routeNotFound') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.routeNotFound') })] }));
 };

package/components/RouteCard/index.d.ts

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

package/components/RouteCard/index.js

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

package/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/ActiveSwaps/ActiveSwaps.d.ts → components/Routes/Routes.d.ts}

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

package/components/Routes/Routes.js

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

package/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;

package/components/{SwapRoutes/SwapRoutesExpanded.js → Routes/RoutesExpanded.js}

@@ -3,35 +3,37 @@ import { Collapse, Grow, Stack, Typography } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useMatch, useNavigate } from 'react-router-dom';
-import { useSwapRoutes } from '../../hooks';
+import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
-import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
-import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutesExpanded.style';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+import { CollapseContainer, Container, Header, ScrollableContainer, } from './RoutesExpanded.style';
 const timeout = { enter: 225, exit: 225, appear: 0 };
-export const SwapRoutesExpanded = () => {
+export const RoutesExpanded = () => {
     const element = useMatch('/');
-    return (_jsx(CollapseContainer, { children: _jsx(Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: _jsx("div", { children: _jsx(SwapRoutesExpandedElement, {}) }) }) }) }));
+    return (_jsx(CollapseContainer, { children: _jsx(Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: _jsx("div", { children: _jsx(RoutesExpandedElement, {}) }) }) }) }));
 };
-export const SwapRoutesExpandedElement = () => {
+export const RoutesExpandedElement = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const setExecutableRoute = useSetExecutableRoute();
-    const { variant, containerStyle } = useWidgetConfig();
+    const { subvariant, containerStyle } = useWidgetConfig();
     const { isValid, isValidating } = useFormState();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useRoutes();
     const currentRoute = routes?.[0];
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
-            navigate(navigationRoutes.swapExecution, {
+            navigate(navigationRoutes.transactionExecution, {
                 state: { routeId: route.id },
             });
         }
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: subvariant === 'nft'
+                                        ? t('main.fromAmount')
+                                        : t('header.youGet') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };

package/components/Routes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Routes';
+export * from './RoutesExpanded';

package/components/Routes/index.js

@@ -0,0 +1,2 @@
+export * from './Routes';
+export * from './RoutesExpanded';

package/components/SelectChainAndToken.js

@@ -3,24 +3,24 @@ import { Box, useMediaQuery } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { ReverseTokensButton } from '../components/ReverseTokensButton';
 import { SelectTokenButton } from '../components/SelectTokenButton';
-import { SwapFormKey, useWidgetConfig } from '../providers';
+import { FormKey, useWidgetConfig } from '../providers';
 import { DisabledUI, HiddenUI } from '../types';
 export const SelectChainAndToken = (props) => {
     const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, hiddenUI, variant } = useWidgetConfig();
+    const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
     const [fromChain, toChain, fromToken, toToken] = useWatch({
         name: [
-            SwapFormKey.FromChain,
-            SwapFormKey.ToChain,
-            SwapFormKey.FromToken,
-            SwapFormKey.ToToken,
+            FormKey.FromChain,
+            FormKey.ToChain,
+            FormKey.FromToken,
+            FormKey.ToToken,
         ],
     });
-    const hiddenReverse = variant === 'refuel' ||
+    const hiddenReverse = subvariant === 'refuel' ||
         disabledUI?.includes(DisabledUI.FromToken) ||
         disabledUI?.includes(DisabledUI.ToToken) ||
         hiddenUI?.includes(HiddenUI.ToToken);
-    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
+    const hiddenToToken = subvariant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&

package/components/SelectTokenButton/SelectTokenButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SwapFormTypeProps } from '../../providers';
-export declare const SelectTokenButton: React.FC<SwapFormTypeProps & {
+import type { FormTypeProps } from '../../providers';
+export declare const SelectTokenButton: React.FC<FormTypeProps & {
     compact: boolean;
 }>;

package/components/SelectTokenButton/SelectTokenButton.js

@@ -4,7 +4,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChain, useSwapOnly, useToken } from '../../hooks';
-import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
@@ -12,30 +12,30 @@ import { SelectTokenCardHeader } from './SelectTokenButton.style';
 export const SelectTokenButton = ({ formType, compact }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { disabledUI, variant } = useWidgetConfig();
+    const { disabledUI, subvariant } = useWidgetConfig();
     const swapOnly = useSwapOnly();
-    const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
+    const tokenKey = FormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType), tokenKey],
+        name: [FormKeyHelper.getChainKey(formType), tokenKey],
     });
     const { chain, isLoading: isChainLoading } = useChain(chainId);
     const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
     const handleClick = () => {
         navigate(formType === 'from'
             ? navigationRoutes.fromToken
-            : variant === 'refuel'
+            : subvariant === 'refuel'
                 ? navigationRoutes.toTokenNative
                 : navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-    const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t('swap.selectChain')
+    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
+        ? t('main.selectChain')
         : formType === 'to' && swapOnly
-            ? t('swap.selectToken')
-            : t('swap.selectChainAndToken');
-    const cardTitle = formType === 'from' && variant === 'nft'
+            ? t('main.selectToken')
+            : t('main.selectChainAndToken');
+    const cardTitle = formType === 'from' && subvariant === 'nft'
         ? t(`header.payWith`)
-        : t(`swap.${formType}`);
-    return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
+        : t(`main.${formType}`);
+    return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };