Merge pull request #2027 from kleros/feat/ens-in-evidence

feat: ens in evidence

Author: alcercu

web/src/components/EvidenceCard.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
 import { useParams } from "react-router-dom";
 
@@ -11,7 +10,6 @@ import AttachmentIcon from "svgs/icons/attachment.svg";
 
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
-import { shortenAddress } from "utils/shortenAddress";
 
 import { type Evidence } from "src/graphql/graphql";
 import { getTxnExplorerLink } from "src/utils";
@@ -22,6 +20,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import { ExternalLink } from "./ExternalLink";
 import { InternalLink } from "./InternalLink";
+import JurorTitle from "pages/Home/TopJurors/JurorCard/JurorTitle";
 
 const StyledCard = styled(Card)`
   width: 100%;
@@ -100,15 +99,12 @@ const BottomShade = styled.div`
 `;
 
 const BottomLeftContent = styled.div`
-  display: block;
-
-  & > *:not(:last-child) {
-    margin-bottom: 8px;
-  }
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
 
   ${landscapeStyle(
     () => css`
-      display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
@@ -121,24 +117,6 @@ const BottomLeftContent = styled.div`
   )}
 `;
 
-const AccountContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-
-  canvas {
-    width: 24px;
-    height: 24px;
-  }
-
-  > * {
-    flex-basis: 1;
-    flex-shrink: 0;
-    margin: 0;
-  }
-`;
-
 const ExternalLinkHoverStyle = css`
   :hover {
     text-decoration: underline;
@@ -154,14 +132,6 @@ const ExternalLinkHoverStyle = css`
   }
 `;
 
-const Address = styled.p`
-  margin: 0;
-
-  :hover {
-    color: ${({ theme }) => theme.secondaryBlue};
-  }
-`;
-
 const StyledExternalLink = styled(ExternalLink)`
   ${ExternalLinkHoverStyle}
 `;
@@ -201,6 +171,23 @@ const FileLinkContainer = styled.div`
   margin-left: auto;
 `;
 
+const StyledJurorInternalLink = styled(InternalLink)`
+  label {
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  :hover {
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+
+  svg {
+    display: none;
+  }
+`;
+
 const AttachedFileText: React.FC = () => (
   <>
     <DesktopText>View attached file</DesktopText>
@@ -248,12 +235,9 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
       </TopContent>
       <BottomShade>
         <BottomLeftContent>
-          <AccountContainer>
-            <Identicon size="24" string={sender} />
-            <InternalLink to={profileLink}>
-              <Address>{shortenAddress(sender)}</Address>
-            </InternalLink>
-          </AccountContainer>
+          <StyledJurorInternalLink to={profileLink}>
+            <JurorTitle address={sender} />
+          </StyledJurorInternalLink>
           <StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
             <label>{formatDate(Number(timestamp), true)}</label>
           </StyledExternalLink>