From 573855fc0fbb308a3358b2789c7e76df183a3d1c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 14:36:42 +0200
Subject: [PATCH] feat: add timer and check icon for copy validator address

---
 .../General/ValidatorNameAddress.tsx          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index fc30c1f3..3d1ad83e 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
-import { CopyIcon, VerifiedIcon, ContactIcon } from '@status-im/icons'
+import { CopyIcon, VerifiedIcon, ContactIcon, CheckIcon } from '@status-im/icons'
+import { useState } from 'react'
 
 import { copyFunction, getFormattedValidatorAddress } from '../../utilities'
 
@@ -17,8 +18,18 @@ const ValidatorNameAddress = ({
   isVerified,
   isAvatarChipIncluded,
 }: ValidatorNameAddressProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+
   const onCopyAddress = () => {
     copyFunction(address)
+
+    if (isCopied === false) {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, 3000)
+    }
   }
 
   return (
@@ -34,7 +45,16 @@ const ValidatorNameAddress = ({
         <Text size={13} color="#647084">
           {getFormattedValidatorAddress(address)}
         </Text>
-        <CopyIcon size={16} color="#647084" style={{ cursor: 'pointer' }} onClick={onCopyAddress} />
+        {isCopied ? (
+          <CheckIcon size={16} />
+        ) : (
+          <CopyIcon
+            size={16}
+            color="#647084"
+            style={{ cursor: 'pointer' }}
+            onClick={onCopyAddress}
+          />
+        )}
       </XStack>
     </YStack>
   )