From b441051a51b841c872ca0d950bafbc85a8c2ace8 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 22 Sep 2023 17:10:10 +0300
Subject: [PATCH] feat: create validator address format function

---
 src/pages/ValidatorOnboarding/Deposit/Deposit.tsx          | 4 ++--
 src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx | 4 +++-
 src/utilities.ts                                           | 7 +++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
index fe84c0e5..ca6e6d48 100644
--- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
@@ -18,8 +18,8 @@ const Deposit = () => {
   const { isWalletConnected } = useSelector((state: RootState) => state.deposit)
 
   const validatorRequests = [
-    { name: '1', address: 'zQ3...9d4Gs0' },
-    { name: '2', address: 'zQ3...9d4Gs0' },
+    { name: '1', address: 'zQ3asdf9d4Gs0' },
+    { name: '2', address: 'zQ3asdf9d4Gs0' },
   ]
   const isTransactionConfirmation = false
 
diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
index 03b5b85a..d27f067e 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
@@ -1,6 +1,8 @@
 import { Avatar, DividerLine, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 
+import { getFormattedValidatorAddress } from '../../../utilities'
+
 type ValidatorRequestProps = {
   validator: {
     name: string
@@ -25,7 +27,7 @@ const ValidatorRequest = ({ validator }: ValidatorRequestProps) => {
               Validator {validator.name}
             </Text>
             <Text size={13} color="#647084">
-              {validator.address}
+              {getFormattedValidatorAddress(validator.address)}
             </Text>
           </YStack>
         </XStack>
diff --git a/src/utilities.ts b/src/utilities.ts
index 257a21e5..fe300ca1 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -26,3 +26,10 @@ export const convertSecondsToTimerFormat = (seconds: number) => {
 export const formatNumberForGauge = (n: number): string => {
   return n.toString().replace(/\./g, ',')
 }
+
+export const getFormattedValidatorAddress = (address: string) => {
+  // zQ3asdf9d4Gs0 -> zQ3...9d4Gs0
+  const start = address.slice(0, 3)
+  const end = address.slice(-6)
+  return `${start}...${end}`
+}