From 4f1a270b9c151b3ef4ec9fc157a96b3b903f4a40 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 29 Jul 2024 11:18:17 +0200
Subject: [PATCH 1/8] Implement validators detail page

---
 src/components/Validators/Detail.tsx        | 123 ++++++++++++++++++++
 src/components/Validators/ValidatorCard.tsx |  63 +++++-----
 src/constants.ts                            |   1 +
 src/pages/validator.tsx                     |  19 +++
 src/router/index.tsx                        |  10 ++
 5 files changed, 187 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Validators/Detail.tsx
 create mode 100644 src/pages/validator.tsx

diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
new file mode 100644
index 0000000..1df5021
--- /dev/null
+++ b/src/components/Validators/Detail.tsx
@@ -0,0 +1,123 @@
+import { Button, Flex, Heading, HStack, Tab, TabList, TabPanel, TabPanels, Text, VStack } from '@chakra-ui/react'
+import { ensure0x, IChainValidator } from '@vocdoni/sdk'
+import { Trans, useTranslation } from 'react-i18next'
+import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
+import { QueryParamsTabs } from '~components/Layout/QueryParamsTabs'
+import { RawContentBox } from '~components/Layout/ShowRawButton'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { HiOutlineCube } from 'react-icons/hi2'
+import { RoutePath } from '~constants'
+import { generatePath, Link as RouterLink } from 'react-router-dom'
+
+export type ValidatorFixedType = IChainValidator & {
+  // todo(kon): delete this type extension when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
+  joinHeight: number
+  proposals: number
+  score: number
+  validatorAddress: string
+  votes: number
+}
+
+const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
+  const address = ensure0x(validator.address)
+  const pubKey = ensure0x(validator.pubKey)
+
+  const { t } = useTranslation()
+
+  const details: GridItemProps[] = [
+    {
+      label: t('validators.pubKey', { defaultValue: 'Public Key' }),
+      children: (
+        <ReducedTextAndCopy
+          breakPoint={{ base: true, lg: false }}
+          p={0}
+          color={'textAccent1'}
+          toCopy={pubKey}
+          fontWeight={'normal'}
+          h={0}
+          fontSize={'md'}
+        >
+          {pubKey}
+        </ReducedTextAndCopy>
+      ),
+    },
+    {
+      label: t('validators.voting_power_cell', { defaultValue: 'Voting power' }),
+      children: validator.power,
+    },
+    {
+      label: t('validators.score', { defaultValue: 'Score' }),
+      children: validator.score,
+    },
+    {
+      label: t('validators.votes', { defaultValue: 'Votes' }),
+      children: validator.votes,
+    },
+  ]
+
+  return (
+    <VStack align='start'>
+      <DetailsGrid details={details} />
+    </VStack>
+  )
+}
+
+export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }) => {
+  const validatorAddress = ensure0x(validator.validatorAddress)
+  const name = validator.name
+
+  return (
+    <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
+      <VStack align='start' spacing={4}>
+        <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>
+        <HStack color={'lighterText'}>
+          <Text fontWeight={'bold'}>
+            <Trans i18nKey={'validators.validator_details'}>Joint on block</Trans>
+          </Text>
+          <Button
+            p={0}
+            variant={'text'}
+            leftIcon={<HiOutlineCube />}
+            as={RouterLink}
+            to={generatePath(RoutePath.Block, { height: validator.joinHeight.toString(), page: null })}
+          >
+            {validator.joinHeight}
+          </Button>
+        </HStack>
+      </VStack>
+      <QueryParamsTabs>
+        <TabList display='flex' flexWrap='wrap'>
+          <Tab>
+            <Trans i18nKey={'process.tab_details'}>Details</Trans>
+          </Tab>
+          <Tab>
+            <Trans i18nKey={'raw'}>Raw</Trans>
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <DetailsTab validator={validator} />
+          </TabPanel>
+          <TabPanel>
+            <RawContentBox obj={validator} />
+          </TabPanel>
+        </TabPanels>
+      </QueryParamsTabs>
+    </Flex>
+  )
+}
diff --git a/src/components/Validators/ValidatorCard.tsx b/src/components/Validators/ValidatorCard.tsx
index 1188183..50bf70c 100644
--- a/src/components/Validators/ValidatorCard.tsx
+++ b/src/components/Validators/ValidatorCard.tsx
@@ -1,40 +1,45 @@
-import { Card, CardBody, Flex, HStack, Text } from '@chakra-ui/react'
-import { ensure0x, IChainValidator } from '@vocdoni/sdk'
+import { Card, CardBody, Flex, HStack, Link, Text } from '@chakra-ui/react'
+import { ensure0x } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { ReducedTextAndCopy } 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 ValidatorCard = (validator: IChainValidator) => {
+export const ValidatorCard = (validator: ValidatorFixedType) => {
   return (
     <Card>
-      <CardBody>
-        <Flex gap={2} direction={'column'}>
-          <Text fontWeight='bold' wordBreak='break-all'>
-            {ensure0x(validator.address)}
-          </Text>
-          <Flex fontSize={'sm'} direction={'column'} gap={2}>
-            <HStack gap={1}>
+      <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>
+            <Flex fontSize={'sm'} direction={'column'} gap={2}>
+              <HStack gap={1}>
+                <Text fontWeight={'bold'}>
+                  <Trans i18nKey='validators.pubkey'>PubKey:</Trans>
+                </Text>
+                <ReducedTextAndCopy
+                  color={'textAccent1'}
+                  toCopy={validator.pubKey}
+                  fontWeight={'normal'}
+                  h={0}
+                  fontSize={'sm'}
+                  p={0}
+                >
+                  {validator.pubKey}
+                </ReducedTextAndCopy>
+              </HStack>
               <Text fontWeight={'bold'}>
-                <Trans i18nKey='validators.pubkey'>PubKey:</Trans>
+                <Trans i18nKey='validators.voting_power' values={{ power: validator.power }}>
+                  Voting power: {{ power: validator.power }}
+                </Trans>
               </Text>
-              <ReducedTextAndCopy
-                color={'textAccent1'}
-                toCopy={validator.pubKey}
-                fontWeight={'normal'}
-                h={0}
-                fontSize={'sm'}
-                p={0}
-              >
-                {validator.pubKey}
-              </ReducedTextAndCopy>
-            </HStack>
-            <Text fontWeight={'bold'}>
-              <Trans i18nKey='validators.voting_power' values={{ power: validator.power }}>
-                Voting power: {{ power: validator.power }}
-              </Trans>
-            </Text>
+            </Flex>
           </Flex>
-        </Flex>
-      </CardBody>
+        </CardBody>
+      </Link>
     </Card>
   )
 }
diff --git a/src/constants.ts b/src/constants.ts
index 3320323..4b6507e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -30,6 +30,7 @@ export enum RoutePath {
   Transaction = '/transactions/:block/:index',
   TransactionsList = '/transactions/:page?',
   TransactionByHashOrHeight = '/transactions/:hashOrHeight',
+  Validator = '/validator/:address',
   Validators = '/validators',
   Verify = '/verify/:verifier?',
 }
diff --git a/src/pages/validator.tsx b/src/pages/validator.tsx
new file mode 100644
index 0000000..5ac56c0
--- /dev/null
+++ b/src/pages/validator.tsx
@@ -0,0 +1,19 @@
+import { useLoaderData, useParams } from 'react-router-dom'
+import { ensure0x, IChainValidatorsListResponse } from '@vocdoni/sdk'
+import { ValidatorDetail, ValidatorFixedType } from '~components/Validators/Detail'
+
+const Validator = () => {
+  const validators = (useLoaderData() as IChainValidatorsListResponse).validators as Array<ValidatorFixedType>
+
+  const { address }: { address?: string } = useParams()
+
+  const validator = validators.find(
+    (v) => ensure0x(v.validatorAddress.toLowerCase()) === ensure0x(address?.toLowerCase() ?? '')
+  )
+
+  if (!address || !validator) throw new Error('Validator not found')
+
+  return <ValidatorDetail validator={validator} />
+}
+
+export default Validator
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 197c3ec..4662b60 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -21,6 +21,7 @@ const ProcessList = lazy(() => import('~pages/processes'))
 const Process = lazy(() => import('~pages/process'))
 const Transaction = lazy(() => import('~pages/transaction'))
 const TransactionsList = lazy(() => import('~pages/transactions'))
+const Validator = lazy(() => import('~pages/validator'))
 const Validators = lazy(() => import('~pages/validators'))
 const Verify = lazy(() => import('~pages/verify'))
 
@@ -145,6 +146,15 @@ export const RoutesProvider = () => {
                 return await client.txInfoByBlock(Number(tx.blockHeight), Number(tx.transactionIndex))
               },
             },
