@lifi/widget 3.7.0 → 3.8.0-beta.1

package/stores/form/createFormStore.ts

@@ -1,235 +0,0 @@
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import type {
-  DefaultValues,
-  FormFieldArray,
-  FormFieldNames,
-  FormValueControl,
-  FormValues,
-  FormValuesState,
-} from './types.js';
-
-export const formDefaultValues: DefaultValues = {
-  fromAmount: '',
-  toAmount: '',
-  tokenSearchFilter: '',
-};
-
-const defaultValueToFormValue = <T>(value: T): FormValueControl<T> => ({
-  isTouched: false,
-  isDirty: false,
-  value,
-});
-
-const valuesToFormValues = (defaultValues: DefaultValues): FormValues => {
-  return (Object.keys(defaultValues) as FormFieldNames[]).reduce(
-    (accum, key) => ({
-      ...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) as FormFieldNames[]).reduce(
-    (accum, key) => {
-      if (userValues[key]?.isTouched) {
-        accum[key] = true;
-      }
-      return accum;
-    },
-    {} as Record<FormFieldNames, boolean>,
-  );
-};
-
-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,
-          ),
-        }));
-      },
-      setUserAndDefaultValues: (formValues) => {
-        const currentUserValues = get().userValues;
-        (Object.keys(formValues) as FormFieldNames[]).forEach((key) => {
-          if (formValues[key] !== currentUserValues[key]?.value) {
-            get().resetField(key, { defaultValue: formValues[key] });
-            get().setFieldValue(key, formValues[key], { isTouched: true });
-          }
-        });
-      },
-      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: <T extends FormFieldNames[]>(...names: T) =>
-        names.map((name) => get().userValues[name]?.value) as FormFieldArray<T>,
-      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/types.ts

@@ -1,114 +0,0 @@
-import type { ContractCall } from '@lifi/sdk';
-import type { StoreApi } from 'zustand';
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
-
-export interface DefaultFieldValues {
-  fromChain?: number;
-  fromToken?: string;
-  toChain?: number;
-  toToken?: string;
-  toAddress?: string;
-  fromAmount: string;
-  toAmount: string;
-}
-
-export interface DefaultValues extends DefaultFieldValues {
-  contractCalls?: ContractCall[];
-  tokenSearchFilter: string;
-}
-
-export type GenericFormValue = string | number | ContractCall[] | undefined;
-export interface FormValueControl<T> {
-  isTouched: boolean;
-  isDirty: boolean;
-  value: T;
-}
-
-export type FormValues = {
-  [Property in keyof DefaultValues]: FormValueControl<DefaultValues[Property]>;
-};
-
-export type FormFieldNames = keyof FormValues;
-export type ExtractValueType<T> =
-  T extends FormValueControl<infer U> ? U : never;
-export type FormFieldArray<T extends FormFieldNames[]> = {
-  [K in keyof T]: ExtractValueType<FormValues[T[K]]>;
-};
-
-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 interface FormProps {
-  defaultValues: FormValues;
-  userValues: FormValues;
-  touchedFields: { [key in FormFieldNames]?: boolean };
-}
-
-interface ResetOptions {
-  defaultValue?: GenericFormValue;
-}
-
-export interface FormActions {
-  setDefaultValues: (formValues: DefaultValues) => void;
-  setUserAndDefaultValues: (formValues: Partial<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: <T extends FormFieldNames[]>(
-    ...names: T
-  ) => FormFieldArray<T>;
-}
-
-export type FormValuesState = FormProps &
-  FormActions &
-  ValidationProps &
-  ValidationActions;
-
-export type FormStoreStore = UseBoundStoreWithEqualityFn<
-  StoreApi<FormValuesState>
->;
-
-export 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

@@ -1,20 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import type { FormActions } from './types.js';
-import { useFormStore } from './useFormStore.js';
-
-export const useFieldActions = () => {
-  const actions = useFormStore<FormActions>(
-    (store) => ({
-      getFieldValues: store.getFieldValues,
-      isTouched: store.isTouched,
-      resetField: store.resetField,
-      setAsTouched: store.setAsTouched,
-      setDefaultValues: store.setDefaultValues,
-      setFieldValue: store.setFieldValue,
-      setUserAndDefaultValues: store.setUserAndDefaultValues,
-    }),
-    shallow,
-  );
-
-  return actions;
-};

package/stores/form/useFieldController.ts

@@ -1,31 +0,0 @@
-import { useCallback } from 'react';
-import type { FormFieldNames } from './types.js';
-import { useFieldActions } from './useFieldActions.js';
-import { useFieldValues } from './useFieldValues.js';
-
-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, isTouched: true });
-    },
-    [name, setFieldValue],
-  );
-
-  const onBlur = useCallback(() => {
-    setAsTouched(name);
-  }, [name, setAsTouched]);
-
-  return {
-    onChange,
-    onBlur,
-    name,
-    value: fieldValue,
-  };
-};

