feat: removal of react hook form #166

DNR500 · 2023-12-11T09:39:22Z

This PR looks to remove the react-hook-form library from the Widget

It puts a zustand store in its place to handle the passing of form values across the app.

Main hooks that interact with the form store

useFieldValue - now provides access to the form values
useFieldActions - provides functions to update the form
useFieldController - provides an interface with onChange, onBlur and value to hook up to inputs

other hooks

useTouchedFields - provides a map which fields are touched
*useValidation - provides access to isValid and errors
*useValidationActions - functions to set up and trigger the validatoiin

*The validation here is a placeholder and will likely change when looking at the new changes for the Wallet Switcher (should be the next piece of work)

…on to be looked at

…-form it was trigger to many recalulations

DNR500 · 2023-12-12T18:36:17Z

We might want to revise what hooks are made available for the external API?

see commit 44b71ec

chybisov

I couldn't find URLSearchParamsBuilder event though we export it from form barrel file.

chybisov · 2023-12-13T10:14:33Z

packages/widget/src/types/index.ts

+// TODO: needs to be removed
+declare global {
+  interface Window {
+    useFormStore?: boolean;
+  }
+}


Can we remove this?

Oh yes. I'll get rid of that

chybisov · 2023-12-13T10:20:18Z

packages/widget/src/stores/form/createFormStore.ts

+      // The following a is a "placeholder" "for validation for toAddress
+      // is will be re-addressed in the next piece of work for Wallet Switching


Can we please improve this comment? 😄

Actually we can probably live without it - I'll delete it

chybisov · 2023-12-13T10:21:42Z

packages/widget/src/stores/form/createFormStore.ts

+    { ...valuesToFormValues(formDefaultValues) },
+  );
+
+// TODO: isValidating & isValid


I guess this is done?

chybisov · 2023-12-13T10:32:24Z

packages/widget/src/components/SendToWallet/SendToWallet.tsx

+  useEffect(() => {
+    addFieldValidation('toAddress', async (value: string) => {
+      try {
+        if (!value && requiredToAddress) {
+          return t('error.title.walletEnsAddressInvalid');
        }
-      },
-      onBlur: () => trigger(FormKey.ToAddress),
-    },
-  });
+
+        if (!value || isAddress(value) || isSVMAddress(value)) {
+          return true;
+        }
+        const address = await getEnsAddress(config, {
+          chainId: getFieldValues('toChain')[0],
+          name: normalize(value),
+        });
+        return Boolean(address);
+      } catch (error) {
+        return t('error.title.walletEnsAddressInvalid') as string;
+      }
+    });
+  }, [addFieldValidation, requiredToAddress, getFieldValues, t, config]);


Should we add this field onBlur instead of creating validation on every field update?

We discussed this and decide for now its actually ok for it to stay here as it only really will update on requiredToAddress and config changing - though we might look to optimise the pattern for validation in future.

When testing this is wasn't actually working. This was main due to a problem in the useValidationActions hook and a missing call to clearErrors when valid.

Now fixed and works as it did previously - the additional clearErrors logic has been put in the formStore logic and the useValidationActions has been rewritten like the useFieldActions hook so that it avoid any potential problems related to connascence of position/meaning. See commit 9ebef7f

chybisov · 2023-12-13T10:35:17Z

packages/widget/src/hooks/useDebouncedWatch.ts

