@lifi/widget 3.7.0 → 3.8.0-beta.1

package/stores/bookmarks/createBookmarkStore.ts

@@ -1,81 +0,0 @@
-import type { StateCreator } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { createWithEqualityFn } from 'zustand/traditional';
-import type { ToAddress } from '../../types/widget.js';
-import type { PersistStoreProps } from '../types.js';
-import type { BookmarkState } from './types.js';
-
-const recentWalletsLimit = 10;
-
-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,
-            ),
-          }));
-        },
-        getSelectedBookmark: () => get().selectedBookmark,
-        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/types.ts

@@ -1,29 +0,0 @@
-import type { StoreApi } from 'zustand';
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
-import type { ToAddress } from '../../types/widget.js';
-
-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;
-  getSelectedBookmark: () => Bookmark | undefined;
-  addRecentWallet: (bookmark: Bookmark) => void;
-  removeRecentWallet: (address: string) => void;
-}
-
-export type BookmarkState = BookmarkProps & BookmarkActions;
-
-export type BookmarkStore = UseBoundStoreWithEqualityFn<
-  StoreApi<BookmarkState>
->;

package/stores/bookmarks/useBookmarkActions.ts

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

package/stores/bookmarks/useBookmarks.ts

@@ -1,16 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import { useBookmarkStore } from './BookmarkStore.js';
-import type { BookmarkProps } from './types.js';
-
-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

@@ -1,77 +0,0 @@
-import { createContext, useContext, useEffect, useRef } from 'react';
-import type { StoreApi } from 'zustand';
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
-import { useChains } from '../../hooks/useChains.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { isItemAllowed } from '../../utils/item.js';
-import type { FormType } from '../form/types.js';
-import { useFieldActions } from '../form/useFieldActions.js';
-import type { PersistStoreProviderProps } from '../types.js';
-import { createChainOrderStore } from './createChainOrderStore.js';
-import type { ChainOrderState } from './types.js';
-
-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 useChainOrderStoreContext() {
-  const useStore = useContext(ChainOrderStoreContext);
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
-    );
-  }
-  return useStore;
-}
-
-export function useChainOrderStore<T>(
-  selector: (state: ChainOrderState) => T,
-  equalityFn?: (left: T, right: T) => boolean,
-): T {
-  const useStore = useChainOrderStoreContext();
-  return useStore(selector, equalityFn);
-}

package/stores/chains/createChainOrderStore.ts

@@ -1,87 +0,0 @@
-import type { StateCreator } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { createWithEqualityFn } from 'zustand/traditional';
-import type { PersistStoreProps } from '../types.js';
-import type { ChainOrderState } from './types.js';
-
-export const maxChainsToOrder = 9;
-export const maxChainsToShow = 10;
-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 === maxChainsToOrder || !chainsToAdd.length) {
-              return {
-                availableChains: {
-                  ...state.availableChains,
-                  [type]: chainIds,
-                },
-                chainOrder: {
-                  ...state.chainOrder,
-                  [type]: chainOrder,
-                },
-              };
-            }
-            const chainsToAddLength = maxChainsToOrder - 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 > maxChainsToOrder) {
-              chainOrder.pop();
-            }
-            return {
-              chainOrder: {
-                ...state.chainOrder,
-                [type]: chainOrder,
-              },
-            };
-          });
-        },
-      }),
-      {
-        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 2,
-        partialize: (state) => ({ chainOrder: state.chainOrder }),
-      },
-    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
-    Object.is,
-  );

package/stores/chains/types.ts

@@ -1,17 +0,0 @@
-import type { FormType } from '../form/types.js';
-
-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

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

package/stores/form/FormStore.tsx

