@lifi/widget 1.23.0 → 1.24.0

package/cjs/components/SelectChainAndToken.js

@@ -23,6 +23,6 @@ const SelectChainAndToken = (props) => {
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromToken)) ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToToken));
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.25 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/StepActions/StepActions.js

@@ -44,13 +44,13 @@ const StepActions = (_a) => {
 };
 exports.StepActions = StepActions;
 const StepDetailsContent = ({ step }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                 value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
-            }), ' ', step.action.toToken.symbol] })));
+            }), ' ', (_h = (_g = (_f = step.execution) === null || _f === void 0 ? void 0 : _f.toToken) === null || _g === void 0 ? void 0 : _g.symbol) !== null && _h !== void 0 ? _h : step.action.toToken.symbol] })));
 };
 exports.StepDetailsContent = StepDetailsContent;
 const CrossStepDetailsLabel = ({ step }) => {

package/cjs/components/SwapButton/SwapButton.js

@@ -47,7 +47,7 @@ exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, dis
             }
             return variant !== 'refuel'
                 ? t(`button.reviewSwap`)
-                : t(`button.startSwap`);
+                : t(`button.startGasSwap`);
         }
         return t(`button.connectWallet`);
     };

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.23.0";
+export declare const version = "1.24.0";

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 = '1.23.0';
+exports.version = '1.24.0';

package/cjs/hooks/useInitializer.js

@@ -6,10 +6,14 @@ const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const version_1 = require("../config/version");
 const useTools_1 = require("./useTools");
+let checkedPackageUpdates = false;
 const useInitializer = () => {
     (0, useTools_1.useTools)();
     (0, react_1.useEffect)(() => {
-        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+        if (!checkedPackageUpdates) {
+            checkedPackageUpdates = true;
+            (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+        }
     }, []);
 };
 exports.useInitializer = useInitializer;

package/cjs/hooks/useTelemetry.js

@@ -5,10 +5,12 @@ exports.useTelemetry = void 0;
 const react_1 = require("react");
 const sentry_1 = require("../config/sentry");
 const version_1 = require("../config/version");
+let warningLogged = false;
 const useTelemetry = (disabled) => {
     (0, react_1.useEffect)(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV === 'development' && !warningLogged) {
+                warningLogged = true;
                 console.warn(`[${version_1.name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }

package/cjs/hooks/useTools.d.ts

@@ -1,9 +1,12 @@
 import type { Bridge, Exchange } from '@lifi/sdk';
+interface WidgetBridge extends Omit<Bridge, 'key'> {
+    key: string;
+}
 declare type FormattedTool<T, K extends keyof T> = Record<string, Pick<T, K>>;
 export declare const useTools: () => {
     tools: import("@lifi/sdk").ToolsResponse | undefined;
     formattedTools: {
-        bridges: FormattedTool<Bridge, "key" | "name" | "logoURI"> | undefined;
+        bridges: FormattedTool<WidgetBridge, "key" | "name" | "logoURI"> | undefined;
         exchanges: FormattedTool<Exchange, "key" | "name" | "logoURI"> | undefined;
     };
 };

package/cjs/hooks/useTools.js

@@ -8,7 +8,7 @@ const stores_1 = require("../stores");
 const useTools = () => {
     const lifi = (0, providers_1.useLiFi)();
     const { bridges, exchanges } = (0, providers_1.useWidgetConfig)();
-    const { data } = (0, react_query_1.useQuery)(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
+    const { data } = (0, react_query_1.useQuery)(['tools'], () => lifi.getTools(), {
         onSuccess(data) {
             const { initializeTools } = stores_1.useSettingsStore.getState();
             initializeTools('Bridges', data.bridges

package/cjs/i18n/uk.json

@@ -10,6 +10,7 @@
     "delete": "Видалити",
     "disconnectWallet": "Відключити гаманець",
     "done": "Готово",
+    "getGas": "Отримати газ",
     "hide": "Сховати",
     "lifiSwap": "LI.FI Swap",
     "light": "Світла",
@@ -21,6 +22,7 @@
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
+    "startGasSwap": "Почати своп газу",
     "startSwap": "Почати своп",
     "swap": "Своп",
     "tryAgain": "Спробувати ще раз"
@@ -32,6 +34,8 @@
   "header": {
     "activeSwaps": "Активні свопи",
     "from": "Своп з",
+    "gas": "Газ",
+    "gasSwap": "Своп газу",
     "routes": "Ви отримуєте",
     "selectChain": "Оберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
@@ -64,7 +68,7 @@
     "slippage": "Прослизання"
   },
   "swap": {
-    "crossStepDetails": "Міст з {{from}} до {{to}} через {{tool}}",
+    "crossStepDetails": "Брідж з {{from}} до {{to}} через {{tool}}",
     "error": {
       "message": {
         "slippageTooLarge": "Прослизання більше визначеного порогу. Будь ласка, оберіть новий маршрут, щоб отримати свіжу пропозицію.",
@@ -85,7 +89,7 @@
         "walletEnsAddressInvalid": "Адреса гаманця недійсна або мережа не підтримує ENS."
       }
     },
-    "estimatedTime": "{{value}}м",
+    "estimatedTime": "{{value}}х",
     "featuredTokens": "Рекомендовані токени",
     "from": "З",
     "fromAmount": "Ви платите",
@@ -139,14 +143,15 @@
     "selectChainAndToken": "Виберіть чейн і токен",
     "selectToken": "Токен",
     "sendToWallet": "Надіслати на інший гаманець",
-    "stepBridge": "Міст",
+    "stepBridge": "Брідж",
     "stepSwap": "Своп",
-    "stepSwapAndBridge": "Своп і міст",
+    "stepSwapAndBridge": "Своп та брідж",
     "success": {
       "message": {
         "swapSuccessful": "Зараз у гаманці {{walletAddress}} на чейні {{chainName}} є {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}}."
       },
       "title": {
+        "gasSwapSuccessful": "Своп газу успішний",
         "swapSuccessful": "Своп успішний"
       }
     },
@@ -154,10 +159,10 @@
     "swapStepDetails": "Своп на {{chain}} через {{tool}}",
     "swapping": "Обмін",
     "tags": {
-      "ALTERNATIVE": "АЛЬТЕРНАТИВНИЙ",
+      "ALTERNATIVE": "АЛЬТЕРНАТИВА",
       "CHEAPEST": "ДЕШЕВИЙ",
       "FASTEST": "ШВИДКИЙ",
-      "RECOMMENDED": "РЕКОМЕНДОВАНИЙ",
+      "RECOMMENDED": "РЕКОМЕНДУЄМО",
       "SAFEST": "БЕЗПЕЧНИЙ"
     },
     "to": "До",

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -9,7 +9,7 @@ const Card_1 = require("../../components/Card");
 const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
 const SwapHistoryItem = ({ route }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
@@ -18,12 +18,14 @@ const SwapHistoryItem = ({ route }) => {
         });
     };
     const startedAt = new Date((_b = (_a = route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    const fromToken = Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount });
+    const toToken = Object.assign(Object.assign({}, ((_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toToken) !== null && _e !== void 0 ? _e : route.toToken)), { amount: (_h = (_g = (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.execution) === null || _g === void 0 ? void 0 : _g.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ onClick: handleClick }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
+                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] }))] })));
 };
 exports.SwapHistoryItem = SwapHistoryItem;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -15,13 +15,14 @@ const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toToken, route.toAddress);
+    const toToken = Object.assign(Object.assign({}, ((_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toToken) !== null && _c !== void 0 ? _c : route.toToken)), { amount: (_h = (_f = (_e = (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.execution) === null || _e === void 0 ? void 0 : _e.toAmount) !== null && _f !== void 0 ? _f : (_g = route.steps.at(-1)) === null || _g === void 0 ? void 0 : _g.estimate.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(providers_1.SwapFormKey.FromAmount, '');
@@ -50,13 +51,13 @@ const StatusBottomSheet = ({ status, route, }) => {
             message = t('swap.success.message.swapSuccessful', {
                 amount: token === null || token === void 0 ? void 0 : token.amount,
                 tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                chainName: (_j = getChainById(route.toChainId)) === null || _j === void 0 ? void 0 : _j.name,
                 walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
             });
             break;
         case 'error': {
             const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-            const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+            const process = (_k = step === null || step === void 0 ? void 0 : step.execution) === null || _k === void 0 ? void 0 : _k.process.find((process) => process.status === 'FAILED');
             if (!step || !process) {
                 break;
             }
@@ -79,6 +80,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleSeeDetails, fullWidth: true }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/components/SelectChainAndToken.js

@@ -20,5 +20,5 @@ export const SelectChainAndToken = (props) => {
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromToken)) ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToToken));
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), _jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.25 : 1 }, { children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })), _jsx(SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), _jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })), _jsx(SelectTokenButton, { formType: "to", compact: isCompact })] })));
 };

package/components/StepActions/StepActions.js

@@ -40,13 +40,13 @@ export const StepActions = (_a) => {
                             : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
 };
 export const StepDetailsContent = ({ step }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslation();
     return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                 value: formatTokenAmount((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
-            }), ' ', step.action.toToken.symbol] })));
+            }), ' ', (_h = (_g = (_f = step.execution) === null || _f === void 0 ? void 0 : _f.toToken) === null || _g === void 0 ? void 0 : _g.symbol) !== null && _h !== void 0 ? _h : step.action.toToken.symbol] })));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;

package/components/SwapButton/SwapButton.js

@@ -44,7 +44,7 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, en
             }
             return variant !== 'refuel'
                 ? t(`button.reviewSwap`)
-                : t(`button.startSwap`);
+                : t(`button.startGasSwap`);
         }
         return t(`button.connectWallet`);
     };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.23.0";
+export declare const version = "1.24.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.23.0';
+export const version = '1.24.0';

package/hooks/useInitializer.js

@@ -3,9 +3,13 @@ import { checkPackageUpdates } from '@lifi/sdk';
 import { useEffect } from 'react';
 import { name, version } from '../config/version';
 import { useTools } from './useTools';
+let checkedPackageUpdates = false;
 export const useInitializer = () => {
     useTools();
     useEffect(() => {
-        checkPackageUpdates(name, version);
+        if (!checkedPackageUpdates) {
+            checkedPackageUpdates = true;
+            checkPackageUpdates(name, version);
+        }
     }, []);
 };

package/hooks/useTelemetry.js

@@ -2,10 +2,12 @@
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
 import { name } from '../config/version';
+let warningLogged = false;
 export const useTelemetry = (disabled) => {
     useEffect(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV === 'development' && !warningLogged) {
+                warningLogged = true;
                 console.warn(`[${name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }

package/hooks/useTools.d.ts

@@ -1,9 +1,12 @@
 import type { Bridge, Exchange } from '@lifi/sdk';
+interface WidgetBridge extends Omit<Bridge, 'key'> {
+    key: string;
+}
 declare type FormattedTool<T, K extends keyof T> = Record<string, Pick<T, K>>;
 export declare const useTools: () => {
     tools: import("@lifi/sdk").ToolsResponse | undefined;
     formattedTools: {
-        bridges: FormattedTool<Bridge, "key" | "name" | "logoURI"> | undefined;
+        bridges: FormattedTool<WidgetBridge, "key" | "name" | "logoURI"> | undefined;
         exchanges: FormattedTool<Exchange, "key" | "name" | "logoURI"> | undefined;
     };
 };

package/hooks/useTools.js

@@ -5,7 +5,7 @@ import { useSettingsStore } from '../stores';
 export const useTools = () => {
     const lifi = useLiFi();
     const { bridges, exchanges } = useWidgetConfig();
-    const { data } = useQuery(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
+    const { data } = useQuery(['tools'], () => lifi.getTools(), {
         onSuccess(data) {
             const { initializeTools } = useSettingsStore.getState();
             initializeTools('Bridges', data.bridges

package/i18n/uk.json

@@ -10,6 +10,7 @@
     "delete": "Видалити",
     "disconnectWallet": "Відключити гаманець",
     "done": "Готово",
+    "getGas": "Отримати газ",
     "hide": "Сховати",
     "lifiSwap": "LI.FI Swap",
     "light": "Світла",
@@ -21,6 +22,7 @@
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
+    "startGasSwap": "Почати своп газу",
     "startSwap": "Почати своп",
     "swap": "Своп",
     "tryAgain": "Спробувати ще раз"
@@ -32,6 +34,8 @@
   "header": {
     "activeSwaps": "Активні свопи",
     "from": "Своп з",
+    "gas": "Газ",
+    "gasSwap": "Своп газу",
     "routes": "Ви отримуєте",
     "selectChain": "Оберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
@@ -64,7 +68,7 @@
     "slippage": "Прослизання"
   },
   "swap": {
-    "crossStepDetails": "Міст з {{from}} до {{to}} через {{tool}}",
+    "crossStepDetails": "Брідж з {{from}} до {{to}} через {{tool}}",
     "error": {
       "message": {
         "slippageTooLarge": "Прослизання більше визначеного порогу. Будь ласка, оберіть новий маршрут, щоб отримати свіжу пропозицію.",
@@ -85,7 +89,7 @@
         "walletEnsAddressInvalid": "Адреса гаманця недійсна або мережа не підтримує ENS."
       }
     },
-    "estimatedTime": "{{value}}м",
+    "estimatedTime": "{{value}}х",
     "featuredTokens": "Рекомендовані токени",
     "from": "З",
     "fromAmount": "Ви платите",
@@ -139,14 +143,15 @@
     "selectChainAndToken": "Виберіть чейн і токен",
     "selectToken": "Токен",
     "sendToWallet": "Надіслати на інший гаманець",
-    "stepBridge": "Міст",
+    "stepBridge": "Брідж",
     "stepSwap": "Своп",
-    "stepSwapAndBridge": "Своп і міст",
+    "stepSwapAndBridge": "Своп та брідж",
     "success": {
       "message": {
         "swapSuccessful": "Зараз у гаманці {{walletAddress}} на чейні {{chainName}} є {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}}."
       },
       "title": {
+        "gasSwapSuccessful": "Своп газу успішний",
         "swapSuccessful": "Своп успішний"
       }
     },
@@ -154,10 +159,10 @@
     "swapStepDetails": "Своп на {{chain}} через {{tool}}",
     "swapping": "Обмін",
     "tags": {
-      "ALTERNATIVE": "АЛЬТЕРНАТИВНИЙ",
+      "ALTERNATIVE": "АЛЬТЕРНАТИВА",
       "CHEAPEST": "ДЕШЕВИЙ",
       "FASTEST": "ШВИДКИЙ",
-      "RECOMMENDED": "РЕКОМЕНДОВАНИЙ",
+      "RECOMMENDED": "РЕКОМЕНДУЄМО",
       "SAFEST": "БЕЗПЕЧНИЙ"
     },
     "to": "До",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "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",
@@ -43,14 +43,14 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.6.3",
-    "@lifi/wallet-management": "^1.1.12",
+    "@lifi/wallet-management": "^1.2.0",
     "@mui/icons-material": "^5.10.9",
     "@mui/lab": "^5.0.0-alpha.107",
     "@mui/material": "^5.10.13",
-    "@sentry/integrations": "^7.18.0",
-    "@sentry/react": "^7.18.0",
-    "@sentry/tracing": "^7.18.0",
-    "@tanstack/react-query": "^4.14.5",
+    "@sentry/integrations": "^7.19.0",
+    "@sentry/react": "^7.19.0",
+    "@sentry/tracing": "^7.19.0",
+    "@tanstack/react-query": "^4.14.6",
     "@tanstack/react-virtual": "^3.0.0-beta.22",
     "big.js": "^6.2.1",
     "i18next": "^22.0.4",
@@ -60,7 +60,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.39.1",
+    "react-hook-form": "^7.39.3",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",

package/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -6,7 +6,7 @@ import { Card } from '../../components/Card';
 import { Token, TokenDivider } from '../../components/Token';
 import { navigationRoutes } from '../../utils';
 export const SwapHistoryItem = ({ route }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { i18n } = useTranslation();
     const navigate = useNavigate();
     const handleClick = () => {
@@ -15,11 +15,13 @@ export const SwapHistoryItem = ({ route }) => {
         });
     };
     const startedAt = new Date((_b = (_a = route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    const fromToken = Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount });
+    const toToken = Object.assign(Object.assign({}, ((_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toToken) !== null && _e !== void 0 ? _e : route.toToken)), { amount: (_h = (_g = (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.execution) === null || _g === void 0 ? void 0 : _g.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
     return (_jsxs(Card, Object.assign({ onClick: handleClick }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pt: 1.75, px: 2 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
+                        }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: fromToken, px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] }))] })));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -12,13 +12,14 @@ import { SwapFormKey } from '../../providers';
 import { navigationRoutes, shortenWalletAddress } from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { t } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
     const { setValue } = useFormContext();
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toToken, route.toAddress);
+    const toToken = Object.assign(Object.assign({}, ((_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toToken) !== null && _c !== void 0 ? _c : route.toToken)), { amount: (_h = (_f = (_e = (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.execution) === null || _e === void 0 ? void 0 : _e.toAmount) !== null && _f !== void 0 ? _f : (_g = route.steps.at(-1)) === null || _g === void 0 ? void 0 : _g.estimate.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(SwapFormKey.FromAmount, '');
@@ -47,13 +48,13 @@ export const StatusBottomSheet = ({ status, route, }) => {
             message = t('swap.success.message.swapSuccessful', {
                 amount: token === null || token === void 0 ? void 0 : token.amount,
                 tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                chainName: (_j = getChainById(route.toChainId)) === null || _j === void 0 ? void 0 : _j.name,
                 walletAddress: shortenWalletAddress(route.toAddress),
             });
             break;
         case 'error': {
             const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-            const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+            const process = (_k = step === null || step === void 0 ? void 0 : step.execution) === null || _k === void 0 ? void 0 : _k.process.find((process) => process.status === 'FAILED');
             if (!step || !process) {
                 break;
             }
@@ -76,5 +77,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1, disableDescription: true })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", onClick: handleSeeDetails, fullWidth: true }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };