@lifi/widget 3.8.0-beta.2 → 3.8.0

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -3,13 +3,13 @@ import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import { BadgedValue } from './SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
 
 export const GasPriceSettings: React.FC = () => {
   const { t } = useTranslation()
-  const setValue = useSettingsStore((state) => state.setValue)
+  const { setValue } = useSettingsActions()
   const { isGasPriceChanged } = useSettingMonitor()
   const { gasPrice } = useSettings(['gasPrice'])
 

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import { BadgedValue } from './SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
 
@@ -12,7 +12,7 @@ const Priorities: Order[] = ['CHEAPEST', 'FASTEST']
 
 export const RoutePrioritySettings: React.FC = () => {
   const { t } = useTranslation()
-  const setValue = useSettingsStore((state) => state.setValue)
+  const { setValue } = useSettingsActions()
   const { isRoutePriorityChanged } = useSettingMonitor()
   const { routePriority } = useSettings(['routePriority'])
   const currentRoutePriority = routePriority ?? ''

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,14 +1,12 @@
 import { Percent, WarningRounded } from '@mui/icons-material'
-import { Box, Typography } from '@mui/material'
+import { Box, Typography, debounce } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
-import { useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../../stores/settings/useSettings.js'
-import {
-  defaultSlippage,
-  useSettingsStore,
-} from '../../../stores/settings/useSettingsStore.js'
+import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
+import { defaultSlippage } from '../../../stores/settings/useSettingsStore.js'
 import { formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
@@ -24,36 +22,48 @@ export const SlippageSettings: React.FC = () => {
   const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
     useSettingMonitor()
   const { slippage } = useSettings(['slippage'])
-  const setValue = useSettingsStore((state) => state.setValue)
+  const { setValue } = useSettingsActions()
   const defaultValue = useRef(slippage)
   const [focused, setFocused] = useState<'input' | 'button'>()
 
+  const customInputValue =
+    !slippage || slippage === defaultSlippage ? '' : slippage
+
+  const [inputValue, setInputValue] = useState(customInputValue)
+
   const handleDefaultClick = () => {
     setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current))
   }
 
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target
+  const debouncedSetValue = useMemo(() => debounce(setValue, 500), [setValue])
 
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current, true)
-    )
-  }
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      const { value } = event.target
+
+      setInputValue(formatSlippage(value, defaultValue.current, true))
+
+      debouncedSetValue(
+        'slippage',
+        formatSlippage(value || defaultSlippage, defaultValue.current, true)
+      )
+    },
+    [debouncedSetValue]
+  )
 
   const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
     setFocused(undefined)
 
     const { value } = event.target
 
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current)
+    const formattedValue = formatSlippage(
+      value || defaultSlippage,
+      defaultValue.current
     )
-  }
+    setInputValue(formattedValue === defaultSlippage ? '' : formattedValue)
 
-  const customInputValue =
-    !slippage || slippage === defaultSlippage ? '' : slippage
+    setValue('slippage', formattedValue)
+  }
 
   const badgeColor = isSlippageOutsideRecommendedLimits
     ? 'warning'
@@ -98,7 +108,7 @@ export const SlippageSettings: React.FC = () => {
               setFocused('input')
             }}
             onBlur={handleInputBlur}
-            value={customInputValue}
+            value={inputValue}
             autoComplete="off"
           />
         </SettingsFieldSet>

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,7 +1,8 @@
-import { type SDKConfig, config, createConfig } from '@lifi/sdk'
+import type { SDKConfig } from '@lifi/sdk'
+import { config, createConfig } from '@lifi/sdk'
 import { createContext, useContext, useId, useMemo } from 'react'
 import { version } from '../../config/version.js'
-import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import type { WidgetContextProps, WidgetProviderProps } from './types.js'
 
 const initialContext: WidgetContextProps = {
@@ -20,6 +21,7 @@ export const WidgetProvider: React.FC<
   React.PropsWithChildren<WidgetProviderProps>
 > = ({ children, config: widgetConfig }) => {
   const elementId = useId()
+  const { setDefaultSettings } = useSettingsActions()
 
   if (!widgetConfig?.integrator) {
     throw new Error('Required property "integrator" is missing.')
@@ -69,7 +71,7 @@ export const WidgetProvider: React.FC<
         integrator: widgetConfig.integrator,
       }
     }
-  }, [elementId, widgetConfig])
+  }, [elementId, widgetConfig, setDefaultSettings])
   return (
     <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
   )

