feat: setup new profile page structure, new juror card style, add tabs, style tweaks, refactors

Author: kemuru

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx renamed to web/src/components/JurorLink.tsx

@@ -1,11 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
+import { useAccount } from "wagmi";
+
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
+
 import ArrowIcon from "svgs/icons/arrow.svg";
+import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
 import { StyledArrowLink } from "components/StyledArrowLink";
-import { useAccount } from "wagmi";
 
 const Container = styled.div`
  display: flex;
@@ -36,26 +40,34 @@ export const ReStyledArrowLink = styled(StyledArrowLink)`
  }
 `;
 
-interface IJurorTitle {
+interface IJurorLink {
  address: string;
+ isInternalLink?: boolean;
 }
 
-const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
+const JurorLink: React.FC<IJurorLink> = ({ address, isInternalLink = true }) => {
  const { isConnected, address: connectedAddress } = useAccount();
  const profileLink =
  isConnected && connectedAddress?.toLowerCase() === address.toLowerCase()
  ? "/profile/1/desc/all"
  : `/profile/1/desc/all?address=${address}`;
+ const addressExplorerLink = useMemo(() => {
+ return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`;
+ }, [address]);
 
  return (
  <Container>
  <IdenticonOrAvatar address={address} />
- <ReStyledArrowLink to={profileLink}>
+ <ReStyledArrowLink
+ to={isInternalLink ? profileLink : addressExplorerLink}
+ rel={`${isInternalLink ? "" : "noopener noreferrer"}`}
+ target={`${isInternalLink ? "" : "_blank"}`}
+ >
  <AddressOrName address={address} />
- <ArrowIcon />
+ {isInternalLink ? <ArrowIcon /> : <NewTabIcon />}
  </ReStyledArrowLink>
  </Container>
  );
 };
 
-export default JurorTitle;
+export default JurorLink;

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import Coherence from "pages/Profile/JurorInfo/Coherence";
-import PixelArt from "pages/Profile/JurorInfo/PixelArt";
+import Coherence from "pages/Profile/JurorInfo/BottomContent/Coherence";
+import PixelArt from "pages/Profile/JurorInfo/BottomContent/PixelArt";
 
 import Template from "./MainStructureTemplate";
 import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";

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

@@ -8,7 +8,7 @@ import { getVoteChoice } from "utils/getVoteChoice";
 import { isUndefined } from "utils/index";
 
 import { InternalLink } from "components/InternalLink";
-import JurorTitle from "pages/Home/TopJurors/JurorCard/JurorTitle";
+import JurorLink from "components/JurorLink";
 
 const TitleContainer = styled.div`
  display: flex;
@@ -92,7 +92,7 @@ const AccordionTitle: React.FC<{
  <TitleContainer>
  <AddressContainer>
  <StyledInternalLink to={profileLink}>
- <JurorTitle address={juror} />
+ <JurorLink address={juror} />
  </StyledInternalLink>
  </AddressContainer>
  <VoteStatus {...{ choice, period, answers, isActiveRound, commited, hiddenVotes }} />

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

@@ -7,9 +7,9 @@ import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import Coherence from "./Coherence";
 import JurorLevel from "./JurorLevel";
-import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
+import JurorLink from "components/JurorLink";
 
 const Container = styled.div<{ renderRank?: boolean }>`
  ${hoverShortTransitionTiming}
