refactor(web): refactor-new-stake-flow

Author: tractorss

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/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/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -260,12 +260,13 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
   ]);
 
   useEffect(() => {
+    if (isPopupOpen) return;
     if (setStakeError || allowanceError) {
       setErrorMsg(parseWagmiError(setStakeError || allowanceError));
     } else if (targetStake !== 0n && courtDetails && targetStake < BigInt(courtDetails.court?.minStake)) {
       setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`);
     }
-  }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError]);
+  }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen]);
 
   const isDisabled = useMemo(() => {
     if (

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx

@@ -64,11 +64,13 @@ const Header: React.FC<IHeader> = ({ action, amount, isSuccess }) => {
   const jurorCurrentSpecificStake = address && jurorStakeData ? Number(formatEther(jurorStakeData.staked)) : 0;
 
   const isWithdraw = action === ActionType.withdraw;
-  const actionText = useMemo(() => (isWithdraw ? "withdrew" : "staked"), [isWithdraw]);
+  const preStakeText = useMemo(() => (isWithdraw ? "withdrawing" : "staking"), [isWithdraw]);
+  const postStakeText = useMemo(() => (isWithdraw ? "withdrew" : "staked"), [isWithdraw]);
+
   return (
     <StakingMsgContainer>
       {isSuccess ? <CheckIcon /> : null}
-      <StakingMsg>{isSuccess ? `You successfully ${actionText}` : `You are ${actionText}`}</StakingMsg>
+      <StakingMsg>{isSuccess ? `You successfully ${postStakeText}` : `You are ${preStakeText}`}</StakingMsg>
       <StakingAmount>{amount} PNK</StakingAmount>
       {courtDetails?.court?.name ? <CourtName>on {courtDetails.court.name}</CourtName> : null}
       {isSuccess ? null : (

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx

@@ -1,23 +1,37 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 
 import Close from "svgs/icons/close.svg";
 
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
+import { useSortitionModulePhase } from "hooks/useSortitionModule";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { Divider } from "components/Divider";
+import InfoCard from "components/InfoCard";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
+import { Phases } from "components/Phase";
 
 import { ActionType } from "../StakeWithdrawButton";
 
 import Header from "./Header";
 
+const animation = keyframes`
+  0%{
+    transform: translate(-50%,-47%);
+    opacity: 0;
+  }
+  100%{
+    transform: translate(-50%,-50%);
+    opacity: 1;
+  };
+`;
+
 const Container = styled.div`
   display: flex;
   position: fixed;
@@ -33,12 +47,14 @@ const Container = styled.div`
   justify-content: center;
   width: 86vw;
   max-width: 600px;
-  border-radius: 3px;
+  border-radius: 7px;
   border: 1px solid ${({ theme }) => theme.stroke};
   background-color: ${({ theme }) => theme.whiteBackground};
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
   padding: 8px;
 
+  animation: ${animation} 200ms ease-in;
+
   svg {
     visibility: visible;
   }
@@ -66,12 +82,23 @@ const StyledButton = styled(LightButton)`
   border-radius: 7px !important;
   height: fit-content !important;
   align-self: end;
+  .button-svg {
+    path {
+      fill: ${({ theme }) => theme.stroke};
+    }
+  }
 `;
 
-const CloseIcon = styled(Close)`
-  fill: ${({ theme }) => theme.stroke};
+const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 8px;
 `;
 
+const StyledInfoCard = styled(InfoCard)`
+  font-size: 14px;
+`;
 interface IStakeWithdrawPopup {
   action: ActionType;
   amount: string;
@@ -82,14 +109,24 @@ interface IStakeWithdrawPopup {
 
 const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup, steps, isSuccess, action }) => {
   useLockOverlayScroll(true);
+  const { data: phase } = useSortitionModulePhase();
+
   return (
     <Overlay onClick={closePopup}>
       <Container onClick={(e) => e.stopPropagation()}>
-        <StyledButton Icon={CloseIcon} text="" onClick={closePopup} />
+        <StyledButton Icon={Close} text="" onClick={closePopup} />
         <InnerContainer>
           <Header {...{ amount, isSuccess, action }} />
           <Divider />
           {steps?.items && <CustomTimeline items={steps.items} />}
+          {phase !== Phases.staking ? (
+            <InfoContainer>
+              <Divider />
+              <StyledInfoCard
+                msg={`The ${action === ActionType.stake ? "stake" : "withdraw"} might be delayed by ~1 hr.`}
+              />
+            </InfoContainer>
+          ) : null}
         </InnerContainer>
       </Container>
     </Overlay>