Merge pull request #1140 from kleros/fix(web)/withdrawing-bug

Fix(web): withdraw partial amounts

Author: alcercu

web/package.json

@@ -41,7 +41,7 @@
     "@kleros/kleros-v2-prettier-config": "workspace:^",
     "@kleros/kleros-v2-tsconfig": "workspace:^",
     "@netlify/functions": "^1.6.0",
-    "@parcel/transformer-svg-react": "~2.9.0",
+    "@parcel/transformer-svg-react": "~2.8.0",
     "@parcel/watcher": "~2.2.0",
     "@types/amqplib": "^0.10.1",
     "@types/busboy": "^1.5.0",
@@ -58,6 +58,7 @@
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
+    "parcel": "~2.8.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
@@ -78,7 +79,6 @@
     "graphql": "^16.7.1",
     "graphql-request": "~6.1.0",
     "moment": "^2.29.4",
-    "parcel": "~2.9.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",

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

@@ -6,6 +6,7 @@ import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
 import { Field } from "@kleros/ui-components-library";
 import { useParsedAmount } from "hooks/useParsedAmount";
+import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { useKlerosCoreGetJurorBalance, usePnkBalanceOf } from "hooks/contracts/generated";
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
 import { isUndefined } from "utils/index";
@@ -55,6 +56,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   const parsedAmount = useParsedAmount(debouncedAmount);
 
   const { id } = useParams();
+  const { data: courtDetails } = useCourtDetails(id);
   const { address } = useAccount();
   const { data: balance } = usePnkBalanceOf({
     enabled: !isUndefined(address),
@@ -73,7 +75,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   return (
     <>
       <LabelArea>
-        <label>{`Available ${parsedBalance} PNK`}</label>
+        <label>{`Available ${isStaking ? parsedBalance : parsedStake} PNK`}</label>
         <StyledLabel
           onClick={() => {
             const amount = isStaking ? parsedBalance : parsedStake;
@@ -92,7 +94,12 @@ const InputDisplay: React.FC<IInputDisplay> = ({
           }}
           placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
           message={
-            isStaking ? "You may need two transactions, one to increase allowance, the other to stake." : undefined
+            isStaking
+              ? `You need to stake at least ${formatEther(courtDetails?.court.minStake ?? 0n)} PNK. ` +
+                "You may need two transactions, one to increase allowance, the other to stake."
+              : `You need to either withdraw all or keep at least ${formatEther(
+                  courtDetails?.court.minStake ?? 0n
+                )} PNK.`
           }
           variant="info"
         />

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

@@ -12,6 +12,7 @@ import {
   useKlerosCoreGetJurorBalance,
   usePnkAllowance,
 } from "hooks/contracts/generated";
+import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
 import { EnsureChain } from "components/EnsureChain";
@@ -41,6 +42,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const { id } = useParams();
   const { address } = useAccount();
   const klerosCore = getKlerosCore({});
+  const { data: courtDetails } = useCourtDetails(id);
   const { data: balance } = usePnkBalanceOf({
     enabled: !isUndefined(address),
     args: [address!],
@@ -90,11 +92,10 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     }
   };
 
-  const { config: setStakeConfig, error } = usePrepareKlerosCoreSetStake({
-    enabled: !isUndefined(targetStake) && !isUndefined(id) && isStaking && !isAllowance,
+  const { config: setStakeConfig } = usePrepareKlerosCoreSetStake({
+    enabled: !isUndefined(targetStake) && !isUndefined(id) && !isAllowance,
     args: [BigInt(id ?? 0), targetStake],
   });
-  console.log(setStakeConfig, error);
   const { writeAsync: setStake } = useKlerosCoreSetStake(setStakeConfig);
   const handleStake = () => {
     if (typeof setStake !== "undefined") {
@@ -135,7 +136,9 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
           isSending ||
           parsedAmount == 0n ||
           isUndefined(targetStake) ||
+          isUndefined(courtDetails) ||
           checkDisabled() ||
+          (targetStake !== 0n && targetStake < BigInt(courtDetails.court.minStake)) ||
           (isStaking && !isAllowance && isUndefined(setStakeConfig.request))
         }
         onClick={onClick}

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -13,7 +13,7 @@ import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import EthereumIcon from "svgs/icons/ethereum.svg";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { isUndefined } from "~src/utils";
+import { isUndefined } from "utils/index";
 
 const StyledCard = styled.div`
   width: auto;