From 4dbf4d3e8a51b550446d7282b5764b56c9a965d4 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 22:10:18 +0200
Subject: [PATCH] feat: create reuse component for validator name and address

---
 .../General/ValidatorNameAddress.tsx          | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/General/ValidatorNameAddress.tsx

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
new file mode 100644
index 00000000..70287f08
--- /dev/null
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -0,0 +1,32 @@
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+
+import { getFormattedValidatorAddress } from '../../utilities'
+import { CopyIcon } from '@status-im/icons'
+
+type ValidatorNameAddressProps = {
+  number: number
+  address: string
+}
+
+const ValidatorNameAddress = ({ number, address }: ValidatorNameAddressProps) => {
+  const onCopyAddress = () => {
+    navigator.clipboard.writeText(address)
+  }
+
+  return (
+    <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>
+  )
+}
+
+export default ValidatorNameAddress