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

package/src/providers/FormProvider/FormUpdater.tsx

@@ -1,86 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import type { FormValues } from '.';
-import { FormKey } from '.';
-import { useAccount } from '../../hooks';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
-
-export const FormUpdater: React.FC<{
-  defaultValues: Partial<FormValues>;
-}> = ({ defaultValues }) => {
-  const { fromChain, toChain, chains } = useWidgetConfig();
-  const { account } = useAccount();
-  const {
-    setValue,
-    getValues,
-    getFieldState,
-    resetField,
-    // Subscription to touchedFields is required by getFieldState to work
-    formState: { touchedFields },
-  } = useFormContext();
-
-  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;
-    }
-
-    const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
-    const { isTouched: isToChainTouched } = getFieldState(FormKey.ToChain);
-    const { isTouched: isFromTokenTouched } = getFieldState(FormKey.FromToken);
-    const { isTouched: isToTokenTouched } = getFieldState(FormKey.ToToken);
-    const { isTouched: isFromAmountTouched } = getFieldState(
-      FormKey.FromAmount,
-    );
-
-    if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
-      resetField(FormKey.FromChain, { defaultValue: account.chainId });
-      setValue(FormKey.FromChain, account.chainId);
-      setValue(FormKey.FromToken, '');
-      if (isFromAmountTouched) {
-        setValue(FormKey.FromAmount, '');
-      }
-    }
-    if (!toChain && !isToChainTouched && !isToTokenTouched) {
-      resetField(FormKey.ToChain, { defaultValue: account.chainId });
-      setValue(FormKey.ToChain, account.chainId);
-      setValue(FormKey.ToToken, '');
-    }
-  }, [
-    account.chainId,
-    account.isConnected,
-    chains,
-    fromChain,
-    getFieldState,
-    getValues,
-    resetField,
-    setValue,
-    toChain,
-  ]);
-
-  // Makes widget config options reactive to changes
-  // Acts similar to values property from useForm, but includes additional logic for chains
-  useEffect(() => {
-    (Object.keys(defaultValues) as FormKey[]).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 || ''
-            : '');
-        setValue(key, value);
-        resetField(key, { defaultValue: value });
-      }
-    });
-    previousDefaultValues.current = defaultValues;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValues, getValues, resetField, setValue]);
-
-  return null;
-};

package/src/providers/FormProvider/URLSearchParamsBuilder.tsx

@@ -1,37 +0,0 @@
-import { useEffect } from 'react';
-import { useFormState, useWatch } from 'react-hook-form';
-import { useLocation } from 'react-router-dom';
-import { FormKey } from './types';
-
-const formValueKeys = [
-  FormKey.FromAmount,
-  FormKey.FromChain,
-  FormKey.FromToken,
-  FormKey.ToAddress,
-  FormKey.ToChain,
-  FormKey.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 });
-
-  useEffect(() => {
-    const url = new URL(window.location as any);
-    formValueKeys.forEach((key, index) => {
-      if (touchedFields[key] && values[index]) {
-        url.searchParams.set(key, values[index]);
-      } else if (url.searchParams.has(key) && !values[index]) {
-        url.searchParams.delete(key);
-      }
-    });
-    url.searchParams.sort();
-    window.history.replaceState(window.history.state, '', url);
-  }, [pathname, touchedFields, values]);
-
-  return null;
-};

package/src/providers/FormProvider/index.ts

@@ -1,3 +0,0 @@
-export * from './FormProvider';
-export * from './URLSearchParamsBuilder';
-export * from './types';

package/src/providers/FormProvider/types.ts

