@lifi/widget 3.0.0-alpha.23 → 3.0.0-alpha.25

package/hooks/index.ts

@@ -1,34 +1,34 @@
-export * from './useAccount';
-export * from './useAddressValidation';
-export * from './useAvailableChains';
-export * from './useChain';
-export * from './useChains';
-export * from './useContentHeight';
-export * from './useDebouncedWatch';
-export * from './useDefaultElementId';
-export * from './useExpandableVariant';
-export * from './useFromTokenSufficiency';
-export * from './useGasRecommendation';
-export * from './useGasRefuel';
-export * from './useGasSufficiency';
-export * from './useInitializer';
-export * from './useLanguages';
-export * from './useNavigateBack';
-export * from './useProcessMessage';
-export * from './useRouteExecution';
-export * from './useRoutes';
-export * from './useScrollableContainer';
-export * from './useSettingMonitor';
-export * from './useSwapOnly';
-export * from './useToAddressRequirements';
-export * from './useToAddressReset';
-export * from './useToken';
-export * from './useTokenAddressBalance';
-export * from './useTokenBalance';
-export * from './useTokenBalances';
-export * from './useTokenSearch';
-export * from './useTokens';
-export * from './useTools';
-export * from './useTransactionDetails';
-export * from './useTransactionHistory';
-export * from './useWidgetEvents';
+export * from './useAccount.js';
+export * from './useAddressValidation.js';
+export * from './useAvailableChains.js';
+export * from './useChain.js';
+export * from './useChains.js';
+export * from './useContentHeight.js';
+export * from './useDebouncedWatch.js';
+export * from './useDefaultElementId.js';
+export * from './useExpandableVariant.js';
+export * from './useFromTokenSufficiency.js';
+export * from './useGasRecommendation.js';
+export * from './useGasRefuel.js';
+export * from './useGasSufficiency.js';
+export * from './useInitializer.js';
+export * from './useLanguages.js';
+export * from './useNavigateBack.js';
+export * from './useProcessMessage.js';
+export * from './useRouteExecution.js';
+export * from './useRoutes.js';
+export * from './useScrollableContainer.js';
+export * from './useSettingMonitor.js';
+export * from './useSwapOnly.js';
+export * from './useToAddressRequirements.js';
+export * from './useToAddressReset.js';
+export * from './useToken.js';
+export * from './useTokenAddressBalance.js';
+export * from './useTokenBalance.js';
+export * from './useTokenBalances.js';
+export * from './useTokenSearch.js';
+export * from './useTokens.js';
+export * from './useTools.js';
+export * from './useTransactionDetails.js';
+export * from './useTransactionHistory.js';
+export * from './useWidgetEvents.js';

package/hooks/useAddressValidation.ts

@@ -4,7 +4,7 @@ import { getEnsAddress } from '@wagmi/core';
 import { useTranslation } from 'react-i18next';
 import { normalize } from 'viem/ens';
 import { useConfig } from 'wagmi';
-import { getChainTypeFromAddress } from '../utils';
+import { getChainTypeFromAddress } from '../utils/chainType.js';
 
 type AddressType = 'address' | 'ENS';
 

package/hooks/useAvailableChains.ts

@@ -2,8 +2,9 @@ import type { ExtendedChain } from '@lifi/sdk';
 import { ChainType, config, getChains } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useHasExternalWalletProvider, useWidgetConfig } from '../providers';
-import { isItemAllowed } from '../utils';
+import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { isItemAllowed } from '../utils/item.js';
 
 const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
 

