@lifi/widget 3.7.0-beta.6 → 3.7.0

package/components/Search/SearchNotFound.style.tsx

@@ -0,0 +1,36 @@
+import type { BoxProps } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
+import { searchContainerHeight } from './SearchInput.style.js';
+
+interface NotFoundContainerProps extends BoxProps {
+  adjustForStickySearchInput?: boolean;
+}
+
+export const NotFoundContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
+})<NotFoundContainerProps>(({ theme, adjustForStickySearchInput }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  flex: 1,
+  padding: theme.spacing(3),
+  ...(adjustForStickySearchInput && theme.header?.position === 'fixed'
+    ? { paddingTop: `calc(${searchContainerHeight}px + ${theme.spacing(3)})` }
+    : {}),
+}));
+
+export const NotFoundMessage = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  color: theme.palette.text.secondary,
+  textAlign: 'center',
+  flex: 1,
+  marginTop: theme.spacing(2),
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+}));
+
+export const NotFoundIconContainer = styled(Typography)(({ theme }) => ({
+  fontSize: 48,
+  lineHeight: 1,
+}));

package/components/Search/SearchNotFound.tsx

@@ -0,0 +1,23 @@
+import { SearchOff } from '@mui/icons-material';
+import {
+  NotFoundContainer,
+  NotFoundIconContainer,
+  NotFoundMessage,
+} from './SearchNotFound.style.js';
+
+interface SearchNotFoundProps {
+  message: string;
+  adjustForStickySearchInput?: boolean;
+}
+
+export const SearchNotFound = ({
+  message,
+  adjustForStickySearchInput,
+}: SearchNotFoundProps) => (
+  <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
+    <NotFoundIconContainer>
+      <SearchOff fontSize="inherit" />
+    </NotFoundIconContainer>
+    <NotFoundMessage>{message}</NotFoundMessage>
+  </NotFoundContainer>
+);

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/Skeleton/WidgetSkeleton.style.tsx

@@ -57,7 +57,27 @@ export const SkeletonSendToWalletButton = styled(Button)({
   pointerEvents: 'none',
 });
 
-export const SkeletonPoweredByContainer = styled(Box)({
+export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
+  flexGrow: 1,
   justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  paddingBottom: theme.spacing(2),
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+}));
+
+export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 1.5, 3),
+    overflow: 'auto',
+  };
 });

package/components/Skeleton/WidgetSkeleton.tsx

@@ -7,12 +7,12 @@ import {
   FlexContainer,
   RelativeContainer,
 } from '../AppContainer.js';
-import { Container as HeaderContainer } from '../Header/Header.style.js';
 import {
   SkeletonAmountContainer,
   SkeletonCard,
   SkeletonCardRow,
   SkeletonHeaderAppBar,
+  SkeletonHeaderContainer,
   SkeletonInputCard,
   SkeletonPoweredByContainer,
   SkeletonReviewButton,
@@ -87,8 +87,8 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
   return (
     <ThemeProvider theme={theme}>
       <AppExpandedContainer>
-        <RelativeContainer>
-          <HeaderContainer>
+        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
+          <SkeletonHeaderContainer>
             {!hiddenUI.includes('walletMenu') ? (
               <SkeletonHeaderAppBar>
                 <SkeletonWalletMenuButton />
@@ -100,7 +100,8 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
               <Skeleton width={126} height={34} variant="text" />
               <SkeletonIcon />
             </SkeletonHeaderAppBar>
-          </HeaderContainer>
+          </SkeletonHeaderContainer>
+
           <FlexContainer
             sx={{
               gap: 2,
@@ -123,12 +124,12 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
                 </SkeletonSendToWalletButton>
               ) : null}
             </SkeletonReviewButtonContainer>
-            {!hiddenUI.includes('poweredBy') ? (
-              <SkeletonPoweredByContainer>
-                <Skeleton width={96} height={18} variant="text" />
-              </SkeletonPoweredByContainer>
-            ) : null}
           </FlexContainer>
+          {!hiddenUI.includes('poweredBy') ? (
+            <SkeletonPoweredByContainer>
+              <Skeleton width={96} height={18} variant="text" />
+            </SkeletonPoweredByContainer>
+          ) : null}
         </RelativeContainer>
       </AppExpandedContainer>
     </ThemeProvider>

package/components/SmallAvatar.tsx

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

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,15 +1,13 @@
-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';
 import { useTokenSearch } from '../../hooks/useTokenSearch.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import type { TokenAmount } from '../../types/token.js';
-import { createElementId, ElementId } from '../../utils/elements.js';
 import { TokenNotFound } from './TokenNotFound.js';
 import { VirtualizedTokenList } from './VirtualizedTokenList.js';
 import type { TokenListProps } from './types.js';
@@ -27,7 +25,6 @@ export const TokenList: FC<TokenListProps> = ({
     320,
     'tokenSearchFilter',
   );
-  const { elementId } = useWidgetConfig();
 
   const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
@@ -84,11 +81,7 @@ export const TokenList: FC<TokenListProps> = ({
     !tokenSearchFilter;
 
   return (
-    <Box
-      ref={parentRef}
-      style={{ height, overflow: 'auto' }}
-      id={createElementId(ElementId.TokenList, elementId)}
-    >
+    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
       {!tokens.length && !isLoading ? (
         <TokenNotFound formType={formType} />
       ) : null}

package/components/TokenList/TokenListItem.tsx

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

package/components/TokenList/TokenNotFound.tsx

@@ -1,40 +1,20 @@
-import { SearchOff } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 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';
+import { SearchNotFound } from '../Search/SearchNotFound.js';
 
 export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
   const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const { getChainById } = useAvailableChains();
+
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        flex: 1,
-        padding: 3,
-      }}
-    >
-      <Typography fontSize={48} lineHeight={1}>
-        <SearchOff fontSize="inherit" />
-      </Typography>
-      <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
-        px={2}
-      >
-        {t('info.message.emptyTokenList', {
-          chainName: getChainById(selectedChainId)?.name,
-        })}
-      </Typography>
-    </Box>
+    <SearchNotFound
+      message={t('info.message.emptyTokenList', {
+        chainName: getChainById(selectedChainId)?.name,
+      })}
+    />
   );
 };

package/components/TokenList/VirtualizedTokenList.tsx

@@ -127,7 +127,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             token={currentToken}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
-            accountAddress={account.address}
+            showBalance={account.isConnected}
             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 {
-  accountAddress?: string;
+  showBalance?: boolean;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;
@@ -40,7 +40,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 
 export interface TokenListItemButtonProps {
   onClick?: MouseEventHandler<HTMLDivElement>;
-  accountAddress?: string;
+  showBalance?: boolean;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;

package/components/TokenRate/TokenRate.tsx

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

package/config/version.ts

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

package/hooks/useAccount.ts

@@ -0,0 +1,109 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import type { Chain } from 'viem';
+import type { Connector } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
+
+export interface AccountBase {
+  address?: string;
+  addresses?: readonly string[];
+  chain?: Chain;
+  chainId?: number;
+  chainType?: ChainType;
+  isConnected: boolean;
+  isConnecting: boolean;
+  isDisconnected: boolean;
+  isReconnecting: boolean;
+  status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
+}
+
+export interface EVMAccount extends AccountBase {
+  chainType: ChainType.EVM;
+  connector?: Connector;
+}
+
+export interface SVMAccount extends AccountBase {
+  chainType: ChainType.SVM;
+  connector?: WalletAdapter;
+}
+
+export interface DefaultAccount extends AccountBase {
+  connector?: never;
+}
+
+export type Account = EVMAccount | SVMAccount | DefaultAccount;
+
+export interface AccountResult {
+  account: Account;
+  /**
+   * Connected accounts
+   */
+  accounts: Account[];
+}
+
+interface UseAccountArgs {
+  chainType?: ChainType;
+}
+
+const defaultAccount: AccountBase = {
+  isConnected: false,
+  isConnecting: false,
+  isReconnecting: false,
+  isDisconnected: true,
+  status: 'disconnected',
+};
+
+/**
+ *
+ * @param args When we provide args we want to return either account with corresponding chainType or default disconnected one
+ * @returns - Account result
+ */
+export const useAccount = (args?: UseAccountArgs): AccountResult => {
+  const account = useWagmiAccount();
+  const { wallet } = useWallet();
+
+  // We create a simple variable from the args object
+  // to avoid re-render useMemo on every object reference change.
+  const hasChainTypeArgs = Boolean(args);
+
+  return useMemo(() => {
+    const svm: Account = wallet?.adapter.publicKey
+      ? {
+          address: wallet?.adapter.publicKey.toString(),
+          chainId: ChainId.SOL,
+          chainType: ChainType.SVM,
+          connector: wallet?.adapter,
+          isConnected: Boolean(wallet?.adapter.publicKey),
+          isConnecting: false,
+          isReconnecting: false,
+          isDisconnected: !wallet,
+          status: 'connected',
+        }
+      : {
+          chainType: ChainType.SVM,
+          isConnected: false,
+          isConnecting: false,
+          isReconnecting: false,
+          isDisconnected: true,
+          status: 'disconnected',
+        };
+    const evm: Account = { ...account, chainType: ChainType.EVM };
+    const accounts = [evm, svm];
+    const connectedAccounts = [evm, svm].filter(
+      (account) => account.isConnected && account.address,
+    );
+    return {
+      account:
+        accounts.find(
+          (account) =>
+            (!hasChainTypeArgs || account.chainType === args?.chainType) &&
+            account.isConnected &&
+            account.address,
+        ) ?? defaultAccount,
+      // We need to return only connected account list
+      accounts: connectedAccounts,
+    };
+  }, [account, args?.chainType, hasChainTypeArgs, wallet]);
+};

package/hooks/useAvailableChains.ts

@@ -2,31 +2,32 @@ 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, ChainType.UTXO];
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
 
-export const useAvailableChains = (chainTypes?: ChainType[]) => {
+export const useAvailableChains = () => {
   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: [, chainTypesConfig] }) => {
-      const chainTypesRequest = supportedChainTypes
-        // providers.length > 0 ? providers : supportedChainTypes
-        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig));
+    queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
+      const chainTypesRequest = (
+        providers.length > 0 ? providers : supportedChainTypes
+      ).filter((chainType) => isItemAllowed(chainType, chainTypes));
 
       const availableChains = await getChains({
-        chainTypes: chainTypes || chainTypesRequest,
+        chainTypes: chainTypesRequest,
       });
       config.setChains(availableChains);
       return availableChains;

package/hooks/useChains.ts

@@ -1,11 +1,10 @@
-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, chainTypes?: ChainType[]) => {
+export const useChains = (type?: FormType) => {
   const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
@@ -18,13 +17,11 @@ export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
       ? availableChains?.filter(
           (chain) =>
             isItemAllowed(chain.id, chains) &&
-            isItemAllowed(chain.id, chains?.[type]) &&
-            // Check against chain types if they are provided
-            (chainTypes?.includes(chain.chainType) ?? true),
+            isItemAllowed(chain.id, chains?.[type]),
         )
       : availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
     return filteredChains;
-  }, [availableChains, chainTypes, chains, type]);
+  }, [availableChains, 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,8 +44,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
-                (amount, gasCost) =>
-                  amount + BigInt(Number(gasCost.amount).toFixed(0)),
+                (amount, gasCost) => amount + BigInt(gasCost.amount),
                 0n,
               );
               groupedGasCosts[token.chainId] = {
@@ -62,8 +61,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             if (nonIncludedFeeCosts?.length) {
               const { token } = nonIncludedFeeCosts[0];
               const feeCostAmount = nonIncludedFeeCosts.reduce(
-                (amount, feeCost) =>
-                  amount + BigInt(Number(feeCost.amount).toFixed(0)),
+                (amount, feeCost) => amount + BigInt(feeCost.amount),
                 0n,
               );
               groupedGasCosts[token.chainId] = {

package/hooks/useProcessMessage.ts

@@ -193,10 +193,6 @@ 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();