@lifi/widget 3.6.2 → 3.7.0-beta.0

package/i18n/en.json

@@ -16,10 +16,10 @@
     "bridgeReview": "Review bridge",
     "buy": "Buy",
     "cancel": "Cancel",
-    "changeWallet": "Change wallet",
     "checkoutReview": "Review purchase",
     "close": "Close",
     "confirm": "Confirm",
+    "connectAnotherWallet": "Connect another wallet",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -139,6 +139,7 @@
       "signatureRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
       "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new quote.",
       "transactionCanceled": "Transaction was canceled.",
+      "transactionConflict": "Transaction couldn't be processed because it's conflicting with another pending transaction using the same funds. Please wait for the pending transaction to be confirmed or check your transaction history before trying again.",
       "transactionExpired": "The block height has exceeded the maximum allowed limit or blockhash is no longer recent enough.",
       "transactionFailed": "Please check the block explorer for more information.",
       "transactionNotSent": "Transaction was not sent.",
@@ -158,6 +159,7 @@
       "signatureRejected": "Signature required",
       "slippageNotMet": "Slippage conditions not met",
       "transactionCanceled": "Transaction canceled",
+      "transactionConflict": "Transaction conflict",
       "transactionExpired": "Transaction expired",
       "transactionFailed": "Transaction failed",
       "transactionSimulationFailed": "Transaction simulation failed",
@@ -303,8 +305,5 @@
     "noBookmarkedWallets": "No bookmarked wallets",
     "noConnectedWallets": "No connected wallets",
     "noRecentWallets": "No recent wallets"
-  },
-  "wallet": {
-    "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   }
 }

package/index.ts

@@ -8,9 +8,7 @@ export * from './components/ContractComponent/NFT/types.js';
 export * from './components/Skeleton/WidgetSkeleton.js';
 export { defaultMaxHeight } from './config/constants.js';
 export * from './config/version.js';
-export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
-export { useWallets, walletComparator } from './hooks/useWallets.js';
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
 export * from './stores/form/types.js';
 export { useFieldActions } from './stores/form/useFieldActions.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.6.2",
+  "version": "3.7.0-beta.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.2.3",
-    "@lifi/wallet-management": "^3.1.6",
+    "@lifi/sdk": "^3.3.0-beta.0",
+    "@lifi/wallet-management": "^3.3.0-beta.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
@@ -53,8 +53,8 @@
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
     "uuid": "^10.0.0",
-    "viem": "^2.21.9",
-    "wagmi": "^2.12.12",
+    "viem": "^2.21.14",
+    "wagmi": "^2.12.14",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

package/pages/RoutesPage/RoutesPage.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import type { BoxProps } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +8,6 @@ import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
 import { RouteCard } from '../../components/RouteCard/RouteCard.js';
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -2,12 +2,7 @@ import { useTheme } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import {
-  ElementId,
-  getAppContainer,
-  getHeaderElement,
-  getScrollableContainer,
-} from '../../utils/elements.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
 
 const debounce = (func: Function, timeout = 300) => {
   let timer: ReturnType<typeof setTimeout>;
@@ -23,9 +18,13 @@ const getContentHeight = (
   elementId: string,
   listParentRef: MutableRefObject<HTMLUListElement | null>,
 ) => {
-  const containerElement = getScrollableContainer(elementId);
+  const containerElement = document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
 
-  const headerElement = getHeaderElement(elementId);
+  const headerElement = document.getElementById(
+    createElementId(ElementId.Header, elementId),
+  );
 
   const listParentElement = listParentRef?.current;
 
@@ -64,10 +63,6 @@ interface UseContentHeightProps {
 export const minTokenListHeight = 360;
 export const minMobileTokenListHeight = 160;
 
-// 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
-
 export const useTokenListHeight = ({
   listParentRef,
   headerRef,
@@ -86,7 +81,9 @@ export const useTokenListHeight = ({
     // calling this on initial mount prevents the lists resizing appearing glitchy
     handleResize();
 
-    const appContainer = getAppContainer(elementId);
+    const appContainer = document.getElementById(
+      createElementId(ElementId.AppExpandedContainer, elementId),
+    );
 
     let resizeObserver: ResizeObserver;
     if (appContainer) {

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,3 +1,5 @@
+import type { Account } from '@lifi/wallet-management';
+import { useAccount } from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   MoreHoriz,
@@ -12,8 +14,6 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
-import type { Account } from '../../hooks/useAccount.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,3 +1,4 @@
+import { useAccount } from '@lifi/wallet-management';
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
@@ -7,7 +8,6 @@ import { useNavigate } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ButtonTertiary } from '../../components/ButtonTertiary.js';
 import { CardButton } from '../../components/Card/CardButton.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import {
   AddressType,
   useAddressValidation,

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -301,12 +301,7 @@ export const StatusBottomSheetContent: React.FC<
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
       {VcComponent ? <VcComponent route={route} /> : null}
-      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
-        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        ) : null}
+      <Box mt={2}>
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
           {hasEnumFlag(status, RouteExecutionStatus.Done)
@@ -317,6 +312,13 @@ export const StatusBottomSheetContent: React.FC<
             : null}
         </Button>
       </Box>
+      {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+        <Box mt={2}>
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
+          </Button>
+        </Box>
+      ) : null}
     </Box>
   );
 };

package/providers/I18nProvider/types.ts

@@ -12,14 +12,14 @@ export type LanguageResource = typeof languages.en;
 
 export type LanguageResources =
   | {
-      [language in LanguageKey]?: PartialResource<LanguageResource>;
+      [K in LanguageKey]?: PartialResource<LanguageResource>;
     }
   | {
       [language: string]: PartialResource<LanguageResource>;
     };
 
 export type LanguageTranslationResource = {
-  [namespace in 'translation']: PartialResource<LanguageResource>;
+  [N in 'translation']: PartialResource<LanguageResource>;
 };
 
 export type LanguageTranslationResources = {

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,16 +1,24 @@
 import type { SDKProvider } from '@lifi/sdk';
-import { ChainType, EVM, Solana, config } from '@lifi/sdk';
+import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk';
+import {
+  getConnectorClient as getBigmiConnectorClient,
+  useConfig as useBigmiConfig,
+} from '@lifi/wallet-management';
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { getWalletClient, switchChain } from '@wagmi/core';
+import {
+  getConnectorClient as getWagmiConnectorClient,
+  switchChain,
+} from '@wagmi/core';
 import { useEffect } from 'react';
-import { useConfig } from 'wagmi';
+import { useConfig as useWagmiConfig } from 'wagmi';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig();
   const { wallet } = useWallet();
-  const wagmiConfig = useConfig();
+  const wagmiConfig = useWagmiConfig();
+  const bigmiConfig = useBigmiConfig();
 
   useEffect(() => {
     // Configure SDK Providers
@@ -21,13 +29,16 @@ export const SDKProviders = () => {
     const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.SVM,
     );
+    const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.UTXO,
+    );
     if (!hasConfiguredEVMProvider) {
       providers.push(
         EVM({
-          getWalletClient: () => getWalletClient(wagmiConfig),
+          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
           switchChain: async (chainId: number) => {
             const chain = await switchChain(wagmiConfig, { chainId });
-            return getWalletClient(wagmiConfig, { chainId: chain.id });
+            return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id });
           },
         }),
       );
@@ -41,11 +52,18 @@ export const SDKProviders = () => {
         }),
       );
     }
+    if (!hasConfiguredUTXOProvider) {
+      providers.push(
+        UTXO({
+          getWalletClient: () => getBigmiConnectorClient(bigmiConfig),
+        }),
+      );
+    }
     if (sdkConfig?.providers?.length) {
       providers.push(...sdkConfig?.providers);
     }
     config.setProviders(providers);
-  }, [sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
+  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
 
   return null;
 };

package/providers/WalletProvider/UTXOBaseProvider.tsx

