@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/stores/header/useHeaderStore.tsx

@@ -0,0 +1,70 @@
+import { createContext, useContext, useRef } from 'react';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { PersistStoreProps, PersistStoreProviderProps } from '../types';
+import type { HeaderState, HeaderStore } from './types';
+
+export const HeaderStoreContext = createContext<HeaderStore | null>(null);
+
+export function HeaderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const storeRef = useRef<HeaderStore>();
+  if (!storeRef.current) {
+    storeRef.current = createHeaderStore(props);
+  }
+  return (
+    <HeaderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </HeaderStoreContext.Provider>
+  );
+}
+
+export function useHeaderStore<T>(selector: (state: HeaderState) => T): T {
+  const useStore = useContext(HeaderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${HeaderStoreProvider.name}>.`,
+    );
+  }
+  return useStore(selector);
+}
+
+export function useHeaderStoreContext() {
+  const useStore = useContext(HeaderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${HeaderStoreProvider.name}>.`,
+    );
+  }
+  return useStore;
+}
+
+export const createHeaderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<HeaderState>(
+    (set, get) => ({
+      setAction: (element) => {
+        set(() => ({
+          element,
+        }));
+        return get().removeAction;
+      },
+      setTitle: (title) => {
+        set(() => ({
+          title,
+        }));
+        return get().removeTitle;
+      },
+      removeAction: () => {
+        set(() => ({
+          element: null,
+        }));
+      },
+      removeTitle: () => {
+        set(() => ({
+          title: undefined,
+        }));
+      },
+    }),
+    Object.is,
+  );

package/src/stores/routes/RouteExecutionStore.tsx

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

package/src/stores/routes/createRouteExecutionStore.ts

@@ -0,0 +1,165 @@
+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';
+import type { PersistStoreProps } from '../types';
+import type { RouteExecutionState } from './types';
+import { RouteExecutionStatus } from './types';
+import {
+  isRouteDone,
+  isRouteFailed,
+  isRoutePartiallyDone,
+  isRouteRefunded,
+} from './utils';
+
+export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<RouteExecutionState>(
+    persist(
+      (set, get) => ({
+        routes: {},
+        setExecutableRoute: (route: Route, insurableRouteId?: string) => {
+          if (!get().routes[route.id]) {
+            set((state: RouteExecutionState) => {
+              const routes = { ...state.routes };
+              // clean previous idle and done routes
+              Object.keys(routes)
+                .filter(
+                  (routeId) =>
+                    (routeId !== insurableRouteId &&
+                      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: 1,
+        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/src/stores/routes/index.ts

@@ -0,0 +1,5 @@
+export * from './RouteExecutionStore';
+export * from './types';
+export * from './useExecutingRoutesIds';
+export * from './useSetExecutableRoute';
+export * from './utils';

package/src/stores/routes/types.ts

@@ -0,0 +1,24 @@
+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, insurableRouteId?: string) => void;
+  updateRoute: (route: Route) => void;
+  restartRoute: (routeId: string) => void;
+  deleteRoute: (routeId: string) => void;
+  deleteRoutes: (type: 'completed' | 'active') => void;
+}
+
+export enum RouteExecutionStatus {
+  Idle = 0,
+  Pending = 1 << 0,
+  Done = 1 << 1,
+  Failed = 1 << 2,
+  Partial = 1 << 3,
+  Refunded = 1 << 4,
+}

package/src/stores/routes/useExecutingRoutesIds.ts

@@ -0,0 +1,24 @@
+import { shallow } from 'zustand/shallow';
+import { useRouteExecutionStore } from './RouteExecutionStore';
+import type { RouteExecution } from './types';
+import { RouteExecutionStatus } from './types';
+
+export const useExecutingRoutesIds = (address?: string) => {
+  return useRouteExecutionStore(
+    (state) =>
+      (Object.values(state.routes) as RouteExecution[])
+        .filter(
+          (item) =>
+            item.route.fromAddress === address &&
+            (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/src/stores/routes/useSetExecutableRoute.ts

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

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;
+  }
+  // e.g. ['steps', 0, 'execution', 'process', 0]
+  const process = processDiff.path
+    .slice(0, processDiff.path.findIndex((path) => path === 'process') + 2)
+    .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,75 @@
+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, WidgetConfig } from '../../types';
+
+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 type SettingsToolType = 'Bridges' | 'Exchanges';
+export const SettingsToolTypes: SettingsToolType[] = ['Bridges', 'Exchanges'];
+
+export interface SettingsProps {
+  appearance: Appearance;
+  gasPrice?: string;
+  language?: string;
+  routePriority?: Order;
+  enabledAutoRefuel: boolean;
+  showDestinationWallet: boolean;
+  slippage?: string;
+  enabledBridges: string[];
+  _enabledBridges?: Record<string, boolean>;
+  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;
+  setTools(
+    toolType: SettingsToolType,
+    tools: string[],
+    availableTools: string[],
+  ): void;
+  reset(config: WidgetConfig, bridges: string[], exchanges: string[]): void;
+}
+
+export interface SendToWalletState {
+  showSendToWallet: boolean;
+  showSendToWalletDirty: boolean;
+}
+
+export interface SendToWalletStore extends SendToWalletState {
+  toggleSendToWallet(): void;
+  setSendToWallet(value: boolean): void;
+}
+
+export type SplitSubvariantOptions = 'bridge' | 'swap';
+
+export interface SplitSubvariantState {
+  state?: SplitSubvariantOptions;
+  setState(state: SplitSubvariantOptions): void;
+}
+
+export type SplitSubvariantStore = UseBoundStoreWithEqualityFn<
+  StoreApi<SplitSubvariantState>
+>;
+
+export interface SplitSubvariantProps {
+  state?: SplitSubvariantOptions;
+}
+
+export type SplitSubvariantProviderProps =
+  PropsWithChildren<SplitSubvariantProps>;

package/src/stores/settings/useAppearance.ts

@@ -0,0 +1,17 @@
+import { shallow } from 'zustand/shallow';
+import type { Appearance } from '../../types';
+import { useSettingsStore } from './useSettingsStore';
+
+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/src/stores/settings/useSendToWalletStore.ts

@@ -0,0 +1,20 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { SendToWalletStore } from './types';
+
+export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
+  (set) => ({
+    showSendToWallet: false,
+    showSendToWalletDirty: false,
+    toggleSendToWallet: () =>
+      set((state) => ({
+        showSendToWallet: !state.showSendToWallet,
+        showSendToWalletDirty: true,
+      })),
+    setSendToWallet: (value) =>
+      set({
+        showSendToWallet: value,
+        showSendToWalletDirty: true,
+      }),
+  }),
+  Object.is,
+);

package/src/stores/settings/useSettings.ts

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