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

package/stores/StoreProvider.tsx

@@ -11,22 +11,22 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   config,
 }) => {
   return (
-    <FormStoreProvider>
-      <SplitSubvariantStoreProvider
-        state={
-          config.subvariant === 'split'
-            ? config.subvariantOptions || 'swap'
-            : undefined
-        }
-      >
-        <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <FormStoreProvider>
           <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
             <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
               {children}
             </RouteExecutionStoreProvider>
           </ChainOrderStoreProvider>
-        </HeaderStoreProvider>
-      </SplitSubvariantStoreProvider>
-    </FormStoreProvider>
+        </FormStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
   );
 };

package/stores/chains/ChainOrderStore.tsx

@@ -2,10 +2,13 @@ import { createContext, useContext, useEffect, useRef } from 'react';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 import { useChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { isItemAllowed } from '../../utils';
+import type { FormType } from '../form';
+import { useFieldActions } from '../form';
 import type { PersistStoreProviderProps } from '../types';
 import { createChainOrderStore } from './createChainOrderStore';
 import type { ChainOrderState } from './types';
-import { useFieldActions } from '../../stores';
 
 export type ChainOrderStore = UseBoundStoreWithEqualityFn<
   StoreApi<ChainOrderState>
@@ -19,8 +22,9 @@ export function ChainOrderStoreProvider({
   children,
   ...props
 }: PersistStoreProviderProps) {
+  const { chains: configChains } = useWidgetConfig();
   const storeRef = useRef<ChainOrderStore>();
-  const { chains: filteredChains } = useChains();
+  const { chains } = useChains();
   const { setFieldValue, getFieldValues } = useFieldActions();
 
   if (!storeRef.current) {
@@ -28,24 +32,24 @@ export function ChainOrderStoreProvider({
   }
 
   useEffect(() => {
-    if (filteredChains) {
-      const chainOrder = storeRef.current
-        ?.getState()
-        .initializeChains(filteredChains.map((chain) => chain.id));
-      if (chainOrder) {
-        const [fromChainValue, toChainValue] = getFieldValues(
-          'fromChain',
-          'toChain',
+    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 (!fromChainValue) {
-          setFieldValue('fromChain', chainOrder[0]);
+        if (chainOrder) {
+          const [chainValue] = getFieldValues(`${key}Chain`);
+          if (!chainValue) {
+            setFieldValue(`${key}Chain`, chainOrder[0]);
+          }
         }
-        if (!toChainValue) {
-          setFieldValue('toChain', chainOrder[0]);
-        }
-      }
+      });
     }
-  }, [filteredChains, getFieldValues, setFieldValue]);
+  }, [chains, configChains, getFieldValues, setFieldValue]);
 
   return (
     <ChainOrderStoreContext.Provider value={storeRef.current}>

package/stores/chains/createChainOrderStore.ts

@@ -5,16 +5,20 @@ import type { PersistStoreProps } from '../types';
 import type { ChainOrderState } from './types';
 
 export const maxChainToOrder = 9;
+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(
@@ -22,8 +26,14 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
             );
             if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
               return {
-                availableChains: chainIds,
-                chainOrder,
+                availableChains: {
+                  ...state.availableChains,
+                  [type]: chainIds,
+                },
+                chainOrder: {
+                  ...state.chainOrder,
+                  [type]: chainOrder,
+                },
               };
             }
             const chainsToAddLength = maxChainToOrder - chainOrder.length;
@@ -31,35 +41,44 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
               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) {
               chainOrder.pop();
             }
             return {
-              chainOrder,
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
             };
           });
         },
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 0,
+        version: 1,
         partialize: (state) => ({ chainOrder: state.chainOrder }),
       },
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,

package/stores/chains/types.ts

@@ -1,9 +1,17 @@
+import type { FormType } from '../form';
+
 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 type { FormType } from '../form';
 import { useChainOrderStore } from './ChainOrderStore';
 
-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