@@ -0,0 +1,28 @@
+import type { DefaultWagmiConfigResult } from '@lifi/wallet-management';
+import {
+  BigmiProvider,
+  createDefaultBigmiConfig,
+  useReconnect,
+} from '@lifi/wallet-management';
+import { useRef, type FC, type PropsWithChildren } from 'react';
+
+export const UTXOBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const bigmi = useRef<DefaultWagmiConfigResult>();
+
+  if (!bigmi.current) {
+    bigmi.current = createDefaultBigmiConfig({
+      bigmiConfig: {
+        ssr: true,
+        multiInjectedProviderDiscovery: false,
+      },
+    });
+  }
+
+  useReconnect(bigmi.current.config);
+
+  return (
+    <BigmiProvider config={bigmi.current.config} reconnectOnMount={false}>
+      {children}
+    </BigmiProvider>
+  );
+};

package/providers/WalletProvider/UTXOExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const UTXOExternalContext = createContext<boolean>(false);

package/providers/WalletProvider/UTXOProvider.tsx

@@ -0,0 +1,26 @@
+import { ChainType } from '@lifi/sdk';
+import { BigmiContext } from '@lifi/wallet-management';
+import { useContext, type FC, type PropsWithChildren } from 'react';
+import { isItemAllowed } from '../../utils/item.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { UTXOBaseProvider } from './UTXOBaseProvider.js';
+import { UTXOExternalContext } from './UTXOExternalContext.js';
+
+export function useInBigmiContext(): boolean {
+  const { chains } = useWidgetConfig();
+  const context = useContext(BigmiContext);
+
+  return Boolean(context) && isItemAllowed(ChainType.UTXO, chains?.types);
+}
+
+export const UTXOProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inBigmiContext = useInBigmiContext();
+
+  return inBigmiContext ? (
+    <UTXOExternalContext.Provider value={inBigmiContext}>
+      {children}
+    </UTXOExternalContext.Provider>
+  ) : (
+    <UTXOBaseProvider>{children}</UTXOBaseProvider>
+  );
+};

package/providers/WalletProvider/WalletProvider.tsx

@@ -1,15 +1,36 @@
-import { type FC, type PropsWithChildren } from 'react';
+import type { WalletManagementConfig } from '@lifi/wallet-management';
+import { WalletManagementProvider } from '@lifi/wallet-management';
+import { useMemo, type FC, type PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 import { EVMProvider } from './EVMProvider.js';
 import { SDKProviders } from './SDKProviders.js';
 import { SVMProvider } from './SVMProvider.js';
+import { UTXOProvider } from './UTXOProvider.js';
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <EVMProvider>
       <SVMProvider>
-        <SDKProviders />
-        {children}
+        <UTXOProvider>
+          <SDKProviders />
+          <WalletMenuProvider>{children}</WalletMenuProvider>
+        </UTXOProvider>
       </SVMProvider>
     </EVMProvider>
   );
 };
+
+export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { walletConfig } = useWidgetConfig();
+  const { i18n } = useTranslation();
+
+  const config: WalletManagementConfig = useMemo(() => {
+    return { locale: i18n.resolvedLanguage as never, ...walletConfig };
+  }, [i18n.resolvedLanguage, walletConfig]);
+  return (
+    <WalletManagementProvider config={config}>
+      {children}
+    </WalletManagementProvider>
+  );
+};

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -2,29 +2,35 @@ import { ChainType } from '@lifi/sdk';
 import { useContext, useMemo } from 'react';
 import { EVMExternalContext } from './EVMExternalContext.js';
 import { SVMExternalContext } from './SVMExternalContext.js';
+import { UTXOExternalContext } from './UTXOExternalContext.js';
 
 interface ExternalWalletProvider {
   hasExternalProvider: boolean;
-  providers: ChainType[];
+  availableChainTypes: ChainType[];
 }
 
 export function useHasExternalWalletProvider(): ExternalWalletProvider {
   const hasExternalEVMContext = useContext(EVMExternalContext);
   const hasExternalSVMContext = useContext(SVMExternalContext);
+  const hasExternalUTXOContext = useContext(UTXOExternalContext);
 
   const providers = useMemo(() => {
-    const providers = [];
+    const providers: ChainType[] = [];
     if (hasExternalEVMContext) {
       providers.push(ChainType.EVM);
     }
     if (hasExternalSVMContext) {
       providers.push(ChainType.SVM);
     }
+    if (hasExternalUTXOContext) {
+      providers.push(ChainType.UTXO);
+    }
     return providers;
-  }, [hasExternalEVMContext, hasExternalSVMContext]);
+  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext]);
 
   return {
-    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
-    providers,
+    hasExternalProvider:
+      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
+    availableChainTypes: providers,
   };
 }

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -50,7 +50,8 @@ export const WidgetProvider: React.FC<
         },
         disableVersionCheck: true,
         widgetVersion: version,
-        preloadChains: false,
+        // preloadChains: false,
+        // debug: true,
       };
       if (!sdkInitialized) {
         createConfig(_config);

package/providers/WidgetProvider/types.ts

@@ -1,8 +1,6 @@
 import type { WidgetConfig } from '../../types/widget.js';
 
 export type WidgetContextProps = WidgetConfig & {
-  fromChain?: number;
-  toChain?: number;
   elementId: string;
 };
 

package/stores/form/FormUpdater.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useAccount } from '@lifi/wallet-management';
 import { useEffect } from 'react';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';

package/stores/form/types.ts

@@ -35,17 +35,17 @@ export type FormFieldArray<T extends FormFieldNames[]> = {
   [K in keyof T]: ExtractValueType<FormValues[T[K]]>;
 };
 
-export type TouchedFields = { [key in FormFieldNames]?: boolean };
+export type TouchedFields = { [K in FormFieldNames]?: boolean };
 
 type ValidationFn = (value: any) => Promise<boolean | string>;
 export interface ValidationProps {
   isValid: boolean;
   isValidating: boolean;
   errors: {
-    [key in FormFieldNames]?: string;
+    [K in FormFieldNames]?: string;
   };
   validation: {
-    [key in FormFieldNames]?: ValidationFn;
+    [K in FormFieldNames]?: ValidationFn;
   };
 }
 
