feat: correct creation and approval flow of the token

kleros · May 17, 2024 · def02ff · def02ff
1 parent 0e2b68c
commit def02ff
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 37 deletions.
diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
@@ -7,9 +7,11 @@ import {
   usePrepareEscrowUniversalCreateNativeTransaction,
   useEscrowUniversalCreateErc20Transaction,
   usePrepareEscrowUniversalCreateErc20Transaction,
+  escrowUniversalAddress,
 } from "hooks/contracts/generated";
+import { erc20ABI, useNetwork } from "wagmi";
 import { useNewTransactionContext } from "context/NewTransactionContext";
-import { useAccount, useEnsAddress, usePublicClient } from "wagmi";
+import { useAccount, useEnsAddress, usePublicClient, useContractWrite, usePrepareContractWrite } from "wagmi";
 import { parseEther, parseUnits } from "viem";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
@@ -37,7 +39,9 @@ const DepositPaymentButton: React.FC = () => {
   const publicClient = usePublicClient();
   const navigate = useNavigate();
   const [isSending, setIsSending] = useState<boolean>(false);
+  const [isApproved, setIsApproved] = useState<boolean>(false);
   const { address } = useAccount();
+  const { chain } = useNetwork();
 
   useEffect(() => {
     const intervalId = setInterval(() => setCurrentTime(Date.now()), 1000);
@@ -104,7 +108,7 @@ const DepositPaymentButton: React.FC = () => {
 
   const { config: createNativeTransactionConfig } = usePrepareEscrowUniversalCreateNativeTransaction({
     enabled: !isUndefined(ensResult) && ethAddressPattern.test(finalRecipientAddress) && isNativeTransaction,
-    args: [BigInt(Math.floor(timeoutPayment)), transactionUri, finalRecipientAddress, stringifiedTemplateData, ""], // Add empty string for _templateDataMappings
+    args: [BigInt(Math.floor(timeoutPayment)), transactionUri, finalRecipientAddress, stringifiedTemplateData, ""],
     value: transactionValue,
   });
 
@@ -117,15 +121,38 @@ const DepositPaymentButton: React.FC = () => {
       transactionUri,
       finalRecipientAddress,
       stringifiedTemplateData,
-      "", // Add empty string for _templateDataMappings
+      "",
     ],
   });
 
   const { writeAsync: createNativeTransaction } =
     useEscrowUniversalCreateNativeTransaction(createNativeTransactionConfig);
   const { writeAsync: createERC20Transaction } = useEscrowUniversalCreateErc20Transaction(createERC20TransactionConfig);
 
-  const handleCreateTransaction = () => {
+  const { config: approveConfig } = usePrepareContractWrite({
+    address: sendingToken,
+    abi: erc20ABI,
+    functionName: "approve",
+    args: [escrowUniversalAddress?.[chain?.id], transactionValue],
+  });
+
+  const { writeAsync: approve } = useContractWrite(approveConfig);
+
+  const handleApproveToken = async () => {
+    if (!isUndefined(approve)) {
+      setIsSending(true);
+      try {
+        await wrapWithToast(async () => await approve().then((response) => response.hash), publicClient);
+        setIsApproved(true);
+      } catch (error) {
+        console.error("Approval failed:", error);
+      } finally {
+        setIsSending(false);
+      }
+    }
+  };
+
+  const handleCreateTransaction = async () => {
     const createTransaction = isNativeTransaction ? createNativeTransaction : createERC20Transaction;
     if (!isUndefined(createTransaction)) {
       setIsSending(true);
@@ -149,8 +176,8 @@ const DepositPaymentButton: React.FC = () => {
     <StyledButton
       isLoading={isSending}
       disabled={isSending}
-      text="Deposit the Payment"
-      onClick={handleCreateTransaction}
+      text={isNativeTransaction ? "Deposit the Payment" : isApproved ? "Deposit the Payment" : "Approve Token"}
+      onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
     />
   );
 };

diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/AmountField.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/AmountField.tsx
@@ -1,8 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 import { Field } from "@kleros/ui-components-library";
-import { useAccount, useBalance } from "wagmi";
-import { useNewTransactionContext } from "context/NewTransactionContext";
 
 const StyledField = styled(Field)`
   width: 132px;
@@ -20,33 +18,13 @@ const StyledField = styled(Field)`
   }
 `;
 
-interface IAmount {
+interface IAmountField {
   quantity: string;
   setQuantity: (value: string) => void;
+  error: string;
 }
 
-const Amount: React.FC<IAmount> = ({ quantity, setQuantity }) => {
-  const { setHasSufficientNativeBalance } = useNewTransactionContext();
-  const { address } = useAccount();
-  const { data: balanceData } = useBalance({ address: address });
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    const balanceAmount = balanceData ? parseFloat(balanceData.formatted) : 0;
-    const enteredAmount = parseFloat(quantity);
-
-    if (quantity && balanceAmount < enteredAmount) {
-      setError("Insufficient balance");
-      setHasSufficientNativeBalance(false);
-    } else if (enteredAmount === 0) {
-      setError("Amount is zero");
-      setHasSufficientNativeBalance(false);
-    } else {
-      setError("");
-      setHasSufficientNativeBalance(true);
-    }
-  }, [balanceData, quantity, setHasSufficientNativeBalance]);
-
+const AmountField: React.FC<IAmountField> = ({ quantity, setQuantity, error }) => {
   const handleWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     setQuantity(event.target.value);
   };
@@ -63,4 +41,4 @@ const Amount: React.FC<IAmount> = ({ quantity, setQuantity }) => {
   );
 };
 
-export default Amount;
+export default AmountField;
diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx
@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
+import { useBalance, useAccount } from "wagmi";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import { responsiveSize } from "styles/responsiveSize";
 import AmountField from "./AmountField";
 import TokenSelector from "./TokenSelector";
@@ -19,9 +21,33 @@ interface ITokenAndAmount {
 }
 
 const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) => {
+  const { address } = useAccount();
+  const { sendingToken, setHasSufficientNativeBalance } = useNewTransactionContext();
+  const { data: balanceData } = useBalance({
+    address: address,
+    token: sendingToken === "native" ? undefined : sendingToken,
+  });
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const balanceAmount = balanceData ? parseFloat(balanceData.formatted) : 0;
+    const enteredAmount = parseFloat(quantity);
+
+    if (quantity && balanceAmount < enteredAmount) {
+      setError("Insufficient balance");
+      setHasSufficientNativeBalance(false);
+    } else if (enteredAmount === 0) {
+      setError("Amount is zero");
+      setHasSufficientNativeBalance(false);
+    } else {
+      setError("");
+      setHasSufficientNativeBalance(true);
+    }
+  }, [balanceData, quantity, setHasSufficientNativeBalance]);
+
   return (
     <Container>
-      <AmountField quantity={quantity} setQuantity={setQuantity} />
+      <AmountField quantity={quantity} setQuantity={setQuantity} error={error} />
       <TokenSelector />
     </Container>
   );

diff --git a/web/src/utils/mapWagmiNetworkToAlchemyNetwork.ts b/web/src/utils/mapWagmiNetworkToAlchemyNetwork.ts
@@ -10,8 +10,6 @@ export function mapWagmiNetworkToAlchemyNetwork(chainId: number) {
       return Network.OPT_MAINNET;
     case 137:
       return Network.MATIC_MAINNET;
-    case 80001:
-      return Network.MATIC_MUMBAI;
     case 42161:
       return Network.ARB_MAINNET;
     case 421614: