@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.40.8",
+  "version": "4.0.0-alpha.1",
   "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": "./src/index.ts",
@@ -19,10 +19,6 @@
     "check:types": "tsc --noEmit",
     "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')",
     "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg",
-    "link:bigmi": "pnpm link @bigmi/client",
-    "unlink:bigmi": "pnpm link @bigmi/client",
-    "link:sdk": "pnpm link @lifi/sdk",
-    "unlink:sdk": "pnpm unlink @lifi/sdk",
     "test": "vitest run"
   },
   "author": "Eugene Chybisov <eugene@li.finance>",
@@ -43,39 +39,35 @@
     "swap",
     "cross-chain",
     "multi-chain",
-    "metamask",
     "ethereum",
+    "solana",
+    "bitcoin",
+    "sui",
     "web3",
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.6.5",
-    "@bigmi/core": "^0.6.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.15.6",
-    "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/material": "^7.3.7",
-    "@mui/system": "^7.3.7",
-    "@mysten/sui": "^1.45.2",
-    "@solana/wallet-adapter-base": "^0.9.27",
-    "@solana/wallet-adapter-coinbase": "^0.1.23",
-    "@solana/web3.js": "^1.98.4",
-    "@tanstack/react-virtual": "^3.13.18",
-    "i18next": "^25.8.1",
+    "@lifi/sdk": "^4.0.0-alpha.20",
+    "@lifi/wallet-management": "workspace:*",
+    "@lifi/widget-provider": "workspace:*",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
+    "@mui/system": "^7.3.6",
+    "@tanstack/react-router": "^1.158.1",
+    "@tanstack/react-virtual": "^3.13.16",
+    "i18next": "^25.8.4",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "react-i18next": "^16.5.4",
     "react-intersection-observer": "^9.16.0",
-    "react-router-dom": "^6.30.3",
     "react-transition-group": "^4.4.5",
-    "viem": "^2.45.1",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@types/react-transition-group": "^4.4.12",
-    "cpy-cli": "^6.0.0",
+    "cpy-cli": "^7.0.0",
     "madge": "^8.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -83,13 +75,9 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "@bigmi/react": ">=0.6.0",
