@lifi/widget 3.7.0 → 3.8.0-beta.0

package/dist/esm/utils/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/utils/input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,WAAmB,EACnB,WAAmB,EACnB,OAAoB,EACpB,EAAE;IACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAM;IACR,CAAC;IACD,IAAI,IAAI,GAAG,WAAW,CAAA;IACtB,IAAI,GAAG,GAAG,WAAW,CAAA;IACrB,IAAI,IAAI,GAAG,WAAW,CAAA;IACtB,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,+CAA+C;IAC/C,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,CAAA;QACvB,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,IAAI,CAAA;QAC/B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACjC,kFAAkF;QAClF,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAA;QAC3C,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,GAAG,GAAG,CAAA;YACV,GAAG,GAAG,GAAG,GAAG,CAAC,CAAA;QACf,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,GAAG,CAAC,CAAA;QAChB,CAAC;IACH,CAAC;IACD,MAAM,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAA;IAC5B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACnC,CAAC,CAAA"}

package/dist/esm/utils/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/utils/item.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,MAAS,EAAE,KAAoB,EAAE,EAAE;IAClE,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;AACvC,CAAC,CAAA"}

package/dist/esm/utils/navigationRoutes.d.ts

@@ -0,0 +1,27 @@
+export declare const navigationRoutes: {
+    home: string;
+    activeTransactions: string;
+    bridges: string;
+    exchanges: string;
+    fromChain: string;
+    fromToken: string;
+    languages: string;
+    routes: string;
+    settings: string;
+    toChain: string;
+    toToken: string;
+    toTokenNative: string;
+    transactionDetails: string;
+    transactionExecution: string;
+    transactionHistory: string;
+    sendToWallet: string;
+    bookmarks: string;
+    recentWallets: string;
+    connectedWallets: string;
+    configuredWallets: string;
+};
+export declare const navigationRoutesValues: string[];
+export declare const stickyHeaderRoutes: string[];
+export declare const backButtonRoutes: string[];
+export type NavigationRouteTypeKeys = keyof typeof navigationRoutes;
+export type NavigationRouteType = (typeof navigationRoutes)[NavigationRouteTypeKeys];

package/dist/esm/utils/navigationRoutes.js

@@ -0,0 +1,64 @@
+export const navigationRoutes = {
+    home: '/',
+    activeTransactions: 'active-transactions',
+    bridges: 'bridges',
+    exchanges: 'exchanges',
+    fromChain: 'from-chain',
+    fromToken: 'from-token',
+    languages: 'languages',
+    routes: 'routes',
+    settings: 'settings',
+    toChain: 'to-chain',
+    toToken: 'to-token',
+    toTokenNative: 'to-token-native',
+    transactionDetails: 'transaction-details',
+    transactionExecution: 'transaction-execution',
+    transactionHistory: 'transaction-history',
+    sendToWallet: 'send-to-wallet',
+    bookmarks: 'bookmarks',
+    recentWallets: 'recent-wallets',
+    connectedWallets: 'connected-wallets',
+    configuredWallets: 'configured-wallets',
+};
+export const navigationRoutesValues = Object.values(navigationRoutes);
+export const stickyHeaderRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.fromChain,
+    navigationRoutes.home,
+    navigationRoutes.routes,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+    navigationRoutes.sendToWallet,
+    navigationRoutes.bookmarks,
+    navigationRoutes.recentWallets,
+    navigationRoutes.connectedWallets,
+    navigationRoutes.configuredWallets,
+];
+export const backButtonRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.languages,
+    navigationRoutes.fromChain,
+    navigationRoutes.fromToken,
+    navigationRoutes.routes,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toToken,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+    navigationRoutes.sendToWallet,
+    navigationRoutes.bookmarks,
+    navigationRoutes.recentWallets,
+    navigationRoutes.connectedWallets,
+    navigationRoutes.configuredWallets,
+];
+//# sourceMappingURL=navigationRoutes.js.map

package/dist/esm/utils/navigationRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigationRoutes.js","sourceRoot":"","sources":["../../../src/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,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;AAErE,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,CAAA;AAED,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,CAAA"}

package/dist/esm/utils/wallet.js

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

package/dist/esm/utils/wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet.js","sourceRoot":"","sources":["../../../src/utils/wallet.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CACjD,OAAO;IACL,CAAC,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;IACzE,CAAC,CAAC,IAAI,CAAA"}

package/package.json

