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

package/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -1,14 +1,14 @@
+import { Collapse } from '@mui/material';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { useId } from 'react';
-import { Collapse } from '@mui/material';
-import type { SettingCardTitle } from './types';
+import { Card } from '../../../components/Card/Card.js';
 import {
-  Card,
   CardRowButton,
-  CardValue,
   CardTitleContainer,
-} from '../../../components/Card';
-import { useSettingsCardExpandable } from './SettingsAccordian';
+  CardValue,
+} from '../../../components/Card/CardButton.style.js';
+import { useSettingsCardExpandable } from './SettingsAccordian.js';
+import type { SettingCardTitle } from './types.js';
 
 interface SettingCardExpandableProps extends SettingCardTitle {
   value: ReactNode;

package/pages/SettingsPage/SettingsCard/index.ts

@@ -1,4 +1,4 @@
-export * from './SettingCard.style';
-export * from './SettingCardExpandable';
-export * from './BadgedValue';
-export * from './SettingsAccordian';
+export * from './SettingCard.style.js';
+export * from './SettingCardExpandable.js';
+export * from './BadgedValue.js';
+export * from './SettingsAccordian.js';

package/pages/SettingsPage/SettingsPage.tsx

@@ -1,13 +1,14 @@
-import { PageContainer } from '../../components/PageContainer';
-import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings';
-import { GasPriceSettings } from './GasPriceSettings';
-import { LanguageSetting } from './LanguageSetting';
-import { ResetSettingsButton } from './ResetSettingsButton';
-import { RoutePrioritySettings } from './RoutePrioritySettings';
-import { SendToWalletOptionSetting } from './SendToWalletOptionSetting';
-import { SettingsCardAccordion, SettingsList } from './SettingsCard';
-import { SlippageSettings } from './SlippageSettings';
-import { ThemeSettings } from './ThemeSettings';
+import { PageContainer } from '../../components/PageContainer.js';
+import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js';
+import { GasPriceSettings } from './GasPriceSettings.js';
+import { LanguageSetting } from './LanguageSetting.js';
+import { ResetSettingsButton } from './ResetSettingsButton.js';
+import { RoutePrioritySettings } from './RoutePrioritySettings.js';
+import { SendToWalletOptionSetting } from './SendToWalletOptionSetting.js';
+import { SettingsList } from './SettingsCard/SettingCard.style.js';
+import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js';
+import { SlippageSettings } from './SlippageSettings/SlippageSettings.js';
+import { ThemeSettings } from './ThemeSettings.js';
 
 export const SettingsPage = () => {
   return (

package/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -2,7 +2,7 @@ import type { Theme } from '@mui/material';
 import { Box, ButtonBase, InputBase } from '@mui/material';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import { alpha, styled } from '@mui/material/styles';
-import { getCardFieldsetBackgroundColor } from '../../../utils';
+import { getCardFieldsetBackgroundColor } from '../../../utils/colors.js';
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   display: 'flex',

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,23 +1,23 @@
-import PercentIcon from '@mui/icons-material/Percent';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Percent, WarningRounded } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import type { ChangeEventHandler, FocusEventHandler } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSettingMonitor } from '../../../hooks';
+import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js';
+import { useSettings } from '../../../stores/settings/useSettings.js';
 import {
   defaultSlippage,
-  useSettings,
   useSettingsStore,
-} from '../../../stores';
-import { formatSlippage } from '../../../utils';
-import { BadgedValue, SettingCardExpandable } from '../SettingsCard';
+} from '../../../stores/settings/useSettingsStore.js';
+import { formatSlippage } from '../../../utils/format.js';
+import { BadgedValue } from '../SettingsCard/BadgedValue.js';
+import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js';
 import {
   SettingsFieldSet,
   SlippageCustomInput,
   SlippageDefaultButton,
   SlippageLimitsWarningContainer,
-} from './SlippageSettings.style';
+} from './SlippageSettings.style.js';
 
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -69,7 +69,7 @@ export const SlippageSettings: React.FC = () => {
           showBadge={!!badgeColor}
         >{`${slippage}%`}</BadgedValue>
       }
-      icon={<PercentIcon />}
+      icon={<Percent />}
       title={t(`settings.slippage`)}
     >
       <Box mt={1.5}>
