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

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,4 +1,4 @@
-import DeleteIcon from '@mui/icons-material/DeleteOutline';
+import { DeleteOutline } from '@mui/icons-material';
 import {
   Button,
   DialogActions,
@@ -10,15 +10,13 @@ import {
 } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActiveTransactionItem } from '../../components/ActiveTransactions';
-import { Dialog } from '../../components/Dialog';
-import { PageContainer } from '../../components/PageContainer';
-import {
-  useExecutingRoutesIds,
-  useHeaderStoreContext,
-  useRouteExecutionStore,
-} from '../../stores';
-import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
+import { ActiveTransactionItem } from '../../components/ActiveTransactions/ActiveTransactionItem.js';
+import { Dialog } from '../../components/Dialog.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
+import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js';
 
 export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
@@ -35,7 +33,7 @@ export const ActiveTransactionsPage = () => {
     if (executingRoutes.length) {
       return headerStoreContext.getState().setAction(
         <IconButton size="medium" edge="end" onClick={toggleDialog}>
-          <DeleteIcon />
+          <DeleteOutline />
         </IconButton>,
       );
     }

package/pages/ActiveTransactionsPage/index.ts

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

package/pages/LanguagesPage/LanguagesPage.tsx

@@ -1,10 +1,10 @@
-import CheckIcon from '@mui/icons-material/Check';
+import { Check } from '@mui/icons-material';
 import { List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { ListItemText } from '../../components/ListItemText';
-import { PageContainer } from '../../components/PageContainer';
-import { SettingsListItemButton } from '../../components/SettingsListItemButton';
-import { useLanguages } from '../../hooks';
+import { ListItemText } from '../../components/ListItemText.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton.js';
+import { useLanguages } from '../../hooks/useLanguages.js';
 
 export const LanguagesPage: React.FC = () => {
   const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
@@ -30,7 +30,7 @@ export const LanguagesPage: React.FC = () => {
             onClick={() => setLanguageWithCode(language)}
           >
             <ListItemText primary={t('language.name', { lng: language })} />
-            {selectedLanguageCode === language && <CheckIcon color="primary" />}
+            {selectedLanguageCode === language && <Check color="primary" />}
           </SettingsListItemButton>
         ))}
       </List>

package/pages/LanguagesPage/index.ts

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

package/pages/MainPage/MainGasMessage.tsx

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@mui/material';
-import { GasMessage } from '../../components/GasMessage';
-import { useRoutes } from '../../hooks';
+import { GasMessage } from '../../components/GasMessage/GasMessage.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
 
 export const MainGasMessage: React.FC<BoxProps> = (props) => {
   const { routes } = useRoutes();

package/pages/MainPage/MainPage.tsx

@@ -1,19 +1,17 @@
 import { Box } from '@mui/material';
-import { ActiveTransactions } from '../../components/ActiveTransactions';
-import { AmountInput } from '../../components/AmountInput';
-import { ContractComponent } from '../../components/ContractComponent';
-import { GasRefuelMessage } from '../../components/GasMessage';
-import { PageContainer } from '../../components/PageContainer';
-import { Routes } from '../../components/Routes';
-import { SelectChainAndToken } from '../../components/SelectChainAndToken';
-import {
-  SendToWalletButton,
-  SendToWalletExpandButton,
-} from '../../components/SendToWallet';
-import { useExpandableVariant } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { MainGasMessage } from './MainGasMessage';
-import { ReviewButton } from './ReviewButton';
+import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js';
+import { AmountInput } from '../../components/AmountInput/AmountInput.js';
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
+import { GasRefuelMessage } from '../../components/GasMessage/GasRefuelMessage.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { Routes } from '../../components/Routes/Routes.js';
+import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
+import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
+import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
+import { useExpandableVariant } from '../../hooks/useExpandableVariant.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { MainGasMessage } from './MainGasMessage.js';
+import { ReviewButton } from './ReviewButton.js';
 
 export const MainPage: React.FC = () => {
   const expandable = useExpandableVariant();

package/pages/MainPage/ReviewButton.tsx

@@ -1,14 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { BaseTransactionButton } from '../../components/BaseTransactionButton';
-import { useToAddressRequirements, useRoutes } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import {
-  useSetExecutableRoute,
-  useSplitSubvariantStore,
-  useFieldValues,
-} from '../../stores';
-import { navigationRoutes } from '../../utils';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation();

package/pages/MainPage/index.ts

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

package/pages/RoutesPage/RoutesPage.tsx

@@ -2,16 +2,16 @@
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { useEffect } from 'react';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import {
-  RouteCard,
-  RouteCardSkeleton,
-  RouteNotFoundCard,
-} from '../../components/RouteCard';
-import { useNavigateBack, useRoutes } from '../../hooks';
-import { useHeaderStoreContext, useSetExecutableRoute } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { Stack } from './RoutesPage.style';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate/ProgressToNextUpdate.js';
+import { RouteCard } from '../../components/RouteCard/RouteCard.js';
+import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
+import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { Stack } from './RoutesPage.style.js';
 
 export const RoutesPage: React.FC<BoxProps> = () => {
   const { navigateBack, navigate } = useNavigateBack();

package/pages/RoutesPage/index.ts

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

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,12 +1,12 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { Avatar, List, ListItemAvatar } from '@mui/material';
-import { useChainSelect } from '../../components/ChainSelect';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { PageContainer } from '../../components/PageContainer';
-import { useTokenSelect } from '../../components/TokenList';
-import { useNavigateBack } from '../../hooks';
-import type { SelectChainPageProps } from './types';
+import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import type { SelectChainPageProps } from './types.js';
 
 export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   formType,

package/pages/SelectChainPage/index.ts

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

package/pages/SelectChainPage/types.ts

@@ -1,4 +1,4 @@
-import type { FormTypeProps } from '../../stores';
+import type { FormTypeProps } from '../../stores/form/types.js';
 
 export interface SelectChainPageProps extends FormTypeProps {
   selectNativeToken?: boolean;

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -1,7 +1,9 @@
-import CheckIcon from '@mui/icons-material/Check';
-import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
-import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
-import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
+import {
+  Check,
+  CheckBoxOutlineBlankOutlined,
+  CheckBoxOutlined,
+  IndeterminateCheckBoxOutlined,
+} from '@mui/icons-material';
 import {
   Avatar,
   IconButton,
@@ -13,11 +15,12 @@ import type { MouseEventHandler } from 'react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
-import { ListItemText } from '../../components/ListItemText';
-import { PageContainer } from '../../components/PageContainer';
-import { SettingsListItemButton } from '../../components/SettingsListItemButton';
-import { useTools } from '../../hooks';
-import { useHeaderStoreContext, useSettingsStore } from '../../stores';
+import { ListItemText } from '../../components/ListItemText.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton.js';
+import { useTools } from '../../hooks/useTools.js';
+import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
 
 interface SelectAllCheckboxProps {
   allCheckboxesSelected: boolean;
@@ -39,11 +42,11 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
     <Tooltip title={tooltipTitle} arrow>
       <IconButton size="medium" edge="end" onClick={onClick}>
         {allCheckboxesSelected ? (
-          <CheckBoxOutlinedIcon />
+          <CheckBoxOutlined />
         ) : anyCheckboxesSelected ? (
-          <IndeterminateCheckBoxOutlinedIcon />
+          <IndeterminateCheckBoxOutlined />
         ) : (
-          <CheckBoxOutlineBlankOutlinedIcon />
+          <CheckBoxOutlineBlankOutlined />
         )}
       </IconButton>
     </Tooltip>
@@ -102,7 +105,7 @@ export const SelectEnabledToolsPage: React.FC<{
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={tool.name} />
-            {enabledTools[tool.key] && <CheckIcon color="primary" />}
+            {enabledTools[tool.key] && <Check color="primary" />}
           </SettingsListItemButton>
         ))}
       </List>

package/pages/SelectEnabledToolsPage/index.ts

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

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.tsx

@@ -1,12 +1,13 @@
 import { List, ListItemAvatar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { PageContainer } from '../../components/PageContainer';
-import { TokenAvatar } from '../../components/TokenAvatar';
-import { useTokenSelect } from '../../components/TokenList';
-import { useChains, useNavigateBack } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { TokenAvatar } from '../../components/TokenAvatar/TokenAvatar.js';
+import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
+import { useChains } from '../../hooks/useChains.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
 
 export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
   formType,

package/pages/SelectNativeTokenPage/index.ts

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

package/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { Input as InputBase } from '../../components/Input';
+import { Input as InputBase } from '../../components/Input.js';
 
 export const Input = styled(InputBase)(({ theme }) => ({
   paddingRight: theme.spacing(1.5),

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,10 +1,11 @@
-import SearchIcon from '@mui/icons-material/Search';
+import { Search } from '@mui/icons-material';
 import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card';
-import { useFieldActions, useFieldController } from '../../stores';
-import { Input } from './SearchTokenInput.style';
+import { Card } from '../../components/Card/Card.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
+import { Input } from './SearchTokenInput.style.js';
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation();
@@ -28,7 +29,7 @@ export const SearchTokenInput = () => {
           placeholder={t(`main.tokenSearch`) as string}
           endAdornment={
             <InputAdornment position="end">
-              <SearchIcon />
+              <Search />
             </InputAdornment>
           }
           inputProps={{

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,17 +1,15 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { ChainSelect } from '../../components/ChainSelect';
-import { PageContainer } from '../../components/PageContainer';
-import { TokenList } from '../../components/TokenList';
-import {
-  useContentHeight,
-  useNavigateBack,
-  useScrollableOverflowHidden,
-  useSwapOnly,
-} from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { SearchTokenInput } from './SearchTokenInput';
+import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { TokenList } from '../../components/TokenList/TokenList.js';
+import { useContentHeight } from '../../hooks/useContentHeight.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { SearchTokenInput } from './SearchTokenInput.js';
 
 const minTokenListHeight = 360;
 

package/pages/SelectTokenPage/index.ts

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

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -6,10 +6,11 @@ import {
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Connector } from 'wagmi';
 import { useConnect, useDisconnect } from 'wagmi';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface EVMListItemButtonProps {
   connectedConnector?: Connector;

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -2,10 +2,11 @@ import { ChainId, ChainType } from '@lifi/sdk';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface SVMListItemButtonProps {
   wallet: Wallet;

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -7,8 +7,8 @@ import {
   DialogContent,
   DialogContentText,
   List,
+  useMediaQuery,
 } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { WalletReadyState } from '@solana/wallet-adapter-base';
 import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
@@ -16,13 +16,13 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
 import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
-import { Dialog } from '../../components/Dialog';
-import { PageContainer } from '../../components/PageContainer';
-import { useWidgetConfig } from '../../providers';
-import { isItemAllowed } from '../../utils';
-import { EVMListItemButton } from './EVMListItemButton';
-import { SVMListItemButton } from './SVMListItemButton';
-import { walletComparator } from './utils';
+import { Dialog } from '../../components/Dialog.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { isItemAllowed } from '../../utils/item.js';
+import { EVMListItemButton } from './EVMListItemButton.js';
+import { SVMListItemButton } from './SVMListItemButton.js';
+import { walletComparator } from './utils.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();

package/pages/SelectWalletPage/index.ts

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

package/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,15 +1,14 @@
-import ErrorIcon from '@mui/icons-material/Error';
-import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import { Error, TurnedIn } from '@mui/icons-material';
 import { Button, Typography } from '@mui/material';
 import type { ChangeEvent, MutableRefObject } from 'react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { Input } from '../../components/Input';
-import { useAddressValidation } from '../../hooks';
-import type { Bookmark } from '../../stores';
-import { useBookmarkActions } from '../../stores';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { Input } from '../../components/Input.js';
+import { useAddressValidation } from '../../hooks/useAddressValidation.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import {
   AddressInput,
   BookmarkInputFields,
@@ -20,8 +19,8 @@ import {
   SheetAddressContainer,
   SheetTitle,
   ValidationAlert,
-} from './SendToWalletPage.style';
-import type { BookmarkError } from './types';
+} from './SendToWalletPage.style.js';
+import type { BookmarkError } from './types.js';
 
 interface BookmarkAddressProps {
   onAddBookmark: (bookmark: Bookmark) => void;
@@ -142,7 +141,7 @@ export const BookmarkAddressSheet = forwardRef<
     <BottomSheet ref={ref} onClose={resetValues}>
       <SendToWalletSheetContainer>
         <IconContainer>
-          <TurnedInIcon sx={{ fontSize: 40 }} />
+          <TurnedIn sx={{ fontSize: 40 }} />
         </IconContainer>
         <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>
         {validatedWallet ? (
@@ -193,9 +192,7 @@ export const BookmarkAddressSheet = forwardRef<
             </SendToWalletCard>
           )}
           {error ? (
-            <ValidationAlert icon={<ErrorIcon />}>
-              {error.message}
-            </ValidationAlert>
+            <ValidationAlert icon={<Error />}>{error.message}</ValidationAlert>
           ) : null}
         </BookmarkInputFields>
         <SendToWalletButtonRow>

package/pages/SendToWallet/BookmarksPage.tsx

@@ -1,28 +1,34 @@
-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 {
+  ContentCopyRounded,
+  DeleteOutline,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedIn,
+} from '@mui/icons-material';
 import { Button, 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 { useChains, useToAddressRequirements } from '../../hooks';
-import type { Bookmark } from '../../stores';
-import { useBookmarkActions, useBookmarks } from '../../stores';
-import { defaultChainIdsByType, 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 { ListItemButton } from '../../components/ListItem//ListItemButton.js';
+import { ListItem } from '../../components/ListItem/ListItem.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 { shortenAddress } from '../../utils/wallet.js';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
+import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   BookmarkButtonContainer,
   ListContainer,
   OptionsMenuButton,
   SendToWalletPageContainer,
-} from './SendToWalletPage.style';
+} from './SendToWalletPage.style.js';
 
 export const BookmarksPage = () => {
   const { t } = useTranslation();
@@ -125,12 +131,12 @@ export const BookmarksPage = () => {
                     : 1,
               }}
             >
-              <MoreHorizIcon fontSize="small" />
+              <MoreHoriz fontSize="small" />
             </OptionsMenuButton>
           </ListItem>
         ))}
         {!bookmarks.length && (
-          <EmptyListIndicator icon={<TurnedInIcon sx={{ fontSize: 48 }} />}>
+          <EmptyListIndicator icon={<TurnedIn sx={{ fontSize: 48 }} />}>
             {t('sendToWallet.noBookmarkedWallets')}
           </EmptyListIndicator>
         )}
@@ -150,15 +156,15 @@ export const BookmarksPage = () => {
           onClose={closeMenu}
         >
           <MenuItem onClick={handleCopyAddress}>
-            <ContentCopyIcon />
+            <ContentCopyRounded />
             {t('button.copyAddress')}
           </MenuItem>
           <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewIcon />
+            <OpenInNewRounded />
             {t('button.viewOnExplorer')}
           </MenuItem>
           <MenuItem onClick={handleRemoveBookmark}>
-            <DeleteIcon />
+            <DeleteOutline />
             {t('button.delete')}
           </MenuItem>
         </Menu>