@lifi/widget 3.6.2 → 3.7.0-beta.0

package/components/Header/WalletHeader.tsx

@@ -1,18 +1,19 @@
-import { getConnectorIcon } from '@lifi/wallet-management';
+import type { Account } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@lifi/wallet-management';
 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/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 { SmallAvatar } from '../Avatar/SmallAvatar.js';
 import { CloseDrawerButton } from './CloseDrawerButton.js';
 import {
   DrawerWalletContainer,
@@ -70,16 +71,16 @@ export const WalletMenuButton: React.FC = () => {
 
 const ConnectButton = () => {
   const { t } = useTranslation();
-  const { pathname } = useLocation();
   const { walletConfig, subvariant, variant } = useWidgetConfig();
-  const navigate = useNavigate();
+  const { openWalletMenu } = useWalletMenu();
   const connect = async () => {
     if (walletConfig?.onConnect) {
       walletConfig.onConnect();
       return;
     }
-    navigate(navigationRoutes.selectWallet);
+    openWalletMenu();
   };
+
   return (
     <WalletButton
       subvariant={subvariant}
@@ -91,9 +92,7 @@ const ConnectButton = () => {
           <Wallet sx={{ marginLeft: -0.25 }} />
         ) : undefined
       }
-      onClick={
-        !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined
-      }
+      onClick={connect}
     >
       {t(`button.connectWallet`)}
     </WalletButton>

package/components/Header/WalletMenu.style.tsx

@@ -17,11 +17,15 @@ export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
     },
     [`& .${menuItemClasses.root}`]: {
       borderRadius: theme.shape.borderRadiusSecondary,
-      padding: theme.spacing(1, 2, 1, 1),
+      padding: theme.spacing(1, 0, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
         color: theme.palette.text.primary,
       },
+      ':hover': {
+        background: 'none',
+        cursor: 'default',
+      },
     },
   },
 }));

package/components/Header/WalletMenu.tsx

@@ -1,5 +1,9 @@
 import { ChainType } from '@lifi/sdk';
-import { getConnectorIcon } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   OpenInNewRounded,
@@ -14,25 +18,22 @@ import {
   MenuItem,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { AvatarMasked } from '../Avatar/Avatar.style.js';
-import { SmallAvatar } from '../SmallAvatar.js';
+import { SmallAvatar } from '../Avatar/SmallAvatar.js';
 import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js';
 import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js';
+import { UTXODisconnectIconButton } from './UTXODisconnectIconButton.js';
 
 export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
   const { accounts } = useAccount();
   const { getChainById } = useAvailableChains();
+  const { openWalletMenu } = useWalletMenu();
   const connect = async () => {
-    navigate(navigationRoutes.selectWallet);
+    openWalletMenu();
     onClose();
   };
   const { getAddressLink } = useExplorer();
@@ -49,7 +50,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
           };
 
           return (
-            <MenuItem key={account.address}>
+            <MenuItem key={account.address} disableTouchRipple>
               <Box flex={1} display="flex" alignItems="center">
                 {chain?.logoURI ? (
                   <Badge
@@ -82,7 +83,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                 )}
                 {walletAddress}
               </Box>
-              <Box ml={1}>
+              <Box ml={2}>
                 <IconButton size="medium" onClick={handleCopyAddress}>
                   <ContentCopyRounded />
                 </IconButton>
@@ -103,26 +104,24 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                   <EVMDisconnectIconButton connector={account.connector} />
                 ) : account.chainType === ChainType.SVM ? (
                   <SVMDisconnectIconButton />
+                ) : account.chainType === ChainType.UTXO ? (
+                  <UTXODisconnectIconButton connector={account.connector} />
                 ) : null}
               </Box>
             </MenuItem>
           );
         })}
       </Box>
-      {!pathname.includes(navigationRoutes.selectWallet) ? (
-        <Button
-          onClick={connect}
-          fullWidth
-          startIcon={<PowerSettingsNewRounded />}
-          sx={{
-            marginTop: 1,
-          }}
-        >
-          {accounts.length > 1
-            ? t(`button.changeWallet`)
-            : t(`button.connectWallet`)}
-        </Button>
-      ) : null}
+      <Button
+        onClick={connect}
+        fullWidth
+        startIcon={<PowerSettingsNewRounded />}
+        sx={{
+          marginTop: 1,
+        }}
+      >
+        {t(`button.connectAnotherWallet`)}
+      </Button>
     </>
   );
 };

