@lifi/widget 3.8.0-beta.1 → 3.8.0

package/src/components/TransactionDetails.tsx

@@ -12,7 +12,8 @@ import { formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isRouteDone } from '../stores/routes/utils.js'
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js'
-import { formatTokenAmount, formatTokenPrice } from '../utils/format.js'
+import { formatTokenAmount } from '../utils/format.js'
+import { getPriceImpact } from '../utils/getPriceImpact.js'
 import { Card } from './Card/Card.js'
 import { CardIconButton } from './Card/CardIconButton.js'
 import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js'
@@ -37,22 +38,12 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =
     getAccumulatedFeeCostsBreakdown(route)
 
-  const fromTokenAmount = formatTokenAmount(
-    BigInt(route.fromAmount),
-    route.fromToken.decimals
-  )
-  const fromTokenPrice = formatTokenPrice(
-    fromTokenAmount,
-    route.fromToken.priceUSD
-  )
-  const toTokenAmount = formatTokenAmount(
-    BigInt(route.toAmount),
-    route.toToken.decimals
-  )
-  const toTokenPrice =
-    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01
-
-  const priceImpact = toTokenPrice / fromTokenPrice - 1
+  const priceImpact = getPriceImpact({
+    fromAmount: BigInt(route.fromAmount),
+    toAmount: BigInt(route.toAmount),
+    fromToken: route.fromToken,
+    toToken: route.toToken,
+  })
 
   const feeCollectionStep = route.steps[0].includedSteps.find(
     (includedStep) => includedStep.tool === 'feeCollection'

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.8.0-beta.1'
+export const version = '3.8.0'

package/src/hooks/useLanguages.ts

@@ -1,13 +1,13 @@
 import { useTranslation } from 'react-i18next'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettings } from '../stores/settings/useSettings.js'
-import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 
 export const useLanguages = () => {
   const { t, i18n } = useTranslation()
   const { languages } = useWidgetConfig()
   const { language } = useSettings(['language'])
-  const setValue = useSettingsStore((state) => state.setValue)
+  const { setValue } = useSettingsActions()
 
   const sortedLanguages = Object.keys(i18n.store.data).sort()
 

package/src/hooks/useSettingMonitor.ts

@@ -1,8 +1,8 @@
 import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import {
   defaultConfigurableSettings,
-  setDefaultSettings,
   useSettingsStore,
 } from '../stores/settings/useSettingsStore.js'
 import { useTools } from './useTools.js'
@@ -25,8 +25,8 @@ export const useSettingMonitor = () => {
     shallow
   )
   const { tools } = useTools()
-  const resetSettings = useSettingsStore((state) => state.reset)
   const config = useWidgetConfig()
+  const { setDefaultSettings, resetSettings } = useSettingsActions()
 
   const isSlippageChanged = config.slippage
     ? Number(slippage) !== config.slippage * 100

package/src/index.ts

@@ -23,3 +23,4 @@ export { windows95Theme } from './themes/windows95.js'
 export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'
+export { getPriceImpact } from './utils/getPriceImpact.js'

package/src/pages/SelectEnabledToolsPage.tsx

@@ -27,6 +27,7 @@ import { useDefaultElementId } from '../hooks/useDefaultElementId.js'
 import { useHeader } from '../hooks/useHeader.js'
 import { useScrollableContainer } from '../hooks/useScrollableContainer.js'
 import { useTools } from '../hooks/useTools.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
 
 interface SelectAllCheckboxProps {
@@ -76,16 +77,11 @@ export const SelectEnabledToolsPage: React.FC<{
 }> = ({ type }) => {
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
   const { tools } = useTools()
-  const [enabledTools, disabledTools, setToolValue, toggleToolKeys] =
-    useSettingsStore(
-      (state) => [
-        state[`_enabled${type}`],
-        state[`disabled${type}`],
-        state.setToolValue,
-        state.toggleToolKeys,
-      ],
-      shallow
-    )
+  const { setToolValue, toggleToolKeys } = useSettingsActions()
+  const [enabledTools, disabledTools] = useSettingsStore(
+    (state) => [state[`_enabled${type}`], state[`disabled${type}`]],
+    shallow
+  )
 
   const { t } = useTranslation()
   const elementId = useDefaultElementId()

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/WalletProvider/SDKProviders.tsx

@@ -1,9 +1,7 @@
+import { getConnectorClient as getBigmiConnectorClient } from '@bigmi/client'
+import { useConfig as useBigmiConfig } from '@bigmi/react'
 import type { SDKProvider } from '@lifi/sdk'
 import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk'
-import {
-  getConnectorClient as getBigmiConnectorClient,
-  useConfig as useBigmiConfig,
-} from '@lifi/wallet-management'
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useEffect } from 'react'

package/src/providers/WalletProvider/UTXOBaseProvider.tsx

@@ -1,9 +1,6 @@
+import { BigmiProvider, useReconnect } from '@bigmi/react'
 import type { DefaultWagmiConfigResult } from '@lifi/wallet-management'
-import {
-  BigmiProvider,
-  createDefaultBigmiConfig,
-  useReconnect,
-} from '@lifi/wallet-management'
+import { createDefaultBigmiConfig } from '@lifi/wallet-management'
 import { type FC, type PropsWithChildren, useRef } from 'react'
 
 export const UTXOBaseProvider: FC<PropsWithChildren> = ({ children }) => {

package/src/providers/WalletProvider/UTXOProvider.tsx

@@ -1,5 +1,5 @@
+import { BigmiContext } from '@bigmi/react'
 import { ChainType } from '@lifi/sdk'
-import { BigmiContext } from '@lifi/wallet-management'
 import { type FC, type PropsWithChildren, useContext } from 'react'
 import { isItemAllowed } from '../../utils/item.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'

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)
-  }
-}