@lifi/widget 3.7.0-beta.0 → 3.7.0-beta.10

package/hooks/useTransactionDetails.ts

@@ -1,75 +0,0 @@
-import type { FullStatusData } from '@lifi/sdk';
-import { getStatus, type StatusResponse } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
-import {
-  keepPreviousData,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
-
-export const useTransactionDetails = (transactionHash?: string) => {
-  const { account, accounts } = useAccount();
-  const queryClient = useQueryClient();
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['transaction-history', transactionHash],
-    queryFn: async ({ queryKey: [, transactionHash], signal }) => {
-      if (transactionHash) {
-        for (const account of accounts) {
-          const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
-            'transaction-history',
-            account.address,
-          ]);
-
-          const transaction = cachedHistory?.find(
-            (t) => t.sending.txHash === transactionHash,
-          );
-
-          if (transaction) {
-            return transaction;
-          }
-        }
-
-        const transaction = await getStatus(
-          {
-            txHash: transactionHash,
-          },
-          { signal },
-        );
-
-        const fromAddress = (transaction as FullStatusData)?.fromAddress;
-
-        if (fromAddress) {
-          queryClient.setQueryData<StatusResponse[]>(
-            ['transaction-history', fromAddress],
-            (data) => {
-              return [...data!, transaction!];
-            },
-          );
-        }
-
-        return transaction;
-      }
-    },
-    refetchInterval: 300_000,
-    enabled: account.isConnected && Boolean(transactionHash),
-    initialData: () => {
-      for (const account of accounts) {
-        const transaction = queryClient
-          .getQueryData<
-            StatusResponse[]
-          >(['transaction-history', account.address])
-          ?.find((t) => t.sending.txHash === transactionHash);
-        if (transaction) {
-          return transaction;
-        }
-      }
-    },
-    placeholderData: keepPreviousData,
-  });
-
-  return {
-    transaction: data,
-    isLoading,
-  };
-};

package/hooks/useTransactionHistory.ts