@@ -37,16 +37,15 @@ export const FormStoreProvider: React.FC<PropsWithChildren> = ({
 
   return (
     <FormStoreContext.Provider value={storeRef.current}>
-      <FormUpdater defaultValues={defaultValues} />
-      {children}
+      <FormUpdater defaultValues={defaultValues}>{children}</FormUpdater>
     </FormStoreContext.Provider>
   );
 };
 
-export const useFormStore = (
-  selector: (store: FormValuesState) => any,
-  equalityFunction = shallow,
-) => {
+export function useFormStore<T>(
+  selector: (state: FormValuesState) => T,
+  equalityFn = shallow,
+): T {
   const useStore = useContext(FormStoreContext);
 
   if (!useStore) {
@@ -55,5 +54,5 @@ export const useFormStore = (
     );
   }
 
-  return useStore(selector, equalityFunction);
-};
+  return useStore(selector, equalityFn);
+}

package/stores/form/FormUpdater.tsx

@@ -1,13 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import type { PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 import { useAccount } from '../../hooks';
-import { isItemAllowed, useWidgetConfig } from '../../providers';
+import { useWidgetConfig } from '../../providers';
+import { isItemAllowed } from '../../utils';
 import type { DefaultValues, FormFieldNames } from './types';
 import { useFieldActions } from './useFieldActions';
 
-export const FormUpdater: React.FC<{
-  defaultValues: Partial<DefaultValues>;
-}> = ({ defaultValues }) => {
+export const FormUpdater: React.FC<
+  PropsWithChildren<{
+    defaultValues: Partial<DefaultValues>;
+  }>
+> = ({ defaultValues, children }) => {
   const { fromChain, toChain, chains } = useWidgetConfig();
   const { account } = useAccount();
   const { isTouched, resetField, setFieldValue, getFieldValues } =
@@ -18,6 +22,7 @@ export const FormUpdater: React.FC<{
   useEffect(() => {
     const chainAllowed =
       account.chainId && isItemAllowed(account.chainId, chains);
+
     if (!account.isConnected || !account.chainId || !chainAllowed) {
       return;
     }
@@ -63,5 +68,5 @@ export const FormUpdater: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValues, getFieldValues, resetField, setFieldValue]);
 
-  return null;
+  return children;
 };

package/stores/form/URLSearchParamsBuilder.tsx

@@ -20,8 +20,9 @@ export const URLSearchParamsBuilder = () => {
   useEffect(() => {
     const url = new URL(window.location as any);
     formValueKeys.forEach((key, index) => {
-      if (touchedFields[key] && values[index]) {
-        url.searchParams.set(key, values[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);
       }

package/stores/form/createFormStore.ts

@@ -2,6 +2,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 
 import type {
   DefaultValues,
+  FormFieldArray,
   FormFieldNames,
   FormValueControl,
   FormValues,
@@ -175,8 +176,8 @@ export const createFormStore = (defaultValues?: DefaultValues) =>
           touchedFields,
         }));
       },
-      getFieldValues: (...names) =>
-        names.map((name) => get().userValues[name]?.value),
+      getFieldValues: <T extends FormFieldNames[]>(...names: T) =>
+        names.map((name) => get().userValues[name]?.value) as FormFieldArray<T>,
       addFieldValidation: (name, validationFn) => {
         set((state) => ({
           validation: {

package/stores/form/types.ts

@@ -2,18 +2,18 @@ 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;
+  toAddress: string;
+  toAmount: string;
+  toChain?: number;
+  toContractAddress: string;
+  toContractCallData: string;
+  toContractGasLimit: string;
+  toToken?: string;
+  tokenSearchFilter: string;
 }
 
 export type GenericFormValue = string | number | undefined;
@@ -24,21 +24,27 @@ export interface FormValueControl<T> {
 }
 
 export interface FormValues {
-  toAddress: FormValueControl<string>;
-  tokenSearchFilter: FormValueControl<string>;
   contractOutputsToken: FormValueControl<string>;
+  fromAmount: FormValueControl<string>;
+  fromChain?: FormValueControl<number | undefined>;
+  fromToken?: FormValueControl<string | undefined>;
+  toAddress: FormValueControl<string>;
+  toAmount: FormValueControl<string>;
+  toChain?: FormValueControl<number | undefined>;
   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>;
+  tokenSearchFilter: FormValueControl<string>;
 }
 
 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 };
 
@@ -62,10 +68,6 @@ export interface ValidationActions {
   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;
@@ -87,12 +89,11 @@ export interface FormActions {
     value: GenericFormValue,
     options?: SetOptions,
   ) => void;
-  getFieldValues: (...names: FormFieldNames[]) => Array<any>;
+  getFieldValues: <T extends FormFieldNames[]>(
+    ...names: T
+  ) => FormFieldArray<T>;
 }
 
-export type FormActionNames = keyof FormActions;
-export type FormActionFunctions = Array<FormActions[FormActionNames]>;
-
 export type FormValuesState = FormProps &
   FormActions &
   ValidationProps &

package/stores/form/useFieldActions.ts

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

package/stores/form/useFieldValues.ts

@@ -1,10 +1,12 @@
-import type { FormFieldNames } from './types';
-import { useFormStore } from './FormStore';
 import { shallow } from 'zustand/shallow';
+import { useFormStore } from './FormStore';
+import type { FormFieldArray, FormFieldNames } from './types';
 
-export const useFieldValues = (...names: FormFieldNames[]) => {
+// 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),
+    (store) =>
+      names.map((name) => store.userValues[name]!.value) as FormFieldArray<T>,
     shallow,
   );
 

package/stores/form/useValidationActions.ts

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

package/stores/routes/useExecutingRoutesIds.ts

@@ -1,15 +1,18 @@
 import { shallow } from 'zustand/shallow';
+import { useAccount } from '../../hooks/useAccount';
 import { useRouteExecutionStore } from './RouteExecutionStore';
 import type { RouteExecution } from './types';
 import { RouteExecutionStatus } from './types';
 
-export const useExecutingRoutesIds = (address?: string) => {
+export const useExecutingRoutesIds = () => {
+  const { accounts } = useAccount();
+  const accountAddresses = accounts.map((account) => account.address);
   return useRouteExecutionStore(
     (state) =>
       (Object.values(state.routes) as RouteExecution[])
         .filter(
           (item) =>
-            item.route.fromAddress === address &&
+            accountAddresses.includes(item.route.fromAddress) &&
             (item.status === RouteExecutionStatus.Pending ||
               item.status === RouteExecutionStatus.Failed),
         )

package/stores/settings/useSettingsStore.ts

@@ -5,12 +5,14 @@ import type { WidgetConfig } from '../../types';
 import type { SettingsProps, SettingsState } from './types';
 import { SettingsToolTypes } from './types';
 
+export const defaultSlippage = '0.5';
+
 export const defaultConfigurableSettings: Pick<
   SettingsState,
   'routePriority' | 'slippage' | 'gasPrice'
 > = {
   routePriority: 'RECOMMENDED',
-  slippage: '0.5',
+  slippage: defaultSlippage,
   gasPrice: 'normal',
 };
 

package/types/widget.ts

@@ -1,8 +1,9 @@
 import type {
   BaseToken,
+  ChainType,
   Order,
   RouteOptions,
-  SDKOptions,
+  SDKConfig,
   StaticToken,
   Token,
 } from '@lifi/sdk';
@@ -14,6 +15,10 @@ import type {
   Theme,
 } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
+import type {
+  CoinbaseWalletParameters,
+  WalletConnectParameters,
+} from '@wagmi/connectors';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
 import type { SplitSubvariantOptions } from '../stores';
@@ -33,6 +38,7 @@ export type DisabledUIType = `${DisabledUI}`;
 export enum HiddenUI {
   Appearance = 'appearance',
   DrawerButton = 'drawerButton',
+  DrawerCloseButton = 'drawerCloseButton',
   History = 'history',
   Language = 'language',
   PoweredBy = 'poweredBy',
@@ -58,13 +64,20 @@ export type ThemeConfig = {
   components?: Pick<Components<Omit<Theme, 'components'>>, 'MuiAvatar'>;
 };
 
-export interface WidgetWalletManagement {
-  connect(): Promise<void>;
+export interface WidgetWalletConfig {
+  onConnect(): void;
+  walletConnect?: WalletConnectParameters;
+  coinbase?: CoinbaseWalletParameters;
+}
+
+export interface AllowDeny<T> {
+  allow?: T[];
+  deny?: T[];
 }
 
-export interface WidgetSDKOptions
+export interface WidgetSDKConfig
   extends Omit<
-    SDKOptions,
+    SDKConfig,
     | 'apiKey'
     | 'disableVersionCheck'
     | 'integrator'
@@ -125,41 +138,36 @@ export interface WidgetConfig {
   requiredUI?: RequiredUIType[];
   useRecommendedRoute?: boolean;
 
-  walletManagement?: WidgetWalletManagement;
-  sdkConfig?: WidgetSDKOptions;
+  walletConfig?: WidgetWalletConfig;
+  sdkConfig?: WidgetSDKConfig;
 
   buildUrl?: boolean;
   keyPrefix?: string;
 
-  bridges?: {
-    allow?: string[];
-    deny?: string[];
-  };
-  exchanges?: {
-    allow?: string[];
-    deny?: string[];
-  };
+  bridges?: AllowDeny<string>;
+  exchanges?: AllowDeny<string>;
   chains?: {
-    allow?: number[];
-    deny?: number[];
-  };
+    from?: AllowDeny<number>;
+    to?: AllowDeny<number>;
+    types?: AllowDeny<ChainType>;
+  } & AllowDeny<number>;
   tokens?: {
     featured?: StaticToken[];
     include?: Token[];
-    allow?: BaseToken[];
-    deny?: BaseToken[];
-  };
+  } & AllowDeny<BaseToken>;
   languages?: {
     default?: LanguageKey;
-    allow?: LanguageKey[];
-    deny?: LanguageKey[];
-  };
+  } & AllowDeny<LanguageKey>;
   languageResources?: LanguageResources;
 }
 
 export type WidgetDrawerProps = {
   elementRef?: RefObject<HTMLDivElement>;
   open?: boolean;
+  /**
+   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
+   */
+  onClose?(): void;
 };
 
 export interface WidgetConfigProps {

package/utils/index.ts

@@ -5,6 +5,7 @@ export * from './enum';
 export * from './fees';
 export * from './format';
 export * from './input';
+export * from './item';
 export * from './navigationRoutes';
 export * from './svm';
 export * from './wallet';