feat: remove react hook form (#166)

.gitignore

@@ -2,15 +2,15 @@
 
 # dependencies
 **node_modules**
-**dist**
+dist/
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # production
-**build**
+build/
 
 # misc
 .DS_Store
@@ -37,4 +37,4 @@ yarn-error.log*
 # Swap the comments on the following lines if you wish to use zero-installs
 # Documentation here: https://yarnpkg.com/features/zero-installs
 # !.yarn/cache
-.pnp.*
+.pnp.*

packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx

@@ -1,7 +1,7 @@
 import { Web3Provider } from '@ethersproject/providers';
 import type { ChainId, TokenAmount } from '@lifi/sdk';
 import type { NFTProps } from '@lifi/widget';
-import { FormKey, useAccount, useWatch } from '@lifi/widget';
+import { useAccount, useFieldValues } from '@lifi/widget';
 import { Seaport } from '@opensea/seaport-js';
 import { useQuery } from '@tanstack/react-query';
 import type { Connector } from 'wagmi';
@@ -15,9 +15,7 @@ export const useOpenSeaFulfillment = (
   tokenId: string | number,
 ) => {
   const { account } = useAccount();
-  const recipientAddress = useWatch({
-    name: FormKey.ToAddress,
-  });
+  const [recipientAddress] = useFieldValues('toAddress');
   const { data: order, isLoading: isOrderLoading } = useOpenSeaOrder(
     network,
     contractAddress,

packages/widget/package.json

@@ -72,7 +72,6 @@
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.49.0",
     "react-i18next": "^13.5.0",
     "react-intersection-observer": "^9.5.3",
     "react-router-dom": "^6.20.1",

packages/widget/src/AppProvider.tsx

@@ -4,15 +4,13 @@ import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
 import {
-  FormProvider,
   I18nProvider,
   ThemeProvider,
-  URLSearchParamsBuilder,
   WalletProvider,
   WidgetProvider,
   useWidgetConfig,
 } from './providers';
-import { StoreProvider } from './stores';
+import { StoreProvider, URLSearchParamsBuilder } from './stores';
 import type { WidgetConfigProps } from './types';
 
 export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
@@ -25,11 +23,9 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
         <ThemeProvider>
           <I18nProvider>
             <WalletProvider>
-              <FormProvider>
-                <StoreProvider config={config}>
-                  <AppRouter>{children}</AppRouter>
-                </StoreProvider>
-              </FormProvider>
+              <StoreProvider config={config}>
+                <AppRouter>{children}</AppRouter>
+              </StoreProvider>
             </WalletProvider>
           </I18nProvider>
         </ThemeProvider>

packages/widget/src/components/AmountInput/AmountInput.tsx

@@ -2,11 +2,11 @@ import type { Token } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { ChangeEvent, ReactNode } from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { useController, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import type { FormTypeProps } from '../../stores';
+import { FormKeyHelper } from '../../stores';
+import { useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
 import { fitInputText, formatInputAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
@@ -19,18 +19,19 @@ import {
 import { AmountInputEndAdornment } from './AmountInputEndAdornment';
 import { AmountInputStartAdornment } from './AmountInputStartAdornment';
 import { FormPriceHelperText } from './FormPriceHelperText';
+import { useFieldController, useFieldValues } from '../../stores';
 
 export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
   formType,
   ...props
 }) => {
   const { disabledUI } = useWidgetConfig();
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType),
+  );
+
   const { token } = useToken(chainId, tokenAddress);
   const disabled = disabledUI?.includes(DisabledUI.FromAmount);
   return (
@@ -68,11 +69,8 @@ export const AmountInputBase: React.FC<
 }) => {
   const { t } = useTranslation();
   const amountKey = FormKeyHelper.getAmountKey(formType);
-  const {
-    field: { onChange, onBlur, value },
-  } = useController({
-    name: amountKey,
-  });
+  const { onChange, onBlur, value } = useFieldController({ name: amountKey });
+
   const ref = useRef<HTMLInputElement>(null);
 
   const handleChange = (

packages/widget/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,26 +1,24 @@
 import { InputAdornment, Skeleton } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
 import {
   useAvailableChains,
   useGasRecommendation,
   useTokenAddressBalance,
 } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
+import type { FormTypeProps } from '../../stores';
 import { Button } from './AmountInputAdornment.style';
+import { useFieldActions, useFieldValues, FormKeyHelper } from '../../stores';
 
 export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   const { t } = useTranslation();
-  const { setValue } = useFormContext();
   const { getChainById } = useAvailableChains();
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
+  const { setFieldValue } = useFieldActions();
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType),
+  );
 
   // We get gas recommendations for the source chain to make sure that after pressing the Max button
   // the user will have enough funds remaining to cover gas costs
@@ -43,11 +41,11 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
       }
     }
 
-    setValue(
+    setFieldValue(
       FormKeyHelper.getAmountKey(formType),
       maxAmount && token ? formatUnits(maxAmount, token.decimals) : '',
       {
-        shouldTouch: true,
+        isTouched: true,
       },
     );
   };

packages/widget/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -1,18 +1,15 @@
-import { useWatch } from 'react-hook-form';
 import { useChain, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
+import type { FormTypeProps } from '../../stores';
 import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+import { useFieldValues, FormKeyHelper } from '../../stores';
 
 export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
   formType,
 }) => {
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType),
+  );
 
   const { chain } = useChain(chainId);
   const { token } = useToken(chainId, tokenAddress);

