From 60cfccda0774428ad63bcf4099da60b52e948c93 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:56:34 +0200
Subject: [PATCH] feat(web): staking flow desktop figma style
---
web/src/assets/svgs/styled/three-pnks.svg | 19 ++++
web/src/components/Field.tsx | 60 ++++++++++--
web/src/components/NumberInputField.tsx | 15 +++
.../CourtDetails/StakePanel/InputDisplay.tsx | 64 +++++++------
.../StakePanel/JurorStakeDisplay.tsx | 16 +++-
.../StakePanel/StakeWithdrawButton.tsx | 8 +-
.../Courts/CourtDetails/StakePanel/index.tsx | 95 ++++++++++++++-----
7 files changed, 212 insertions(+), 65 deletions(-)
create mode 100644 web/src/assets/svgs/styled/three-pnks.svg
diff --git a/web/src/assets/svgs/styled/three-pnks.svg b/web/src/assets/svgs/styled/three-pnks.svg
new file mode 100644
index 000000000..92c212b7d
--- /dev/null
+++ b/web/src/assets/svgs/styled/three-pnks.svg
@@ -0,0 +1,19 @@
+
diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
index c29842c6b..54e932b48 100644
--- a/web/src/components/Field.tsx
+++ b/web/src/components/Field.tsx
@@ -1,16 +1,17 @@
import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
import { Link } from "react-router-dom";
-import styled from "styled-components";
const FieldContainer = styled.div`
- width: ${({ isList }) => (isList ? "auto" : "100%")};
display: flex;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
+ width: 100%;
.value {
- flex-grow: ${({ isList }) => (isList ? "0" : "1")};
- text-align: ${({ isList }) => (isList ? "center" : "end")};
+ flex-grow: 1;
+ text-align: end;
color: ${({ theme }) => theme.primaryText};
}
svg {
@@ -24,11 +25,44 @@ const FieldContainer = styled.div`
cursor: pointer;
}
}
+ ${({ isList }) =>
+ isList &&
+ css`
+ ${landscapeStyle(
+ () => css`
+ width: auto;
+ .value {
+ flex-grow: 0;
+ text-align: center;
+ }
+ `
+ )}
+ `};
+ ${({ isOverview, isJurorBalance }) =>
+ (isOverview || isJurorBalance) &&
+ css`
+ ${landscapeStyle(
+ () => css`
+ width: auto;
+ gap: 8px;
+ .value {
+ flex-grow: 0;
+ text-align: none;
+ font-weight: 600;
+ }
+ svg {
+ margin-right: 0;
+ }
+ `
+ )}
+ `};
`;
type FieldContainerProps = {
width?: string;
isList?: boolean;
+ isOverview?: boolean;
+ isJurorBalance?: boolean;
};
interface IField {
@@ -38,12 +72,23 @@ interface IField {
link?: string;
width?: string;
displayAsList?: boolean;
+ isOverview?: boolean;
+ isJurorBalance?: boolean;
}
-const Field: React.FC = ({ icon: Icon, name, value, link, width, displayAsList }) => {
+const Field: React.FC = ({
+ icon: Icon,
+ name,
+ value,
+ link,
+ width,
+ displayAsList,
+ isOverview,
+ isJurorBalance,
+}) => {
return (
-
- {!displayAsList && (
+
+ {(!displayAsList || isOverview || isJurorBalance) && (
<>
@@ -59,5 +104,4 @@ const Field: React.FC = ({ icon: Icon, name, value, link, width, display
);
};
-
export default Field;
diff --git a/web/src/components/NumberInputField.tsx b/web/src/components/NumberInputField.tsx
index 8cd4b627f..b2b427363 100644
--- a/web/src/components/NumberInputField.tsx
+++ b/web/src/components/NumberInputField.tsx
@@ -10,6 +10,21 @@ const Container = styled.div`
const StyledField = styled(Field)`
width: 100%;
height: fit-content;
+
+ input[type="number"]::-webkit-inner-spin-button,
+ input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ appearance: none;
+ }
+ input[type="number"] {
+ -moz-appearance: textfield;
+ }
+ input {
+ border: 1px solid ${({ theme }) => theme.stroke};
+ border-right: none;
+ height: 45px;
+ font-size: 16px;
+ }
`;
interface INumberInputField {
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
index 1da445fcb..152612b9a 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
@@ -14,7 +14,6 @@ import { commify, uncommify } from "utils/commify";
import { EnsureChain } from "components/EnsureChain";
const StyledField = styled(NumberInputField)`
- width: 100%;
height: fit-content;
`;
@@ -33,6 +32,13 @@ const InputArea = styled.div`
flex-direction: column;
align-items: center;
gap: 12px;
+ width: 100%;
+`;
+
+const InputFieldAndButton = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
`;
interface IInputDisplay {
@@ -87,35 +93,37 @@ const InputDisplay: React.FC = ({
- {
- setAmount(e);
- }}
- placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
- message={
- isStaking
- ? `You need to stake at least ${formatPNK(courtDetails?.court.minStake ?? 0n, 3)} PNK. ` +
- "You may need two transactions, one to increase allowance, the other to stake."
- : `You need to either withdraw all or keep at least ${formatPNK(
- courtDetails?.court.minStake ?? 0n,
- 3
- )} PNK.`
- }
- formatter={(number: string) => commify(roundNumberDown(Number(number)))}
- />
-
-
+ {
+ setAmount(e);
}}
+ placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
+ // message={
+ // isStaking
+ // ? `You need to stake at least ${formatPNK(courtDetails?.court.minStake ?? 0n, 3)} PNK. ` +
+ // "You may need two transactions, one to increase allowance, the other to stake."
+ // : `You need to either withdraw all or keep at least ${formatPNK(
+ // courtDetails?.court.minStake ?? 0n,
+ // 3
+ // )} PNK.`
+ // }
+ formatter={(number: string) => commify(roundNumberDown(Number(number)))}
/>
-
+
+
+
+
);
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
index 02a9fbe10..900c965cf 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
import { useParams } from "react-router-dom";
import { formatEther } from "viem";
import { useAccount } from "wagmi";
@@ -13,10 +14,21 @@ import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
const Container = styled.div`
display: flex;
+ width: 100%;
flex-direction: column;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
+
+ ${landscapeStyle(
+ () => css`
+ margin-top: 32px;
+ gap: 32px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ `
+ )}
`;
const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
@@ -104,7 +116,7 @@ const JurorBalanceDisplay = () => {
return (
{data.map(({ icon, name, value }) => (
-
+
))}
);
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 24394eb21..bf4a02cba 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -1,4 +1,5 @@
import React, { useMemo } from "react";
+import styled from "styled-components";
import { useParams } from "react-router-dom";
import { useAccount, usePublicClient } from "wagmi";
import { Button } from "@kleros/ui-components-library";
@@ -17,6 +18,11 @@ import { wrapWithToast } from "utils/wrapWithToast";
import { isUndefined } from "utils/index";
import { EnsureChain } from "components/EnsureChain";
+const StyledStakeWithdrawButton = styled(Button)`
+ border: 1px solid ${({ theme }) => theme.stroke};
+ height: 45px;
+`;
+
export enum ActionType {
allowance = "allowance",
stake = "stake",
@@ -129,7 +135,7 @@ const StakeWithdrawButton: React.FC = ({
const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
return (
-