@openocean.finance/widget 1.0.0

package/src/themes/windows95.ts

@@ -0,0 +1,101 @@
+import type { WidgetTheme } from '../types/widget.js'
+
+export const windows95Theme: WidgetTheme = {
+  palette: {
+    primary: {
+      main: '#0000ff',
+    },
+    secondary: {
+      main: '#f7c303',
+    },
+    text: {
+      primary: '#30313d',
+      secondary: '#6d6e78',
+    },
+    background: {
+      default: '#c0c9d2',
+      paper: '#dfdfdf',
+    },
+    grey: {
+      300: '#bbbbbb',
+    },
+  },
+  shape: {
+    borderRadius: 0,
+    borderRadiusSecondary: 0,
+    borderRadiusTertiary: 0,
+  },
+  container: {
+    border: '1px solid #0a0a0a',
+  },
+  navigation: {
+    edge: false,
+  },
+  playground: {
+    background: '#008080',
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          '&:hover': {
+            boxShadow:
+              'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      defaultProps: {
+        variant: 'outlined',
+      },
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          borderWidth: 0,
+          '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: '#cccccc',
+          },
+        },
+      },
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: {
+            borderWidth: 0,
+          },
+        },
+      ],
+    },
+    MuiInputCard: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ffffff',
+          boxShadow:
+            'inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080',
+        },
+      },
+    },
+    MuiIconButton: {
+      defaultProps: {
+        // disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          backgroundColor: '#dfdfdf',
+          '&:hover': {
+            color: 'inherit',
+            backgroundColor: '#cccccc',
+          },
+        },
+      },
+    },
+  },
+}

package/src/types/events.ts

