@lifi/widget 3.6.1 → 3.7.0-beta.0

package/_esm/utils/navigationRoutes.js

@@ -7,7 +7,6 @@ export const navigationRoutes = {
     fromToken: 'from-token',
     languages: 'languages',
     routes: 'routes',
-    selectWallet: 'select-wallet',
     settings: 'settings',
     toChain: 'to-chain',
     toToken: 'to-token',
@@ -29,7 +28,6 @@ export const stickyHeaderRoutes = [
     navigationRoutes.fromChain,
     navigationRoutes.home,
     navigationRoutes.routes,
-    navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.toChain,
     navigationRoutes.toTokenNative,
@@ -50,7 +48,6 @@ export const backButtonRoutes = [
     navigationRoutes.fromChain,
     navigationRoutes.fromToken,
     navigationRoutes.routes,
-    navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.toChain,
     navigationRoutes.toToken,

package/_esm/utils/navigationRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigationRoutes.js","sourceRoot":"","sources":["../../utils/navigationRoutes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,qBAAqB;IACzC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,eAAe;IAC7B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,UAAU;IACnB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,qBAAqB;IACzC,oBAAoB,EAAE,uBAAuB;IAC7C,kBAAkB,EAAE,qBAAqB;IACzC,YAAY,EAAE,gBAAgB;IAC9B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,gBAAgB;IAC/B,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,oBAAoB;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,IAAI;IACrB,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAC"}
+{"version":3,"file":"navigationRoutes.js","sourceRoot":"","sources":["../../utils/navigationRoutes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,qBAAqB;IACzC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,UAAU;IACnB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,qBAAqB;IACzC,oBAAoB,EAAE,uBAAuB;IAC7C,kBAAkB,EAAE,qBAAqB;IACzC,YAAY,EAAE,gBAAgB;IAC9B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,gBAAgB;IAC/B,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,oBAAoB;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,IAAI;IACrB,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAC"}

package/_esm/utils/wallet.js

@@ -1,4 +1,4 @@
 export const shortenAddress = (address) => address
-    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    ? `${address.substring(0, 7)}...${address.substring(address.length - 5)}`
     : null;
 //# sourceMappingURL=wallet.js.map

package/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -20,7 +20,7 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
 export const ListItem = styled(MuiListItem, {
   shouldForwardProp: (prop) => prop !== 'disableRipple',
 })(({ theme }) => ({
-  padding: theme.spacing(0, 1.5),
+  padding: theme.spacing(0, 2),
   [`.${listItemSecondaryActionClasses.root}`]: {
     right: theme.spacing(3),
   },

package/components/AmountInput/AmountInputEndAdornment.tsx

@@ -32,11 +32,7 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
     }
     const chain = getChainById(chainId);
     let maxAmount = token.amount;
-    if (
-      chain?.nativeToken.address === tokenAddress &&
-      data?.available &&
-      data?.recommended
-    ) {
+    if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
       const recommendedAmount = BigInt(data.recommended.amount) / 2n;
       if (token.amount > recommendedAmount) {
         maxAmount = token.amount - recommendedAmount;

package/components/Avatar/AccountAvatar.tsx

@@ -1,15 +1,15 @@
+import type { Account } from '@lifi/wallet-management';
 import { getConnectorIcon } from '@lifi/wallet-management';
 import { Wallet } from '@mui/icons-material';
 import { Badge } from '@mui/material';
-import type { Account } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import type { ToAddress } from '../../types/widget.js';
-import { SmallAvatar } from '../SmallAvatar.js';
 import {
   AvatarDefault,
   AvatarDefaultBadge,
   AvatarMasked,
 } from './Avatar.style.js';
+import { SmallAvatar } from './SmallAvatar.js';
 
 interface AccountAvatarProps {
   chainId?: number;

package/components/Avatar/Avatar.style.tsx

@@ -3,7 +3,6 @@ import {
   AvatarGroup,
   Box,
   Avatar as MuiAvatar,
-  Skeleton,
   avatarClasses,
   badgeClasses,
   styled,
@@ -14,17 +13,20 @@ export const AvatarMasked = styled(MuiAvatar)(({ theme }) => ({
   mask: avatarMask16,
 }));
 
-export const AvatarSkeleton = styled(Skeleton)(({ theme }) => ({
-  mask: avatarMask16,
-}));
-
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
-    marginLeft: theme.spacing(-1),
     boxSizing: 'border-box',
   },
+  [`& .${avatarClasses.root}`]: {
+    border: 'none',
+    marginLeft: 0,
+  },
+  [`& .${badgeClasses.root}:first-child`]: {
+    marginLeft: theme.spacing(-1),
+    border: 'none',
+  },
   [`& .${badgeClasses.root}:last-child`]: {
-    marginLeft: theme.spacing(1),
+    border: 'none',
   },
 }));
 
@@ -57,3 +59,14 @@ export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
     width: 16,
   };
 });
+
+export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  borderRadius: '50%',
+}));
+
+export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  borderRadius: '50%',
+  mask: avatarMask16,
+}));

package/components/Avatar/Avatar.tsx

@@ -1,11 +1,11 @@
 import type { SxProps, Theme } from '@mui/material';
-import { Badge } from '@mui/material';
-import { SmallAvatarSkeleton } from '../SmallAvatar.js';
+import { Badge, Skeleton } from '@mui/material';
 import {
   AvatarDefault,
   AvatarDefaultBadge,
-  AvatarSkeleton,
+  AvatarSkeletonMaskedContainer,
 } from './Avatar.style.js';
