DG: Add payout token list

packages/round-manager/src/features/round/ApplicationDirectPayout.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import ProgressModal from "../common/ProgressModal";
 import { InformationCircleIcon } from "@heroicons/react/solid";
 import ReactTooltip from "react-tooltip";
@@ -15,16 +15,18 @@ import { Button, Input } from "common/src/styles";
 import { BigNumber, ethers } from "ethers";
 import { AnswerBlock, GrantApplication, Round } from "../api/types";
 import {
+  NATIVE,
   formatUTCDateAsISOString,
   getPayoutTokenOptions,
   getUTCTime,
   getLocalTime,
+  payoutTokens,
   useAllo,
 } from "common";
 import { useNetwork } from "wagmi";
 import { errorModalDelayMs } from "../../constants";
 import { usePayouts } from "./usePayouts";
-import { Hex } from "viem";
+import { Hex, isAddress, zeroAddress } from "viem";
 import { useDataLayer } from "data-layer";
 import { getConfig } from "common/src/config";
 
@@ -50,11 +52,7 @@ type Props = {
   answerBlocks: AnswerBlock[];
 };
 
-export default function ApplicationDirectPayout({
-  round,
-  application,
-  answerBlocks,
-}: Props) {
+export default function ApplicationDirectPayout({ round, application }: Props) {
   const { chain, address, signer } = useWallet();
   const { triggerPayout, progressSteps: payoutProgressSteps } = usePayout();
   const [isPayoutProgressModelOpen, setIsPayoutProgressModelOpen] =
@@ -70,6 +68,26 @@ export default function ApplicationDirectPayout({
   } = useForm<FormData>({
     resolver: yupResolver(schema),
   });
+
+  const isV2 = getConfig().allo.version === "allo-v2";
+  // in v1 you can't use native payout token
+  const tokensByChainInfo = isV2
+    ? getPayoutTokenOptions(chain.id)
+    : getPayoutTokenOptions(chain.id).filter(
+        (t) =>
+          t.address.toLowerCase() !== NATIVE.toLowerCase() &&
+          t.address !== zeroAddress
+      );
+
+  const [tokenInfo, setTokenInfo] = useState(tokensByChainInfo[0]);
+  const [selectedToken, setSelectedToken] = useState<Hex | "custom">(
+    tokenInfo.address
+  );
+  const [customTokenInput, setCustomTokenInput] = useState("");
+  const [payoutTokensMap, setPayoutTokensMap] = useState<
+    Map<string, { decimal: number; name: string; totalAmount: BigNumber }>
+  >(new Map());
+
   const network = useNetwork();
 
   const allInputs = watch();
@@ -83,30 +101,76 @@ export default function ApplicationDirectPayout({
     dataLayer,
   });
 
-  // find answer with question "Payout token"
-  const payoutTokenAnswer = answerBlocks?.find(
-    (a) => a.question === "Payout token"
-  );
-  if (payoutTokenAnswer === undefined) {
-    throw Error('"Payout token" not found in answers!');
-  }
-  // find token info based on payoutTokenAnswer
-  const tokensByChainInfo = getPayoutTokenOptions(chain.id);
-  const tokenInfo = tokensByChainInfo.find(
-    (t) => t.name.toLowerCase() === payoutTokenAnswer.answer?.toLowerCase()
-  );
-
-  if (!tokenInfo) {
-    throw Error(
-      `Token info not found for chain id: ${chain.id} and token ${payoutTokenAnswer}!`
-    );
-  }
-  // get payout wallet address
   const payoutWalletAddress = application.recipient;
   if (payoutWalletAddress === undefined) {
     throw Error('"Payout wallet address" not found in answers!');
   }
 
+  const noToken = () => {
+    return {
+      name: "",
+      address: zeroAddress,
+      decimal: 1,
+      chainId: chain.id,
+    };
+  };
+
+  const handleTokenChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === "custom") {
+      setSelectedToken("custom");
+      setTokenInfo({ ...noToken(), name: "custom" });
+    } else {
+      const selectedTokenId = event.target.value;
+      const selectedTokenInfo = tokensByChainInfo.find(
+        (token) => token.address === selectedTokenId
+      );
+
+      if (selectedTokenInfo) {
+        setSelectedToken(selectedTokenInfo.address);
+        setTokenInfo(selectedTokenInfo);
+      }
+    }
+  };
+
+  const fetchTokenData = async (
+    tokenAddress: string
+  ): Promise<{ name: string; decimal: number }> => {
+    if (!signer) return { name: "", decimal: 0 };
+
+    try {
+      const erc20 = Erc20__factory.connect(tokenAddress, signer);
+      const name = await erc20.symbol();
+      const decimal = await erc20.decimals();
+
+      return {
+        name,
+        decimal,
+      };
+    } catch (error) {
+      console.error(error);
+      return { name: "", decimal: 0 };
+    }
+  };
+
+  const handleCustomTokenInputChange = async (
+    event: ChangeEvent<HTMLInputElement>
+  ) => {
+    const tokenValue = event.target.value;
+    setCustomTokenInput(tokenValue);
+    if (isAddress(tokenValue)) {
+      const { name, decimal } = await fetchTokenData(tokenValue);
+      const customTokenInfo = {
+        name: name,
+        address: tokenValue,
+        decimal: decimal,
+        chainId: chain.id,
+      };
+      setTokenInfo(customTokenInfo);
+    } else {
+      setTokenInfo(noToken());
+    }
+  };
+
   const getAmountWithFee = () => {
     const amount = Number(allInputs.amount) || 0;
     const protocolFee = round.protocolFeePercentage ?? 0;
@@ -136,19 +200,25 @@ export default function ApplicationDirectPayout({
       tokenInfo.decimal
     );
 
-    const erc20 = Erc20__factory.connect(tokenInfo.address, signer);
-    const allowance = await erc20.allowance(
-      data.address,
-      round.payoutStrategy.id
-    );
+    let allowance = BigNumber.from(0);
+
     if (
-      allowance.lt(amountWithFeeBN) &&
-      address.toLowerCase() !== data.address.toLowerCase()
+      tokenInfo.address !== zeroAddress &&
+      tokenInfo.address.toLowerCase() !== NATIVE.toLowerCase()
     ) {
-      setPayoutError({
-        message: `In order to continue you need to allow the payout strategy contract with address ${round.payoutStrategy.id} to spend ${amountWithFee} ${tokenInfo.name} tokens.`,
-      });
-      return;
+      const erc20 = Erc20__factory.connect(tokenInfo.address, signer);
+      allowance = await erc20.allowance(data.address, round.payoutStrategy.id);
+      if (
+        allowance.lt(amountWithFeeBN) &&
+        address.toLowerCase() !== data.address.toLowerCase()
+      ) {
+        setPayoutError({
+          message: `In order to continue you need to allow the payout strategy contract with address ${round.payoutStrategy.id} to spend ${amountWithFee} ${tokenInfo.name} tokens.`,
+        });
+        return;
+      }
+    } else {
+      allowance = amountWithFeeBN;
     }
 
     setIsPayoutProgressModelOpen(true);
@@ -191,6 +261,62 @@ export default function ApplicationDirectPayout({
     }
   };
 
+  useEffect(() => {
+    const createPayoutTokenMap = async () => {
+      const map: Map<
+        string,
+        {
+          decimal: number;
+          name: string;
+          totalAmount: BigNumber;
+        }
+      > = new Map([]);
+
+      const filteredPayouts = payouts?.filter(
+        (p) => p.applicationIndex === application.applicationIndex
+      );
+
+      if (filteredPayouts) {
+        for (const payout of filteredPayouts) {
+          const token = map.get(payout.tokenAddress.toLowerCase());
+          if (!token) {
+            const pToken = payoutTokens.find(
+              (p) =>
+                p.address.toLowerCase() === payout.tokenAddress.toLowerCase()
+            );
+
+            let decimal = 0;
+            let name = "";
+
+            if (!pToken) {
+              // Token not found in the list, fetch from contract
+              const tokenData = await fetchTokenData(payout.tokenAddress);
+              decimal = tokenData.decimal;
+              name = tokenData.name;
+            } else {
+              decimal = pToken.decimal;
+              name = pToken.name;
+            }
+
+            map.set(payout.tokenAddress.toLowerCase(), {
+              decimal,
+              name,
+              totalAmount: BigNumber.from(payout.amount),
+            });
+          } else {
+            map.set(payout.tokenAddress.toLowerCase(), {
+              decimal: token.decimal,
+              name: token.name,
+              totalAmount: token.totalAmount.add(BigNumber.from(payout.amount)),
+            });
+          }
+        }
+      }
+      setPayoutTokensMap(map);
+    };
+    createPayoutTokenMap();
+  }, [payouts]);
+
   return (
     <>
       <section
@@ -259,9 +385,13 @@ export default function ApplicationDirectPayout({
                             <td className="text-sm leading-5 px-2 text-gray-400 text-left text-ellipsis overflow-hidden">
                               {ethers.utils.formatUnits(
                                 payout.amount,
-                                tokenInfo.decimal
+                                payoutTokensMap.get(
+                                  payout.tokenAddress.toLowerCase()
+                                )?.decimal || 18
                               )}{" "}
-                              {tokenInfo.name}
+                              {payoutTokensMap.get(
+                                payout.tokenAddress.toLowerCase()
+                              )?.name || "N/A"}
                             </td>
                             <td className="text-sm leading-5 px-2 text-gray-400 text-left">
                               {formatUTCDateAsISOString(
@@ -281,23 +411,15 @@ export default function ApplicationDirectPayout({
                     className="text-sm text-gray-400 text-left flex gap-4 content-center"
                     data-testid="direct-payout-payments-total"
                   >
-                    <span>Total paid out:</span>
-                    <span>
-                      {ethers.utils.formatUnits(
-                        payouts
-                          .filter(
-                            (p) =>
-                              p.applicationIndex ===
-                              application.applicationIndex
-                          )
-                          .reduce(
-                            (sum, payout) => sum.add(payout.amount),
-                            BigNumber.from(0)
-                          ),
-                        tokenInfo.decimal
-                      )}{" "}
-                      {tokenInfo.name}
-                    </span>
+                    <span>Total paid out: </span>
+                    {Array.from(payoutTokensMap.values()).map(
+                      (t, index, arr) => (
+                        <span key={index}>
+                          {`${ethers.utils.formatUnits(t.totalAmount, t.decimal || 18)} ${t.name}`}
+                          {index < arr.length - 1 && ", "}
+                        </span>
+                      )
+                    )}
                   </p>
                 </div>
               </>
@@ -314,7 +436,48 @@ export default function ApplicationDirectPayout({
           className="grid grid-cols-1 gap-4 sm:items-start shadow-sm text-grey-500 rounded border border-solid border-gray-100"
         >
           <div className="pt-7 pb-3.5 px-6 flex flex-col gap-4">
+            <div className="dropdown">
+              <label htmlFor="" className="block text-sm">
+                <p className="text-sm">
+                  <span>Select Token</span>
+                  <span className="text-right text-violet-400 float-right text-xs mt-1">
+                    *Required
+                  </span>
+                </p>
+              </label>
+              <div className="relative mt-2 rounded-md shadow-sm">
+                <select
+                  value={selectedToken}
+                  onChange={handleTokenChange}
+                  className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                >
+                  <option value="">Select a token</option>
+                  {tokensByChainInfo.map((token) => (
+                    <option key={token.address} value={token.address}>
+                      {token.name}
+                    </option>
+                  ))}
+                  <option value="custom">Custom Token</option>{" "}
+                </select>
+                {selectedToken === "custom" && ( // Conditionally render custom token input
+                  <input
+                    type="text"
+                    value={customTokenInput}
+                    onChange={handleCustomTokenInputChange}
+                    className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md mt-2"
+                    placeholder="Enter custom token address"
+                  />
+                )}
+                {tokenInfo.name === "" && (
+                  <p className="text-xs text-pink-500">
+                    Token address invalid or token not found.
+                  </p>
+                )}
+              </div>
+            </div>
+
             <div className="inputBox">
+              {/* add dropdown here */}
               <label htmlFor="" className="block text-sm">
                 <p className="text-sm">
                   <span>Amount</span>