@lifi/widget 4.0.0-beta.8 → 4.0.0

package/src/themes/createTheme.ts

@@ -1,11 +1,15 @@
-import type { CSSObject, Shape, SimplePaletteColorOptions } from '@mui/material'
+import type {
+  CSSObject,
+  Shape,
+  SimplePaletteColorOptions,
+  Theme,
+} from '@mui/material'
 import {
   alpha,
   buttonClasses,
   createTheme as createMuiTheme,
   css,
   darken,
-  dialogActionsClasses,
   keyframes,
   lighten,
   tabsClasses,
@@ -33,11 +37,9 @@ const enterKeyframe = keyframes`
   }
 `
 
-export const createTheme = (widgetTheme: WidgetTheme = {}) => {
-  const configuredPaletteLight =
-    widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette
-  const configuredPaletteDark =
-    widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette
+export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
+  const configuredPaletteLight = widgetTheme.colorSchemes?.light?.palette
+  const configuredPaletteDark = widgetTheme.colorSchemes?.dark?.palette
 
   const primaryMainColorLight =
     (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??
@@ -86,7 +88,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         palette: {
           ...palette,
           ...paletteLight,
-          ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),
+          ...widgetTheme.colorSchemes?.light?.palette,
           primary: {
             main: primaryMainColorLight,
             light: primaryLightenColorLight,
@@ -103,7 +105,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         palette: {
           ...palette,
           ...paletteDark,
-          ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),
+          ...widgetTheme.colorSchemes?.dark?.palette,
           primary: {
             main: primaryMainColorDark,
             light: primaryLightenColorDark,
@@ -117,11 +119,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         },
       },
     },
-    container: {
-      // Set height to 'fit-content' if not explicitly set
-      height: 'fit-content',
-      ...widgetTheme.container,
-    },
+    container: widgetTheme.container,
     routesContainer: widgetTheme.routesContainer,
     chainSidebarContainer: widgetTheme.chainSidebarContainer,
     header: widgetTheme.header,
@@ -130,7 +128,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       ...widgetTheme.navigation,
     },
     typography: {
-      fontFamily: 'Inter var, Inter, sans-serif',
+      fontFamily: 'Inter, sans-serif',
       ...widgetTheme.typography,
     },
     shape: {
@@ -152,10 +150,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           root: {
             fontFamily: 'Inter, sans-serif',
             ...widgetTheme.typography,
-            '@supports (font-variation-settings: normal)': {
-              fontFamily: 'Inter var, sans-serif',
-              ...widgetTheme.typography,
-            },
           },
         },
       },
@@ -212,9 +206,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
                 ownerState.variant === 'elevation' && {
                   '&:hover': {
                     cursor: 'pointer',
-                    filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+                    filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
                     ...theme.applyStyles('dark', {
-                      filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.08))`,
+                      filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 8%, transparent))`,
                     }),
                   },
                 }),
@@ -251,9 +245,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             style: ({ theme }) => ({
               border: 'none',
               boxShadow: 'none',
-              filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
+              filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent))`,
               ...theme.applyStyles('dark', {
-                filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04))`,
+                filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent))`,
               }),
             }),
           },
@@ -293,7 +287,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             fontSize: 16,
             fontWeight: 600,
             '&.Mui-disabled, &.Mui-disabled:hover': {
-              color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,
+              color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 56%, transparent)`,
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
@@ -312,18 +306,18 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
           text: ({ theme, ownerState }) => ({
-            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 8%, transparent)`,
             color: theme.vars.palette.primary.main,
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 12%, transparent)`,
             },
             ...theme.applyStyles('dark', {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 42%, transparent)`,
               color: theme.palette.getContrastText(
                 alpha(theme.palette.primary.main, 0.08)
               ),
               '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 56%, transparent)`,
               },
             }),
             ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
