@lifi/widget 3.0.0-alpha.10 → 3.0.0-alpha.11

package/stores/StoreProvider.tsx

@@ -1,6 +1,7 @@
 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';
@@ -10,20 +11,22 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   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>
+    <FormStoreProvider>
+      <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>
+    </FormStoreProvider>
   );
 };

package/stores/chains/ChainOrderStore.tsx

@@ -1,12 +1,11 @@
 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 { useFieldActions } from '../../stores';
 
 export type ChainOrderStore = UseBoundStoreWithEqualityFn<
   StoreApi<ChainOrderState>
@@ -22,7 +21,7 @@ export function ChainOrderStoreProvider({
 }: PersistStoreProviderProps) {
   const storeRef = useRef<ChainOrderStore>();
   const { chains: filteredChains } = useChains();
-  const { setValue, getValues } = useFormContext();
+  const { setFieldValue, getFieldValues } = useFieldActions();
 
   if (!storeRef.current) {
     storeRef.current = createChainOrderStore(props);
@@ -34,19 +33,19 @@ export function ChainOrderStoreProvider({
         ?.getState()
         .initializeChains(filteredChains.map((chain) => chain.id));
       if (chainOrder) {
-        const [fromChainValue, toChainValue] = getValues([
-          FormKey.FromChain,
-          FormKey.ToChain,
-        ]);
+        const [fromChainValue, toChainValue] = getFieldValues(
+          'fromChain',
+          'toChain',
+        );
         if (!fromChainValue) {
-          setValue(FormKey.FromChain, chainOrder[0]);
+          setFieldValue('fromChain', chainOrder[0]);
         }
         if (!toChainValue) {
-          setValue(FormKey.ToChain, chainOrder[0]);
+          setFieldValue('toChain', chainOrder[0]);
         }
       }
     }
-  }, [filteredChains, getValues, setValue]);
+  }, [filteredChains, getFieldValues, setFieldValue]);
 
   return (
     <ChainOrderStoreContext.Provider value={storeRef.current}>

package/stores/form/FormStore.tsx

@@ -0,0 +1,66 @@
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useWidgetConfig } from '../../providers';
+import type { FormStoreStore, FormValuesState } from './types';
+import { createFormStore, formDefaultValues } from './createFormStore';
+import { FormUpdater } from './FormUpdater';
+
+export const FormStoreContext = createContext<FormStoreStore | null>(null);
+
+export const FormStoreProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const storeRef = useRef<FormStoreStore>();
+
+  if (!storeRef.current) {
+    storeRef.current = createFormStore();
+  }
+
+  const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } =
+    useWidgetConfig();
+
+  const defaultValues = useMemo(
+    () => ({
+      ...formDefaultValues,
+      fromChain,
+      fromToken,
+      toChain,
+      toToken,
+      fromAmount:
+        (typeof fromAmount === 'number'
+          ? fromAmount?.toPrecision()
+          : fromAmount) || formDefaultValues.fromAmount,
+      toAddress: toAddress || formDefaultValues.toAddress,
+    }),
+    [fromAmount, fromChain, fromToken, toAddress, toChain, toToken],
+  );
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.getState().setDefaultValues(defaultValues);
+    }
+  }, [defaultValues, storeRef]);
+
+  return (
+    <FormStoreContext.Provider value={storeRef.current}>
+      <FormUpdater defaultValues={defaultValues} />
+      {children}
+    </FormStoreContext.Provider>
+  );
+};
+
+export const useFormStore = (
+  selector: (store: FormValuesState) => any,
+  equalityFunction = shallow,
+) => {
+  const useStore = useContext(FormStoreContext);
+
+  if (!useStore) {
+    throw new Error(
+      'You forgot to wrap your component in <FormStoreProvider>.',
+    );
+  }
+
+  return useStore(selector, equalityFunction);
+};

