@lifi/widget 3.6.0-alpha.5 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.6.0-alpha.5",
+  "version": "3.6.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,27 +34,27 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.3.0-alpha.3",
-    "@lifi/wallet-management": "^3.2.0-alpha.5",
+    "@lifi/sdk": "^3.2.3",
+    "@lifi/wallet-management": "^3.1.6",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.3",
-    "@tanstack/react-query": "^5.56.0",
-    "@tanstack/react-virtual": "^3.10.7",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-virtual": "^3.10.8",
     "i18next": "^23.15.1",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.0.2",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
     "uuid": "^10.0.0",
-    "viem": "^2.21.6",
-    "wagmi": "^2.12.11",
+    "viem": "^2.21.9",
+    "wagmi": "^2.12.12",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -6,28 +6,28 @@ import {
 } from '@lifi/wallet-management';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Connector } from 'wagmi';
-import { useConfig } from 'wagmi';
-import { connect, disconnect, getAccount } from 'wagmi/actions';
+import { useConnect, useDisconnect } from 'wagmi';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
-import { useLastConnectedAccount } from '../../hooks/useAccount.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { WidgetEvent } from '../../types/events.js';
 
 interface EVMListItemButtonProps {
+  connectedConnector?: Connector;
   connector: CreateConnectorFnExtended | Connector;
   onNotInstalled(connector: Connector): void;
 }
 
 export const EVMListItemButton = ({
+  connectedConnector,
   connector,
   onNotInstalled,
 }: EVMListItemButtonProps) => {
   const { navigateBack } = useNavigateBack();
   const emitter = useWidgetEvents();
-  const config = useConfig();
-  const { setLastConnectedAccount } = useLastConnectedAccount();
+  const { connectAsync } = useConnect();
+  const { disconnectAsync } = useDisconnect();
 
   const handleEVMConnect = async () => {
     const identityCheckPassed = await isWalletInstalledAsync(
@@ -37,17 +37,21 @@ export const EVMListItemButton = ({
       onNotInstalled(connector as Connector);
       return;
     }
-    const connectedAccount = getAccount(config);
-    if (connectedAccount.connector) {
-      await disconnect(config, { connector: connectedAccount.connector });
+    if (connectedConnector) {
+      await disconnectAsync({ connector: connectedConnector });
     }
-    const data = await connect(config, { connector });
-    setLastConnectedAccount(connector);
-    emitter.emit(WidgetEvent.WalletConnected, {
-      address: data.accounts[0],
-      chainId: data.chainId,
-      chainType: ChainType.EVM,
-    });
+    await connectAsync(
+      { connector },
+      {
+        onSuccess(data) {
+          emitter.emit(WidgetEvent.WalletConnected, {
+            address: data.accounts[0],
+            chainId: data.chainId,
+            chainType: ChainType.EVM,
+          });
+        },
+      },
+    );
     navigateBack();
   };
 

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -4,7 +4,6 @@ import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
-import { useLastConnectedAccount } from '../../hooks/useAccount.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { WidgetEvent } from '../../types/events.js';
@@ -17,7 +16,6 @@ export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
   const { navigateBack } = useNavigateBack();
   const emitter = useWidgetEvents();
   const { select, disconnect, connected } = useWallet();
-  const { setLastConnectedAccount } = useLastConnectedAccount();
 
   const connect = async () => {
     if (connected) {
@@ -27,7 +25,6 @@ export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
     // We use autoConnect on wallet selection
     // await solanaConnect();
     wallet.adapter.once('connect', (publicKey) => {
-      setLastConnectedAccount(wallet.adapter);
       emitter.emit(WidgetEvent.WalletConnected, {
         address: publicKey?.toString(),
         chainId: ChainId.SOL,

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,4 +1,3 @@
-import { ChainType } from '@lifi/sdk';
 import {
   Button,
   DialogActions,
@@ -10,6 +9,7 @@ import type { Wallet } from '@solana/wallet-adapter-react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { useHeader } from '../../hooks/useHeader.js';
@@ -17,11 +17,11 @@ import { useWallets } from '../../hooks/useWallets.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { EVMListItemButton } from './EVMListItemButton.js';
 import { SVMListItemButton } from './SVMListItemButton.js';
-import { UTXOListItemButton } from './UTXOListItemButton.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
   const { chains, walletConfig } = useWidgetConfig();
+  const account = useWagmiAccount();
   const [walletIdentity, setWalletIdentity] = useState<{
     show: boolean;
     connector?: Connector;
@@ -56,16 +56,11 @@ export const SelectWalletPage = () => {
         }}
       >
         {wallets?.map((connector) =>
-          (connector as Connector).type === ChainType.UTXO ? (
-            <UTXOListItemButton
-              key={(connector as Connector).id}
-              connector={connector as Connector}
-              onNotInstalled={handleNotInstalled}
-            />
-          ) : (connector as Connector).id ? (
+          (connector as Connector).id ? (
             <EVMListItemButton
               key={(connector as Connector).id}
               connector={connector as Connector}
+              connectedConnector={account.connector}
               onNotInstalled={handleNotInstalled}
             />
           ) : (

package/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -25,7 +25,7 @@ export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
 
   const openTransferIdInExplorer = () => {
     const txHash = getTxHash(transferId);
-    window.open(getTransactionLink(txHash), '_blank');
+    window.open(getTransactionLink({ txHash }), '_blank');
   };
 
   return (

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -85,6 +85,7 @@ export const StatusBottomSheetContent: React.FC<
     subvariantOptions,
     contractSecondaryComponent,
     contractCompactComponent,
+    feeConfig,
   } = useWidgetConfig();
   const { getChainById } = useAvailableChains();
 
@@ -251,6 +252,9 @@ export const StatusBottomSheetContent: React.FC<
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
     (contractCompactComponent || contractSecondaryComponent);
 
+  const VcComponent =
+    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined;
+
   return (
     <Box p={3} ref={ref}>
       {!showContractComponent ? (
@@ -296,6 +300,7 @@ export const StatusBottomSheetContent: React.FC<
       {secondaryMessage ? (
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
+      {VcComponent ? <VcComponent route={route} /> : null}
       <Box mt={2}>
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}

package/providers/I18nProvider/types.ts

@@ -12,14 +12,14 @@ export type LanguageResource = typeof languages.en;
 
 export type LanguageResources =
   | {
-      [K in LanguageKey]?: PartialResource<LanguageResource>;
+      [language in LanguageKey]?: PartialResource<LanguageResource>;
     }
   | {
       [language: string]: PartialResource<LanguageResource>;
     };
 
 export type LanguageTranslationResource = {
-  [N in 'translation']: PartialResource<LanguageResource>;
+  [namespace in 'translation']: PartialResource<LanguageResource>;
 };
 
 export type LanguageTranslationResources = {

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,24 +1,16 @@
 import type { SDKProvider } from '@lifi/sdk';
-import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk';
-import {
-  getConnectorClient as getBigmiConnectorClient,
-  useConfig as useBigmiConfig,
-} from '@lifi/wallet-management';
+import { ChainType, EVM, Solana, config } from '@lifi/sdk';
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
-import {
-  getConnectorClient as getWagmiConnectorClient,
-  switchChain,
-} from '@wagmi/core';
+import { getWalletClient, switchChain } from '@wagmi/core';
 import { useEffect } from 'react';
-import { useConfig as useWagmiConfig } from 'wagmi';
+import { useConfig } from 'wagmi';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig();
   const { wallet } = useWallet();
-  const wagmiConfig = useWagmiConfig();
-  const bigmiConfig = useBigmiConfig();
+  const wagmiConfig = useConfig();
 
   useEffect(() => {
     // Configure SDK Providers
@@ -29,16 +21,13 @@ export const SDKProviders = () => {
     const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.SVM,
     );
-    const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
-      (provider) => provider.type === ChainType.UTXO,
-    );
     if (!hasConfiguredEVMProvider) {
       providers.push(
         EVM({
-          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
+          getWalletClient: () => getWalletClient(wagmiConfig),
           switchChain: async (chainId: number) => {
             const chain = await switchChain(wagmiConfig, { chainId });
-            return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id });
+            return getWalletClient(wagmiConfig, { chainId: chain.id });
           },
         }),
       );
@@ -52,18 +41,11 @@ export const SDKProviders = () => {
         }),
       );
     }
-    if (!hasConfiguredUTXOProvider) {
-      providers.push(
-        UTXO({
-          getWalletClient: () => getBigmiConnectorClient(bigmiConfig),
-        }),
-      );
-    }
     if (sdkConfig?.providers?.length) {
       providers.push(...sdkConfig?.providers);
     }
     config.setProviders(providers);
-  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
+  }, [sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
 
   return null;
 };

package/providers/WalletProvider/WalletProvider.tsx

@@ -2,16 +2,13 @@ import { type FC, type PropsWithChildren } from 'react';
 import { EVMProvider } from './EVMProvider.js';
 import { SDKProviders } from './SDKProviders.js';
 import { SVMProvider } from './SVMProvider.js';
-import { UTXOProvider } from './UTXOProvider.js';
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <EVMProvider>
       <SVMProvider>
-        <UTXOProvider>
-          <SDKProviders />
-          {children}
-        </UTXOProvider>
+        <SDKProviders />
+        {children}
       </SVMProvider>
     </EVMProvider>
   );

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -2,35 +2,29 @@ import { ChainType } from '@lifi/sdk';
 import { useContext, useMemo } from 'react';
 import { EVMExternalContext } from './EVMExternalContext.js';
 import { SVMExternalContext } from './SVMExternalContext.js';
-import { UTXOExternalContext } from './UTXOExternalContext.js';
 
 interface ExternalWalletProvider {
   hasExternalProvider: boolean;
-  availableChainTypes: ChainType[];
+  providers: ChainType[];
 }
 
 export function useHasExternalWalletProvider(): ExternalWalletProvider {
   const hasExternalEVMContext = useContext(EVMExternalContext);
   const hasExternalSVMContext = useContext(SVMExternalContext);
-  const hasExternalUTXOContext = useContext(UTXOExternalContext);
 
   const providers = useMemo(() => {
-    const providers: ChainType[] = [];
+    const providers = [];
     if (hasExternalEVMContext) {
       providers.push(ChainType.EVM);
     }
     if (hasExternalSVMContext) {
       providers.push(ChainType.SVM);
     }
-    if (hasExternalUTXOContext) {
-      providers.push(ChainType.UTXO);
-    }
     return providers;
-  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext]);
+  }, [hasExternalEVMContext, hasExternalSVMContext]);
 
   return {
-    hasExternalProvider:
-      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
-    availableChainTypes: providers,
+    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
+    providers,
   };
 }

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -2,9 +2,7 @@ import { config, createConfig, type SDKConfig } from '@lifi/sdk';
 import { createContext, useContext, useId, useMemo } from 'react';
 import { version } from '../../config/version.js';
 import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js';
-import { formatInputAmount } from '../../utils/format.js';
 import type { WidgetContextProps, WidgetProviderProps } from './types.js';
-import { attemptToFindMatchingToAddressInConfig } from './utils.js';
 
 const initialContext: WidgetContextProps = {
   elementId: '',
@@ -29,45 +27,9 @@ export const WidgetProvider: React.FC<
 
   const value = useMemo((): WidgetContextProps => {
     try {
-      // Get search params from URL
-      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`];
-        }
-      });
       // Create widget configuration object
       const value = {
         ...widgetConfig,
-        fromChain:
-          (searchParams.fromChain &&
-            !isNaN(parseInt(searchParams.fromChain, 10))) ||
-          typeof widgetConfig.fromChain === 'number'
-            ? parseInt(searchParams.fromChain, 10) || widgetConfig.fromChain
-            : undefined,
-        toChain:
-          (searchParams.toChain &&
-            !isNaN(parseInt(searchParams.toChain, 10))) ||
-          typeof widgetConfig.toChain === 'number'
-            ? parseInt(searchParams.toChain, 10) || widgetConfig.toChain
-            : undefined,
-        fromToken: searchParams.fromToken || widgetConfig.fromToken,
-        toToken: searchParams.toToken || widgetConfig.toToken,
-        fromAmount:
-          typeof searchParams.fromAmount === 'string' &&
-          !isNaN(parseFloat(searchParams.fromAmount))
-            ? formatInputAmount(searchParams.fromAmount)
-            : widgetConfig.fromAmount,
-        toAddress: searchParams.toAddress
-          ? attemptToFindMatchingToAddressInConfig(
-              searchParams.toAddress,
-              widgetConfig,
-            )
-          : widgetConfig.toAddress,
-        integrator: widgetConfig.integrator,
         elementId,
       } as WidgetContextProps;
 
@@ -88,7 +50,7 @@ export const WidgetProvider: React.FC<
         },
         disableVersionCheck: true,
         widgetVersion: version,
-        // preloadChains: false,
+        preloadChains: false,
       };
       if (!sdkInitialized) {
         createConfig(_config);

package/stores/StoreProvider.tsx

@@ -10,6 +10,7 @@ import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
   config,
+  formRef,
 }) => {
   return (
     <SplitSubvariantStoreProvider
@@ -20,15 +21,15 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
       }
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
-        <FormStoreProvider>
-          <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+        <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+          <FormStoreProvider formRef={formRef}>
             <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
               <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
                 {children}
               </RouteExecutionStoreProvider>
             </ChainOrderStoreProvider>
-          </BookmarkStoreProvider>
-        </FormStoreProvider>
+          </FormStoreProvider>
+        </BookmarkStoreProvider>
       </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>
   );

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>
   );
 };