@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -0,0 +1,30 @@
+import { ChainType } from '@lifi/sdk';
+import { useContext, useMemo } from 'react';
+import { EVMExternalContext } from './EVMExternalContext';
+import { SVMExternalContext } from './SVMExternalContext';
+
+interface ExternalWalletProvider {
+  hasExternalProvider: boolean;
+  providers: ChainType[];
+}
+
+export function useHasExternalWalletProvider(): ExternalWalletProvider {
+  const hasExternalEVMContext = useContext(EVMExternalContext);
+  const hasExternalSVMContext = useContext(SVMExternalContext);
+
+  const providers = useMemo(() => {
+    const providers = [];
+    if (hasExternalEVMContext) {
+      providers.push(ChainType.EVM);
+    }
+    if (hasExternalSVMContext) {
+      providers.push(ChainType.SVM);
+    }
+    return providers;
+  }, [hasExternalEVMContext, hasExternalSVMContext]);
+
+  return {
+    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
+    providers,
+  };
+}

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,113 @@
+import { config, createConfig, type SDKConfig } from '@lifi/sdk';
+import { createContext, useContext, useId, useMemo } from 'react';
+import { version } from '../../config/version';
+import { setDefaultSettings } from '../../stores';
+import { formatInputAmount } from '../../utils';
+import type { WidgetContextProps, WidgetProviderProps } from './types';
+import { attemptToFindMatchingToAddressInConfig } from './utils';
+
+const initialContext: WidgetContextProps = {
+  elementId: '',
+  integrator: '',
+};
+
+const WidgetContext = createContext<WidgetContextProps>(initialContext);
+
+export const useWidgetConfig = (): WidgetContextProps =>
+  useContext(WidgetContext);
+
+let sdkInitialized = false;
+
+export const WidgetProvider: React.FC<
+  React.PropsWithChildren<WidgetProviderProps>
+> = ({ children, config: widgetConfig }) => {
+  const elementId = useId();
+
+  if (!widgetConfig?.integrator) {
+    throw Error('Required property "integrator" is missing.');
+  }
+
+  const value = useMemo((): WidgetContextProps => {
+    try {
+      // Get search params from URL
+      const searchParams = Object.fromEntries(
+        new URLSearchParams(window?.location.search),
+      );
+      // Prevent using fromToken/toToken params if chain is not selected
+      ['from', 'to'].forEach((key) => {
+        if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+          delete searchParams[`${key}Token`];
+        }
+      });
+      // Create widget configuration object
+      const value = {
+        ...widgetConfig,
+        fromChain:
+          (searchParams.fromChain &&
+            !isNaN(parseInt(searchParams.fromChain, 10))) ||
+          typeof widgetConfig.fromChain === 'number'
+            ? parseInt(searchParams.fromChain, 10) || widgetConfig.fromChain
+            : undefined,
+        toChain:
+          (searchParams.toChain &&
+            !isNaN(parseInt(searchParams.toChain, 10))) ||
+          typeof widgetConfig.toChain === 'number'
+            ? parseInt(searchParams.toChain, 10) || widgetConfig.toChain
+            : undefined,
+        fromToken: searchParams.fromToken || widgetConfig.fromToken,
+        toToken: searchParams.toToken || widgetConfig.toToken,
+        fromAmount:
+          typeof searchParams.fromAmount === 'string' &&
+          !isNaN(parseFloat(searchParams.fromAmount))
+            ? formatInputAmount(searchParams.fromAmount)
+            : widgetConfig.fromAmount,
+        toAddress: searchParams.toAddress
+          ? attemptToFindMatchingToAddressInConfig(
+              searchParams.toAddress,
+              widgetConfig,
+            )
+          : widgetConfig.toAddress,
+        integrator: widgetConfig.integrator,
+        elementId,
+      } as WidgetContextProps;
+
+      // Set default settings for widget settings store
+      setDefaultSettings(value);
+
+      // Configure SDK
+      const _config: SDKConfig = {
+        ...widgetConfig.sdkConfig,
+        apiKey: widgetConfig.apiKey,
+        integrator: widgetConfig.integrator ?? window?.location.hostname,
+        routeOptions: {
+          fee: widgetConfig.fee,
+          referrer: widgetConfig.referrer,
+          order: widgetConfig.routePriority,
+          slippage: widgetConfig.slippage,
+          ...widgetConfig.sdkConfig?.routeOptions,
+        },
+        disableVersionCheck: true,
+        widgetVersion: version,
+        preloadChains: false,
+      };
+      if (!sdkInitialized) {
+        createConfig(_config);
+        sdkInitialized = true;
+      } else {
+        config.set(_config);
+      }
+
+      return value;
+    } catch (e) {
+      console.warn(e);
+      return {
+        ...widgetConfig,
+        elementId,
+        integrator: widgetConfig.integrator,
+      };
+    }
+  }, [elementId, widgetConfig]);
+  return (
+    <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
+  );
+};

