fix: change validator number to name

src/components/General/ValidatorProfile.tsx

@@ -4,21 +4,21 @@ import { XStack } from 'tamagui'
 import ValidatorNameAddress from './ValidatorNameAddress'
 
 type ValidatorProfileProps = {
-  number: number
+  name: string
   address: string
 }
 
-const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
+const ValidatorProfile = ({ name, address }: ValidatorProfileProps) => {
   return (
     <XStack space={'$2'}>
       <Avatar
         type="user"
         size={32}
         src="/icons/validator-request.svg"
-        name={number.toString()}
+        name={name}
         indicator="online"
       />
-      <ValidatorNameAddress number={number} address={address} />
+      <ValidatorNameAddress name={name} address={address} />
     </XStack>
   )
 }

src/constants.ts

@@ -73,7 +73,7 @@ export const VALIDATOR_TABS_MANAGEMENT = [
 
 export const VALIDATORS_DATA = [
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -83,7 +83,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -93,7 +93,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -103,7 +103,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,

src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx

@@ -15,7 +15,7 @@ type ManagementTableProps = {
 }
 
 export type Validator = {
-  number: number
+  name: string
   address: string
   balance: number
   income: number
@@ -35,12 +35,12 @@ const isValidStatus = (validatorStatus: string, tabStatus: string) => {
   return false
 }
 
-const isValidNumberOrAddress = (
+const isValidNameOrAddress = (
-  validatorNumber: number,
+  validatorName: string,
   validatorAddress: string,
   searchValue: string,
 ) => {
-  if (validatorNumber.toString().includes(searchValue) || validatorAddress.includes(searchValue)) {
+  if (validatorName.includes(searchValue) || validatorAddress.includes(searchValue)) {
     return true
   }
   return false
@@ -61,7 +61,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
   const filteredValidators = useMemo(() => {
     return validators
       .filter(validator => isValidStatus(validator.status, tab))
-      .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue))
+      .filter(validator => isValidNameOrAddress(validator.name, validator.address, searchValue))
   }, [validators, tab, searchValue])
 
   const handleSelectAll = () => {

src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx

@@ -32,7 +32,7 @@ const ManagementTableRow = ({ validator, isAllSelected }: ManagementTableRowProp
         />
       </td>
       <td>
-        <ValidatorProfile number={validator.number} address={validator.address} />
+        <ValidatorProfile name={validator.name} address={validator.address} />
       </td>
       <td>
         <Text size={15} color={'#647084'} weight={'semibold'}>

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -52,7 +52,7 @@ const Deposit = () => {
       {Array.from({ length: validatorCount }).map((_, index) => (
         <ValidatorRequest
           key={index}
-          number={index + 1}
+          name={(index + 1).toString()}
           isTransactionConfirmation={isTransactionConfirmation}
         />
       ))}

src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx

@@ -5,11 +5,11 @@ import TransactionStatus from './TransactionStatus'
 import ValidatorProfile from '../../../../components/General/ValidatorProfile'
 
 type ValidatorRequestProps = {
-  number: number
+  name: string
   isTransactionConfirmation?: boolean
 }
 
-const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorRequestProps) => {
+const ValidatorRequest = ({ name, isTransactionConfirmation }: ValidatorRequestProps) => {
   let transactionStatus = 'Complete'
   const isTransactionCompleted = transactionStatus === 'Complete'
 
@@ -17,7 +17,7 @@ const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorReques
     <YStack space={'$3'} style={{ width: '100%' }}>
       <XStack style={{ justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
         <XStack style={{ justifyContent: 'space-between', width: '44%', alignItems: 'center' }}>
-          <ValidatorProfile number={number} address={'zQ3asdf9d4Gs0'} />
+          <ValidatorProfile name={name} address={'zQ3asdf9d4Gs0'} />
           <Text size={13} color="#647084" weight={'semibold'}>
             Keys Generated
           </Text>