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} - {validator.address} + {getFormattedValidatorAddress(validator.address)} 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}` +}