@@ -1,19 +1,17 @@
 {
   "name": "@lifi/widget",
-  "version": "3.7.0",
+  "version": "3.8.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",
-  "types": "./_esm/index.d.ts",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "author": "Eugene Chybisov <eugene@li.finance>",
   "homepage": "https://github.com/lifinance/widget",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/lifinance/widget.git"
+    "url": "https://github.com/lifinance/widget.git",
+    "directory": "packages/widget"
   },
   "bugs": {
     "url": "https://github.com/lifinance/widget/issues"
@@ -34,15 +32,15 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.2.3",
-    "@lifi/wallet-management": "^3.1.7",
+    "@lifi/sdk": "^3.3.0-beta.2",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.3",
-    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query": "^5.59.9",
     "@tanstack/react-virtual": "^3.10.8",
     "i18next": "^23.15.1",
     "microdiff": "^1.4.0",
@@ -52,36 +50,24 @@
     "react-i18next": "^15.0.2",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
-    "uuid": "^10.0.0",
-    "viem": "^2.21.16",
+    "viem": "^2.21.21",
     "wagmi": "^2.12.16",
-    "zustand": "^4.5.5"
+    "zustand": "^4.5.5",
+    "@lifi/wallet-management": "^3.3.0-beta.13"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.16.0",
-    "@mui/lab": "^5.0.0-alpha.172",
-    "@mui/material": "^5.16.0",
-    "@solana/wallet-adapter-base": "^0.9.0",
-    "@solana/wallet-adapter-react": "^0.15.0",
-    "@solana/web3.js": "^1.95.0",
-    "@tanstack/react-query": "^5.51.0",
-    "i18next": "^23.11.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "react-i18next": "^15",
-    "react-router-dom": "^6.22.0",
-    "viem": "^2.17.0",
-    "wagmi": "^2.11.0",
-    "zustand": "^4.5.0"
+    "react-dom": ">=18"
   },
   "exports": {
     ".": {
-      "types": "./_esm/index.d.ts",
-      "default": "./_esm/index.js"
+      "types": "./dist/esm/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts",
+      "default": "./dist/esm/components/Skeleton/WidgetSkeleton.js"
     },
-    "./package.json": "./package.json",
-    "./skeleton": "./_esm/components/Skeleton/WidgetSkeleton.js"
+    "./package.json": "./package.json"
   }
 }

package/src/App.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { forwardRef, useMemo } from 'react'
+import { AppDefault } from './AppDefault.js'
+import type { WidgetDrawer } from './AppDrawer.js'
+import { AppDrawer } from './AppDrawer.js'
+import { AppProvider } from './AppProvider.js'
+import type { WidgetConfig, WidgetProps } from './types/widget.js'
+
+export const App = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
+  const config: WidgetConfig = useMemo(() => {
+    const config = { ...props, ...props.config }
+    if (config.variant === 'drawer') {
+      config.theme = {
+        ...config.theme,
+        container: {
+          height: '100%',
+          ...config.theme?.container,
+        },
+      }
+    }
+    return config
+  }, [props])
+
+  if (config.variant === 'drawer') {
+    return (
+      <AppProvider config={config} formRef={props.formRef}>
+        <AppDrawer
+          ref={ref}
+          elementRef={props.elementRef}
+          config={config}
+          open={props.open}
+          onClose={props.onClose}
+        >
+          <AppDefault />
+        </AppDrawer>
+      </AppProvider>
+    )
+  }
+
+  return (
+    <AppProvider config={config} formRef={props.formRef}>
+      <AppDefault />
+    </AppProvider>
+  )
+})

package/src/AppDefault.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { AppRoutes } from './AppRoutes.js'
+import {
+  AppContainer,
+  AppExpandedContainer,
+  FlexContainer,
+} from './components/AppContainer.js'
+import { Header } from './components/Header/Header.js'
+import { Initializer } from './components/Initializer.js'
+import { RoutesExpanded } from './components/Routes/RoutesExpanded.js'
+import { useWideVariant } from './hooks/useWideVariant.js'
+import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
+import { ElementId, createElementId } from './utils/elements.js'
+
+export const AppDefault = () => {
+  const { elementId } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
+  return (
+    <AppExpandedContainer
+      id={createElementId(ElementId.AppExpandedContainer, elementId)}
+    >
+      <AppContainer>
+        <Header />
+        <FlexContainer disableGutters>
+          <AppRoutes />
+        </FlexContainer>
+        <Initializer />
+      </AppContainer>
+      {wideVariant ? <RoutesExpanded /> : null}
+    </AppExpandedContainer>
+  )
+}

package/src/AppDrawer.style.tsx

