diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index 45818bba7..ef9ce71fa 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -1,17 +1,19 @@ import React, { useState, useMemo, useEffect } from "react"; import styled from "styled-components"; -import { hoverShortTransitionTiming } from "styles/commonStyles"; - import { useParams } from "react-router-dom"; import { useDebounce } from "react-use"; import { useParsedAmount } from "hooks/useParsedAmount"; import { usePnkData } from "hooks/usePNKData"; import { commify, uncommify } from "utils/commify"; -import { formatPNK, roundNumberDown } from "utils/format"; +import { formatETH, formatPNK, roundNumberDown } from "utils/format"; import { isUndefined } from "utils/index"; +import { useCourtDetails } from "queries/useCourtDetails"; + +import { hoverShortTransitionTiming } from "styles/commonStyles"; + import { NumberInputField } from "components/NumberInputField"; import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton"; @@ -75,6 +77,7 @@ const InputDisplay: React.FC = ({ action, amount, setAmount }) => const { id } = useParams(); const { balance, jurorBalance } = usePnkData({ courtId: id }); + const { data: courtDetails } = useCourtDetails(id); const parsedBalance = formatPNK(balance ?? 0n, 0, true); @@ -88,10 +91,18 @@ const InputDisplay: React.FC = ({ action, amount, setAmount }) => setErrorMsg("Insufficient balance to stake this amount"); } else if (!isStaking && jurorBalance && parsedAmount > jurorBalance[2]) { setErrorMsg("Insufficient staked amount to withdraw this amount"); + } else if ( + action === ActionType.stake && + courtDetails && + jurorBalance && + parsedAmount !== 0n && + jurorBalance[2] + parsedAmount < BigInt(courtDetails?.court?.minStake) + ) { + setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`); } else { setErrorMsg(undefined); } - }, [parsedAmount, isStaking, balance, jurorBalance]); + }, [parsedAmount, isStaking, balance, jurorBalance, action, courtDetails]); return ( <> diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 5d0717a72..240f580cb 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -15,14 +15,14 @@ import { useSimulatePnkIncreaseAllowance, useWritePnkIncreaseAllowance, } from "hooks/contracts/generated"; -import { useCourtDetails } from "hooks/queries/useCourtDetails"; import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import { usePnkData } from "hooks/usePNKData"; -import { formatETH } from "utils/format"; import { isUndefined } from "utils/index"; import { parseWagmiError } from "utils/parseWagmiError"; import { refetchWithRetry } from "utils/refecthWithRetry"; +import { useCourtDetails } from "queries/useCourtDetails"; + import { EnsureChain } from "components/EnsureChain"; import StakeWithdrawPopup from "./StakeWithdrawPopup"; @@ -67,9 +67,8 @@ const StakeWithdrawButton: React.FC = ({ const controllerRef = useRef(null); useLockOverlayScroll(isPopupOpen); - const { data: courtDetails } = useCourtDetails(id); const { balance, jurorBalance, allowance, refetchAllowance } = usePnkData({ courtId: id }); - + const { data: courtDetails } = useCourtDetails(id); const publicClient = usePublicClient(); const isStaking = action === ActionType.stake; @@ -181,6 +180,16 @@ const StakeWithdrawButton: React.FC = ({ ) ); }); + } else { + updatePopupState( + signal, + getStakeSteps( + StakeSteps.StakeFailed, + ...commonArgs, + undefined, + new Error("Simulation Failed. Please restart the process.") + ) + ); } }, [setStake, setStakeConfig, publicClient, amount, theme, action] @@ -248,20 +257,20 @@ const StakeWithdrawButton: React.FC = ({ useEffect(() => { if (isPopupOpen) return; - if ( - action === ActionType.stake && - targetStake !== 0n && - courtDetails && - targetStake < BigInt(courtDetails.court?.minStake) - ) { - setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`); - } else if (setStakeError || allowanceError) { + if (setStakeError || allowanceError) { setErrorMsg(parseWagmiError(setStakeError || allowanceError)); } - }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen, action]); + }, [setStakeError, setErrorMsg, targetStake, allowanceError, isPopupOpen]); const isDisabled = useMemo(() => { - if (parsedAmount == 0n) return true; + if ( + parsedAmount == 0n || + (action === ActionType.stake && + targetStake !== 0n && + courtDetails && + targetStake < BigInt(courtDetails?.court?.minStake)) + ) + return true; if (isAllowance) { return isUndefined(increaseAllowanceConfig) || isSimulatingAllowance || !isUndefined(allowanceError); } @@ -275,6 +284,9 @@ const StakeWithdrawButton: React.FC = ({ setStakeError, allowanceError, isAllowance, + targetStake, + action, + courtDetails, ]); const closePopup = () => {