-    "@mysten/dapp-kit": ">=0.19.0",
-    "@solana/wallet-adapter-react": ">=0.15.35",
-    "@tanstack/react-query": ">=5.87.0",
+    "@tanstack/react-query": ">=5.90.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "wagmi": "^2.19.0"
+    "react-dom": ">=18"
   },
   "files": [
     "dist/**",

package/src/AppDefault.tsx

@@ -1,35 +1,283 @@
-'use client'
-import { AppRoutes } from './AppRoutes.js'
 import {
-  AppContainer,
-  AppExpandedContainer,
-  FlexContainer,
-} from './components/AppContainer.js'
-import { Expansion } from './components/Expansion/Expansion.js'
-import { Header } from './components/Header/Header.js'
-import { Initializer } from './components/Initializer.js'
-import { version } from './config/version.js'
-import { useWideVariant } from './hooks/useWideVariant.js'
-import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
-import { createElementId, ElementId } from './utils/elements.js'
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  type Router,
+  RouterProvider,
+} from '@tanstack/react-router'
+import { AppLayout } from './AppLayout.js'
+import { NotFound } from './components/NotFound.js'
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage/ActiveTransactionsPage.js'
+import { LanguagesPage } from './pages/LanguagesPage.js'
+import { MainPage } from './pages/MainPage/MainPage.js'
+import { RoutesPage } from './pages/RoutesPage/RoutesPage.js'
+import { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'
+import { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'
+import { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'
+import { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'
+import { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'
+import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'
+import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'
+import { SettingsPage } from './pages/SettingsPage/SettingsPage.js'
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage/TransactionHistoryPage.js'
+import { TransactionPage } from './pages/TransactionPage/TransactionPage.js'
+import { navigationRoutes } from './utils/navigationRoutes.js'
+
+const rootRoute = createRootRoute({
+  component: AppLayout,
+  notFoundComponent: NotFound,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.home,
+  component: MainPage,
+})
+
+const settingsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.settings,
+})
+
+const settingsIndexRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: '/',
+  component: SettingsPage,
+})
+
+const settingsBridgesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.bridges,
+  component: () => <SelectEnabledToolsPage type="Bridges" />,
+})
+
+const settingsExchangesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.exchanges,
+  component: () => <SelectEnabledToolsPage type="Exchanges" />,
+})
+
+const settingsLanguagesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.languages,
+  component: LanguagesPage,
+})
+
+const fromTokenLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.fromToken,
+})
+
+const fromTokenIndexRoute = createRoute({
+  getParentRoute: () => fromTokenLayoutRoute,
+  path: '/',
+  component: () => <SelectTokenPage formType="from" />,
+})
+
+const fromTokenFromChainRoute = createRoute({
+  getParentRoute: () => fromTokenLayoutRoute,
+  path: navigationRoutes.fromChain,
+  component: () => <SelectChainPage formType="from" />,
+})
+
+const toTokenLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.toToken,
+})
+
+const toTokenIndexRoute = createRoute({
+  getParentRoute: () => toTokenLayoutRoute,
+  path: '/',
+  component: () => <SelectTokenPage formType="to" />,
+})
+
+const toTokenToChainRoute = createRoute({
+  getParentRoute: () => toTokenLayoutRoute,
+  path: navigationRoutes.toChain,
+  component: () => <SelectChainPage formType="to" />,
+})
+
+const toTokenNativeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.toTokenNative,
+  component: () => <SelectChainPage formType="to" selectNativeToken />,
+})
+
+const routesLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.routes,
+})
+
+const routesIndexRoute = createRoute({
+  getParentRoute: () => routesLayoutRoute,
+  path: '/',
+  component: RoutesPage,
+})
+
+const routesTransactionExecutionRoute = createRoute({
+  getParentRoute: () => routesLayoutRoute,
+  path: navigationRoutes.transactionExecution,
+})
+
+const routesTransactionExecutionIndexRoute = createRoute({
+  getParentRoute: () => routesTransactionExecutionRoute,
+  path: '/',
+  component: TransactionPage,
+})
+
+const routesTransactionExecutionDetailsRoute = createRoute({
+  getParentRoute: () => routesTransactionExecutionRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const activeTransactionsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.activeTransactions,
+})
+
+const activeTransactionsIndexRoute = createRoute({
+  getParentRoute: () => activeTransactionsLayoutRoute,
+  path: '/',
+  component: ActiveTransactionsPage,
+})
+
+const activeTransactionExecutionRoute = createRoute({
+  getParentRoute: () => activeTransactionsLayoutRoute,
+  path: navigationRoutes.transactionExecution,
+  component: TransactionPage,
+})
+
+const sendToWalletLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.sendToWallet,
+})
+
+const sendToWalletIndexRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: '/',
+  component: SendToWalletPage,
+})
+
+const sendToWalletBookmarksRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.bookmarks,
+  component: BookmarksPage,
+})
+
+const sendToWalletRecentWalletsRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.recentWallets,
+  component: RecentWalletsPage,
+})
+
+const sendToWalletConnectedWalletsRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.connectedWallets,
+  component: ConnectedWalletsPage,
+})
+
+const configuredWalletsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.configuredWallets,
+  component: SendToConfiguredWalletPage,
+})
+
+const transactionHistoryLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.transactionHistory,
+})
+
+const transactionHistoryIndexRoute = createRoute({
+  getParentRoute: () => transactionHistoryLayoutRoute,
+  path: '/',
+  component: TransactionHistoryPage,
+})
+
+const transactionHistoryDetailsRoute = createRoute({
+  getParentRoute: () => transactionHistoryLayoutRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const transactionExecutionLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.transactionExecution,
+})
+
+const transactionExecutionIndexRoute = createRoute({
+  getParentRoute: () => transactionExecutionLayoutRoute,
+  path: '/',
+  component: TransactionPage,
+})
+
+const transactionExecutionDetailsRoute = createRoute({
+  getParentRoute: () => transactionExecutionLayoutRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  settingsLayoutRoute.addChildren([
+    settingsIndexRoute,
+    settingsLanguagesRoute,
+    settingsBridgesRoute,
+    settingsExchangesRoute,
+  ]),
+  fromTokenLayoutRoute.addChildren([
+    fromTokenIndexRoute,
+    fromTokenFromChainRoute,
+  ]),
+  toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
+  toTokenNativeRoute,
+  routesLayoutRoute.addChildren([
+    routesIndexRoute,
+    routesTransactionExecutionRoute.addChildren([
+      routesTransactionExecutionIndexRoute,
+      routesTransactionExecutionDetailsRoute,
+    ]),
+  ]),
+  transactionExecutionLayoutRoute.addChildren([
+    transactionExecutionIndexRoute,
+    transactionExecutionDetailsRoute,
+  ]),
+  activeTransactionsLayoutRoute.addChildren([
+    activeTransactionsIndexRoute,
+    activeTransactionExecutionRoute,
+  ]),
+  sendToWalletLayoutRoute.addChildren([
+    sendToWalletIndexRoute,
+    sendToWalletBookmarksRoute,
+    sendToWalletRecentWalletsRoute,
+    sendToWalletConnectedWalletsRoute,
+  ]),
+  configuredWalletsRoute,
+  transactionHistoryLayoutRoute.addChildren([
+    transactionHistoryIndexRoute,
+    transactionHistoryDetailsRoute,
+  ]),
+])
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: Router<typeof routeTree>
+  }
+}
+
+const history = createMemoryHistory({
+  initialEntries: ['/'],
+})
+
+const router = createRouter({
+  routeTree,
+  history,
+  defaultPreload: 'intent',
+})
 
 export const AppDefault = () => {
-  const { elementId } = useWidgetConfig()
-  const wideVariant = useWideVariant()
-
-  return (
-    <AppExpandedContainer
-      id={createElementId(ElementId.AppExpandedContainer, elementId)}
-      data-version={version}
-    >
-      <AppContainer>
-        <Header />
-        <FlexContainer disableGutters>
-          <AppRoutes />
-        </FlexContainer>
-        <Initializer />
-      </AppContainer>
-      {wideVariant && <Expansion />}
-    </AppExpandedContainer>
-  )
+  return <RouterProvider router={router} />
 }