@@ -57,7 +57,7 @@ const DesktopCard: React.FC<IDesktopCard> = ({
  return (
  <Container renderRank={renderRank}>
  {renderRank && <Rank rank={rank} />}
- <JurorTitle address={address} />
+ <JurorLink address={address} />
  <Rewards address={address} />
  <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
  <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />

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

@@ -6,7 +6,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { getUserLevelData } from "utils/userLevelCalculation";
 import { getCoherencePercent } from "utils/getCoherencePercent";
 
-import PixelArt from "pages/Profile/JurorInfo/PixelArt";
+import PixelArt from "pages/Profile/JurorInfo/BottomContent/PixelArt";
 
 const Container = styled.div`
  display: flex;

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

@@ -9,9 +9,9 @@ import HeaderRewards from "../Header/Rewards";
 
 import Coherence from "./Coherence";
 import JurorLevel from "./JurorLevel";
-import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
+import JurorLink from "components/JurorLink";
 
 const Container = styled.div`
  ${hoverShortTransitionTiming}
@@ -97,7 +97,7 @@ const MobileCard: React.FC<IMobileCard> = ({
  <TopSide>
  <RankAndTitle>
  {rank ? <Rank rank={rank} /> : null}
- <JurorTitle address={address} />
+ <JurorLink address={address} />
  </RankAndTitle>
  <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
  </TopSide>

web/src/pages/Profile/JurorInfo/Coherence.tsx renamed to web/src/pages/Profile/JurorInfo/BottomContent/Coherence.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+
 import { CircularProgress } from "@kleros/ui-components-library";
 
-import { landscapeStyle } from "styles/landscapeStyle";
+import { ILevelCriteria } from "utils/userLevelCalculation";
 
 import WithHelpTooltip from "components/WithHelpTooltip";
 
@@ -26,10 +28,7 @@ const tooltipMsg =
  " the majority of jurors it's considered a Coherent Vote.";
 
 interface ICoherence {
- userLevelData: {
- level: number;
- title: string;
- };
+ userLevelData: ILevelCriteria;
  totalCoherentVotes: number;
  totalResolvedVotes: number;
  isMiniGuide: boolean;

web/src/pages/Profile/JurorInfo/JurorRewards.tsx renamed to web/src/pages/Profile/JurorInfo/BottomContent/JurorRewards.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-import { useAccount } from "wagmi";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { CoinIds } from "consts/coingecko";
 import { useCoinPrice } from "hooks/useCoinPrice";
@@ -10,14 +10,27 @@ import { getFormattedRewards } from "utils/jurorRewardConfig";
 import { useUserQuery } from "queries/useUser";
 
 import WithHelpTooltip from "components/WithHelpTooltip";
-
-import TokenRewards from "./TokenRewards";
+import TokenRewards from "../TokenRewards";
 
 const Container = styled.div`
  display: flex;
  flex-direction: column;
- align-items: flex-start;
+ align-items: center;
  width: auto;
+ gap: 24px;
+
+ ${landscapeStyle(
+ () => css`
+ align-items: flex-start;
+ `
+ )}
+`;
+
+const TokenRewardsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 16px;
 `;
 
 const tooltipMsg =
@@ -42,9 +55,11 @@ const JurorRewards: React.FC<IJurorRewards> = ({ addressToQuery }) => {
  <WithHelpTooltip place="bottom" {...{ tooltipMsg }}>
  <label> Juror Rewards </label>
  </WithHelpTooltip>
- {formattedRewards.map(({ token, amount, value }) => (
- <TokenRewards key={token} {...{ token }} amount={amount} value={value} />
- ))}
+ <TokenRewardsContainer>
+ {formattedRewards.map(({ token, amount, value }) => (
+ <TokenRewards key={token} {...{ token }} amount={amount} value={value} />
+ ))}
+ </TokenRewardsContainer>
  </Container>
  );
 };

web/src/pages/Profile/JurorInfo/PixelArt.tsx renamed to web/src/pages/Profile/JurorInfo/BottomContent/PixelArt.tsx

@@ -9,6 +9,11 @@ import platoImage from "assets/pngs/dashboard/plato.png";
 import pythagorasImage from "assets/pngs/dashboard/pythagoras.png";
 import socratesImage from "assets/pngs/dashboard/socrates.png";
 
+const Container = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
 interface IStyledImage {
  show: boolean;
  width: number | string;
@@ -42,7 +47,7 @@ interface IPixelArt {
 const PixelArt: React.FC<IPixelArt> = ({ level, width, height }) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  return (
- <div>
+ <Container>
  {!imageLoaded && <StyledSkeleton width={width} height={height} />}
  <StyledImage
  src={images[level]}
@@ -52,7 +57,7 @@ const PixelArt: React.FC<IPixelArt> = ({ level, width, height }) => {
  width={width}
  height={height}
  />
- </div>
+ </Container>
  );
 };
 

web/src/pages/Profile/JurorInfo/BottomContent/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { ILevelCriteria } from "utils/userLevelCalculation";
+
+import PixelArt from "./PixelArt";
+import Coherence from "./Coherence";
+import JurorRewards from "./JurorRewards";
+import StakingRewards from "../StakingRewards";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+
+ gap: 32px;
+ width: 100%;
+ height: auto;
+
+ ${landscapeStyle(
+ () => css`
+ flex-direction: row;
+ align-items: flex-start;
+ `
+ )}
+`;
+
+const LeftContent = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 48px;
+ flex-direction: column;
+
+ ${landscapeStyle(
+ () => css`
+ flex-direction: row;
+ `
+ )}
+`;
+
+interface IBottomContent {
+ userLevelData: ILevelCriteria;
+ totalCoherentVotes: number;
+ totalResolvedVotes: number;
+ addressToQuery: `0x${string}`;
+}
+
+const BottomContent: React.FC<IBottomContent> = ({
+ userLevelData,
+ totalCoherentVotes,
+ totalResolvedVotes,
+ addressToQuery,
+}) => {
+ return (
+ <Container>
+ <LeftContent>
+ <PixelArt level={userLevelData.level} width="189px" height="189px" />
+ <Coherence isMiniGuide={false} {...{ userLevelData, totalCoherentVotes, totalResolvedVotes }} />
+ <JurorRewards {...{ addressToQuery }} />
+ </LeftContent>
+ <StakingRewards />
+ </Container>
+ );
+};
+export default BottomContent;