Fix some issues in clear button for input fields

[riccardobl]

This PR does two changes:

• it hides the clear button if the field is readonly
• changes the way the clear button render is toggled by making it effect/state based

the latter is to workaround the issue discovered here: #1479

In the way sending wallets are implemented, they are initialized at render time pulling data from localStorage, my current theory is that since this is skipped in SSR, there is the possibility of having the field resulting empty on the server and filled on the client and since the clear button is toggled conditionally based on this at render time, it can result in an hydration error.
By moving the toggler client side we avoid that.

[ekzyis]

since the clear button is toggled conditionally based on this at render time, it can result in an hydration error.

Ahh, that makes sense, thanks for finding this out.

I think using useIsClient instead of useEffect makes more sense here. You're using useEffect to compute a value that you could compute during render so it looks like a typical unnecessary usage of useEffect. The intention is to hide the button during SSR which matches closer what useIsClient is for.

diff --git a/components/form.js b/components/form.js
index 26a956af..11052c42 100644
--- a/components/form.js
+++ b/components/form.js
@@ -33,6 +33,7 @@ import EyeClose from '@/svgs/eye-close-line.svg'
 import Info from './info'
 import { useMe } from './me'
 import classNames from 'classnames'
+import { useIsClient } from './use-client'

 export class SessionRequiredError extends Error {
   constructor () {
@@ -455,6 +456,7 @@ function InputInner ({
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
   const storageKeyPrefix = useContext(StorageKeyPrefixContext)
+  const isClient = useIsClient()

   const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined

@@ -538,7 +540,7 @@ function InputInner ({
           isInvalid={invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
-        {(clear && field.value) &&
+        {(isClient && clear && field.value && !props.readOnly) &&
           <Button
             variant={null}
             onClick={(e) => {

These hydration bugs because of client vs server state are pretty annoying. I am not sure useIsClient is the best solution but I think it's the best idiomatic one we've found so far.

you probably didn't know this hook existed but now you do haha