Fix/fund pool check balance

apps/web/components/CheckPassport.tsx

@@ -263,12 +263,12 @@ export function CheckPassport({
       >
         <div className="flex flex-col gap-8">
           <div>
-            <p>
+            <div>
               Passport score:{" "}
               <Skeleton isLoading={passportUserFetching}>
                 <span className="font-semibold w-12">{score.toFixed(2)}</span>
               </Skeleton>
-            </p>
+            </div>
             <p>
               Pool requirement:{" "}
               <span className="font-semibold">{threshold.toFixed(2)}</span>

apps/web/components/PoolMetrics.tsx

@@ -2,8 +2,9 @@
 
 import { FC, useEffect, useState } from "react";
 import { FetchTokenResult } from "@wagmi/core";
+import { useForm } from "react-hook-form";
 import { parseUnits } from "viem";
-import { Address, useAccount } from "wagmi";
+import { Address, useAccount, useBalance } from "wagmi";
 import { Allo } from "#/subgraph/.graphclient";
 import { Button } from "./Button";
 import { DisplayNumber } from "./DisplayNumber";
@@ -24,6 +25,7 @@ interface PoolMetricsProps {
   poolId: number;
   chainId: string;
 }
+type FormInputs = { amount: number };
 
 export const PoolMetrics: FC<PoolMetricsProps> = ({
   alloInfo,
@@ -35,13 +37,27 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
 }) => {
   const INPUT_TOKEN_MIN_VALUE = 1 / 10 ** poolToken.decimals;
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<FormInputs>();
+
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const [amount, setAmount] = useState<string>("");
   const { address: accountAddress } = useAccount();
   const { publish } = usePubSubContext();
+  const { data: balance } = useBalance({
+    address: accountAddress,
+    formatUnits: poolToken.decimals,
+    token: poolToken.address,
+    watch: true,
+    chainId: Number(chainId),
+  });
 
-  const requestedAmount = parseUnits(amount, poolToken.decimals);
-
+  const tokenWalletBalance = balance ? Number(balance.value) : 0;
+  const amount = watch("amount") ? watch("amount") : 0;
+  const requestedAmount = parseUnits(amount.toString(), poolToken.decimals);
   const {
     write: writeFundPool,
     transactionStatus: fundPoolStatus,
@@ -90,14 +106,14 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
     }));
   }, [fundPoolStatus]);
 
-  const handleFundPool = () => {
-    setIsOpenModal(true);
+  const handleFundPool = (data: FormInputs) => {
     setAddFundsTx((prev) => ({
       ...prev,
       message: getTxMessage("idle"),
       status: "idle",
     }));
-    handleAllowance();
+    setIsOpenModal(true);
+    handleAllowance(parseUnits(data.amount.toString(), poolToken.decimals));
   };
 
   return (
@@ -108,15 +124,18 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
         isOpen={isOpenModal}
         onClose={() => setIsOpenModal(false)}
       >
-        <div className="flex gap-2">
+        <div className="flex gap-2 mb-4">
           <p>Adding:</p>
-          <DisplayNumber number={amount} tokenSymbol={poolToken.symbol} />
+          <DisplayNumber
+            number={amount.toString()}
+            tokenSymbol={poolToken.symbol}
+          />
         </div>
       </TransactionModal>
       <section className="section-layout gap-4 flex flex-col">
         <h2>Pool Funds</h2>
         <div className="flex justify-between items-center flex-wrap">
-          <div className="flex gap-3 items-baseline">
+          <div className="flex gap-3">
             <p className="subtitle2">Funds available:</p>
             <DisplayNumber
               number={[BigInt(poolAmount), poolToken.decimals]}
@@ -127,22 +146,31 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
           </div>
           <form
             className="flex gap-2 flex-wrap"
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleFundPool();
-            }}
+            onSubmit={handleSubmit(handleFundPool)}
           >
             <FormInput
               type="number"
               placeholder="0"
               required
               step={INPUT_TOKEN_MIN_VALUE}
-              onChange={(e) => setAmount(e.target.value)}
+              register={register}
+              registerKey="amount"
+              errors={errors}
               value={amount}
               otherProps={{
                 step: INPUT_TOKEN_MIN_VALUE,
                 min: INPUT_TOKEN_MIN_VALUE,
               }}
