@lifi/widget 3.0.0-alpha.8 → 3.0.0-beta.0

package/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,16 @@
+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,12 +1,14 @@
 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';
+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>
@@ -20,33 +22,34 @@ export function ChainOrderStoreProvider({
   children,
   ...props
 }: PersistStoreProviderProps) {
+  const { chains: configChains } = useWidgetConfig();
   const storeRef = useRef<ChainOrderStore>();
-  const { chains: filteredChains } = useChains();
-  const { setValue, getValues } = useFormContext();
+  const { chains } = useChains();
+  const { setFieldValue, getFieldValues } = useFieldActions();
 
   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 (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]);
+          }
         }
-        if (!toChainValue) {
-          setValue(FormKey.ToChain, chainOrder[0]);
-        }
-      }
+      });
     }
-  }, [filteredChains, getValues, setValue]);
+  }, [chains, configChains, getFieldValues, setFieldValue]);
 
   return (
     <ChainOrderStoreContext.Provider value={storeRef.current}>
@@ -55,19 +58,6 @@ export function ChainOrderStoreProvider({
   );
 }
 
-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) {
@@ -77,3 +67,11 @@ export function useChainOrderStoreContext() {
   }
   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,65 +1,85 @@
 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';
+import type { PersistStoreProps } from '../types.js';
+import type { ChainOrderState } from './types.js';
 
-export const maxChainToOrder = 9;
+export const maxChainsToOrder = 9;
+export const maxChainsToShow = 10;
+const defaultChainState = {
+  from: [],
+  to: [],
+};
 
 export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
   createWithEqualityFn<ChainOrderState>(
     persist(
       (set, get) => ({
-        chainOrder: [],
-        availableChains: [],
-        initializeChains: (chainIds: number[]) => {
+        chainOrder: defaultChainState,
+        availableChains: defaultChainState,
+        initializeChains: (chainIds, type) => {
           set((state: ChainOrderState) => {
-            const chainOrder = state.chainOrder.filter((chainId) =>
+            const chainOrder = state.chainOrder[type].filter((chainId) =>
               chainIds.includes(chainId),
             );
             const chainsToAdd = chainIds.filter(
               (chainId) => !chainOrder.includes(chainId),
             );
-            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {
               return {
-                availableChains: chainIds,
-                chainOrder,
+                availableChains: {
+                  ...state.availableChains,
+                  [type]: chainIds,
+                },
+                chainOrder: {
+                  ...state.chainOrder,
+                  [type]: chainOrder,
+                },
               };
             }
-            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            const chainsToAddLength = maxChainsToOrder - chainOrder.length;
             for (let index = 0; index < chainsToAddLength; index++) {
               chainOrder.push(chainsToAdd[index]);
             }
             return {
-              availableChains: chainIds,
-              chainOrder,
+              availableChains: {
+                ...state.availableChains,
+                [type]: chainIds,
+              },
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
             };
           });
-          return get().chainOrder;
+          return get().chainOrder[type];
         },
-        setChain: (chainId: number) => {
+        setChain: (chainId, type) => {
           const state = get();
           if (
-            state.chainOrder.includes(chainId) ||
-            !state.availableChains.includes(chainId)
+            state.chainOrder[type].includes(chainId) ||
+            !state.availableChains[type].includes(chainId)
           ) {
             return;
           }
           set((state: ChainOrderState) => {
-            const chainOrder = state.chainOrder.slice();
+            const chainOrder = state.chainOrder[type].slice();
             chainOrder.unshift(chainId);
-            if (chainOrder.length > maxChainToOrder) {
+            if (chainOrder.length > maxChainsToOrder) {
               chainOrder.pop();
             }
             return {
-              chainOrder,
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
             };
           });
         },
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 0,
+        version: 2,
         partialize: (state) => ({ chainOrder: state.chainOrder }),
       },
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,

package/stores/chains/types.ts

@@ -1,9 +1,17 @@
+import type { FormType } from '../form/types.js';
+
 export interface ChainOrderProps {
-  chainOrder: number[];
-  availableChains: number[];
+  chainOrder: {
+    from: number[];
+    to: number[];
+  };
+  availableChains: {
+    from: number[];
+    to: number[];
+  };
 }
 
 export interface ChainOrderState extends ChainOrderProps {
-  initializeChains(chainIds: number[]): number[];
-  setChain(chainId: number): void;
+  initializeChains(chainIds: number[], type: FormType): number[];
+  setChain(chainId: number, type: FormType): void;
 }

package/stores/chains/useChainOrder.ts

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

package/stores/form/FormStore.tsx

@@ -0,0 +1,63 @@
+import type { PropsWithChildren } from 'react';
+import { useMemo, useRef } from 'react';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { FormStoreStore } from './types.js';
+
+export const FormStoreProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const {
+    fromChain,
+    fromToken,
+    fromAmount,
+    toChain,
+    toToken,
+    toAddress,
+    hiddenUI,
+  } = useWidgetConfig();
+  const storeRef = useRef<FormStoreStore>();
+
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+
+  const defaultValues = useMemo(
+    () => ({
+      ...formDefaultValues,
+      fromChain,
+      fromToken,
+      toChain,
+      toToken,
+      fromAmount:
+        (typeof fromAmount === 'number'
+          ? fromAmount?.toPrecision()
+          : fromAmount) || formDefaultValues.fromAmount,
+      // Prevent setting address when the field is hidden
+      toAddress: hiddenToAddress
+        ? formDefaultValues.toAddress
+        : toAddress?.address || formDefaultValues.toAddress,
+    }),
+    [
+      fromAmount,
+      fromChain,
+      fromToken,
+      hiddenToAddress,
+      toAddress,
+      toChain,
+      toToken,
+    ],
+  );
+
+  if (!storeRef.current) {
+    storeRef.current = createFormStore(defaultValues);
+  }
+
+  return (
+    <FormStoreContext.Provider value={storeRef.current}>
+      {children}
+      <FormUpdater defaultValues={defaultValues} />
+    </FormStoreContext.Provider>
+  );
+};

package/stores/form/FormStoreContext.ts

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

package/stores/form/FormUpdater.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef } from 'react';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChains } from '../../hooks/useChains.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import type { DefaultValues, FormFieldNames } from './types.js';
+import { useFieldActions } from './useFieldActions.js';
+
+export const FormUpdater: React.FC<{
+  defaultValues: Partial<DefaultValues>;
+}> = ({ defaultValues }) => {
+  const { fromChain, toChain } = useWidgetConfig();
+  const { account } = useAccount();
+  const { chains } = useChains();
+  const { isTouched, resetField, setFieldValue, getFieldValues } =
+    useFieldActions();
+  const previousDefaultValues = useRef(defaultValues);
+
+  // 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(() => {
+    (Object.keys(defaultValues) as FormFieldNames[]).forEach((key) => {
+      if (previousDefaultValues.current[key] !== defaultValues[key]) {
+        const value =
+          defaultValues[key] ||
+          // set the chain to the current user one if it is not present in the config
+          (key === 'fromChain' || key === 'toChain'
+            ? account.chainId || ''
+            : '');
+        setFieldValue(key, value);
+        resetField(key, { defaultValue: value });
+      }
+    });
+    previousDefaultValues.current = defaultValues;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValues, getFieldValues, resetField, setFieldValue]);
+
+  return null;
+};

package/stores/form/URLSearchParamsBuilder.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import type { FormFieldNames } from '../form/types.js';
+import { useFieldValues } from '../form/useFieldValues.js';
+import { useTouchedFields } from '../form/useTouchedFields.js';
+
+const formValueKeys: FormFieldNames[] = [
+  'fromAmount',
+  'fromChain',
+  'fromToken',
+  'toAddress',
+  'toChain',
+  'toToken',
+];
+
+export const URLSearchParamsBuilder = () => {
+  const { pathname } = useLocation();
+  const touchedFields = useTouchedFields();
+  const values = useFieldValues(...formValueKeys);
+
+  useEffect(() => {
+    const url = new URL(window.location as any);
+    formValueKeys.forEach((key, index) => {
+      const value = values[index];
+      if (touchedFields[key] && value) {
+        url.searchParams.set(key, value.toString());
+      } else if (url.searchParams.has(key) && !values[index]) {
+        url.searchParams.delete(key);
+      }
+    });
+    url.searchParams.sort();
+    window.history.replaceState(window.history.state, '', url);
+  }, [pathname, touchedFields, values]);
+
+  return null;
+};