@@ -1,69 +0,0 @@
-import type { FullStatusData, StatusResponse } from '@lifi/sdk';
-import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
-import type { QueryFunction } from '@tanstack/react-query';
-import { useQueries } from '@tanstack/react-query';
-
-export const useTransactionHistory = () => {
-  const { accounts } = useAccount();
-
-  const { data, isLoading } = useQueries({
-    queries: accounts.map((account) => ({
-      queryKey: ['transaction-history', account.address],
-      queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
-        if (!accountAddress) {
-          return [];
-        }
-        const date = new Date();
-        date.setFullYear(date.getFullYear() - 10);
-
-        const response = await getTransactionHistory(
-          {
-            wallet: accountAddress,
-            fromTimestamp: Math.floor(date.getTime() / 1000),
-            toTimestamp: Math.floor(Date.now() / 1000),
-          },
-          { signal },
-        );
-
-        return response.transfers;
-      }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
-      refetchInterval: 300_000,
-      enabled: Boolean(account.address),
-    })),
-    combine: (results) => {
-      const uniqueTransactions = new Map();
-      results.forEach((result) => {
-        if (result.data) {
-          result.data.forEach((transaction) => {
-            if (
-              (transaction as FullStatusData)?.transactionId &&
-              (transaction as FullStatusData)?.receiving?.chainId &&
-              transaction?.sending.chainId
-            ) {
-              uniqueTransactions.set(
-                (transaction as FullStatusData).transactionId,
-                transaction,
-              );
-            }
-          });
-        }
-      });
-      const data = Array.from(uniqueTransactions.values()).sort((a, b) => {
-        return (
-          ((b?.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
-          ((a?.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
-        );
-      }) as StatusResponse[];
-      return {
-        data: data,
-        isLoading: results.some((result) => result.isLoading),
-      };
-    },
-  });
-
-  return {
-    data,
-    isLoading,
-  };
-};

package/hooks/useWideVariant.ts

@@ -1,13 +0,0 @@
-import type { Theme } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-
-const defaultExpandableWidth = 852;
-
-export const useWideVariant = () => {
-  const { variant, useRecommendedRoute } = useWidgetConfig();
-  const expandableAllowed = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.up(defaultExpandableWidth),
-  );
-  return variant === 'wide' && expandableAllowed && !useRecommendedRoute;
-};

package/hooks/useWidgetEvents.ts

@@ -1,10 +0,0 @@
-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>();
-
-export const useWidgetEvents = () => {
-  return widgetEvents;
-};

package/i18n/en.json

@@ -1,309 +0,0 @@
-{
-  "language": {
-    "name": "English",
-    "title": "Language"
-  },
-  "format": {
-    "currency": "{{value, currencyExt(currency: USD)}}",
-    "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": "{{value, percent(maximumFractionDigits: 2)}}"
-  },
-  "button": {
-    "auto": "Auto",
-    "bookmark": "Bookmark",
-    "bookmarks": "Bookmarks",
-    "bridge": "Bridge",
-    "bridgeReview": "Review bridge",
-    "buy": "Buy",
-    "cancel": "Cancel",
-    "checkoutReview": "Review purchase",
-    "close": "Close",
-    "confirm": "Confirm",
-    "connectAnotherWallet": "Connect another wallet",
-    "connectWallet": "Connect wallet",
-    "contactSupport": "Contact support",
-    "continue": "Continue",
-    "copyAddress": "Copy address",
-    "dark": "Dark",
-    "delete": "Delete",
-    "deposit": "Deposit",
-    "depositReview": "Review deposit",
-    "disconnect": "Disconnect",
-    "done": "Done",
-    "exchange": "Exchange",
-    "getGas": "Get gas",
-    "learnMore": "Learn more",
-    "light": "Light",
-    "max": "max",
-    "ok": "Ok",
-    "options": "Options",
-    "removeTransaction": "Remove transaction",
-    "reset": "Reset",
-    "resetSettings": "Reset settings",
-    "seeDetails": "See details",
-    "showAll": "Show all",
-    "startBridging": "Start bridging",
-    "startSwapping": "Start swapping",
-    "swap": "Swap",
-    "swapReview": "Review swap",
-    "tryAgain": "Try again",
-    "viewCoverage": "View coverage",
-    "viewOnExplorer": "View on explorer"
-  },
-  "header": {
-    "activeTransactions": "Active transactions",
-    "bookmarkedWallets": "Bookmarked wallets",
-    "bridge": "Bridge",
-    "checkout": "Checkout",
-    "checkoutDetails": "Checkout details",
-    "deposit": "Deposit",
-    "depositDetails": "Deposit details",
-    "exchange": "Exchange",
-    "from": "Exchange from",
-    "gas": "Gas",
-    "payWith": "Pay with",
-    "receive": "Receive",
-    "recentWallets": "Recent wallets",
-    "selectChain": "Select chain",
-    "selectWallet": "Select your wallet",
-    "send": "Send",
-    "sendToWallet": "Send to wallet",
-    "settings": "Settings",
-    "swap": "Swap",
-    "to": "Exchange to",
-    "transactionDetails": "Transaction details",
-    "transactionHistory": "Transaction history",
-    "walletConnected": "Wallet connected",
-    "youGet": "You get",
-    "youPay": "You pay"
-  },
-  "info": {
-    "message": {
-      "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the transaction.",
-      "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
-      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
-      "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "fundsToExchange": "Funds sent to an exchange may be lost",
-      "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
-      "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
-    },
-    "title": {
-      "autoRefuel": "Get {{chainName}} gas",
-      "emptyActiveTransactions": "No active transactions",
-      "emptyTransactionHistory": "No recent transactions",
-      "routeNotFound": "No routes available"
-    }
-  },
-  "success": {
-    "message": {
-      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{tokenSymbol}} token.",
-      "exchangeSuccessful": "There are now {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain.",
-      "checkoutSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
-    },
-    "title": {
-      "bridgePartiallySuccessful": "Bridge partially successful",
-      "bridgeSuccessful": "Bridge successful",
-      "depositSuccessful": "Deposit successful",
-      "checkoutSuccessful": "Purchase successful",
-      "refundIssued": "Refund issued",
-      "swapPartiallySuccessful": "Swap partially successful",
-      "swapSuccessful": "Swap successful"
-    }
-  },
-  "warning": {
-    "message": {
-      "deleteActiveTransactions": "Active transactions are only stored locally and can't be recovered if you delete them.",
-      "deleteTransactionHistory": "Transaction history is only stored locally and can't be recovered if you delete it.",
-      "highValueLoss": "The value of the received tokens is significantly lower than the exchanged tokens and transaction cost.",
-      "insufficientFunds": "You don't have enough funds to complete the transaction.",
-      "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
-      "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
-      "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
-      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running."
-    },
-    "title": {
-      "deleteActiveTransactions": "Delete all active transactions?",
-      "deleteTransaction": "Delete this transaction?",
-      "deleteTransactionHistory": "Delete transaction history?",
-      "highValueLoss": "High value loss",
-      "insufficientGas": "Insufficient gas",
-      "rateChanged": "Rate changed",
-      "resetSettings": "Reset settings?"
-    }
-  },
-  "error": {
-    "message": {
-      "allowanceRequired": "Transfer amount for {{tokenSymbol}} exceeds your current allowance. Please increase your allowance and try again.",
-      "insufficientFunds": "You don't have enough gas to cover the cost of the transaction.",
-      "remainInYourWallet": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
-      "signatureRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
-      "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new quote.",
-      "transactionCanceled": "Transaction was canceled.",
-      "transactionConflict": "Transaction couldn't be processed because it's conflicting with another pending transaction using the same funds. Please wait for the pending transaction to be confirmed or check your transaction history before trying again.",
-      "transactionExpired": "The block height has exceeded the maximum allowed limit or blockhash is no longer recent enough.",
-      "transactionFailed": "Please check the block explorer for more information.",
-      "transactionNotSent": "Transaction was not sent.",
-      "transactionSimulationFailed": "The transaction could not be executed in simulation.",
-      "unknown": "Please try again or contact support.",
-      "walletChangedDuringExecution": "The wallet address that requested the quote does not match the wallet address attempting to sign the transaction. Please ensure the same wallet address is used throughout the entire transaction execution."
-    },
-    "title": {
-      "allowanceRequired": "Insufficient allowance",
-      "balanceIsTooLow": "The balance is too low",
-      "bookmarkAlreadyExists": "Wallet is already bookmarked as {{name}}",
-      "bookmarkNameRequired": "Bookmark name is required",
-      "chainSwitch": "Chain switch required",
-      "exchangeRateUpdateCanceled": "Exchange rate update canceled",
-      "gasLimitIsTooLow": "The gas limit is too low",
-      "insufficientFunds": "Insufficient funds",
-      "signatureRejected": "Signature required",
-      "slippageNotMet": "Slippage conditions not met",
-      "transactionCanceled": "Transaction canceled",
-      "transactionConflict": "Transaction conflict",
-      "transactionExpired": "Transaction expired",
-      "transactionFailed": "Transaction failed",
-      "transactionSimulationFailed": "Transaction simulation failed",
-      "transactionUnderpriced": "Transaction is underpriced",
-      "transactionUnprepared": "Unable to prepare transaction",
-      "unknown": "Something went wrong",
-      "walletAddressInvalid": "Wallet address or domain name is invalid",
-      "walletAddressInvalid_chain": "Wallet address or domain name is invalid for selected destination chain {{chainName}}",
-      "walletAddressRequired": "Wallet address is required.",
-      "walletChainTypeInvalid": "Wallet address doesn't match the selected destination chain {{chainName}}",
-      "walletMismatch": "Wallet address mismatch"
-    }
-  },
-  "tooltip": {
-    "deselectAll": "Deselect all",
-    "estimatedTime": "Estimated time to complete the swap or bridge transaction, excluding chain switching and token approval.",
-    "feeCollection": "The fee is applied to selected token pairs and ensures the best experience with {{tool}}.",
-    "minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
-    "notFound": {
-      "text": "We couldn't find this page.",
-      "title": "404"
-    },
-    "numberOfSteps": "Each exchange step can contain 1-2 transactions that require a signature.",
-    "priceImpact": "The estimated value difference between the source and destination tokens.",
-    "progressToNextUpdate": "Quotes will update in {{value}} seconds. <0/> Click here to update now.",
-    "selectAll": "Select all",
-    "settingsModified": "Settings (modified)",
-    "slippage": "The maximum percentage difference between the expected price, and the actual price at which a transfer is executed. This value can be changed in settings."
-  },
-  "main": {
-    "allTokens": "All tokens",
-    "bridgeStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
-    "checkoutStepDetails": "Purchase via {{tool}}",
-    "currentAmount": "Current amount",
-    "depositStepDetails": "Deposit via {{tool}}",
-    "featuredTokens": "Featured tokens",
-    "fees": {
-      "defaultIntegrator": "Integrator fee",
-      "estimated": "estimated costs",
-      "integrator": "{{tool}} fee",
-      "network": "Network cost",
-      "paid": "paid costs",
-      "provider": "Provider fee"
-    },
-    "from": "From",
-    "inProgress": "in progress",
-    "maxSlippage": "Max. slippage",
-    "minReceived": "Min. received",
-    "myTokens": "My tokens",
-    "onChain": "on {{chainName}}",
-    "ownedBy": "Owned by",
-    "popularTokens": "Popular tokens",
-    "priceImpact": "Price impact",
-    "process": {
-      "bridge": {
-        "actionRequired": "Please sign the transaction",
-        "done": "Bridge transaction confirmed",
-        "pending": "Waiting for bridge transaction",
-        "started": "Preparing bridge transaction"
-      },
-      "checkout": {
-        "done": "Purchase completed"
-      },
-      "deposit": {
-        "done": "Deposit completed"
-      },
-      "receivingChain": {
-        "done": "Bridge completed",
-        "partial": "Bridge partially completed",
-        "pending": "Waiting for destination chain",
-        "refunded": "Bridge transaction refunded"
-      },
-      "swap": {
-        "actionRequired": "Please sign the transaction",
-        "done": "Swap completed",
-        "pending": "Waiting for swap transaction",
-        "started": "Preparing swap transaction"
-      },
-      "switchChain": {
-        "actionRequired": "Chain switch required",
-        "done": "Chain switched successfully"
-      },
-      "tokenAllowance": {
-        "done": "Token allowance approved",
-        "pending": "Waiting for token allowance",
-        "started": "Setting token allowance"
-      }
-    },
-    "quotedAmount": "Quoted amount",
-    "rateChange": "Rate change",
-    "receiving": "Receiving",
-    "refuelStepDetails": "Get gas via {{tool}}",
-    "selectChain": "Select chain",
-    "selectChainAndToken": "Select chain and token",
-    "selectToken": "Select token",
-    "sendToAddress": "Send to {{address}}",
-    "sendToWallet": "Send to a different wallet",
-    "sending": "Sending",
-    "sentToAddress": "Sent to {{address}}",
-    "stepBridge": "Bridge",
-    "stepBridgeAndBuy": "Bridge and buy",
-    "stepBridgeAndDeposit": "Bridge and deposit",
-    "stepDetails": "{{tool}} via LI.FI",
-    "stepSwap": "Swap",
-    "stepSwapAndBridge": "Swap and bridge",
-    "stepSwapAndBuy": "Swap and buy",
-    "stepSwapAndDeposit": "Swap and deposit",
-    "transferId": "Transfer ID",
-    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
-    "tags": {
-      "cheapest": "Best Return",
-      "fastest": "Fastest"
-    },
-    "to": "To",
-    "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
-    "tokenSearch": "Search by token name or address",
-    "valueLoss": "Value loss"
-  },
-  "settings": {
-    "theme": "Theme",
-    "enabledBridges": "Bridges",
-    "enabledExchanges": "Exchanges",
-    "gasPrice": {
-      "fast": "Fast",
-      "normal": "Normal",
-      "slow": "Slow",
-      "title": "Gas price"
-    },
-    "routePriority": "Route priority",
-    "slippage": "Max. slippage",
-    "custom": "Custom",
-    "resetSettings": "You're using custom settings that can affect the number or sorting of available routes."
-  },
-  "sendToWallet": {
-    "addBookmark": "Add bookmark",
-    "bookmarkWallet": "Bookmark wallet",
-    "confirmWalletAddress": "Confirm wallet address",
-    "connectedWallets": "Connected wallets",
-    "enterAddress_long": "Enter address or wallet domain",
-    "enterAddress_short": "Enter wallet address",
-    "enterName": "Enter name",
-    "noBookmarkedWallets": "No bookmarked wallets",
-    "noConnectedWallets": "No connected wallets",
-    "noRecentWallets": "No recent wallets"
-  }
-}

package/i18n/index.ts

@@ -1,17 +0,0 @@
-import bn from './bn.json' with { type: 'json' };
-import de from './de.json' with { type: 'json' };
-import en from './en.json' with { type: 'json' };
-import es from './es.json' with { type: 'json' };
-import fr from './fr.json' with { type: 'json' };
-import id from './id.json' with { type: 'json' };
-import it from './it.json' with { type: 'json' };
-import ja from './ja.json' with { type: 'json' };
-import ko from './ko.json' with { type: 'json' };
-import pt from './pt.json' with { type: 'json' };
-import th from './th.json' with { type: 'json' };
-import tr from './tr.json' with { type: 'json' };
-import uk from './uk.json' with { type: 'json' };
-import vi from './vi.json' with { type: 'json' };
-import zh from './zh.json' with { type: 'json' };
-
-export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };

package/icons/lifi.ts

@@ -1,2 +0,0 @@
-export const LiFiToolLogo =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3e %3ccircle cx='16' cy='16' r='16' fill='%23F5B5FF'/%3e %3cpath fill='black' d='m15.503 19.203-5.334 1.235a.468.468 0 0 0-.34.439v3.672c0 .308.243.503.55.438l7.443-1.722c.308-.065.437-.357.308-.634l-1.346-2.778c-.21-.439 0-.894.47-.991l4.864-1.17c.34-.081.632-.439.632-.796V13.5c0-.309-.243-.52-.551-.439l-7.02 1.674c-.438.097-.633.52-.438.926l1.232 2.551c.211.439 0 .877-.47.991'/%3e %3cpath fill='black' d='m11.985 10.023 1.394 2.86c.179.374 0 .764-.405.845l-2.578.601c-.324.081-.584.406-.584.731v3.07c0 .52.422.846.925.732l2.4-.552c.323-.065.583-.406.583-.732l.016-3.151c0-.44.357-.878.778-.975l7.863-1.885a.468.468 0 0 0 .34-.439V7.456c0-.309-.242-.52-.55-.439L12.293 9.39c-.308.065-.438.357-.308.633'/%3e %3c/svg%3e";

package/index.ts

@@ -1,23 +0,0 @@
-export * from '@lifi/types';
-export { App as LiFiWidget } from './App.js';
-export type { WidgetDrawer } from './AppDrawer.js';
-export * from './components/ContractComponent/ItemPrice.js';
-export * from './components/ContractComponent/NFT/NFT.js';
-export * from './components/ContractComponent/NFT/NFTBase.js';
-export * from './components/ContractComponent/NFT/types.js';
-export * from './components/Skeleton/WidgetSkeleton.js';
-export { defaultMaxHeight } from './config/constants.js';
-export * from './config/version.js';
-export { useAvailableChains } from './hooks/useAvailableChains.js';
-export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
-export * from './stores/form/types.js';
-export { useFieldActions } from './stores/form/useFieldActions.js';
-export { useFieldValues } from './stores/form/useFieldValues.js';
-export { azureLightTheme } from './themes/azureLight.js';
-export { jumperTheme } from './themes/jumper.js';
-export * from './themes/palettes.js';
-export { watermelonLightTheme } from './themes/watermelonLight.js';
-export { windows95Theme } from './themes/windows95.js';
-export * from './types/events.js';
-export type { TokenAmount } from './types/token.js';
-export * from './types/widget.js';