package/stores/form/FormUpdater.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef } from 'react';
+import type { FormFieldNames } from './types';
+import { useAccount } from '../../hooks';
+import { useFieldActions } from './useFieldActions';
+import { isItemAllowed, useWidgetConfig } from '../../providers';
+import type { DefaultValues } from './types';
+import { FormKey } from './types';
+
+export const FormUpdater: React.FC<{
+  defaultValues: Partial<DefaultValues>;
+}> = ({ defaultValues }) => {
+  const { fromChain, toChain, chains } = useWidgetConfig();
+  const { account } = useAccount();
+  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 && isItemAllowed(account.chainId, chains);
+    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 === FormKey.FromChain || key === FormKey.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/{providers/FormProvider → stores/form}/URLSearchParamsBuilder.tsx

@@ -1,24 +1,20 @@
 import { useEffect } from 'react';
-import { useFormState, useWatch } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
-import { FormKey } from './types';
+import type { FormFieldNames } from '../index';
+import { useFieldValues, useTouchedFields } from '../index';
 
-const formValueKeys = [
-  FormKey.FromAmount,
-  FormKey.FromChain,
-  FormKey.FromToken,
-  FormKey.ToAddress,
-  FormKey.ToChain,
-  FormKey.ToToken,
+const formValueKeys: FormFieldNames[] = [
+  'fromAmount',
+  'fromChain',
+  'fromToken',
+  'toAddress',
+  'toChain',
+  'toToken',
 ];
-
 export const URLSearchParamsBuilder = () => {
   const { pathname } = useLocation();
-  const {
-    // Have to use touchedFields, because default values are not considered dirty
-    touchedFields: { ...touchedFields },
-  } = useFormState();
-  const values = useWatch({ name: formValueKeys });
+  const touchedFields = useTouchedFields();
+  const values = useFieldValues(...formValueKeys);
 
   useEffect(() => {
     const url = new URL(window.location as any);

package/stores/form/createFormStore.ts

@@ -0,0 +1,225 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import type {
+  DefaultValues,
+  FormFieldNames,
+  GenericFormValue,
+  FormValueControl,
+  FormValues,
+  FormValuesState,
+} from './types';
+
+export const formDefaultValues: DefaultValues = {
+  fromAmount: '',
+  toAddress: '',
+  tokenSearchFilter: '',
+  contractOutputsToken: '',
+  toContractAddress: '',
+  toContractCallData: '',
+  toContractGasLimit: '',
+  toAmount: '',
+};
+
+const defaultValueToFormValue = (
+  value: GenericFormValue,
+): FormValueControl<GenericFormValue> => ({
+  isTouched: false,
+  isDirty: false,
+  value,
+});
+const valuesToFormValues = (defaultValues: DefaultValues): FormValues => {
+  return (Object.keys(defaultValues) as FormFieldNames[]).reduce(
+    (accum, key) => {
+      return { ...accum, [key]: defaultValueToFormValue(defaultValues[key]) };
+    },
+    {},
+  ) as FormValues;
+};
+
+const isString = (str: any) => typeof str === 'string' || str instanceof String;
+
+const getUpdatedTouchedFields = (userValues: FormValues) => {
+  return Object.keys(userValues).reduce(
+    (accum, key) =>
+      userValues[key as FormFieldNames]?.isTouched
+        ? { ...accum, [key]: true }
+        : accum,
+    {},
+  );
+};
+const mergeDefaultFormValues = (
+  userValues: FormValues,
+  defaultValues: FormValues,
+) =>
+  (Object.keys(defaultValues) as FormFieldNames[]).reduce<FormValues>(
+    (accum, key) => {
+      const formValue = {
+        isTouched: !!(
+          userValues[key]?.isTouched || defaultValues[key]?.isTouched
+        ),
+        isDirty: !!(userValues[key]?.isDirty || defaultValues[key]?.isTouched),
+        value:
+          userValues[key]?.value || Number.isFinite(userValues[key]?.value)
+            ? userValues[key]?.value
+            : defaultValues[key]?.value,
+      };
+
+      return {
+        ...accum,
+        [key]: formValue,
+      };
+    },
+    { ...valuesToFormValues(formDefaultValues) },
+  );
+
+export const createFormStore = () =>
+  createWithEqualityFn<FormValuesState>(
+    (set, get) => ({
+      defaultValues: valuesToFormValues(formDefaultValues),
+      userValues: valuesToFormValues(formDefaultValues),
+      touchedFields: {},
+      setDefaultValues: (defaultValue) => {
+        const defaultFormValues = valuesToFormValues(defaultValue);
+        set((state) => ({
+          defaultValues: defaultFormValues,
+          userValues: mergeDefaultFormValues(
+            state.userValues,
+            defaultFormValues,
+          ),
+        }));
+      },
+      isTouched: (fieldName: FormFieldNames) =>
+        !!get().userValues[fieldName]?.isTouched,
+      setAsTouched: (fieldName: FormFieldNames) => {
+        const userValues = {
+          ...get().userValues,
+          [fieldName]: {
+            ...get().userValues[fieldName],
+            isTouched: true,
+          },
+        };
+
+        const touchedFields = getUpdatedTouchedFields(userValues);
+
+        set(() => ({
+          userValues,
+          touchedFields,
+        }));
+      },
+      resetField: (fieldName, { defaultValue } = {}) => {
+        if (defaultValue) {
+          const fieldValues = {
+            ...get().defaultValues[fieldName],
+            value: defaultValue,
+          };
+          const defaultValues = {
+            ...get().defaultValues,
+            [fieldName]: { ...fieldValues },
+          };
+          const userValues = {
+            ...get().userValues,
+            [fieldName]: { ...fieldValues },
+          };
+          const touchedFields = getUpdatedTouchedFields(userValues);
+
+          set(() => {
+            return {
+              defaultValues,
+              userValues,
+              touchedFields,
+            };
+          });
+        } else {
+          const userValues = {
+            ...get().userValues,
+            [fieldName]: { ...get().defaultValues[fieldName] },
+          };
+          const touchedFields = getUpdatedTouchedFields(userValues);
+
+          set(() => ({
+            userValues,
+            touchedFields,
+          }));
+        }
+      },
+      setFieldValue: (fieldName, value, { isDirty, isTouched } = {}) => {
+        const userValues = {
+          ...get().userValues,
+          [fieldName]: {
+            value,
+            isDirty:
+              isDirty === undefined
+                ? get().userValues[fieldName]?.isDirty
+                : isDirty,
+            isTouched:
+              isTouched === undefined
+                ? get().userValues[fieldName]?.isTouched
+                : isTouched,
+          },
+        };
+
+        const touchedFields = getUpdatedTouchedFields(userValues);
+
+        set(() => ({
+          userValues,
+          touchedFields,
+        }));
+      },
+      getFieldValues: (...names) =>
+        names.map((name) => get().userValues[name]?.value),
+      isValid: true,
+      isValidating: false,
+      errors: {},
+      validation: {},
+      addFieldValidation: (name, validationFn) => {
+        set((state) => ({
+          validation: {
+            ...state.validation,
+            [name]: validationFn,
+          },
+        }));
+      },
+      triggerFieldValidation: async (name) => {
+        try {
+          let valid = true;
+          set(() => ({ isValid: false, isValidating: true }));
+
+          const validationFn = get().validation[name];
+
+          if (validationFn) {
+            const result = await validationFn(get().userValues?.[name]?.value);
+            if (isString(result)) {
+              valid = false;
+              set((state) => ({
+                errors: {
+                  ...state.errors,
+                  [name]: result,
+                },
+              }));
+            } else {
+              valid = result as boolean;
+              if (valid) {
+                get().clearErrors(name);
+              }
+            }
+          }
+
+          set(() => ({ isValid: valid, isValidating: false }));
+          return valid;
+        } catch (err) {
+          set(() => ({ isValidating: false }));
+          throw err;
+        }
+      },
+      clearErrors: (name) => {
+        const newErrors = { ...get().errors };
+
+        delete newErrors[name];
+
+        set(() => ({
+          errors: newErrors,
+        }));
+      },
+    }),
+    Object.is,
+  );

package/stores/form/index.ts

@@ -0,0 +1,10 @@
+export * from './createFormStore';
+export * from './FormStore';
+export * from './types';
+export * from './useFieldActions';
+export * from './useFieldController';
+export * from './useFieldValues';
+export * from './useTouchedFields';
+export * from './useValidation';
+export * from './useValidationActions';
+export * from './URLSearchParamsBuilder';

package/stores/form/types.ts

@@ -0,0 +1,138 @@
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import type { StoreApi } from 'zustand';
+
+export interface DefaultValues {
+  toAddress: string;
+  tokenSearchFilter: string;
+  contractOutputsToken: string;
+  toContractAddress: string;
+  toContractCallData: string;
+  toContractGasLimit: string;
+  toAmount: string;
+  fromAmount: string;
+  toChain?: number;
+  fromChain?: number;
+  fromToken?: string;
+  toToken?: string | undefined;
+}
+
+export type GenericFormValue = string | number | undefined;
+export interface FormValueControl<T> {
+  isTouched: boolean;
+  isDirty: boolean;
+  value: T;
+}
+
+export interface FormValues {
+  toAddress: FormValueControl<string>;
+  tokenSearchFilter: FormValueControl<string>;
+  contractOutputsToken: FormValueControl<string>;
+  toContractAddress: FormValueControl<string>;
+  toContractCallData: FormValueControl<string>;
+  toContractGasLimit: FormValueControl<string>;
+  toAmount: FormValueControl<string>;
+  fromAmount: FormValueControl<string>;
+  fromToken?: FormValueControl<string | undefined>;
+  toToken?: FormValueControl<string | undefined>;
+  toChain?: FormValueControl<number | undefined>;
+  fromChain?: FormValueControl<number | undefined>;
+}
+
+export type FormFieldNames = keyof FormValues;
+
+export type TouchedFields = { [key in FormFieldNames]?: boolean };
+
+type ValidationFn = (value: any) => Promise<boolean | string>;
+export interface ValidationProps {
+  isValid: boolean;
+  isValidating: boolean;
+  errors: {
+    [key in FormFieldNames]?: string;
+  };
+  validation: {
+    [key in FormFieldNames]?: ValidationFn;
+  };
+}
+
+export interface ValidationActions {
+  addFieldValidation: (
+    name: FormFieldNames,
+    validationFn: ValidationFn,
+  ) => void;
+  triggerFieldValidation: (name: FormFieldNames) => Promise<boolean>;
+  clearErrors: (name: FormFieldNames) => void;
+}
+export type ValidationActionNames = keyof ValidationActions;
+export type ValidationActionFunctions = Array<
+  ValidationActions[ValidationActionNames]
+>;
+
+export interface FormProps {
+  defaultValues: FormValues;
+  userValues: FormValues;
+  touchedFields: { [key in FormFieldNames]?: boolean };
+}
+
+interface ResetOptions {
+  defaultValue?: GenericFormValue;
+}
+
+export interface FormActions {
+  setDefaultValues: (formValues: DefaultValues) => void;
+  isTouched: (fieldName: FormFieldNames) => boolean;
+  setAsTouched: (fieldName: FormFieldNames) => void;
+  resetField: (fieldName: FormFieldNames, resetOptions?: ResetOptions) => void;
+  setFieldValue: (
+    fieldName: FormFieldNames,
+    value: GenericFormValue,
+    options?: SetOptions,
+  ) => void;
+  getFieldValues: (...names: FormFieldNames[]) => Array<any>;
+}
+
+export type FormActionNames = keyof FormActions;
+export type FormActionFunctions = Array<FormActions[FormActionNames]>;
+
+export type FormValuesState = FormProps &
+  FormActions &
+  ValidationProps &
+  ValidationActions;
+
+export type FormStoreStore = UseBoundStoreWithEqualityFn<
+  StoreApi<FormValuesState>
+>;
+
+interface SetOptions {
+  isDirty?: boolean;
+  isTouched?: boolean;
+}
+
+export enum FormKey {
+  ContractOutputsToken = 'contractOutputsToken',
+  FromAmount = 'fromAmount',
+  FromChain = 'fromChain',
+  FromToken = 'fromToken',
+  ToAddress = 'toAddress',
+  ToAmount = 'toAmount',
+  ToChain = 'toChain',
+  ToContractAddress = 'toContractAddress',
+  ToContractCallData = 'toContractCallData',
+  ToContractGasLimit = 'ToContractGasLimit',
+  ToToken = 'toToken',
+  TokenSearchFilter = 'tokenSearchFilter',
+}
+
+export type FormType = 'from' | 'to';
+
+export interface FormTypeProps {
+  formType: FormType;
+}
+
+export const FormKeyHelper = {
+  getChainKey: (formType: FormType): 'fromChain' | 'toChain' =>
+    `${formType}Chain`,
+  getTokenKey: (formType: FormType): 'fromToken' | 'toToken' =>
+    `${formType}Token`,
+  getAmountKey: (formType: FormType): 'fromAmount' | 'toAmount' =>
+    `${formType}Amount`,
+};

package/stores/form/useFieldActions.ts

@@ -0,0 +1,28 @@
+import { shallow } from 'zustand/shallow';
+import type {
+  FormActions,
+  FormActionNames,
+  FormActionFunctions,
+} from './types';
+import { useFormStore } from './FormStore';
+
+const actionFunctions: FormActionNames[] = [
+  'setDefaultValues',
+  'isTouched',
+  'setAsTouched',
+  'resetField',
+  'setFieldValue',
+  'getFieldValues',
+];
+
+export const useFieldActions = () => {
+  const actions: FormActionFunctions = useFormStore(
+    (store) => actionFunctions.map((actionName) => store[actionName]),
+    shallow,
+  );
+
+  return actions.reduce(
+    (accum, actionName, i) => ({ ...accum, [actionFunctions[i]]: actionName }),
+    {},
+  ) as FormActions;
+};