diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index 3a98e7663..8ff616816 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -104,7 +104,7 @@ const InputDisplay: React.FC = ({ }, args: [address ?? "0x", BigInt(id ?? "0")], }); - const parsedStake = formatPNK(jurorBalance?.[2] || 0n, 0, true); + const parsedStake = formatPNK(jurorBalance?.[2] ?? 0n, 0, true); const isStaking = useMemo(() => action === ActionType.stake, [action]); useEffect(() => { @@ -153,6 +153,7 @@ const InputDisplay: React.FC = ({ isSending, setIsSending, setIsPopupOpen, + setErrorMsg, }} /> diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 5f743dd70..25393bd77 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from "react"; +import React, { useCallback, useEffect, useMemo } from "react"; import { useParams } from "react-router-dom"; import { useAccount, usePublicClient } from "wagmi"; @@ -36,10 +36,6 @@ const Container = styled.div` flex-direction: column; `; -const ErrorLabel = styled.label` - color: ${({ theme }) => theme.error}; -`; - interface IActionButton { isSending: boolean; parsedAmount: bigint; @@ -47,6 +43,7 @@ interface IActionButton { setIsSending: (arg0: boolean) => void; setAmount: (arg0: string) => void; setIsPopupOpen: (arg0: boolean) => void; + setErrorMsg: (msg: string) => void; } const StakeWithdrawButton: React.FC = ({ @@ -55,6 +52,7 @@ const StakeWithdrawButton: React.FC = ({ isSending, setIsSending, setIsPopupOpen, + setErrorMsg, }) => { const { id } = useParams(); const { address } = useAccount(); @@ -104,9 +102,11 @@ const StakeWithdrawButton: React.FC = ({ }, args: [klerosCoreAddress[DEFAULT_CHAIN], BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)], }); + const { writeContractAsync: increaseAllowance } = useWritePnkIncreaseAllowance(); + const handleAllowance = useCallback(() => { - if (increaseAllowanceConfig) { + if (increaseAllowanceConfig && publicClient) { setIsSending(true); wrapWithToast(async () => await increaseAllowance(increaseAllowanceConfig.request), publicClient).finally(() => { setIsSending(false); @@ -116,13 +116,15 @@ const StakeWithdrawButton: React.FC = ({ const { data: setStakeConfig, error: setStakeError } = useSimulateKlerosCoreSetStake({ query: { - enabled: !isUndefined(targetStake) && !isUndefined(id) && !isAllowance && parsedAmount !== 0n, + enabled: + !isUndefined(targetStake) && !isUndefined(id) && !isAllowance && parsedAmount !== 0n && targetStake >= 0n, }, args: [BigInt(id ?? 0), targetStake], }); const { writeContractAsync: setStake } = useWriteKlerosCoreSetStake(); + const handleStake = useCallback(() => { - if (setStakeConfig) { + if (setStakeConfig && publicClient) { setIsSending(true); wrapWithToast(async () => await setStake(setStakeConfig.request), publicClient) .then((res) => res.status && setIsPopupOpen(true)) @@ -135,7 +137,7 @@ const StakeWithdrawButton: React.FC = ({ const buttonProps = { [ActionType.allowance]: { text: "Allow PNK", - checkDisabled: () => !balance || targetStake! > balance, + checkDisabled: () => !balance || targetStake > balance, onClick: handleAllowance, }, [ActionType.stake]: { @@ -150,6 +152,12 @@ const StakeWithdrawButton: React.FC = ({ }, }; + useEffect(() => { + if (setStakeError) { + setErrorMsg(setStakeError?.shortMessage ?? setStakeError.message); + } + }, [setStakeError]); + const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action]; return ( @@ -168,7 +176,6 @@ const StakeWithdrawButton: React.FC = ({ } onClick={onClick} /> - {setStakeError && {setStakeError.message}} ); diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx index bcc19ef18..7938f045b 100644 --- a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx +++ b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx @@ -43,7 +43,7 @@ const SubmitDisputeButton: React.FC = () => { }, [userBalance, disputeData]); // TODO: decide which dispute kit to use - const { data: submitCaseConfig } = useSimulateDisputeResolverCreateDisputeForTemplate({ + const { data: submitCaseConfig, error } = useSimulateDisputeResolverCreateDisputeForTemplate({ query: { enabled: !insufficientBalance && isTemplateValid(disputeTemplate), }, @@ -63,6 +63,14 @@ const SubmitDisputeButton: React.FC = () => { [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate] ); + const errorMsg = useMemo(() => { + if (insufficientBalance) return "Insufficient balance"; + else if (error) { + return error?.shortMessage ?? error.message; + } + return null; + }, [error, insufficientBalance]); + return ( <> {" "} @@ -91,9 +99,9 @@ const SubmitDisputeButton: React.FC = () => { } }} /> - {insufficientBalance && ( + {errorMsg && ( - Insufficient balance + {errorMsg} )}