package/stores/form/useFieldValues.ts

@@ -1,14 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import type { FormFieldArray, FormFieldNames } from './types.js';
-import { useFormStore } from './useFormStore.js';
-
-// We should return a strongly-typed array based on the specific field names we pass to the function.
-export const useFieldValues = <T extends FormFieldNames[]>(...names: T) => {
-  const values = useFormStore(
-    (store) =>
-      names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>,
-    shallow,
-  );
-
-  return values;
-};

package/stores/form/useFormRef.ts

@@ -1,69 +0,0 @@
-import { useImperativeHandle } from 'react';
-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 { FormRef } from '../../types/widget.js';
-import { HiddenUI } from '../../types/widget.js';
-import type { FormStoreStore, GenericFormValue } from './types.js';
-
-export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
-  const { setSendToWallet } = useSendToWalletActions();
-  const { setSelectedBookmark } = useBookmarkActions();
-  const { hiddenUI } = useWidgetConfig();
-
-  useImperativeHandle(formRef, () => {
-    const sanitizeValue: {
-      [key: string]: (value: any) => GenericFormValue;
-    } = {
-      fromAmount: (value) =>
-        (typeof value === 'number' ? value?.toPrecision() : value) ||
-        formDefaultValues.fromAmount,
-      toAmount: (value) =>
-        (typeof value === 'number' ? value?.toPrecision() : value) ||
-        formDefaultValues.toAmount,
-      toAddress: (value) => {
-        if (hiddenUI?.includes(HiddenUI.ToAddress)) {
-          return formDefaultValues.toAddress;
-        }
-
-        const isToAddressObj = typeof value !== 'string';
-
-        const address =
-          (isToAddressObj ? value?.address : value) ||
-          formDefaultValues.toAddress;
-
-        // sets the send to wallet button state to be open
-        // if there is an address to display
-        if (address) {
-          setSendToWallet(address);
-        }
-
-        // we can assume that the toAddress has been passed as ToAddress object
-        // and display it accordingly - this ensures that if a name is included
-        // that it is displayed in the Send To Wallet form field correctly
-        if (isToAddressObj) {
-          setSelectedBookmark(value);
-        }
-
-        return address;
-      },
-    };
-
-    return {
-      setFieldValue: (fieldName, value, options) => {
-        const sanitizedValue = (
-          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
-        ) as GenericFormValue;
-
-        const fieldValueOptions = options?.setUrlSearchParam
-          ? { isTouched: options?.setUrlSearchParam }
-          : undefined;
-
-        formStore
-          .getState()
-          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions);
-      },
-    };
-  }, [formStore, hiddenUI, setSendToWallet, setSelectedBookmark]);
-};

package/stores/form/useFormStore.ts