+import { SmallAvatarSkeleton } from './SmallAvatar.js';
 
 export const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>;
@@ -32,7 +32,15 @@ export const AvatarBadgedSkeleton: React.FC<{
       badgeContent={<SmallAvatarSkeleton />}
       sx={sx}
     >
-      <AvatarSkeleton width={40} height={40} variant="circular" />
+      <AvatarSkeleton />
     </Badge>
   );
 };
+
+export const AvatarSkeleton = () => {
+  return (
+    <AvatarSkeletonMaskedContainer>
+      <Skeleton width={40} height={40} variant="circular" />
+    </AvatarSkeletonMaskedContainer>
+  );
+};

package/components/Avatar/SmallAvatar.tsx

@@ -0,0 +1,16 @@
+import { Avatar, Skeleton, styled } from '@mui/material';
+import { AvatarSkeletonContainer } from './Avatar.style.js';
+
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 16,
+  height: 16,
+}));
+
+export const SmallAvatarSkeleton = () => {
+  return (
+    <AvatarSkeletonContainer>
+      <Skeleton width={16} height={16} variant="circular" />
+    </AvatarSkeletonContainer>
+  );
+};

package/components/Avatar/TokenAvatar.tsx

@@ -3,9 +3,9 @@ import type { SxProps, Theme } from '@mui/material';
 import { Badge } from '@mui/material';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
-import { SmallAvatar } from '../SmallAvatar.js';
 import { AvatarBadgedSkeleton } from './Avatar.js';
 import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js';
+import { SmallAvatar } from './SmallAvatar.js';
 
 export const TokenAvatar: React.FC<{
   token?: StaticToken;

package/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,11 +1,9 @@
+import { useAccount, useWalletMenu } from '@lifi/wallet-management';
 import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-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> = ({
@@ -15,8 +13,8 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   loading,
 }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { walletConfig } = useWidgetConfig();
+  const { openWalletMenu } = useWalletMenu();
   const [fromChainId] = useFieldValues('fromChain');
   const { chain } = useChain(fromChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
@@ -27,7 +25,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
     } else if (walletConfig?.onConnect) {
       walletConfig.onConnect();
     } else {
-      navigate(navigationRoutes.selectWallet);
+      openWalletMenu();
     }
   };
 

package/components/ChainSelect/useChainSelect.ts

@@ -2,6 +2,7 @@ import type { EVMChain } from '@lifi/sdk';
 import { useChains } from '../../hooks/useChains.js';
 import { useSwapOnly } from '../../hooks/useSwapOnly.js';
 import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useChainOrder } from '../../stores/chains/useChainOrder.js';
 import type { FormType } from '../../stores/form/types.js';
@@ -15,7 +16,15 @@ export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType);
   const { onChange } = useFieldController({ name: chainKey });
   const { setFieldValue, getFieldValues } = useFieldActions();
-  const { chains, isLoading, getChainById } = useChains(formType);
+  const { hasExternalProvider, availableChainTypes } =
+    useHasExternalWalletProvider();
+  const { chains, isLoading, getChainById } = useChains(
+    formType,
+    formType === 'from' && hasExternalProvider
+      ? availableChainTypes
+      : undefined,
+  );
+
   const [chainOrder, setChainOrder] = useChainOrder(formType);
   const swapOnly = useSwapOnly();
   const { tryResetToAddress } = useToAddressReset();

package/components/FeeBreakdownTooltip.tsx

@@ -54,7 +54,10 @@ export const getFeeBreakdownTypography = (
       key={`${fee.token.address}${index}`}
     >
       {t(`format.currency`, { value: fee.amountUSD })} (
-      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {t(`format.number`, {
+        value: parseFloat(formatUnits(fee.amount, fee.token.decimals)),
+        maximumFractionDigits: Math.min(fee.token.decimals, 9),
+      })}{' '}
       {fee.token.symbol})
     </Typography>
   ));

package/components/Header/EVMDisconnectIconButton.tsx

@@ -1,21 +1,21 @@
 import { PowerSettingsNewRounded } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import type { Connector } from 'wagmi';
-import { useDisconnect } from 'wagmi';
+import { useConfig } from 'wagmi';
+import { disconnect } from 'wagmi/actions';
 
 export const EVMDisconnectIconButton = ({
   connector,
 }: {
   connector?: Connector;
 }) => {
-  const { disconnect } = useDisconnect();
-
+  const config = useConfig();
   return (
     <IconButton
       size="medium"
-      onClick={(e) => {
+      onClick={async (e) => {
         e.stopPropagation();
-        disconnect({ connector });
+        await disconnect(config, { connector });
       }}
     >
       <PowerSettingsNewRounded />

package/components/Header/NavigationHeader.tsx

@@ -1,6 +1,6 @@
+import { useAccount } from '@lifi/wallet-management';
 import { Box, Typography } from '@mui/material';
 import { Route, Routes, useLocation } from 'react-router-dom';
-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';

package/components/Header/UTXODisconnectIconButton.tsx

@@ -0,0 +1,24 @@
+import { useConfig } from '@lifi/wallet-management';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { disconnect } from 'wagmi/actions';
+
+export const UTXODisconnectIconButton = ({
+  connector,
+}: {
+  connector?: Connector;
+}) => {
+  const config = useConfig();
+  return (
+    <IconButton
+      size="medium"
+      onClick={async (e) => {
+        e.stopPropagation();
+        await disconnect(config, { connector });
+      }}
+    >
+      <PowerSettingsNewRounded />
+    </IconButton>
+  );
+};

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