@@ -61,7 +61,7 @@ export interface ValidationActions {
 export interface FormProps {
   defaultValues: FormValues;
   userValues: FormValues;
-  touchedFields: { [key in FormFieldNames]?: boolean };
+  touchedFields: { [K in FormFieldNames]?: boolean };
 }
 
 interface ResetOptions {

package/stores/routes/useExecutingRoutesIds.ts

@@ -1,5 +1,5 @@
+import { useAccount } from '@lifi/wallet-management';
 import { shallow } from 'zustand/shallow';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useRouteExecutionStore } from './RouteExecutionStore.js';
 import type { RouteExecution } from './types.js';
 import { RouteExecutionStatus } from './types.js';

package/themes/createTheme.ts

@@ -63,7 +63,7 @@ export const createTheme = (
   const borderRadiusSecondary =
     widgetTheme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary;
 
-  return createMuiTheme({
+  const theme = createMuiTheme({
     container: widgetTheme.container,
     header: widgetTheme.header,
     navigation: {
@@ -409,4 +409,6 @@ export const createTheme = (
       },
     },
   });
+
+  return theme;
 };

package/types/events.ts

@@ -12,6 +12,9 @@ export enum WidgetEvent {
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   SendToWalletToggled = 'sendToWalletToggled',
   ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
+  /**
+   * @deprecated use useWalletManagementEvents hook.
+   */
   WalletConnected = 'walletConnected',
   WidgetExpanded = 'widgetExpanded',
 }
@@ -28,6 +31,9 @@ export type WidgetEvents = {
   destinationChainTokenSelected: ChainTokenSelected;
   sendToWalletToggled: boolean;
   reviewTransactionPageEntered?: Route;
+  /**
+   * @deprecated use useWalletManagementEvents hook.
+   */
   walletConnected: WalletConnected;
   widgetExpanded: boolean;
 };

package/utils/chainType.ts

@@ -1,11 +1,10 @@
-import { ChainId, ChainType } from '@lifi/sdk';
+import { ChainId, ChainType, isSVMAddress, isUTXOAddress } from '@lifi/sdk';
 import { isAddress as isEVMAddress } from 'viem';
-import { isSVMAddress } from './svm.js';
 
 const chainTypeAddressValidation = {
   [ChainType.EVM]: isEVMAddress,
   [ChainType.SVM]: isSVMAddress,
-  [ChainType.UTXO]: () => false,
+  [ChainType.UTXO]: isUTXOAddress,
 };
 
 export const getChainTypeFromAddress = (

package/utils/elements.ts

@@ -8,24 +8,3 @@ export enum ElementId {
 
 export const createElementId = (ElementId: ElementId, elementId: string) =>
   elementId ? `${ElementId}-${elementId}` : ElementId;
-
-// NOTE: The getter functions here are often used with code that can be effected by css changes in the
-//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
-
-export const getAppContainer = (elementId: string) =>
-  document.getElementById(
-    createElementId(ElementId.AppExpandedContainer, elementId),
-  );
-
-export const getRelativeContainer = (elementId: string) =>
-  document.getElementById(
-    createElementId(ElementId.RelativeContainer, elementId),
-  );
-
-export const getScrollableContainer = (elementId: string) =>
-  document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
-
-export const getHeaderElement = (elementId: string) =>
-  document.getElementById(createElementId(ElementId.Header, elementId));

package/utils/fees.ts

@@ -104,20 +104,22 @@ export const getFeeCostsBreakdown = (
 export const getStepFeeCostsBreakdown = (
   feeCosts: FeeCost[] | GasCost[],
 ): FeesBreakdown => {
-  const token = feeCosts[0].token;
-  const amount = feeCosts.reduce(
-    (amount, feeCost) => amount + BigInt(feeCost.amount || 0),
-    0n,
-  );
-  const amountUSD = feeCosts.reduce(
-    (amount, feeCost) =>
-      amount +
-      parseFloat(feeCost.token.priceUSD || '0') *
-        parseFloat(
-          formatUnits(BigInt(feeCost.amount || 0), feeCost.token.decimals),
-        ),
-    0,
+  const { token } = feeCosts[0];
+
+  const { amount, amountUSD } = feeCosts.reduce(
+    (acc, feeCost) => {
+      const feeAmount = BigInt(Number(feeCost.amount).toFixed(0) || 0);
+      const amountUSD =
+        parseFloat(feeCost.token.priceUSD || '0') *
+        parseFloat(formatUnits(feeAmount, feeCost.token.decimals));
+
+      acc.amount += feeAmount;
+      acc.amountUSD += amountUSD;
+      return acc;
+    },
+    { amount: 0n, amountUSD: 0 },
   );
+
   return {
     amount,
     amountUSD,

package/utils/format.ts

@@ -60,7 +60,7 @@ export function formatInputAmount(
   if (!amount) {
     return amount;
   }
-  let formattedAmount = amount.trim().replaceAll(',', '.');
+  let formattedAmount = amount.replaceAll(',', '.');
   if (formattedAmount.startsWith('.')) {
     formattedAmount = '0' + formattedAmount;
   }

package/utils/navigationRoutes.ts

@@ -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',
@@ -31,7 +30,6 @@ export const stickyHeaderRoutes = [
   navigationRoutes.fromChain,
   navigationRoutes.home,
   navigationRoutes.routes,
-  navigationRoutes.selectWallet,
   navigationRoutes.settings,
   navigationRoutes.toChain,
   navigationRoutes.toTokenNative,
@@ -53,7 +51,6 @@ export const backButtonRoutes = [
   navigationRoutes.fromChain,
   navigationRoutes.fromToken,
   navigationRoutes.routes,
-  navigationRoutes.selectWallet,
   navigationRoutes.settings,
   navigationRoutes.toChain,
   navigationRoutes.toToken,

package/utils/wallet.ts

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