@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

package/dist/esm/types/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","names":[],"sources":["../../../src/types/events.ts"],"sourcesContent":["import type { ChainId, ChainType, ExecutionAction, Route } from '@lifi/sdk'\nimport type { DefaultValues } from '../stores/form/types.js'\nimport type { SettingsProps } from '../stores/settings/types.js'\nimport type { NavigationRouteType } from '../utils/navigationRoutes.js'\nimport type { TokenAmount } from './token.js'\n\nexport enum WidgetEvent {\n  AvailableRoutes = 'availableRoutes',\n  ChainPinned = 'chainPinned',\n  ContactSupport = 'contactSupport',\n  DestinationChainTokenSelected = 'destinationChainTokenSelected',\n  FormFieldChanged = 'formFieldChanged',\n  LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',\n  PageEntered = 'pageEntered',\n  /**\n   * @deprecated Use `PageEntered` event instead.\n   */\n  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',\n  RouteExecutionCompleted = 'routeExecutionCompleted',\n  RouteExecutionFailed = 'routeExecutionFailed',\n  RouteExecutionStarted = 'routeExecutionStarted',\n  RouteExecutionUpdated = 'routeExecutionUpdated',\n  RouteHighValueLoss = 'routeHighValueLoss',\n  RouteSelected = 'routeSelected',\n  SendToWalletToggled = 'sendToWalletToggled',\n  SettingUpdated = 'settingUpdated',\n  SourceChainTokenSelected = 'sourceChainTokenSelected',\n  TokenSearch = 'tokenSearch',\n  WidgetExpanded = 'widgetExpanded',\n}\n\nexport type WidgetEvents = {\n  availableRoutes: Route[]\n  chainPinned: ChainPinned\n  contactSupport: ContactSupport\n  destinationChainTokenSelected: ChainTokenSelected\n  formFieldChanged: FormFieldChanged\n  lowAddressActivityConfirmed: LowAddressActivityConfirmed\n  pageEntered: NavigationRouteType\n  reviewTransactionPageEntered?: Route\n  routeExecutionCompleted: Route\n  routeExecutionFailed: RouteExecutionUpdate\n  routeExecutionStarted: Route\n  routeExecutionUpdated: RouteExecutionUpdate\n  routeHighValueLoss: RouteHighValueLossUpdate\n  routeSelected: RouteSelected\n  sendToWalletToggled: boolean\n  settingUpdated: SettingUpdated\n  sourceChainTokenSelected: ChainTokenSelected\n  tokenSearch: TokenSearch\n  walletConnected: WalletConnected\n  widgetExpanded: boolean\n}\n\nexport type ContactSupport = {\n  supportId?: string\n}\n\nexport type RouteHighValueLossUpdate = {\n  fromAmountUSD: number\n  toAmountUSD: number\n  gasCostUSD?: number\n  feeCostUSD?: number\n  valueLoss: number\n}\n\nexport type RouteExecutionUpdate = {\n  route: Route\n  action: ExecutionAction\n}\n\nexport type RouteSelected = {\n  route: Route\n  routes: Route[]\n}\n\nexport type TokenSearch = {\n  value: string\n  tokens: TokenAmount[]\n}\n\nexport type ChainTokenSelected = {\n  chainId: ChainId\n  tokenAddress: string\n}\n\nexport type WalletConnected = {\n  address?: string\n  chainId?: number\n  chainType?: ChainType\n}\n\nexport type FormFieldChanged = {\n  [K in keyof DefaultValues]: {\n    fieldName: K\n    newValue: DefaultValues[K]\n    oldValue: DefaultValues[K]\n  }\n}[keyof DefaultValues]\n\nexport type SettingUpdated<\n  K extends keyof SettingsProps = keyof SettingsProps,\n> = {\n  setting: K\n  newValue: SettingsProps[K]\n  oldValue: SettingsProps[K]\n  newSettings: SettingsProps\n  oldSettings: SettingsProps\n}\n\nexport type ChainPinned = {\n  chainId: number\n  pinned: boolean\n}\n\nexport type LowAddressActivityConfirmed = {\n  address: string\n  chainId: number\n}\n"],"mappings":";AAMA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,qBAAA;AACA,aAAA,iBAAA;AACA,aAAA,oBAAA;AACA,aAAA,mCAAA;AACA,aAAA,sBAAA;AACA,aAAA,iCAAA;AACA,aAAA,iBAAA;;;;AAIA,aAAA,kCAAA;AACA,aAAA,6BAAA;AACA,aAAA,0BAAA;AACA,aAAA,2BAAA;AACA,aAAA,2BAAA;AACA,aAAA,wBAAA;AACA,aAAA,mBAAA;AACA,aAAA,yBAAA;AACA,aAAA,oBAAA;AACA,aAAA,8BAAA;AACA,aAAA,iBAAA;AACA,aAAA,oBAAA;;KACD"}
+{"version":3,"file":"events.js","names":[],"sources":["../../../src/types/events.ts"],"sourcesContent":["import type { ChainId, ChainType, ExecutionAction, Route } from '@lifi/sdk'\nimport type { DefaultValues } from '../stores/form/types.js'\nimport type { SettingsProps } from '../stores/settings/types.js'\nimport type { NavigationRouteType } from '../utils/navigationRoutes.js'\nimport type { TokenAmount } from './token.js'\n\nexport enum WidgetEvent {\n  AvailableRoutes = 'availableRoutes',\n  ChainPinned = 'chainPinned',\n  ContactSupport = 'contactSupport',\n  DestinationChainTokenSelected = 'destinationChainTokenSelected',\n  FormFieldChanged = 'formFieldChanged',\n  LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',\n  PageEntered = 'pageEntered',\n  RouteExecutionCompleted = 'routeExecutionCompleted',\n  RouteExecutionFailed = 'routeExecutionFailed',\n  RouteExecutionStarted = 'routeExecutionStarted',\n  RouteExecutionUpdated = 'routeExecutionUpdated',\n  RouteHighValueLoss = 'routeHighValueLoss',\n  RouteSelected = 'routeSelected',\n  SendToWalletToggled = 'sendToWalletToggled',\n  SettingUpdated = 'settingUpdated',\n  SourceChainTokenSelected = 'sourceChainTokenSelected',\n  TokenSearch = 'tokenSearch',\n  WidgetExpanded = 'widgetExpanded',\n}\n\nexport type WidgetEvents = {\n  availableRoutes: Route[]\n  chainPinned: ChainPinned\n  contactSupport: ContactSupport\n  destinationChainTokenSelected: ChainTokenSelected\n  formFieldChanged: FormFieldChanged\n  lowAddressActivityConfirmed: LowAddressActivityConfirmed\n  pageEntered: NavigationRouteType\n  routeExecutionCompleted: Route\n  routeExecutionFailed: RouteExecutionUpdate\n  routeExecutionStarted: Route\n  routeExecutionUpdated: RouteExecutionUpdate\n  routeHighValueLoss: RouteHighValueLossUpdate\n  routeSelected: RouteSelected\n  sendToWalletToggled: boolean\n  settingUpdated: SettingUpdated\n  sourceChainTokenSelected: ChainTokenSelected\n  tokenSearch: TokenSearch\n  walletConnected: WalletConnected\n  widgetExpanded: boolean\n}\n\nexport type ContactSupport = {\n  supportId?: string\n}\n\nexport type RouteHighValueLossUpdate = {\n  fromAmountUSD: number\n  toAmountUSD: number\n  gasCostUSD?: number\n  feeCostUSD?: number\n  valueLoss: number\n}\n\nexport type RouteExecutionUpdate = {\n  route: Route\n  action: ExecutionAction\n}\n\nexport type RouteSelected = {\n  route: Route\n  routes: Route[]\n}\n\nexport type TokenSearch = {\n  value: string\n  tokens: TokenAmount[]\n}\n\nexport type ChainTokenSelected = {\n  chainId: ChainId\n  tokenAddress: string\n}\n\nexport type WalletConnected = {\n  address?: string\n  chainId?: number\n  chainType?: ChainType\n}\n\nexport type FormFieldChanged = {\n  [K in keyof DefaultValues]: {\n    fieldName: K\n    newValue: DefaultValues[K]\n    oldValue: DefaultValues[K]\n  }\n}[keyof DefaultValues]\n\nexport type SettingUpdated<\n  K extends keyof SettingsProps = keyof SettingsProps,\n> = {\n  setting: K\n  newValue: SettingsProps[K]\n  oldValue: SettingsProps[K]\n  newSettings: SettingsProps\n  oldSettings: SettingsProps\n}\n\nexport type ChainPinned = {\n  chainId: number\n  pinned: boolean\n}\n\nexport type LowAddressActivityConfirmed = {\n  address: string\n  chainId: number\n}\n"],"mappings":";AAMA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,qBAAA;AACA,aAAA,iBAAA;AACA,aAAA,oBAAA;AACA,aAAA,mCAAA;AACA,aAAA,sBAAA;AACA,aAAA,iCAAA;AACA,aAAA,iBAAA;AACA,aAAA,6BAAA;AACA,aAAA,0BAAA;AACA,aAAA,2BAAA;AACA,aAAA,2BAAA;AACA,aAAA,wBAAA;AACA,aAAA,mBAAA;AACA,aAAA,yBAAA;AACA,aAAA,oBAAA;AACA,aAAA,8BAAA;AACA,aAAA,iBAAA;AACA,aAAA,oBAAA;;KACD"}