package/components/Routes/RoutesExpanded.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { Collapse, Grow, Stack, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { RouteObject } from 'react-router-dom';
 import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,9 +1,9 @@
+import { useAccount } from '@lifi/wallet-management';
 import { CloseRounded } from '@mui/icons-material';
 import { Box, Collapse } from '@mui/material';
 import { useEffect, useRef, type MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';

package/components/StepActions/StepActions.tsx

@@ -18,8 +18,8 @@ import { LiFiToolLogo } from '../../icons/lifi.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { HiddenUI } from '../../types/widget.js';
 import { formatTokenAmount } from '../../utils/format.js';
+import { SmallAvatar } from '../Avatar/SmallAvatar.js';
 import { CardIconButton } from '../Card/CardIconButton.js';
-import { SmallAvatar } from '../SmallAvatar.js';
 import {
   StepAvatar,
   StepConnector,

package/components/Token/Token.tsx

@@ -8,8 +8,8 @@ import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
 import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
+import { SmallAvatar } from '../Avatar/SmallAvatar.js';
 import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { SmallAvatar } from '../SmallAvatar.js';
 import { TextFitter } from '../TextFitter/TextFitter.js';
 import { TextSecondary, TextSecondaryContainer } from './Token.style.js';
 

package/components/TokenList/TokenList.tsx

@@ -1,6 +1,6 @@
+import { useAccount } from '@lifi/wallet-management';
 import { Box } from '@mui/material';
 import type { FC } from 'react';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
 import { useTokenBalances } from '../../hooks/useTokenBalances.js';

package/components/TokenList/TokenListItem.tsx

@@ -1,3 +1,4 @@
+import { ChainType } from '@lifi/sdk';
 import { OpenInNewRounded } from '@mui/icons-material';
 import {
   Avatar,
@@ -26,7 +27,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
   start,
   token,
   chain,
-  showBalance,
+  accountAddress,
   isBalanceLoading,
   startAdornment,
   endAdornment,
@@ -46,7 +47,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
       <TokenListItemButton
         token={token}
         chain={chain}
-        showBalance={showBalance}
+        accountAddress={accountAddress}
         isBalanceLoading={isBalanceLoading}
         onClick={handleClick}
       />
@@ -59,7 +60,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   onClick,
   token,
   chain,
-  showBalance,
+  accountAddress,
   isBalanceLoading,
 }) => {
   const { t } = useTranslation();
@@ -75,8 +76,15 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   const timeoutId = useRef<ReturnType<typeof setTimeout>>();
   const [showAddress, setShowAddress] = useState(false);
 
+  const tokenAddress =
+    chain?.chainType === ChainType.UTXO ? accountAddress : token.address;
+
   const onMouseEnter = () => {
-    timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+    timeoutId.current = setTimeout(() => {
+      if (tokenAddress) {
+        setShowAddress(true);
+      }
+    }, 350);
   };
 
   const onMouseLeave = () => {
@@ -128,12 +136,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             >
               <Box display="flex">
                 <Box display="flex" alignItems="center" pt={0.125}>
-                  {shortenAddress(token.address)}
+                  {shortenAddress(tokenAddress)}
                 </Box>
                 <IconButton
                   size="small"
                   LinkComponent={Link}
-                  href={getAddressLink(token.address, chain)}
+                  href={getAddressLink(tokenAddress!, chain)}
                   target="_blank"
                   rel="nofollow noreferrer"
                   onClick={(e) => e.stopPropagation()}
@@ -145,7 +153,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
           </Box>
         }
       />
-      {showBalance ? (
+      {accountAddress ? (
         isBalanceLoading ? (
           <TokenAmountSkeleton />
         ) : (

package/components/TokenList/VirtualizedTokenList.tsx

@@ -127,7 +127,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             token={currentToken}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
-            showBalance={account.isConnected}
+            accountAddress={account.address}
             startAdornment={
               startAdornmentLabel ? (
                 <Typography

package/components/TokenList/types.ts

@@ -1,6 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk';
+import type { Account } from '@lifi/wallet-management';
 import type { MouseEventHandler, MutableRefObject } from 'react';
-import type { Account } from '../../hooks/useAccount.js';
 import type { FormType } from '../../stores/form/types.js';
 import type { TokenAmount } from '../../types/token.js';
 
@@ -30,7 +30,7 @@ export interface TokenListItemBaseProps {
 }
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
-  showBalance?: boolean;
+  accountAddress?: string;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;
@@ -40,7 +40,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 
 export interface TokenListItemButtonProps {
   onClick?: MouseEventHandler<HTMLDivElement>;
-  showBalance?: boolean;
+  accountAddress?: string;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;

package/components/TokenRate/TokenRate.tsx

@@ -18,13 +18,13 @@ interface TokenRateState {
   toggleIsForward(): void;
 }
 
-const useTokenRateStore = create<TokenRateState>((set) => ({
+const useTokenRate = create<TokenRateState>((set) => ({
   isForward: true,
   toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
 }));
 
 export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
-  const { isForward, toggleIsForward } = useTokenRateStore();
+  const { isForward, toggleIsForward } = useTokenRate();
 
   const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
     e.stopPropagation();

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.6.2';
+export const version = '3.7.0-beta.0';

package/hooks/useAvailableChains.ts

@@ -2,32 +2,31 @@ import type { ExtendedChain } from '@lifi/sdk';
 import { ChainType, config, getChains } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { isItemAllowed } from '../utils/item.js';
 
-const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO];
 
-export const useAvailableChains = () => {
+export const useAvailableChains = (chainTypes?: ChainType[]) => {
   const { chains } = useWidgetConfig();
-  const { providers } = useHasExternalWalletProvider();
+  // const { providers } = useHasExternalWalletProvider();
   const { data, isLoading } = useQuery({
     queryKey: [
       'chains',
-      providers,
+      // providers,
       chains?.types,
       chains?.allow,
       chains?.deny,
       chains?.from,
       chains?.to,
     ] as const,
-    queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
-      const chainTypesRequest = (
-        providers.length > 0 ? providers : supportedChainTypes
-      ).filter((chainType) => isItemAllowed(chainType, chainTypes));
+    queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
+      const chainTypesRequest = supportedChainTypes
+        // providers.length > 0 ? providers : supportedChainTypes
+        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig));
 
       const availableChains = await getChains({
-        chainTypes: chainTypesRequest,
+        chainTypes: chainTypes || chainTypesRequest,
       });
       config.setChains(availableChains);
       return availableChains;

package/hooks/useChains.ts

@@ -1,10 +1,11 @@
+import type { ChainType } from '@lifi/sdk';
 import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { FormType } from '../stores/form/types.js';
 import { isItemAllowed } from '../utils/item.js';
 import { useAvailableChains } from './useAvailableChains.js';
 
-export const useChains = (type?: FormType) => {
+export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
   const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
@@ -17,11 +18,13 @@ export const useChains = (type?: FormType) => {
       ? availableChains?.filter(
           (chain) =>
             isItemAllowed(chain.id, chains) &&
-            isItemAllowed(chain.id, chains?.[type]),
+            isItemAllowed(chain.id, chains?.[type]) &&
+            // Check against chain types if they are provided
+            (chainTypes?.includes(chain.chainType) ?? true),
         )
       : availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
     return filteredChains;
-  }, [availableChains, chains, type]);
+  }, [availableChains, chainTypes, chains, type]);
 
   return {
     chains: filteredChains,

package/hooks/useFromTokenSufficiency.ts

@@ -1,9 +1,9 @@
 import type { RouteExtended } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { parseUnits } from 'viem';
 import { useFieldValues } from '../stores/form/useFieldValues.js';
 import { isRouteDone } from '../stores/routes/utils.js';
-import { useAccount } from './useAccount.js';
 import { useTokenAddressBalance } from './useTokenAddressBalance.js';
 import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 

package/hooks/useGasSufficiency.ts

@@ -1,7 +1,7 @@
 import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery } from '@tanstack/react-query';
 import type { Connector } from 'wagmi';
-import { useAccount } from './useAccount.js';
 import { useAvailableChains } from './useAvailableChains.js';
 import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
@@ -44,7 +44,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
-                (amount, gasCost) => amount + BigInt(gasCost.amount),
+                (amount, gasCost) =>
+                  amount + BigInt(Number(gasCost.amount).toFixed(0)),
                 0n,
               );
               groupedGasCosts[token.chainId] = {
@@ -61,7 +62,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             if (nonIncludedFeeCosts?.length) {
               const { token } = nonIncludedFeeCosts[0];
               const feeCostAmount = nonIncludedFeeCosts.reduce(
-                (amount, feeCost) => amount + BigInt(feeCost.amount),
+                (amount, feeCost) =>
+                  amount + BigInt(Number(feeCost.amount).toFixed(0)),
                 0n,
               );
               groupedGasCosts[token.chainId] = {

package/hooks/useProcessMessage.ts

@@ -193,6 +193,10 @@ export function getProcessMessage(
         title = t(`error.title.transactionCanceled`);
         message = getDefaultErrorMessage('error.message.transactionCanceled');
         break;
+      case LiFiErrorCode.TransactionConflict:
+        title = t(`error.title.transactionConflict`);
+        message = getDefaultErrorMessage('error.message.transactionConflict');
+        break;
       case LiFiErrorCode.ExchangeRateUpdateCanceled:
         title = t(`error.title.exchangeRateUpdateCanceled`);
         message = getDefaultErrorMessage();

package/hooks/useRouteExecution.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
@@ -15,7 +16,6 @@ import {
   isRouteFailed,
 } from '../stores/routes/utils.js';
 import { WidgetEvent } from '../types/events.js';
-import { useAccount } from './useAccount.js';
 import { useWidgetEvents } from './useWidgetEvents.js';
 
 interface RouteExecutionProps {

package/hooks/useRoutes.ts

@@ -1,5 +1,6 @@
 import type { Route, RoutesResponse, Token } from '@lifi/sdk';
 import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { parseUnits } from 'viem';
@@ -10,7 +11,6 @@ import { useSettings } from '../stores/settings/useSettings.js';
 import { defaultSlippage } from '../stores/settings/useSettingsStore.js';
 import { WidgetEvent } from '../types/events.js';
 import { getChainTypeFromAddress } from '../utils/chainType.js';
-import { useAccount } from './useAccount.js';
 import { useChain } from './useChain.js';
 import { useDebouncedWatch } from './useDebouncedWatch.js';
 import { useGasRefuel } from './useGasRefuel.js';

package/hooks/useScrollableContainer.ts

@@ -1,7 +1,12 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
-import { getScrollableContainer } from '../utils/elements.js';
+import { ElementId, createElementId } from '../utils/elements.js';
 import { useDefaultElementId } from './useDefaultElementId.js';
 
+export const getScrollableContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+
 export const useGetScrollableContainer = () => {
   const elementId = useDefaultElementId();
   const getContainer = useCallback(

package/hooks/useSetContentHeight.ts

@@ -1,28 +1,24 @@
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect } from 'react';
-import { getRelativeContainer } from '../utils/elements.js';
 import { useDefaultElementId } from './useDefaultElementId.js';
-
-// NOTE: this hook is implicitly tied to the widget height functionality in the
-//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
-//   CSS changes in those components can have implications for the functionality in this hook
+import { getScrollableContainer } from './useScrollableContainer.js';
 
 export const useSetContentHeight = (
   ref: MutableRefObject<HTMLElement | undefined>,
 ) => {
   const elementId = useDefaultElementId();
   useLayoutEffect(() => {
-    const relativeContainer = getRelativeContainer(elementId);
+    const scrollableContainer = getScrollableContainer(elementId);
     if (
-      !relativeContainer ||
+      !scrollableContainer ||
       !ref.current ||
-      ref.current?.clientHeight <= relativeContainer?.clientHeight
+      ref.current?.clientHeight <= scrollableContainer?.clientHeight
     ) {
       return;
     }
-    relativeContainer.style.minHeight = `${ref.current.clientHeight}px`;
+    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
     return () => {
-      relativeContainer.style.removeProperty('min-height');
+      scrollableContainer.style.removeProperty('height');
     };
   }, [elementId, ref]);
 };

package/hooks/useTokenBalance.ts

@@ -1,8 +1,8 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useAccount } from './useAccount.js';
 
 const defaultRefetchInterval = 30_000;
 

package/hooks/useTokenBalances.ts

@@ -1,8 +1,8 @@
 import { getTokenBalances } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery } from '@tanstack/react-query';
 import { formatUnits } from 'viem';
 import type { TokenAmount } from '../types/token.js';
-import { useAccount } from './useAccount.js';
 import { useTokens } from './useTokens.js';
 
 const defaultRefetchInterval = 32_000;

package/hooks/useTokens.ts

@@ -9,7 +9,8 @@ export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens } = useWidgetConfig();
   const { data, isLoading } = useQuery({
     queryKey: ['tokens'],
-    queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
+    queryFn: () =>
+      getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM, ChainType.UTXO] }),
     refetchInterval: 3_600_000,
     staleTime: 3_600_000,
   });

package/hooks/useTransactionDetails.ts

@@ -1,11 +1,11 @@
 import type { FullStatusData } from '@lifi/sdk';
 import { getStatus, type StatusResponse } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import {
   keepPreviousData,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useAccount } from './useAccount.js';
 
 export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount();

package/hooks/useTransactionHistory.ts

@@ -1,8 +1,8 @@
 import type { FullStatusData, StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import type { QueryFunction } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
-import { useAccount } from './useAccount.js';
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount();