fix: standardize address and transaction hash formatting

components/Account/index.tsx

@@ -1,3 +1,4 @@
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Link as A } from "@livepeer/design-system";
 import { useAccountAddress, useEnsData } from "hooks";
 import Link from "next/link";
@@ -52,11 +53,7 @@ const Account = () => {
           >
             <AccountIcon />
           </Flex>
-          <Box>
-            {ens?.name
-              ? ens.name
-              : accountAddress.replace(accountAddress.slice(6, 38), "…")}
-          </Box>
+          <Box>{ens?.name ? ens.name : formatAddress(accountAddress)}</Box>
         </A>
       </Flex>
     </Box>

components/AccountCell/index.tsx

@@ -1,4 +1,4 @@
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import { Box, Flex } from "@livepeer/design-system";
 import { useEnsData } from "hooks";
 import { QRCodeCanvas } from "qrcode.react";
@@ -88,7 +88,7 @@ const Index = ({ active, address }) => {
           <Box css={{ fontWeight: 600 }}>
             {identity?.name
               ? textTruncate(identity.name, 12, "…")
-              : address.replace(address.slice(5, 36), "…")}
+              : formatAddress(address)}
           </Box>
         </Flex>
       </Flex>

components/Claim/index.tsx

@@ -1,6 +1,7 @@
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { l2Migrator } from "@lib/api/abis/bridge/L2Migrator";
 import { getL2MigratorAddress } from "@lib/api/contracts";
+import { formatAddress } from "@lib/utils";
 import { Box, Button, Container, Flex, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
 import { constants, ethers } from "ethers";
@@ -202,10 +203,7 @@ const Claim = () => {
               borderBottom: "1px solid rgba(255,255,255, .2)",
             }}
           >
-            {migrationParams.delegate.replace(
-              migrationParams.delegate.slice(6, 38),
-              "…"
-            )}
+            {formatAddress(migrationParams.delegate)}
           </Box>
         </Box>
         <Flex css={{ marginTop: "$3", alignItems: "center" }}>

components/DelegatingView/index.tsx

@@ -1,7 +1,7 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import Stat from "@components/Stat";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { checkAddressEquality } from "@lib/utils";
+import { checkAddressEquality, formatAddress } from "@lib/utils";
 import { Box, Button, Flex, Link as A, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
@@ -167,10 +167,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 <Box>
                   {delegateIdentity?.name
                     ? delegateIdentity?.name
-                    : delegator?.delegate?.id.replace(
-                        delegator?.delegate?.id.slice(7, 37),
-                        "…"
-                      )}
+                    : formatAddress(delegator?.delegate?.id)}
                 </Box>
               }
             />{" "}

components/DelegatingWidget/Header.tsx

@@ -1,4 +1,5 @@
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading } from "@livepeer/design-system";
 import { QRCodeCanvas } from "qrcode.react";
 