package/dist/esm/types/widget.d.ts

@@ -38,10 +38,6 @@ interface NavigationProps {
 }
 type WidgetThemeComponents = Partial<Pick<Components<Theme>, "MuiAppBar" | "MuiAvatar" | "MuiButton" | "MuiCard" | "MuiIconButton" | "MuiInputCard" | "MuiNavigationTabs" | "MuiNavigationTab" | "MuiTabs" | "MuiCheckbox">>;
 type WidgetTheme = {
-  /**
-  * @deprecated Use `colorScheme` instead.
-  */
-  palette?: PaletteOptions;
   colorSchemes?: {
     light?: {
       palette: PaletteOptions;
@@ -119,7 +115,7 @@ interface WidgetWalletConfig {
   */
   forceInternalWalletManagement?: boolean;
 }
-interface WidgetSDKConfig extends Omit<SDKConfig, "apiKey" | "disableVersionCheck" | "integrator" | "routeOptions" | "widgetVersion"> {
+interface WidgetSDKConfig extends Omit<SDKConfig, "apiKey" | "disableVersionCheck" | "integrator" | "providers" | "routeOptions" | "widgetVersion"> {
   routeOptions?: Omit<RouteOptions, "bridges" | "exchanges">;
   executionOptions?: Pick<ExecutionOptions, "updateTransactionRequestHook">;
 }

package/dist/esm/types/widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget.d.ts","names":[],"sources":["../../../src/types/widget.ts"],"mappings":"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"}
+{"version":3,"file":"widget.d.ts","names":[],"sources":["../../../src/types/widget.ts"],"mappings":"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"}

package/dist/esm/types/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","names":[],"sources":["../../../src/types/widget.ts"],"sourcesContent":["import type {\n  BaseToken,\n  ChainType,\n  ContractCall,\n  ExecutionOptions,\n  ExtendedChain,\n  Order,\n  RouteExtended,\n  RouteOptions,\n  SDKConfig,\n  StaticToken,\n  Token,\n} from '@lifi/sdk'\nimport type { WalletMenuOpenArgs } from '@lifi/wallet-management'\nimport type { WidgetProviderProps } from '@lifi/widget-provider'\nimport type {\n  Components,\n  PaletteMode,\n  PaletteOptions,\n  Shape,\n  SxProps,\n  Theme,\n} from '@mui/material'\nimport type { TypographyVariantsOptions } from '@mui/material/styles'\nimport type {\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n  ReactNode,\n  RefObject,\n} from 'react'\nimport type {\n  LanguageKey,\n  LanguageResources,\n} from '../providers/I18nProvider/types.js'\nimport type { DefaultFieldValues } from '../stores/form/types.js'\n\nexport type WidgetVariant = 'compact' | 'wide' | 'drawer'\nexport type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel'\nexport type SplitSubvariant = 'bridge' | 'swap'\nexport type SplitSubvariantOptions = {\n  defaultTab: SplitSubvariant\n}\nexport type CustomSubvariant = 'checkout' | 'deposit'\nexport type WideSubvariant = {\n  disableChainSidebar?: boolean\n}\nexport interface SubvariantOptions {\n  /**\n   * Configure split subvariant behavior:\n   * - 'bridge' | 'swap': Single mode without tabs\n   * - { defaultTab: 'bridge' | 'swap' }: Tabs mode with configurable default tab\n   */\n  split?: SplitSubvariant | SplitSubvariantOptions\n  custom?: CustomSubvariant\n  wide?: WideSubvariant\n}\n\nexport type Appearance = PaletteMode | 'system'\nexport interface NavigationProps {\n  /**\n   * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.\n   * @default true\n   */\n  edge?: boolean\n}\nexport type WidgetThemeComponents = Partial<\n  Pick<\n    Components<Theme>,\n    | 'MuiAppBar'\n    | 'MuiAvatar'\n    | 'MuiButton'\n    | 'MuiCard'\n    | 'MuiIconButton'\n    | 'MuiInputCard'\n    | 'MuiNavigationTabs'\n    | 'MuiNavigationTab'\n    | 'MuiTabs'\n    | 'MuiCheckbox'\n  >\n>\n\nexport type WidgetTheme = {\n  /**\n   * @deprecated Use `colorScheme` instead.\n   */\n  palette?: PaletteOptions\n  colorSchemes?: {\n    light?: {\n      palette: PaletteOptions\n    }\n    dark?: {\n      palette: PaletteOptions\n    }\n  }\n  shape?: Partial<Shape>\n  typography?: TypographyVariantsOptions\n  components?: WidgetThemeComponents\n  container?: CSSProperties\n  routesContainer?: CSSProperties\n  chainSidebarContainer?: CSSProperties\n  header?: CSSProperties\n  navigation?: NavigationProps\n}\n\nexport enum DisabledUI {\n  FromAmount = 'fromAmount',\n  FromToken = 'fromToken',\n  ToAddress = 'toAddress',\n  ToToken = 'toToken',\n}\nexport type DisabledUIType = `${DisabledUI}`\n\nexport enum HiddenUI {\n  Appearance = 'appearance',\n  DrawerCloseButton = 'drawerCloseButton',\n  History = 'history',\n  Language = 'language',\n  PoweredBy = 'poweredBy',\n  ToAddress = 'toAddress',\n  FromToken = 'fromToken',\n  ToToken = 'toToken',\n  WalletMenu = 'walletMenu',\n  IntegratorStepDetails = 'integratorStepDetails',\n  ReverseTokensButton = 'reverseTokensButton',\n  RouteTokenDescription = 'routeTokenDescription',\n  RouteCardPriceImpact = 'routeCardPriceImpact',\n  ChainSelect = 'chainSelect',\n  BridgesSettings = 'bridgesSettings',\n  AddressBookConnectedWallets = 'addressBookConnectedWallets',\n  LowAddressActivityConfirmation = 'lowAddressActivityConfirmation',\n  GasRefuelMessage = 'gasRefuelMessage',\n  SearchTokenInput = 'searchTokenInput',\n  InsufficientGasMessage = 'insufficientGasMessage',\n  ContactSupport = 'contactSupport',\n  HideSmallBalances = 'hideSmallBalances',\n  AllNetworks = 'allNetworks',\n}\nexport type HiddenUIType = `${HiddenUI}`\n\nexport enum RequiredUI {\n  ToAddress = 'toAddress',\n  AccountDeployedMessage = 'accountDeployedMessage',\n}\nexport type RequiredUIType = `${RequiredUI}`\n\nexport type DefaultUI = {\n  transactionDetailsExpanded?: boolean\n  navigationHeaderTitleNoWrap?: boolean\n}\n\nexport interface WidgetWalletConfig {\n  walletEcosystemsOrder?: Record<string, ChainType[]>\n  onConnect?(args?: WalletMenuOpenArgs): void\n  /**\n   * Determines whether the widget should provide partial wallet management functionality.\n   *\n   * In partial mode, external wallet management will be used for \"opt-out\" providers,\n   * while the internal management is applied for any remaining providers that do not opt out.\n   * This allows a flexible balance between the integrator's custom wallet menu and the widget's native wallet menu.\n   * @default false\n   */\n  usePartialWalletManagement?: boolean\n  /**\n   * This option forces the widget to always use internal wallet management ignoring external wallet management contexts\n   * @default false\n   */\n  forceInternalWalletManagement?: boolean\n}\n\nexport interface WidgetSDKConfig\n  extends Omit<\n    SDKConfig,\n    | 'apiKey'\n    | 'disableVersionCheck'\n    | 'integrator'\n    | 'routeOptions'\n    | 'widgetVersion'\n  > {\n  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>\n  executionOptions?: Pick<ExecutionOptions, 'updateTransactionRequestHook'>\n}\n\nexport interface WidgetContractTool {\n  name: string\n  logoURI: string\n}\n\nexport interface CalculateFeeParams {\n  fromChain: ExtendedChain\n  toChain: ExtendedChain\n  fromToken: Token\n  toToken: Token\n  fromAddress?: string\n  toAddress?: string\n  fromAmount?: bigint\n  toAmount?: bigint\n  slippage?: number\n}\n\nexport interface WidgetFeeConfig {\n  name?: string\n  logoURI?: string\n  fee?: number\n  /**\n   * Whether to show the fee percentage in the fee details.\n   * @default false\n   */\n  showFeePercentage?: boolean\n  /**\n   * Whether to show a tooltip with the fee details. Requires `name` or `feeTooltipComponent` to be set.\n   * @default false\n   */\n  showFeeTooltip?: boolean\n  /**\n   * Custom tooltip component to show with the fee details.\n   */\n  feeTooltipComponent?: ReactNode\n  /**\n   * Function to calculate fees before fetching quotes.\n   * If provided, this function will be used instead of the `fee` parameter.\n   * Only one of `fee` or `calculateFee` should be used.\n   *\n   * @param params Object containing the fee calculation parameters\n   * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)\n   */\n  calculateFee?(params: CalculateFeeParams): Promise<number | undefined>\n  /**\n   * @internal\n   */\n  _vcComponent?: FC<{ route: RouteExtended }>\n}\n\nexport interface ToAddress {\n  name?: string\n  address: string\n  chainType: ChainType\n  logoURI?: string\n}\n\nexport interface AllowDeny<T> {\n  allow?: T[]\n  deny?: T[]\n}\n\nexport type AllowDenySetItem = string | number\nexport interface AllowDenySet {\n  allow?: Set<AllowDenySetItem>\n  deny?: Set<AllowDenySetItem>\n}\n\nexport type AllowDenySets = {\n  from?: AllowDenySet\n  to?: AllowDenySet\n} & AllowDenySet\n\nexport type AllowDenyItems<T> = {\n  from?: AllowDeny<T>\n  to?: AllowDeny<T>\n} & AllowDeny<T>\n\nexport type WidgetChains = {\n  types?: AllowDeny<ChainType>\n} & AllowDenyItems<number>\n\nexport type WidgetTokens = {\n  featured?: StaticToken[]\n  include?: Token[]\n  popular?: StaticToken[]\n} & AllowDenyItems<BaseToken>\n\nexport type WidgetLanguages = {\n  default?: LanguageKey\n} & AllowDeny<LanguageKey>\n\nexport type PoweredByType = 'default' | 'jumper'\n\nexport interface RouteLabel {\n  text: string\n  sx?: SxProps<Theme>\n}\n\nexport interface RouteLabelRule {\n  label: RouteLabel\n  // Matching criteria\n  bridges?: AllowDeny<string>\n  exchanges?: AllowDeny<string>\n  fromChainId?: number[]\n  toChainId?: number[]\n  fromTokenAddress?: string[]\n  toTokenAddress?: string[]\n}\n\nexport type ExplorerUrl =\n  | string\n  | {\n      url: string\n      txPath?: string\n      addressPath?: string\n    }\n\nexport type WidgetProvider = (\n  props: PropsWithChildren<WidgetProviderProps>\n) => ReactNode\n\nexport interface WidgetConfig {\n  fromChain?: number\n  toChain?: number\n  fromToken?: string\n  toToken?: string\n  toAddress?: ToAddress\n  toAddresses?: ToAddress[]\n  fromAmount?: number | string\n  minFromAmountUSD?: number\n  toAmount?: number | string\n  formUpdateKey?: string\n\n  providers?: WidgetProvider[]\n\n  contractCalls?: ContractCall[]\n  contractComponent?: ReactNode\n  contractSecondaryComponent?: ReactNode\n  contractCompactComponent?: ReactNode\n  contractTool?: WidgetContractTool\n  integrator: string\n  apiKey?: string\n  fee?: number\n  feeConfig?: WidgetFeeConfig\n  referrer?: string\n\n  routePriority?: Order\n  slippage?: number\n\n  variant?: WidgetVariant\n  subvariant?: WidgetSubvariant\n  subvariantOptions?: SubvariantOptions\n\n  appearance?: Appearance\n  theme?: WidgetTheme\n\n  disabledUI?: DisabledUIType[]\n  hiddenUI?: HiddenUIType[]\n  requiredUI?: RequiredUIType[]\n  defaultUI?: DefaultUI\n  useRecommendedRoute?: boolean\n  useRelayerRoutes?: boolean\n\n  walletConfig?: WidgetWalletConfig\n  sdkConfig?: WidgetSDKConfig\n\n  buildUrl?: boolean\n  keyPrefix?: string\n\n  bridges?: AllowDeny<string>\n  exchanges?: AllowDeny<string>\n  chains?: WidgetChains\n  tokens?: WidgetTokens\n  languages?: WidgetLanguages\n  languageResources?: LanguageResources\n  explorerUrls?: Record<number, ExplorerUrl[]> &\n    Partial<Record<'internal', ExplorerUrl[]>>\n  poweredBy?: PoweredByType\n\n  /**\n   * Custom labels/badges to show on routes based on specified rules\n   */\n  routeLabels?: RouteLabelRule[]\n}\n\nexport interface FormFieldOptions {\n  setUrlSearchParam: boolean\n}\n\nexport interface FieldValues\n  extends Omit<DefaultFieldValues, 'fromAmount' | 'toAmount' | 'toAddress'> {\n  fromAmount?: number | string\n  toAmount?: number | string\n  toAddress?: ToAddress | string\n}\n\nexport type FieldNames = keyof FieldValues\n\nexport type SetFieldValueFunction = <K extends FieldNames>(\n  key: K,\n  value: FieldValues[K],\n  options?: FormFieldOptions\n) => void\n\nexport type FormState = {\n  setFieldValue: SetFieldValueFunction\n}\n\nexport type FormRef = RefObject<FormState | null>\n\nexport interface FormRefProps {\n  formRef?: FormRef\n}\n\nexport interface WidgetConfigProps extends FormRefProps {\n  config: WidgetConfig\n}\n\nexport interface WidgetConfigPartialProps {\n  config?: Partial<WidgetConfig>\n}\n\nexport type WidgetProps = WidgetDrawerProps &\n  WidgetConfig &\n  WidgetConfigPartialProps &\n  FormRefProps\n\nexport interface WidgetDrawerProps extends WidgetConfigPartialProps {\n  elementRef?: RefObject<HTMLDivElement>\n  open?: boolean\n  /**\n   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget\n   */\n  onClose?(): void\n}\n\nexport enum ExpansionType {\n  Routes = 'routes',\n  FromChain = 'fromChain',\n  ToChain = 'toChain',\n}\n"],"mappings":";AAyGA,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,gBAAA;AACA,YAAA,eAAA;AACA,YAAA,eAAA;AACA,YAAA,aAAA;;KACD;AAGD,IAAY,WAAL,yBAAA,UAAA;AACL,UAAA,gBAAA;AACA,UAAA,uBAAA;AACA,UAAA,aAAA;AACA,UAAA,cAAA;AACA,UAAA,eAAA;AACA,UAAA,eAAA;AACA,UAAA,eAAA;AACA,UAAA,aAAA;AACA,UAAA,gBAAA;AACA,UAAA,2BAAA;AACA,UAAA,yBAAA;AACA,UAAA,2BAAA;AACA,UAAA,0BAAA;AACA,UAAA,iBAAA;AACA,UAAA,qBAAA;AACA,UAAA,iCAAA;AACA,UAAA,oCAAA;AACA,UAAA,sBAAA;AACA,UAAA,sBAAA;AACA,UAAA,4BAAA;AACA,UAAA,oBAAA;AACA,UAAA,uBAAA;AACA,UAAA,iBAAA;;KACD;AAGD,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,eAAA;AACA,YAAA,4BAAA;;KACD;AAqRD,IAAY,gBAAL,yBAAA,eAAA;AACL,eAAA,YAAA;AACA,eAAA,eAAA;AACA,eAAA,aAAA;;KACD"}
+{"version":3,"file":"widget.js","names":[],"sources":["../../../src/types/widget.ts"],"sourcesContent":["import type {\n  BaseToken,\n  ChainType,\n  ContractCall,\n  ExecutionOptions,\n  ExtendedChain,\n  Order,\n  RouteExtended,\n  RouteOptions,\n  SDKConfig,\n  StaticToken,\n  Token,\n} from '@lifi/sdk'\nimport type { WalletMenuOpenArgs } from '@lifi/wallet-management'\nimport type { WidgetProviderProps } from '@lifi/widget-provider'\nimport type {\n  Components,\n  PaletteMode,\n  PaletteOptions,\n  Shape,\n  SxProps,\n  Theme,\n} from '@mui/material'\nimport type { TypographyVariantsOptions } from '@mui/material/styles'\nimport type {\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n  ReactNode,\n  RefObject,\n} from 'react'\nimport type {\n  LanguageKey,\n  LanguageResources,\n} from '../providers/I18nProvider/types.js'\nimport type { DefaultFieldValues } from '../stores/form/types.js'\n\nexport type WidgetVariant = 'compact' | 'wide' | 'drawer'\nexport type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel'\nexport type SplitSubvariant = 'bridge' | 'swap'\nexport type SplitSubvariantOptions = {\n  defaultTab: SplitSubvariant\n}\nexport type CustomSubvariant = 'checkout' | 'deposit'\nexport type WideSubvariant = {\n  disableChainSidebar?: boolean\n}\nexport interface SubvariantOptions {\n  /**\n   * Configure split subvariant behavior:\n   * - 'bridge' | 'swap': Single mode without tabs\n   * - { defaultTab: 'bridge' | 'swap' }: Tabs mode with configurable default tab\n   */\n  split?: SplitSubvariant | SplitSubvariantOptions\n  custom?: CustomSubvariant\n  wide?: WideSubvariant\n}\n\nexport type Appearance = PaletteMode | 'system'\nexport interface NavigationProps {\n  /**\n   * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.\n   * @default true\n   */\n  edge?: boolean\n}\nexport type WidgetThemeComponents = Partial<\n  Pick<\n    Components<Theme>,\n    | 'MuiAppBar'\n    | 'MuiAvatar'\n    | 'MuiButton'\n    | 'MuiCard'\n    | 'MuiIconButton'\n    | 'MuiInputCard'\n    | 'MuiNavigationTabs'\n    | 'MuiNavigationTab'\n    | 'MuiTabs'\n    | 'MuiCheckbox'\n  >\n>\n\nexport type WidgetTheme = {\n  colorSchemes?: {\n    light?: {\n      palette: PaletteOptions\n    }\n    dark?: {\n      palette: PaletteOptions\n    }\n  }\n  shape?: Partial<Shape>\n  typography?: TypographyVariantsOptions\n  components?: WidgetThemeComponents\n  container?: CSSProperties\n  routesContainer?: CSSProperties\n  chainSidebarContainer?: CSSProperties\n  header?: CSSProperties\n  navigation?: NavigationProps\n}\n\nexport enum DisabledUI {\n  FromAmount = 'fromAmount',\n  FromToken = 'fromToken',\n  ToAddress = 'toAddress',\n  ToToken = 'toToken',\n}\nexport type DisabledUIType = `${DisabledUI}`\n\nexport enum HiddenUI {\n  Appearance = 'appearance',\n  DrawerCloseButton = 'drawerCloseButton',\n  History = 'history',\n  Language = 'language',\n  PoweredBy = 'poweredBy',\n  ToAddress = 'toAddress',\n  FromToken = 'fromToken',\n  ToToken = 'toToken',\n  WalletMenu = 'walletMenu',\n  IntegratorStepDetails = 'integratorStepDetails',\n  ReverseTokensButton = 'reverseTokensButton',\n  RouteTokenDescription = 'routeTokenDescription',\n  RouteCardPriceImpact = 'routeCardPriceImpact',\n  ChainSelect = 'chainSelect',\n  BridgesSettings = 'bridgesSettings',\n  AddressBookConnectedWallets = 'addressBookConnectedWallets',\n  LowAddressActivityConfirmation = 'lowAddressActivityConfirmation',\n  GasRefuelMessage = 'gasRefuelMessage',\n  SearchTokenInput = 'searchTokenInput',\n  InsufficientGasMessage = 'insufficientGasMessage',\n  ContactSupport = 'contactSupport',\n  HideSmallBalances = 'hideSmallBalances',\n  AllNetworks = 'allNetworks',\n}\nexport type HiddenUIType = `${HiddenUI}`\n\nexport enum RequiredUI {\n  ToAddress = 'toAddress',\n  AccountDeployedMessage = 'accountDeployedMessage',\n}\nexport type RequiredUIType = `${RequiredUI}`\n\nexport type DefaultUI = {\n  transactionDetailsExpanded?: boolean\n  navigationHeaderTitleNoWrap?: boolean\n}\n\nexport interface WidgetWalletConfig {\n  walletEcosystemsOrder?: Record<string, ChainType[]>\n  onConnect?(args?: WalletMenuOpenArgs): void\n  /**\n   * Determines whether the widget should provide partial wallet management functionality.\n   *\n   * In partial mode, external wallet management will be used for \"opt-out\" providers,\n   * while the internal management is applied for any remaining providers that do not opt out.\n   * This allows a flexible balance between the integrator's custom wallet menu and the widget's native wallet menu.\n   * @default false\n   */\n  usePartialWalletManagement?: boolean\n  /**\n   * This option forces the widget to always use internal wallet management ignoring external wallet management contexts\n   * @default false\n   */\n  forceInternalWalletManagement?: boolean\n}\n\nexport interface WidgetSDKConfig\n  extends Omit<\n    SDKConfig,\n    | 'apiKey'\n    | 'disableVersionCheck'\n    | 'integrator'\n    | 'providers'\n    | 'routeOptions'\n    | 'widgetVersion'\n  > {\n  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>\n  executionOptions?: Pick<ExecutionOptions, 'updateTransactionRequestHook'>\n}\n\nexport interface WidgetContractTool {\n  name: string\n  logoURI: string\n}\n\nexport interface CalculateFeeParams {\n  fromChain: ExtendedChain\n  toChain: ExtendedChain\n  fromToken: Token\n  toToken: Token\n  fromAddress?: string\n  toAddress?: string\n  fromAmount?: bigint\n  toAmount?: bigint\n  slippage?: number\n}\n\nexport interface WidgetFeeConfig {\n  name?: string\n  logoURI?: string\n  fee?: number\n  /**\n   * Whether to show the fee percentage in the fee details.\n   * @default false\n   */\n  showFeePercentage?: boolean\n  /**\n   * Whether to show a tooltip with the fee details. Requires `name` or `feeTooltipComponent` to be set.\n   * @default false\n   */\n  showFeeTooltip?: boolean\n  /**\n   * Custom tooltip component to show with the fee details.\n   */\n  feeTooltipComponent?: ReactNode\n  /**\n   * Function to calculate fees before fetching quotes.\n   * If provided, this function will be used instead of the `fee` parameter.\n   * Only one of `fee` or `calculateFee` should be used.\n   *\n   * @param params Object containing the fee calculation parameters\n   * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)\n   */\n  calculateFee?(params: CalculateFeeParams): Promise<number | undefined>\n  /**\n   * @internal\n   */\n  _vcComponent?: FC<{ route: RouteExtended }>\n}\n\nexport interface ToAddress {\n  name?: string\n  address: string\n  chainType: ChainType\n  logoURI?: string\n}\n\nexport interface AllowDeny<T> {\n  allow?: T[]\n  deny?: T[]\n}\n\nexport type AllowDenySetItem = string | number\nexport interface AllowDenySet {\n  allow?: Set<AllowDenySetItem>\n  deny?: Set<AllowDenySetItem>\n}\n\nexport type AllowDenySets = {\n  from?: AllowDenySet\n  to?: AllowDenySet\n} & AllowDenySet\n\nexport type AllowDenyItems<T> = {\n  from?: AllowDeny<T>\n  to?: AllowDeny<T>\n} & AllowDeny<T>\n\nexport type WidgetChains = {\n  types?: AllowDeny<ChainType>\n} & AllowDenyItems<number>\n\nexport type WidgetTokens = {\n  featured?: StaticToken[]\n  include?: Token[]\n  popular?: StaticToken[]\n} & AllowDenyItems<BaseToken>\n\nexport type WidgetLanguages = {\n  default?: LanguageKey\n} & AllowDeny<LanguageKey>\n\nexport type PoweredByType = 'default' | 'jumper'\n\nexport interface RouteLabel {\n  text: string\n  sx?: SxProps<Theme>\n}\n\nexport interface RouteLabelRule {\n  label: RouteLabel\n  // Matching criteria\n  bridges?: AllowDeny<string>\n  exchanges?: AllowDeny<string>\n  fromChainId?: number[]\n  toChainId?: number[]\n  fromTokenAddress?: string[]\n  toTokenAddress?: string[]\n}\n\nexport type ExplorerUrl =\n  | string\n  | {\n      url: string\n      txPath?: string\n      addressPath?: string\n    }\n\nexport type WidgetProvider = (\n  props: PropsWithChildren<WidgetProviderProps>\n) => ReactNode\n\nexport interface WidgetConfig {\n  fromChain?: number\n  toChain?: number\n  fromToken?: string\n  toToken?: string\n  toAddress?: ToAddress\n  toAddresses?: ToAddress[]\n  fromAmount?: number | string\n  minFromAmountUSD?: number\n  toAmount?: number | string\n  formUpdateKey?: string\n\n  providers?: WidgetProvider[]\n\n  contractCalls?: ContractCall[]\n  contractComponent?: ReactNode\n  contractSecondaryComponent?: ReactNode\n  contractCompactComponent?: ReactNode\n  contractTool?: WidgetContractTool\n  integrator: string\n  apiKey?: string\n  fee?: number\n  feeConfig?: WidgetFeeConfig\n  referrer?: string\n\n  routePriority?: Order\n  slippage?: number\n\n  variant?: WidgetVariant\n  subvariant?: WidgetSubvariant\n  subvariantOptions?: SubvariantOptions\n\n  appearance?: Appearance\n  theme?: WidgetTheme\n\n  disabledUI?: DisabledUIType[]\n  hiddenUI?: HiddenUIType[]\n  requiredUI?: RequiredUIType[]\n  defaultUI?: DefaultUI\n  useRecommendedRoute?: boolean\n  useRelayerRoutes?: boolean\n\n  walletConfig?: WidgetWalletConfig\n  sdkConfig?: WidgetSDKConfig\n\n  buildUrl?: boolean\n  keyPrefix?: string\n\n  bridges?: AllowDeny<string>\n  exchanges?: AllowDeny<string>\n  chains?: WidgetChains\n  tokens?: WidgetTokens\n  languages?: WidgetLanguages\n  languageResources?: LanguageResources\n  explorerUrls?: Record<number, ExplorerUrl[]> &\n    Partial<Record<'internal', ExplorerUrl[]>>\n  poweredBy?: PoweredByType\n\n  /**\n   * Custom labels/badges to show on routes based on specified rules\n   */\n  routeLabels?: RouteLabelRule[]\n}\n\nexport interface FormFieldOptions {\n  setUrlSearchParam: boolean\n}\n\nexport interface FieldValues\n  extends Omit<DefaultFieldValues, 'fromAmount' | 'toAmount' | 'toAddress'> {\n  fromAmount?: number | string\n  toAmount?: number | string\n  toAddress?: ToAddress | string\n}\n\nexport type FieldNames = keyof FieldValues\n\nexport type SetFieldValueFunction = <K extends FieldNames>(\n  key: K,\n  value: FieldValues[K],\n  options?: FormFieldOptions\n) => void\n\nexport type FormState = {\n  setFieldValue: SetFieldValueFunction\n}\n\nexport type FormRef = RefObject<FormState | null>\n\nexport interface FormRefProps {\n  formRef?: FormRef\n}\n\nexport interface WidgetConfigProps extends FormRefProps {\n  config: WidgetConfig\n}\n\nexport interface WidgetConfigPartialProps {\n  config?: Partial<WidgetConfig>\n}\n\nexport type WidgetProps = WidgetDrawerProps &\n  WidgetConfig &\n  WidgetConfigPartialProps &\n  FormRefProps\n\nexport interface WidgetDrawerProps extends WidgetConfigPartialProps {\n  elementRef?: RefObject<HTMLDivElement>\n  open?: boolean\n  /**\n   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget\n   */\n  onClose?(): void\n}\n\nexport enum ExpansionType {\n  Routes = 'routes',\n  FromChain = 'fromChain',\n  ToChain = 'toChain',\n}\n"],"mappings":";AAqGA,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,gBAAA;AACA,YAAA,eAAA;AACA,YAAA,eAAA;AACA,YAAA,aAAA;;KACD;AAGD,IAAY,WAAL,yBAAA,UAAA;AACL,UAAA,gBAAA;AACA,UAAA,uBAAA;AACA,UAAA,aAAA;AACA,UAAA,cAAA;AACA,UAAA,eAAA;AACA,UAAA,eAAA;AACA,UAAA,eAAA;AACA,UAAA,aAAA;AACA,UAAA,gBAAA;AACA,UAAA,2BAAA;AACA,UAAA,yBAAA;AACA,UAAA,2BAAA;AACA,UAAA,0BAAA;AACA,UAAA,iBAAA;AACA,UAAA,qBAAA;AACA,UAAA,iCAAA;AACA,UAAA,oCAAA;AACA,UAAA,sBAAA;AACA,UAAA,sBAAA;AACA,UAAA,4BAAA;AACA,UAAA,oBAAA;AACA,UAAA,uBAAA;AACA,UAAA,iBAAA;;KACD;AAGD,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,eAAA;AACA,YAAA,4BAAA;;KACD;AAsRD,IAAY,gBAAL,yBAAA,eAAA;AACL,eAAA,YAAA;AACA,eAAA,eAAA;AACA,eAAA,aAAA;;KACD"}

package/dist/esm/utils/elements.js

@@ -1,17 +1,10 @@
 //#region src/utils/elements.ts
-let ElementId = /* @__PURE__ */ function(ElementId) {
-	ElementId["AppExpandedContainer"] = "widget-app-expanded-container";
-	ElementId["Header"] = "widget-header";
-	ElementId["RelativeContainer"] = "widget-relative-container";
-	ElementId["ScrollableContainer"] = "widget-scrollable-container";
-	return ElementId;
-}({});
 const createElementId = (ElementId, elementId) => elementId ? `${ElementId}-${elementId}` : ElementId;
-const getAppContainer = (elementId) => document.getElementById(createElementId(ElementId.AppExpandedContainer, elementId));
-const getRelativeContainer = (elementId) => document.getElementById(createElementId(ElementId.RelativeContainer, elementId));
-const getScrollableContainer = (elementId) => document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
-const getHeaderElement = (elementId) => document.getElementById(createElementId(ElementId.Header, elementId));
+const getAppContainer = (elementId) => document.getElementById(createElementId("widget-app-expanded-container", elementId));
+const getRelativeContainer = (elementId) => document.getElementById(createElementId("widget-relative-container", elementId));
+const getScrollableContainer = (elementId) => document.getElementById(createElementId("widget-scrollable-container", elementId));
+const getHeaderElement = (elementId) => document.getElementById(createElementId("widget-header", elementId));
 //#endregion
-export { ElementId, createElementId, getAppContainer, getHeaderElement, getRelativeContainer, getScrollableContainer };
+export { createElementId, getAppContainer, getHeaderElement, getRelativeContainer, getScrollableContainer };
 
 //# sourceMappingURL=elements.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"elements.js","names":[],"sources":["../../../src/utils/elements.ts"],"sourcesContent":["export enum ElementId {\n  AppExpandedContainer = 'widget-app-expanded-container',\n  Header = 'widget-header',\n  RelativeContainer = 'widget-relative-container',\n  ScrollableContainer = 'widget-scrollable-container',\n}\n\nexport const createElementId = (\n  ElementId: ElementId,\n  elementId: string\n): string => (elementId ? `${ElementId}-${elementId}` : ElementId)\n\n// NOTE: The getter functions here are often used with code that can be effected by css changes in the\n//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts\n\nexport const getAppContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.AppExpandedContainer, elementId)\n  )\n\nexport const getRelativeContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.RelativeContainer, elementId)\n  )\n\nexport const getScrollableContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.ScrollableContainer, elementId)\n  )\n\nexport const getHeaderElement = (elementId: string): HTMLElement | null =>\n  document.getElementById(createElementId(ElementId.Header, elementId))\n"],"mappings":";AAAA,IAAY,YAAL,yBAAA,WAAA;AACL,WAAA,0BAAA;AACA,WAAA,YAAA;AACA,WAAA,uBAAA;AACA,WAAA,yBAAA;;KACD;AAED,MAAa,mBACX,WACA,cACY,YAAY,GAAG,UAAU,GAAG,cAAc;AAKxD,MAAa,mBAAmB,cAC9B,SAAS,eACP,gBAAgB,UAAU,sBAAsB,UAAU,CAC3D;AAEH,MAAa,wBAAwB,cACnC,SAAS,eACP,gBAAgB,UAAU,mBAAmB,UAAU,CACxD;AAEH,MAAa,0BAA0B,cACrC,SAAS,eACP,gBAAgB,UAAU,qBAAqB,UAAU,CAC1D;AAEH,MAAa,oBAAoB,cAC/B,SAAS,eAAe,gBAAgB,UAAU,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"elements.js","names":[],"sources":["../../../src/utils/elements.ts"],"sourcesContent":["export enum ElementId {\n  AppExpandedContainer = 'widget-app-expanded-container',\n  Header = 'widget-header',\n  RelativeContainer = 'widget-relative-container',\n  ScrollableContainer = 'widget-scrollable-container',\n}\n\nexport const createElementId = (\n  ElementId: ElementId,\n  elementId: string\n): string => (elementId ? `${ElementId}-${elementId}` : ElementId)\n\n// NOTE: The getter functions here are often used with code that can be effected by css changes in the\n//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts\n\nexport const getAppContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.AppExpandedContainer, elementId)\n  )\n\nexport const getRelativeContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.RelativeContainer, elementId)\n  )\n\nexport const getScrollableContainer = (elementId: string): HTMLElement | null =>\n  document.getElementById(\n    createElementId(ElementId.ScrollableContainer, elementId)\n  )\n\nexport const getHeaderElement = (elementId: string): HTMLElement | null =>\n  document.getElementById(createElementId(ElementId.Header, elementId))\n"],"mappings":";AAOA,MAAa,mBACX,WACA,cACY,YAAY,GAAG,UAAU,GAAG,cAAc;AAKxD,MAAa,mBAAmB,cAC9B,SAAS,eACP,gBAAA,iCAAgD,UAAU,CAC3D;AAEH,MAAa,wBAAwB,cACnC,SAAS,eACP,gBAAA,6BAA6C,UAAU,CACxD;AAEH,MAAa,0BAA0B,cACrC,SAAS,eACP,gBAAA,+BAA+C,UAAU,CAC1D;AAEH,MAAa,oBAAoB,cAC/B,SAAS,eAAe,gBAAA,iBAAkC,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.17",
   "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": "./dist/esm/index.js",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "4.0.0-beta.5",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
-    "@mui/system": "^7.3.9",
+    "@lifi/sdk": "4.0.0-beta.7",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/system": "^9.0.0",
     "@tanstack/react-router": "^1.168.10",
     "@tanstack/react-virtual": "^3.13.23",
     "i18next": "^26.0.4",
@@ -47,8 +47,8 @@
     "react-intersection-observer": "^10.0.3",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.12",
-    "@lifi/widget-provider": "4.0.0-beta.11",
-    "@lifi/wallet-management": "4.0.0-beta.11"
+    "@lifi/wallet-management": "4.0.0-beta.17",
+    "@lifi/widget-provider": "4.0.0-beta.17"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.90.0",

package/src/AppDefault.tsx

@@ -6,6 +6,7 @@ import {
   RouterProvider,
 } from '@tanstack/react-router'
 import type { JSX } from 'react'
+import { useState } from 'react'
 import { AppLayout } from './AppLayout.js'
 import { NotFound } from './components/NotFound.js'
 import { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'
@@ -247,22 +248,19 @@ const routeTree = rootRoute.addChildren([
   configuredWalletsRoute,
 ])
 
-const history = createMemoryHistory({
-  initialEntries: ['/'],
-})
-
-const router: ReturnType<typeof createRouter> = createRouter({
-  routeTree,
-  history,
-  defaultPreload: 'intent',
-})
-
 declare module '@tanstack/react-router' {
   interface Register {
-    router: typeof router
+    router: ReturnType<typeof createRouter>
   }
 }
 
 export const AppDefault = (): JSX.Element => {
+  const [router] = useState(() =>
+    createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+      defaultPreload: 'intent',
+    })
+  )
   return <RouterProvider router={router} />
 }

package/src/components/AmountInput/PriceFormHelperText.style.tsx

@@ -14,12 +14,12 @@ export const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =
     ...(onClick
       ? {
           '&:hover': {
-            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: 'transparent',
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
             },
           }),
         }

package/src/components/ButtonTertiary.tsx

@@ -6,21 +6,21 @@ export const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =
     color: theme.vars.palette.text.primary,
     height: 40,
     fontSize: 14,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover, &:active': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     [`&.${buttonClasses.loading}:disabled`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
     ...theme.applyStyles('dark', {
       color: theme.vars.palette.text.primary,
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       '&:hover, &:active': {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
       },
       [`&.${buttonClasses.loading}:disabled`]: {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       },
     }),
     [`.${buttonClasses.loadingIndicator}`]: {

package/src/components/Card/Card.tsx

@@ -52,13 +52,13 @@ export const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =
           style: {
             borderWidth: 1,
             borderStyle: 'solid',
-            borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
             backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
             '&:hover': {
               backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
             },
             ...theme.applyStyles('dark', {
-              borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
               backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
               '&:hover': {
                 backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,

package/src/components/Card/CardIconButton.tsx

@@ -11,9 +11,9 @@ export const CardIconButton: React.FC<
 >(({ theme }) => {
   return {
     padding: theme.spacing(0.5),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     fontSize: '1rem',
   }

package/src/components/Card/CardLabel.tsx

@@ -47,10 +47,10 @@ export const CardLabel: React.FC<
     {
       props: { variant: 'warning' },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
           color: theme.vars.palette.warning.main,
         }),
       },

package/src/components/Chains/AllChainsAvatar.tsx

@@ -38,6 +38,12 @@ const chainTypeIcons = [
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',
     defaultChainId: ChainId.SUI,
   },
+  {
+    name: 'Tron',
+    chainType: ChainType.TVM,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',
+    defaultChainId: ChainId.TRN,
+  },
 ]
 
 const maxChainAvatarsCount = chainTypeIcons.length

package/src/components/ContextMenu.style.tsx

@@ -8,6 +8,6 @@ export const ContextMenuButton: React.FC<
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
 }))

package/src/components/ContractComponent/ItemPrice.tsx

@@ -33,5 +33,5 @@ export const ItemPrice: React.FC<ItemPriceProps> = ({
       })
     }
   }, [contractCalls, setFieldValue, token])
