@lifi/widget 1.15.0 → 1.16.1

package/hooks/useChains.d.ts

@@ -1,101 +1,5 @@
 export declare const useChains: () => {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: true;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: true;
-    status: "success";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: true;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: true;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "loading";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+    isLoading: boolean;
 };

package/hooks/useChains.js

@@ -7,27 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useLiFi, useWidgetConfig } from '../providers';
+import { useSetChainOrder } from '../stores/chains';
 export const useChains = () => {
     const { disabledChains } = useWidgetConfig();
-    const _a = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield LiFi.getChains();
-        return chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-    })), { data } = _a, other = __rest(_a, ["data"]);
+    const lifi = useLiFi();
+    const [, initializeChains] = useSetChainOrder();
+    const { data, isLoading } = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
+        const chains = yield lifi.getChains();
+        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
+        initializeChains(filteredChains.map((chain) => chain.id));
+        return filteredChains;
+    }));
     const getChainById = useCallback((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
         // if (!chain) {
@@ -35,5 +28,5 @@ export const useChains = () => {
         // }
         return chain;
     }, [data]);
-    return Object.assign({ chains: data, getChainById }, other);
+    return { chains: data, getChainById, isLoading };
 };

package/hooks/useFeaturedTokens.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
     const { featuredTokens } = useWidgetConfig();
     return useMemo(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);

package/hooks/useGasSufficiency.js

@@ -2,8 +2,7 @@ import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
+import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
     const { account } = useWallet();

package/hooks/useInitializer.js

@@ -1,5 +1,11 @@
 /* eslint-disable no-underscore-dangle */
+import { checkPackageUpdates } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { name, version } from '../config/version';
 import { useTools } from './useTools';
 export const useInitializer = () => {
     useTools();
+    useEffect(() => {
+        checkPackageUpdates(name, version);
+    }, []);
 };

package/{components/Step/utils.d.ts → hooks/useProcessMessage.d.ts}

@@ -1,5 +1,9 @@
 import type { EVMChain, Process, Step } from '@lifi/sdk';
 import type { TFunction } from 'react-i18next';
+export declare const useProcessMessage: (step?: Step, process?: Process) => {
+    title?: string | undefined;
+    message?: string | undefined;
+};
 export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;
     message?: string;

package/{pages/SwapPage/utils.js → hooks/useProcessMessage.js}

