From 91524998cbedd314f07c6dfea82f9e818dafc7de Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 27 Jun 2023 16:46:12 +0100 Subject: [PATCH 1/3] fix: write functions to viem --- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 5 ++-- .../Evidence/SubmitEvidenceModal.tsx | 5 ++-- .../pages/Cases/CaseDetails/Voting/Binary.tsx | 5 ++-- .../CourtDetails/StakePanel/InputDisplay.tsx | 9 ++++++-- .../StakePanel/StakeWithdrawButton.tsx | 23 ++++++++++++------- web/src/utils/wrapWithToast.ts | 10 ++++---- 6 files changed, 37 insertions(+), 20 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index ad68c1a71..382e5a99b 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; -import { useAccount, useBalance } from "wagmi"; +import { useAccount, useBalance, usePublicClient } from "wagmi"; import { useDebounce } from "react-use"; import { Field, Button } from "@kleros/ui-components-library"; import { wrapWithToast } from "utils/wrapWithToast"; @@ -49,6 +49,7 @@ const Fund: React.FC = () => { address, watch: true, }); + const publicClient = usePublicClient(); const [amount, setAmount] = useState(""); const [debouncedAmount, setDebouncedAmount] = useState(""); @@ -78,7 +79,7 @@ const Fund: React.FC = () => { onClick={() => { if (fundAppeal) { setIsSending(true); - wrapWithToast(fundAppeal()) + wrapWithToast(fundAppeal, publicClient) .then(() => { setAmount(""); close(); diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx index abedd2980..6b9f6fc7e 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx @@ -5,7 +5,7 @@ import Modal from "react-modal"; import { Textarea, Button } from "@kleros/ui-components-library"; import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast"; import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS"; -import { useWalletClient } from "wagmi"; +import { useWalletClient, usePublicClient } from "wagmi"; import { EnsureChain } from "components/EnsureChain"; import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated"; @@ -15,6 +15,7 @@ const SubmitEvidenceModal: React.FC<{ close: () => void; }> = ({ isOpen, evidenceGroup, close }) => { const { data: walletClient } = useWalletClient(); + const publicClient = usePublicClient(); const [isSending, setIsSending] = useState(false); const [message, setMessage] = useState(""); return ( @@ -41,7 +42,7 @@ const SubmitEvidenceModal: React.FC<{ functionName: "submitEvidence", args: [BigInt(evidenceGroup), cid], }); - await wrapWithToast(walletClient.writeContract(request)).then(() => { + await wrapWithToast(() => walletClient.writeContract(request), publicClient).then(() => { setMessage(""); close(); }); diff --git a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx b/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx index 7e341ac4e..575c984c4 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx @@ -1,7 +1,7 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; -import { useWalletClient } from "wagmi"; +import { useWalletClient, usePublicClient } from "wagmi"; import { Button, Textarea } from "@kleros/ui-components-library"; import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated"; import { wrapWithToast } from "utils/wrapWithToast"; @@ -54,6 +54,7 @@ const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ ar const [isSending, setIsSending] = useState(false); const [justification, setJustification] = useState(""); const { data: walletClient } = useWalletClient(); + const publicClient = usePublicClient(); const handleVote = async (voteOption: number) => { setIsSending(true); @@ -69,7 +70,7 @@ const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ ar ], }); if (walletClient) { - wrapWithToast(walletClient.writeContract(request)).finally(() => { + wrapWithToast(() => walletClient.writeContract(request), publicClient).finally(() => { setChosenOption(-1); setIsSending(false); }); diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index 7ce8f0185..f969070ec 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -8,8 +8,9 @@ import { Field } from "@kleros/ui-components-library"; import { useParsedAmount } from "hooks/useParsedAmount"; import { usePNKBalance } from "queries/usePNKBalance"; -import { useJurorBalance } from "queries/useJurorBalance"; +import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated"; import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton"; +import { isUndefined } from "utils/index"; import { EnsureChain } from "components/EnsureChain"; const StyledField = styled(Field)` @@ -50,7 +51,11 @@ const InputDisplay: React.FC = ({ action, isSending, setIsSending const { address } = useAccount(); const { data: balance } = usePNKBalance(address); const parsedBalance = formatEther(balance ?? 0n); - const { data: jurorBalance } = useJurorBalance(address, id); + const { data: jurorBalance } = useKlerosCoreGetJurorBalance({ + enabled: !isUndefined(address), + args: [address, id], + watch: true, + }); const parsedStake = formatEther(jurorBalance?.[0] || 0n); const isStaking = action === ActionType.stake; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index deb02174c..6165fe1f7 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from "react"; import { useParams } from "react-router-dom"; -import { useAccount } from "wagmi"; +import { useAccount, usePublicClient } from "wagmi"; import { Button } from "@kleros/ui-components-library"; import { getKlerosCore, @@ -9,8 +9,8 @@ import { usePnkBalanceOf, usePnkIncreaseAllowance, usePreparePnkIncreaseAllowance, + useKlerosCoreGetJurorBalance, } from "hooks/contracts/generated"; -import { useJurorBalance } from "queries/useJurorBalance"; import { usePNKAllowance } from "queries/usePNKAllowance"; import { wrapWithToast } from "utils/wrapWithToast"; import { isUndefined } from "utils/index"; @@ -38,15 +38,22 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se args: [address!], watch: true, }); - const { data: jurorBalance } = useJurorBalance(address, id); + const { data: jurorBalance } = useKlerosCoreGetJurorBalance({ + enabled: !isUndefined(address), + args: [address, id], + watch: true, + }); const { data: allowance } = usePNKAllowance(address); + const publicClient = usePublicClient(); const isStaking = action === ActionType.stake; - const isAllowance = isStaking && allowance && allowance < parsedAmount; + const isAllowance = isStaking && !isUndefined(allowance) && allowance < parsedAmount; const targetStake = useMemo(() => { if (jurorBalance) { - if (action === ActionType.stake) { + if (isAllowance) { + return parsedAmount; + } else if (isStaking) { return jurorBalance[0] + parsedAmount; } else { return jurorBalance[0] - parsedAmount; @@ -56,14 +63,14 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se const klerosCore = getKlerosCore({}); const { config: increaseAllowanceConfig } = usePreparePnkIncreaseAllowance({ - enabled: !isUndefined([klerosCore, targetStake, allowance]), + enabled: !isUndefined(klerosCore) && !isUndefined(targetStake) && !isUndefined(allowance), args: [klerosCore?.address, BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)], }); const { writeAsync: increaseAllowance } = usePnkIncreaseAllowance(increaseAllowanceConfig); const handleAllowance = () => { if (!isUndefined(increaseAllowance)) { setIsSending(true); - wrapWithToast(increaseAllowance!()).finally(() => { + wrapWithToast(increaseAllowance, publicClient).finally(() => { setIsSending(false); }); } @@ -77,7 +84,7 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se const handleStake = () => { if (typeof setStake !== "undefined") { setIsSending(true); - wrapWithToast(setStake()) + wrapWithToast(setStake, publicClient) .then(() => { setAmount(""); }) diff --git a/web/src/utils/wrapWithToast.ts b/web/src/utils/wrapWithToast.ts index d26e228b4..862e24890 100644 --- a/web/src/utils/wrapWithToast.ts +++ b/web/src/utils/wrapWithToast.ts @@ -1,4 +1,5 @@ import { toast, ToastPosition, Theme } from "react-toastify"; +import { WriteContractResult } from "wagmi/dist/actions"; export const OPTIONS = { position: "top-center" as ToastPosition, @@ -11,11 +12,12 @@ export const OPTIONS = { theme: "colored" as Theme, }; -export async function wrapWithToast(tx: Promise) { +export async function wrapWithToast(contractWrite: () => Promise, publicClient: any) { toast.info("Transaction initiated", OPTIONS); - await tx - .then(async (tx) => { - await tx.wait(2); + const { hash } = await contractWrite(); + await publicClient + .waitForTransactionReceipt({ hash, confirmations: 2 }) + .then(() => { toast.success("Transaction mined!", OPTIONS); }) .catch((error) => { From 09301b2214f5187e21006f1ee4f49e3ba77921d6 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 28 Jun 2023 14:24:42 +0100 Subject: [PATCH 2/3] feat: latest changes to wrapper and calling functions --- .../Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx | 10 ++++++---- web/src/pages/Cases/CaseDetails/Voting/Binary.tsx | 2 +- web/src/utils/wrapWithToast.ts | 7 +++++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx index 6b9f6fc7e..9eab0e452 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx @@ -42,10 +42,12 @@ const SubmitEvidenceModal: React.FC<{ functionName: "submitEvidence", args: [BigInt(evidenceGroup), cid], }); - await wrapWithToast(() => walletClient.writeContract(request), publicClient).then(() => { - setMessage(""); - close(); - }); + await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then( + () => { + setMessage(""); + close(); + } + ); } }) .catch() diff --git a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx b/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx index 575c984c4..3930271ea 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx @@ -70,7 +70,7 @@ const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ ar ], }); if (walletClient) { - wrapWithToast(() => walletClient.writeContract(request), publicClient).finally(() => { + wrapWithToast(async () => await walletClient.writeContract(request), publicClient).finally(() => { setChosenOption(-1); setIsSending(false); }); diff --git a/web/src/utils/wrapWithToast.ts b/web/src/utils/wrapWithToast.ts index 862e24890..f686d0394 100644 --- a/web/src/utils/wrapWithToast.ts +++ b/web/src/utils/wrapWithToast.ts @@ -1,5 +1,4 @@ import { toast, ToastPosition, Theme } from "react-toastify"; -import { WriteContractResult } from "wagmi/dist/actions"; export const OPTIONS = { position: "top-center" as ToastPosition, @@ -12,15 +11,19 @@ export const OPTIONS = { theme: "colored" as Theme, }; -export async function wrapWithToast(contractWrite: () => Promise, publicClient: any) { +export async function wrapWithToast(contractWrite: () => Promise<`0x${string}`>, publicClient: any) { toast.info("Transaction initiated", OPTIONS); + console.log("1 before contractwrite"); const { hash } = await contractWrite(); + console.log("2 after contractwrite, hash:", hash); await publicClient .waitForTransactionReceipt({ hash, confirmations: 2 }) .then(() => { + console.log("3 inside waitfortransactionreceipt"); toast.success("Transaction mined!", OPTIONS); }) .catch((error) => { + console.log("4 inside waitfortransaction catch", error); toast.error(error.message, OPTIONS); }); } From e14322e74f29c6f99f2e7a3d4e09f9a2b89c8f28 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 28 Jun 2023 16:32:55 +0200 Subject: [PATCH 3/3] fix(web): return hash correctly on all functions --- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 2 +- .../StakePanel/StakeWithdrawButton.tsx | 17 ++++++++++------- web/src/utils/wrapWithToast.ts | 6 +----- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 382e5a99b..3888b2b25 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -79,7 +79,7 @@ const Fund: React.FC = () => { onClick={() => { if (fundAppeal) { setIsSending(true); - wrapWithToast(fundAppeal, publicClient) + wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient) .then(() => { setAmount(""); close(); diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 6165fe1f7..3c94541d8 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -40,7 +40,7 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se }); const { data: jurorBalance } = useKlerosCoreGetJurorBalance({ enabled: !isUndefined(address), - args: [address, id], + args: [address ?? "0x", BigInt(id ?? 0)], watch: true, }); const { data: allowance } = usePNKAllowance(address); @@ -59,20 +59,23 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se return jurorBalance[0] - parsedAmount; } } - }, [action, jurorBalance, parsedAmount]); + return 0n; + }, [jurorBalance, parsedAmount, isAllowance, isStaking]); const klerosCore = getKlerosCore({}); const { config: increaseAllowanceConfig } = usePreparePnkIncreaseAllowance({ - enabled: !isUndefined(klerosCore) && !isUndefined(targetStake) && !isUndefined(allowance), + enabled: isAllowance && !isUndefined(klerosCore) && !isUndefined(targetStake) && !isUndefined(allowance), args: [klerosCore?.address, BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)], }); const { writeAsync: increaseAllowance } = usePnkIncreaseAllowance(increaseAllowanceConfig); const handleAllowance = () => { if (!isUndefined(increaseAllowance)) { setIsSending(true); - wrapWithToast(increaseAllowance, publicClient).finally(() => { - setIsSending(false); - }); + wrapWithToast(async () => await increaseAllowance().then((response) => response.hash), publicClient).finally( + () => { + setIsSending(false); + } + ); } }; @@ -84,7 +87,7 @@ const StakeWithdrawButton: React.FC = ({ parsedAmount, action, se const handleStake = () => { if (typeof setStake !== "undefined") { setIsSending(true); - wrapWithToast(setStake, publicClient) + wrapWithToast(async () => await setStake().then((response) => response.hash), publicClient) .then(() => { setAmount(""); }) diff --git a/web/src/utils/wrapWithToast.ts b/web/src/utils/wrapWithToast.ts index f686d0394..4ee577ed0 100644 --- a/web/src/utils/wrapWithToast.ts +++ b/web/src/utils/wrapWithToast.ts @@ -13,17 +13,13 @@ export const OPTIONS = { export async function wrapWithToast(contractWrite: () => Promise<`0x${string}`>, publicClient: any) { toast.info("Transaction initiated", OPTIONS); - console.log("1 before contractwrite"); - const { hash } = await contractWrite(); - console.log("2 after contractwrite, hash:", hash); + const hash = await contractWrite(); await publicClient .waitForTransactionReceipt({ hash, confirmations: 2 }) .then(() => { - console.log("3 inside waitfortransactionreceipt"); toast.success("Transaction mined!", OPTIONS); }) .catch((error) => { - console.log("4 inside waitfortransaction catch", error); toast.error(error.message, OPTIONS); }); }