Implement trimming of leading/trailing whitespace and newlines for ve…

…rification codes (fedimint#586)

* feat: trim whitespace in verification codes

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

* feat: wrap handleChange in useCallback

* refactor: simplify useTrimmedInput hook return type from array to object

* refactor: update VerifyGuardians to use new useTrimmedInput return type

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

@@ -64,9 +64,8 @@ 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 { values: enteredHashes, handleChange: handleHashChange } =
+    useTrimmedInputArray(peersWithHash ? peersWithHash.map(() => '') : []);
   const [verifiedConfigs, setVerifiedConfigs] = useState<boolean>(false);
   const [isStarting, setIsStarting] = useState(false);
   const [error, setError] = useState<string>();

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 const cleanInput = (value: string | undefined) => value?.trim() ?? '';
 
@@ -15,13 +15,13 @@ export const useTrimmedInput = (initialValue = '') => {
 export const useTrimmedInputArray = (initialValues: string[]) => {
   const [values, setValues] = useState<string[]>(initialValues);
 
-  const handleChange = (index: number, newValue: string) => {
+  const handleChange = useCallback((index: number, newValue: string) => {
     setValues((prev) => {
       const newValues = [...prev];
       newValues[index] = cleanInput(newValue);
       return newValues;
     });
-  };
+  }, []);
 
-  return [values, handleChange] as const;
+  return { values, handleChange };
 };