feat: insufficient funds error message

gitcoinco · Nov 21, 2023 · db969cf · db969cf
1 parent 0245c75
commit db969cf
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 46 deletions.
diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/Summary.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/Summary.tsx
@@ -2,7 +2,9 @@ import { ChainId, useTokenPrice } from "common";
 import React from "react";
 import { VotingToken } from "../../api/types";
 import { CHAINS } from "../../api/utils";
-import { formatUnits } from "viem";
+import { formatUnits, zeroAddress } from "viem";
+import { useAccount, useBalance } from "wagmi";
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
 
 type SummaryProps = {
   totalDonation: bigint;
@@ -22,36 +24,63 @@ export function Summary({
     payoutTokenPrice &&
     Number(formatUnits(totalDonation, selectedPayoutToken.decimal)) *
       Number(payoutTokenPrice);
+
+  const { address } = useAccount();
+
+  const { data: balance } = useBalance({
+    address,
+    token:
+      selectedPayoutToken.address === zeroAddress
+        ? undefined
+        : selectedPayoutToken.address,
+    chainId,
+  });
+  console.log("bal", balance);
+  console.log("total", totalDonation);
+
+  const insufficientFunds = balance ? totalDonation > balance.value : false;
+
   return (
-    <div className="flex flex-row justify-between mt-2">
-      <div className="flex flex-col">
-        <p className="mb-2">Your contribution on</p>
-        <p>
-          <img
-            className={"inline max-w-[32px] mr-2"}
-            alt={CHAINS[chainId].name}
-            src={CHAINS[chainId].logo}
-          />
-          {CHAINS[chainId].name}
-        </p>
+    <div>
+      <div className="flex flex-row justify-between mt-2">
+        <div className="flex flex-col">
+          <p className="mb-2">Your contribution on</p>
+          <p>
+            <img
+              className={"inline max-w-[32px] mr-2"}
+              alt={CHAINS[chainId].name}
+              src={CHAINS[chainId].logo}
+            />
+            {CHAINS[chainId].name}
+          </p>
+        </div>
+        <div className="flex flex-col">
+          <p>
+            <span data-testid={"totalDonation"} className="mr-2">
+              {formatUnits(totalDonation, selectedPayoutToken.decimal)}
+            </span>
+            <span data-testid={"summaryPayoutToken"}>
+              {selectedPayoutToken.name}
+            </span>
+          </p>
+          {payoutTokenPrice && (
+            <div className="flex justify-end mt-2">
+              <p className="text-[14px] text-grey-400">
+                $ {totalDonationInUSD?.toFixed(2)}
+              </p>
+            </div>
+          )}
+        </div>
       </div>
-      <div className="flex flex-col">
-        <p>
-          <span data-testid={"totalDonation"} className="mr-2">
-            {formatUnits(totalDonation, selectedPayoutToken.decimal)}
-          </span>
-          <span data-testid={"summaryPayoutToken"}>
-            {selectedPayoutToken.name}
-          </span>
+      {insufficientFunds && (
+        <p
+          data-testid="insufficientBalance"
+          className="rounded-md bg-red-50 py-2 text-pink-500 flex justify-center mt-2 mb-6 text-sm"
+        >
+          <InformationCircleIcon className="w-4 h-4 mr-1 mt-0.5" />
+          <span>Insufficient funds to donate on this network</span>
         </p>
-        {payoutTokenPrice && (
-          <div className="flex justify-end mt-2">
-            <p className="text-[14px] text-grey-400">
-              $ {totalDonationInUSD?.toFixed(2)}
-            </p>
-          </div>
-        )}
-      </div>
+      )}
     </div>
   );
 }
diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx
@@ -148,14 +148,6 @@ export function SummaryContainer() {
       return;
     }
 
-    // TODO: check if signer has enough token balance for the current round
-    // const accountBalance = rounds.find();
-    //
-    // if (!accountBalance || totalDonation.gt(accountBalance)) {
-    //   setInsufficientBalance(true);
-    //   return;
-    // }
-
     setOpenChainConfirmationModal(true);
   }
 
@@ -323,6 +315,7 @@ export function SummaryContainer() {
 
   const estimateText = matchingEstimatesToText(matchingEstimates);
 
+  /** If there are no projects, render nothing */
   if (projects.length === 0) {
     return null;
   }
@@ -424,16 +417,6 @@ export function SummaryContainer() {
             <span>You must enter donations for all the projects</span>
           </p>
         )}
-        {/*TODO: insufficient balance check*/}
-        {false && (
-          <p
-            data-testid="insufficientBalance"
-            className="rounded-md bg-red-50 py-2 text-pink-500 flex justify-center my-4 text-sm"
-          >
-            <InformationCircleIcon className="w-4 h-4 mr-1 mt-0.5" />
-            <span>You do not have enough funds for these donations</span>
-          </p>
-        )}
       </div>
       <PayoutModals />
     </div>