@@ -1,143 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { useMemo, useRef } from 'react';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { FormRef, ToAddress } from '../../types/widget.js';
-import { HiddenUI } from '../../types/widget.js';
-import { FormStoreContext } from './FormStoreContext.js';
-import { FormUpdater } from './FormUpdater.js';
-import { createFormStore, formDefaultValues } from './createFormStore.js';
-import type { DefaultValues, FormStoreStore } from './types.js';
-import { useFormRef } from './useFormRef.js';
-
-// decorates and initialise the form date for use in the form store
-const initialiseDefaultValues = (
-  defaultValues: Partial<DefaultValues>,
-  fromAmount?: number | string,
-  toAmount?: number | string,
-  toAddress?: ToAddress,
-  hiddenToAddress?: boolean,
-) => ({
-  ...formDefaultValues,
-  ...defaultValues,
-  fromAmount:
-    (typeof fromAmount === 'number' ? fromAmount?.toPrecision() : fromAmount) ||
-    formDefaultValues.fromAmount,
-  toAmount:
-    (typeof toAmount === 'number' ? toAmount?.toPrecision() : toAmount) ||
-    formDefaultValues.toAmount,
-  // Prevent setting address when the field is hidden
-  toAddress: hiddenToAddress
-    ? formDefaultValues.toAddress
-    : toAddress?.address || formDefaultValues.toAddress,
-});
-
-interface FormStoreProviderProps extends PropsWithChildren {
-  formRef?: FormRef;
-}
-
-export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
-  children,
-  formRef,
-}) => {
-  const widgetConfig = useWidgetConfig();
-
-  const {
-    fromChain,
-    fromToken,
-    toChain,
-    toToken,
-    fromAmount,
-    toAmount,
-    toAddress,
-    hiddenUI,
-    formUpdateKey,
-  } = widgetConfig;
-
-  const storeRef = useRef<FormStoreStore>();
-
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-
-  const configHasFromChain = widgetConfig.hasOwnProperty('fromChain');
-  const configHasFromToken = widgetConfig.hasOwnProperty('fromToken');
-  const configHasFromAmount = widgetConfig.hasOwnProperty('fromAmount');
-  const configHasToAmount = widgetConfig.hasOwnProperty('toAmount');
-  const configHasToAddress = widgetConfig.hasOwnProperty('toAddress');
-  const configHasToChain = widgetConfig.hasOwnProperty('toChain');
-  const configHasToToken = widgetConfig.hasOwnProperty('toToken');
-
-  // We use the presence/absence of a property to decide if the form values in state need to be updated
-  // We only build and set a property on the memoized form values here if they are included in the
-  // config - undefined is considered a valid value that will reset that form field
-  const reactiveFormValues = useMemo(
-    () => ({
-      ...(configHasFromChain ? { fromChain } : undefined),
-      ...(configHasFromToken ? { fromToken } : undefined),
-      ...(configHasFromAmount
-        ? {
-            fromAmount:
-              (typeof fromAmount === 'number'
-                ? fromAmount?.toPrecision()
-                : fromAmount) || formDefaultValues.fromAmount,
-          }
-        : undefined),
-      ...(configHasFromAmount
-        ? {
-            toAmount:
-              (typeof toAmount === 'number'
-                ? toAmount?.toPrecision()
-                : toAmount) || formDefaultValues.toAmount,
-          }
-        : undefined),
-      ...(configHasToChain ? { toChain } : undefined),
-      ...(configHasToToken ? { toToken } : undefined),
-      ...(configHasToAddress
-        ? {
-            toAddress: hiddenToAddress
-              ? formDefaultValues.toAddress
-              : toAddress?.address || formDefaultValues.toAddress,
-          }
-        : undefined),
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      fromAmount,
-      toAmount,
-      fromChain,
-      fromToken,
-      hiddenToAddress,
-      toAddress,
-      toChain,
-      toToken,
-      // formUpdateKey should be a randomly assigned unique key. It can be used to force updates for the form field values
-      formUpdateKey,
-      configHasFromChain,
-      configHasFromToken,
-      configHasFromAmount,
-      configHasToAmount,
-      configHasToAddress,
-      configHasToChain,
-      configHasToToken,
-    ],
-  );
-
-  if (!storeRef.current) {
-    storeRef.current = createFormStore(
-      initialiseDefaultValues(
-        reactiveFormValues,
-        fromAmount,
-        toAmount,
-        toAddress,
-        hiddenToAddress,
-      ),
-    );
-  }
-
-  useFormRef(storeRef.current, formRef);
-
-  return (
-    <FormStoreContext.Provider value={storeRef.current}>
-      {children}
-      <FormUpdater reactiveFormValues={reactiveFormValues} />
-    </FormStoreContext.Provider>
-  );
-};

package/stores/form/FormStoreContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import type { FormStoreStore } from './types.js';
-
-export const FormStoreContext = createContext<FormStoreStore | null>(null);

package/stores/form/FormUpdater.tsx

@@ -1,100 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useEffect } from 'react';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useChains } from '../../hooks/useChains.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { formDefaultValues } from '../../stores/form/createFormStore.js';
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import type { DefaultValues } from './types.js';
-import { useFieldActions } from './useFieldActions.js';
-
-export const FormUpdater: React.FC<{
-  reactiveFormValues: Partial<DefaultValues>;
-}> = ({ reactiveFormValues }) => {
-  const { fromChain, toChain, toAddress } = useWidgetConfig();
-  const { account } = useAccount();
-  const { chains } = useChains();
-  const { setSendToWallet } = useSendToWalletActions();
-  const { setSelectedBookmark } = useBookmarkActions();
-
-  const {
-    isTouched,
-    resetField,
-    setFieldValue,
-    getFieldValues,
-    setUserAndDefaultValues,
-  } = useFieldActions();
-  // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-  useEffect(() => {
-    const chainAllowed =
-      account.chainId && chains?.some((chain) => chain.id === account.chainId);
-
-    if (!account.isConnected || !account.chainId || !chainAllowed) {
-      return;
-    }
-
-    if (!fromChain && !isTouched('fromChain') && !isTouched('fromToken')) {
-      resetField('fromChain', { defaultValue: account.chainId });
-      setFieldValue('fromToken', '');
-      if (isTouched('fromAmount')) {
-        setFieldValue('fromAmount', '');
-      }
-    }
-    if (!toChain && !isTouched('toChain') && !isTouched('toToken')) {
-      resetField('toChain', { defaultValue: account.chainId });
-      setFieldValue('toToken', '');
-    }
-  }, [
-    account.chainId,
-    account.isConnected,
-    chains,
-    fromChain,
-    toChain,
-    isTouched,
-    resetField,
-    setFieldValue,
-  ]);
-
-  // Makes widget config options reactive to changes
-  // should update userValues when defaultValues updates and includes additional logic for chains
-  useEffect(() => {
-    if (reactiveFormValues.toAddress) {
-      setSendToWallet(true);
-    }
-
-    setSelectedBookmark(toAddress);
-
-    setUserAndDefaultValues(
-      accountForChainId(reactiveFormValues, account.chainId),
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    toAddress,
-    reactiveFormValues,
-    getFieldValues,
-    resetField,
-    setFieldValue,
-    setUserAndDefaultValues,
-    setSendToWallet,
-    setSelectedBookmark,
-  ]);
-
-  return null;
-};
-
-const accountForChainId = (
-  defaultValues: Partial<DefaultValues>,
-  chainId?: number,
-) => {
-  const result: Partial<DefaultValues> = { ...defaultValues };
-  for (const key in result) {
-    const k = key as keyof DefaultValues;
-    if (result[k] === formDefaultValues[k]) {
-      if ((k === 'fromChain' || k === 'toChain') && chainId) {
-        result[k] = chainId;
-      }
-    }
-  }
-  return result;
-};

