@lifi/widget 3.0.0-alpha.6 → 3.0.0-alpha.8

package/providers/WidgetProvider/types.ts

@@ -0,0 +1,11 @@
+import type { WidgetConfig } from '../../types';
+
+export type WidgetContextProps = WidgetConfig & {
+  fromChain?: number;
+  toChain?: number;
+  elementId: string;
+};
+
+export interface WidgetProviderProps {
+  config?: WidgetConfig;
+}

package/providers/WidgetProvider/utils.ts

@@ -0,0 +1,12 @@
+export const isItemAllowed = <T>(
+  itemId: T,
+  items?: {
+    allow?: T[];
+    deny?: T[];
+  },
+) => {
+  if (items?.allow?.length) {
+    return items.allow.includes(itemId);
+  }
+  return !items?.deny?.includes(itemId);
+};

package/providers/index.ts

@@ -0,0 +1,5 @@
+export * from './FormProvider';
+export * from './I18nProvider';
+export * from './ThemeProvider';
+export * from './WalletProvider';
+export * from './WidgetProvider';

package/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/stores/StoreProvider.tsx

@@ -0,0 +1,29 @@
+import type { PropsWithChildren } from 'react';
+import type { WidgetConfigProps } from '../types';
+import { ChainOrderStoreProvider } from './chains';
+import { HeaderStoreProvider } from './header';
+import { RouteExecutionStoreProvider } from './routes';
+import { SplitSubvariantStoreProvider } from './settings';
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+}) => {
+  return (
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+          <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+            {children}
+          </RouteExecutionStoreProvider>
+        </ChainOrderStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
+  );
+};

package/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,79 @@
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { useChains } from '../../hooks';
+import { FormKey } from '../../providers';
+import type { PersistStoreProviderProps } from '../types';
+import { createChainOrderStore } from './createChainOrderStore';
+import type { ChainOrderState } from './types';
+
+export type ChainOrderStore = UseBoundStoreWithEqualityFn<
+  StoreApi<ChainOrderState>
+>;
+
+export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
+  null,
+);
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const storeRef = useRef<ChainOrderStore>();
+  const { chains: filteredChains } = useChains();
+  const { setValue, getValues } = useFormContext();
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props);
+  }
+
+  useEffect(() => {
+    if (filteredChains) {
+      const chainOrder = storeRef.current
+        ?.getState()
+        .initializeChains(filteredChains.map((chain) => chain.id));
+      if (chainOrder) {
+        const [fromChainValue, toChainValue] = getValues([
+          FormKey.FromChain,
+          FormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+          setValue(FormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+          setValue(FormKey.ToChain, chainOrder[0]);
+        }
+      }
+    }
+  }, [filteredChains, getValues, setValue]);
+
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  );
+}
+
+export function useChainOrderStore<T>(
+  selector: (state: ChainOrderState) => T,
+  equalityFn?: (left: T, right: T) => boolean,
+): T {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore(selector, equalityFn);
+}
+
+export function useChainOrderStoreContext() {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore;
+}

package/stores/chains/createChainOrderStore.ts

@@ -0,0 +1,67 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { PersistStoreProps } from '../types';
+import type { ChainOrderState } from './types';
+
+export const maxChainToOrder = 9;
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: [],
+        availableChains: [],
+        initializeChains: (chainIds: number[]) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.filter((chainId) =>
+              chainIds.includes(chainId),
+            );
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId),
+            );
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: chainIds,
+                chainOrder,
+              };
+            }
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index]);
+            }
+            return {
+              availableChains: chainIds,
+              chainOrder,
+            };
+          });
+          return get().chainOrder;
+        },
+        setChain: (chainId: number) => {
+          const state = get();
+          if (
+            state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)
+          ) {
+            return;
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+              chainOrder.pop();
+            }
+            return {
+              chainOrder,
+            };
+          });
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+        version: 0,
+        partialize: (state) => ({ chainOrder: state.chainOrder }),
+      },
+    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
+    Object.is,
+  );

package/stores/chains/index.ts

@@ -0,0 +1,4 @@
+export * from './ChainOrderStore';
+export * from './createChainOrderStore';
+export * from './types';
+export * from './useChainOrder';

package/stores/chains/types.ts

@@ -0,0 +1,9 @@
+export interface ChainOrderProps {
+  chainOrder: number[];
+  availableChains: number[];
+}
+
+export interface ChainOrderState extends ChainOrderProps {
+  initializeChains(chainIds: number[]): number[];
+  setChain(chainId: number): void;
+}

package/stores/chains/useChainOrder.ts

@@ -0,0 +1,9 @@
+import { shallow } from 'zustand/shallow';
+import { useChainOrderStore } from './ChainOrderStore';
+
+export const useChainOrder = (): [number[], (chainId: number) => void] => {
+  return useChainOrderStore(
+    (state) => [state.chainOrder, state.setChain],
+    shallow,
+  );
+};

package/stores/header/index.ts

@@ -0,0 +1 @@
+export * from './useHeaderStore';

package/stores/header/types.ts

@@ -0,0 +1,16 @@
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+
+export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>;
+
+export interface HeaderStateBase {
+  element?: React.ReactNode | null;
+  title?: string;
+}
+
+export interface HeaderState extends HeaderStateBase {
+  setAction(element?: React.ReactNode | null): () => void;
+  setTitle(title?: string): () => void;
+  removeAction(): void;
+  removeTitle(): void;
+}

package/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/stores/index.ts

@@ -0,0 +1,5 @@
+export * from './StoreProvider';
+export * from './chains';
+export * from './header';
+export * from './routes';
+export * from './settings';

package/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/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/stores/routes/index.ts

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

package/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/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/stores/routes/useSetExecutableRoute.ts

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

package/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;
+};