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

package/components/AmountInput/AmountInputStartAdornment.tsx

@@ -1,7 +1,9 @@
-import { useChain, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, useFieldValues } from '../../stores';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+import { useChain } from '../../hooks/useChain.js';
+import { useToken } from '../../hooks/useToken.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar/TokenAvatar.js';
 
 export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
   formType,

package/components/AmountInput/PriceFormHelperText.tsx

@@ -1,10 +1,11 @@
 import type { TokenAmount } from '@lifi/sdk';
 import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, useFieldValues } from '../../stores';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
 
 export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(

package/components/AmountInput/index.ts

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

package/components/AppContainer.tsx

@@ -1,9 +1,9 @@
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
-import { useWidgetConfig } from '../providers';
-import type { WidgetVariant } from '../types';
-import { ElementId, createElementId } from '../utils';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { WidgetVariant } from '../types/widget.js';
+import { ElementId, createElementId } from '../utils/elements.js';
 
 export const maxHeight = 680;
 

package/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,11 +1,12 @@
-import LoadingButton from '@mui/lab/LoadingButton';
+import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useAccount, useChain } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useFieldValues } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import type { BaseTransactionButtonProps } from './types';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import type { BaseTransactionButtonProps } from './types.js';
 
 export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   onClick,

package/components/BaseTransactionButton/index.ts

@@ -1,2 +1,2 @@
-export { BaseTransactionButton } from './BaseTransactionButton';
-export * from './types';
+export { BaseTransactionButton } from './BaseTransactionButton.js';
+export * from './types.js';

package/components/BottomSheet/BottomSheet.tsx

@@ -6,9 +6,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useGetScrollableContainer } from '../../hooks';
-import { modalProps, paperProps, slotProps } from '../Dialog';
-import type { BottomSheetBase, BottomSheetProps } from './types';
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js';
+import { modalProps, paperProps, slotProps } from '../Dialog.js';
+import type { BottomSheetBase, BottomSheetProps } from './types.js';
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
   ({ elementRef, children, open, onClose }, ref) => {

package/components/BottomSheet/index.ts

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

package/components/Card/CardButton.tsx

@@ -1,11 +1,11 @@
 import type { MouseEventHandler, PropsWithChildren } from 'react';
-import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types';
-import { Card } from './index';
+import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js';
+import { Card } from './Card.js';
 import {
   CardRowButton,
-  CardValue,
   CardTitleContainer,
-} from './CardButton.style';
+  CardValue,
+} from './CardButton.style.js';
 
 interface SettingCardButtonProps extends SettingCardTitle {
   onClick: MouseEventHandler;

package/components/Card/index.ts

@@ -1,7 +1,7 @@
-export * from './Card';
-export * from './CardHeader';
-export * from './CardIconButton';
-export * from './CardLabel';
-export * from './CardTitle';
-export * from './CardButton';
-export * from './CardButton.style';
+export * from './Card.js';
+export * from './CardHeader.js';
+export * from './CardIconButton.js';
+export * from './CardLabel.js';
+export * from './CardTitle.js';
+export * from './CardButton.js';
+export * from './CardButton.style.js';

package/components/ChainSelect/ChainSelect.style.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Card } from '../../components/Card';
+import { Card } from '../../components/Card/Card.js';
 
 export const ChainCard = styled(Card)({
   display: 'grid',

package/components/ChainSelect/ChainSelect.tsx

@@ -3,11 +3,13 @@ import type { EVMChain } from '@lifi/sdk';
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, maxChainToOrder, useFieldValues } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ChainCard, ChainContainer } from './ChainSelect.style';
-import { useChainSelect } from './useChainSelect';
+import { maxChainToOrder } from '../../stores/chains/createChainOrderStore.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { ChainCard, ChainContainer } from './ChainSelect.style.js';
+import { useChainSelect } from './useChainSelect.js';
 
 export const ChainSelect = ({ formType }: FormTypeProps) => {
   const navigate = useNavigate();

package/components/ChainSelect/index.ts

@@ -1,2 +1,2 @@
-export * from './ChainSelect';
-export * from './useChainSelect';
+export * from './ChainSelect.js';
+export * from './useChainSelect.js';

package/components/ChainSelect/useChainSelect.ts

@@ -1,12 +1,12 @@
 import type { EVMChain } from '@lifi/sdk';
-import { useChains, useSwapOnly, useToAddressReset } from '../../hooks';
-import type { FormType } from '../../stores';
-import {
-  FormKeyHelper,
-  useChainOrder,
-  useFieldActions,
-  useFieldController,
-} from '../../stores';
+import { useChains } from '../../hooks/useChains.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useChainOrder } from '../../stores/chains/useChainOrder.js';
+import type { FormType } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
 
 export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType);

