@lifi/widget 3.6.0-alpha.5 → 3.6.1

package/stores/form/FormStore.tsx

@@ -1,63 +1,143 @@
 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 { FormStoreStore } from './types.js';
+import type { DefaultValues, FormStoreStore } from './types.js';
+import { useFormRef } from './useFormRef.js';
 
-export const FormStoreProvider: React.FC<PropsWithChildren> = ({
+// 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,
-    fromAmount,
     toChain,
     toToken,
+    fromAmount,
+    toAmount,
     toAddress,
     hiddenUI,
-  } = useWidgetConfig();
+    formUpdateKey,
+  } = widgetConfig;
+
   const storeRef = useRef<FormStoreStore>();
 
   const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
 
-  const defaultValues = useMemo(
+  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(
     () => ({
-      ...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,
+      ...(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(defaultValues);
+    storeRef.current = createFormStore(
+      initialiseDefaultValues(
+        reactiveFormValues,
+        fromAmount,
+        toAmount,
+        toAddress,
+        hiddenToAddress,
+      ),
+    );
   }
 
+  useFormRef(storeRef.current, formRef);
+
   return (
     <FormStoreContext.Provider value={storeRef.current}>
       {children}
-      <FormUpdater defaultValues={defaultValues} />
+      <FormUpdater reactiveFormValues={reactiveFormValues} />
     </FormStoreContext.Provider>
   );
 };

package/stores/form/FormUpdater.tsx

@@ -1,21 +1,30 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useEffect, useRef } from 'react';
+import { useEffect } 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 { 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<{
-  defaultValues: Partial<DefaultValues>;
-}> = ({ defaultValues }) => {
-  const { fromChain, toChain } = useWidgetConfig();
+  reactiveFormValues: Partial<DefaultValues>;
+}> = ({ reactiveFormValues }) => {
+  const { fromChain, toChain, toAddress } = useWidgetConfig();
   const { account } = useAccount();
   const { chains } = useChains();
-  const { isTouched, resetField, setFieldValue, getFieldValues } =
-    useFieldActions();
-  const previousDefaultValues = useRef(defaultValues);
+  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 =
@@ -50,21 +59,42 @@ export const FormUpdater: React.FC<{
   // 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;
+    if (reactiveFormValues.toAddress) {
+      setSendToWallet(true);
+    }
+
+    setSelectedBookmark(toAddress);
+
+    setUserAndDefaultValues(
+      accountForChainId(reactiveFormValues, account.chainId),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValues, getFieldValues, resetField, setFieldValue]);
+  }, [
+    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,6 +1,9 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import type { FormFieldNames } from '../form/types.js';
+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';
 
@@ -13,24 +16,71 @@ const formValueKeys: FormFieldNames[] = [
   '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 = values[index];
-      if (touchedFields[key] && value) {
+      const value = getFieldValues(key)[0];
+      if (isTouched(key) && value) {
         url.searchParams.set(key, value.toString());
-      } else if (url.searchParams.has(key) && !values[index]) {
+      } else if (url.searchParams.has(key) && !value) {
         url.searchParams.delete(key);
       }
     });
     url.searchParams.sort();
     window.history.replaceState(window.history.state, '', url);
-  }, [pathname, touchedFields, values]);
+  }, [pathname, touchedFields, values, isTouched, getFieldValues]);
 
   return null;
 };

package/stores/form/createFormStore.ts

@@ -94,6 +94,15 @@ export const createFormStore = (defaultValues?: DefaultValues) =>
           ),
         }));
       },
