Merge pull request #1742 from kleros/fix/stake-error-display

fix(web): display-stake-button-error

Author: jaybuidl

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

@@ -22,13 +22,24 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { EnsureChain } from "components/EnsureChain";
+import styled from "styled-components";
 
 export enum ActionType {
   allowance = "allowance",
   stake = "stake",
   withdraw = "withdraw",
 }
 
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+`;
+
+const ErrorLabel = styled.label`
+  color: ${({ theme }) => theme.error};
+`;
+
 interface IActionButton {
   isSending: boolean;
   parsedAmount: bigint;
@@ -142,20 +153,23 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
   return (
     <EnsureChain>
-      <Button
-        text={text}
-        isLoading={isSending}
-        disabled={
-          isSending ||
-          parsedAmount == 0n ||
-          isUndefined(targetStake) ||
-          isUndefined(courtDetails) ||
-          checkDisabled() ||
-          (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) ||
-          (isStaking && !isAllowance && isUndefined(setStakeConfig))
-        }
-        onClick={onClick}
-      />
+      <Container>
+        <Button
+          text={text}
+          isLoading={isSending}
+          disabled={
+            isSending ||
+            parsedAmount == 0n ||
+            isUndefined(targetStake) ||
+            isUndefined(courtDetails) ||
+            checkDisabled() ||
+            (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) ||
+            (isStaking && !isAllowance && isUndefined(setStakeConfig))
+          }
+          onClick={onClick}
+        />
+        {setStakeError && <ErrorLabel> {setStakeError.message}</ErrorLabel>}
+      </Container>
     </EnsureChain>
   );
 };