-  return <Token token={token} p={2} />
+  return <Token token={token} sx={{ p: 2 }} />
 }

package/src/components/ContractComponent/NFT/NFTBase.tsx

@@ -85,7 +85,7 @@ export const NFTBase: React.FC<NFTProps> = ({
           ) : null}
         </Box>
       </Box>
-      <Token token={token} isLoading={isLoading} mt={2} />
+      <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />
     </Box>
   )
 }

package/src/components/Header/ActivitiesButton.style.tsx

@@ -41,14 +41,14 @@ export const ActivitiesIconButton: React.FC<
     {
       props: { active: true },
       style: ({ theme }) => ({
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
         '&:hover': {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
           },
         }),
       }),

package/src/components/Header/ActivitiesButton.tsx

@@ -25,7 +25,7 @@ export const ActivitiesButton = (): JSX.Element => {
         active={indicator.active || indicator.failed}
         size="medium"
         onClick={() => navigate({ to: navigationRoutes.activities })}
-        disableRipple
+        disableRipple={indicator.active || indicator.failed}
       >
         <ErrorBadge
           invisible={!indicator.failed}

package/src/components/Header/Header.style.ts

@@ -62,12 +62,12 @@ export const WalletButton: React.FC<
   borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
   backgroundColor: 'transparent',
   '&:hover': {
-    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: 'transparent',
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
   }),
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {

package/src/components/Header/SettingsButton.style.tsx

@@ -32,27 +32,27 @@ export const SettingsIconButton: React.FC<
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
         '&:hover': {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
           },
         }),
       }
     case 'warning':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
