feat(web): new-stake-flow

web/package.json

@@ -81,12 +81,12 @@
     "@kleros/kleros-app": "workspace:^",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^2.15.0",
+    "@kleros/ui-components-library": "^2.16.0",
     "@lifi/wallet-management": "^3.4.5",
     "@lifi/widget": "^3.12.2",
     "@sentry/react": "^7.120.0",
     "@sentry/tracing": "^7.120.0",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query": "^5.56.2",
     "@types/react-modal": "^3.16.3",
     "@wagmi/connectors": "^5.5.0",
     "@wagmi/core": "^2.15.0",

web/src/components/ExternalLink.tsx

@@ -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/Spinner.tsx

@@ -0,0 +1,27 @@
+import styled, { keyframes } from "styled-components";
+
+import SpinnerIcon from "svgs/icons/spinner.svg";
+
+const rotating = keyframes`
+    0%{
+      transform: rotate(0deg);
+    }
+    50%{
+      transform: rotate(180deg);
+    }
+    100%{
+      transform: rotate(360deg);
+    }
+`;
+
+const Spinner = styled(SpinnerIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  animation: ${rotating} 2s ease-in-out infinite normal;
+`;
+
+export default Spinner;

web/src/components/TxnHash.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
+
+import { ExternalLink } from "./ExternalLink";
+
+const TxnLabel = styled.label<{ variant: string }>`
+  display: flex;
+  gap: 4px;
+  color: ${({ theme, variant }) => (variant === "pending" ? theme.primaryBlue : theme[variant])};
+  cursor: pointer;
+  path {
+    fill: ${({ theme, variant }) => (variant === "pending" ? theme.primaryBlue : theme[variant])};
+  }
+`;
+
+interface ITxnHash {
+  hash: `0x${string}`;
+  variant: "success" | "error" | "pending";
+}
+const TxnHash: React.FC<ITxnHash> = ({ hash, variant }) => {
+  const transactionExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${hash}`;
+  }, [hash]);
+
+  return (
+    <ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+      <TxnLabel {...{ variant }}>
+        {" "}
+        <span>{hash.substring(0, 6) + "..." + hash.substring(hash.length - 4)}</span>
+        <NewTabIcon />
+      </TxnLabel>
+    </ExternalLink>
+  );
+};
+
+export default TxnHash;

web/src/hooks/queries/useCourtDetails.ts

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

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

@@ -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/Simulator/QuantityToSimulate.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