package/src/AppLayout.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { Outlet } from '@tanstack/react-router'
+import {
+  AppContainer,
+  AppExpandedContainer,
+} from './components/AppContainer.js'
+import { Expansion } from './components/Expansion/Expansion.js'
+import { Header } from './components/Header/Header.js'
+import { Initializer } from './components/Initializer.js'
+import { PageEntered } from './components/PageEntered.js'
+import { version } from './config/version.js'
+import { useWideVariant } from './hooks/useWideVariant.js'
+import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
+import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import { createElementId, ElementId } from './utils/elements.js'
+
+export const AppLayout: React.FC = () => {
+  const { elementId, buildUrl } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
+  return (
+    <AppExpandedContainer
+      id={createElementId(ElementId.AppExpandedContainer, elementId)}
+      data-version={version}
+    >
+      <AppContainer>
+        <Header />
+        <Initializer />
+        {buildUrl ? <URLSearchParamsBuilder /> : null}
+        <PageEntered />
+        <Outlet />
+      </AppContainer>
+      {wideVariant && <Expansion />}
+    </AppExpandedContainer>
+  )
+}

package/src/AppProvider.tsx

@@ -1,20 +1,10 @@
 import type { PropsWithChildren } from 'react'
-import { Fragment } from 'react'
-import {
-  MemoryRouter,
-  type MemoryRouterProps,
-  useInRouterContext,
-} from 'react-router-dom'
-import { PageEntered } from './components/PageEntered.js'
 import { I18nProvider } from './providers/I18nProvider/I18nProvider.js'
 import { QueryClientProvider } from './providers/QueryClientProvider.js'
+import { SDKClientProvider } from './providers/SDKClientProvider.js'
 import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'
 import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'
-import {
-  useWidgetConfig,
-  WidgetProvider,
-} from './providers/WidgetProvider/WidgetProvider.js'
-import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import { WidgetProvider } from './providers/WidgetProvider/WidgetProvider.js'
 import { StoreProvider } from './stores/StoreProvider.js'
 import { SettingsStoreProvider } from './stores/settings/SettingsStore.js'
 import type { WidgetConfigProps } from './types/widget.js'
@@ -24,17 +14,22 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   config,
   formRef,
 }) => {
+  if (!config.providers?.length && process.env.NODE_ENV === 'development') {
+    console.warn('No widget providers specified')
+  }
   return (
     <QueryClientProvider>
       <SettingsStoreProvider config={config}>
         <WidgetProvider config={config}>
           <I18nProvider>
             <ThemeProvider>
-              <WalletProvider>
-                <StoreProvider config={config} formRef={formRef}>
-                  <AppRouter>{children}</AppRouter>
-                </StoreProvider>
-              </WalletProvider>
+              <SDKClientProvider>
+                <WalletProvider providers={config.providers ?? []}>
+                  <StoreProvider config={config} formRef={formRef}>
+                    {children}
+                  </StoreProvider>
+                </WalletProvider>
+              </SDKClientProvider>
             </ThemeProvider>
           </I18nProvider>
         </WidgetProvider>
@@ -42,26 +37,3 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     </QueryClientProvider>
   )
 }
