Fix: format checksum address (#283)

src/components/ValidatorCredentialRow/ValidatorCredentialRow.tsx

@@ -1,51 +1,58 @@
-import { verifyMessage, isAddress } from 'ethers'
-import { ChangeEvent, FC, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSignMessage } from 'wagmi'
-import addClassString from '../../../utilities/addClassString'
-import { ValidatorCandidate } from '../../types'
-import Button, { ButtonFace } from '../Button/Button'
-import Typography from '../Typography/Typography'
-import ValidatorCandidateRow from '../ValidatorCandidateRow/ValidatorCandidateRow'
-import WalletActionBtn from '../WalletActionBtn/WalletActionBtn'
+import { getAddress, verifyMessage } from 'ethers';
+import { ChangeEvent, FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSignMessage } from 'wagmi';
+import addClassString from '../../../utilities/addClassString';
+import { ValidatorCandidate } from '../../types';
+import Button, { ButtonFace } from '../Button/Button';
+import Typography from '../Typography/Typography';
+import ValidatorCandidateRow from '../ValidatorCandidateRow/ValidatorCandidateRow';
+import WalletActionBtn from '../WalletActionBtn/WalletActionBtn';
 
 export interface ValidatorCredentialRowProps {
-  validator: ValidatorCandidate
-  onSetCredential: (id: string, credential: string) => void
-  onSetVerification: (id: string, verification: boolean) => void
+  validatorCandidate: ValidatorCandidate
+  onUpdateCandidate: (id: string, candidate: ValidatorCandidate) => void
 }
 
 const ValidatorCredentialRow: FC<ValidatorCredentialRowProps> = ({
-  validator,
-  onSetCredential,
-  onSetVerification,
+  validatorCandidate,
+                                                                   onUpdateCandidate
 }) => {
   const { t } = useTranslation()
-  const { id, index, isVerifiedCredentials } = validator
+  const { id, index, isVerifiedCredentials } = validatorCandidate
   const [credentialInput, setCredentialInput] = useState('')
   const [isLoading, setLoading] = useState(false)
   const [isValidAddress, setIsValidAddress] = useState(false)
   const [errorMsg, setError] = useState('')
   const messageSignature = t('validatorManagement.withdrawalCredentials.confirmOwnership')
 
-  const { data, signMessage, error } = useSignMessage()
+  const { data, signMessage, error, reset } = useSignMessage()
+
+  const handleError = (e) => {
+    let message = 'error.unexpectedAddressError'
+
+    if (e?.code === "INVALID_ARGUMENT") {
+      message = 'error.invalidAddressFormat'
+    }
+
+    setError(t(message))
+  }
 
   const setCredential = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    onSetCredential(id, '')
+    onUpdateCandidate(id, {...validatorCandidate, withdrawalCredentials: '', isVerifiedCredentials: false})
     setError('')
-    setCredentialInput(value)
-    onSetVerification(id, false)
+    setIsValidAddress(false)
+    reset()
 
-    const isValid = isAddress(value)
-
-    if (!isValid) {
-      setError(t('validatorManagement.withdrawalCredentials.invalidAddress'))
-      return
+    try {
+      const value = e.target.value
+      setCredentialInput(value)
+      const checkSumAddress = getAddress(value)
+      onUpdateCandidate(id, {...validatorCandidate, withdrawalCredentials: checkSumAddress})
+      setIsValidAddress(true)
+    } catch (e) {
+      handleError(e)
     }
-
-    onSetCredential(id, value)
-    setIsValidAddress(isValid)
   }
 
   const verifyCredentials = () => {
@@ -57,16 +64,23 @@ const ValidatorCredentialRow: FC<ValidatorCredentialRowProps> = ({
   useEffect(() => {
     if (!data) return
 
-    const signedAddress = verifyMessage(messageSignature, data)
+    try {
+      const signedAddress = verifyMessage(messageSignature, data)
+      const checkSumAddress = getAddress(credentialInput)
+      const isVerifiedCredentials = signedAddress === checkSumAddress
+
+      onUpdateCandidate(id, {...validatorCandidate, isVerifiedCredentials })
 
-    if (signedAddress === credentialInput) {
-      onSetVerification(id, true)
-    } else {
-      onSetVerification(id, false)
-      setError(t('validatorManagement.withdrawalCredentials.incorrectSignature'))
+      if(!isVerifiedCredentials) {
+        setError(t('validatorManagement.withdrawalCredentials.incorrectSignature'))
+      }
+
+    } catch (e) {
+      handleError(e)
+    } finally {
+      setLoading(false)
     }
-    setLoading(false)
-  }, [data])
+  }, [data, validatorCandidate, credentialInput])
 
   useEffect(() => {
     if (error) {
@@ -86,7 +100,7 @@ const ValidatorCredentialRow: FC<ValidatorCredentialRowProps> = ({
   return (
     <ValidatorCandidateRow
       isError={Boolean(errorMsg)}
-      data={validator}
+      data={validatorCandidate}
       index={index ? Number(index) : undefined}
     >
       <div className={containerClasses}>

src/components/ValidatorManagement/CreateValidatorView/Steps/WithdrawalCredentials.tsx

@@ -16,7 +16,7 @@ export interface WithdrawalCredentialsProps {
   isActive: boolean
   onShowRisk: () => void
   sharedCredentials: string
-  onUpdateSharedCredentials: (credentials: string) => void
+  onUpdateSharedCredentials: (credentials?: string) => void
 }
 
 const WithdrawalCredentials: FC<WithdrawalCredentialsProps> = ({
@@ -45,31 +45,18 @@ const WithdrawalCredentials: FC<WithdrawalCredentialsProps> = ({
     ? isSharedCredentialVerified
     : candidates.every(({ isVerifiedCredentials }) => isVerifiedCredentials)
 
-  const updateSharedCredentials = (_id: string, withdrawalCredentials: string): void =>
-    onUpdateSharedCredentials(withdrawalCredentials)
-  const updateSharedCredentialVerification = (_id: string, verification: boolean): void =>
-    setIsSharedCredentialVerified(verification)
+  const updateSharedCandidateData = (_id: string, candidate: ValidatorCandidate) => {
+    const { withdrawalCredentials, isVerifiedCredentials } = candidate
 
-  const updateCandidateCredential = (id: string, withdrawalCredentials: string): void => {
-    const index = candidates.findIndex((item) => item.id === id)
-    if (index !== -1) {
-      const updatedCandidates = [...candidates]
-      updatedCandidates[index] = {
-        ...updatedCandidates[index],
-        withdrawalCredentials: withdrawalCredentials,
-      }
-      onValidatorChange(updatedCandidates)
-    }
+    setIsSharedCredentialVerified(Boolean(isVerifiedCredentials))
+    onUpdateSharedCredentials(withdrawalCredentials)
   }
 
-  const updateCandidateVerification = (id: string, verification: boolean): void => {
+  const updateCandidate = (id: string, candidate: ValidatorCandidate) => {
     const index = candidates.findIndex((item) => item.id === id)
     if (index !== -1) {
       const updatedCandidates = [...candidates]
-      updatedCandidates[index] = {
-        ...updatedCandidates[index],
-        isVerifiedCredentials: verification,
-      }
+      updatedCandidates[index] = candidate
       onValidatorChange(updatedCandidates)
     }
   }
@@ -141,24 +128,22 @@ const WithdrawalCredentials: FC<WithdrawalCredentialsProps> = ({
           <div className='overflow-scroll w-full max-h-[200px]'>
             {isAll ? (
               <ValidatorCredentialRow
-                validator={
+                validatorCandidate={
                   {
                     id: 'all',
                     name: t('validatorManagement.withdrawalCredentials.validatorGroup'),
                     withdrawalCredentials: sharedCredentials,
                     isVerifiedCredentials: isVerifiedAddress,
                   } as ValidatorCandidate
                 }
-                onSetCredential={updateSharedCredentials}
-                onSetVerification={updateSharedCredentialVerification}
+                onUpdateCandidate={updateSharedCandidateData}
               />
             ) : (
               candidates.map((validator, index) => (
                 <ValidatorCredentialRow
                   key={index}
-                  validator={validator}
-                  onSetCredential={updateCandidateCredential}
-                  onSetVerification={updateCandidateVerification}
+                  validatorCandidate={validator}
+                  onUpdateCandidate={updateCandidate}
                 />
               ))
             )}

src/locales/translations/en-US.json

@@ -283,6 +283,7 @@
     "numberRequired": "1 number",
     "specialCharRequired": "1 special character",
     "invalidJson": "Invalid JSON data. Please ensure to use correct format.",
+    "invalidAddressFormat": "The provided address is invalid. Please try another.",
     "executionFailure": "Execution broadcast failed. Please ensure all fields and signature are valid.",
     "networkError": "{{type}} NODE NETWORK ERROR: Make sure your IP is correct and/or CORS is correctly configured. Use --http-allow-origin \"*\" in {{type}} config",
     "unknownError": "Unknown {{type}} NODE error.",
@@ -295,6 +296,7 @@
     "validatorDataRequired": "Validator Node requires protocol, address and port",
     "unableToSignExit": "Unable to sign voluntary exit message",
     "invalidExit": "Invalid voluntary exit",
+    "unexpectedAddressError": "Unexpected error occurred while verifying your wallet address",
     "unexpectedDepositError": "Unexpected error while trying to make deposit.",
     "userRejectedTransaction": "User rejected the transaction request.",
     "unexpectedValidatorImportError": "Unexpected error while importing validator",