feat: create validator address format function

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: '1', address: 'zQ3asdf9d4Gs0' },
-    { name: '2', address: 'zQ3...9d4Gs0' },
+    { name: '2', address: 'zQ3asdf9d4Gs0' },
   ]
   const isTransactionConfirmation = false
 

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>

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}`
+}