@openocean.finance/widget 1.0.0

package/src/stores/routes/utils.ts

@@ -0,0 +1,61 @@
+import type { Process, RouteExtended } from '@lifi/sdk'
+import microdiff from 'microdiff'
+
+export const isRouteDone = (route: RouteExtended) => {
+  return route.steps.every((step) => step.execution?.status === 'DONE')
+}
+
+export const isRoutePartiallyDone = (route: RouteExtended) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'PARTIAL')
+  )
+}
+
+export const isRouteRefunded = (route: RouteExtended) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'REFUNDED')
+  )
+}
+
+export const isRouteFailed = (route: RouteExtended) => {
+  return route.steps.some((step) => step.execution?.status === 'FAILED')
+}
+
+export const isRouteActive = (route?: RouteExtended) => {
+  if (!route) {
+    return false
+  }
+  const isDone = isRouteDone(route)
+  const isFailed = isRouteFailed(route)
+  const alreadyStarted = route.steps.some((step) => step.execution)
+  return !isDone && !isFailed && alreadyStarted
+}
+
+export const getUpdatedProcess = (
+  currentRoute: RouteExtended,
+  updatedRoute: RouteExtended
+): Process | undefined => {
+  const processDiff = microdiff(currentRoute, updatedRoute).find((diff) =>
+    diff.path.includes('process')
+  )
+  if (!processDiff) {
+    return undefined
+  }
+  // Find process index in the diff array so we can slice the complete rpocess object
+  // e.g. ['steps', 0, 'execution', 'process', 0, 'message']
+  const processDiffIndex =
+    processDiff.path.findIndex((path) => path === 'process') + 2
+  const processPathSlice = processDiff.path.slice(0, processDiffIndex)
+  // Reduce updated route using the diff path to get updated process
+  const process = processPathSlice.reduce(
+    (obj, path) => obj[path],
+    updatedRoute as any
+  ) as Process
+  return process
+}
+
+export const getSourceTxHash = (route?: RouteExtended) => {
+  return route?.steps[0].execution?.process
+    .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+    .find((process) => process.txHash)?.txHash
+}

package/src/stores/settings/types.ts

@@ -0,0 +1,74 @@
+import type { Order } from '@lifi/sdk'
+import type { PropsWithChildren } from 'react'
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { Appearance, SplitSubvariant } from '../../types/widget.js'
+
+export type ValueSetter<S> = <K extends keyof S>(
+  key: K,
+  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
+
+export const SettingsToolTypes = ['Bridges', 'Exchanges'] as const
+export type SettingsToolType = (typeof SettingsToolTypes)[number]
+
+export interface SettingsProps {
+  appearance: Appearance
+  gasPrice?: string
+  language?: string
+  routePriority?: Order
+  enabledAutoRefuel: boolean
+  slippage?: string
+  disabledBridges: string[]
+  enabledBridges: string[]
+  _enabledBridges: Record<string, boolean>
+  disabledExchanges: string[]
+  enabledExchanges: string[]
+  _enabledExchanges: Record<string, boolean>
+}
+
+export interface SettingsActions {
+  setValue: ValueSetter<SettingsProps>
+  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 SendToWalletState {
+  showSendToWallet: boolean
+}
+
+export interface SendToWalletStore extends SendToWalletState {
+  setSendToWallet(value: boolean): void
+}
+
+export interface SplitSubvariantState {
+  state?: SplitSubvariant
+  setState(state: SplitSubvariant): void
+}
+
+export type SplitSubvariantStore = UseBoundStoreWithEqualityFn<
+  StoreApi<SplitSubvariantState>
+>
+
+export interface SplitSubvariantProps {
+  state?: SplitSubvariant
+}
+
+export type SplitSubvariantProviderProps =
+  PropsWithChildren<SplitSubvariantProps>

package/src/stores/settings/useAppearance.ts

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

package/src/stores/settings/useSendToWalletStore.ts

@@ -0,0 +1,25 @@
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { SendToWalletStore } from './types.js'
+
+export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
+  (set) => ({
+    showSendToWallet: false,
+    setSendToWallet: (value) =>
+      set({
+        showSendToWallet: value,
+      }),
+  }),
+  Object.is
+)
+
+export const useSendToWalletActions = () => {
+  const actions = useSendToWalletStore(
+    (store) => ({
+      setSendToWallet: store.setSendToWallet,
+    }),
+    shallow
+  )
+
+  return actions
+}

package/src/stores/settings/useSettings.ts

@@ -0,0 +1,19 @@
+import { shallow } from 'zustand/shallow'
+import type { SettingsState } from './types.js'
+import { useSettingsStore } from './useSettingsStore.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]>
+      ),
+    shallow
+  )
+}

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