-
-const memoryRouterProps: MemoryRouterProps = {
-  future: {
-    v7_startTransition: true,
-    v7_relativeSplatPath: true,
-  },
-}
-
-const AppRouter: React.FC<PropsWithChildren> = ({ children }) => {
-  const { buildUrl } = useWidgetConfig()
-  const inRouterContext = useInRouterContext()
-  const Router = inRouterContext ? Fragment : MemoryRouter
-
-  const routerProps = inRouterContext ? undefined : memoryRouterProps
-
-  return (
-    <Router {...routerProps}>
-      {children}
-      {buildUrl ? <URLSearchParamsBuilder /> : null}
-      <PageEntered />
-    </Router>
-  )
-}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -2,8 +2,8 @@ import ArrowForward from '@mui/icons-material/ArrowForward'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useNavigate } from '@tanstack/react-router'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
 import { useRouteExecution } from '../../hooks/useRouteExecution.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -23,20 +23,23 @@ export const ActiveTransactionItem: React.FC<{
   })
 
   const lastActiveStep = route?.steps.findLast((step) => step.execution)
-  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)
+  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)
 
-  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)
+  const { title } = useActionMessage(lastActiveStep, lastActiveAction)
 
   if (!route || !lastActiveStep) {
     return null
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.transactionExecution, { state: { routeId } })
+    navigate({
+      to: navigationRoutes.transactionExecution,
+      search: { routeId },
+    })
   }
 
   const getStatusComponent = () => {
-    switch (lastActiveProcess?.status) {
+    switch (lastActiveAction?.status) {
       case 'ACTION_REQUIRED':
       case 'MESSAGE_REQUIRED':
       case 'RESET_REQUIRED':

package/src/components/ActiveTransactions/ActiveTransactions.tsx

@@ -1,7 +1,7 @@
 import type { CardProps } from '@mui/material'
 import { Stack } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { ButtonTertiary } from '../ButtonTertiary.js'
@@ -19,7 +19,7 @@ export const ActiveTransactions: React.FC<CardProps> = (props) => {
   }
 
   const handleShowAll = () => {
-    navigate(navigationRoutes.activeTransactions)
+    navigate({ to: navigationRoutes.activeTransactions })
   }
 
   const hasShowAll = executingRoutes?.length > 2

package/src/components/AmountInput/AmountInput.tsx

@@ -14,6 +14,7 @@ import {
   formatInputAmount,
   formatTokenPrice,
   priceToTokenAmount,
+  usdDecimals,
 } from '../../utils/format.js'
 import { fitInputText } from '../../utils/input.js'
 import { InputCard } from '../Card/InputCard.js'
@@ -30,8 +31,6 @@ import { AmountInputEndAdornment } from './AmountInputEndAdornment.js'
 import { AmountInputStartAdornment } from './AmountInputStartAdornment.js'
 import { PriceFormHelperText } from './PriceFormHelperText.js'
 
-const USD_DECIMALS = 2
-
 export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
   formType,
   ...props
@@ -102,8 +101,8 @@ const AmountInputBase: React.FC<
     if (currentInputMode === 'price') {
       const priceValue = formatTokenPrice(value as string, token?.priceUSD)
       displayValue = formatInputAmount(
-        priceValue.toFixed(USD_DECIMALS),
-        USD_DECIMALS
+        priceValue.toFixed(usdDecimals),
+        usdDecimals
       )
     } else {
       displayValue = value as string
@@ -119,7 +118,7 @@ const AmountInputBase: React.FC<
     let formattedValue: string
     if (currentInputMode === 'price') {
       const cleanInputValue = inputValue.replace('$', '')
-      formattedValue = formatInputAmount(cleanInputValue, USD_DECIMALS, true)
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)
       const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
       setFormattedPriceInput(formattedValue)
       setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })
@@ -141,7 +140,7 @@ const AmountInputBase: React.FC<
     let formattedValue: string
     if (currentInputMode === 'price') {
       const cleanInputValue = inputValue.replace('$', '')
-      formattedValue = formatInputAmount(cleanInputValue, USD_DECIMALS)
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals)
       const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
       const formattedAmount = formatInputAmount(tokenValue, token?.decimals)
       setFieldValue(amountKey, formattedAmount, {
@@ -166,8 +165,7 @@ const AmountInputBase: React.FC<
 
   const title =
     subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit' ||
-        subvariantOptions?.custom === 'fund'
+      ? subvariantOptions?.custom === 'deposit'
         ? t('header.amount')
         : t('header.youPay')
       : t('header.send')

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,7 +1,7 @@
+import { formatUnits } from '@lifi/sdk'
 import { InputAdornment } from '@mui/material'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'

package/src/components/Avatar/AccountAvatar.tsx

@@ -1,5 +1,5 @@
-import type { Account } from '@lifi/wallet-management'
 import { getConnectorIcon } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
 import Wallet from '@mui/icons-material/Wallet'
 import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'