package/providers/WidgetProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './WidgetProvider';
+export * from './types';

package/providers/WidgetProvider/utils.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types';
+import { getChainTypeFromAddress } from '../../utils';
+
+export const attemptToFindMatchingToAddressInConfig = (
+  address: string,
+  config: WidgetConfig,
+) => {
+  if (config.toAddress && config.toAddress.address === address) {
+    return config.toAddress;
+  }
+
+  if (config.toAddresses?.length) {
+    const matchingToAddress = config.toAddresses.find(
+      (toAddress) => toAddress.address === address,
+    );
+
+    if (matchingToAddress) {
+      return matchingToAddress;
+    }
+  }
+
+  return {
+    address: address,
+    chainType: getChainTypeFromAddress(address),
+  };
+};

package/providers/index.ts

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

package/stores/StoreProvider.tsx

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

package/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useRef } from 'react';
+import { shallow } from 'zustand/shallow';
+import type { PersistStoreProviderProps } from '../types';
+import { createBookmarksStore } from './createBookmarkStore';
+import type { BookmarkState, BookmarkStore } from './types';
+import { useWidgetConfig } from '../../providers';
+
+export const BookmarkStoreContext = createContext<BookmarkStore | null>(null);
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { toAddress } = useWidgetConfig();
+  const storeRef = useRef<BookmarkStore>();
+
+  if (!storeRef.current) {
+    storeRef.current = createBookmarksStore({ ...props, toAddress });
+  }
+
+  return (
+    <BookmarkStoreContext.Provider value={storeRef.current}>
+      {children}
+    </BookmarkStoreContext.Provider>
+  );
+};
+
+export function useBookmarkStore<T>(
+  selector: (store: BookmarkState) => T,
+  equalityFunction = shallow,
+) {
+  const useStore = useContext(BookmarkStoreContext);
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`,
+    );
+  }
+
+  return useStore(selector, equalityFunction);
+}

package/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,79 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { ToAddress } from '../../types';
+import type { PersistStoreProps } from '../types';
+import type { BookmarkState } from './types';
+
+const recentWalletsLimit = 5;
+interface PersistBookmarkProps extends PersistStoreProps {
+  toAddress?: ToAddress;
+}
+export const createBookmarksStore = ({
+  namePrefix,
+  toAddress,
+}: PersistBookmarkProps) =>
+  createWithEqualityFn<BookmarkState>(
+    persist(
+      (set, get) => ({
+        selectedBookmark: toAddress,
+        bookmarks: [],
+        recentWallets: [],
+        getBookmark: (address) =>
+          get().bookmarks.find((bookmark) => bookmark.address === address),
+        addBookmark: (bookmark) => {
+          set((state) => ({
+            bookmarks: [bookmark, ...state.bookmarks],
+          }));
+        },
+        removeBookmark: (address) => {
+          set((state) => ({
+            bookmarks: state.bookmarks.filter(
+              (storedBookmark) => storedBookmark.address !== address,
+            ),
+          }));
+        },
+        setSelectedBookmark: (bookmark) => {
+          set((state) => ({
+            selectedBookmark: bookmark,
+          }));
+        },
+        addRecentWallet: (bookmark) => {
+          set((state) => ({
+            recentWallets: [
+              bookmark,
+              ...state.recentWallets.filter(
+                (recentWallet) => recentWallet.address !== bookmark.address,
+              ),
+            ].slice(0, recentWalletsLimit),
+          }));
+        },
+        removeRecentWallet: (address) => {
+          set((state) => ({
+            recentWallets: state.recentWallets.filter(
+              (storedRecent) => storedRecent.address !== address,
+            ),
+          }));
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-bookmarks`,
+        version: 0,
+        partialize: (state) => ({
+          bookmarks: state.bookmarks,
+          recentWallets: state.recentWallets,
+        }),
+        onRehydrateStorage: () => {
+          return (state) => {
+            if (state && toAddress && !toAddress.name) {
+              const existingBookmark = state.getBookmark(toAddress.address);
+              if (existingBookmark) {
+                state.setSelectedBookmark(existingBookmark);
+              }
+            }
+          };
+        },
+      },
+    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
+    Object.is,
+  );

package/stores/bookmarks/index.ts

@@ -0,0 +1,5 @@
+export * from './BookmarkStore';
+export * from './createBookmarkStore';
+export * from './types';
+export * from './useBookmarkActions';
+export * from './useBookmarks';

package/stores/bookmarks/types.ts