@@ -1,19 +0,0 @@
-import { useContext } from 'react';
-import { shallow } from 'zustand/shallow';
-import { FormStoreContext } from './FormStoreContext.js';
-import type { FormValuesState } from './types.js';
-
-export function useFormStore<T>(
-  selector: (state: FormValuesState) => T,
-  equalityFn = shallow,
-): T {
-  const useStore = useContext(FormStoreContext);
-
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <FormStoreProvider>.`,
-    );
-  }
-
-  return useStore(selector, equalityFn);
-}

package/stores/form/useTouchedFields.ts

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

package/stores/form/useValidation.ts

@@ -1,15 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import type { ValidationProps } from './types.js';
-import { useFormStore } from './useFormStore.js';
-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

@@ -1,16 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import type { ValidationActions } from './types.js';
-import { useFormStore } from './useFormStore.js';
-
-export const useValidationActions = () => {
-  const actions = useFormStore<ValidationActions>(
-    (store) => ({
-      addFieldValidation: store.addFieldValidation,
-      triggerFieldValidation: store.triggerFieldValidation,
-      clearErrors: store.clearErrors,
-    }),
-    shallow,
-  );
-
-  return actions;
-};

package/stores/header/types.ts

@@ -1,18 +0,0 @@
-import type { StoreApi } from 'zustand';
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
-
-export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>;
-
-export interface HeaderStateBase {
-  element?: React.ReactNode | null;
-  title?: string;
-  headerHeight: number;
-}
-
-export interface HeaderState extends HeaderStateBase {
-  setAction(element?: React.ReactNode | null): () => void;
-  setTitle(title?: string): () => void;
-  removeAction(): void;
-  removeTitle(): void;
-  setHeaderHeight(headerHeight: number): void;
-}

package/stores/header/useHeaderStore.tsx

@@ -1,102 +0,0 @@
-import { createContext, useContext, useRef } from 'react';
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-import type { PersistStoreProps, PersistStoreProviderProps } from '../types.js';
-import type { HeaderState, HeaderStore } from './types.js';
-
-export const HeaderStoreContext = createContext<HeaderStore | null>(null);
-
-export function HeaderStoreProvider({
-  children,
-  ...props
-}: PersistStoreProviderProps) {
-  const storeRef = useRef<HeaderStore>();
-  if (!storeRef.current) {
-    storeRef.current = createHeaderStore(props);
-  }
-  return (
-    <HeaderStoreContext.Provider value={storeRef.current}>
-      {children}
-    </HeaderStoreContext.Provider>
-  );
-}
-
-export function useHeaderStoreContext() {
-  const useStore = useContext(HeaderStoreContext);
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${HeaderStoreProvider.name}>.`,
-    );
-  }
-  return useStore;
-}
-
-export function useHeaderStore<T>(
-  selector: (state: HeaderState) => T,
-  equalityCheck?: (objA: T, objB: T) => boolean,
-): T {
-  const useStore = useHeaderStoreContext();
-  return useStore(selector, equalityCheck);
-}
-
-// We use fixed position on the header when Widget is in Full Height layout.
-// We do this to get it to work like the sticky header does in the other layout modes.
-// As the header is position fixed its not in the document flow anymore.
-// To prevent the remaining page content from appearing behind the header we need to
-// pass the headers height so that the position of the page content can be adjusted
-export function useHeaderHeight() {
-  const [headerHeight] = useHeaderStore(
-    (state) => [state.headerHeight],
-    shallow,
-  );
-
-  return {
-    headerHeight,
-  };
-}
-
-export function useSetHeaderHeight() {
-  const [setHeaderHeight] = useHeaderStore(
-    (state) => [state.setHeaderHeight],
-    shallow,
-  );
-
-  return {
-    setHeaderHeight,
-  };
-}
-
-export const createHeaderStore = ({ namePrefix }: PersistStoreProps) =>
-  createWithEqualityFn<HeaderState>(
-    (set, get) => ({
-      headerHeight: 108, // a basic default height
-      setAction: (element) => {
-        set(() => ({
-          element,
-        }));
-        return get().removeAction;
-      },
-      setTitle: (title) => {
-        set(() => ({
-          title,
-        }));
-        return get().removeTitle;
-      },
-      removeAction: () => {
-        set(() => ({
-          element: null,
-        }));
-      },
-      removeTitle: () => {
-        set(() => ({
-          title: undefined,
-        }));
-      },
-      setHeaderHeight: (headerHeight) => {
-        set(() => ({
-          headerHeight,
-        }));
-      },
-    }),
-    Object.is,
-  );