@@ -0,0 +1,12 @@
+import { IconButton, styled } from '@mui/material'
+
+export const CloseButtonLayout = styled(IconButton)(() => ({
+  position: 'absolute',
+  top: '12px',
+  right: '26px',
+  zIndex: 1,
+  height: '40px',
+  width: '40px',
+  alignItems: 'center',
+  justifyContent: 'center',
+}))

package/src/AppDrawer.tsx

@@ -0,0 +1,96 @@
+import { Drawer } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import type { WidgetDrawerContext } from './AppDrawerContext.js'
+import { DrawerContext } from './AppDrawerContext.js'
+import type { WidgetDrawerProps } from './types/widget.js'
+
+export interface WidgetDrawer {
+  isOpen(): void
+  toggleDrawer(): void
+  openDrawer(): void
+  closeDrawer(): void
+}
+
+export const AppDrawer = forwardRef<
+  WidgetDrawer,
+  PropsWithChildren<WidgetDrawerProps>
+>(({ elementRef, open, onClose, children }, ref) => {
+  const openRef = useRef(Boolean(open))
+  const [drawerOpen, setDrawerOpen] = useState(Boolean(open))
+
+  const toggleDrawer = useCallback(() => {
+    setDrawerOpen((open) => {
+      openRef.current = !open
+      return openRef.current
+    })
+    if (!openRef.current) {
+      onClose?.()
+    }
+  }, [onClose])
+
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true)
+    openRef.current = true
+  }, [])
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false)
+    openRef.current = false
+    onClose?.()
+  }, [onClose])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      toggleDrawer,
+      openDrawer,
+      closeDrawer,
+    }),
+    [closeDrawer, openDrawer, toggleDrawer]
+  )
+
+  const drawerContext: WidgetDrawerContext = useMemo(
+    () => ({
+      closeDrawer,
+    }),
+    [closeDrawer]
+  )
+
+  return (
+    <DrawerContext.Provider value={drawerContext}>
+      <Drawer
+        ref={elementRef}
+        anchor="right"
+        open={drawerOpen}
+        onClose={closeDrawer}
+        slotProps={{
+          backdrop: {
+            sx: {
+              backgroundColor: 'rgb(0 0 0 / 48%)',
+              backdropFilter: 'blur(3px)',
+            },
+          },
+        }}
+        PaperProps={{
+          sx: (theme) => ({
+            width: theme?.container?.width ?? '100%',
+            minWidth: theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+            maxWidth: theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
+          }),
+        }}
+        keepMounted
+      >
+        {children}
+      </Drawer>
+    </DrawerContext.Provider>
+  )
+})

package/src/AppDrawerContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react'
+
+export interface WidgetDrawerContext {
+  closeDrawer?(): void
+}
+
+export const DrawerContext = createContext<WidgetDrawerContext>({})
+
+export const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext)

package/src/AppProvider.tsx

@@ -0,0 +1,51 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import type { PropsWithChildren } from 'react'
+import { Fragment } from 'react'
+import { MemoryRouter, useInRouterContext } from 'react-router-dom'
+import { PageEntered } from './components/PageEntered.js'
+import { queryClient } from './config/queryClient.js'
+import { I18nProvider } from './providers/I18nProvider/I18nProvider.js'
+import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'
+import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'
+import {
+  WidgetProvider,
+  useWidgetConfig,
+} from './providers/WidgetProvider/WidgetProvider.js'
+import { StoreProvider } from './stores/StoreProvider.js'
+import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import type { WidgetConfigProps } from './types/widget.js'
+
+export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+  formRef,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WidgetProvider config={config}>
+        <I18nProvider>
+          <ThemeProvider>
+            <WalletProvider>
+              <StoreProvider config={config} formRef={formRef}>
+                <AppRouter>{children}</AppRouter>
+              </StoreProvider>
+            </WalletProvider>
+          </ThemeProvider>
+        </I18nProvider>
+      </WidgetProvider>
+    </QueryClientProvider>
+  )
+}
+
+export const AppRouter: React.FC<PropsWithChildren> = ({ children }) => {
+  const { buildUrl } = useWidgetConfig()
+  const inRouterContext = useInRouterContext()
+  const Router = inRouterContext ? Fragment : MemoryRouter
+  return (
+    <Router>
+      {children}
+      {buildUrl ? <URLSearchParamsBuilder /> : null}
+      <PageEntered />
+    </Router>
+  )
+}

package/src/AppRoutes.tsx

