feat: add juror links in evidence voting history, top jurors leaderboard

Author: kemuru

web/src/components/EvidenceCard.tsx

@@ -176,11 +176,11 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
       <BottomShade>
         <AccountContainer>
           <Identicon size="24" string={sender} />
-          <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
+          <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
             <p>{shortenAddress(sender)}</p>
           </StyledA>
         </AccountContainer>
-        <StyledA href={transactionExplorerLink} rel="noreferrer" target="_blank">
+        <StyledA href={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
           <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
         </StyledA>
         {fileURI && fileURI !== "-" ? (

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 
 import { Answer } from "context/NewDisputeContext";
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { getVoteChoice } from "utils/getVoteChoice";
 import { isUndefined } from "utils/index";
 import { shortenAddress } from "utils/shortenAddress";
@@ -24,11 +25,13 @@ const TitleContainer = styled.div`
     `
   )}
 `;
+
 const AddressContainer = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
 `;
+
 const StyledLabel = styled.label<{ variant?: string }>`
   color: ${({ theme, variant }) => (variant ? theme[variant] : theme.primaryText)};
   font-size: 16px;
@@ -38,6 +41,16 @@ const StyledSmall = styled.small`
   font-size: 16px;
 `;
 
+const StyledA = styled.a`
+  :hover {
+    text-decoration: underline;
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+`;
+
 const VoteStatus: React.FC<{
   choice?: string;
   period: string;
@@ -75,11 +88,17 @@ const AccordionTitle: React.FC<{
   commited: boolean;
   hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
+  const addressExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${juror}`;
+  }, [juror]);
+
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
-        <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
+        <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+          <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
+        </StyledA>
       </AddressContainer>
       <VoteStatus {...{ choice, period, answers, isActiveRound, commited, hiddenVotes }} />
       <StyledLabel variant="secondaryPurple">

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 
 const Container = styled.div`
   display: flex;
@@ -19,15 +20,31 @@ const Container = styled.div`
   }
 `;
 
+const StyledA = styled.a`
+  :hover {
+    text-decoration: underline;
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+`;
+
 interface IJurorTitle {
   address: string;
 }
 
 const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
+  const addressExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`;
+  }, [address]);
+
   return (
     <Container>
       <IdenticonOrAvatar address={address} />
-      <AddressOrName address={address} />
+      <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+        <AddressOrName address={address} />
+      </StyledA>
     </Container>
   );
 };