package/src/stores/form/types.ts

@@ -62,7 +62,7 @@ export interface FormProps {
   touchedFields: { [K in FormFieldNames]?: boolean }
 }
 
-interface ResetOptions {
+export interface ResetOptions {
   defaultValue?: GenericFormValue
 }
 

package/src/stores/form/useFieldActions.ts

@@ -1,8 +1,19 @@
+import { useCallback } from 'react'
 import { shallow } from 'zustand/shallow'
-import type { FormActions } from './types.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import type { FormFieldChanged } from '../../types/events.js'
+import { WidgetEvent } from '../../types/events.js'
+import type {
+  DefaultValues,
+  FormActions,
+  FormFieldNames,
+  GenericFormValue,
+  SetOptions,
+} from './types.js'
 import { useFormStore } from './useFormStore.js'
 
 export const useFieldActions = () => {
+  const emitter = useWidgetEvents()
   const actions = useFormStore<FormActions>(
     (store) => ({
       getFieldValues: store.getFieldValues,
@@ -16,5 +27,65 @@ export const useFieldActions = () => {
     shallow
   )
 
-  return actions
+  const setFieldValueWithEmittedEvents = useCallback(
+    (
+      fieldName: FormFieldNames,
+      newValue: GenericFormValue,
+      options?: SetOptions
+    ) => {
+      const oldValue = actions.getFieldValues(fieldName)[0]
+
+      actions.setFieldValue(fieldName, newValue, options)
+
+      if (newValue !== oldValue) {
+        emitter.emit(WidgetEvent.FormFieldChanged, {
+          fieldName,
+          newValue,
+          oldValue,
+        } as FormFieldChanged)
+      }
+    },
+    [actions, emitter]
+  )
+
+  const setUserAndDefaultValuesWithEmittedEvents = useCallback(
+    (formValues: Partial<DefaultValues>) => {
+      const formValuesKeys = Object.keys(formValues) as FormFieldNames[]
+
+      const changedValues = formValuesKeys.reduce(
+        (accum, fieldName) => {
+          const oldValue = actions.getFieldValues(fieldName)[0]
+          const newValue = formValues[fieldName]
+
+          if (newValue !== oldValue) {
+            accum.push({ fieldName, newValue, oldValue })
+          }
+
+          return accum
+        },
+        [] as {
+          fieldName: FormFieldNames
+          newValue: GenericFormValue
+          oldValue: GenericFormValue
+        }[]
+      )
+
+      actions.setUserAndDefaultValues(formValues)
+
+      changedValues.forEach(({ fieldName, newValue, oldValue }) => {
+        emitter.emit(WidgetEvent.FormFieldChanged, {
+          fieldName,
+          newValue,
+          oldValue,
+        } as FormFieldChanged)
+      })
+    },
+    [actions, emitter]
+  )
+
+  return {
+    ...actions,
+    setFieldValue: setFieldValueWithEmittedEvents,
+    setUserAndDefaultValues: setUserAndDefaultValuesWithEmittedEvents,
+  }
 }

package/src/stores/settings/types.ts

@@ -9,6 +9,8 @@ export type ValueSetter<S> = <K extends keyof S>(
   value: S[Extract<K, string>]
 ) => void
 
+export type ValueGetter<S> = <K extends keyof S>(key: K) => S[K]
+
 export type ValuesSetter<S> = <K extends keyof S>(
   values: Record<K, S[Extract<K, string>]>
 ) => void
@@ -31,9 +33,10 @@ export interface SettingsProps {
   _enabledExchanges: Record<string, boolean>
 }
 
-export interface SettingsState extends SettingsProps {
+export interface SettingsActions {
   setValue: ValueSetter<SettingsProps>
-  setValues: ValuesSetter<SettingsProps>
+  getValue: ValueGetter<SettingsProps>
+  getSettings: () => SettingsProps
   initializeTools(
     toolType: SettingsToolType,
     tools: string[],
@@ -44,6 +47,8 @@ export interface SettingsState extends SettingsProps {
   reset(bridges: string[], exchanges: string[]): void
 }
 
+export type SettingsState = SettingsProps & SettingsActions
+
 export interface SendToWalletState {
   showSendToWallet: boolean
 }

package/src/stores/settings/useAppearance.ts

@@ -1,4 +1,4 @@
-import { shallow } from 'zustand/shallow'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import type { Appearance } from '../../types/widget.js'
 import { useSettingsStore } from './useSettingsStore.js'
 
@@ -6,10 +6,8 @@ export const useAppearance = (): [
   Appearance,
   (appearance: Appearance) => void,
 ] => {
-  const [appearance, setValue] = useSettingsStore(
-    (state) => [state.appearance, state.setValue],
-    shallow
-  )
+  const { setValue } = useSettingsActions()
+  const appearance = useSettingsStore((state) => state.appearance)
   const setAppearance = (appearance: Appearance) => {
     setValue('appearance', appearance)
   }

package/src/stores/settings/useSettingsActions.ts

@@ -0,0 +1,152 @@
+import { useCallback } from 'react'
+import { shallow } from 'zustand/shallow'
+import type { widgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { WidgetEvent } from '../../types/events.js'
+import type { WidgetConfig } from '../../types/widget.js'
+import { deepEqual } from '../../utils/deepEqual.js'
+import type {
+  SettingsActions,
+  SettingsProps,
+  SettingsToolType,
+  ValueSetter,
+} from './types.js'
+import {
+  defaultConfigurableSettings,
+  useSettingsStore,
+} from './useSettingsStore.js'
+
+const emitEventOnChange = <T extends (...args: any[]) => any>(
+  emitter: typeof widgetEvents,
+  actions: Omit<SettingsActions, 'initializeTools'>,
+  settingFunction: T,
+  ...args: Parameters<T>
+) => {
+  const oldSettings = actions.getSettings()
+
+  settingFunction(...args)
+
+  const newSettings = actions.getSettings()
+
+  if (!deepEqual(oldSettings, newSettings)) {
+    ;(Object.keys(oldSettings) as (keyof SettingsProps)[]).forEach(
+      (toolKey) => {
+        if (!deepEqual(oldSettings[toolKey], newSettings[toolKey])) {
+          emitter.emit(WidgetEvent.SettingUpdated, {
+            setting: toolKey,
+            newValue: newSettings[toolKey],
+            oldValue: oldSettings[toolKey],
+            newSettings: newSettings,
+            oldSettings: oldSettings,
+          })
+        }
+      }
+    )
+  }
+}
+
+export const useSettingsActions = () => {
+  const emitter = useWidgetEvents()
+  const actions = useSettingsStore(
+    (state) => ({
+      setValue: state.setValue,
+      getValue: state.getValue,
+      getSettings: state.getSettings,
+      reset: state.reset,
+      setToolValue: state.setToolValue,
+      toggleToolKeys: state.toggleToolKeys,
+    }),
+    shallow
+  )
+
+  const setValueWithEmittedEvent = useCallback<ValueSetter<SettingsProps>>(
+    (value, newValue) => {
+      const setting = value as keyof SettingsProps
+      emitEventOnChange(emitter, actions, actions.setValue, setting, newValue)
+    },
+    [emitter, actions]
+  )
+
+  const setDefaultSettingsWithEmittedEvents = useCallback(
+    (config?: WidgetConfig) => {
+      const slippage = actions.getValue('slippage')
+      const routePriority = actions.getValue('routePriority')
+      const gasPrice = actions.getValue('gasPrice')
+
+      const defaultSlippage =
+        (config?.slippage || config?.sdkConfig?.routeOptions?.slippage || 0) *
+        100
+      const defaultRoutePriority =
+        config?.routePriority || config?.sdkConfig?.routeOptions?.order
+
+      defaultConfigurableSettings.slippage = (
+        defaultSlippage || defaultConfigurableSettings.slippage
+      )?.toString()
+
+      defaultConfigurableSettings.routePriority =
+        defaultRoutePriority || defaultConfigurableSettings.routePriority
+
+      if (!slippage) {
+        setValueWithEmittedEvent(
+          'slippage',
+          defaultConfigurableSettings.slippage
+        )
+      }
+      if (!routePriority) {
+        setValueWithEmittedEvent(
+          'routePriority',
+          defaultConfigurableSettings.routePriority
+        )
+      }
+      if (!gasPrice) {
+        setValueWithEmittedEvent(
+          'gasPrice',
+          defaultConfigurableSettings.gasPrice
+        )
+      }
+    },
+    [actions, setValueWithEmittedEvent]
+  )
+
+  const resetWithEmittedEvents = useCallback(
+    (bridges: string[], exchanges: string[]) => {
+      emitEventOnChange(emitter, actions, actions.reset, bridges, exchanges)
+    },
+    [emitter, actions]
+  )
+
+  const setToolValueWithEmittedEvents = useCallback(
+    (toolType: SettingsToolType, tool: string, value: boolean) => {
+      emitEventOnChange(
+        emitter,
+        actions,
+        actions.setToolValue,
+        toolType,
+        tool,
+        value
+      )
+    },
+    [emitter, actions]
+  )
+
+  const toggleToolKeysWithEmittedEvents = useCallback(
+    (toolType: SettingsToolType, toolKeys: string[]) => {
+      emitEventOnChange(
+        emitter,
+        actions,
+        actions.toggleToolKeys,
+        toolType,
+        toolKeys
+      )
+    },
+    [emitter, actions]
+  )
+
+  return {
+    setValue: setValueWithEmittedEvent,
+    setDefaultSettings: setDefaultSettingsWithEmittedEvents,
+    resetSettings: resetWithEmittedEvents,
+    setToolValue: setToolValueWithEmittedEvents,
+    toggleToolKeys: toggleToolKeysWithEmittedEvents,
+  }
+}

package/src/stores/settings/useSettingsStore.ts

@@ -1,9 +1,9 @@
 import type { StateCreator } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { WidgetConfig } from '../../types/widget.js'
 import type { SettingsProps, SettingsState } from './types.js'
 import { SettingsToolTypes } from './types.js'
+import { getStateValues } from './utils/getStateValues.js'
 
 export const defaultSlippage = '0.5'
 
@@ -36,16 +36,8 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
         set(() => ({
           [key]: value,
         })),
-      setValues: (values) =>
-        set((state) => {
-          const updatedState: SettingsProps = { ...state }
-          for (const key in values) {
-            if (Object.hasOwn(state, key)) {
-              updatedState[key] = values[key]
-            }
-          }
-          return updatedState
-        }),
+      getSettings: () => getStateValues(get()),
+      getValue: (key) => get()[key],
       initializeTools: (toolType, tools, reset) => {
         if (!tools.length) {
           return
@@ -141,6 +133,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
         }))
         get().initializeTools('Bridges', bridges, true)
         get().initializeTools('Exchanges', exchanges, true)
+        return { ...get() }
       },
     }),
     {
@@ -187,26 +180,3 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
   ) as StateCreator<SettingsState, [], [], SettingsState>,
   Object.is
 )
-
-export const setDefaultSettings = (config?: WidgetConfig) => {
-  const { slippage, routePriority, setValue, gasPrice } =
-    useSettingsStore.getState()
-  const defaultSlippage =
-    (config?.slippage || config?.sdkConfig?.routeOptions?.slippage || 0) * 100
-  const defaultRoutePriority =
-    config?.routePriority || config?.sdkConfig?.routeOptions?.order
-  defaultConfigurableSettings.slippage = (
-    defaultSlippage || defaultConfigurableSettings.slippage
-  )?.toString()
-  defaultConfigurableSettings.routePriority =
-    defaultRoutePriority || defaultConfigurableSettings.routePriority
-  if (!slippage) {
-    setValue('slippage', defaultConfigurableSettings.slippage)
-  }
-  if (!routePriority) {
-    setValue('routePriority', defaultConfigurableSettings.routePriority)
-  }
-  if (!gasPrice) {
-    setValue('gasPrice', defaultConfigurableSettings.gasPrice)
-  }
-}

package/src/stores/settings/utils/getStateValues.ts

@@ -0,0 +1,16 @@
+import type { SettingsProps, SettingsState } from '../types.js'
+
+export const getStateValues = (state: SettingsState): SettingsProps => ({
+  appearance: state.appearance,
+  gasPrice: state.gasPrice,
+  language: state.language,
+  routePriority: state.routePriority,
+  enabledAutoRefuel: state.enabledAutoRefuel,
+  slippage: state.slippage,
+  disabledBridges: [...state.disabledBridges],
+  enabledBridges: [...state.enabledBridges],
+  _enabledBridges: { ...state._enabledBridges },
+  disabledExchanges: [...state.disabledExchanges],
+  enabledExchanges: [...state.enabledExchanges],
+  _enabledExchanges: { ...state._enabledExchanges },
+})

package/src/types/events.ts

@@ -1,4 +1,6 @@
 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'
 
 export enum WidgetEvent {
@@ -22,6 +24,8 @@ export enum WidgetEvent {
   WalletConnected = 'walletConnected',
   WidgetExpanded = 'widgetExpanded',
   PageEntered = 'pageEntered',
+  FormFieldChanged = 'formFieldChanged',
+  SettingUpdated = 'settingUpdated',
 }
 
 export type WidgetEvents = {
@@ -35,13 +39,12 @@ export type WidgetEvents = {
   sourceChainTokenSelected: ChainTokenSelected
   destinationChainTokenSelected: ChainTokenSelected
   sendToWalletToggled: boolean
+  formFieldChanged: FormFieldChanged
   reviewTransactionPageEntered?: Route
-  /**
-   * @deprecated use useWalletManagementEvents hook.
-   */
   walletConnected: WalletConnected
   widgetExpanded: boolean
   pageEntered: NavigationRouteType
+  settingUpdated: SettingUpdated
 }
 
 export interface ContactSupport {
@@ -71,3 +74,21 @@ export interface WalletConnected {
   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/utils/deepEqual.ts

@@ -0,0 +1,62 @@
+/** Forked from https://github.com/epoberezkin/fast-deep-equal */
+
+export function deepEqual(a: any, b: any) {
+  if (a === b) {
+    return true
+  }
+
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    if (a.constructor !== b.constructor) {
+      return false
+    }
+
+    let length: number
+    let i: number
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+      length = a.length
+      if (length !== b.length) {
+        return false
+      }
+      for (i = length; i-- !== 0; ) {
+        if (!deepEqual(a[i], b[i])) {
+          return false
+        }
+      }
+      return true
+    }
+
+    if (a.valueOf !== Object.prototype.valueOf) {
+      return a.valueOf() === b.valueOf()
+    }
+    if (a.toString !== Object.prototype.toString) {
+      return a.toString() === b.toString()
+    }
+
+    const keys = Object.keys(a)
+    length = keys.length
+    if (length !== Object.keys(b).length) {
+      return false
+    }
+
+    for (i = length; i-- !== 0; ) {
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) {
+        return false
+      }
+    }
+
+    for (i = length; i-- !== 0; ) {
+      const key = keys[i]
+
+      if (key && !deepEqual(a[key], b[key])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  // true if both NaN, false otherwise
+  // biome-ignore lint/suspicious/noSelfCompare: <explanation>
+  return a !== a && b !== b
+}

package/src/utils/getPriceImpact.ts

@@ -0,0 +1,26 @@
+import type { Token } from '@lifi/sdk'
+import { formatTokenAmount, formatTokenPrice } from './format.js'
+
+interface GetPriceImpractProps {
+  fromToken: Token
+  toToken: Token
+  fromAmount?: bigint
+  toAmount?: bigint
+}
+
+export const getPriceImpact = ({
+  fromToken,
+  toToken,
+  fromAmount,
+  toAmount,
+}: GetPriceImpractProps) => {
+  const fromTokenAmount = formatTokenAmount(fromAmount, fromToken.decimals)
+  const fromTokenPrice = formatTokenPrice(fromTokenAmount, fromToken.priceUSD)
+
+  const toTokenAmount = formatTokenAmount(toAmount, toToken.decimals)
+  const toTokenPrice = formatTokenPrice(toTokenAmount, toToken.priceUSD) || 0.01
+
+  const priceImpact = toTokenPrice / fromTokenPrice - 1
+
+  return Number(priceImpact)
+}