diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index bd5a2ad4c..a887ca208 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -176,11 +176,11 @@ const EvidenceCard: React.FC = ({ - +

{shortenAddress(sender)}

- + {formatDate(Number(timestamp), true)} {fileURI && fileURI !== "-" ? ( diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index b10866975..4eaed0799 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/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 ( - {shortenAddress(juror)} + + {shortenAddress(juror)} + diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index e4b52af2b..6d2c68963 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/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 = ({ address }) => { + const addressExplorerLink = useMemo(() => { + return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`; + }, [address]); + return ( - + + + ); };