From f4cae057f091f2b721a8b7081d1dab07444d04d4 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:34:41 +0100 Subject: [PATCH 1/2] feat(web): new lockedstake design implementation --- web/src/components/CasesDisplay/index.tsx | 2 +- web/src/components/Field.tsx | 2 +- .../StakePanel/JurorStakeDisplay.tsx | 8 +- .../{CourtBranch.tsx => CourtName.tsx} | 7 +- .../Courts/CourtCard/DesktopCard.tsx | 58 -------------- .../Courts/CourtCard/LockedStake.tsx | 29 ------- .../Dashboard/Courts/CourtCard/MobileCard.tsx | 79 ------------------- .../Dashboard/Courts/CourtCard/Stake.tsx | 28 +++++-- .../Dashboard/Courts/CourtCard/index.tsx | 44 ++++++++--- web/src/pages/Dashboard/Courts/Header.tsx | 66 ++++++++++++++++ .../Dashboard/Courts/Header/CourtBranch.tsx | 7 -- .../Dashboard/Courts/Header/LockedStake.tsx | 49 ------------ .../pages/Dashboard/Courts/Header/Stake.tsx | 20 ----- .../pages/Dashboard/Courts/Header/index.tsx | 62 --------------- web/src/pages/Dashboard/Courts/index.tsx | 16 ++-- web/src/pages/Dashboard/JurorInfo/Header.tsx | 10 ++- 16 files changed, 140 insertions(+), 347 deletions(-) rename web/src/pages/Dashboard/Courts/CourtCard/{CourtBranch.tsx => CourtName.tsx} (82%) delete mode 100644 web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx delete mode 100644 web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx delete mode 100644 web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx create mode 100644 web/src/pages/Dashboard/Courts/Header.tsx delete mode 100644 web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx delete mode 100644 web/src/pages/Dashboard/Courts/Header/LockedStake.tsx delete mode 100644 web/src/pages/Dashboard/Courts/Header/Stake.tsx delete mode 100644 web/src/pages/Dashboard/Courts/Header/index.tsx diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index ed02354f7..03dd742e4 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -13,7 +13,7 @@ const Divider = styled.hr` `; const StyledTitle = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important; `; interface ICasesDisplay extends ICasesGrid { diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx index 352c45bad..226b8946c 100644 --- a/web/src/components/Field.tsx +++ b/web/src/components/Field.tsx @@ -18,7 +18,7 @@ const FieldContainer = styled.div` svg { fill: ${({ theme }) => theme.secondaryPurple}; margin-right: 8px; - width: 15px; + width: 14px; } .link { diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx index 940328bd1..5b42bbba8 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx @@ -7,7 +7,6 @@ import { useAccount } from "wagmi"; import { isUndefined } from "utils/index"; import Field from "components/Field"; import DiceIcon from "svgs/icons/dice.svg"; -import LockerIcon from "svgs/icons/locker.svg"; import PNKIcon from "svgs/icons/pnk.svg"; import { useCourtDetails } from "queries/useCourtDetails"; import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated"; @@ -101,14 +100,9 @@ const JurorBalanceDisplay = () => { name: "My Stake", value: `${format(jurorBalance?.[2])} PNK`, }, - { - icon: LockerIcon, - name: "Locked Stake", - value: `${format(jurorBalance?.[1])} PNK`, - }, { icon: DiceIcon, - name: "Juror odds", + name: "Juror Odds", value: jurorOdds, }, ]; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx similarity index 82% rename from web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx rename to web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx index 7c5d2dbb2..67c6e2fc1 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx @@ -9,6 +9,7 @@ const Container = styled.div` small { height: 100%; + font-weight: 600; } ${landscapeStyle( @@ -25,15 +26,15 @@ const StyledBreadcrumb = styled(Breadcrumb)` height: 100%; `; -interface ICourtBranch { +interface ICourtName { name: string; } -const CourtBranch: React.FC = ({ name }) => { +const CourtName: React.FC = ({ name }) => { return ( ); }; -export default CourtBranch; +export default CourtName; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx deleted file mode 100644 index cb6414b8c..000000000 --- a/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { Card as _Card } from "@kleros/ui-components-library"; -import CourtBranch from "./CourtBranch"; -import Stake from "./Stake"; -import LockedStake from "./LockedStake"; - -const Container = styled(_Card)` - display: none; - - flex-direction: row; - align-items: center; - justify-content: space-between; - height: auto; - width: 100%; - padding: 21.5px 32px 21.5px 27px; - border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; - flex-wrap: wrap; - gap: 20px; - - ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} - - ${landscapeStyle( - () => - css` - display: flex; - ` - )} -`; - -const StakesContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 32px; -`; - -interface IDesktopCard { - name: string; - stake: bigint; - lockedStake: bigint; -} - -const DesktopCard: React.FC = ({ name, stake, lockedStake }) => { - return ( - - - - - - - - ); -}; - -export default DesktopCard; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx deleted file mode 100644 index ef0458566..000000000 --- a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { formatUnits } from "viem"; - -const StyledLabel = styled.label` - display: flex; - justify-content: flex-end; - color: ${({ theme }) => theme.primaryText}; - font-size: 16px; - text-align: right; - - ${landscapeStyle( - () => css` - min-width: 107px; - ` - )} -`; - -interface ILockedStake { - lockedStake: bigint; -} - -const LockedStake: React.FC = ({ lockedStake }) => { - const formattedLockedStake = formatUnits(lockedStake, 18); - - return {`${formattedLockedStake} PNK`}; -}; -export default LockedStake; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx deleted file mode 100644 index f113b5964..000000000 --- a/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { Card as _Card } from "@kleros/ui-components-library"; -import CourtBranch from "./CourtBranch"; -import HeaderStake from "../Header/Stake"; -import HeaderLockedStake from "../Header/LockedStake"; -import Stake from "./Stake"; -import LockedStake from "./LockedStake"; - -const Container = styled(_Card)` - display: flex; - flex-direction: column; - align-items: center; - height: auto; - width: 100%; - padding: 24px; - border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; - flex-wrap: wrap; - gap: 18px; - - ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} - - ${landscapeStyle( - () => - css` - display: none; - ` - )} -`; - -const BottomSide = styled.div` - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; -`; - -const HeaderStakeAndStake = styled.div` - display: flex; - flex-direction: column; - width: 100%; - gap: 5px; - justify-content: flex-start; -`; - -const HeaderLockedStakeAndLockedStake = styled.div` - display: flex; - flex-direction: column; - width: 100%; - gap: 5px; - justify-content: flex-end; -`; - -interface IMobileCard { - name: string; - stake: bigint; - lockedStake: bigint; -} - -const MobileCard: React.FC = ({ name, stake, lockedStake }) => { - return ( - - - - - - - - - - - - - - ); -}; - -export default MobileCard; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index 29052973d..71b20e0ac 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -3,26 +3,42 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { formatUnits } from "viem"; -const StyledLabel = styled.label` +const Container = styled.div` display: flex; - font-weight: 600; - color: ${({ theme }) => theme.primaryText}; - font-size: 16px; + flex-direction: row; + gap: 16px; + justify-content: space-between; + width: 100%; ${landscapeStyle( () => css` justify-content: flex-end; + width: auto; ` )} `; +const StyledLabel = styled.label` + display: flex; + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; + font-size: 16px; + align-items: center; + gap: 32px; +`; + interface IStake { - stake: bigint; + stake: string; } const Stake: React.FC = ({ stake }) => { const formattedStake = formatUnits(stake, 18); - return {`${formattedStake} PNK`}; + return ( + + + {`${formattedStake} PNK`} + + ); }; export default Stake; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx index d707c9c1d..4cc0e16b9 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -1,21 +1,43 @@ import React from "react"; -import DesktopCard from "./DesktopCard"; -import MobileCard from "./MobileCard"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { Card as _Card } from "@kleros/ui-components-library"; +import CourtName from "./CourtName"; +import Stake from "./Stake"; + +const Container = styled(_Card)` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + height: auto; + width: 100%; + padding: 21px 24px 25px 19px; + border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; + flex-wrap: wrap; + gap: 12px; + + ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} + + ${landscapeStyle( + () => + css` + padding: 21.5px 32px 21.5px 27px; + ` + )} +`; interface ICourtCard { name: string; - stake: bigint; - lockedStake: bigint; + stake: string; } -const CourtCard: React.FC = ({ name, stake, lockedStake }) => { - const allProps = { name, stake, lockedStake }; - +const CourtCard: React.FC = ({ name, stake }) => { return ( - <> - - - + + + + ); }; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx new file mode 100644 index 000000000..2c8902e2a --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { formatUnits } from "viem"; +import { isUndefined } from "utils/index"; +import LockerIcon from "svgs/icons/locker.svg"; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: 12px; + align-items: flex-start; + justify-content: space-between; + margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + + ${landscapeStyle( + () => css` + flex-direction: row; + ` + )} +`; + +const LockedPnk = styled.div` + display: flex; + flex-wrap: nowrap; + gap: 8px; + justify-content: flex-start; + + ${landscapeStyle( + () => css` + align-self: center; + ` + )} +`; + +const StyledTitle = styled.h1` + margin-bottom: 0; +`; + +const StyledLockerIcon = styled(LockerIcon)` + fill: ${({ theme }) => theme.secondaryPurple}; + width: 14px; +`; + +interface IHeader { + lockedStake: string; +} + +const Header: React.FC = ({ lockedStake }) => { + const formattedLockedStake = !isUndefined(lockedStake) && formatUnits(lockedStake, 18); + + return ( + + My Courts + {!isUndefined(lockedStake) ? ( + + + + {`${formattedLockedStake} PNK`} + + ) : null} + + ); +}; +export default Header; diff --git a/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx deleted file mode 100644 index b3666599c..000000000 --- a/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const CourtBranch: React.FC = () => { - return ; -}; - -export default CourtBranch; diff --git a/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx b/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx deleted file mode 100644 index 55619d278..000000000 --- a/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; - -const Container = styled.div` - display: flex; - align-items: center; - width: 100%; - justify-content: flex-end; - - ${landscapeStyle( - () => - css` - width: 110px; - ` - )} -`; - -const StyledLockedStakeLabel = styled.label` - display: flex; - font-size: 12px !important; - - ${landscapeStyle( - () => - css` - font-size: 14px !important; - ` - )} -`; - -const lockedStakeTooltipMsg = - "When a juror is selected to arbitrate a case, part of their stake (PNK) is " + - "locked until the case is resolved. Jurors whose vote is coherent with the " + - "final jury decision have their locked stake released. Jurors whose vote " + - "is not coherent with the final jury decision, lose their locked stake. " + - "The locked stake of incoherent jurors is redistributed as incentives for " + - "the coherent jurors."; - -const LockedStake: React.FC = () => { - return ( - - - Locked Stake - - - ); -}; -export default LockedStake; diff --git a/web/src/pages/Dashboard/Courts/Header/Stake.tsx b/web/src/pages/Dashboard/Courts/Header/Stake.tsx deleted file mode 100644 index 5897407a2..000000000 --- a/web/src/pages/Dashboard/Courts/Header/Stake.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; - -const StyledLabel = styled.label` - display: flex; - font-size: 12px !important; - - ${landscapeStyle( - () => - css` - font-size: 14px !important; - ` - )} -`; - -const Stake: React.FC = () => { - return Stake; -}; -export default Stake; diff --git a/web/src/pages/Dashboard/Courts/Header/index.tsx b/web/src/pages/Dashboard/Courts/Header/index.tsx deleted file mode 100644 index e58e3e14a..000000000 --- a/web/src/pages/Dashboard/Courts/Header/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import CourtBranch from "./CourtBranch"; -import Stake from "./Stake"; -import LockedStake from "./LockedStake"; - -const Container = styled.div` - display: none; - - ${landscapeStyle( - () => - css` - display: flex; - flex-direction: column; - ` - )} -`; - -const CourtBranchAndStakesContainer = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - height: 100%; - background-color: transparent; - padding: 24px; - flex-wrap: wrap; - padding: 23.15px 32px; -`; - -const StakesContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 32px; -`; - -const Divider = styled.hr` - display: flex; - border: none; - height: 1px; - background-color: ${({ theme }) => theme.stroke}; - margin: 0; -`; - -const Header: React.FC = () => { - return ( - - - - - - - - - - - ); -}; - -export default Header; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 186eb34bb..a802948c1 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -9,10 +9,6 @@ import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; const Container = styled.div` margin-top: 64px; - - h1 { - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - } `; const CourtCardsContainer = styled.div` @@ -35,22 +31,22 @@ const StyledLabel = styled.label` const Courts: React.FC = () => { const { address } = useAccount(); const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(address?.toLowerCase() as `0x${string}`); - const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked, locked }) => staked > 0 || locked > 0); + const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0); const isStaked = stakedCourts && stakedCourts.length > 0; + const lockedStake = stakeData?.jurorTokensPerCourts?.[0]?.locked; return ( -

My Courts

+
{isLoading ? : null} {!isStaked && !isLoading ? You are not staked in any court : null} {isStaked && !isLoading ? ( <> -
{stakeData?.jurorTokensPerCourts - ?.filter(({ staked, locked }) => staked > 0 || locked > 0) - .map(({ court: { id, name }, staked, locked }) => ( - + ?.filter(({ staked }) => staked > 0) + .map(({ court: { id, name }, staked }) => ( + ))} diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 4e401131c..0e9942c88 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -9,24 +9,26 @@ import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; const Container = styled.div` display: flex; flex-direction: column; - align-items: center; - justify-content: space-between; + justify-content: flex-start; + margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + gap: 12px; ${landscapeStyle( () => css` flex-direction: row; + align-items: center; + justify-content: space-between; ` )} `; const StyledTitle = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: 0; `; const LinksContainer = styled.div` display: flex; color: ${({ theme }) => theme.primaryBlue}; - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); align-items: center; gap: 24px; flex-wrap: wrap; From 20b219181c6cbb2f2e47da01d3c4731f7b056e56 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Fri, 10 Nov 2023 01:52:00 +0100 Subject: [PATCH 2/2] fix(web): tiny code smell --- web/src/pages/Dashboard/Courts/index.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index a802948c1..59d233a58 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -41,15 +41,13 @@ const Courts: React.FC = () => { {isLoading ? : null} {!isStaked && !isLoading ? You are not staked in any court : null} {isStaked && !isLoading ? ( - <> - - {stakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) - .map(({ court: { id, name }, staked }) => ( - - ))} - - + + {stakeData?.jurorTokensPerCourts + ?.filter(({ staked }) => staked > 0) + .map(({ court: { id, name }, staked }) => ( + + ))} + ) : null} );