@@ -0,0 +1,182 @@
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { SettingsProps, SettingsState } from './types.js'
+import { SettingsToolTypes } from './types.js'
+import { getStateValues } from './utils/getStateValues.js'
+
+export const defaultSlippage = '1'
+
+export const defaultConfigurableSettings: Pick<
+  SettingsState,
+  'routePriority' | 'slippage' | 'gasPrice'
+> = {
+  routePriority: 'CHEAPEST',
+  slippage: defaultSlippage,
+  gasPrice: 'normal',
+}
+
+export const defaultSettings: SettingsProps = {
+  appearance: 'auto',
+  gasPrice: 'normal',
+  enabledAutoRefuel: true,
+  disabledBridges: [],
+  disabledExchanges: [],
+  enabledBridges: [],
+  enabledExchanges: [],
+  _enabledBridges: {},
+  _enabledExchanges: {},
+}
+
+export const useSettingsStore = createWithEqualityFn<SettingsState>(
+  persist(
+    (set, get) => ({
+      ...defaultSettings,
+      setValue: (key, value) =>
+        set(() => ({
+          [key]: value,
+        })),
+      getSettings: () => getStateValues(get()),
+      getValue: (key) => get()[key],
+      initializeTools: (toolType, tools, reset) => {
+        if (!tools.length) {
+          return
+        }
+        set((state) => {
+          const updatedState = { ...state }
+          if (!reset) {
+            // Add new tools
+            tools.forEach((tool) => {
+              if (!Object.hasOwn(updatedState[`_enabled${toolType}`], tool)) {
+                updatedState[`_enabled${toolType}`][tool] = true
+              }
+            })
+            // Filter tools we no longer have
+            updatedState[`_enabled${toolType}`] = Object.fromEntries(
+              Object.entries(updatedState[`_enabled${toolType}`]).filter(
+                ([key]) => tools.includes(key)
+              )
+            )
+          } else {
+            tools.forEach((tool) => {
+              updatedState[`_enabled${toolType}`][tool] = true
+            })
+          }
+          const enabledToolKeys = Object.keys(
+            updatedState[`_enabled${toolType}`]
+          )
+          updatedState[`enabled${toolType}`] = enabledToolKeys.filter(
+            (key) => updatedState[`_enabled${toolType}`][key]
+          )
+          updatedState[`disabled${toolType}`] = enabledToolKeys.filter(
+            (key) => !updatedState[`_enabled${toolType}`][key]
+          )
+          return updatedState
+        })
+      },
+      setToolValue: (toolType, tool, value) =>
+        set((state) => {
+          const enabledTools = {
+            ...state[`_enabled${toolType}`],
+            [tool]: value,
+          }
+          const enabledToolKeys = Object.keys(enabledTools)
+          return {
+            [`_enabled${toolType}`]: enabledTools,
+            [`enabled${toolType}`]: enabledToolKeys.filter(
+              (key) => enabledTools[key]
+            ),
+            [`disabled${toolType}`]: enabledToolKeys.filter(
+              (key) => !enabledTools[key]
+            ),
+          }
+        }),
+      toggleToolKeys: (toolType, toolKeys) =>
+        set((state) => {
+          const allKeysInCollectionEnabled = toolKeys.every(
+            (toolKey) => state[`_enabled${toolType}`][toolKey]
+          )
+
+          // then toggle those keys to false
+          const updatedTools = toolKeys.reduce(
+            (accum, toolKey) => {
+              accum[toolKey] = !allKeysInCollectionEnabled
+              return accum
+            },
+            {
+              ...state[`_enabled${toolType}`],
+            }
+          )
+
+          const enableKeys: string[] = []
+          const disabledKeys: string[] = []
+
+          Object.entries(updatedTools).forEach(([key, value]) => {
+            if (value) {
+              enableKeys.push(key)
+            } else {
+              disabledKeys.push(key)
+            }
+          })
+
+          return {
+            [`_enabled${toolType}`]: updatedTools,
+            [`enabled${toolType}`]: enableKeys,
+            [`disabled${toolType}`]: disabledKeys,
+          }
+        }),
+      reset: (bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = defaultSettings
+        set(() => ({
+          ...restDefaultSettings,
+          ...defaultConfigurableSettings,
+        }))
+        get().initializeTools('Bridges', bridges, true)
+        get().initializeTools('Exchanges', exchanges, true)
+        return { ...get() }
+      },
+    }),
+    {
+      name: 'openocean-widget-settings',
+      version: 4,
+      partialize: (state) => {
+        const {
+          disabledBridges,
+          disabledExchanges,
+          enabledBridges,
+          enabledExchanges,
+          ...partializedState
+        } = state
+        return partializedState
+      },
+      merge: (persistedState: any, currentState: SettingsState) => {
+        const state = { ...currentState, ...persistedState }
+        SettingsToolTypes.forEach((toolType) => {
+          const enabledToolKeys = Object.keys(
+            persistedState[`_enabled${toolType}`]
+          )
+          state[`enabled${toolType}`] = enabledToolKeys.filter(
+            (key) => persistedState[`_enabled${toolType}`][key]
+          )
+          state[`disabled${toolType}`] = enabledToolKeys.filter(
+            (key) => !persistedState[`_enabled${toolType}`][key]
+          )
+        })
+        return state
+      },
+      migrate: (persistedState: any, version) => {
+        if (version === 0 && persistedState.appearance === 'system') {
+          persistedState.appearance = defaultSettings.appearance
+        }
+        if (version === 1) {
+          persistedState.slippage = defaultConfigurableSettings.slippage
+        }
+        if (version <= 3) {
+          persistedState.routePriority = 'CHEAPEST'
+        }
+        return persistedState as SettingsState
+      },
+    }
+  ) as StateCreator<SettingsState, [], [], SettingsState>,
+  Object.is
+)

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, useRef } from 'react'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type {
+  SplitSubvariantProps,
+  SplitSubvariantProviderProps,
+  SplitSubvariantState,
+  SplitSubvariantStore,
+} from './types.js'
+
+export const SplitSubvariantStoreContext =
+  createContext<SplitSubvariantStore | null>(null)
+
+const shouldRecreateStore = (
+  store: SplitSubvariantStore,
+  props: SplitSubvariantProps
+) => {
+  const { state } = store.getState()
+  return state !== props.state
+}
+
+export function SplitSubvariantStoreProvider({
+  children,
+  ...props
+}: SplitSubvariantProviderProps) {
+  const storeRef = useRef<SplitSubvariantStore>(null)
+  if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+    storeRef.current = createSplitSubvariantStore(props)
+  }
+  return (
+    <SplitSubvariantStoreContext.Provider value={storeRef.current}>
+      {children}
+    </SplitSubvariantStoreContext.Provider>
+  )
+}
+
+export function useSplitSubvariantStoreContext() {
+  const useStore = useContext(SplitSubvariantStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useSplitSubvariantStore<T>(
+  selector: (state: SplitSubvariantState) => T
+): T {
+  const useStore = useSplitSubvariantStoreContext()
+  return useStore(selector)
+}
+
+export const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>
+  createWithEqualityFn<SplitSubvariantState>(
+    (set) => ({
+      state,
+      setState(state) {
+        set(() => ({
+          state,
+        }))
+      },
+    }),
+    Object.is
+  )

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/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,58 @@
+import { tabsClasses } from '@mui/material'
+import type { WidgetTheme } from '../types/widget.js'
+
+export const azureLightTheme: WidgetTheme = {
+  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',
+    },
+  },
+  shape: {
+    borderRadius: 12,
+    borderRadiusSecondary: 12,
+    borderRadiusTertiary: 24,
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+  },
+  container: {
+    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+    borderRadius: '16px',
+  },
+  playground: {
+    background: '#f3f5f8',
+  },
+  components: {
+    MuiCard: {
+      defaultProps: { variant: 'filled' },
+    },
+    // Used only for 'split' subvariant and can be safely removed if not used
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#f8f8fa',
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#ffffff',
+          },
+        },
+      },
+    },
+  },
+}