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

package/stores/form/FormUpdater.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef } from 'react';
+import { useAccount } from '../../hooks';
+import { isItemAllowed, useWidgetConfig } from '../../providers';
+import type { DefaultValues, FormFieldNames } from './types';
+import { useFieldActions } from './useFieldActions';
+
+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 === '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/{providers/FormProvider → stores/form}/URLSearchParamsBuilder.tsx

@@ -1,24 +1,21 @@
 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,230 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import type {
+  DefaultValues,
+  FormFieldNames,
+  FormValueControl,
+  FormValues,
+  FormValuesState,
+  GenericFormValue,
+} 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 = (defaultValues?: DefaultValues) =>
+  createWithEqualityFn<FormValuesState>((set, get) => {
+    const _defaultValues = valuesToFormValues({
+      ...formDefaultValues,
+      ...defaultValues,
+    });
+    return {
+      defaultValues: _defaultValues,
+      userValues: _defaultValues,
+      touchedFields: {},
+      isValid: true,
+      isValidating: false,
+      errors: {},
+      validation: {},
+      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),
+      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,123 @@
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+
+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 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;
+};

package/stores/form/useFieldController.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import type { FormFieldNames } from './types';
+import { useFieldValues } from './useFieldValues';
+import { useFieldActions } from './useFieldActions';
+
+interface UseFieldControllerProps {
+  name: FormFieldNames;
+}
+
+export const useFieldController = ({ name }: UseFieldControllerProps) => {
+  const [fieldValue] = useFieldValues(name);
+  const { setFieldValue, setAsTouched } = useFieldActions();
+
+  const onChange = useCallback(
+    (newValue: string | number | undefined) => {
+      setFieldValue(name, newValue, { isDirty: true });
+    },
+    [name, setFieldValue],
+  );
+
+  const onBlur = useCallback(() => {
+    setAsTouched(name);
+  }, [name, setAsTouched]);
+
+  return {
+    onChange,
+    onBlur,
+    name,
+    value: fieldValue,
+  };
+};

package/stores/form/useFieldValues.ts

@@ -0,0 +1,12 @@
+import type { FormFieldNames } from './types';
+import { useFormStore } from './FormStore';
+import { shallow } from 'zustand/shallow';
+
+export const useFieldValues = (...names: FormFieldNames[]) => {
+  const values = useFormStore(
+    (store) => names.map((name) => store.userValues[name]?.value),
+    shallow,
+  );
+
+  return values;
+};

package/stores/form/useTouchedFields.ts

@@ -0,0 +1,8 @@
+import { useFormStore } from './FormStore';
+import { shallow } from 'zustand/shallow';
+
+export const useTouchedFields = () => {
+  const touchedFields = useFormStore((store) => store.touchedFields, shallow);
+
+  return touchedFields;
+};

package/stores/form/useValidation.ts

@@ -0,0 +1,15 @@
+import type { ValidationProps } from './types';
+import { useFormStore } from './FormStore';
+import { shallow } from 'zustand/shallow';
+export const useValidation = (): Omit<ValidationProps, 'validation'> => {
+  const [isValid, isValidating, errors] = useFormStore(
+    (store) => [store.isValid, store.isValidating, store.errors],
+    shallow,
+  );
+
+  return {
+    isValid,
+    isValidating,
+    errors,
+  };
+};

package/stores/form/useValidationActions.ts

@@ -0,0 +1,24 @@
+import type { ValidationActions } from './types';
+import { useFormStore } from './FormStore';
+import { shallow } from 'zustand/shallow';
+import type { ValidationActionFunctions, ValidationActionNames } from './types';
+
+const validationFunctions: ValidationActionNames[] = [
+  'addFieldValidation',
+  'triggerFieldValidation',
+  'clearErrors',
+];
+export const useValidationActions = () => {
+  const actions: ValidationActionFunctions = useFormStore(
+    (store) => validationFunctions.map((actionName) => store[actionName]),
+    shallow,
+  );
+
+  return actions.reduce(
+    (accum, actionName, i) => ({
+      ...accum,
+      [validationFunctions[i]]: actionName,
+    }),
+    {},
+  ) as ValidationActions;
+};

package/stores/index.ts

@@ -3,3 +3,4 @@ export * from './chains';
 export * from './header';
 export * from './routes';
 export * from './settings';
+export * from './form';

package/utils/converters.ts

@@ -170,7 +170,7 @@ export const buildRouteFromTxHistory = (
                 toAmount: receiving.amount ?? '',
                 toAmountMin: receiving.amount ?? '',
                 approvalAddress: '',
-                executionDuration: 30,
+                executionDuration: 0,
               },
               tool: tx.tool,
               toolDetails: usedTool,
@@ -183,11 +183,17 @@ export const buildRouteFromTxHistory = (
             fromAmount: sending.amount,
             toAmount: receiving.amount,
             toToken: receiving.token,
-            gasAmount: sending.gasAmount,
-            gasAmountUSD: sending.gasAmountUSD,
-            gasPrice: sending.gasPrice,
-            gasToken: sending.gasToken,
-            gasUsed: sending.gasUsed,
+            gasCosts: [
+              {
+                amount: sending.gasAmount,
+                amountUSD: sending.gasAmountUSD,
+                token: sending.gasToken,
+                estimate: '0',
+                limit: '0',
+                price: '0',
+                type: 'SEND',
+              },
+            ],
           },
         },
       ],