Showcase orchestrator voting activity in the UI

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={{