feat: trim leading/trailing whitespace in verification codes/rebase

apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx

@@ -40,8 +40,8 @@ import {
   useConsensusPolling,
   useGuardianSetupApi,
   useGuardianSetupContext,
+  useTrimmedInputArray,
 } from '../../../../../hooks';
-import { useTrimmedInputArray } from '../../../../../hooks';
 
 interface PeerWithHash {
   id: string;
@@ -64,6 +64,9 @@ export const VerifyGuardians: React.FC<Props> = ({ next }) => {
   const isHost = role === GuardianRole.Host;
   const [myHash, setMyHash] = useState('');
   const [peersWithHash, setPeersWithHash] = useState<PeerWithHash[]>();
+  const [enteredHashes, handleHashChange] = useTrimmedInputArray(
+    peersWithHash ? peersWithHash.map(() => '') : []
+  );
   const [verifiedConfigs, setVerifiedConfigs] = useState<boolean>(false);
   const [isStarting, setIsStarting] = useState(false);
   const [error, setError] = useState<string>();
@@ -73,9 +76,6 @@ export const VerifyGuardians: React.FC<Props> = ({ next }) => {
   // Poll for peers and configGenParams while on this page.
   useConsensusPolling();
 
-  const [enteredHashes, handleHashChange, setEnteredHashes] =
-    useTrimmedInputArray(peersWithHash ? peersWithHash.map(() => '') : []);
-
   useEffect(() => {
     async function assembleHashInfo() {
       if (peers.length === 0) {
@@ -110,49 +110,16 @@ export const VerifyGuardians: React.FC<Props> = ({ next }) => {
           const otherPeers = Object.entries(peers).filter(
             ([id]) => id !== ourCurrentId.toString()
           );
-          setEnteredHashes(
-            otherPeers.map(([id]) => hashes[id as unknown as number])
-          );
+          otherPeers.forEach(([id], idx) => {
+            handleHashChange(idx, hashes[id as unknown as number]);
+          });
         }
       } catch (err) {
         setError(formatApiErrorMessage(err));
       }
     }
     assembleHashInfo();
-  }, [api, peers, ourCurrentId, t, setEnteredHashes]);
-
-  const tableRows = useMemo(() => {
-    if (!peersWithHash) return [];
-    return peersWithHash.map(({ peer, hash }, idx) => {
-      const value = enteredHashes[idx] || '';
-      const isValid = Boolean(value && value === hash);
-      const isError = Boolean(value && !isValid);
-      return {
-        key: peer.cert,
-        name: (
-          <Text maxWidth={200} isTruncated>
-            {peer.name}
-          </Text>
-        ),
-        status: isValid ? (
-          <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag>
-        ) : (
-          ''
-        ),
-        hashInput: (
-          <FormControl isInvalid={isError}>
-            <Input
-              variant='filled'
-              value={value}
-              placeholder={`${t('verify-guardians.verified-placeholder')}`}
-              onChange={(ev) => handleHashChange(idx, ev.currentTarget.value)}
-              readOnly={isValid}
-            />
-          </FormControl>
-        ),
-      };
-    });
-  }, [peersWithHash, enteredHashes, t, handleHashChange]);
+  }, [api, peers, ourCurrentId, t, handleHashChange]);
 
   useEffect(() => {
     // If we're the only guardian, skip this verify other guardians step.
@@ -234,6 +201,39 @@ export const VerifyGuardians: React.FC<Props> = ({ next }) => {
     sm: 'row',
   }) as StackDirection | undefined;
 
+  const tableRows = useMemo(() => {
+    if (!peersWithHash) return [];
+    return peersWithHash.map(({ peer, hash }, idx) => {
+      const value = enteredHashes[idx] || '';
+      const isValid = Boolean(value && value === hash);
+      const isError = Boolean(value && !isValid);
+      return {
+        key: peer.cert,
+        name: (
+          <Text maxWidth={200} isTruncated>
+            {peer.name}
+          </Text>
+        ),
+        status: isValid ? (
+          <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag>
+        ) : (
+          ''
+        ),
+        hashInput: (
+          <FormControl isInvalid={isError}>
+            <Input
+              variant='filled'
+              value={value}
+              placeholder={`${t('verify-guardians.verified-placeholder')}`}
+              onChange={(ev) => handleHashChange(idx, ev.currentTarget.value)}
+              readOnly={isValid}
+            />
+          </FormControl>
+        ),
+      };
+    });
+  }, [peersWithHash, enteredHashes, handleHashChange, t]);
+
   if (error) {
     return (
       <Flex direction='column' gap={6}>

apps/router/src/hooks/custom/useTrimmedInput.tsx

@@ -2,16 +2,6 @@ import { useState } from 'react';
 
 const cleanInput = (value: string) => value.trim();
 
-export const useTrimmedInput = (initialValue: string) => {
-  const [value, setValue] = useState(initialValue);
-
-  const handleChange = (newValue: string) => {
-    setValue(cleanInput(newValue));
-  };
-
-  return [value, handleChange] as const;
-};
-
 export const useTrimmedInputArray = (initialValues: string[]) => {
   const [values, setValues] = useState<string[]>(initialValues);
 
@@ -23,9 +13,5 @@ export const useTrimmedInputArray = (initialValues: string[]) => {
     });
   };
 
-  const setAllValues = (newValues: string[]) => {
-    setValues(newValues.map(cleanInput));
-  };
-
-  return [values, handleChange, setAllValues] as const;
+  return [values, handleChange] as const;
 };

apps/router/src/hooks/index.tsx

@@ -3,10 +3,7 @@ import { useLocation } from 'react-router-dom';
 export * from './guardian/useGuardian';
 export * from './guardian/useGuardianSetup';
 export * from './gateway/useGateway';
-export {
-  useTrimmedInput,
-  useTrimmedInputArray,
-} from './custom/useTrimmedInput';
+export * from './custom/useTrimmedInput';
 
 import { useContext } from 'react';
 import { AppContext, AppContextValue } from '../context/AppContext';