+      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) => {

package/stores/form/types.ts

@@ -2,15 +2,18 @@ import type { ContractCall } from '@lifi/sdk';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 
-export interface DefaultValues {
-  contractCalls?: ContractCall[];
-  fromAmount: string;
+export interface DefaultFieldValues {
   fromChain?: number;
   fromToken?: string;
-  toAddress?: string;
-  toAmount: string;
   toChain?: number;
   toToken?: string;
+  toAddress?: string;
+  fromAmount: string;
+  toAmount: string;
+}
+
+export interface DefaultValues extends DefaultFieldValues {
+  contractCalls?: ContractCall[];
   tokenSearchFilter: string;
 }
 
@@ -32,17 +35,17 @@ export type FormFieldArray<T extends FormFieldNames[]> = {
   [K in keyof T]: ExtractValueType<FormValues[T[K]]>;
 };
 
-export type TouchedFields = { [K in FormFieldNames]?: boolean };
+export type TouchedFields = { [key in FormFieldNames]?: boolean };
 
 type ValidationFn = (value: any) => Promise<boolean | string>;
 export interface ValidationProps {
   isValid: boolean;
   isValidating: boolean;
   errors: {
-    [K in FormFieldNames]?: string;
+    [key in FormFieldNames]?: string;
   };
   validation: {
-    [K in FormFieldNames]?: ValidationFn;
+    [key in FormFieldNames]?: ValidationFn;
   };
 }
 
@@ -58,7 +61,7 @@ export interface ValidationActions {
 export interface FormProps {
   defaultValues: FormValues;
   userValues: FormValues;
-  touchedFields: { [K in FormFieldNames]?: boolean };
+  touchedFields: { [key in FormFieldNames]?: boolean };
 }
 
 interface ResetOptions {
@@ -67,6 +70,7 @@ interface ResetOptions {
 
 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;
@@ -89,7 +93,7 @@ export type FormStoreStore = UseBoundStoreWithEqualityFn<
   StoreApi<FormValuesState>
 >;
 
-interface SetOptions {
+export interface SetOptions {
   isDirty?: boolean;
   isTouched?: boolean;
 }

package/stores/form/useFieldActions.ts

@@ -11,6 +11,7 @@ export const useFieldActions = () => {
       setAsTouched: store.setAsTouched,
       setDefaultValues: store.setDefaultValues,
       setFieldValue: store.setFieldValue,
+      setUserAndDefaultValues: store.setUserAndDefaultValues,
     }),
     shallow,
   );

package/stores/form/useFormRef.ts

@@ -0,0 +1,69 @@
+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/settings/types.ts

@@ -46,11 +46,9 @@ export interface SettingsState extends SettingsProps {
 
 export interface SendToWalletState {
   showSendToWallet: boolean;
-  showSendToWalletDirty: boolean;
 }
 
 export interface SendToWalletStore extends SendToWalletState {
-  toggleSendToWallet(): void;
   setSendToWallet(value: boolean): void;
 }
 

package/stores/settings/useSendToWalletStore.ts

@@ -5,16 +5,9 @@ import type { SendToWalletStore } from './types.js';
 export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
   (set) => ({
     showSendToWallet: false,
-    showSendToWalletDirty: false,
-    toggleSendToWallet: () =>
-      set((state) => ({
-        showSendToWallet: !state.showSendToWallet,
-        showSendToWalletDirty: true,
-      })),
     setSendToWallet: (value) =>
       set({
         showSendToWallet: value,
-        showSendToWalletDirty: true,
       }),
   }),
   Object.is,
@@ -23,7 +16,6 @@ export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
 export const useSendToWalletActions = () => {
   const actions = useSendToWalletStore(
     (store) => ({
-      toggleSendToWallet: store.toggleSendToWallet,
       setSendToWallet: store.setSendToWallet,
     }),
     shallow,

package/themes/createTheme.ts

@@ -63,7 +63,7 @@ export const createTheme = (
   const borderRadiusSecondary =
     widgetTheme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary;
 
-  const theme = createMuiTheme({
+  return createMuiTheme({
     container: widgetTheme.container,
     header: widgetTheme.header,
     navigation: {
@@ -409,6 +409,4 @@ export const createTheme = (
       },
     },
   });
-
-  return theme;
 };

package/types/widget.ts

@@ -3,6 +3,7 @@ import type {
   ChainType,
   ContractCall,
   Order,
+  RouteExtended,
   RouteOptions,
   SDKConfig,
   StaticToken,
@@ -21,11 +22,18 @@ import type {
   MetaMaskParameters,
   WalletConnectParameters,
 } from '@wagmi/connectors';
-import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type {
+  CSSProperties,
+  FC,
+  MutableRefObject,
+  ReactNode,
+  RefObject,
+} from 'react';
 import type {
   LanguageKey,
   LanguageResources,
 } from '../providers/I18nProvider/types.js';
+import type { DefaultFieldValues } from '../stores/form/types.js';
 
 export type WidgetVariant = 'compact' | 'wide' | 'drawer';
 export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel';
@@ -143,6 +151,10 @@ export interface WidgetFeeConfig {
    * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)
    */
   calculateFee?(params: CalculateFeeParams): Promise<number | undefined>;
+  /**
+   * @internal
+   */
+  _vcComponent: FC<{ route: RouteExtended }>;
 }
 
 export interface ToAddress {
@@ -182,6 +194,7 @@ export interface WidgetConfig {
   toAddresses?: ToAddress[];
   fromAmount?: number | string;
   toAmount?: number | string;
+  formUpdateKey?: string;
 
   contractCalls?: ContractCall[];
   contractComponent?: ReactNode;
@@ -228,7 +241,36 @@ export interface WidgetConfig {
     Partial<Record<'internal', string[]>>;
 }
 
-export interface WidgetConfigProps {
+export interface FormFieldOptions {
+  setUrlSearchParam: boolean;
+}
+
+export interface FieldValues
+  extends Omit<DefaultFieldValues, 'fromAmount' | 'toAmount' | 'toAddress'> {
+  fromAmount?: number | string;
+  toAmount?: number | string;
+  toAddress?: ToAddress | string;
+}
+
+export type FieldNames = keyof FieldValues;
+
+export type SetFieldValueFunction = <K extends FieldNames>(
+  key: K,
+  value: FieldValues[K],
+  options?: FormFieldOptions,
+) => void;
+
+export type FormState = {
+  setFieldValue: SetFieldValueFunction;
+};
+
+export type FormRef = MutableRefObject<FormState | null>;
+
+export interface FormRefProps {
+  formRef?: FormRef;
+}
+
+export interface WidgetConfigProps extends FormRefProps {
   config: WidgetConfig;
 }
 
@@ -238,7 +280,8 @@ export interface WidgetConfigPartialProps {
 
 export type WidgetProps = WidgetDrawerProps &
   WidgetConfig &
-  WidgetConfigPartialProps;
+  WidgetConfigPartialProps &
+  FormRefProps;
 
 export interface WidgetDrawerProps extends WidgetConfigPartialProps {
   elementRef?: RefObject<HTMLDivElement>;

package/utils/chainType.ts

@@ -1,10 +1,11 @@
-import { ChainId, ChainType, isSVMAddress, isUTXOAddress } from '@lifi/sdk';
+import { ChainId, ChainType } from '@lifi/sdk';
 import { isAddress as isEVMAddress } from 'viem';
+import { isSVMAddress } from './svm.js';
 
 const chainTypeAddressValidation = {
   [ChainType.EVM]: isEVMAddress,
   [ChainType.SVM]: isSVMAddress,
-  [ChainType.UTXO]: isUTXOAddress,
+  [ChainType.UTXO]: () => false,
 };
 
 export const getChainTypeFromAddress = (