+          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,
+            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,
           },
         }),
       }

package/src/components/IconCircle/IconCircle.style.tsx

@@ -19,28 +19,28 @@ export const getStatusColor = (
   switch (status) {
     case 'success':
       return {
-        color: theme.vars.palette.success.mainChannel,
+        color: theme.vars.palette.success.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case 'error':
       return {
-        color: theme.vars.palette.error.mainChannel,
+        color: theme.vars.palette.error.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case 'warning':
       return {
-        color: theme.vars.palette.warning.mainChannel,
+        color: theme.vars.palette.warning.main,
         mixAmount: 48,
         lightDarken: 0.32,
         darkDarken: 0,
       }
     case 'info':
       return {
-        color: theme.vars.palette.info.mainChannel,
+        color: theme.vars.palette.info.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
@@ -61,7 +61,7 @@ export const IconCircleRoot: React.FC<
   ({ theme, colorConfig, circleSize }) => {
     const svgSize = Math.round(circleSize * iconSizeRatio)
     return {
-      backgroundColor: `color-mix(in srgb, rgb(${colorConfig.color}) ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
       borderRadius: '50%',
       width: circleSize,
       height: circleSize,
@@ -69,13 +69,13 @@ export const IconCircleRoot: React.FC<
       position: 'relative',
       placeItems: 'center',
       '& > svg': {
-        color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
         width: svgSize,
         height: svgSize,
       },
       ...theme.applyStyles('dark', {
         '& > svg': {
-          color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
           width: svgSize,
           height: svgSize,
         },

package/src/components/IconTypography.ts

@@ -1,11 +1,11 @@
+import type { BoxProps } from '@mui/material'
 import { Box, styled } from '@mui/material'
 import type React from 'react'
 
-export const IconTypography: React.FC<React.ComponentProps<typeof Box>> =
-  styled(Box)(({ theme }) => ({
-    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
-    lineHeight: 0,
-    ...theme.applyStyles('dark', {
-      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
-    }),
-  }))
+export const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({
+  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
+  lineHeight: 0,
+  ...theme.applyStyles('dark', {
+    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,
+  }),
+}))

package/src/components/ListItemButton.tsx

@@ -13,7 +13,7 @@ export const ListItemButton: React.FC<
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
     [`&.${listItemButtonClasses.selected}`]: {
       backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,

package/src/components/Messages/AlertMessage.style.tsx

@@ -16,9 +16,9 @@ export const AlertMessageCard: React.FC<
   whiteSpace: 'pre-line',
   width: '100%',
   paddingBottom: theme.spacing(2),
-  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
   }),
   variants: [
     {
@@ -26,9 +26,9 @@ export const AlertMessageCard: React.FC<
         severity: 'warning',
       },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
         }),
       },
     },

package/src/components/Messages/AlertMessage.tsx

@@ -24,7 +24,7 @@ export const AlertMessage = ({
   <AlertMessageCard severity={severity} {...rest}>
     <AlertMessageCardTitle
       severity={severity}
-      alignItems={multiline ? 'start' : 'center'}
+      sx={{ alignItems: multiline ? 'start' : 'center' }}
     >
       {icon}
       {title}

package/src/components/Messages/GasRefuelMessage.style.ts

@@ -9,14 +9,14 @@ export const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =
         [`& + .${switchClasses.track}`]: {
           backgroundColor: theme.vars.palette.info.main,
           ...theme.applyStyles('dark', {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
           }),
         },
       },
       [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
         color: theme.vars.palette.info.main,
         ...theme.applyStyles('dark', {
-          color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
         }),
       },
     },

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -51,7 +51,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
               alignItems: 'center',
             }}
           >
-            <IconTypography mr={0.5} fontSize={16}>
+            <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
@@ -78,7 +78,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
               alignItems: 'center',
             }}
           >
-            <IconTypography mr={0.5} fontSize={16}>
+            <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
               <AccessTimeFilled fontSize="inherit" />
             </IconTypography>
             <Typography