package/components/ContractComponent/ContractComponent.tsx

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { Card } from '../Card';
+import { Card } from '../Card/Card.js';
 
 export const ContractComponent: React.FC<PropsWithChildren<BoxProps>> = ({
   children,

package/components/ContractComponent/index.ts

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

package/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import type { DialogProps, Theme } from '@mui/material';
 import { Dialog as MuiDialog } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { useGetScrollableContainer } from '../hooks';
+import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
 
 export const modalProps = {
   sx: {

package/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,8 +1,8 @@
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { WarningRounded } from '@mui/icons-material';
 import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { AlertMessage } from '../AlertMessage';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 
 // TODO: some of the styling currently used here doesn't align with usage in other places
 //  We might want to consider removing the padding and color here?
@@ -19,7 +19,7 @@ export const FundsSufficiencyMessage = () => {
   return (
     <AlertMessage
       severity="warning"
-      icon={<WarningRoundedIcon />}
+      icon={<WarningRounded />}
       title={<AlertTitle>{t(`warning.message.insufficientFunds`)}</AlertTitle>}
       isMultilineTitle
     />

package/components/GasMessage/GasMessage.style.ts

@@ -1,6 +1,6 @@
 import { switchClasses } from '@mui/material/Switch';
 import { alpha, styled } from '@mui/material/styles';
-import { Switch } from '../Switch';
+import { Switch } from '../Switch.js';
 
 export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
   [`.${switchClasses.switchBase}`]: {

package/components/GasMessage/GasMessage.tsx

@@ -1,9 +1,10 @@
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse } from '@mui/material';
-import { useFromTokenSufficiency, useGasSufficiency } from '../../hooks';
-import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
-import { GasSufficiencyMessage } from './GasSufficiencyMessage';
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js';
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js';
 
 interface GasMessageProps extends BoxProps {
   route?: Route;

package/components/GasMessage/GasRefuelMessage.tsx

@@ -1,12 +1,13 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
+import { EvStation } from '@mui/icons-material';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGasRefuel } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { AlertMessage } from '../AlertMessage';
-import { InfoMessageSwitch } from './GasMessage.style';
+import { useGasRefuel } from '../../hooks/useGasRefuel.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+import { InfoMessageSwitch } from './GasMessage.style.js';
 
 export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
@@ -29,7 +30,7 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
       mountOnEnter
     >
       <AlertMessage
-        icon={<EvStationIcon />}
+        icon={<EvStation />}
         title={
           <Box
             display="flex"

package/components/GasMessage/GasSufficiencyMessage.tsx

@@ -1,9 +1,9 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
+import { EvStation } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import type { GasSufficiency } from '../../hooks';
-import { AlertMessage } from '../AlertMessage';
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 
 interface GasSufficiencyMessageProps {
   insufficientGas?: GasSufficiency[];
@@ -16,7 +16,7 @@ export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
   return (
     <AlertMessage
       severity="warning"
-      icon={<EvStationIcon />}
+      icon={<EvStation />}
       title={
         <Typography variant="body2" fontWeight={700}>
           {t(`warning.title.insufficientGas`)}

package/components/GasMessage/index.ts

@@ -1,2 +1,2 @@
-export * from './GasMessage';
-export * from './GasRefuelMessage';
+export * from './GasMessage.js';
+export * from './GasRefuelMessage.js';

package/components/Header/CloseDrawerButton.tsx

@@ -1,8 +1,7 @@
-import CloseIcon from '@mui/icons-material/CloseRounded';
-import { Tooltip } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { CloseRounded } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useDrawer } from '../../AppDrawerContext';
+import { useDrawer } from '../../AppDrawerContext.js';
 
 export const CloseDrawerButton = () => {
   const { t } = useTranslation();
@@ -11,7 +10,7 @@ export const CloseDrawerButton = () => {
   return (
     <Tooltip title={t('button.close')} enterDelay={400} arrow>
       <IconButton size="medium" onClick={closeDrawer}>
-        <CloseIcon />
+        <CloseRounded />
       </IconButton>
     </Tooltip>
   );

package/components/Header/EVMDisconnectIconButton.tsx

@@ -1,4 +1,4 @@
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import type { Connector } from 'wagmi';
 import { useDisconnect } from 'wagmi';
@@ -18,7 +18,7 @@ export const EVMDisconnectIconButton = ({
         disconnect({ connector });
       }}
     >
-      <PowerSettingsNewIcon />
+      <PowerSettingsNewRounded />
     </IconButton>
   );
 };

package/components/Header/Header.style.ts

@@ -1,7 +1,7 @@
 import { AppBar, Box, Button, badgeClasses } from '@mui/material';
 import { buttonClasses } from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
-import { Tabs } from '../Tabs';
+import { Tabs } from '../Tabs/Tabs.style.js';
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: 'transparent',

package/components/Header/Header.tsx

@@ -1,10 +1,11 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useDefaultElementId } from '../../hooks';
-import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
-import { Container } from './Header.style';
-import { NavigationHeader } from './NavigationHeader';
-import { WalletHeader } from './WalletHeader';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
+import { Container } from './Header.style.js';
+import { NavigationHeader } from './NavigationHeader.js';
+import { WalletHeader } from './WalletHeader.js';
 
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();

package/components/Header/NavigationHeader.tsx

@@ -1,23 +1,23 @@
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Box, Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { ArrowBack } from '@mui/icons-material';
+import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import { useAccount, useNavigateBack } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useHeaderStore } from '../../stores';
-import { HiddenUI } from '../../types';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
+import { HiddenUI } from '../../types/widget.js';
 import {
   backButtonRoutes,
   navigationRoutes,
   navigationRoutesValues,
-} from '../../utils';
-import { CloseDrawerButton } from './CloseDrawerButton';
-import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
-import { NavigationTabs } from './NavigationTabs';
-import { SettingsButton } from './SettingsButton';
-import { TransactionHistoryButton } from './TransactionHistoryButton';
-import { SplitWalletMenuButton } from './WalletHeader';
+} from '../../utils/navigationRoutes.js';
+import { CloseDrawerButton } from './CloseDrawerButton.js';
+import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js';
+import { NavigationTabs } from './NavigationTabs.js';
+import { SettingsButton } from './SettingsButton.js';
+import { TransactionHistoryButton } from './TransactionHistoryButton.js';
+import { SplitWalletMenuButton } from './WalletHeader.js';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
@@ -104,7 +104,7 @@ export const NavigationHeader: React.FC = () => {
       <HeaderAppBar elevation={0}>
         {backButtonRoutes.includes(path) ? (
           <IconButton size="medium" edge="start" onClick={navigateBack}>
-            <ArrowBackIcon />
+            <ArrowBack />
           </IconButton>
         ) : null}
         {splitSubvariant ? (

package/components/Header/NavigationTabs.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next';
-import { useSplitSubvariantStore, useFieldActions } from '../../stores';
-import { HeaderAppBar, SplitTabs } from './Header.style';
-import { Tab } from '../Tabs';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
+import { Tab } from '../Tabs/Tabs.style.js';
+import { HeaderAppBar, SplitTabs } from './Header.style.js';
 
 export const NavigationTabs = () => {
   const { t } = useTranslation();

package/components/Header/SVMDisconnectIconButton.tsx

@@ -1,4 +1,4 @@
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import { useWallet } from '@solana/wallet-adapter-react';
 
@@ -13,7 +13,7 @@ export const SVMDisconnectIconButton = () => {
         disconnect();
       }}
     >
-      <PowerSettingsNewIcon />
+      <PowerSettingsNewRounded />
     </IconButton>
   );
 };

package/components/Header/SettingsButton.style.tsx

@@ -1,8 +1,10 @@
-import { Badge as MuiBadge } from '@mui/material';
+import { IconButton, Badge as MuiBadge } from '@mui/material';
 import { badgeClasses } from '@mui/material/Badge';
-import IconButton from '@mui/material/IconButton';
 import { darken, styled } from '@mui/material/styles';
-import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js';
 
 export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',

package/components/Header/SettingsButton.tsx

@@ -1,9 +1,13 @@
-import SettingsIcon from '@mui/icons-material/Settings';
+import { Settings } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useNavigateBack, useSettingMonitor } from '../../hooks';
-import { navigationRoutes } from '../../utils';
-import { SettingsIconBadge, SettingsIconButton } from './SettingsButton.style';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import {
+  SettingsIconBadge,
+  SettingsIconButton,
+} from './SettingsButton.style.js';
 
 export const SettingsButton = () => {
   const { t } = useTranslation();
@@ -31,10 +35,10 @@ export const SettingsButton = () => {
       >
         {variant ? (
           <SettingsIconBadge variant="dot" color={variant}>
-            <SettingsIcon />
+            <Settings />
           </SettingsIconBadge>
         ) : (
-          <SettingsIcon />
+          <Settings />
         )}
       </SettingsIconButton>
     </Tooltip>

package/components/Header/TransactionHistoryButton.tsx

@@ -1,9 +1,8 @@
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import { Tooltip } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { ReceiptLong } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useNavigateBack } from '../../hooks';
-import { navigationRoutes } from '../../utils';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const TransactionHistoryButton = () => {
   const { t } = useTranslation();
@@ -16,7 +15,7 @@ export const TransactionHistoryButton = () => {
         edge="start"
         onClick={() => navigate(navigationRoutes.transactionHistory)}
       >
-        <ReceiptLongIcon />
+        <ReceiptLong />
       </IconButton>
     </Tooltip>
   );

package/components/Header/WalletHeader.tsx

@@ -1,25 +1,26 @@
 import { getConnectorIcon } from '@lifi/wallet-management';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import WalletIcon from '@mui/icons-material/Wallet';
+import { ExpandMore, Wallet } from '@mui/icons-material';
 import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import type { Account } from '../../hooks';
-import { useAccount, useChain } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider';
-import { HiddenUI } from '../../types';
-import { navigationRoutes, shortenAddress } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { CloseDrawerButton } from './CloseDrawerButton';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { CloseDrawerButton } from './CloseDrawerButton.js';
 import {
   DrawerWalletContainer,
   HeaderAppBar,
   WalletButton,
-} from './Header.style';
-import { WalletMenu } from './WalletMenu';
-import { WalletMenuContainer } from './WalletMenu.style';
+} from './Header.style.js';
+import { WalletMenu } from './WalletMenu.js';
+import { WalletMenuContainer } from './WalletMenu.style.js';
 
 export const WalletHeader: React.FC = () => {
   const { subvariant, hiddenUI } = useWidgetConfig();
@@ -82,13 +83,11 @@ const ConnectButton = () => {
   return (
     <WalletButton
       endIcon={
-        variant !== 'drawer' && subvariant !== 'split' ? (
-          <WalletIcon />
-        ) : undefined
+        variant !== 'drawer' && subvariant !== 'split' ? <Wallet /> : undefined
       }
       startIcon={
         variant === 'drawer' || subvariant === 'split' ? (
-          <WalletIcon sx={{ marginLeft: -0.25 }} />
+          <Wallet sx={{ marginLeft: -0.25 }} />
         ) : undefined
       }
       onClick={
@@ -131,7 +130,7 @@ const ConnectedButton = ({ account }: { account: Account }) => {
   return (
     <>
       <WalletButton
-        endIcon={<ExpandMoreIcon />}
+        endIcon={<ExpandMore />}
         startIcon={
           chain?.logoURI ? (
             <Badge