@lifi/widget 3.0.0-alpha.24 → 3.0.0-alpha.26

package/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,23 +1,23 @@
-import InfoIcon from '@mui/icons-material/Info';
-import WalletIcon from '@mui/icons-material/Wallet';
+import { Info, Wallet } from '@mui/icons-material';
 import { Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { AlertMessage } from '../../components/AlertMessage';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import type { Bookmark } from '../../stores';
-import { useFieldActions, useSendToWalletStore } from '../../stores';
-import { navigationRoutes } from '../../utils';
+import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import {
   IconContainer,
   SendToWalletButtonRow,
   SendToWalletSheetContainer,
   SheetAddressContainer,
   SheetTitle,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void;
@@ -55,7 +55,7 @@ export const ConfirmAddressSheet = forwardRef<
     <BottomSheet ref={ref}>
       <SendToWalletSheetContainer>
         <IconContainer>
-          <WalletIcon sx={{ fontSize: 40 }} />
+          <Wallet sx={{ fontSize: 40 }} />
         </IconContainer>
         <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
         <SheetAddressContainer>
@@ -72,7 +72,7 @@ export const ConfirmAddressSheet = forwardRef<
               {t('info.message.fundsToExchange')}
             </Typography>
           }
-          icon={<InfoIcon />}
+          icon={<Info />}
         />
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleClose} fullWidth>

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,26 +1,31 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedIn,
+} from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AccountAvatar } from '../../components/AccountAvatar';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { ListItem, ListItemButton } from '../../components/ListItem';
-import { Menu } from '../../components/Menu';
-import type { Account } from '../../hooks';
-import { useAccount, useChains, useToAddressRequirements } from '../../hooks';
-import type { Bookmark } from '../../stores';
-import { useBookmarkActions } from '../../stores';
-import { shortenAddress } from '../../utils';
-import { ConfirmAddressSheet } from './ConfirmAddressSheet';
-import { EmptyListIndicator } from './EmptyListIndicator';
+import { AccountAvatar } from '../../components/AccountAvatar.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ListItem } from '../../components/ListItem/ListItem.js';
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
+import { Menu } from '../../components/Menu.js';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChains } from '../../hooks/useChains.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
+import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   ListContainer,
   OptionsMenuButton,
   SendToWalletPageContainer,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 export const ConnectedWalletsPage = () => {
   const { t } = useTranslation();
@@ -113,13 +118,13 @@ export const ConnectedWalletsPage = () => {
                       : 1,
                 }}
               >
-                <MoreHorizIcon fontSize="small" />
+                <MoreHoriz fontSize="small" />
               </OptionsMenuButton>
             </ListItem>
           );
         })}
         {!accounts.length && (
-          <EmptyListIndicator icon={<TurnedInIcon sx={{ fontSize: 48 }} />}>
+          <EmptyListIndicator icon={<TurnedIn sx={{ fontSize: 48 }} />}>
             {t('sendToWallet.noConnectedWallets')}
           </EmptyListIndicator>
         )}
@@ -139,11 +144,11 @@ export const ConnectedWalletsPage = () => {
           onClose={closeMenu}
         >
           <MenuItem onClick={handleCopyAddress}>
-            <ContentCopyIcon />
+            <ContentCopyRounded />
             {t('button.copyAddress')}
           </MenuItem>
           <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewIcon />
+            <OpenInNewRounded />
             {t('button.viewOnExplorer')}
           </MenuItem>
         </Menu>

package/pages/SendToWallet/EmptyListIndicator.tsx

@@ -3,7 +3,7 @@ import {
   EmptyContainer,
   EmptyListMessage,
   IconContainer,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 interface EmptyListIndicatorProps extends PropsWithChildren {
   icon: ReactNode;

package/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,33 +1,36 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DeleteIcon from '@mui/icons-material/Delete';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import TurnedInIcon from '@mui/icons-material/TurnedIn';
-import WalletIcon from '@mui/icons-material/Wallet';
+import {
+  ContentCopyRounded,
+  DeleteOutline,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedInNot,
+  Wallet,
+} from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { AccountAvatar } from '../../components/AccountAvatar';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { ListItem, ListItemButton } from '../../components/ListItem';
-import { Menu } from '../../components/Menu';
-import { useChains, useToAddressRequirements } from '../../hooks';
-import type { Bookmark } from '../../stores';
-import { useBookmarkActions, useBookmarks } from '../../stores';
-import {
-  defaultChainIdsByType,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
-import { BookmarkAddressSheet } from './BookmarkAddressSheet';
-import { ConfirmAddressSheet } from './ConfirmAddressSheet';
-import { EmptyListIndicator } from './EmptyListIndicator';
+import { AccountAvatar } from '../../components/AccountAvatar.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ListItem } from '../../components/ListItem/ListItem.js';
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
+import { Menu } from '../../components/Menu.js';
+import { useChains } from '../../hooks/useChains.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
+import { defaultChainIdsByType } from '../../utils/chainType.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
+import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   ListContainer,
   OptionsMenuButton,
   SendToWalletPageContainer,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 export const RecentWalletsPage = () => {
   const { t } = useTranslation();
@@ -158,12 +161,12 @@ export const RecentWalletsPage = () => {
                     : 1,
               }}
             >
-              <MoreHorizIcon fontSize="small" />
+              <MoreHoriz fontSize="small" />
             </OptionsMenuButton>
           </ListItem>
         ))}
         {!recentWallets.length && (
-          <EmptyListIndicator icon={<WalletIcon sx={{ fontSize: 48 }} />}>
+          <EmptyListIndicator icon={<Wallet sx={{ fontSize: 48 }} />}>
             {t('sendToWallet.noRecentWallets')}
           </EmptyListIndicator>
         )}
@@ -183,19 +186,19 @@ export const RecentWalletsPage = () => {
           onClose={closeMenu}
         >
           <MenuItem onClick={handleCopyAddress}>
-            <ContentCopyIcon />
+            <ContentCopyRounded />
             {t('button.copyAddress')}
           </MenuItem>
           <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewIcon />
+            <OpenInNewRounded />
             {t('button.viewOnExplorer')}
           </MenuItem>
           <MenuItem onClick={handleOpenBookmarkSheet}>
-            <TurnedInIcon />
+            <TurnedInNot />
             {t('button.bookmark')}
           </MenuItem>
           <MenuItem onClick={handleRemoveRecentWallet}>
-            <DeleteIcon />
+            <DeleteOutline />
             {t('button.delete')}
           </MenuItem>
         </Menu>

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,27 +1,30 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+} from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { AccountAvatar } from '../../components/AccountAvatar';
-import { ListItem, ListItemButton } from '../../components/ListItem';
-import { Menu } from '../../components/Menu';
-import { useChains, useToAddressRequirements } from '../../hooks';
-import { useBookmarkActions, useFieldActions } from '../../stores';
-import {
-  defaultChainIdsByType,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
+import { AccountAvatar } from '../../components/AccountAvatar.js';
+import { ListItem } from '../../components/ListItem/ListItem.js';
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
+import { Menu } from '../../components/Menu.js';
+import { useChains } from '../../hooks/useChains.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import type { ToAddress } from '../../types/widget.js';
+import { defaultChainIdsByType } from '../../utils/chainType.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
 import {
   ListContainer,
   OptionsMenuButton,
   SendToWalletPageContainer,
-} from './SendToWalletPage.style';
-import { useWidgetConfig } from '../../providers';
-import type { ToAddress } from '../../types';
+} from './SendToWalletPage.style.js';
 
 export const SendToConfiguredWalletPage = () => {
   const { t } = useTranslation();
@@ -115,7 +118,7 @@ export const SendToConfiguredWalletPage = () => {
                     : 1,
               }}
             >
-              <MoreHorizIcon fontSize="small" />
+              <MoreHoriz fontSize="small" />
             </OptionsMenuButton>
           </ListItem>
         ))}
@@ -135,11 +138,11 @@ export const SendToConfiguredWalletPage = () => {
           onClose={closeMenu}
         >
           <MenuItem onClick={handleCopyAddress}>
-            <ContentCopyIcon />
+            <ContentCopyRounded />
             {t('button.copyAddress')}
           </MenuItem>
           <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewIcon />
+            <OpenInNewRounded />
             {t('button.viewOnExplorer')}
           </MenuItem>
         </Menu>

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -10,11 +10,11 @@ import {
   inputBaseClasses,
   styled,
 } from '@mui/material';
-import { Card } from '../../components/Card';
-import { Input } from '../../components/Input';
-import type { PageContainerProps } from '../../components/PageContainer';
-import { PageContainer } from '../../components/PageContainer';
-import { getContrastAlphaColor } from '../../utils';
+import { Card } from '../../components/Card/Card.js';
+import { Input } from '../../components/Input.js';
+import type { PageContainerProps } from '../../components/PageContainer.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const AddressInput = styled(Input)(({ theme }) => ({
   padding: 0,

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,25 +1,22 @@
-import ErrorIcon from '@mui/icons-material/Error';
-import HistoryIcon from '@mui/icons-material/History';
-import TurnedInIcon from '@mui/icons-material/TurnedIn';
-import WalletIcon from '@mui/icons-material/Wallet';
+import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { CardButton } from '../../components/Card';
-import {
-  useAccount,
-  useAddressValidation,
-  useChain,
-  useToAddressRequirements,
-} from '../../hooks';
-import type { Bookmark } from '../../stores';
-import { useBookmarkActions, useBookmarks, useFieldValues } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { BookmarkAddressSheet } from './BookmarkAddressSheet';
-import { ConfirmAddressSheet } from './ConfirmAddressSheet';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useAddressValidation } from '../../hooks/useAddressValidation.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
 import {
   AddressInput,
   SendToWalletButton,
@@ -29,7 +26,7 @@ import {
   SendToWalletPageContainer,
   ValidationAlert,
   WalletNumber,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 export const SendToWalletPage = () => {
   const { t } = useTranslation();
@@ -167,7 +164,7 @@ export const SendToWalletPage = () => {
           multiline
         />
         {errorMessage ? (
-          <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>
+          <ValidationAlert icon={<Error />} sx={{ pb: 2, paddingX: 2 }}>
             {errorMessage}
           </ValidationAlert>
         ) : null}
@@ -181,7 +178,7 @@ export const SendToWalletPage = () => {
           </SendToWalletButton>
           <Tooltip title={t('button.bookmark')} arrow>
             <SendToWalletIconButton onClick={handleBookmarkAddress}>
-              <TurnedInIcon fontSize="small" />
+              <TurnedIn fontSize="small" />
             </SendToWalletIconButton>
           </Tooltip>
         </SendToWalletButtonRow>
@@ -198,7 +195,7 @@ export const SendToWalletPage = () => {
       </SendToWalletCard>
       <CardButton
         title={t('header.recentWallets')}
-        icon={<HistoryIcon />}
+        icon={<History />}
         onClick={handleRecentWalletsClick}
       >
         {!!recentWallets.length && (
@@ -207,7 +204,7 @@ export const SendToWalletPage = () => {
       </CardButton>
       <CardButton
         title={t('sendToWallet.connectedWallets')}
-        icon={<WalletIcon />}
+        icon={<Wallet />}
         onClick={handleConnectedWalletsClick}
       >
         {!!connectedWallets.length && (
@@ -216,7 +213,7 @@ export const SendToWalletPage = () => {
       </CardButton>
       <CardButton
         title={t('header.bookmarkedWallets')}
-        icon={<TurnedInIcon />}
+        icon={<TurnedIn />}
         onClick={handleBookmarkedWalletsClick}
       >
         {!!bookmarks.length && <WalletNumber>{bookmarks.length}</WalletNumber>}

package/pages/SendToWallet/index.ts

@@ -1,5 +1,5 @@
-export * from './BookmarksPage';
-export * from './ConnectedWalletsPage';
-export * from './RecentWalletsPage';
-export * from './SendToWalletPage';
-export * from './SendToConfiguredWalletPage';
+export * from './BookmarksPage.js';
+export * from './ConnectedWalletsPage.js';
+export * from './RecentWalletsPage.js';
+export * from './SendToWalletPage.js';
+export * from './SendToConfiguredWalletPage.js';

package/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,17 +1,16 @@
-import AirlineStopsIcon from '@mui/icons-material/AirlineStops';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import { AirlineStops, SwapHoriz } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
-import { CardButton } from '../../components/Card';
-import { useSettingMonitor } from '../../hooks';
-import { useSettingsStore } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { BadgedValue } from './SettingsCard';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
 
 const supportedIcons = {
-  Bridges: AirlineStopsIcon,
-  Exchanges: SwapHorizIcon,
+  Bridges: AirlineStops,
+  Exchanges: SwapHoriz,
 };
 
 export const BridgeAndExchangeSettings: React.FC<{

package/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,9 +1,11 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
+import { EvStation } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs';
-import { useSettingMonitor } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { BadgedValue, SettingCardExpandable } from './SettingsCard';
+import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
 
 export const GasPriceSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -22,7 +24,7 @@ export const GasPriceSettings: React.FC = () => {
           {t(`settings.gasPrice.${gasPrice}` as any)}
         </BadgedValue>
       }
-      icon={<EvStationIcon />}
+      icon={<EvStation />}
       title={t(`settings.gasPrice.title`)}
     >
       <Tabs

package/pages/SettingsPage/LanguageSetting.tsx

@@ -1,11 +1,12 @@
-import LanguageIcon from '@mui/icons-material/Language';
+import { Language } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useLanguages } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
-import { navigationRoutes } from '../../utils';
-import { CardButton, CardValue } from '../../components/Card';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { CardValue } from '../../components/Card/CardButton.style.js';
+import { useLanguages } from '../../hooks/useLanguages.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const LanguageSetting: React.FC = () => {
   const { t } = useTranslation();
@@ -24,7 +25,7 @@ export const LanguageSetting: React.FC = () => {
   return (
     <CardButton
       onClick={handleClick}
-      icon={<LanguageIcon />}
+      icon={<Language />}
       title={t(`language.title`)}
     >
       <CardValue>{selectedLanguageDisplayName}</CardValue>

package/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,6 +1,5 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils';
+import { Box, styled } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({
   background: getContrastAlphaColor(theme.palette.mode, '4%'),

package/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import InfoRounded from '@mui/icons-material/InfoRounded';
+import { InfoRounded } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -9,9 +9,9 @@ import {
 } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dialog } from '../../components/Dialog';
-import { useSettingMonitor } from '../../hooks';
-import { ResetButtonContainer } from './ResetSettingsButton.style';
+import { Dialog } from '../../components/Dialog.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { ResetButtonContainer } from './ResetSettingsButton.style.js';
 
 export const ResetSettingsButton: React.FC = () => {
   const { t } = useTranslation();

package/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,10 +1,12 @@
 import { Orders } from '@lifi/sdk';
-import RouteIcon from '@mui/icons-material/Route';
+import { Route } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs';
-import { useSettingMonitor } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { BadgedValue, SettingCardExpandable } from './SettingsCard';
+import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
 
 type SupportedRoute = (typeof Orders)[number];
 
@@ -29,7 +31,7 @@ export const RoutePrioritySettings: React.FC = () => {
           {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
         </BadgedValue>
       }
-      icon={<RouteIcon />}
+      icon={<Route />}
       title={t(`settings.routePriority`)}
     >
       <Tabs

package/pages/SettingsPage/SendToWalletOptionSetting.tsx

@@ -1,20 +1,18 @@
-import WalletIcon from '@mui/icons-material/Wallet';
+import { Wallet } from '@mui/icons-material';
 import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '../../components/Switch';
-import { useWidgetConfig } from '../../providers';
+import { Card } from '../../components/Card/Card.js';
 import {
-  useSendToWalletStore,
-  useSettings,
-  useSettingsStore,
-} from '../../stores';
-import { HiddenUI } from '../../types';
-import {
-  Card,
   CardRowContainer,
   CardTitleContainer,
   CardValue,
-} from '../../components/Card';
+} from '../../components/Card/CardButton.style.js';
+import { Switch } from '../../components/Switch.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { HiddenUI } from '../../types/widget.js';
 
 export const SendToWalletOptionSetting = () => {
   const { t } = useTranslation();
@@ -38,7 +36,7 @@ export const SendToWalletOptionSetting = () => {
     <Card>
       <CardRowContainer>
         <CardTitleContainer>
-          <WalletIcon />
+          <Wallet />
           <CardValue>{t(`settings.sendToWalletOption`)}</CardValue>
         </CardTitleContainer>
         <Switch checked={showDestinationWallet} onChange={onChange} />

package/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -1,7 +1,7 @@
-import type { PropsWithChildren } from 'react';
 import type { BadgeProps } from '@mui/material';
-import { CardValue } from '../../../components/Card';
-import { Badge } from './SettingCard.style';
+import type { PropsWithChildren } from 'react';
+import { CardValue } from '../../../components/Card/CardButton.style.js';
+import { Badge } from './SettingCard.style.js';
 
 interface BadgedValueProps {
   showBadge: boolean;

package/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,6 +1,4 @@
-import { Box, Badge as MuiBadge } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
+import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material';
 
 export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',