@@ -0,0 +1,114 @@
+import type { ChainId, ChainType, Process, 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'
+import type { TokenAmount } from './token.js'
+
+export enum WidgetEvent {
+  RouteExecutionStarted = 'routeExecutionStarted',
+  RouteExecutionUpdated = 'routeExecutionUpdated',
+  RouteExecutionCompleted = 'routeExecutionCompleted',
+  RouteExecutionFailed = 'routeExecutionFailed',
+  RouteHighValueLoss = 'routeHighValueLoss',
+  RouteSelected = 'routeSelected',
+  AvailableRoutes = 'availableRoutes',
+  ContactSupport = 'contactSupport',
+  SourceChainTokenSelected = 'sourceChainTokenSelected',
+  DestinationChainTokenSelected = 'destinationChainTokenSelected',
+  SendToWalletToggled = 'sendToWalletToggled',
+  /**
+   * @deprecated Use `PageEntered` event instead.
+   */
+  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
+  /**
+   * @deprecated use useWalletManagementEvents hook.
+   */
+  WalletConnected = 'walletConnected',
+  WidgetExpanded = 'widgetExpanded',
+  PageEntered = 'pageEntered',
+  FormFieldChanged = 'formFieldChanged',
+  SettingUpdated = 'settingUpdated',
+  TokenSearch = 'tokenSearch',
+  LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
+}
+
+export type WidgetEvents = {
+  routeExecutionStarted: Route
+  routeExecutionUpdated: RouteExecutionUpdate
+  routeExecutionCompleted: Route
+  routeExecutionFailed: RouteExecutionUpdate
+  routeHighValueLoss: RouteHighValueLossUpdate
+  routeSelected: RouteSelected
+  availableRoutes: Route[]
+  contactSupport: ContactSupport
+  sourceChainTokenSelected: ChainTokenSelected
+  destinationChainTokenSelected: ChainTokenSelected
+  sendToWalletToggled: boolean
+  formFieldChanged: FormFieldChanged
+  reviewTransactionPageEntered?: Route
+  walletConnected: WalletConnected
+  widgetExpanded: boolean
+  pageEntered: NavigationRouteType
+  settingUpdated: SettingUpdated
+  tokenSearch: TokenSearch
+  [WidgetEvent.LowAddressActivityConfirmed]: {
+    address: string
+    chainId: number
+  }
+}
+
+export type ContactSupport = {
+  supportId?: string
+}
+
+export type RouteHighValueLossUpdate = {
+  fromAmountUSD: number
+  toAmountUSD: number
+  gasCostUSD?: number
+  feeCostUSD?: number
+  valueLoss: number
+}
+
+export type RouteExecutionUpdate = {
+  route: Route
+  process: Process
+}
+
+export type RouteSelected = {
+  route: Route
+  routes: Route[]
+}
+
+export type TokenSearch = {
+  value: string
+  tokens: TokenAmount[]
+}
+
+export type ChainTokenSelected = {
+  chainId: ChainId
+  tokenAddress: string
+}
+
+export type WalletConnected = {
+  address?: string
+  chainId?: number
+  chainType?: ChainType
+}
+
+export type FormFieldChanged = {
+  [K in keyof DefaultValues]: {
+    fieldName: K
+    newValue: DefaultValues[K]
+    oldValue: DefaultValues[K]
+  }
+}[keyof DefaultValues]
+
+export type SettingUpdated<
+  K extends keyof SettingsProps = keyof SettingsProps,
+> = {
+  setting: K
+  newValue: SettingsProps[K]
+  oldValue: SettingsProps[K]
+  newSettings: SettingsProps
+  oldSettings: SettingsProps
+}

package/src/types/token.ts

@@ -0,0 +1,6 @@
+import type { TokenAmount as SDKTokenAmount } from '@lifi/sdk'
+
+export interface TokenAmount extends SDKTokenAmount {
+  featured?: boolean
+  popular?: boolean
+}

package/src/types/widget.ts

@@ -0,0 +1,323 @@
+import type {
+  BaseToken,
+  ChainType,
+  ContractCall,
+  Order,
+  RouteOptions,
+  SDKConfig,
+  StaticToken,
+  Token,
+} from '@lifi/sdk'
+import type {
+  Components,
+  PaletteMode,
+  PaletteOptions,
+  Shape,
+  SxProps,
+  Theme,
+} from '@mui/material'
+import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
+import type {
+  CSSProperties,
+  MutableRefObject,
+  ReactNode,
+  RefObject,
+} from 'react'
+import type {
+  CoinbaseWalletParameters,
+  MetaMaskParameters,
+  WalletConnectParameters,
+} from 'wagmi/connectors'
+import type {
+  LanguageKey,
+  LanguageResources,
+} from '../providers/I18nProvider/types.js'
+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 CustomSubvariant = 'checkout' | 'deposit'
+export interface SubvariantOptions {
+  split?: SplitSubvariant
+  custom?: CustomSubvariant
+}
+
+export type Appearance = PaletteMode | 'auto'
+export interface NavigationProps {
+  /**
+   * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
+   * @default true
+   */
+  edge?: boolean
+}
+export type WidgetThemeComponents = Pick<
+  Components<Theme>,
+  | 'MuiAppBar'
+  | 'MuiAvatar'
+  | 'MuiButton'
+  | 'MuiCard'
+  | 'MuiIconButton'
+  | 'MuiInputCard'
+  | 'MuiTabs'
+  | 'MuiTypography'
+>
+
+export type WidgetTheme = {
+  palette?: Pick<
+    PaletteOptions,
+    'background' | 'grey' | 'primary' | 'secondary' | 'text'
+  >
+  shape?: Partial<Shape>
+  typography?: TypographyOptions
+  components?: WidgetThemeComponents
+  container?: CSSProperties
+  header?: CSSProperties
+  playground?: CSSProperties
+  navigation?: NavigationProps
+}
+
+export enum DisabledUI {
+  FromAmount = 'fromAmount',
+  FromToken = 'fromToken',
+  ToAddress = 'toAddress',
+  ToToken = 'toToken',
+}
+export type DisabledUIType = `${DisabledUI}`
+
+export enum HiddenUI {
+  Appearance = 'appearance',
+  DrawerCloseButton = 'drawerCloseButton',
+  History = 'history',
+  Language = 'language',
+  PoweredBy = 'poweredBy',
+  ToAddress = 'toAddress',
+  ToToken = 'toToken',
+  WalletMenu = 'walletMenu',
+  IntegratorStepDetails = 'integratorStepDetails',
+  ReverseTokensButton = 'reverseTokensButton',
+  RouteTokenDescription = 'routeTokenDescription',
+}
+export type HiddenUIType = `${HiddenUI}`
+
+export enum RequiredUI {
+  ToAddress = 'toAddress',
+}
+export type RequiredUIType = `${RequiredUI}`
+
+export interface WidgetWalletConfig {
+  onConnect?(): void
+  walletConnect?: WalletConnectParameters
+  coinbase?: CoinbaseWalletParameters
+  metaMask?: MetaMaskParameters
+  /**
+   * Determines whether the widget should provide partial wallet management functionality.
+   *
+   * In partial mode, external wallet management will be used for "opt-out" providers,
+   * while the internal management is applied for any remaining providers that do not opt out.
+   * This allows a flexible balance between the integrator's custom wallet menu and the widget's native wallet menu.
+   * @default false
+   */
+  usePartialWalletManagement?: boolean
+}
+
+export interface WidgetSDKConfig
+  extends Omit<
+    SDKConfig,
+    | 'apiKey'
+    | 'disableVersionCheck'
+    | 'integrator'
+    | 'routeOptions'
+    | 'widgetVersion'
+  > {
+  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>
+}
+
+export interface WidgetContractTool {
+  name: string
+  logoURI: string
+}
+
+export interface CalculateFeeParams {
+  fromChainId: number
+  toChainId: number
+  fromTokenAddress: string
+  toTokenAddress: string
+  fromAddress?: string
+  toAddress?: string
+  fromAmount?: bigint
+  toAmount?: bigint
+  slippage?: number
+}
+
+export interface WidgetFeeConfig {
+  name?: string
+  logoURI?: string
+  fee?: number
+  /**
+   * Function to calculate fees before fetching quotes.
+   * If provided, this function will be used instead of the `fee` parameter.
+   * Only one of `fee` or `calculateFee` should be used.
+   *
+   * @param params Object containing the fee calculation parameters
+   * @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>
+}
+
+export interface ToAddress {
+  name?: string
+  address: string
+  chainType: ChainType
+  logoURI?: string
+}
+
+export interface AllowDeny<T> {
+  allow?: T[]
+  deny?: T[]
+}
+
+export type WidgetChains = {
+  from?: AllowDeny<number>
+  to?: AllowDeny<number>
+  types?: AllowDeny<ChainType>
+} & AllowDeny<number>
+
+export type WidgetTokens = {
+  featured?: StaticToken[]
+  include?: Token[]
+  popular?: StaticToken[]
+} & AllowDeny<BaseToken>
+
+export type WidgetLanguages = {
+  default?: LanguageKey
+} & AllowDeny<LanguageKey>
+
+export type PoweredByType = 'default' | 'jumper'
+
+export interface RouteLabel {
+  text: string
+  sx?: SxProps<Theme>
+}
+
+export interface RouteLabelRule {
+  label: RouteLabel
+  // Matching criteria
+  bridges?: AllowDeny<string>
+  exchanges?: AllowDeny<string>
+  fromChainId?: number[]
+  toChainId?: number[]
+  fromTokenAddress?: string[]
+  toTokenAddress?: string[]
+}
+
+export interface WidgetConfig {
+  fromChain?: number
+  toChain?: number
+  fromToken?: string
+  toToken?: string
+  toAddress?: ToAddress
+  toAddresses?: ToAddress[]
+  fromAmount?: number | string
+  toAmount?: number | string
+  formUpdateKey?: string
+
+  contractCalls?: ContractCall[]
+  contractComponent?: ReactNode
+  contractSecondaryComponent?: ReactNode
+  contractCompactComponent?: ReactNode
+  contractTool?: WidgetContractTool
+  integrator: string
+  apiKey?: string
+  fee?: number
+  feeConfig?: WidgetFeeConfig
+  referrer?: string
+
+  routePriority?: Order
+  slippage?: number
+
+  variant?: WidgetVariant
+  subvariant?: WidgetSubvariant
+  subvariantOptions?: SubvariantOptions
+
+  appearance?: Appearance
+  theme?: WidgetTheme
+
+  disabledUI?: DisabledUIType[]
+  hiddenUI?: HiddenUIType[]
+  requiredUI?: RequiredUIType[]
+  useRecommendedRoute?: boolean
+  useRelayerRoutes?: boolean
+
+  walletConfig?: WidgetWalletConfig
+  sdkConfig?: WidgetSDKConfig
+
+  buildUrl?: boolean
+  keyPrefix?: string
+
+  bridges?: AllowDeny<string>
+  exchanges?: AllowDeny<string>
+  chains?: WidgetChains
+  tokens?: WidgetTokens
+  languages?: WidgetLanguages
+  languageResources?: LanguageResources
+  explorerUrls?: Record<number, string[]> &
+    Partial<Record<'internal', string[]>>
+  poweredBy?: PoweredByType
+
+  /**
+   * Custom labels/badges to show on routes based on specified rules
+   */
+  routeLabels?: RouteLabelRule[]
+}
+
+export interface FormFieldOptions {
+  setUrlSearchParam: boolean
+}
+
+export interface FieldValues
+  extends Omit<DefaultFieldValues, 'fromAmount' | 'toAmount' | 'toAddress'> {
+  fromAmount?: number | string
+  toAmount?: number | string
+  toAddress?: ToAddress | string
+}
+
+export type FieldNames = keyof FieldValues
+
+export type SetFieldValueFunction = <K extends FieldNames>(
+  key: K,
+  value: FieldValues[K],
+  options?: FormFieldOptions
+) => void
+
+export type FormState = {
+  setFieldValue: SetFieldValueFunction
+}
+
+export type FormRef = MutableRefObject<FormState | null>
+
+export interface FormRefProps {
+  formRef?: FormRef
+}
+
+export interface WidgetConfigProps extends FormRefProps {
+  config: WidgetConfig
+}
+
+export interface WidgetConfigPartialProps {
+  config?: Partial<WidgetConfig>
+}
+
+export type WidgetProps = WidgetDrawerProps &
+  WidgetConfig &
+  WidgetConfigPartialProps &
+  FormRefProps
+
+export interface WidgetDrawerProps extends WidgetConfigPartialProps {
+  elementRef?: RefObject<HTMLDivElement>
+  open?: boolean
+  /**
+   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
+   */
+  onClose?(): void
+}

package/src/utils/chainType.ts

@@ -0,0 +1,29 @@
+import { isUTXOAddress } from '@bigmi/core'
+import { ChainId, ChainType, isSVMAddress } from '@lifi/sdk'
+import { isAddress as isEVMAddress } from 'viem'
+
+const chainTypeAddressValidation = {
+  [ChainType.EVM]: isEVMAddress,
+  [ChainType.SVM]: isSVMAddress,
+  [ChainType.UTXO]: isUTXOAddress,
+  [ChainType.MVM]: () => false,
+}
+
+export const getChainTypeFromAddress = (
+  address: string
+): ChainType | undefined => {
+  for (const chainType in chainTypeAddressValidation) {
+    const isChainType =
+      chainTypeAddressValidation[chainType as ChainType](address)
+    if (isChainType) {
+      return chainType as ChainType
+    }
+  }
+}
+
+export const defaultChainIdsByType = {
+  [ChainType.EVM]: ChainId.ETH,
+  [ChainType.SVM]: ChainId.SOL,
+  [ChainType.UTXO]: ChainId.BTC,
+  [ChainType.MVM]: ChainId.SUI,
+}

package/src/utils/colors.ts

@@ -0,0 +1,53 @@
+import type { Theme } from '@mui/material'
+import { alpha, decomposeColor, recomposeColor } from '@mui/material'
+
+export const getContrastAlphaColor = (theme: Theme, value: number) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.common.black, value)
+    : alpha(theme.palette.common.white, value)
+
+export const getWarningBackgroundColor = (theme: Theme) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.warning.main, 0.32)
+    : alpha(theme.palette.warning.main, 0.16)
+
+export const getInfoBackgroundColor = (theme: Theme) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.info.main, 0.12)
+    : alpha(theme.palette.info.main, 0.16)
+
+/**
+ * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ * Remove in favor of MUI one once the next major version is released.
+ * @param {string} background - CSS color
+ * @param {string} overlay - CSS color
+ * @param {number} opacity - Opacity multiplier in the range 0 - 1
+ * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
+ */
+export function blend(
+  background: string,
+  overlay: string,
+  opacity: number,
+  gamma = 1.0
+) {
+  const blendChannel = (b: number, o: number) =>
+    Math.round(
+      (b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma
+    )
+
+  const backgroundColor = decomposeColor(background)
+  const overlayColor = decomposeColor(overlay)
+
+  const rgb: [number, number, number] = [
+    blendChannel(backgroundColor.values[0], overlayColor.values[0]),
+    blendChannel(backgroundColor.values[1], overlayColor.values[1]),
+    blendChannel(backgroundColor.values[2], overlayColor.values[2]),
+  ]
+
+  return recomposeColor({
+    type: 'rgb',
+    values: rgb,
+  })
+}

package/src/utils/compactNumberFormatter.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { compactNumberFormatter } from './compactNumberFormatter.js'
+
+describe('Compact Number Formatter', () => {
+  describe('basic formatting', () => {
+    const testCases = [
+      { input: '0.123456789', expected: '0.123456' },
+      { input: '0.0123456', expected: '0.012345' },
+      { input: '0.00123456', expected: '0.001234' },
+      { input: '0.000123456', expected: '0.000123' },
+      { input: '0.06942', expected: '0.06942' },
+      { input: '0.006942', expected: '0.006942' },
+      { input: '0.0006942', expected: '0.000694' },
+      { input: '0.00006942', expected: '0.0₄6942' },
+      { input: '0.00000123456', expected: '0.0₅1234' },
+      { input: '0.000006942', expected: '0.0₅6942' },
+      { input: '0.00000000001', expected: '0.0₁₀1' },
+      { input: '0.00000006942', expected: '0.0₇6942' },
+      { input: '0.0000000694269', expected: '0.0₇6942' },
+      { input: '0.0000000694069', expected: '0.0₇694' },
+      { input: '0.000000006942', expected: '0.0₈6942' },
+      {
+        input: '0.000000000000006942',
+        expected: '0.0₁₄6942',
+      },
+      { input: '-0.0000042', expected: '-0.0₅42' },
+      { input: '-0.000000042', expected: '-0.0₇42' },
+      { input: '1.0000000042', expected: '1.0₈42' },
+      { input: '123456789.00042', expected: '123456789.00042' },
+      {
+        input: '123456789.000042',
+        expected: '123456789.0₄42',
+      },
+      {
+        input: '123456789.0000042',
+        expected: '123456789.0₅42',
+      },
+      { input: '1234567.000000042', expected: '1234567.0₇42' },
+      {
+        input: '1234567.000000042',
+        expected: '1,234,567.0₇42',
+        lng: 'en',
+        useGrouping: true,
+      },
+      {
+        input: '1234567.987654321',
+        expected: '1,234,567.987654',
+        lng: 'en',
+        useGrouping: true,
+      },
+      {
+        input: '1234567.000000042',
+        expected: '1.234.567,0₇42',
+        lng: 'de',
+        useGrouping: true,
+      },
+    ]
+
+    testCases.forEach(({ input, expected, lng, useGrouping = false }) => {
+      it(`should format ${input} correctly`, () => {
+        expect(compactNumberFormatter(lng, { useGrouping })(input)).toBe(
+          expected
+        )
+      })
+    })
+  })
+})