@lifi/widget 3.7.0 → 3.8.0-beta.1

package/stores/routes/RouteExecutionStore.tsx

@@ -1,46 +0,0 @@
-import { createContext, useContext, useRef } from 'react';
-import type { StoreApi } from 'zustand';
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
-import type { PersistStoreProviderProps } from '../types.js';
-import { createRouteExecutionStore } from './createRouteExecutionStore.js';
-import type { RouteExecutionState } from './types.js';
-
-export type RouteExecutionStore = UseBoundStoreWithEqualityFn<
-  StoreApi<RouteExecutionState>
->;
-
-export const RouteExecutionStoreContext =
-  createContext<RouteExecutionStore | null>(null);
-
-export function RouteExecutionStoreProvider({
-  children,
-  ...props
-}: PersistStoreProviderProps) {
-  const storeRef = useRef<RouteExecutionStore>();
-  if (!storeRef.current) {
-    storeRef.current = createRouteExecutionStore(props);
-  }
-  return (
-    <RouteExecutionStoreContext.Provider value={storeRef.current}>
-      {children}
-    </RouteExecutionStoreContext.Provider>
-  );
-}
-
-export function useRouteExecutionStoreContext() {
-  const useStore = useContext(RouteExecutionStoreContext);
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`,
-    );
-  }
-  return useStore;
-}
-
-export function useRouteExecutionStore<T>(
-  selector: (state: RouteExecutionState) => T,
-  equalityFn?: (left: T, right: T) => boolean,
-): T {
-  const useStore = useRouteExecutionStoreContext();
-  return useStore(selector, equalityFn);
-}

package/stores/routes/createRouteExecutionStore.ts

@@ -1,165 +0,0 @@
-import type { Route, RouteExtended } from '@lifi/sdk';
-import type { StateCreator } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { createWithEqualityFn } from 'zustand/traditional';
-import { hasEnumFlag } from '../../utils/enum.js';
-import type { PersistStoreProps } from '../types.js';
-import type { RouteExecutionState } from './types.js';
-import { RouteExecutionStatus } from './types.js';
-import {
-  isRouteDone,
-  isRouteFailed,
-  isRoutePartiallyDone,
-  isRouteRefunded,
-} from './utils.js';
-
-export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
-  createWithEqualityFn<RouteExecutionState>(
-    persist(
-      (set, get) => ({
-        routes: {},
-        setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {
-          if (!get().routes[route.id]) {
-            set((state: RouteExecutionState) => {
-              const routes = { ...state.routes };
-              // clean previous idle and done routes
-              Object.keys(routes)
-                .filter(
-                  (routeId) =>
-                    (!observableRouteIds?.includes(routeId) &&
-                      hasEnumFlag(
-                        routes[routeId]!.status,
-                        RouteExecutionStatus.Idle,
-                      )) ||
-                    hasEnumFlag(
-                      routes[routeId]!.status,
-                      RouteExecutionStatus.Done,
-                    ),
-                )
-                .forEach((routeId) => delete routes[routeId]);
-              routes[route.id] = {
-                route,
-                status: RouteExecutionStatus.Idle,
-              };
-              return {
-                routes,
-              };
-            });
-          }
-        },
-        updateRoute: (route: RouteExtended) => {
-          if (get().routes[route.id]) {
-            set((state: RouteExecutionState) => {
-              const updatedState = {
-                routes: {
-                  ...state.routes,
-                  [route.id]: { ...state.routes[route.id]!, route },
-                },
-              };
-              const isFailed = isRouteFailed(route);
-              if (isFailed) {
-                updatedState.routes[route.id]!.status =
-                  RouteExecutionStatus.Failed;
-                return updatedState;
-              }
-              const isDone = isRouteDone(route);
-              if (isDone) {
-                updatedState.routes[route.id]!.status =
-                  RouteExecutionStatus.Done;
-                if (isRoutePartiallyDone(route)) {
-                  updatedState.routes[route.id]!.status |=
-                    RouteExecutionStatus.Partial;
-                } else if (isRouteRefunded(route)) {
-                  updatedState.routes[route.id]!.status |=
-                    RouteExecutionStatus.Refunded;
-                }
-                return updatedState;
-              }
-              const isLoading = route.steps.some((step) => step.execution);
-              if (isLoading) {
-                updatedState.routes[route.id]!.status =
-                  RouteExecutionStatus.Pending;
-              }
-              return updatedState;
-            });
-          }
-        },
-        restartRoute: (routeId: string) => {
-          if (get().routes[routeId]) {
-            set((state: RouteExecutionState) => ({
-              routes: {
-                ...state.routes,
-                [routeId]: {
-                  ...state.routes[routeId]!,
-                  status: RouteExecutionStatus.Pending,
-                },
-              },
-            }));
-          }
-        },
-        deleteRoute: (routeId: string) => {
-          if (get().routes[routeId]) {
-            set((state: RouteExecutionState) => {
-              const routes = { ...state.routes };
-              delete routes[routeId];
-              return {
-                routes,
-              };
-            });
-          }
-        },
-        deleteRoutes: (type) =>
-          set((state: RouteExecutionState) => {
-            const routes = { ...state.routes };
-            Object.keys(routes)
-              .filter((routeId) =>
-                type === 'completed'
-                  ? hasEnumFlag(
-                      routes[routeId]?.status ?? 0,
-                      RouteExecutionStatus.Done,
-                    )
-                  : !hasEnumFlag(
-                      routes[routeId]?.status ?? 0,
-                      RouteExecutionStatus.Done,
-                    ),
-              )
-              .forEach((routeId) => delete routes[routeId]);
-            return {
-              routes,
-            };
-          }),
-      }),
-      {
-        name: `${namePrefix || 'li.fi'}-widget-routes`,
-        version: 2,
-        partialize: (state) => ({ routes: state.routes }),
-        merge: (persistedState: any, currentState: RouteExecutionState) => {
-          const state = {
-            ...currentState,
-            ...persistedState,
-          } as RouteExecutionState;
-          try {
-            // Remove failed transactions from history after 1 day
-            const currentTime = new Date().getTime();
-            const oneDay = 1000 * 60 * 60 * 24;
-            Object.values(state.routes).forEach((routeExecution) => {
-              const startedAt =
-                routeExecution?.route.steps
-                  ?.find((step) => step.execution?.status === 'FAILED')
-                  ?.execution?.process.find((process) => process.startedAt)
-                  ?.startedAt ?? 0;
-              const outdated =
-                startedAt > 0 && currentTime - startedAt > oneDay;
-              if (routeExecution?.route && outdated) {
-                delete state.routes[routeExecution.route.id];
-              }
-            });
-          } catch (error) {
-            console.error(error);
-          }
-          return state;
-        },
-      },
-    ) as StateCreator<RouteExecutionState, [], [], RouteExecutionState>,
-    Object.is,
-  );

package/stores/routes/types.ts

@@ -1,24 +0,0 @@
-import type { Route, RouteExtended } from '@lifi/sdk';
-
-export interface RouteExecution {
-  route: RouteExtended;
-  status: RouteExecutionStatus;
-}
-
-export interface RouteExecutionState {
-  routes: Partial<Record<string, RouteExecution>>;
-  setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void;
-  updateRoute: (route: Route) => void;
-  restartRoute: (routeId: string) => void;
-  deleteRoute: (routeId: string) => void;
-  deleteRoutes: (type: 'completed' | 'active') => void;
-}
-
-export enum RouteExecutionStatus {
-  Idle = 1 << 0,
-  Pending = 1 << 1,
-  Done = 1 << 2,
-  Failed = 1 << 3,
-  Partial = 1 << 4,
-  Refunded = 1 << 5,
-}

package/stores/routes/useExecutingRoutesIds.ts

@@ -1,27 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useRouteExecutionStore } from './RouteExecutionStore.js';
-import type { RouteExecution } from './types.js';
-import { RouteExecutionStatus } from './types.js';
-
-export const useExecutingRoutesIds = () => {
-  const { accounts } = useAccount();
-  const accountAddresses = accounts.map((account) => account.address);
-  return useRouteExecutionStore(
-    (state) =>
-      (Object.values(state.routes) as RouteExecution[])
-        .filter(
-          (item) =>
-            accountAddresses.includes(item.route.fromAddress) &&
-            (item.status === RouteExecutionStatus.Pending ||
-              item.status === RouteExecutionStatus.Failed),
-        )
-        .sort(
-          (a, b) =>
-            (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
-            (a?.route.steps[0].execution?.process[0].startedAt ?? 0),
-        )
-        .map(({ route }) => route.id),
-    shallow,
-  );
-};

package/stores/routes/useSetExecutableRoute.ts

@@ -1,5 +0,0 @@
-import { useRouteExecutionStore } from './RouteExecutionStore.js';
-
-export const useSetExecutableRoute = () => {
-  return useRouteExecutionStore((state) => state.setExecutableRoute);
-};

package/stores/routes/utils.ts

@@ -1,61 +0,0 @@
-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/stores/settings/types.ts

@@ -1,69 +0,0 @@
-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 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 SettingsState extends SettingsProps {
-  setValue: ValueSetter<SettingsProps>;
-  setValues: ValuesSetter<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 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/stores/settings/useAppearance.ts

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

package/stores/settings/useSendToWalletStore.ts

@@ -1,25 +0,0 @@
-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/stores/settings/useSettings.ts

@@ -1,19 +0,0 @@
-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/stores/settings/useSettingsStore.ts

@@ -1,212 +0,0 @@
-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';
-
-export const defaultSlippage = '0.5';
-
-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,
-        })),
-      setValues: (values) =>
-        set((state) => {
-          const updatedState: SettingsProps = { ...state };
-          for (const key in values) {
-            if (Object.hasOwn(state, key)) {
-              updatedState[key] = values[key];
-            }
-          }
-          return updatedState;
-        }),
-      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);
-      },
-    }),
-    {
-      name: `li.fi-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,
-);
-
-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);
-  }
-};