feat(web): new-stake-flow-v1

Author: tractorss

web/package.json

@@ -117,7 +117,7 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.5.1",
     "styled-components": "^5.3.3",
-    "viem": "^2.21.48",
-    "wagmi": "^2.13.0"
+    "viem": "^2.21.54",
+    "wagmi": "^2.13.3"
   }
 }

web/src/assets/svgs/icons/close-circle.svg

@@ -1,6 +1,7 @@
-import { Link } from "react-router-dom";
 import styled from "styled-components";
 
+import { Link } from "react-router-dom";
+
 export const ExternalLink = styled(Link)`
   :hover {
     text-decoration: underline;

web/src/components/ExternalLink.tsx

@@ -23,6 +23,7 @@ const courtDetailsQuery = graphql(`
       paidPNK
       timesPerPeriod
       feeForJuror
+      name
     }
   }
 `);

web/src/hooks/queries/useCourtDetails.ts

@@ -1,25 +1,28 @@
 import React, { useState, useMemo, useEffect } from "react";
 import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
 
 import { REFETCH_INTERVAL } from "consts/index";
-
 import { useReadSortitionModuleGetJurorBalance, useReadPnkBalanceOf } from "hooks/contracts/generated";
 import { useParsedAmount } from "hooks/useParsedAmount";
-
 import { commify, uncommify } from "utils/commify";
 import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+
 import { NumberInputField } from "components/NumberInputField";
+
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
 
 const StyledField = styled(NumberInputField)`
   height: fit-content;
+  input {
+    border-radius: 3px 0px 0px 3px;
+  }
 `;
 
 const LabelArea = styled.div`
@@ -62,26 +65,17 @@ const EnsureChainContainer = styled.div`
   button {
     height: 45px;
     border: 1px solid ${({ theme }) => theme.stroke};
+    border-radius: 0px 3px 3px 0px;
   }
 `;
 
 interface IInputDisplay {
   action: ActionType;
-  isSending: boolean;
-  setIsSending: (arg0: boolean) => void;
-  setIsPopupOpen: (arg0: boolean) => void;
   amount: string;
   setAmount: (arg0: string) => void;
 }
 
-const InputDisplay: React.FC<IInputDisplay> = ({
-  action,
-  isSending,
-  setIsSending,
-  setIsPopupOpen,
-  amount,
-  setAmount,
-}) => {
+const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
   const [errorMsg, setErrorMsg] = useState<string | undefined>();
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
@@ -147,12 +141,10 @@ const InputDisplay: React.FC<IInputDisplay> = ({
           <EnsureChainContainer>
             <StakeWithdrawButton
               {...{
+                amount,
                 parsedAmount,
                 action,
                 setAmount,
-                isSending,
-                setIsSending,
-                setIsPopupOpen,
                 setErrorMsg,
               }}
             />

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+
 import Skeleton from "react-loading-skeleton";
 
 import { commify } from "utils/commify";
@@ -13,6 +14,7 @@ const Container = styled.div`
   align-items: center;
   flex-wrap: wrap;
   gap: 0 8px;
+  justify-content: center;
 `;
 
 const TextWithTooltipContainer = styled.div`
@@ -48,13 +50,15 @@ interface IQuantityToSimulate {
   jurorCurrentSpecificStake: number | undefined;
   isStaking: boolean;
   amountToStake: number;
+  className?: string;
 }
 
 const QuantityToSimulate: React.FC<IQuantityToSimulate> = ({
   isStaking,
   jurorCurrentEffectiveStake,
   jurorCurrentSpecificStake,
   amountToStake,
+  className,
 }) => {
   const effectiveStakeDisplay = !isUndefined(jurorCurrentEffectiveStake) ? (
     `${commify(jurorCurrentEffectiveStake)} PNK`
@@ -85,7 +89,7 @@ const QuantityToSimulate: React.FC<IQuantityToSimulate> = ({
   );
 
   return (
-    <Container>
+    <Container {...{ className }}>
       <Quantity>{effectiveStakeDisplay}</Quantity>
       <TextWithTooltipContainer>
         <WithHelpTooltip