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

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,24 +1,25 @@
 import { Collapse } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useAccount, useToAddressRequirements } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import {
-  useBookmarks,
-  useFieldValues,
-  useSendToWalletStore,
-  useSettings,
-} from '../../stores';
-import { DisabledUI, HiddenUI } from '../../types';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { DisabledUI, HiddenUI } from '../../types/widget.js';
 import {
   defaultChainIdsByType,
   getChainTypeFromAddress,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
-import { AccountAvatar } from '../AccountAvatar';
-import { Card, CardRowContainer, CardTitle } from '../Card';
-import { SendToWalletCardHeader } from './SendToWallet.style';
+} from '../../utils/chainType.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { AccountAvatar } from '../AccountAvatar.js';
+import { Card } from '../Card/Card.js';
+import { CardRowContainer } from '../Card/CardButton.style.js';
+import { CardTitle } from '../Card/CardTitle.js';
+import { SendToWalletCardHeader } from './SendToWallet.style.js';
 
 export const SendToWalletButton = () => {
   const { t } = useTranslation();

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,16 +1,15 @@
-import WalletIcon from '@mui/icons-material/Wallet';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
+import { Wallet } from '@mui/icons-material';
+import { Button, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements, useWidgetEvents } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import {
-  useBookmarkActions,
-  useFieldActions,
-  useSendToWalletStore,
-  useSettings,
-} from '../../stores';
-import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { WidgetEvent } from '../../types/events.js';
+import { DisabledUI, HiddenUI } from '../../types/widget.js';
 
 export const SendToWalletExpandButton: React.FC = () => {
   const { t } = useTranslation();
@@ -62,7 +61,7 @@ export const SendToWalletExpandButton: React.FC = () => {
           marginLeft: 1,
         }}
       >
-        <WalletIcon />
+        <Wallet />
       </Button>
     </Tooltip>
   );

package/components/SendToWallet/index.ts

@@ -1,3 +1,3 @@
-export * from './SendToWalletButton';
-export * from './SendToWalletExpandButton';
-export * from './SendToWallet.style';
+export * from './SendToWalletButton.js';
+export * from './SendToWalletExpandButton.js';
+export * from './SendToWallet.style.js';

