feat(web): pnk allowance and stake

Author: alcercu

web/src/hooks/queries/usePNKAllowance.ts

@@ -6,11 +6,13 @@ import { CONTRACTS } from "utils/getContract";
 export const usePNKAllowance = (user?: string | null) => {
   const pnkContract = useConnectedContract("PNK") as PNK;
   return useSWR(
-    () => (pnkContract && user ? `PNKBalance${user}` : false),
+    () => (pnkContract && user ? `PNKAllowance{user}` : false),
     async () => {
-      console.log("allowance query");
       if (pnkContract && user) {
-        return await pnkContract.allowance(user, CONTRACTS["PNK"].address);
+        return await pnkContract.allowance(
+          user,
+          CONTRACTS["KlerosCore"].address
+        );
       } else {
         return undefined;
       }

web/src/hooks/queries/usePNKBalance.ts

@@ -7,9 +7,9 @@ export const usePNKBalance = (user?: string | null) => {
   return useSWR(
     () => (pnkContract && user ? `PNKBalance${user}` : false),
     async () => {
-      console.log("balance query");
       if (pnkContract && user) {
-        return await pnkContract.balanceOf(user);
+        const balance = await pnkContract.balanceOf(user);
+        return balance;
       } else {
         return undefined;
       }

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

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import Modal from "react-modal";
 import { utils, BigNumber } from "ethers";
 import { Field, Button } from "@kleros/ui-components-library";
+import { PNK } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/mock/PNK";
 import { KlerosCore } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/KlerosCore";
 import { useWeb3 } from "hooks/useWeb3";
 import { useConnectedContract } from "hooks/useConnectedContract";
@@ -14,12 +15,13 @@ const StakeModal: React.FC<{ isOpen: boolean; close: () => void }> = ({
   isOpen,
   close,
 }) => {
-  const { id } = useParams();
-  const klerosCore = useConnectedContract("KlerosCore") as KlerosCore;
   const [isSending, setIsSending] = useState(false);
   const [amount, setAmount] = useState("");
+  const parsedAmount = useMemo(
+    () => (amount === "" ? BigNumber.from(0) : utils.parseUnits(amount, 18)),
+    [amount]
+  );
   const { account } = useWeb3();
-  const { data: balance } = usePNKBalance(account);
   const { data: allowance } = usePNKAllowance(account);
   return (
     <StyledModal {...{ isOpen }}>
@@ -39,37 +41,101 @@ const StakeModal: React.FC<{ isOpen: boolean; close: () => void }> = ({
           text="Return"
           onClick={close}
         />
-        <Button
-          text={"Stake"}
-          isLoading={isSending}
-          disabled={
-            isSending ||
-            allowance !== "" ||
-            !balance ||
-            utils.parseUnits(amount, 18).gt(balance)
-          }
-          onClick={() => {
-            if (typeof id !== "undefined" && amount !== "") {
-              setIsSending(true);
-              klerosCore
-                .setStake(utils.parseUnits(amount, 18), id)
-                .then(
-                  async (tx) =>
-                    await tx.wait().then(() => {
-                      setAmount("");
-                      close();
-                    })
-                )
-                .catch()
-                .finally(() => setIsSending(false));
-            }
-          }}
-        />
+        {allowance && allowance.lt(parsedAmount) ? (
+          <AllowanceButton {...{ parsedAmount, isSending, setIsSending }} />
+        ) : (
+          <StakeButton
+            {...{ parsedAmount, setAmount, isSending, setIsSending, close }}
+          />
+        )}
       </ButtonArea>
     </StyledModal>
   );
 };
 
+interface IAllowanceButton {
+  parsedAmount: BigNumber;
+  isSending: boolean;
+  setIsSending: (arg0: boolean) => void;
+}
+
+const AllowanceButton: React.FC<IAllowanceButton> = ({
+  parsedAmount,
+  isSending,
+  setIsSending,
+}) => {
+  const { id } = useParams();
+  const { account } = useWeb3();
+  const { data: allowance } = usePNKAllowance(account);
+  const { data: balance } = usePNKBalance(account);
+  const klerosCore = useConnectedContract("KlerosCore") as KlerosCore;
+  const pnk = useConnectedContract("PNK") as PNK;
+  return (
+    <Button
+      text={"Allow PNK"}
+      isLoading={isSending}
+      disabled={
+        !balance ||
+        isSending ||
+        parsedAmount.eq(BigNumber.from(0)) ||
+        parsedAmount.gt(balance)
+      }
+      onClick={() => {
+        setIsSending(true);
+        pnk
+          .increaseAllowance(klerosCore.address, parsedAmount.sub(allowance!))
+          .then(
+            async (tx) =>
+              await tx.wait().then(() => {
+                console.log("nice!");
+              })
+          )
+          .catch()
+          .finally(() => setIsSending(false));
+      }}
+    />
+  );
+};
+
+interface IStakeButton extends IAllowanceButton {
+  setAmount: (arg0: string) => void;
+  close: () => void;
+}
+
+const StakeButton: React.FC<IStakeButton> = ({
+  parsedAmount,
+  setAmount,
+  isSending,
+  setIsSending,
+  close,
+}) => {
+  const { id } = useParams();
+  const klerosCore = useConnectedContract("KlerosCore") as KlerosCore;
+  return (
+    <Button
+      text={"Stake"}
+      isLoading={isSending}
+      disabled={isSending || parsedAmount.lte(BigNumber.from(0))}
+      onClick={() => {
+        if (typeof id !== "undefined") {
+          setIsSending(true);
+          klerosCore
+            .setStake(id, parsedAmount)
+            .then(
+              async (tx) =>
+                await tx.wait().then(() => {
+                  setAmount("");
+                  close();
+                })
+            )
+            .catch()
+            .finally(() => setIsSending(false));
+        }
+      }}
+    />
+  );
+};
+
 const StyledModal = styled(Modal)`
   position: absolute;
   top: 50%;