@@ -58,7 +59,7 @@ const Header = ({
         <Heading size="1" css={{ fontWeight: 700 }}>
           {delegateProfile?.name
             ? delegateProfile.name
-            : transcoder?.id.replace(transcoder.id.slice(7, 37), "…")}
+            : formatAddress(transcoder?.id)}
         </Heading>
         <Box
           css={{

components/HistoryView/index.tsx

@@ -1,5 +1,6 @@
 import Spinner from "@components/Spinner";
 import dayjs from "@lib/dayjs";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Card as CardBase,
@@ -185,11 +186,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Delegated with{" "}
-                {event.newDelegate.id.replace(
-                  event.newDelegate.id.slice(7, 37),
-                  "…"
-                )}
+                Delegated with {formatAddress(event.newDelegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -208,10 +205,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -271,10 +265,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -312,8 +303,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Redelegated with{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Redelegated with {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -332,10 +322,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -378,8 +365,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Undelegated from{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Undelegated from {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -398,10 +384,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -463,10 +446,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -526,10 +506,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -593,10 +570,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -655,10 +629,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -717,10 +688,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -780,10 +748,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -848,10 +813,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>

components/OrchestratorList/index.tsx

@@ -11,7 +11,7 @@ import {
   ROIInflationChange,
   ROITimeHorizon,
 } from "@lib/roi";
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import {
   Badge,
   Box,
@@ -309,7 +309,7 @@ const OrchestratorList = ({
                     </Flex>
                   ) : (
                     <Box css={{ fontWeight: 600 }}>
-                      {row.values.id.replace(row.values.id.slice(7, 37), "…")}
+                      {formatAddress(row.values.id)}
                     </Box>
                   )}
                   {/* {(row?.original?.daysSinceChangeParams ??

components/PerformanceList/index.tsx

@@ -4,7 +4,7 @@ import Table from "@components/Table";
 import { Pipeline } from "@lib/api/types/get-available-pipelines";
 import { AllPerformanceMetrics } from "@lib/api/types/get-performance";
 import { Region } from "@lib/api/types/get-regions";
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import { Badge, Box, Flex, Link as A, Skeleton } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { OrchestratorsQueryResult } from "apollo";
@@ -154,7 +154,7 @@ const PerformanceList = ({
                   </Flex>
                 ) : (
                   <Box css={{ fontWeight: 600 }}>
-                    {row.values.id.replace(row.values.id.slice(7, 37), "…")}
+                    {formatAddress(row.values.id)}
                   </Box>
                 )}
                 {typeof row.values.scores != "undefined" &&

components/Profile/index.tsx

@@ -1,6 +1,7 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import ShowMoreRichText from "@components/ShowMoreRichText";
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading, Link as A, Text } from "@livepeer/design-system";
 import {
   CheckIcon,
@@ -107,9 +108,7 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                   fontWeight: 700,
                 }}
               >
-                {identity?.name
-                  ? identity.name
-                  : account.replace(account.slice(5, 39), "…")}
+                {identity?.name ? identity.name : formatAddress(account)}
                 <ExplorerTooltip
                   content={`${copied ? "Copied" : "Copy address to clipboard"}`}
                 >

components/Search/index.tsx

@@ -1,4 +1,5 @@
 import Spinner from "@components/Spinner";
+import { formatAddress } from "@lib/utils";
 import {
   Box,
   Dialog,
@@ -182,14 +183,10 @@ const Index = ({ css = {}, ...props }) => {
                     <Flex>
                       <Text>
                         {result.item.name
-                          ? `${result.item.name} (${result.item.id.replace(
-                              result.item.id.slice(5, 39),
-                              "…"
+                          ? `${result.item.name} (${formatAddress(
+                              result.item.id
                             )})`
-                          : result.item.id.replace(
-                              result.item.id.slice(7, 37),
-                              "…"
-                            )}
+                          : formatAddress(result.item.id, 8, 6)}
                       </Text>
                     </Flex>
                     <Box as={ArrowRightIcon} />

components/StakeTransactions/index.tsx

@@ -5,6 +5,7 @@ import { parseEther } from "viem";
 
 import {
   abbreviateNumber,
+  formatAddress,
   getHint,
   simulateNewActiveSetOrder,
 } from "../../lib/utils";
@@ -66,11 +67,7 @@ const Index = ({ delegator, transcoders, currentRound, isMyAccount }) => {
                 >
                   <Box>
                     <Box css={{ marginBottom: "$1" }}>
-                      Undelegating from{" "}
-                      {lock.delegate.id.replace(
-                        lock.delegate.id.slice(7, 37),
-                        "…"
-                      )}
+                      Undelegating from {formatAddress(lock.delegate.id)}
                     </Box>
                     <Text variant="neutral" size="1">
                       Tokens will be available for withdrawal in approximately{" "}
@@ -140,13 +137,7 @@ const Index = ({ delegator, transcoders, currentRound, isMyAccount }) => {
                     justifyContent: "space-between",
                   }}
                 >
-                  <Box>
-                    Undelegated from{" "}
-                    {lock.delegate.id.replace(
-                      lock.delegate.id.slice(7, 37),
-                      "…"
-                    )}
-                  </Box>
+                  <Box>Undelegated from {formatAddress(lock.delegate.id)}</Box>
 
                   <Flex css={{ alignItems: "center" }}>
                     {isMyAccount && (

components/TransactionsList/index.tsx

@@ -1,5 +1,6 @@
 import Table from "@components/Table";
 import dayjs from "@lib/dayjs";
+import { formatTransactionHash } from "@lib/utils";
 import { Badge, Box, Flex, Link as A, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
 import { EventsQueryResult } from "apollo";
@@ -79,7 +80,7 @@ const Transaction = (props: { id: string | undefined }) => {
       }
     >
       <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
-        {props.id ? props.id.replace(props.id.slice(6, 62), "…") : "N/A"}
+        {props.id ? formatTransactionHash(props.id) : "N/A"}
         <Box
           css={{ marginLeft: "$1", width: 15, height: 15 }}
           as={ArrowTopRightIcon}