package/hooks/useChain.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useAvailableChains } from './useAvailableChains';
+import { useAvailableChains } from './useAvailableChains.js';
 
 export const useChain = (chainId?: number) => {
   const { isLoading, getChainById } = useAvailableChains();

package/hooks/useChains.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { useWidgetConfig } from '../providers';
-import type { FormType } from '../stores';
-import { isItemAllowed } from '../utils';
-import { useAvailableChains } from './useAvailableChains';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { FormType } from '../stores/form/types.js';
+import { isItemAllowed } from '../utils/item.js';
+import { useAvailableChains } from './useAvailableChains.js';
 
 export const useChains = (type?: FormType) => {
   const { chains } = useWidgetConfig();

package/hooks/useContentHeight.ts

@@ -1,8 +1,8 @@
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
-import { ElementId, createElementId } from '../utils';
-import { useDefaultElementId } from './useDefaultElementId';
-import { getScrollableContainer } from './useScrollableContainer';
+import { ElementId, createElementId } from '../utils/elements.js';
+import { useDefaultElementId } from './useDefaultElementId.js';
+import { getScrollableContainer } from './useScrollableContainer.js';
 
 const getContentHeight = (elementId: string) => {
   const containerElement = document.getElementById(

package/hooks/useDebouncedWatch.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import type { FormFieldNames } from '../stores';
-import { useFieldValues } from '../stores';
+import type { FormFieldNames } from '../stores/form/types.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
 
 export const useDebouncedWatch = <T extends FormFieldNames[]>(
   delay: number,

package/hooks/useDefaultElementId.ts

@@ -1,4 +1,4 @@
-import { useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 export const useDefaultElementId = () => {
   const { elementId } = useWidgetConfig();

package/hooks/useExpandableVariant.ts

@@ -1,6 +1,6 @@
 import type { Theme } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useWidgetConfig } from '../providers';
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 const defaultExpandableWidth = 852;
 

package/hooks/useFromTokenSufficiency.ts

@@ -1,10 +1,11 @@
 import type { RouteExtended } from '@lifi/sdk';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { parseUnits } from 'viem';
-import { isRouteDone, useFieldValues } from '../stores';
-import { useAccount } from './useAccount';
-import { useTokenAddressBalance } from './useTokenAddressBalance';
-import { getTokenBalancesWithRetry } from './useTokenBalance';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { isRouteDone } from '../stores/routes/utils.js';
+import { useAccount } from './useAccount.js';
+import { useTokenAddressBalance } from './useTokenAddressBalance.js';
+import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
 const refetchInterval = 30_000;
 

package/hooks/useGasRecommendation.ts

@@ -1,6 +1,6 @@
 import { getGasRecommendation, type ChainId } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useAvailableChains } from './useAvailableChains';
+import { useAvailableChains } from './useAvailableChains.js';
 
 const refetchInterval = 60_000;
 

package/hooks/useGasRefuel.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { useAvailableChains } from '.';
-import { useFieldValues } from '../stores';
-import { useGasRecommendation } from './useGasRecommendation';
-import { useTokenBalance } from './useTokenBalance';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { useAvailableChains } from './useAvailableChains.js';
+import { useGasRecommendation } from './useGasRecommendation.js';
+import { useTokenBalance } from './useTokenBalance.js';
 
 export const useGasRefuel = () => {
   const { getChainById } = useAvailableChains();

package/hooks/useGasSufficiency.ts

@@ -1,9 +1,9 @@
 import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import type { Connector } from 'wagmi';
-import { useAccount } from './useAccount';
-import { useAvailableChains } from './useAvailableChains';
-import { getTokenBalancesWithRetry } from './useTokenBalance';
+import { useAccount } from './useAccount.js';
+import { useAvailableChains } from './useAvailableChains.js';
+import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
 export interface GasSufficiency {
   gasAmount: bigint;

package/hooks/useInitializer.ts

@@ -1,7 +1,7 @@
 import { checkPackageUpdates } from '@lifi/sdk';
 import { useEffect } from 'react';
-import { name, version } from '../config/version';
-import { useTools } from './useTools';
+import { name, version } from '../config/version.js';
+import { useTools } from './useTools.js';
 
 let checkedPackageUpdates = false;
 

package/hooks/useLanguages.ts

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../providers';
-import { useSettings, useSettingsStore } from '../stores';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useSettings } from '../stores/settings/useSettings.js';
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
 export const useLanguages = () => {
   const { t, i18n } = useTranslation();

package/hooks/useProcessMessage.ts

@@ -10,10 +10,10 @@ import type {
 import { LiFiErrorCode } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../providers';
-import type { WidgetSubvariant } from '../types';
-import { formatTokenAmount } from '../utils';
-import { useAvailableChains } from './useAvailableChains';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { WidgetSubvariant } from '../types/widget.js';
+import { formatTokenAmount } from '../utils/format.js';
+import { useAvailableChains } from './useAvailableChains.js';
 
 export const useProcessMessage = (step?: LiFiStep, process?: Process) => {
   const { subvariant } = useWidgetConfig();

package/hooks/useRouteExecution.ts

@@ -4,17 +4,19 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
+import {
+  useRouteExecutionStore,
+  useRouteExecutionStoreContext,
+} from '../stores/routes/RouteExecutionStore.js';
 import {
   getUpdatedProcess,
   isRouteActive,
   isRouteDone,
   isRouteFailed,
-  useRouteExecutionStore,
-  useRouteExecutionStoreContext,
-} from '../stores';
-import { WidgetEvent } from '../types/events';
-import { useAccount } from './useAccount';
-import { useWidgetEvents } from './useWidgetEvents';
+} from '../stores/routes/utils.js';
+import { WidgetEvent } from '../types/events.js';
+import { useAccount } from './useAccount.js';
+import { useWidgetEvents } from './useWidgetEvents.js';
 
 interface RouteExecutionProps {
   routeId: string;

package/hooks/useRoutes.ts

@@ -3,12 +3,17 @@ import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { parseUnits } from 'viem';
-import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
-import { useWidgetConfig } from '../providers';
-import { defaultSlippage, useFieldValues, useSettings } from '../stores';
-import { getChainTypeFromAddress } from '../utils';
-import { useAccount } from './useAccount';
-import { useSwapOnly } from './useSwapOnly';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { useSettings } from '../stores/settings/useSettings.js';
+import { defaultSlippage } from '../stores/settings/useSettingsStore.js';
+import { getChainTypeFromAddress } from '../utils/chainType.js';
+import { useAccount } from './useAccount.js';
+import { useChain } from './useChain.js';
+import { useDebouncedWatch } from './useDebouncedWatch.js';
+import { useGasRefuel } from './useGasRefuel.js';
+import { useSwapOnly } from './useSwapOnly.js';
+import { useToken } from './useToken.js';
 
 const refetchTime = 60_000;
 

package/hooks/useScrollableContainer.ts

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
-import { createElementId, ElementId } from '../utils';
-import { useDefaultElementId } from './useDefaultElementId';
+import { ElementId, createElementId } from '../utils/elements.js';
+import { useDefaultElementId } from './useDefaultElementId.js';
 
 export const getScrollableContainer = (elementId: string) =>
   document.getElementById(

package/hooks/useSettingMonitor.ts

@@ -1,11 +1,11 @@
 import { shallow } from 'zustand/shallow';
-import { useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import {
   defaultConfigurableSettings,
   setDefaultSettings,
   useSettingsStore,
-} from '../stores';
-import { useTools } from './useTools';
+} from '../stores/settings/useSettingsStore.js';
+import { useTools } from './useTools.js';
 
 export const useSettingMonitor = () => {
   const [

package/hooks/useSwapOnly.ts

@@ -1,4 +1,4 @@
-import { useSplitSubvariantStore } from '../stores';
+import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js';
 
 export const useSwapOnly = () => {
   const state = useSplitSubvariantStore((state) => state.state);

package/hooks/useToAddressRequirements.ts

@@ -1,7 +1,7 @@
-import { useChain } from '../hooks';
-import { useWidgetConfig } from '../providers';
-import { useFieldValues } from '../stores';
-import { RequiredUI } from '../types';
+import { useChain } from '../hooks/useChain.js';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { RequiredUI } from '../types/widget.js';
 
 export const useToAddressRequirements = () => {
   const { requiredUI } = useWidgetConfig();

package/hooks/useToAddressReset.ts

@@ -1,7 +1,9 @@
 import type { ExtendedChain } from '@lifi/sdk';
-import { useWidgetConfig } from '../providers';
-import { useBookmarkActions, useBookmarks, useFieldActions } from '../stores';
-import { RequiredUI } from '../types';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js';
+import { useBookmarks } from '../stores/bookmarks/useBookmarks.js';
+import { useFieldActions } from '../stores/form/useFieldActions.js';
+import { RequiredUI } from '../types/widget.js';
 
 export const useToAddressReset = () => {
   const { requiredUI } = useWidgetConfig();

package/hooks/useToken.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useTokens } from './useTokens';
-import { useTokenSearch } from './useTokenSearch';
+import { useTokens } from './useTokens.js';
+import { useTokenSearch } from './useTokenSearch.js';
 
 export const useToken = (chainId?: number, tokenAddress?: string) => {
   const { tokens, isLoading } = useTokens(chainId);

package/hooks/useTokenAddressBalance.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import type { TokenAmount } from '../types';
-import { useTokenBalances } from './useTokenBalances';
+import type { TokenAmount } from '../types/token.js';
+import { useTokenBalances } from './useTokenBalances.js';
 
 export const useTokenAddressBalance = (
   chainId?: number,

package/hooks/useTokenBalance.ts

@@ -2,7 +2,7 @@ import type { ExtendedChain } from '@lifi/sdk';
 import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useAccount } from './useAccount';
+import { useAccount } from './useAccount.js';
 
 const defaultRefetchInterval = 30_000;
 

package/hooks/useTokenBalances.ts

@@ -1,9 +1,9 @@
 import { getTokenBalances } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import { formatUnits } from 'viem';
-import type { TokenAmount } from '../types';
-import { useAccount } from './useAccount';
-import { useTokens } from './useTokens';
+import type { TokenAmount } from '../types/token.js';
+import { useAccount } from './useAccount.js';
+import { useTokens } from './useTokens.js';
 
 const defaultRefetchInterval = 32_000;
 

package/hooks/useTokenSearch.ts

@@ -1,6 +1,6 @@
 import { getToken, type ChainId, type TokensResponse } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { TokenAmount } from '../types';
+import type { TokenAmount } from '../types/token.js';
 
 export const useTokenSearch = (
   chainId?: number,

package/hooks/useTokens.ts

@@ -1,9 +1,9 @@
 import { ChainType, getTokens } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { useWidgetConfig } from '../providers';
-import type { TokenAmount } from '../types';
-import { useChains } from './useChains';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { TokenAmount } from '../types/token.js';
+import { useChains } from './useChains.js';
 
 export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens } = useWidgetConfig();

package/hooks/useTools.ts

@@ -1,8 +1,8 @@
 import { getTools, type ToolsResponse } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useWidgetConfig } from '../providers';
-import { useSettingsStore } from '../stores';
-import { isItemAllowed } from '../utils';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
+import { isItemAllowed } from '../utils/item.js';
 
 export const useTools = () => {
   const { bridges, exchanges } = useWidgetConfig();

package/hooks/useTransactionDetails.ts

@@ -5,7 +5,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useAccount } from './useAccount';
+import { useAccount } from './useAccount.js';
 
 export const useTransactionDetails = (transactionHash: string) => {
   const { account, accounts } = useAccount();

package/hooks/useTransactionHistory.ts

@@ -2,7 +2,7 @@ import type { FullStatusData, StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
 import type { QueryFunction } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
-import { useAccount } from './useAccount';
+import { useAccount } from './useAccount.js';
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount();

package/hooks/useWidgetEvents.ts

@@ -1,5 +1,7 @@
-import mitt from 'mitt';
-import type { WidgetEvents } from '../types';
+import _mitt from 'mitt';
+import type { WidgetEvents } from '../types/events.js';
+// https://github.com/developit/mitt/issues/191
+const mitt = _mitt as unknown as typeof _mitt.default;
 
 export const widgetEvents = mitt<WidgetEvents>();
 

package/icons/index.ts

@@ -1,2 +1,2 @@
-export * from './InsuraceLogo';
-export * from './lifi';
+export * from './InsuraceLogo.js';
+export * from './lifi.js';

package/index.ts

@@ -1,17 +1,15 @@
-export { useFieldActions, useFieldValues } from './stores';
-export { App as LiFiWidget } from './App';
-export type { WidgetDrawer } from './AppDrawer';
-export * from './components/NFT';
-export * from './config/version';
-export {
-  useAccount,
-  useAvailableChains,
-  useWidgetEvents,
-  widgetEvents,
-} from './hooks';
-export * from './stores/form/types';
-export { formatChain } from './providers/WalletProvider';
-export * from './types';
+export { App as LiFiWidget } from './App.js';
+export type { WidgetDrawer } from './AppDrawer.js';
+export * from './components/NFT/index.js';
+export * from './config/version.js';
+export { useAccount } from './hooks/useAccount.js';
+export { useAvailableChains } from './hooks/useAvailableChains.js';
+export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
+export { formatChain } from './providers/WalletProvider/utils.js';
+export * from './stores/form/types.js';
+export { useFieldActions } from './stores/form/useFieldActions.js';
+export { useFieldValues } from './stores/form/useFieldValues.js';
+export * from './types/index.js';
 
 // ClassNameGenerator.configure((componentName) =>
 //   componentName.replace('Mui', 'LiFi'),

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.23",
+  "version": "3.0.0-alpha.25",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
-  "main": "./_cjs/index.js",
-  "module": "./_esm/index.js",
+  "main": "./_esm/index.js",
   "types": "./_esm/index.d.ts",
   "sideEffects": false,
   "publishConfig": {
@@ -36,14 +35,14 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@lifi/sdk": "^3.0.0-alpha.54",
-    "@lifi/wallet-management": "^3.0.0-alpha.15",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/lab": "^5.0.0-alpha.163",
-    "@mui/material": "^5.15.7",
+    "@lifi/wallet-management": "^3.0.0-alpha.17",
+    "@mui/icons-material": "^5.15.8",
+    "@mui/lab": "^5.0.0-alpha.164",
+    "@mui/material": "^5.15.8",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
-    "@solana/web3.js": "^1.89.1",
+    "@solana/web3.js": "^1.90.0",
     "@tanstack/react-query": "^5.18.1",
     "@tanstack/react-virtual": "^3.0.4",
     "i18next": "^23.8.2",
@@ -51,13 +50,13 @@
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.3",
+    "react-i18next": "^14.0.5",
     "react-intersection-observer": "^9.7.0",
     "react-router-dom": "^6.22.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
     "viem": "^2.7.6",
-    "wagmi": "^2.5.5",
+    "wagmi": "^2.5.6",
     "zustand": "^4.5.0"
   },
   "peerDependencies": {
@@ -71,5 +70,12 @@
     "@types/react": {
       "optional": true
     }
+  },
+  "exports": {
+    ".": {
+      "types": "./_esm/index.d.ts",
+      "default": "./_esm/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -1,4 +1,4 @@
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import { SwapHoriz } from '@mui/icons-material';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +16,7 @@ export const ActiveTransactionsEmpty: React.FC = () => {
       }}
     >
       <Typography fontSize={48}>
-        <SwapHorizIcon fontSize="inherit" />
+        <SwapHoriz fontSize="inherit" />
       </Typography>
       <Typography fontSize={18} fontWeight={700}>
         {t('info.title.emptyActiveTransactions')}