Refactor ReducedTextAndCopy to be only one component

src/components/Blocks/BlockCard.tsx

@@ -23,7 +23,7 @@ export const BlockCard = ({ height, time, proposer }: { height: number; time: st
             <Box fontSize={'sm'}>
               <Flex gap={2} align={'center'}>
                 <Trans i18nKey='blocks.proposer'>Proposer:</Trans>
-                <ReducedTextAndCopy color={'textAccent1'} toCopy={proposer}>
+                <ReducedTextAndCopy reduced={true} color={'textAccent1'} toCopy={proposer}>
                   {proposer}
                 </ReducedTextAndCopy>
               </Flex>

src/components/Blocks/Detail.tsx

@@ -3,13 +3,13 @@ import { ensure0x, IChainBlockInfoResponse } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
 import { useDateFns } from '~i18n/use-date-fns'
-import { ResponsiveTextCopy } from '~components/Layout/CopyButton'
 import { GrNext, GrPrevious } from 'react-icons/gr'
 import { RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlocksHeight } from '~queries/blocks'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { QueryParamsTabs } from '~components/Layout/QueryParamsTabs'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 
 const HeightNavigator = ({ height }: { height: number }) => {
   const { data, isLoading } = useBlocksHeight({
@@ -70,7 +70,7 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
     {
       label: t('blocks.hash', { defaultValue: 'Hash' }),
       children: (
-        <ResponsiveTextCopy
+        <ReducedTextAndCopy
           breakPoint={{ base: true, lg: false }}
           p={0}
           color={'textAccent1'}
@@ -80,13 +80,13 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
           fontSize={'md'}
         >
           {hash}
-        </ResponsiveTextCopy>
+        </ReducedTextAndCopy>
       ),
     },
     {
       label: t('blocks.proposer', { defaultValue: 'Proposer' }),
       children: (
-        <ResponsiveTextCopy
+        <ReducedTextAndCopy
           breakPoint={{ base: true, md: false }}
           p={0}
           color={'textAccent1'}
@@ -96,7 +96,7 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
           fontSize={'md'}
         >
           {proposer}
-        </ResponsiveTextCopy>
+        </ReducedTextAndCopy>
       ),
     },
   ]

src/components/Layout/CopyButton.tsx

@@ -42,30 +42,34 @@ const withCopyLogic = (Component: typeof IconButton | typeof Button) => {
 export const CopyButton = withCopyLogic(Button)
 export const CopyButtonIcon = withCopyLogic(IconButton)
 
-export const ReducedTextAndCopy = ({ children, ...rest }: ICopyButton) => {
-  let text = children
-  if (typeof children === 'string' && children.length > 13) {
-    text = shortHex(children)
-  }
-  return (
-    <CopyButton fontWeight={'normal'} h={0} fontSize={'xs'} p={0} pt={1} {...rest}>
-      {text}
-    </CopyButton>
-  )
-}
-
 /**
- * Children with copy button that is shows ReducedTextAndCopy on small screens
+ * It shows a text with a copy button. If not breakpoint is defined it uses default one: { base: true, sm: false },
+ * @param reduced If it wants to be shown reduced independently of div size (for max length of 13)
+ * @param breakPoint If it wants to be shown reduced on a specific breakpoint. If null it will show the entire text
+ * @param children The text to be shown
  */
-export const ResponsiveTextCopy = ({
+export const ReducedTextAndCopy = ({
+  reduced = false,
   breakPoint = { base: true, sm: false },
-  ...props
+  children = '',
+  ...rest
 }: {
+  reduced?: boolean
   breakPoint?: Parameters<typeof useBreakpointValue>[0]
+  children?: string
 } & ICopyButton) => {
-  const isSmallScreen = useBreakpointValue(breakPoint)
-  if (isSmallScreen) {
-    return <ReducedTextAndCopy {...props} />
+  // If it wants to be shown reduced or is small screen via the breakpoint
+  if ((reduced && children.length > 13) || (breakPoint && useBreakpointValue(breakPoint))) {
+    return (
+      <CopyButton fontWeight={'normal'} h={0} fontSize={'xs'} p={0} pt={1} {...rest}>
+        {shortHex(children)}
+      </CopyButton>
+    )
   }
-  return <CopyButton {...props} />
+
+  return (
+    <CopyButton fontWeight={'normal'} h={0} fontSize={'xs'} p={0} pt={1} {...rest}>
+      {children}
+    </CopyButton>
+  )
 }

src/components/Organizations/Card.tsx

@@ -64,7 +64,7 @@ const OrganizationCardSkeleton = ({ electionCount: ec, ...rest }: IOrganizationC
           ) : (
             <OrganizationName fontWeight={'bold'} wordBreak='break-all' size='sm' />
           )}
-          <ReducedTextAndCopy color={'textAccent1'} toCopy={pid}>
+          <ReducedTextAndCopy reduced={true} color={'textAccent1'} toCopy={pid}>
             {pid}
           </ReducedTextAndCopy>
           {electionCount && (

src/components/Organizations/Detail.tsx

@@ -5,7 +5,7 @@ import { AccountData, ensure0x, PublishedElection } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { FaUserAlt } from 'react-icons/fa'
 import { useParams } from 'react-router-dom'
-import { ResponsiveTextCopy } from '~components/Layout/CopyButton'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { HeroHeaderLayout } from '~components/Layout/HeroHeaderLayout'
 import { LoadingCards } from '~components/Layout/Loading'
 import ShowRawButton from '~components/Layout/ShowRawButton'
@@ -29,9 +29,9 @@ const OrganizationDetail = () => {
       <HeroHeaderLayout header={<OrganizationHeader fallbackSrc={FallbackHeaderImg} />}>
         <VStack>
           <OrganizationName fontSize='4xl' wordBreak='break-word' />
-          <ResponsiveTextCopy color={'textAccent1'} toCopy={id} fontWeight={'normal'} h={0} fontSize={'md'}>
+          <ReducedTextAndCopy color={'textAccent1'} toCopy={id} fontWeight={'normal'} h={0} fontSize={'md'}>
             {id}
-          </ResponsiveTextCopy>
+          </ReducedTextAndCopy>
           <Flex
             as={'a'}
             target='blank'

src/components/Process/Card.tsx

@@ -1,5 +1,5 @@
 import { Box, Card, CardBody, CardProps, Flex, HStack, Link } from '@chakra-ui/react'
-import { OrganizationImage as Avatar, ElectionSchedule, ElectionTitle } from '@vocdoni/chakra-components'
+import { ElectionSchedule, ElectionTitle, OrganizationImage as Avatar } from '@vocdoni/chakra-components'
 import { ElectionProvider, OrganizationProvider, useElection, useOrganization } from '@vocdoni/react-providers'
 import { InvalidElection as InvalidElectionType, PublishedElection } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
@@ -79,7 +79,7 @@ const SmallOrganizationCard = ({ id }: { id: string }) => {
           }).toString()}
         />
       </Box>
-      <ReducedTextAndCopy color={'textAccent1'} size='sm' toCopy={id}>
+      <ReducedTextAndCopy reduced={true} color={'textAccent1'} size='sm' toCopy={id}>
         {name}
       </ReducedTextAndCopy>
     </Flex>

src/components/Process/Detail.tsx

@@ -46,7 +46,7 @@ import InvalidElection from '~components/Process/InvalidElection'
 import { FallbackHeaderImg, RoutePath } from '~constants'
 import { useElectionKeys, useElectionVotesList } from '~queries/processes'
 import { ucfirst } from '~utils/strings'
-import { ResponsiveTextCopy } from '~components/Layout/CopyButton'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 
 const Detail = () => {
   const { election } = useElection()
@@ -78,9 +78,9 @@ const Detail = () => {
           <ElectionStatusBadge status={election.status} />
 
           <ElectionTitle />
-          <ResponsiveTextCopy color={'textAccent1'} toCopy={id} fontWeight={'normal'} h={0} fontSize={'md'}>
+          <ReducedTextAndCopy color={'textAccent1'} toCopy={id} fontWeight={'normal'} h={0} fontSize={'md'}>
             {id}
-          </ResponsiveTextCopy>
+          </ReducedTextAndCopy>
         </VStack>
       </HeroHeaderLayout>
       {/*Basic details */}
@@ -259,7 +259,6 @@ const EnvelopeList = () => {
 }
 
 const EnvelopeCard = ({ envelope, count }: { envelope: IElectionVote; count: number }) => {
-  const { i18n } = useTranslation()
   return (
     <Card maxW='xs'>
       <CardHeader>

src/components/Transactions/TransactionCard.tsx

@@ -40,7 +40,7 @@ export const TransactionCard = ({
             <Box fontSize={'sm'}>
               <Flex gap={2} align={'center'}>
                 <Trans i18nKey='blocks.proposer'>Hash:</Trans>
-                <ReducedTextAndCopy color={'textAccent1'} toCopy={transactionHash}>
+                <ReducedTextAndCopy reduced={true} color={'textAccent1'} toCopy={transactionHash}>
                   {transactionHash}
                 </ReducedTextAndCopy>
               </Flex>

src/components/Validators/ValidatorCard.tsx

@@ -1,7 +1,7 @@
 import { Card, CardBody, Flex, HStack, Text } from '@chakra-ui/react'
 import { ensure0x, IChainValidator } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
-import { ResponsiveTextCopy } from '~components/Layout/CopyButton'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 
 export const ValidatorCard = (validator: IChainValidator) => {
   return (
@@ -16,7 +16,7 @@ export const ValidatorCard = (validator: IChainValidator) => {
               <Text fontWeight={'bold'}>
                 <Trans i18nKey='validators.pubkey'>PubKey:</Trans>
               </Text>
-              <ResponsiveTextCopy
+              <ReducedTextAndCopy
                 color={'textAccent1'}
                 toCopy={validator.pubKey}
                 fontWeight={'normal'}
@@ -25,7 +25,7 @@ export const ValidatorCard = (validator: IChainValidator) => {
                 p={0}
               >
                 {validator.pubKey}
-              </ResponsiveTextCopy>
+              </ReducedTextAndCopy>
             </HStack>
             <Text fontWeight={'bold'}>
               <Trans i18nKey='validators.voting_power' values={{ power: validator.power }}>