From 2a1384135d16a7b6446ca382a83f907b03df0bc9 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 15 Nov 2024 12:26:29 +0700
Subject: [PATCH 1/2] fix(web): display-stake-button-error

---
 .../StakePanel/StakeWithdrawButton.tsx        | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 40eda06a7..5c1e86354 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -22,6 +22,7 @@ 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",
@@ -29,6 +30,10 @@ export enum ActionType {
   withdraw = "withdraw",
 }
 
+const ErrorLabel = styled.label`
+  color: ${({ theme }) => theme.error};
+`;
+
 interface IActionButton {
   isSending: boolean;
   parsedAmount: bigint;
@@ -142,20 +147,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}
-      />
+      <>
+        <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>}
+      </>
     </EnsureChain>
   );
 };

From 0c6447efbcf24a5bddb23465be7e5ce320f75317 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 15 Nov 2024 12:42:36 +0700
Subject: [PATCH 2/2] refactor(web): error-display-stake

---
 .../CourtDetails/StakePanel/StakeWithdrawButton.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 5c1e86354..5f743dd70 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -30,6 +30,12 @@ export enum ActionType {
   withdraw = "withdraw",
 }
 
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+`;
+
 const ErrorLabel = styled.label`
   color: ${({ theme }) => theme.error};
 `;
@@ -147,7 +153,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
   return (
     <EnsureChain>
-      <>
+      <Container>
         <Button
           text={text}
           isLoading={isSending}
@@ -163,7 +169,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
           onClick={onClick}
         />
         {setStakeError && <ErrorLabel> {setStakeError.message}</ErrorLabel>}
-      </>
+      </Container>
     </EnsureChain>
   );
 };