@@ -104,7 +104,7 @@ export const SlippageSettings: React.FC = () => {
         </SettingsFieldSet>
         {isSlippageOutsideRecommendedLimits && (
           <SlippageLimitsWarningContainer>
-            <WarningRoundedIcon color="warning" />
+            <WarningRounded color="warning" />
             <Typography fontSize={13} fontWeight={400}>
               {t('warning.message.slippageOutsideRecommendedLimits')}
             </Typography>

package/pages/SettingsPage/SlippageSettings/index.ts

@@ -1 +1 @@
-export * from './SlippageSettings';
+export * from './SlippageSettings.js';

package/pages/SettingsPage/ThemeSettings.tsx

@@ -1,20 +1,18 @@
-import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import NightlightIcon from '@mui/icons-material/Nightlight';
+import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs';
-import { CardValue } from '../../components/Card';
-import { useWidgetConfig } from '../../providers';
-import { useAppearance } from '../../stores';
-import type { Appearance } from '../../types';
-import { HiddenUI } from '../../types';
-import { SettingCardExpandable } from './SettingsCard';
+import { CardValue } from '../../components/Card/CardButton.style.js';
+import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useAppearance } from '../../stores/settings/useAppearance.js';
+import type { Appearance } from '../../types/widget.js';
+import { HiddenUI } from '../../types/widget.js';
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
 
 const themeIcons = {
-  light: LightModeIcon,
-  dark: NightlightIcon,
-  auto: BrightnessAutoIcon,
+  light: LightMode,
+  dark: Nightlight,
+  auto: BrightnessAuto,
 };
 
 interface ThemeTabProps {

package/pages/SettingsPage/index.ts

@@ -1 +1 @@
-export * from './SettingsPage';
+export * from './SettingsPage.js';

package/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useWidgetEvents } from '../../hooks/';
-import { WidgetEvent } from '../../types/events';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface ContactSupportButtonProps {
   supportId?: string;

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,21 +1,26 @@
 import type { FullStatusData } from '@lifi/sdk';
-import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import { ContentCopyRounded } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { Card, CardTitle } from '../../components/Card';
-import { ContractComponent } from '../../components/ContractComponent';
-import { Insurance } from '../../components/Insurance';
-import { PageContainer } from '../../components/PageContainer';
-import { getStepList } from '../../components/Step';
-import { useNavigateBack, useTools, useTransactionDetails } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { getSourceTxHash, useRouteExecutionStore } from '../../stores';
-import { formatTokenAmount, navigationRoutes } from '../../utils';
-import { buildRouteFromTxHistory } from '../../utils/converters';
-import { ContactSupportButton } from './ContactSupportButton';
-import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton';
+import { Card } from '../../components/Card/Card.js';
+import { CardTitle } from '../../components/Card/CardTitle.js';
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
+import { Insurance } from '../../components/Insurance/Insurance.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { getStepList } from '../../components/Step/StepList.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useTools } from '../../hooks/useTools.js';
+import { useTransactionDetails } from '../../hooks/useTransactionDetails.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
+import { getSourceTxHash } from '../../stores/routes/utils.js';
+import { buildRouteFromTxHistory } from '../../utils/converters.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { ContactSupportButton } from './ContactSupportButton.js';
+import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
@@ -126,7 +131,7 @@ export const TransactionDetailsPage: React.FC = () => {
           <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
           <Box mr={1} mt={1}>
             <IconButton size="medium" onClick={copySupportId}>
-              <ContentCopyIcon fontSize="small" />
+              <ContentCopyRounded fontSize="small" />
             </IconButton>
           </Box>
         </Box>

package/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx

@@ -1,7 +1,7 @@
 import { Box, Skeleton } from '@mui/material';
-import { Card } from '../../components/Card';
-import { PageContainer } from '../../components/PageContainer';
-import { TokenSkeleton } from '../../components/Token';
+import { Card } from '../../components/Card/Card.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { TokenSkeleton } from '../../components/Token/Token.js';
 
 export const TransactionDetailsSkeleton = () => {
   return (

package/pages/TransactionDetailsPage/index.ts

@@ -1 +1 @@
-export * from './TransactionDetailsPage';
+export * from './TransactionDetailsPage.js';

package/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

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

package/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -7,9 +7,10 @@ import type {
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Card } from '../../components/Card';
-import { Token, TokenDivider } from '../../components/Token';
-import { navigationRoutes } from '../../utils';
+import { Card } from '../../components/Card/Card.js';
+import { Token } from '../../components/Token/Token.js';
+import { TokenDivider } from '../../components/Token/Token.style.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const TransactionHistoryItem: React.FC<{
   transaction: StatusResponse;

package/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -2,12 +2,12 @@ import type { FullStatusData } from '@lifi/sdk';
 import { List } from '@mui/material';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef } from 'react';
-import { PageContainer } from '../../components/PageContainer';
-import { useTransactionHistory } from '../../hooks/useTransactionHistory';
-import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
-import { TransactionHistoryItem } from './TransactionHistoryItem';
-import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton';
-import { minTransactionListHeight } from './constants';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useTransactionHistory } from '../../hooks/useTransactionHistory.js';
+import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js';
+import { TransactionHistoryItem } from './TransactionHistoryItem.js';
+import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js';
+import { minTransactionListHeight } from './constants.js';
 
 export const TransactionHistoryPage: React.FC = () => {
   // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue

package/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -1,6 +1,7 @@
 import { Box, Skeleton } from '@mui/material';
-import { Card } from '../../components/Card';
-import { TokenDivider, TokenSkeleton } from '../../components/Token';
+import { Card } from '../../components/Card/Card.js';
+import { TokenSkeleton } from '../../components/Token/Token.js';
+import { TokenDivider } from '../../components/Token/Token.style.js';
 
 export const TransactionHistoryItemSkeleton = () => {
   return (

package/pages/TransactionHistoryPage/index.ts

@@ -1 +1 @@
-export * from './TransactionHistoryPage';
+export * from './TransactionHistoryPage.js';

package/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,5 +1,5 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { WarningRounded } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import {
@@ -10,11 +10,11 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { useSetContentHeight } from '../../hooks';
-import { formatTokenAmount } from '../../utils';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
 
 export interface ExchangeRateBottomSheetBase {
   isOpen(): void;
@@ -112,7 +112,7 @@ const ExchangeRateBottomSheetContent: React.FC<
     <Box p={3} ref={ref}>
       <CenterContainer>
         <IconCircle status="warning" mb={1}>
-          <WarningRoundedIcon color="warning" />
+          <WarningRounded color="warning" />
         </IconCircle>
         <Typography py={1} fontSize={18} fontWeight={700}>
           {t('warning.title.rateChanged')}

package/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,11 +1,9 @@
-import { BaseTransactionButton } from '../../components/BaseTransactionButton';
-import {
-  useFromTokenSufficiency,
-  useGasSufficiency,
-  useRoutes,
-} from '../../hooks';
-import { useRouteExecutionStore } from '../../stores';
-import type { StartTransactionButtonProps } from './types';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
+import type { StartTransactionButtonProps } from './types.js';
 
 export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
   onClick,

package/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,7 +1,7 @@
 import type { Theme } from '@mui/material';
 import { Box } from '@mui/material';
 import { alpha, darken, styled } from '@mui/material/styles';
-import { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
 
 type StatusColor = RouteExecutionStatus | 'warning';
 

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,34 +1,32 @@
-import DoneIcon from '@mui/icons-material/Done';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import {
+  Done,
+  ErrorRounded,
+  InfoRounded,
+  WarningRounded,
+} from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { Token } from '../../components/Token';
-import {
-  getProcessMessage,
-  useAvailableChains,
-  useNavigateBack,
-  useTokenBalance,
-} from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import type { RouteExecution } from '../../stores';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { Token } from '../../components/Token/Token.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { getProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useTokenBalance } from '../../hooks/useTokenBalance.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import {
   RouteExecutionStatus,
-  getSourceTxHash,
-  useFieldActions,
-} from '../../stores';
-import {
-  formatTokenAmount,
-  hasEnumFlag,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+  type RouteExecution,
+} from '../../stores/routes/types.js';
+import { getSourceTxHash } from '../../stores/routes/utils.js';
+import { hasEnumFlag } from '../../utils/enum.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
 
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
   status,
@@ -216,17 +214,17 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           <CenterContainer>
             <IconCircle status={status} mb={1}>
               {status === RouteExecutionStatus.Idle ? (
-                <InfoRoundedIcon color="primary" />
+                <InfoRounded color="primary" />
               ) : null}
               {status === RouteExecutionStatus.Done ? (
-                <DoneIcon color="success" />
+                <Done color="success" />
               ) : null}
               {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
               hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
-                <WarningRoundedIcon color="warning" />
+                <WarningRounded color="warning" />
               ) : null}
               {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
-                <ErrorRoundedIcon color="error" />
+                <ErrorRounded color="error" />
               ) : null}
             </IconCircle>
           </CenterContainer>

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,14 +1,14 @@
 import type { Route } from '@lifi/sdk';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { WarningRounded } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { useSetContentHeight } from '../../hooks';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-import { calcValueLoss } from './utils';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
+import { calcValueLoss } from './utils.js';
 
 interface TokenValueBottomSheetProps {
   route: Route;
@@ -48,7 +48,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     <Box p={3} ref={ref}>
       <CenterContainer>
         <IconCircle status="warning" mb={1}>
-          <WarningRoundedIcon color="warning" />
+          <WarningRounded color="warning" />
         </IconCircle>
         <Typography py={1} fontSize={18} fontWeight={700}>
           {t('warning.title.highValueLoss')}

package/pages/TransactionPage/TransactionPage.tsx

@@ -1,40 +1,36 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Delete } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { ContractComponent } from '../../components/ContractComponent';
-import { GasMessage } from '../../components/GasMessage';
-import { Insurance } from '../../components/Insurance';
-import { PageContainer } from '../../components/PageContainer';
-import { getStepList } from '../../components/Step';
-import {
-  useNavigateBack,
-  useRouteExecution,
-  useWidgetEvents,
-} from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import {
-  RouteExecutionStatus,
-  useFieldActions,
-  useHeaderStoreContext,
-} from '../../stores';
-import { WidgetEvent } from '../../types/events';
-import { formatTokenAmount } from '../../utils';
-import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
+import { GasMessage } from '../../components/GasMessage/GasMessage.js';
+import { Insurance } from '../../components/Insurance/Insurance.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { getStepList } from '../../components/Step/StepList.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useRouteExecution } from '../../hooks/useRouteExecution.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { WidgetEvent } from '../../types/events.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
 import {
   StartInsurableTransactionButton,
   StartTransactionButton,
-} from './StartTransactionButton';
-import { StatusBottomSheet } from './StatusBottomSheet';
+} from './StartTransactionButton.js';
+import { StatusBottomSheet } from './StatusBottomSheet.js';
 import {
   TokenValueBottomSheet,
   getTokenValueLossThreshold,
-} from './TokenValueBottomSheet';
-import { calcValueLoss } from './utils';
+} from './TokenValueBottomSheet.js';
+import { calcValueLoss } from './utils.js';
 
 export const TransactionPage: React.FC = () => {
   const { t } = useTranslation();
@@ -218,7 +214,7 @@ export const TransactionPage: React.FC = () => {
                     marginLeft: 1,
                   }}
                 >
-                  <DeleteIcon />
+                  <Delete />
                 </Button>
               </Tooltip>
             ) : null}

package/pages/TransactionPage/index.ts

@@ -1 +1 @@
-export * from './TransactionPage';
+export * from './TransactionPage.js';

package/pages/TransactionPage/types.ts

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton/types.js';
 
 export interface StartTransactionButtonProps
   extends BaseTransactionButtonProps {

package/providers/I18nProvider/I18nProvider.tsx

@@ -2,11 +2,12 @@ import type { i18n } from 'i18next';
 import { createInstance } from 'i18next';
 import { useMemo } from 'react';
 import { I18nextProvider } from 'react-i18next';
-import * as supportedLanguages from '../../i18n';
-import { useSettings } from '../../stores';
-import { deepMerge, isItemAllowed } from '../../utils';
-import { useWidgetConfig } from '../WidgetProvider';
-import type { LanguageKey, LanguageTranslationResources } from './types';
+import * as supportedLanguages from '../../i18n/index.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { deepMerge } from '../../utils/deepMerge.js';
+import { isItemAllowed } from '../../utils/item.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
   children,

package/providers/I18nProvider/index.ts

@@ -1,2 +1,2 @@
-export * from './I18nProvider';
-export * from './types';
+export * from './I18nProvider.js';
+export * from './types.js';

package/providers/I18nProvider/types.ts

@@ -1,4 +1,4 @@
-import type * as languages from '../../i18n';
+import type * as languages from '../../i18n/index.js';
 
 export type PartialResource<T> = T extends object
   ? {

package/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,10 +1,10 @@
 import type { PaletteMode } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { useEffect, useMemo, useState } from 'react';
-import { createTheme } from '../../config/theme';
-import { useAppearance } from '../../stores';
-import { useWidgetConfig } from '../WidgetProvider';
+import { createTheme } from '../../config/theme.js';
+import { useAppearance } from '../../stores/settings/useAppearance.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,

package/providers/ThemeProvider/index.ts

@@ -1 +1 @@
-export * from './ThemeProvider';
+export * from './ThemeProvider.js';