@@ -1,9 +1,14 @@
-import { LifiErrorCode, MetaMaskProviderErrorCode } from '@lifi/sdk';
-import { formatTokenAmount } from '../../utils';
-const formatProcessMessage = (initialMessage, args = {}) => {
-    return Object.keys(args).reduce((message, key) => {
-        return message.replace(`{${key}}`, args[key]);
-    }, initialMessage);
+import { LifiErrorCode } from '@lifi/sdk';
+import { useTranslation } from 'react-i18next';
+import { formatTokenAmount } from '../utils';
+import { useChains } from './useChains';
+export const useProcessMessage = (step, process) => {
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    if (!step || !process) {
+        return {};
+    }
+    return getProcessMessage(t, getChainById, step, process);
 };
 const processMessages = {
     TOKEN_ALLOWANCE: {
@@ -12,7 +17,7 @@ const processMessages = {
         DONE: (t) => t(`swap.process.tokenAllowance.done`),
     },
     SWITCH_CHAIN: {
-        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        ACTION_REQUIRED: (t) => t(`swap.process.switchChain.actionRequired`),
         DONE: (t) => t(`swap.process.switchChain.done`),
     },
     SWAP: {
@@ -67,9 +72,9 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.slippageTooLarge`);
                 message = t(`swap.error.message.slippageTooLarge`);
                 break;
-            case MetaMaskProviderErrorCode.userRejectedRequest:
-                title = t(`swap.error.title.userRejectedSignatureRequest`);
-                message = t(`swap.error.message.signatureRequired`, {
+            case LifiErrorCode.TransactionRejected:
+                title = t(`swap.error.title.transactionRejected`);
+                message = t(`swap.error.message.transactionRejected`, {
                     amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',

package/hooks/useRouteExecution.d.ts

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-export declare const useRouteExecution: (routeId: string) => {
+export declare const useRouteExecution: (routeId: string, executeInBackground?: boolean) => {
     executeRoute: () => void;
     restartRoute: () => void;
     deleteRoute: () => void;

package/hooks/useRouteExecution.js

@@ -10,19 +10,28 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
-import { useRouteStore } from '../stores';
+import { useLiFi, useWallet } from '../providers';
+import { isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
+import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
-export const useRouteExecution = (routeId) => {
+import { useWidgetEvents } from './useWidgetEvents';
+export const useRouteExecution = (routeId, executeInBackground) => {
+    const lifi = useLiFi();
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
+    const emitter = useWidgetEvents();
     const routeExecution = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
         const clonedUpdatedRoute = deepClone(updatedRoute);
         console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        if (isRouteCompleted(clonedUpdatedRoute)) {
+            emitter.emit(WidgetEvent.SwapCompleted);
+        }
+        if (isRouteFailed(clonedUpdatedRoute)) {
+            emitter.emit(WidgetEvent.SwapFailed);
+        }
     };
     const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
@@ -44,20 +53,16 @@ export const useRouteExecution = (routeId) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.executeRoute(account.signer, routeExecution.route, {
+        return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Execution started.', routeId);
-        },
-        onError: () => {
-            console.warn('Execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Executed successfully.', routeId);
+            emitter.emit(WidgetEvent.SwapStarted);
         },
     });
     const resumeRouteMutation = useMutation((resumedRoute) => {
@@ -67,30 +72,25 @@ export const useRouteExecution = (routeId) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
+        return lifi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Resumed to execution.', routeId);
         },
-        onError: () => {
-            console.warn('Resumed execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Resumed execution successful.', route);
-        },
     });
     const executeRoute = useCallback(() => {
         executeRouteMutation.mutateAsync(undefined, {
             onError: () => {
-                console.warn('Real execution failed!', routeId);
+                console.warn('Execution failed!', routeId);
                 // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
-                console.log('Real execution successfully!', route);
+                console.log('Executed successfully!', route);
                 // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
             },
         });
@@ -98,10 +98,10 @@ export const useRouteExecution = (routeId) => {
     const resumeRoute = useCallback((route) => {
         resumeRouteMutation.mutateAsync(route, {
             onError: () => {
-                console.warn('Real resumed execution failed.', routeId);
+                console.warn('Resumed execution failed.', routeId);
             },
             onSuccess: (route) => {
-                console.log('Real resumed execution successful.', route);
+                console.log('Resumed execution successful.', route);
             },
         });
     }, [resumeRouteMutation, routeId]);
@@ -117,7 +117,7 @@ export const useRouteExecution = (routeId) => {
     // Resume route execution after page reload
     useEffect(() => {
         // Check if route is eligible for automatic resuming
-        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+        if (isRouteActive(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
             account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
@@ -129,14 +129,14 @@ export const useRouteExecution = (routeId) => {
         return () => {
             var _a;
             const route = (_a = useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
-            if (!route || !isActiveRoute(route)) {
+            if (!route || !isRouteActive(route)) {
                 return;
             }
-            LiFi.moveExecutionToBackground(route);
+            lifi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
-    }, [routeId]);
+    }, [lifi, routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,
@@ -145,12 +145,3 @@ export const useRouteExecution = (routeId) => {
         status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
     };
 };
-const isActiveRoute = (route) => {
-    if (!route) {
-        return false;
-    }
-    const allDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-    const alreadyStarted = route.steps.some((step) => step.execution);
-    return !allDone && !isFailed && alreadyStarted;
-};

package/hooks/useSwapRoutes.js

@@ -12,13 +12,12 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useToken } from '.';
-import { LiFi } from '../config/lifi';
-import { SwapFormKey } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
+import { SwapFormKey, useLiFi, useWallet } from '../providers';
 import { useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
+    const lifi = useLiFi();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
@@ -75,7 +74,7 @@ export const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        return LiFi.getRoutes({
+        return lifi.getRoutes({
             fromChainId,
             fromAmount: Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
             fromTokenAddress,

package/hooks/useTokenBalances.js

@@ -10,14 +10,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 /* eslint-disable consistent-return */
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
+import { useLiFi, useWallet } from '../providers';
 import { formatTokenAmount } from '../utils';
 import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 const defaultRefetchInterval = 60000;
 const minRefetchInterval = 1000;
 export const useTokenBalances = (selectedChainId) => {
+    const lifi = useLiFi();
     const { account } = useWallet();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
@@ -27,7 +27,7 @@ export const useTokenBalances = (selectedChainId) => {
         if (!accountAddress || !tokens) {
             return;
         }
-        const tokenBalances = yield LiFi.getTokenBalances(accountAddress, tokens);
+        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
             // TODO: fix and remove backplane

package/hooks/useTokenSearch.js

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 export const useTokenSearch = (token, chainId, enabled) => {
+    const lifi = useLiFi();
     const queryClient = useQueryClient();
     const { data, isLoading, isFetching, isFetched } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
-        const data = yield LiFi.getToken(chainId, token, {
+        const data = yield lifi.getToken(chainId, token, {
             signal,
         });
         if (data) {

package/hooks/useTokens.js

@@ -8,13 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery } from '@tanstack/react-query';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
+    const lifi = useLiFi();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId, featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
-        const data = yield LiFi.getTokens({ chains: [selectedChainId] });
+        const data = yield lifi.getTokens({ chains: [selectedChainId] });
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         return [
             ...((_a = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {

package/hooks/useTools.js

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 import { useSettingsStore } from '../stores';
 export const useTools = () => {
+    const lifi = useLiFi();
     const initializeTools = useSettingsStore((state) => state.initializeTools);
-    const { data } = useQuery(['tools'], ({ signal }) => LiFi.getTools(undefined, { signal }), {
+    const { data } = useQuery(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
         onSuccess(data) {
             initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
             initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));

package/hooks/useWidgetEvents.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+export declare const useWidgetEvents: () => EventEmitter;

package/hooks/useWidgetEvents.js

@@ -0,0 +1,6 @@
+import { EventEmitter } from 'events';
+import create from 'zustand';
+const emitterStore = create()(() => new EventEmitter());
+export const useWidgetEvents = () => {
+    return emitterStore();
+};

package/i18n/en/translation.json

@@ -6,10 +6,12 @@
     "swap": "Swap",
     "from": "Swap from",
     "to": "Swap to",
+    "selectChain": "Select chain",
     "settings": "Settings",
     "routes": "You get",
     "swapHistory": "Swap history",
-    "swapDetails": "Swap details"
+    "swapDetails": "Swap details",
+    "activeSwaps": "Active swaps"
   },
   "button": {
     "connectWallet": "Connect wallet",
@@ -31,6 +33,7 @@
     "delete": "Delete",
     "hide": "Hide",
     "max": "max",
+    "showAll": "Show all",
     "contactSupport": "Contact support",
     "lifiSwap": "LI.FI Swap"
   },
@@ -53,7 +56,6 @@
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
     "inProgress": "in progress",
-    "activeTransfers": "Active transfers",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
@@ -63,7 +65,7 @@
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount}} {{tokenSymbol}} on {{chainName}}",
-    "routeId": "Route ID",
+    "supportId": "Support ID",
     "sendToWallet": "Send to a different wallet",
     "walletAddressOrEns": "Wallet address or ENS name",
     "tags": {
@@ -84,11 +86,13 @@
     "info": {
       "title": {
         "routeNotFound": "No routes available",
-        "emptySwapHistory": "No recent swaps"
+        "emptySwapHistory": "No recent swaps",
+        "emptyActiveSwaps": "No active swaps"
       },
       "message": {
         "routeNotFound": "Try another token combination.",
-        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data."
+        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data.",
+        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history."
       }
     },
     "warning": {
@@ -105,18 +109,19 @@
     },
     "error": {
       "title": {
+        "failed": "Swap failed.",
         "chainSwitch": "Chain switch required.",
         "transactionFailed": "Transaction has failed.",
         "transactionUnderpriced": "Transaction is underpriced.",
         "transactionUnprepared": "Unable to prepare transaction.",
+        "transactionRejected": "Signature required.",
         "unknown": "Something went wrong.",
-        "userRejectedSignatureRequest": "Signature required.",
         "slippageTooLarge": "Slippage too large.",
         "walletAddressInvalid": "Wallet address is invalid.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       },
       "message": {
-        "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionRejected": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
         "transactionFailed": "Please check the block explorer for more information.",
         "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}}).",
         "slippageTooLarge": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote."
@@ -129,7 +134,7 @@
         "done": "Token allowance approved."
       },
       "switchChain": {
-        "pending": "Chain switch required.",
+        "actionRequired": "Chain switch required.",
         "done": "Chain switched successfully."
       },
       "swap": {