+              registerOptions={{
+                max: {
+                  value: tokenWalletBalance,
+                  message: "Not enough balance",
+                },
+                min: {
+                  value: INPUT_TOKEN_MIN_VALUE,
+                  message: `Amount must be greater than ${INPUT_TOKEN_MIN_VALUE}`,
+                },
+              }}
               suffix={poolToken.symbol}
             />
             <Button

apps/web/hooks/useHandleAllowance.tsx

@@ -15,7 +15,7 @@ export function useHandleAllowance(
   triggerNextTx: () => void,
 ): {
   allowanceTxProps: TransactionProps;
-  handleAllowance: () => void;
+  handleAllowance: (formAmount?: bigint) => void;
   resetState: () => void;
 } {
   const chainId = useChainIdFromPath();
@@ -41,19 +41,19 @@ export function useHandleAllowance(
   } = useContractWriteWithConfirmations({
     address: tokenAddr,
     abi: erc20ABI,
-    args: [spenderAddr, amount],
+    // args: [spenderAddr, amount],
     functionName: "approve",
     contractName: "ERC20",
     showNotification: false,
   });
 
-  const handleAllowance = async () => {
-    const newAllowance = await refetchAllowance();
-    if (
-      newAllowance.data === undefined ||
-      (newAllowance.data as bigint) < amount
-    ) {
-      writeAllowToken();
+  const handleAllowance = async (formAmount?: bigint) => {
+    const currentAllowance = await refetchAllowance();
+    if (formAmount) {
+      amount = formAmount;
+    }
+    if (!currentAllowance?.data || currentAllowance.data < amount) {
+      writeAllowToken({ args: [spenderAddr, amount] });
     } else {
       setAllowanceTxProps({
         contractName: `${tokenSymbol} expenditure approval`,

apps/web/package.json

@@ -52,6 +52,7 @@
     "react-hook-form": "^7.50.1",
     "react-toastify": "^10.0.4",
     "sass": "^1.77.8",
+    "sharp": "^0.33.5",
     "ui": "workspace:*",
     "urql": "^4.0.6",
     "usehooks-ts": "^3.1.0",

pkg/contracts/src/RegistryCommunity/RegistryCommunityV0_0.sol

@@ -501,9 +501,9 @@ contract RegistryCommunityV0_0 is ProxyOwnableUpgrader, ReentrancyGuardUpgradeab
             revert StrategyExists();
         }
         enabledStrategies[_newStrategy] = true;
-        ISybilScorer sybilScorer= CVStrategyV0_0(payable(_newStrategy)).sybilScorer();
+        ISybilScorer sybilScorer = CVStrategyV0_0(payable(_newStrategy)).sybilScorer();
         if (address(sybilScorer) != address(0)) {
-          sybilScorer.activateStrategy(_newStrategy);
+            sybilScorer.activateStrategy(_newStrategy);
         }
         emit StrategyAdded(_newStrategy);
     }

pkg/contracts/test/CVStrategyHelpers.sol

@@ -87,8 +87,9 @@ contract CVStrategyHelpers is Native, Accounts {
         ArbitrableConfig memory arbitrableConfig
     ) public returns (uint256 poolId) {
         // IAllo allo = IAllo(ALLO_PROXY_ADDRESS);
-        CVStrategyInitializeParamsV0_1 memory params =
-        getParams(registryCommunity, proposalType, pointSystem, pointConfig, arbitrableConfig, new address[](1), address(0), 0);
+        CVStrategyInitializeParamsV0_1 memory params = getParams(
+            registryCommunity, proposalType, pointSystem, pointConfig, arbitrableConfig, new address[](1), address(0), 0
+        );
 
         address[] memory _pool_managers = new address[](2);
         _pool_managers[0] = address(this);

pkg/contracts/test/CVStrategyTest.t.sol

@@ -2576,7 +2576,7 @@ contract CVStrategyTest is Test, AlloSetup, RegistrySetupFull, CVStrategyHelpers
         vm.stopPrank();
 
         //notice how we set the score to the user as 0
-        uint256 passportScore =0;
+        uint256 passportScore = 0;
         passportScorer.addUserScore(address(6), passportScore);
 
         vm.startPrank(address(6));