Extract validator name component

vocdoni · Jul 31, 2024 · efcf103 · efcf103
1 parent a2dfa66
commit efcf103
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/src/components/Layout/CopyButton.tsx b/src/components/Layout/CopyButton.tsx
@@ -43,6 +43,12 @@ const withCopyLogic = (Component: typeof IconButton | typeof Button) => {
 export const CopyButton = withCopyLogic(Button)
 export const CopyButtonIcon = withCopyLogic(IconButton)
 
+export type ReducedTextAndCopyProps = {
+  breakPoint?: Parameters<typeof useBreakpointValue>[0]
+  to?: string
+  children?: string
+} & ICopyButton
+
 /**
  * It shows a text with a copy button.
  * if the length of the string is more than 13 it cut the string to something like 6be21a...0000.
@@ -56,11 +62,7 @@ export const ReducedTextAndCopy = ({
   to,
   children = '',
   ...rest
-}: {
-  to?: string
-  breakPoint?: Parameters<typeof useBreakpointValue>[0]
-  children?: string
-} & ICopyButton) => {
+}: ReducedTextAndCopyProps) => {
   let text = children
   // If breakpoint is true and the length of the string is more than 13 it shorts the string
   if (breakPoint && useBreakpointValue(breakPoint) && children.length > 13) {

diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
@@ -6,6 +6,7 @@ import { QueryParamsTabs } from '~components/Layout/QueryParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { BlockIconLink } from '~components/Layout/IconLink'
+import { ValidatorName } from '~components/Validators/ValidatorCard'
 
 export type ValidatorFixedType = IChainValidator & {
   // todo(kon): delete this type extension when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
@@ -70,19 +71,7 @@ export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }
         <Heading isTruncated wordBreak='break-word' mb={0}>
           <Trans i18nKey={'validators.validator_details'}>Validator Details</Trans>
         </Heading>
-        <Flex wrap={'wrap'} align={'baseline'} gap={2}>
-          <ReducedTextAndCopy
-            toCopy={validatorAddress}
-            color={'textAccent1'}
-            fontWeight={'normal'}
-            h={0}
-            fontSize={'xl'}
-            p={0}
-          >
-            {validatorAddress}
-          </ReducedTextAndCopy>
-          {!!name && <Text color={'lighterText'}>({name})</Text>}
-        </Flex>
+        <ValidatorName name={validator.name} address={validator.validatorAddress} />
         <HStack color={'lighterText'} fontWeight={'bold'}>
           <Text>
             <Trans i18nKey={'validators.validator_details'}>Joint on block</Trans>

diff --git a/src/components/Validators/ValidatorCard.tsx b/src/components/Validators/ValidatorCard.tsx
@@ -1,20 +1,52 @@
-import { Card, CardBody, Flex, HStack, Link, Text } from '@chakra-ui/react'
-import { ensure0x } from '@vocdoni/sdk'
+import { Card, CardBody, Flex, HStack, Link, Text, TextProps } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
-import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { ReducedTextAndCopy, ReducedTextAndCopyProps } from '~components/Layout/CopyButton'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { RoutePath } from '~constants'
 import { ValidatorFixedType } from '~components/Validators/Detail'
 
+export const ValidatorName = ({
+  name,
+  address,
+  nameProps,
+  addressProps,
+}: {
+  name?: string
+  address: string
+  nameProps?: TextProps
+  addressProps?: Omit<ReducedTextAndCopyProps, 'toCopy'>
+}) => {
+  const showName = !!name
+  return (
+    <Flex wrap={'wrap'} align={'baseline'} gap={2} wordBreak='break-all'>
+      {showName && (
+        <Text fontWeight={'bold'} fontSize={'xl'} {...nameProps}>
+          {name}
+        </Text>
+      )}
+      <ReducedTextAndCopy
+        color={'textAccent1'}
+        fontWeight={'normal'}
+        h={0}
+        px={0}
+        my={3}
+        toCopy={address}
+        fontSize={showName ? 'sm' : 'xl'}
+        {...addressProps}
+      >
+        {address}
+      </ReducedTextAndCopy>
+    </Flex>
+  )
+}
+
 export const ValidatorCard = (validator: ValidatorFixedType) => {
   return (
     <Card>
       <Link as={RouterLink} to={generatePath(RoutePath.Validator, { address: validator.validatorAddress })}>
         <CardBody>
           <Flex gap={2} direction={'column'}>
-            <Text fontWeight='bold' wordBreak='break-all'>
-              {validator.name && `(${validator.name})`} {ensure0x(validator.validatorAddress)}
-            </Text>
+            <ValidatorName name={validator.name} address={validator.validatorAddress} />
             <Flex fontSize={'sm'} direction={'column'} gap={2}>
               <HStack gap={1}>
                 <Text fontWeight={'bold'}>