package/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -1,34 +0,0 @@
-import { SwapHoriz } from '@mui/icons-material';
-import { Container, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-export const ActiveTransactionsEmpty: React.FC = () => {
-  const { t } = useTranslation();
-  return (
-    <Container
-      sx={{
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingY: 12,
-      }}
-    >
-      <Typography fontSize={48}>
-        <SwapHoriz fontSize="inherit" />
-      </Typography>
-      <Typography fontSize={18} fontWeight={700}>
-        {t('info.title.emptyActiveTransactions')}
-      </Typography>
-      <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
-      >
-        {t('info.message.emptyActiveTransactions')}
-      </Typography>
-    </Container>
-  );
-};

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,95 +0,0 @@
-import { DeleteOutline } from '@mui/icons-material';
-import type { IconButtonProps } from '@mui/material';
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  IconButton,
-  List,
-  useTheme,
-} from '@mui/material';
-import { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ActiveTransactionItem } from '../../components/ActiveTransactions/ActiveTransactionItem.js';
-import { Dialog } from '../../components/Dialog.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
-import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
-import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js';
-
-const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => {
-  const theme = useTheme();
-
-  return (
-    <IconButton
-      size="medium"
-      edge={theme?.navigation?.edge ? 'end' : false}
-      onClick={onClick}
-    >
-      <DeleteOutline />
-    </IconButton>
-  );
-};
-
-export const ActiveTransactionsPage = () => {
-  const { t } = useTranslation();
-  const executingRoutes = useExecutingRoutesIds();
-  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
-  const [open, setOpen] = useState(false);
-
-  const toggleDialog = useCallback(() => {
-    setOpen((open) => !open);
-  }, []);
-
-  const headerAction = useMemo(
-    () =>
-      executingRoutes.length ? (
-        <DeleteIconButton onClick={toggleDialog} />
-      ) : undefined,
-    [executingRoutes.length, toggleDialog],
-  );
-
-  useHeader(t(`header.activeTransactions`), headerAction);
-
-  if (!executingRoutes.length) {
-    return <ActiveTransactionsEmpty />;
-  }
-
-  return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {executingRoutes.map((routeId) => (
-          <ActiveTransactionItem key={routeId} routeId={routeId} />
-        ))}
-      </List>
-      <Dialog open={open} onClose={toggleDialog}>
-        <DialogTitle>{t('warning.title.deleteActiveTransactions')}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {t('warning.message.deleteActiveTransactions')}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-          <Button
-            variant="contained"
-            onClick={() => deleteRoutes('active')}
-            autoFocus
-          >
-            {t('button.delete')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </PageContainer>
-  );
-};