feat: use new component into validator profile

src/components/General/ValidatorProfile.tsx

@@ -1,8 +1,7 @@
-import { Avatar, Text } from '@status-im/components'
-import { XStack, YStack } from 'tamagui'
+import { Avatar } from '@status-im/components'
+import { XStack } from 'tamagui'
 
-import { getFormattedValidatorAddress } from '../../utilities'
-import { CopyIcon } from '@status-im/icons'
+import ValidatorNameAddress from './ValidatorNameAddress'
 
 type ValidatorProfileProps = {
   number: number
@@ -10,10 +9,6 @@ type ValidatorProfileProps = {
 }
 
 const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
-  const onCopyAddress = () => {
-    navigator.clipboard.writeText(address)
-  }
-
   return (
     <XStack space={'$2'}>
       <Avatar
@@ -23,22 +18,7 @@ const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
         name={number.toString()}
         indicator="online"
       />
-      <YStack>
-        <Text size={15} weight={'semibold'}>
-          Validator {number}
-        </Text>
-        <XStack space={'$1'} style={{ alignItems: 'center' }}>
-          <Text size={13} color="#647084">
-            {getFormattedValidatorAddress(address)}
-          </Text>
-          <CopyIcon
-            size={16}
-            color="#647084"
-            style={{ cursor: 'pointer' }}
-            onClick={onCopyAddress}
-          />
-        </XStack>
-      </YStack>
+      <ValidatorNameAddress number={number} address={address} />
     </XStack>
   )
 }