@@ -0,0 +1,28 @@
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/esm/traditional';
+import type { ToAddress } from '../../types';
+
+export interface Bookmark extends ToAddress {
+  isConnectedAccount?: boolean;
+}
+
+export interface BookmarkProps {
+  selectedBookmark?: Bookmark;
+  bookmarks: Bookmark[];
+  recentWallets: Bookmark[];
+}
+
+export interface BookmarkActions {
+  getBookmark: (address: string) => Bookmark | undefined;
+  addBookmark: (bookmark: Bookmark) => void;
+  removeBookmark: (address: string) => void;
+  setSelectedBookmark: (bookmark?: Bookmark) => void;
+  addRecentWallet: (bookmark: Bookmark) => void;
+  removeRecentWallet: (address: string) => void;
+}
+
+export type BookmarkState = BookmarkProps & BookmarkActions;
+
+export type BookmarkStore = UseBoundStoreWithEqualityFn<
+  StoreApi<BookmarkState>
+>;

package/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,19 @@
+import { shallow } from 'zustand/shallow';
+import { useBookmarkStore } from './BookmarkStore';
+import type { BookmarkActions } from './types';
+
+export const useBookmarkActions = () => {
+  const actions = useBookmarkStore<BookmarkActions>(
+    (store) => ({
+      getBookmark: store.getBookmark,
+      addBookmark: store.addBookmark,
+      removeBookmark: store.removeBookmark,
+      setSelectedBookmark: store.setSelectedBookmark,
+      addRecentWallet: store.addRecentWallet,
+      removeRecentWallet: store.removeRecentWallet,
+    }),
+    shallow,
+  );
+
+  return actions;
+};

package/stores/bookmarks/useBookmarks.ts

@@ -0,0 +1,16 @@
+import { shallow } from 'zustand/shallow';
+import { useBookmarkStore } from './BookmarkStore';
+import type { BookmarkProps } from './types';
+
+export const useBookmarks = (): BookmarkProps => {
+  const [bookmarks, selectedBookmark, recentWallets] = useBookmarkStore(
+    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets],
+    shallow,
+  );
+
+  return {
+    bookmarks,
+    selectedBookmark,
+    recentWallets,
+  };
+};

package/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,82 @@
+import { createContext, useContext, useEffect, useRef } from 'react';
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { useChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { isItemAllowed } from '../../utils';
+import type { FormType } from '../form';
+import { useFieldActions } from '../form';
+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 { chains: configChains } = useWidgetConfig();
+  const storeRef = useRef<ChainOrderStore>();
+  const { chains } = useChains();
+  const { setFieldValue, getFieldValues } = useFieldActions();
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props);
+  }
+
+  useEffect(() => {
+    if (chains) {
+      (['from', 'to'] as FormType[]).forEach((key) => {
+        const filteredChains = configChains?.[key]
+          ? chains.filter((chain) => isItemAllowed(chain.id, configChains[key]))
+          : chains;
+        const chainOrder = storeRef.current?.getState().initializeChains(
+          filteredChains.map((chain) => chain.id),
+          key,
+        );
+        if (chainOrder) {
+          const [chainValue] = getFieldValues(`${key}Chain`);
+          if (!chainValue) {
+            setFieldValue(`${key}Chain`, chainOrder[0]);
+          }
+        }
+      });
+    }
+  }, [chains, configChains, getFieldValues, setFieldValue]);
+
+  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,86 @@
+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;
+const defaultChainState = {
+  from: [],
+  to: [],
+};
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: defaultChainState,
+        availableChains: defaultChainState,
+        initializeChains: (chainIds, type) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].filter((chainId) =>
+              chainIds.includes(chainId),
+            );
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId),
+            );
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: {
+                  ...state.availableChains,
+                  [type]: chainIds,
+                },
+                chainOrder: {
+                  ...state.chainOrder,
+                  [type]: chainOrder,
+                },
+              };
+            }
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index]);
+            }
+            return {
+              availableChains: {
+                ...state.availableChains,
+                [type]: chainIds,
+              },
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            };
+          });
+          return get().chainOrder[type];
+        },
+        setChain: (chainId, type) => {
+          const state = get();
+          if (
+            state.chainOrder[type].includes(chainId) ||
+            !state.availableChains[type].includes(chainId)
+          ) {
+            return;
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+              chainOrder.pop();
+            }
+            return {
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            };
+          });
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+        version: 1,
+        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,17 @@
+import type { FormType } from '../form';
+
+export interface ChainOrderProps {
+  chainOrder: {
+    from: number[];
+    to: number[];
+  };
+  availableChains: {
+    from: number[];
+    to: number[];
+  };
+}
+
+export interface ChainOrderState extends ChainOrderProps {
+  initializeChains(chainIds: number[], type: FormType): number[];
+  setChain(chainId: number, type: FormType): void;
+}

package/stores/chains/useChainOrder.ts

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