+            {
+              path: RoutePath.Validator,
+              element: (
+                <SuspenseLoader>
+                  <Validator />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.validatorsList(),
+            },
             {
               path: RoutePath.Validators,
               element: (

From f655b7092696d8994bb05f127f3362c5c195898b Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 29 Jul 2024 11:56:37 +0200
Subject: [PATCH 2/8] Create IconLink

---
 src/components/Layout/IconLink.tsx   | 34 ++++++++++++++++++++++++++++
 src/components/Validators/Detail.tsx | 20 ++++------------
 2 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Layout/IconLink.tsx

diff --git a/src/components/Layout/IconLink.tsx b/src/components/Layout/IconLink.tsx
new file mode 100644
index 0000000..9b1ebd7
--- /dev/null
+++ b/src/components/Layout/IconLink.tsx
@@ -0,0 +1,34 @@
+import { Flex, Icon, IconProps, Link } from '@chakra-ui/react'
+import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { PropsWithChildren } from 'react'
+import { RoutePath } from '~constants'
+import { HiOutlineCube } from 'react-icons/hi2'
+import { IconType } from 'react-icons'
+
+export const BlockIconLink = ({ height }: { height: number }) => (
+  <IconLink
+    icon={HiOutlineCube}
+    to={generatePath(RoutePath.Block, {
+      height: height.toString(),
+      page: null,
+    })}
+  >
+    {height}
+  </IconLink>
+)
+
+type IconLinkProps = {
+  to: string
+  icon: IconType
+} & IconProps
+
+export const IconLink = ({ to, icon, children, ...iconProps }: IconLinkProps & PropsWithChildren) => {
+  return (
+    <Link as={RouterLink} to={to}>
+      <Flex align='center' gap={2}>
+        <Icon as={icon} {...iconProps} />
+        <span>{children}</span>
+      </Flex>
+    </Link>
+  )
+}
diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index 1df5021..8b207e6 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -1,13 +1,11 @@
-import { Button, Flex, Heading, HStack, Tab, TabList, TabPanel, TabPanels, Text, VStack } from '@chakra-ui/react'
+import { Flex, Heading, HStack, Tab, TabList, TabPanel, TabPanels, Text, VStack } from '@chakra-ui/react'
 import { ensure0x, IChainValidator } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { QueryParamsTabs } from '~components/Layout/QueryParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import { HiOutlineCube } from 'react-icons/hi2'
-import { RoutePath } from '~constants'
-import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { BlockIconLink } from '~components/Layout/IconLink'
 
 export type ValidatorFixedType = IChainValidator & {
   // todo(kon): delete this type extension when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
@@ -85,19 +83,11 @@ export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }
           </ReducedTextAndCopy>
           {!!name && <Text color={'lighterText'}>({name})</Text>}
         </Flex>
-        <HStack color={'lighterText'}>
-          <Text fontWeight={'bold'}>
+        <HStack color={'lighterText'} fontWeight={'bold'}>
+          <Text>
             <Trans i18nKey={'validators.validator_details'}>Joint on block</Trans>
           </Text>
-          <Button
-            p={0}
-            variant={'text'}
-            leftIcon={<HiOutlineCube />}
-            as={RouterLink}
-            to={generatePath(RoutePath.Block, { height: validator.joinHeight.toString(), page: null })}
-          >
-            {validator.joinHeight}
-          </Button>
+          <BlockIconLink height={validator.joinHeight} />
         </HStack>
       </VStack>
       <QueryParamsTabs>

From a1614da774745086a1827a2460f1f44eae1829c7 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 29 Jul 2024 12:00:45 +0200
Subject: [PATCH 3/8] Use validator link on block

---
 src/components/Blocks/Detail.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Blocks/Detail.tsx b/src/components/Blocks/Detail.tsx
index b3f7dbc..5104fcc 100644
--- a/src/components/Blocks/Detail.tsx
+++ b/src/components/Blocks/Detail.tsx
@@ -95,6 +95,7 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
           fontWeight={'normal'}
           h={0}
           fontSize={'md'}
+          to={generatePath(RoutePath.Validator, { address: proposer })}
         >
           {proposer}
         </ReducedTextAndCopy>

From a2dfa663641c21af1ce4f2a7df045f0cdf8594ba Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 29 Jul 2024 12:05:02 +0200
Subject: [PATCH 4/8] Add todo

---
 src/pages/validators.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/validators.tsx b/src/pages/validators.tsx
index 216b2ae..ebf96e7 100644
--- a/src/pages/validators.tsx
+++ b/src/pages/validators.tsx
@@ -14,6 +14,8 @@ const Validators = () => {
   return (
     <ListPageLayout title={t('validators.validators')} subtitle={subtitle}>
       {validators.map((validator, i) => (
+        // todo(kon): remove this ignore when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
+        // @ts-ignore
         <ValidatorCard key={i} {...validator} />
       ))}
     </ListPageLayout>

From efcf103d8e01036c5e6067f20bca25a5a5f57044 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 31 Jul 2024 08:29:18 +0200
Subject: [PATCH 5/8] Extract validator name component

---
 src/components/Layout/CopyButton.tsx        | 12 +++---
 src/components/Validators/Detail.tsx        | 15 +------
 src/components/Validators/ValidatorCard.tsx | 44 ++++++++++++++++++---
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components/Layout/CopyButton.tsx b/src/components/Layout/CopyButton.tsx
index be755a1..fb6e7d7 100644
--- 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
index 8b207e6..a5805a7 100644
--- 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
index 50bf70c..be248fb 100644
--- 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'}>

From dfc78c3147dbffd142edb23fd4b5348e5b326064 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 31 Jul 2024 08:34:32 +0200
Subject: [PATCH 6/8] Fix typo

---
 src/components/Validators/Detail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index a5805a7..fbd0b9b 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -74,7 +74,7 @@ export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }
         <ValidatorName name={validator.name} address={validator.validatorAddress} />
         <HStack color={'lighterText'} fontWeight={'bold'}>
           <Text>
-            <Trans i18nKey={'validators.validator_details'}>Joint on block</Trans>
+            <Trans i18nKey={'validators.validator_details'}>Joined on block</Trans>
           </Text>
           <BlockIconLink height={validator.joinHeight} />
         </HStack>

From 92589d2500aab9ba1a04839d104b226dc3d36aa8 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 31 Jul 2024 08:37:22 +0200
Subject: [PATCH 7/8] Add address to details

---
 src/components/Validators/Detail.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index fbd0b9b..e7510ac 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -7,6 +7,8 @@ import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { BlockIconLink } from '~components/Layout/IconLink'
 import { ValidatorName } from '~components/Validators/ValidatorCard'
+import { generatePath } from 'react-router-dom'
+import { RoutePath } from '~constants'
 
 export type ValidatorFixedType = IChainValidator & {
   // todo(kon): delete this type extension when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
@@ -40,6 +42,23 @@ const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
         </ReducedTextAndCopy>
       ),
     },
+    {
+      label: t('validators.secondary_address', { defaultValue: 'Address' }),
+      children: (
+        <ReducedTextAndCopy
+          breakPoint={{ base: true, lg: false }}
+          p={0}
+          color={'textAccent1'}
+          toCopy={address}
+          fontWeight={'normal'}
+          h={0}
+          fontSize={'md'}
+          to={generatePath(RoutePath.Organization, { pid: address, page: null })}
+        >
+          {address}
+        </ReducedTextAndCopy>
+      ),
+    },
     {
       label: t('validators.voting_power_cell', { defaultValue: 'Voting power' }),
       children: validator.power,
@@ -62,9 +81,6 @@ const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
 }
 
 export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }) => {
-  const validatorAddress = ensure0x(validator.validatorAddress)
-  const name = validator.name
-
   return (
     <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
       <VStack align='start' spacing={4}>

From 7a18c934e7254abbfacb2e4db7d532e7a1b37a0e Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Thu, 1 Aug 2024 12:58:36 +0200
Subject: [PATCH 8/8] Implement useCopy

---
 src/components/Validators/Detail.tsx        |  4 +-
 src/components/Validators/ValidatorCard.tsx | 41 ++++++++++-----------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index e7510ac..6e8c17d 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -43,7 +43,7 @@ const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
       ),
     },
     {
-      label: t('validators.secondary_address', { defaultValue: 'Address' }),
+      label: t('validators.account', { defaultValue: 'Account' }),
       children: (
         <ReducedTextAndCopy
           breakPoint={{ base: true, lg: false }}
@@ -87,7 +87,7 @@ export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }
         <Heading isTruncated wordBreak='break-word' mb={0}>
           <Trans i18nKey={'validators.validator_details'}>Validator Details</Trans>
         </Heading>
-        <ValidatorName name={validator.name} address={validator.validatorAddress} />
+        <ValidatorName name={validator.name} address={validator.validatorAddress} useCopy />
         <HStack color={'lighterText'} fontWeight={'bold'}>
           <Text>
             <Trans i18nKey={'validators.validator_details'}>Joined on block</Trans>
diff --git a/src/components/Validators/ValidatorCard.tsx b/src/components/Validators/ValidatorCard.tsx
index be248fb..f902dd6 100644
--- a/src/components/Validators/ValidatorCard.tsx
+++ b/src/components/Validators/ValidatorCard.tsx
@@ -1,29 +1,19 @@
-import { Card, CardBody, Flex, HStack, Link, Text, TextProps } from '@chakra-ui/react'
+import { Card, CardBody, Flex, HStack, Link, Text } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
-import { ReducedTextAndCopy, ReducedTextAndCopyProps } from '~components/Layout/CopyButton'
+import { ReducedTextAndCopy } 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'>
-}) => {
+export const ValidatorName = ({ name, useCopy, address }: { name?: string; useCopy?: boolean; address: string }) => {
   const showName = !!name
-  return (
-    <Flex wrap={'wrap'} align={'baseline'} gap={2} wordBreak='break-all'>
-      {showName && (
-        <Text fontWeight={'bold'} fontSize={'xl'} {...nameProps}>
-          {name}
-        </Text>
-      )}
+  let addrsComponent = (
+    <Text fontWeight={'normal'} fontSize={showName ? 'sm' : 'xl'}>
+      {address}
+    </Text>
+  )
+  if (useCopy) {
+    addrsComponent = (
       <ReducedTextAndCopy
         color={'textAccent1'}
         fontWeight={'normal'}
@@ -32,10 +22,19 @@ export const ValidatorName = ({
         my={3}
         toCopy={address}
         fontSize={showName ? 'sm' : 'xl'}
-        {...addressProps}
       >
         {address}
       </ReducedTextAndCopy>
+    )
+  }
+  return (
+    <Flex wrap={'wrap'} align={'baseline'} gap={2} wordBreak='break-all'>
+      {showName && (
+        <Text fontWeight={'bold'} fontSize={'xl'}>
+          {name}
+        </Text>
+      )}
+      {addrsComponent}
     </Flex>
   )
 }