package/components/SettingsListItemButton.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { ListItemButton as ListItemButtonBase } from './ListItemButton';
+import { ListItemButton as ListItemButtonBase } from './ListItemButton.js';
 
 export const SettingsListItemButton = styled(ListItemButtonBase)(
   ({ theme }) => ({

package/components/Step/CircularProgress.tsx

@@ -1,13 +1,15 @@
 import type { Process } from '@lifi/sdk';
-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 { darken } from '@mui/material/styles';
 import {
   CircularIcon,
   CircularProgressPending,
-} from './CircularProgress.style';
+} from './CircularProgress.style.js';
 
 export function CircularProgress({ process }: { process: Process }) {
   return (
@@ -16,7 +18,7 @@ export function CircularProgress({ process }: { process: Process }) {
         <CircularProgressPending size={40} />
       ) : null}
       {process.status === 'ACTION_REQUIRED' ? (
-        <InfoRoundedIcon
+        <InfoRounded
           color="info"
           sx={{
             position: 'absolute',
@@ -26,7 +28,7 @@ export function CircularProgress({ process }: { process: Process }) {
       ) : null}
       {process.status === 'DONE' &&
       (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
-        <WarningRoundedIcon
+        <WarningRounded
           sx={(theme) => ({
             position: 'absolute',
             fontSize: '1.5rem',
@@ -34,7 +36,7 @@ export function CircularProgress({ process }: { process: Process }) {
           })}
         />
       ) : process.status === 'DONE' ? (
-        <DoneIcon
+        <Done
           color="success"
           sx={{
             position: 'absolute',
@@ -43,7 +45,7 @@ export function CircularProgress({ process }: { process: Process }) {
         />
       ) : null}
       {process.status === 'FAILED' ? (
-        <ErrorRoundedIcon
+        <ErrorRounded
           color="error"
           sx={{
             position: 'absolute',

package/components/Step/DestinationWalletAddress.tsx

@@ -1,10 +1,9 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
-import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
-import WalletIcon from '@mui/icons-material/Wallet';
+import { LinkRounded, Wallet } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { CircularIcon } from './CircularProgress.style';
-import { LinkButton } from './StepProcess.style';
+import { CircularIcon } from './CircularProgress.style.js';
+import { LinkButton } from './StepProcess.style.js';
 
 export const DestinationWalletAddress: React.FC<{
   step: LiFiStepExtended;
@@ -22,7 +21,7 @@ export const DestinationWalletAddress: React.FC<{
         }}
       >
         <CircularIcon status={isDone ? 'DONE' : 'NOT_STARTED'}>
-          <WalletIcon
+          <Wallet
             color={isDone ? 'success' : 'inherit'}
             sx={{
               position: 'absolute',
@@ -46,7 +45,7 @@ export const DestinationWalletAddress: React.FC<{
           target="_blank"
           rel="nofollow noreferrer"
         >
-          <LinkRoundedIcon />
+          <LinkRounded />
         </LinkButton>
       </Box>
     </Box>

package/components/Step/Step.tsx

@@ -2,15 +2,16 @@
 import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Card, CardTitle } from '../../components/Card';
-import { StepActions } from '../../components/StepActions';
-import { Token } from '../../components/Token';
-import { useAvailableChains } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { shortenAddress } from '../../utils';
-import { DestinationWalletAddress } from './DestinationWalletAddress';
-import { StepProcess } from './StepProcess';
-import { StepTimer } from './StepTimer';
+import { Card } from '../../components/Card/Card.js';
+import { CardTitle } from '../../components/Card/CardTitle.js';
+import { StepActions } from '../../components/StepActions/StepActions.js';
+import { Token } from '../../components/Token/Token.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { DestinationWalletAddress } from './DestinationWalletAddress.js';
+import { StepProcess } from './StepProcess.js';
+import { StepTimer } from './StepTimer.js';
 
 export const Step: React.FC<{
   step: LiFiStepExtended;

package/components/Step/StepList.tsx

@@ -1,8 +1,8 @@
 import type { RouteExtended, TokenAmount } from '@lifi/sdk';
 import { Fragment } from 'react';
-import { StepDivider } from '../../components/StepDivider';
-import type { WidgetSubvariant } from '../../types';
-import { Step } from './Step';
+import { StepDivider } from '../../components/StepDivider/StepDivider.js';
+import type { WidgetSubvariant } from '../../types/widget.js';
+import { Step } from './Step.js';
 
 export const getStepList = (
   route?: RouteExtended,

package/components/Step/StepProcess.tsx

@@ -1,9 +1,9 @@
 import type { LiFiStep, Process } from '@lifi/sdk';
-import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import { LinkRounded } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
-import { useProcessMessage } from '../../hooks';
-import { CircularProgress } from './CircularProgress';
-import { LinkButton } from './StepProcess.style';
+import { useProcessMessage } from '../../hooks/useProcessMessage.js';
+import { CircularProgress } from './CircularProgress.js';
+import { LinkButton } from './StepProcess.style.js';
 
 export const StepProcess: React.FC<{
   step: LiFiStep;
@@ -35,7 +35,7 @@ export const StepProcess: React.FC<{
             target="_blank"
             rel="nofollow noreferrer"
           >
-            <LinkRoundedIcon />
+            <LinkRounded />
           </LinkButton>
         ) : null}
       </Box>

package/components/Step/index.ts

@@ -1,2 +1,2 @@
-export * from './Step';
-export * from './StepList';
+export * from './Step.js';
+export * from './StepList.js';

package/components/StepActions/StepActions.tsx

@@ -1,7 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material';
 import type { StepIconProps } from '@mui/material';
 import {
   Badge,
@@ -15,23 +13,23 @@ import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import { useAvailableChains } from '../../hooks';
-import { LiFiToolLogo } from '../../icons';
-import { useWidgetConfig } from '../../providers';
-import type { WidgetSubvariant } from '../../types';
-import { formatTokenAmount } from '../../utils';
-import { CardIconButton } from '../Card';
-import { SmallAvatar } from '../SmallAvatar';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { LiFiToolLogo } from '../../icons/lifi.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import type { WidgetSubvariant } from '../../types/widget.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { CardIconButton } from '../Card/CardIconButton.js';
+import { SmallAvatar } from '../SmallAvatar.js';
 import {
   StepAvatar,
   StepConnector,
   StepContent,
   StepLabel,
   StepLabelTypography,
-} from './StepActions.style';
-import { StepFeeBreakdown } from './StepFeeBreakdown';
-import { StepFees } from './StepFees';
-import type { StepActionsProps, StepDetailsLabelProps } from './types';
+} from './StepActions.style.js';
+import { StepFeeBreakdown } from './StepFeeBreakdown.js';
+import { StepFees } from './StepFees.js';
+import type { StepActionsProps, StepDetailsLabelProps } from './types.js';
 
 export const StepActions: React.FC<StepActionsProps> = ({
   step,
@@ -88,7 +86,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
         </Box>
         {dense ? (
           <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            {cardExpanded ? <ExpandLess /> : <ExpandMore />}
           </CardIconButton>
         ) : null}
       </Box>
@@ -210,7 +208,7 @@ export const StepDetailsContent: React.FC<{
       {step.action.fromToken.symbol}
       {showToAmount ? (
         <>
-          <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
+          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
           {t('format.number', {
             value: formatTokenAmount(
               BigInt(step.execution?.toAmount ?? step.estimate.toAmount),

package/components/StepActions/StepFeeBreakdown.tsx

@@ -1,10 +1,10 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
-import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { MonetizationOn } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import { getStepFeeCostsBreakdown } from '../../utils';
+import { getStepFeeCostsBreakdown } from '../../utils/fees.js';
 
 export const StepFeeBreakdown: React.FC<{
   step: LiFiStepExtended;
@@ -88,7 +88,7 @@ export const StepFeeBreakdown: React.FC<{
     <Box mt={1.5}>
       <Box display="flex" alignItems="center">
         <Typography ml={1} mr={3} height={24} color="text.secondary">
-          <MonetizationOnIcon />
+          <MonetizationOn />
         </Typography>
         <Typography
           fontSize={16}

package/components/StepActions/StepFees.tsx

@@ -2,7 +2,7 @@ import type { LiFiStepExtended } from '@lifi/sdk';
 import type { TypographyProps } from '@mui/material';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { getStepFeeCostsBreakdown } from '../../utils';
+import { getStepFeeCostsBreakdown } from '../../utils/fees.js';
 
 export const StepFees: React.FC<
   TypographyProps & {

package/components/StepActions/index.ts

@@ -1 +1 @@
-export { StepActions } from './StepActions';
+export { StepActions } from './StepActions.js';

package/components/StepActions/types.ts

@@ -1,6 +1,6 @@
 import type { LiFiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import type { WidgetSubvariant } from '../../types';
+import type { WidgetSubvariant } from '../../types/widget.js';
 
 export interface StepActionsProps extends BoxProps {
   step: LiFiStep;

package/components/StepDivider/StepDivider.tsx

@@ -1,5 +1,5 @@
 import { Divider } from '@mui/material';
-import { Container } from './StepDivider.style';
+import { Container } from './StepDivider.style.js';
 
 export const StepDivider: React.FC = () => {
   return (

package/components/StepDivider/index.ts

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

package/components/Tabs/Tabs.style.tsx

@@ -6,7 +6,7 @@ import {
   tabsClasses,
 } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { getCardFieldsetBackgroundColor } from '../../utils';
+import { getCardFieldsetBackgroundColor } from '../../utils/colors.js';
 
 export const Tabs = styled(MuiTabs)(({ theme }) => ({
   backgroundColor: getCardFieldsetBackgroundColor(theme),

package/components/Tabs/index.ts

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

package/components/TextFitter/TextFitter.tsx

@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import type { TextFitterProps } from './types';
+import type { TextFitterProps } from './types.js';
 
 const initialState = {
   x: 0,

package/components/TextFitter/index.ts

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

package/components/Token/Token.tsx

@@ -4,12 +4,16 @@ import type { BoxProps } from '@mui/material';
 import { Box, Grow, Skeleton } from '@mui/material';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useChain, useToken } from '../../hooks';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { TextFitter } from '../TextFitter';
-import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
-import { TextSecondary, TextSecondaryContainer } from './Token.style';
+import { useChain } from '../../hooks/useChain.js';
+import { useToken } from '../../hooks/useToken.js';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { TextFitter } from '../TextFitter/TextFitter.js';
+import {
+  TokenAvatar,
+  TokenAvatarSkeleton,
+} from '../TokenAvatar/TokenAvatar.js';
+import { TextSecondary, TextSecondaryContainer } from './Token.style.js';
 
 interface TokenProps {
   token: TokenAmount;

package/components/Token/index.ts

@@ -1,2 +1,2 @@
-export * from './Token';
-export * from './Token.style';
+export * from './Token.js';
+export * from './Token.style.js';

package/components/TokenAvatar/TokenAvatar.tsx

@@ -1,9 +1,10 @@
 import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 import { Avatar, Badge, Skeleton } from '@mui/material';
-import { useChain, useToken } from '../../hooks';
-import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
-import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
+import { useChain } from '../../hooks/useChain.js';
+import { useToken } from '../../hooks/useToken.js';
+import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar.js';
+import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style.js';
 
 export const TokenAvatarFallback: React.FC<{
   token?: StaticToken;

package/components/TokenAvatar/index.ts

@@ -1,2 +1,2 @@
-export * from './TokenAvatar';
-export * from './TokenAvatar.style';
+export * from './TokenAvatar.js';
+export * from './TokenAvatar.style.js';

package/components/TokenList/TokenList.style.tsx

@@ -1,7 +1,7 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
 import { IconButton as MuiIconButton } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { ListItem as ListItemBase } from '../ListItem';
+import { ListItem as ListItemBase } from '../ListItem/ListItem.js';
 
 export const ListItem = styled(ListItemBase)(({ theme }) => ({
   position: 'absolute',

package/components/TokenList/TokenList.tsx

@@ -1,19 +1,18 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useRef } from 'react';
-import {
-  useAccount,
-  useChain,
-  useDebouncedWatch,
-  useTokenBalances,
-  useTokenSearch,
-} from '../../hooks';
-import { FormKeyHelper, useFieldValues } from '../../stores';
-import type { TokenAmount } from '../../types';
-import { TokenNotFound } from './TokenNotFound';
-import { VirtualizedTokenList } from './VirtualizedTokenList';
-import type { TokenListProps } from './types';
-import { useTokenSelect } from './useTokenSelect';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
+import { useTokenBalances } from '../../hooks/useTokenBalances.js';
+import { useTokenSearch } from '../../hooks/useTokenSearch.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import type { TokenAmount } from '../../types/token.js';
+import { TokenNotFound } from './TokenNotFound.js';
+import { VirtualizedTokenList } from './VirtualizedTokenList.js';
+import type { TokenListProps } from './types.js';
+import { useTokenSelect } from './useTokenSelect.js';
 
 export const TokenList: FC<TokenListProps> = ({
   formType,

package/components/TokenList/TokenListItem.tsx

@@ -1,4 +1,4 @@
-import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import { OpenInNewRounded } from '@mui/icons-material';
 import {
   Avatar,
   Box,
@@ -13,14 +13,11 @@ import type { MouseEventHandler } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import {
-  formatTokenAmount,
-  formatTokenPrice,
-  shortenAddress,
-} from '../../utils';
-import { ListItemButton } from '../ListItem';
-import { IconButton, ListItem } from './TokenList.style';
-import type { TokenListItemButtonProps, TokenListItemProps } from './types';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { ListItemButton } from '../ListItem/ListItemButton.js';
+import { IconButton, ListItem } from './TokenList.style.js';
+import type { TokenListItemButtonProps, TokenListItemProps } from './types.js';
 
 export const TokenListItem: React.FC<TokenListItemProps> = ({
   onClick,
@@ -138,7 +135,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                   rel="nofollow noreferrer"
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <OpenInNewIcon />
+                  <OpenInNewRounded />
                 </IconButton>
               </Box>
             </Slide>

package/components/TokenList/TokenNotFound.tsx

@@ -1,9 +1,10 @@
-import SearchOffIcon from '@mui/icons-material/SearchOff';
+import { SearchOff } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { useFieldValues, FormKeyHelper } from '../../stores';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
 
 export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
@@ -21,7 +22,7 @@ export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
       }}
     >
       <Typography fontSize={48} lineHeight={1}>
-        <SearchOffIcon fontSize="inherit" />
+        <SearchOff fontSize="inherit" />
       </Typography>
       <Typography
         fontSize={14}

package/components/TokenList/VirtualizedTokenList.tsx

@@ -3,9 +3,9 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { TokenAmount } from '../../types';
-import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
-import type { VirtualizedTokenListProps } from './types';
+import type { TokenAmount } from '../../types/token.js';
+import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js';
+import type { VirtualizedTokenListProps } from './types.js';
 
 export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   account,

package/components/TokenList/index.ts

@@ -1,2 +1,2 @@
-export * from './TokenList';
-export * from './useTokenSelect';
+export * from './TokenList.js';
+export * from './useTokenSelect.js';

package/components/TokenList/types.ts

@@ -1,8 +1,8 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import type { MouseEventHandler, MutableRefObject } from 'react';
-import type { Account } from '../../hooks';
-import type { FormType } from '../../stores';
-import type { TokenAmount } from '../../types';
+import type { Account } from '../../hooks/useAccount.js';
+import type { FormType } from '../../stores/form/types.js';
+import type { TokenAmount } from '../../types/token.js';
 
 export interface TokenListProps {
   formType: FormType;

package/components/TokenList/useTokenSelect.ts

@@ -1,12 +1,10 @@
 import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
 import { useCallback } from 'react';
-import { useWidgetConfig } from '../../providers';
-import type { FormType } from '../../stores';
-import {
-  FormKeyHelper,
-  useFieldActions,
-  useFieldController,
-} from '../../stores';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const tokenKey = FormKeyHelper.getTokenKey(formType);

package/config/theme.ts

@@ -13,7 +13,7 @@ import {
   keyframes,
   lighten,
 } from '@mui/material/styles';
-import type { ThemeConfig } from '../types';
+import type { ThemeConfig } from '../types/widget.js';
 
 // https://mui.com/customization/palette/
 declare module '@mui/material/styles' {

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.23';
+export const version = '3.0.0-alpha.25';