Show icon on component render

centrifuge · Jul 16, 2024 · 33df005 · 33df005
1 parent 4f2d479
commit 33df005
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
@@ -265,27 +265,31 @@ export function AddressInput({
   errorMessage,
   onBlur,
   onChange,
-  value,
+  value = '',
   clearIcon,
   ...inputProps
 }: AddressInputProps) {
   const defaultId = React.useId()
   id ??= defaultId
 
+  const [inputVal, setInputVal] = React.useState<string>(value)
   const [network, setNetwork] = React.useState<'ethereum' | 'centrifuge' | 'loading' | null>(null)
 
-  function handleChange(e: React.FocusEvent<HTMLInputElement>) {
-    const address = e.target.value
-    if (isEvmAddress(address) && address.length > 3) {
+  React.useEffect(() => {
+    if (isEvmAddress(inputVal) && inputVal.length > 3) {
       setNetwork('ethereum')
-    } else if (isSubstrateAddress(address) && address.length > 3) {
+    } else if (isSubstrateAddress(inputVal) && inputVal.length > 3) {
       setNetwork('centrifuge')
-    } else if (address !== '') {
+    } else if (inputVal !== '') {
       setNetwork('loading')
     } else {
       setNetwork(null)
     }
+  }, [inputVal])
 
+  function handleChange(e: React.FocusEvent<HTMLInputElement>) {
+    const address = e.target.value
+    setInputVal(address)
     if (onChange) {
       onChange(e)
     }