@lifi/widget 0.0.0-preview-6cc63bac

package/src/stores/settings/types.ts

@@ -0,0 +1,66 @@
+import type { Order } from '@lifi/sdk'
+import type { PropsWithChildren } from 'react'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import type { LanguageResource } from '../../providers/I18nProvider/types.js'
+import type { SplitMode, WidgetConfig } from '../../types/widget.js'
+
+export type ValueSetter<S> = <K extends keyof S>(
+  key: K,
+  value: S[Extract<K, string>]
+) => void
+
+type ValueGetter<S> = <K extends keyof S>(key: K) => S[K]
+
+export const SettingsToolTypes = ['Bridges', 'Exchanges'] as const
+export type SettingsToolType = (typeof SettingsToolTypes)[number]
+
+export interface SettingsProps {
+  gasPrice?: string
+  language?: string
+  languageCache?: LanguageResource
+  lastDefaultLanguage?: string
+  routePriority?: Order
+  enabledAutoRefuel: boolean
+  slippage?: string
+  disabledBridges: string[]
+  enabledBridges: string[]
+  _enabledBridges: Record<string, boolean>
+  disabledExchanges: string[]
+  enabledExchanges: string[]
+  _enabledExchanges: Record<string, boolean>
+  smallBalanceThreshold?: string
+}
+
+export interface SettingsActions {
+  setValue: ValueSetter<SettingsProps>
+  setValues: (values: Partial<SettingsProps>) => void
+  getValue: ValueGetter<SettingsProps>
+  getSettings: () => SettingsProps
+  initializeTools(
+    toolType: SettingsToolType,
+    tools: string[],
+    reset?: boolean
+  ): void
+  setToolValue(toolType: SettingsToolType, tool: string, value: boolean): void
+  toggleToolKeys(toolType: SettingsToolType, toolKeys: string[]): void
+  reset(bridges: string[], exchanges: string[]): void
+}
+
+export type SettingsState = SettingsProps & SettingsActions
+
+export interface SplitModeState {
+  state?: SplitMode
+  setState(state: SplitMode): void
+}
+
+export type SplitModeStore = UseBoundStore<StoreApi<SplitModeState>>
+
+export interface SplitModeProps {
+  state?: SplitMode
+}
+
+export type SplitModeProviderProps = PropsWithChildren<SplitModeProps>
+
+export interface SettingsStoreProviderProps {
+  config: WidgetConfig
+}

package/src/stores/settings/useSettings.ts

@@ -0,0 +1,16 @@
+import { useSettingsStore } from './SettingsStore.js'
+import type { SettingsState } from './types.js'
+
+export const useSettings = <K extends keyof SettingsState>(
+  keys: Array<K>
+): Pick<SettingsState, (typeof keys)[number]> => {
+  return useSettingsStore((state) =>
+    keys.reduce(
+      (values, key) => {
+        values[key] = state[key]
+        return values
+      },
+      {} as Pick<SettingsState, (typeof keys)[number]>
+    )
+  )
+}

package/src/stores/settings/useSettingsActions.ts

