diff --git a/apps/router/src/guardian-ui/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx b/apps/router/src/guardian-ui/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx index 49322ff08..384aaa4f2 100644 --- a/apps/router/src/guardian-ui/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx +++ b/apps/router/src/guardian-ui/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Alert, AlertDescription, @@ -21,6 +21,7 @@ import { } from '@chakra-ui/react'; import { useTranslation } from '@fedimint/utils'; import { ReactComponent as WarningIcon } from '../../../../assets/svgs/warning.svg'; +import { useTrimmedInput } from '../../../../../hooks'; interface ConfirmPasswordModalProps { password: string; @@ -38,8 +39,8 @@ export const ConfirmPasswordModal: React.FC = ({ guardianName, }) => { const { t } = useTranslation(); - const [confirmPassword, setConfirmPassword] = useState(''); - const [confirmGuardianName, setConfirmGuardianName] = useState(''); + const [confirmPassword, setConfirmPassword] = useTrimmedInput(''); + const [confirmGuardianName, setConfirmGuardianName] = useTrimmedInput(''); const confirmed = confirmPassword === password && confirmGuardianName === guardianName; diff --git a/apps/router/src/hooks/custom/useTrimmedInput.tsx b/apps/router/src/hooks/custom/useTrimmedInput.tsx index d4d0ca65e..4ce7264b2 100644 --- a/apps/router/src/hooks/custom/useTrimmedInput.tsx +++ b/apps/router/src/hooks/custom/useTrimmedInput.tsx @@ -2,6 +2,16 @@ import { useState } from 'react'; const cleanInput = (value: string) => value.trim(); +export const useTrimmedInput = (initialValue = '') => { + 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(initialValues);