@@ -1,44 +0,0 @@
-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 FormValues = {
-  [FormKey.ContractOutputsToken]: string;
-  [FormKey.FromAmount]: string;
-  [FormKey.FromChain]: number;
-  [FormKey.FromToken]: string;
-  [FormKey.ToAddress]: string;
-  [FormKey.ToAmount]: string;
-  [FormKey.ToChain]: number;
-  [FormKey.ToContractAddress]: string;
-  [FormKey.ToContractCallData]: string;
-  [FormKey.ToContractGasLimit]: string;
-  [FormKey.ToToken]: string;
-  [FormKey.TokenSearchFilter]: string;
-};
-
-export type FormType = 'from' | 'to';
-
-export const FormKeyHelper = {
-  getChainKey: (formType: FormType): 'fromChain' | 'toChain' =>
-    `${formType}Chain`,
-  getTokenKey: (formType: FormType): 'fromToken' | 'toToken' =>
-    `${formType}Token`,
-  getAmountKey: (formType: FormType): 'fromAmount' | 'toAmount' =>
-    `${formType}Amount`,
-};
-
-export interface FormTypeProps {
-  formType: FormType;
-}

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -1,65 +0,0 @@
-import { createInstance, i18n } from 'i18next';
-import { useMemo } from 'react';
-import { I18nextProvider, initReactI18next } from 'react-i18next';
-import * as supportedLanguages from '../../i18n';
-import { useSettings } from '../../stores';
-import { deepMerge } from '../../utils';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
-import type { LanguageKey, LanguageTranslationResources } from './types';
-
-export const I18nProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
-  const { languageResources, languages } = useWidgetConfig();
-  const { language } = useSettings(['language']);
-
-  const i18n = useMemo(() => {
-    let resources = (Object.keys(supportedLanguages) as LanguageKey[])
-      .filter((lng) => isItemAllowed(lng, languages))
-      .reduce((resources, lng) => {
-        resources[lng] = {
-          translation: languageResources?.[lng]
-            ? (deepMerge(
-                supportedLanguages[lng],
-                languageResources[lng],
-              ) as any)
-            : supportedLanguages[lng],
-        };
-        return resources;
-      }, {} as LanguageTranslationResources);
-
-    if (languageResources) {
-      resources = Object.keys(languageResources).reduce((resources, lng) => {
-        if (!resources[lng]) {
-          resources[lng] = {
-            translation: languageResources[lng as LanguageKey]!,
-          };
-        }
-        return resources;
-      }, resources);
-    }
-
-    let i18n = createInstance({
-      lng: languages?.default || language,
-      fallbackLng: resources.en
-        ? 'en'
-        : languages?.default ||
-          languages?.allow?.[0] ||
-          Object.keys(resources)?.[0],
-      lowerCaseLng: true,
-      interpolation: {
-        escapeValue: false,
-      },
-      resources,
-      detection: {
-        caches: [],
-      },
-    });
-
-    i18n.use(initReactI18next).init();
-
-    return i18n;
-  }, [language, languageResources, languages]);
-
-  return <I18nextProvider i18n={i18n as i18n}>{children}</I18nextProvider>;
-};

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,43 +0,0 @@
-import type { PaletteMode } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { useEffect, useMemo, useState } from 'react';
-import { createTheme } from '../../config/theme';
-import { useAppearance } from '../../stores';
-import { useWidgetConfig } from '../WidgetProvider';
-
-export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig();
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [appearance, setAppearance] = useAppearance();
-  const [mode, setMode] = useState<PaletteMode>(
-    colorSchemeMode ?? appearance === 'auto'
-      ? prefersDarkMode
-        ? 'dark'
-        : 'light'
-      : appearance,
-  );
-
-  useEffect(() => {
-    if (appearance === 'auto') {
-      setMode(prefersDarkMode ? 'dark' : 'light');
-    } else {
-      setMode(appearance);
-    }
-  }, [appearance, prefersDarkMode]);
-
-  useEffect(() => {
-    if (colorSchemeMode) {
-      setAppearance(colorSchemeMode);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colorSchemeMode]);
-
-  const theme = useMemo(
-    () => createTheme(mode, themeConfig),
-    [mode, themeConfig],
-  );
-  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
-};

package/src/providers/index.ts

@@ -1,5 +0,0 @@
-export * from './FormProvider';
-export * from './I18nProvider';
-export * from './ThemeProvider';
-export * from './WalletProvider';
-export * from './WidgetProvider';

package/src/stores/StoreProvider.tsx

@@ -1,29 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { WidgetConfigProps } from '../types';
-import { ChainOrderStoreProvider } from './chains';
-import { HeaderStoreProvider } from './header';
-import { RouteExecutionStoreProvider } from './routes';
-import { SplitSubvariantStoreProvider } from './settings';
-
-export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
-  children,
-  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>
-  );
-};

package/src/stores/chains/ChainOrderStore.tsx

@@ -1,79 +0,0 @@
-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';
-
-export type ChainOrderStore = UseBoundStoreWithEqualityFn<
-  StoreApi<ChainOrderState>
->;
-
-export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
-  null,
-);
-
-export function ChainOrderStoreProvider({
-  children,
-  ...props
-}: PersistStoreProviderProps) {
-  const storeRef = useRef<ChainOrderStore>();
-  const { chains: filteredChains } = useChains();
-  const { setValue, getValues } = useFormContext();
-
-  if (!storeRef.current) {
-    storeRef.current = createChainOrderStore(props);
-  }
-
-  useEffect(() => {
-    if (filteredChains) {
-      const chainOrder = storeRef.current
-        ?.getState()
-        .initializeChains(filteredChains.map((chain) => chain.id));
-      if (chainOrder) {
-        const [fromChainValue, toChainValue] = getValues([
-          FormKey.FromChain,
-          FormKey.ToChain,
-        ]);
-        if (!fromChainValue) {
-          setValue(FormKey.FromChain, chainOrder[0]);
-        }
-        if (!toChainValue) {
-          setValue(FormKey.ToChain, chainOrder[0]);
-        }
-      }
-    }
-  }, [filteredChains, getValues, setValue]);
-
-  return (
-    <ChainOrderStoreContext.Provider value={storeRef.current}>
-      {children}
-    </ChainOrderStoreContext.Provider>
-  );
-}
-
-export function useChainOrderStore<T>(
-  selector: (state: ChainOrderState) => T,
-  equalityFn?: (left: T, right: T) => boolean,
-): T {
-  const useStore = useContext(ChainOrderStoreContext);
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
-    );
-  }
-  return useStore(selector, equalityFn);
-}
-
-export function useChainOrderStoreContext() {
-  const useStore = useContext(ChainOrderStoreContext);
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
-    );
-  }
-  return useStore;
-}

package/src/stores/index.ts

@@ -1,5 +0,0 @@
-export * from './StoreProvider';
-export * from './chains';
-export * from './header';
-export * from './routes';
-export * from './settings';