@@ -1,10 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { useWatch } from 'react-hook-form';
+import { useFieldValues } from '../stores';

 export const useDebouncedWatch = (name: any, delay: number) => {


Can we remove any and type name properly here now?

Actually yes and I think the use of the useDebouncedWatch probably doesn't need to be used with FormKey anymore

chybisov · 2023-12-13T10:38:02Z

packages/widget/src/stores/form/FormUpdater.tsx

+  // Makes widget config options reactive to changes
+  // Acts similar to values property from useForm, but includes additional logic for chains


Should be updated I guess, we no longer have useForm

Will update

chybisov · 2023-12-13T10:44:42Z

packages/widget/src/stores/form/types.ts

+import type { UseBoundStoreWithEqualityFn } from 'zustand/esm/traditional';
+import type { StoreApi } from 'zustand/esm';


I think ESM is used by default, so we can safely import from zustand and zustand/traditional.

I'll check those and change them

chybisov · 2023-12-13T10:48:51Z

We might want to revise what hooks are made available for the external API?

see commit 44b71ec

Maybe later, those are undocumented exports for our experimental NFT flow.

packages/widget/src/hooks/useDebouncedWatch.ts

DNR500 · 2023-12-13T17:43:17Z

I couldn't find URLSearchParamsBuilder event though we export it from form barrel file.

I've fixed the gitignore file now, this was filtering out the URLSearchParamsBuilder.tsx file and listing it as ignored due to **build**. The change to the gitignore file also changes how dist folders are ignored. I've checked that this works locally.

I think this should be ready for review again

github-actions · 2023-12-14T12:09:40Z

Hey! This is your new endopint: https://6ab298ef.widget-spikeremov.pages.dev

DNR500 added the WIP Work in progress label Dec 11, 2023

chybisov changed the title ~~Feat: removal of react hook form~~ feat: removal of react hook form Dec 11, 2023

Nathan Richards added 12 commits December 12, 2023 18:42

feat: WIP build out the provider and form store

fe0da33

feat: more extensive use - should leave only touchfields and validati…

dad42a5

…on to be looked at

refactor: introduce touchfields into form store

154060e

fix: useDebounceWatch - as the store isn't as optimised as react-hook…

9beac3b

…-form it was trigger to many recalulations

docs: list some potential improvements in terms of triggering rerenders

8b58264

docs: some suggestion updates

4457e5d

feat: solidify the api

1490c22

feat: move URLSearchParamsBuilder to form store folder

78661ed

feat: reintroduce FormUpdater

3b493ab

feat: remove validation - placehold in form store.

73168b4

chore: remove old FormProvider code

eb68c0d

chore: remove dep for react-hook-form

1e2b050

DNR500 force-pushed the spike-removal-of-react-hook-form branch from 19e96e5 to 00ae41b Compare December 12, 2023 18:22

Nathan Richards added 3 commits December 12, 2023 19:47

chore: update api

44b71ec

chore: lint fixes

fb36c76

refactor: move FormStoreProvider into Stores Provider

b6e6450

DNR500 force-pushed the spike-removal-of-react-hook-form branch from 0dad7bf to b6e6450 Compare December 12, 2023 18:48

DNR500 removed the WIP Work in progress label Dec 12, 2023

DNR500 marked this pull request as ready for review December 12, 2023 18:50

chybisov requested changes Dec 13, 2023

View reviewed changes

Nathan Richards added 2 commits December 13, 2023 13:12

chore: remove uneeded useFormStore flag type and update useDebounceWatch

3b2869a

chore: update imports for zustand and update comment

128a2d2

chybisov reviewed Dec 13, 2023

View reviewed changes

packages/widget/src/hooks/useDebouncedWatch.ts Show resolved Hide resolved

Nathan Richards added 3 commits December 13, 2023 17:35

chore: update gitignore

8048515

chore: add missing URLSearchParamBuilder file

4317bc8

chore: fix the validation

9ebef7f

chore: linting fixes

a5506b3

DNR500 added the testing label Dec 14, 2023

chybisov approved these changes Dec 14, 2023

View reviewed changes

chybisov merged commit 3356386 into main Dec 14, 2023
2 checks passed

chybisov deleted the spike-removal-of-react-hook-form branch December 14, 2023 13:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: removal of react hook form #166

feat: removal of react hook form #166

DNR500 commented Dec 11, 2023 •

edited by jira bot

Loading

DNR500 commented Dec 12, 2023 •

edited

Loading

chybisov left a comment

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov Dec 13, 2023

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov Dec 13, 2023

DNR500 Dec 13, 2023

chybisov commented Dec 13, 2023

DNR500 commented Dec 13, 2023 •

edited

Loading

github-actions bot commented Dec 14, 2023

		// The following a is a "placeholder" "for validation for toAddress
		// is will be re-addressed in the next piece of work for Wallet Switching

		// Makes widget config options reactive to changes
		// Acts similar to values property from useForm, but includes additional logic for chains

		import type { UseBoundStoreWithEqualityFn } from 'zustand/esm/traditional';
		import type { StoreApi } from 'zustand/esm';

feat: removal of react hook form #166

feat: removal of react hook form #166

Conversation

DNR500 commented Dec 11, 2023 • edited by jira bot Loading

DNR500 commented Dec 12, 2023 • edited Loading

chybisov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chybisov commented Dec 13, 2023

DNR500 commented Dec 13, 2023 • edited Loading

github-actions bot commented Dec 14, 2023

DNR500 commented Dec 11, 2023 •

edited by jira bot

Loading

DNR500 commented Dec 12, 2023 •

edited

Loading

DNR500 commented Dec 13, 2023 •

edited

Loading