@@ -341,9 +335,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           }),
           sizeMedium: ({ ownerState }) => ({
             padding: '10px 14px',
-            [`.${dialogActionsClasses.root} &`]: {
-              padding: '6px 12px',
-            },
             ...getStyleOverrides(
               'MuiButton',
               'sizeMedium',
@@ -426,10 +417,12 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         },
       },
       MuiDrawer: {
+        ...widgetTheme.components?.MuiDrawer,
         styleOverrides: {
           paper: {
             backgroundImage: 'none',
           },
+          ...widgetTheme.components?.MuiDrawer?.styleOverrides,
         },
       },
       MuiPaper: {
@@ -451,22 +444,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
               ownerState
             )
             return {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
               ...theme.applyStyles('dark', {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
               }),
               borderRadius: theme.vars.shape.borderRadius,
               ...rootStyleOverrides,
               [`.${tabsClasses.indicator}`]: {
                 backgroundColor: theme.vars.palette.background.paper,
                 ...theme.applyStyles('dark', {
-                  backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+                  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
                 }),
                 borderRadius:
                   theme.shape.borderRadius > 0
                     ? `calc(${theme.vars.shape.borderRadius} - 4px)`
                     : theme.vars.shape.borderRadius,
-                boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+                boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
                 ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
               },
             }

package/src/themes/jumper.ts

@@ -6,7 +6,7 @@ export const jumperTheme: WidgetTheme = {
     overflow: 'visible',
   },
   container: {
-    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
+    filter: 'drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.12))',
     borderRadius: '24px',
   },
   shape: {

package/src/themes/types.ts

@@ -12,12 +12,6 @@ import type { NavigationProps } from '../types/widget.js'
 
 // https://mui.com/customization/palette/
 declare module '@mui/material/styles' {
-  interface TypographyVariants {
-    '@supports (font-variation-settings: normal)': React.CSSProperties
-  }
-  interface TypographyVariantsOptions {
-    '@supports (font-variation-settings: normal)'?: React.CSSProperties
-  }
   interface Shape {
     borderRadius: number
     borderRadiusSecondary: number
@@ -86,9 +80,3 @@ declare module '@mui/material/Paper' {
     filled: true
   }
 }
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    '@supports (font-variation-settings: normal)': true
-  }
-}

package/src/themes/utils.ts

@@ -7,7 +7,7 @@ export const getStyleOverrides = (
   styleOverrideProp: string,
   theme: WidgetTheme,
   ownerState?: any
-) => {
+): any => {
   const component = theme.components?.[componentName]
   const property = (component?.styleOverrides as any)?.[styleOverrideProp]
 

package/src/themes/watermelonLight.ts

@@ -40,7 +40,7 @@ export const watermelonLightTheme: WidgetTheme = {
     fontFamily: 'Inter, sans-serif',
   },
   container: {
-    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
+    filter: 'drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.12))',
     borderRadius: '16px',
   },
   components: {
@@ -52,7 +52,7 @@ export const watermelonLightTheme: WidgetTheme = {
         root: ({ theme }) => ({
           [`.${tabsClasses.indicator}`]: {
             backgroundColor: '#ffffff',
-            filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+            filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
             borderRadius: '16px',
           },
         }),

package/src/types/events.ts

@@ -1,4 +1,4 @@
-import type { ChainId, ChainType, ExecutionAction, Route } from '@lifi/sdk'
+import type { ChainId, ExecutionAction, Route } from '@lifi/sdk'
 import type { DefaultValues } from '../stores/form/types.js'
 import type { SettingsProps } from '../stores/settings/types.js'
 import type { NavigationRouteType } from '../utils/navigationRoutes.js'
@@ -12,10 +12,6 @@ export enum WidgetEvent {
   FormFieldChanged = 'formFieldChanged',
   LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
   PageEntered = 'pageEntered',
-  /**
-   * @deprecated Use `PageEntered` event instead.
-   */
-  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
   RouteExecutionStarted = 'routeExecutionStarted',
@@ -30,28 +26,33 @@ export enum WidgetEvent {
 }
 
 export type WidgetEvents = {
-  availableRoutes: Route[]
-  chainPinned: ChainPinned
-  contactSupport: ContactSupport
-  destinationChainTokenSelected: ChainTokenSelected
-  formFieldChanged: FormFieldChanged
-  lowAddressActivityConfirmed: LowAddressActivityConfirmed
-  pageEntered: NavigationRouteType
-  reviewTransactionPageEntered?: Route
-  routeExecutionCompleted: Route
-  routeExecutionFailed: RouteExecutionUpdate
-  routeExecutionStarted: Route
-  routeExecutionUpdated: RouteExecutionUpdate
-  routeHighValueLoss: RouteHighValueLossUpdate
-  routeSelected: RouteSelected
-  sendToWalletToggled: boolean
-  settingUpdated: SettingUpdated
-  sourceChainTokenSelected: ChainTokenSelected
-  tokenSearch: TokenSearch
-  walletConnected: WalletConnected
-  widgetExpanded: boolean
+  availableRoutes: (data: Route[]) => void
+  chainPinned: (data: ChainPinned) => void
+  contactSupport: (data: ContactSupport) => void
+  destinationChainTokenSelected: (data: ChainTokenSelected) => void
+  formFieldChanged: (data: FormFieldChanged) => void
+  lowAddressActivityConfirmed: (data: LowAddressActivityConfirmed) => void
+  pageEntered: (data: NavigationRouteType) => void
+  routeExecutionCompleted: (data: Route) => void
+  routeExecutionFailed: (data: RouteExecutionUpdate) => void
+  routeExecutionStarted: (data: Route) => void
+  routeExecutionUpdated: (data: RouteExecutionUpdate) => void
+  routeHighValueLoss: (data: RouteHighValueLossUpdate) => void
+  routeSelected: (data: RouteSelected) => void
+  sendToWalletToggled: (data: boolean) => void
+  settingUpdated: (data: SettingUpdated) => void
+  sourceChainTokenSelected: (data: ChainTokenSelected) => void
+  tokenSearch: (data: TokenSearch) => void
+  widgetExpanded: (data: boolean) => void
 }
 
+// Compile-time invariant: WidgetEvent enum values and keyof WidgetEvents
+// must stay in lockstep. Adding to one without the other fails the build.
+type Exact<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false
+const _eventEnumMatchesEventMap: Exact<`${WidgetEvent}`, keyof WidgetEvents> =
+  true
+void _eventEnumMatchesEventMap
+
 export type ContactSupport = {
   supportId?: string
 }
@@ -84,12 +85,6 @@ export type ChainTokenSelected = {
   tokenAddress: string
 }
 
-export type WalletConnected = {
-  address?: string
-  chainId?: number
-  chainType?: ChainType
-}
-
 export type FormFieldChanged = {
   [K in keyof DefaultValues]: {
     fieldName: K

package/src/types/widget.ts

@@ -5,7 +5,7 @@ import type {
   ExecutionOptions,
   ExtendedChain,
   Order,
-  RouteExtended,
+  Route,
   RouteOptions,
   SDKConfig,
   StaticToken,
@@ -24,7 +24,6 @@ import type {
 import type { TypographyVariantsOptions } from '@mui/material/styles'
 import type {
   CSSProperties,
-  FC,
   PropsWithChildren,
   ReactNode,
   RefObject,
@@ -36,24 +35,20 @@ import type {
 import type { DefaultFieldValues } from '../stores/form/types.js'
 
 export type WidgetVariant = 'compact' | 'wide' | 'drawer'
-export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel'
-export type SplitSubvariant = 'bridge' | 'swap'
-export type SplitSubvariantOptions = {
-  defaultTab: SplitSubvariant
+export type WidgetMode = 'default' | 'split' | 'custom' | 'refuel'
+export type SplitMode = 'bridge' | 'swap'
+export type SplitModeOptions = {
+  defaultTab: SplitMode
 }
-export type CustomSubvariant = 'checkout' | 'deposit'
-export type WideSubvariant = {
-  disableChainSidebar?: boolean
-}
-export interface SubvariantOptions {
+export type CustomMode = 'checkout' | 'deposit'
+export interface ModeOptions {
   /**
-   * Configure split subvariant behavior:
+   * Configure split mode behavior:
    * - 'bridge' | 'swap': Single mode without tabs
    * - { defaultTab: 'bridge' | 'swap' }: Tabs mode with configurable default tab
    */
-  split?: SplitSubvariant | SplitSubvariantOptions
-  custom?: CustomSubvariant
-  wide?: WideSubvariant
+  split?: SplitMode | SplitModeOptions
+  custom?: { type: CustomMode }
 }
 
 export type Appearance = PaletteMode | 'system'
@@ -71,6 +66,7 @@ export type WidgetThemeComponents = Partial<
     | 'MuiAvatar'
     | 'MuiButton'
     | 'MuiCard'
+    | 'MuiDrawer'
     | 'MuiIconButton'
     | 'MuiInputCard'
     | 'MuiNavigationTabs'
@@ -81,10 +77,6 @@ export type WidgetThemeComponents = Partial<
 >
 
 export type WidgetTheme = {
-  /**
-   * @deprecated Use `colorScheme` instead.
-   */
-  palette?: PaletteOptions
   colorSchemes?: {
     light?: {
       palette: PaletteOptions
@@ -103,46 +95,57 @@ export type WidgetTheme = {
   navigation?: NavigationProps
 }
 
-export enum DisabledUI {
-  FromAmount = 'fromAmount',
-  FromToken = 'fromToken',
-  ToAddress = 'toAddress',
-  ToToken = 'toToken',
+export interface DisabledUIConfig {
+  fromAmount?: boolean
+  fromToken?: boolean
+  toAddress?: boolean
+  toToken?: boolean
 }
-export type DisabledUIType = `${DisabledUI}`
-
-export enum HiddenUI {
-  Appearance = 'appearance',
-  DrawerCloseButton = 'drawerCloseButton',
-  History = 'history',
-  Language = 'language',
-  PoweredBy = 'poweredBy',
-  ToAddress = 'toAddress',
-  FromToken = 'fromToken',
-  ToToken = 'toToken',
-  WalletMenu = 'walletMenu',
-  IntegratorStepDetails = 'integratorStepDetails',
-  ReverseTokensButton = 'reverseTokensButton',
-  RouteTokenDescription = 'routeTokenDescription',
-  RouteCardPriceImpact = 'routeCardPriceImpact',
-  ChainSelect = 'chainSelect',
-  BridgesSettings = 'bridgesSettings',
-  AddressBookConnectedWallets = 'addressBookConnectedWallets',
-  LowAddressActivityConfirmation = 'lowAddressActivityConfirmation',
-  GasRefuelMessage = 'gasRefuelMessage',
-  SearchTokenInput = 'searchTokenInput',
-  InsufficientGasMessage = 'insufficientGasMessage',
-  ContactSupport = 'contactSupport',
-  HideSmallBalances = 'hideSmallBalances',
-  AllNetworks = 'allNetworks',
+
+export interface HiddenUIConfig {
+  addressBookConnectedWallets?: boolean
+  allNetworks?: boolean
+  appearance?: boolean
+  bridgesSettings?: boolean
+  chainSelect?: boolean
+  /**
+   * Hide the chain sidebar in the `wide` variant. No effect in other variants.
+   * @default false
+   */
+  chainSidebar?: boolean
+  contactSupport?: boolean
+  /**
+   * Hide the drawer close button. Only meaningful when `variant === 'drawer'`.
+   * @default false
+   */
+  drawerCloseButton?: boolean
+  fromToken?: boolean
+  gasRefuelMessage?: boolean
+  hideSmallBalances?: boolean
+  history?: boolean
+  insufficientGasMessage?: boolean
+  integratorStepDetails?: boolean
+  language?: boolean
+  /**
+   * Hide the warning shown when sending to an address with low historical
+   * on-chain activity (low transaction count or contract-like behavior).
+   * @default false
+   */
+  lowAddressActivityConfirmation?: boolean
+  poweredBy?: boolean
+  reverseTokensButton?: boolean
+  routeCardPriceImpact?: boolean
+  routeTokenDescription?: boolean
+  searchTokenInput?: boolean
+  toAddress?: boolean
+  toToken?: boolean
+  walletMenu?: boolean
 }
-export type HiddenUIType = `${HiddenUI}`
 
-export enum RequiredUI {
-  ToAddress = 'toAddress',
-  AccountDeployedMessage = 'accountDeployedMessage',
+export interface RequiredUIConfig {
+  accountDeployedMessage?: boolean
+  toAddress?: boolean
 }
-export type RequiredUIType = `${RequiredUI}`
 
 export type DefaultUI = {
   transactionDetailsExpanded?: boolean
@@ -174,10 +177,14 @@ export interface WidgetSDKConfig
     | 'apiKey'
     | 'disableVersionCheck'
     | 'integrator'
+    | 'providers'
     | 'routeOptions'
     | 'widgetVersion'
   > {
-  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>
+  routeOptions?: Omit<
+    RouteOptions,
+    'bridges' | 'exchanges' | 'fee' | 'referrer' | 'order' | 'slippage'
+  >
   executionOptions?: Pick<ExecutionOptions, 'updateTransactionRequestHook'>
 }
 
@@ -225,10 +232,6 @@ export interface WidgetFeeConfig {
    * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)
    */
   calculateFee?(params: CalculateFeeParams): Promise<number | undefined>
-  /**
-   * @internal
-   */
-  _vcComponent?: FC<{ route: RouteExtended }>
 }
 
 export interface ToAddress {
@@ -289,6 +292,14 @@ export interface RouteLabelRule {
   toChainId?: number[]
   fromTokenAddress?: string[]
   toTokenAddress?: string[]
+  /**
+   * Custom match function evaluated against the route. When provided, its
+   * result is AND'd with the other matching criteria — all specified
+   * conditions must pass for the label to apply. Use this for matching logic
+   * that the built-in fields cannot express (gas costs, step count, route
+   * tags, etc.).
+   */
+  match?: (route: Route) => boolean
 }
 
 export type ExplorerUrl =
@@ -324,7 +335,6 @@ export interface WidgetConfig {
   contractTool?: WidgetContractTool
   integrator: string
   apiKey?: string
-  fee?: number
   feeConfig?: WidgetFeeConfig
   referrer?: string
 
@@ -332,17 +342,23 @@ export interface WidgetConfig {
   slippage?: number
 
   variant?: WidgetVariant
-  subvariant?: WidgetSubvariant
-  subvariantOptions?: SubvariantOptions
+  mode?: WidgetMode
+  modeOptions?: ModeOptions
 
   appearance?: Appearance
   theme?: WidgetTheme
 
-  disabledUI?: DisabledUIType[]
-  hiddenUI?: HiddenUIType[]
-  requiredUI?: RequiredUIType[]
+  disabledUI?: DisabledUIConfig
+  hiddenUI?: HiddenUIConfig
+  requiredUI?: RequiredUIConfig
   defaultUI?: DefaultUI
-  useRecommendedRoute?: boolean
+  /**
+   * When true, shows only the recommended route and hides the route
+   * selector UI. Distinct from `routePriority`, which sets the SDK
+   * ranking order across multiple displayed routes.
+   * @default false
+   */
+  showSingleRoute?: boolean
   useRelayerRoutes?: boolean
 
   walletConfig?: WidgetWalletConfig

package/src/utils/compactNumberFormatter.ts

@@ -26,7 +26,7 @@ function toSubscript(n: number): string {
 export const compactNumberFormatter = (
   lng: string | undefined,
   options: any
-) => {
+): ((value: any) => string) => {
   const formatter = new Intl.NumberFormat(lng, {
     notation: 'standard',
     roundingPriority: 'morePrecision',

package/src/utils/converters.ts

@@ -66,7 +66,7 @@ const buildActionsFromTxHistory = (tx: FullStatusData): ExecutionAction[] => {
 export const buildRouteFromTxHistory = (
   tx: FullStatusData,
   tools?: ToolsResponse
-) => {
+): RouteExecution | undefined => {
   const sending = tx.sending as ExtendedTransactionInfo
   const receiving = tx.receiving as ExtendedTransactionInfo
 
@@ -203,7 +203,9 @@ export const buildRouteFromTxHistory = (
           integrator: tx.metadata?.integrator ?? '',
           execution: {
             status: 'DONE', // can be FAILED
-            startedAt: sending.timestamp ?? Date.now(),
+            startedAt: sending.timestamp
+              ? sending.timestamp * 1000
+              : Date.now(),
             actions: buildActionsFromTxHistory(tx),
             fromAmount: sending.amount,
             toAmount: receiving.amount,

package/src/utils/currencyExtendedFormatter.ts

@@ -1,7 +1,7 @@
 export const currencyExtendedFormatter = (
   lng: string | undefined,
   options: any
-) => {
+): ((value: any) => string) => {
   const formatter = new Intl.NumberFormat(lng, {
     ...options,
     style: 'currency',

package/src/utils/deepEqual.ts

@@ -1,6 +1,6 @@
 /** Forked from https://github.com/epoberezkin/fast-deep-equal */
 
-export function deepEqual(a: any, b: any) {
+export function deepEqual(a: any, b: any): boolean {
   if (a === b) {
     return true
   }

package/src/utils/deepMerge.ts

@@ -1,6 +1,6 @@
-const isObject = (obj: any) => obj && typeof obj === 'object'
+const isObject = (obj: any): boolean => obj && typeof obj === 'object'
 
-export const deepMerge = (...objects: any[]) => {
+export const deepMerge = (...objects: any[]): any => {
   return objects.reduce((prev, obj) => {
     for (const key in obj) {
       if (isObject(prev[key]) && isObject(obj[key])) {

package/src/utils/elements.ts

@@ -5,26 +5,28 @@ export enum ElementId {
   ScrollableContainer = 'widget-scrollable-container',
 }
 
-export const createElementId = (ElementId: ElementId, elementId: string) =>
-  elementId ? `${ElementId}-${elementId}` : ElementId
+export const createElementId = (
+  ElementId: ElementId,
+  elementId: string
+): 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) =>
+export const getAppContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.AppExpandedContainer, elementId)
   )
 
-export const getRelativeContainer = (elementId: string) =>
+export const getRelativeContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.RelativeContainer, elementId)
   )
 
-export const getScrollableContainer = (elementId: string) =>
+export const getScrollableContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.ScrollableContainer, elementId)
   )
 
-export const getHeaderElement = (elementId: string) =>
+export const getHeaderElement = (elementId: string): HTMLElement | null =>
   document.getElementById(createElementId(ElementId.Header, elementId))