@@ -0,0 +1,165 @@
+import { useCallback } from 'react'
+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 { defaultConfigurableSettings } from './createSettingsStore.js'
+import { useSettingsStore } from './SettingsStore.js'
+import type {
+  SettingsActions,
+  SettingsProps,
+  SettingsToolType,
+  ValueSetter,
+} from './types.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 = (): {
+  setValue: ValueSetter<SettingsProps>
+  setValues: (values: Partial<SettingsProps>) => void
+  setDefaultSettings: (config?: WidgetConfig) => void
+  resetSettings: (bridges: string[], exchanges: string[]) => void
+  setToolValue: (
+    toolType: SettingsToolType,
+    tool: string,
+    value: boolean
+  ) => void
+  toggleToolKeys: (toolType: SettingsToolType, toolKeys: string[]) => void
+} => {
+  const emitter = useWidgetEvents()
+  const actions = useSettingsStore((state) => ({
+    setValue: state.setValue,
+    setValues: state.setValues,
+    getValue: state.getValue,
+    getSettings: state.getSettings,
+    reset: state.reset,
+    setToolValue: state.setToolValue,
+    toggleToolKeys: state.toggleToolKeys,
+  }))
+
+  const setValueWithEmittedEvent = useCallback<ValueSetter<SettingsProps>>(
+    (value, newValue) => {
+      const setting = value as keyof SettingsProps
+      emitEventOnChange(emitter, actions, actions.setValue, setting, newValue)
+    },
+    [emitter, actions]
+  )
+
+  const setValuesWithEmittedEvent = useCallback(
+    (values: Partial<SettingsProps>) => {
+      Object.entries(values).forEach(([key, value]) => {
+        setValueWithEmittedEvent(key as keyof SettingsProps, value)
+      })
+    },
+    [setValueWithEmittedEvent]
+  )
+
+  const setDefaultSettingsWithEmittedEvents = useCallback(
+    (config?: WidgetConfig) => {
+      const slippage = actions.getValue('slippage')
+      const routePriority = actions.getValue('routePriority')
+      const gasPrice = actions.getValue('gasPrice')
+
+      const defaultSlippage = (config?.slippage || 0) * 100
+      const defaultRoutePriority = config?.routePriority
+
+      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,
+    setValues: setValuesWithEmittedEvent,
+    setDefaultSettings: setDefaultSettingsWithEmittedEvents,
+    resetSettings: resetWithEmittedEvents,
+    setToolValue: setToolValueWithEmittedEvents,
+    toggleToolKeys: toggleToolKeysWithEmittedEvents,
+  }
+}

package/src/stores/settings/useSplitModeStore.tsx

@@ -0,0 +1,58 @@
+import { createContext, type JSX, useContext, useRef } from 'react'
+import { create } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import type {
+  SplitModeProps,
+  SplitModeProviderProps,
+  SplitModeState,
+  SplitModeStore,
+} from './types.js'
+
+const SplitModeStoreContext = createContext<SplitModeStore | null>(null)
+
+const shouldRecreateStore = (store: SplitModeStore, props: SplitModeProps) => {
+  const { state } = store.getState()
+  return state !== props.state
+}
+
+export function SplitModeStoreProvider({
+  children,
+  ...props
+}: SplitModeProviderProps): JSX.Element {
+  const storeRef = useRef<SplitModeStore>(null)
+  if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+    storeRef.current = createSplitModeStore(props)
+  }
+  return (
+    <SplitModeStoreContext.Provider value={storeRef.current}>
+      {children}
+    </SplitModeStoreContext.Provider>
+  )
+}
+
+function useSplitModeStoreContext() {
+  const useStore = useContext(SplitModeStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${SplitModeStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useSplitModeStore<T>(
+  selector: (state: SplitModeState) => T
+): T {
+  const useStore = useSplitModeStoreContext()
+  return useStore(useShallow(selector))
+}
+
+const createSplitModeStore = ({ state }: SplitModeProps) =>
+  create<SplitModeState>((set) => ({
+    state,
+    setState(state) {
+      set(() => ({
+        state,
+      }))
+    },
+  }))

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

@@ -0,0 +1,17 @@
+import type { SettingsProps, SettingsState } from '../types.js'
+
+export const getStateValues = (state: SettingsState): SettingsProps => ({
+  gasPrice: state.gasPrice,
+  language: state.language,
+  languageCache: state.languageCache,
+  lastDefaultLanguage: state.lastDefaultLanguage,
+  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/stores/types.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+export interface PersistStoreProps {
+  namePrefix?: string
+}
+
+export type PersistStoreProviderProps = PropsWithChildren<PersistStoreProps>

package/src/themes/azureLight.ts

@@ -0,0 +1,61 @@
+import { tabsClasses } from '@mui/material'
+import type { WidgetTheme } from '../types/widget.js'
+
+export const azureLightTheme: WidgetTheme = {
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#006Eff',
+        },
+        secondary: {
+          main: '#FFC800',
+        },
+        background: {
+          default: '#ffffff',
+          paper: '#f8f8fa',
+        },
+        text: {
+          primary: '#00070F',
+          secondary: '#6A7481',
+        },
+        grey: {
+          200: '#EEEFF2',
+          300: '#D5DAE1',
+          700: '#555B62',
+          800: '#373F48',
+        },
+        playground: {
+          main: '#f3f5f8',
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 12,
+    borderRadiusSecondary: 12,
+    borderRadiusTertiary: 24,
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+  },
+  container: {
+    filter: 'drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.08))',
+    borderRadius: '16px',
+  },
+  components: {
+    MuiCard: {
+      defaultProps: { variant: 'filled' },
+    },
+    // Used only for 'split' mode and can be safely removed if not used
+    MuiNavigationTabs: {
+      styleOverrides: {
+        root: {
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#f8f8fa',
+          },
+        },
+      },
+    },
+  },
+}