@lifi/widget 2.0.0-beta.4 → 2.0.0-beta.5

package/README.md

@@ -54,21 +54,20 @@ yarn add @lifi/wallet-management
 
 Here is an example of a basic app using LI.FI Widget:
 
-```jsx
+```tsx
 import { LiFiWidget, WidgetConfig } from '@lifi/widget';
-import { useMemo } from 'react';
+
+const widgetConfig: WidgetConfig = {
+  containerStyle: {
+    border: '1px solid rgb(234, 234, 234)',
+    borderRadius: '16px',
+  },
+};
 
 export const WidgetPage = () => {
-  const widgetConfig: WidgetConfig = useMemo(() => {
-    return {
-      containerStyle: {
-        border: '1px solid rgb(234, 234, 234)',
-        borderRadius: '16px',
-      },
-    };
-  }, []);
-
-  return <LiFiWidget config={widgetConfig} />;
+  return (
+    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
+  );
 };
 ```
 

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -25,12 +25,21 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    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)(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, children: t('swap.insurance.insure') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                        listStyleType: 'disc',
-                                        pl: 2,
-                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+    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
                                 ? '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)(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 })] }));
+                                : '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 }));
 };
 exports.SwapRouteCard = SwapRouteCard;
+const InsuranceTooltip = ({ 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: {
+                        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 }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -18,7 +18,7 @@ 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, 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, 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)(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`, {
                                 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', {
                                 value: executionTimeMinutes,

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.4";
+export declare const version = "2.0.0-beta.5";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.0.0-beta.4';
+exports.version = '2.0.0-beta.5';

package/cjs/i18n/en.json

@@ -251,6 +251,7 @@
     },
     "numberOfSteps": "A number of swap steps. Each step can contain 1-2 transactions that require a signature.",
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "recommended": "A cheap route that balances complexity and ease of use.",
     "settingsModified": "Settings (modified)"
   },
   "wallet": {

package/cjs/pages/SwapPage/SwapPage.js

@@ -30,9 +30,12 @@ const SwapPage = () => {
     const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
     const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
         routeId: routeId,
-        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
+        onAcceptExchangeRateUpdate,
     });
     const handleExecuteRoute = (0, react_1.useCallback)(() => {
         if (tokenValueBottomSheetRef.current?.isOpen()) {

package/components/SwapRouteCard/SwapRouteCard.js

@@ -3,7 +3,7 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
@@ -22,11 +22,20 @@ export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ..
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, children: t('swap.insurance.insure') }), _jsxs(Box, { sx: {
-                                        listStyleType: 'disc',
-                                        pl: 2,
-                                    }, children: [_jsx(Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+    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
                                 ? '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(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 })] }));
+                                : '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 }));
 };
+const InsuranceTooltip = ({ 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: {
+                        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 }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -15,7 +15,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
     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, 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, 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`, {
+    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', {
                                 value: executionTimeMinutes,

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.4";
+export declare const version = "2.0.0-beta.5";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-beta.4';
+export const version = '2.0.0-beta.5';

package/i18n/en.json

@@ -251,6 +251,7 @@
     },
     "numberOfSteps": "A number of swap steps. Each step can contain 1-2 transactions that require a signature.",
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "recommended": "A cheap route that balances complexity and ease of use.",
     "settingsModified": "Settings (modified)"
   },
   "wallet": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -37,14 +37,14 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.0.0-beta.11",
-    "@lifi/wallet-management": "^2.0.0-beta.3",
+    "@lifi/wallet-management": "^2.0.0-beta.4",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.128",
     "@mui/material": "^5.12.2",

package/pages/SwapPage/SwapPage.js

@@ -27,9 +27,12 @@ export const SwapPage = () => {
     const [routeId, setRouteId] = useState(stateRouteId);
     const tokenValueBottomSheetRef = useRef(null);
     const exchangeRateBottomSheetRef = useRef(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
         routeId: routeId,
-        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
+        onAcceptExchangeRateUpdate,
     });
     const handleExecuteRoute = useCallback(() => {
         if (tokenValueBottomSheetRef.current?.isOpen()) {