packages/widget/src/components/AmountInput/FormPriceHelperText.tsx

@@ -1,20 +1,16 @@
 import type { TokenAmount } from '@lifi/sdk';
 import { FormHelperText, Skeleton, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
+import type { FormTypeProps } from '../../stores';
 import { formatTokenAmount, formatTokenPrice } from '../../utils';
+import { useFieldValues, FormKeyHelper } from '../../stores';
 
 export const FormPriceHelperText: React.FC<FormTypeProps> = ({ formType }) => {
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
-
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType),
+  );
   const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
 
   return (
@@ -35,9 +31,7 @@ export const FormPriceHelperTextBase: React.FC<
   }
 > = ({ formType, isLoading, tokenAddress, token }) => {
   const { t } = useTranslation();
-  const amount = useWatch({
-    name: FormKeyHelper.getAmountKey(formType),
-  });
+  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
 
   const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
 

packages/widget/src/components/ChainSelect/ChainSelect.tsx

@@ -2,11 +2,9 @@
 import type { EVMChain } from '@lifi/sdk';
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
-import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores';
+import type { FormTypeProps } from '../../stores';
+import { maxChainToOrder, useFieldValues, FormKeyHelper } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ChainCard, ChainContainer } from './ChainSelect.style';
 import { useChainSelect } from './useChainSelect';
@@ -21,9 +19,8 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
     setChainOrder,
     setCurrentChain,
   } = useChainSelect(formType);
-  const [chainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
+
+  const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
 
   useEffect(() => {
     const hasChainInOrderedList = chainOrder.includes(chainId);

packages/widget/src/components/ChainSelect/useChainSelect.ts

@@ -1,18 +1,21 @@
 import type { EVMChain } from '@lifi/sdk';
-import { useController, useFormContext } from 'react-hook-form';
 import { useChains, useSwapOnly } from '../../hooks';
-import type { FormType } from '../../providers';
-import { FormKey, FormKeyHelper, useWidgetConfig } from '../../providers';
-import { useChainOrder } from '../../stores';
+import type { FormType } from '../../stores';
+import { useWidgetConfig } from '../../providers';
+import {
+  useChainOrder,
+  useFieldActions,
+  useFieldController,
+  FormKeyHelper,
+} from '../../stores';
 import { RequiredUI } from '../../types';
 
 export const useChainSelect = (formType: FormType) => {
   const { requiredUI } = useWidgetConfig();
   const chainKey = FormKeyHelper.getChainKey(formType);
-  const {
-    field: { onChange, onBlur },
-  } = useController({ name: chainKey });
-  const { setValue, getValues } = useFormContext();
+  const { onChange, onBlur } = useFieldController({ name: chainKey });
+
+  const { setFieldValue, getFieldValues } = useFieldActions();
   const { chains, isLoading, getChainById } = useChains();
   const [chainOrder, setChainOrder] = useChainOrder();
   const swapOnly = useSwapOnly();
@@ -32,18 +35,15 @@ export const useChainSelect = (formType: FormType) => {
     onChange(chainId);
     onBlur();
     if (swapOnly) {
-      setValue(FormKeyHelper.getChainKey('to'), chainId, {
-        shouldTouch: true,
+      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+        isTouched: true,
       });
     }
-    setValue(FormKeyHelper.getTokenKey(formType), '');
-    setValue(FormKeyHelper.getAmountKey(formType), '');
-    setValue(FormKey.TokenSearchFilter, '');
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '');
+    setFieldValue(FormKeyHelper.getAmountKey(formType), '');
+    setFieldValue('tokenSearchFilter', '');
 
-    const [fromChainId, toChainId] = getValues([
-      FormKey.FromChain,
-      FormKey.ToChain,
-    ]);
+    const [fromChainId, toChainId] = getFieldValues('fromChain', 'toChain');
 
     const fromChain = getChainById(fromChainId);
     const toChain = getChainById(toChainId);
@@ -61,7 +61,7 @@ export const useChainSelect = (formType: FormType) => {
     // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
     // but it keeps toAddress value set for the previous chain pair.
     if (!requiredToAddress) {
-      setValue(FormKey.ToAddress, '');
+      setFieldValue('toAddress', '');
     }
     setChainOrder(chainId);
   };

packages/widget/src/components/Header/NavigationTabs.tsx

@@ -1,7 +1,5 @@
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FormKey } from '../../providers';
-import { useSplitSubvariantStore } from '../../stores';
+import { useSplitSubvariantStore, useFieldActions } from '../../stores';
 import { HeaderAppBar, SplitTabs } from './Header.style';
 import { Tab } from '../Tabs';
 
@@ -11,11 +9,12 @@ export const NavigationTabs = () => {
     state.state,
     state.setState,
   ]);
-  const { setValue } = useFormContext();
+
+  const { setFieldValue } = useFieldActions();
   const handleChange = (_: React.SyntheticEvent, value: number) => {
-    setValue(FormKey.FromAmount, '');
-    setValue(FormKey.FromToken, '');
-    setValue(FormKey.ToToken, '');
+    setFieldValue('fromAmount', '');
+    setFieldValue('fromToken', '');
+    setFieldValue('toToken', '');
     setState(value === 0 ? 'swap' : 'bridge');
   };