package/stores/form/URLSearchParamsBuilder.tsx

@@ -1,86 +0,0 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import { formatInputAmount } from '../../utils/format.js';
-import type { DefaultValues, FormFieldNames } from '../form/types.js';
-import { useFieldActions } from '../form/useFieldActions.js';
-import { useFieldValues } from '../form/useFieldValues.js';
-import { useTouchedFields } from '../form/useTouchedFields.js';
-
-const formValueKeys: FormFieldNames[] = [
-  'fromAmount',
-  'fromChain',
-  'fromToken',
-  'toAddress',
-  'toChain',
-  'toToken',
-];
-
-const getDefaultValuesFromQueryString = (): Partial<DefaultValues> => {
-  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`];
-    }
-  });
-
-  return {
-    ...(Number.isFinite(parseInt(searchParams.fromChain, 10))
-      ? { fromChain: parseInt(searchParams.fromChain, 10) }
-      : {}),
-    ...(Number.isFinite(parseInt(searchParams.toChain, 10))
-      ? { toChain: parseInt(searchParams.toChain, 10) }
-      : {}),
-    ...(searchParams.fromToken ? { fromToken: searchParams.fromToken } : {}),
-    ...(searchParams.toToken ? { toToken: searchParams.toToken } : {}),
-    ...(Number.isFinite(parseFloat(searchParams.fromAmount))
-      ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
-      : {}),
-    ...(searchParams.toAddress ? { toAddress: searchParams.toAddress } : {}),
-  };
-};
-
-export const URLSearchParamsBuilder = () => {
-  const { pathname } = useLocation();
-  const touchedFields = useTouchedFields();
-  const values = useFieldValues(...formValueKeys);
-  const { setSendToWallet } = useSendToWalletActions();
-
-  // Using these methods as trying to use the touchedFields and values above
-  // often has a lag that can effect the widgets initialisation sequence
-  // and accidentally cause values to be wiped from the query string
-  const { getFieldValues, isTouched, setUserAndDefaultValues } =
-    useFieldActions();
-
-  useEffect(() => {
-    // get the  initial values from the querysting
-    const formValues = getDefaultValuesFromQueryString();
-
-    if (formValues.toAddress) {
-      setSendToWallet(true);
-    }
-
-    setUserAndDefaultValues(formValues);
-  }, [setUserAndDefaultValues, setSendToWallet]);
-
-  useEffect(() => {
-    // set the values on the querysting
-    const url = new URL(window.location as any);
-    formValueKeys.forEach((key, index) => {
-      const value = getFieldValues(key)[0];
-      if (isTouched(key) && value) {
-        url.searchParams.set(key, value.toString());
-      } else if (url.searchParams.has(key) && !value) {
-        url.searchParams.delete(key);
-      }
-    });
-    url.searchParams.sort();
-    window.history.replaceState(window.history.state, '', url);
-  }, [pathname, touchedFields, values, isTouched, getFieldValues]);
-
-  return null;
-};