@@ -0,0 +1,112 @@
+import type { RouteObject } from 'react-router-dom'
+import { useRoutes } from 'react-router-dom'
+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 routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainPage />,
+  },
+  {
+    path: navigationRoutes.settings,
+    element: <SettingsPage />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+    element: <SelectEnabledToolsPage type="Bridges" />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+    element: <SelectEnabledToolsPage type="Exchanges" />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.languages}`,
+    element: <LanguagesPage />,
+  },
+  {
+    path: navigationRoutes.fromToken,
+    element: <SelectTokenPage formType="from" />,
+  },
+  {
+    path: navigationRoutes.toToken,
+    element: <SelectTokenPage formType="to" />,
+  },
+  {
+    path: navigationRoutes.toTokenNative,
+    element: <SelectChainPage formType="to" selectNativeToken />,
+  },
+  {
+    path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
+    element: <SelectChainPage formType="from" />,
+  },
+  {
+    path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
+    element: <SelectChainPage formType="to" />,
+  },
+  {
+    path: navigationRoutes.routes,
+    element: <RoutesPage />,
+  },
+  {
+    path: navigationRoutes.activeTransactions,
+    element: <ActiveTransactionsPage />,
+  },
+  {
+    path: navigationRoutes.sendToWallet,
+    element: <SendToWalletPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.bookmarks}`,
+    element: <BookmarksPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.recentWallets}`,
+    element: <RecentWalletsPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.connectedWallets}`,
+    element: <ConnectedWalletsPage />,
+  },
+  {
+    path: navigationRoutes.configuredWallets,
+    element: <SendToConfiguredWalletPage />,
+  },
+  {
+    path: navigationRoutes.transactionHistory,
+    element: <TransactionHistoryPage />,
+  },
+  {
+    path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+    element: <TransactionDetailsPage />,
+  },
+  {
+    path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+    element: <TransactionPage />,
+  },
+  {
+    path: '*',
+    element: <NotFound />,
+  },
+]
+
+export const AppRoutes = () => {
+  const element = useRoutes(routes)
+  return element
+}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -0,0 +1,98 @@
+import { ArrowForward, ErrorRounded, InfoRounded } from '@mui/icons-material'
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useRouteExecution } from '../../hooks/useRouteExecution.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { TokenAvatarGroup } from '../Avatar/Avatar.style.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { StepTimer } from '../Step/StepTimer.js'
+import { ListItem, ListItemButton } from './ActiveTransactions.style.js'
+
+export const ActiveTransactionItem: React.FC<{
+  routeId: string
+  dense?: boolean
+}> = ({ routeId, dense }) => {
+  const navigate = useNavigate()
+  const { route, status } = useRouteExecution({
+    routeId,
+    executeInBackground: true,
+  })
+
+  const lastActiveStep = route?.steps.findLast((step) => step.execution)
+  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)
+
+  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)
+
+  if (!route || !lastActiveStep) {
+    return null
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } })
+  }
+
+  const getStatusComponent = () => {
+    switch (lastActiveProcess?.status) {
+      case 'ACTION_REQUIRED':
+        return <InfoRounded color="info" fontSize="small" />
+      case 'FAILED':
+        return <ErrorRounded color="error" fontSize="small" />
+      default:
+        return (
+          <Typography fontSize={14} fontWeight={600}>
+            <StepTimer step={lastActiveStep} hideInProgress />
+          </Typography>
+        )
+    }
+  }
+
+  const ListItemComponent = dense ? ListItem : ListItemButton
+
+  return (
+    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
+      <ListItemAvatar>
+        <TokenAvatarGroup total={2}>
+          <TokenAvatar token={route.fromToken} />
+          <TokenAvatar token={route.toToken} />
+        </TokenAvatarGroup>
+      </ListItemAvatar>
+      <ListItemText
+        sx={{ margin: 0 }}
+        disableTypography
+        primary={
+          <Typography
+            fontWeight={500}
+            lineHeight={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: 2,
+              height: 16,
+            }}
+          >
+            {route.fromToken.symbol}
+            <ArrowForward sx={{ paddingX: 0.5 }} />
+            {route.toToken.symbol}
+          </Typography>
+        }
+        secondary={
+          status !== RouteExecutionStatus.Done ? (
+            <Typography
+              fontWeight={400}
+              fontSize={12}
+              color="text.secondary"
+              lineHeight={1}
+              mt={0.75}
+              ml={2}
+            >
+              {title}
+            </Typography>
+          ) : null
+        }
+      />
+      {getStatusComponent()}
+    </ListItemComponent>
+  )
+}