WIP

Author: 0xKurt

packages/grant-explorer/src/features/round/ViewCartPage/RoundInCart.tsx

@@ -67,16 +67,55 @@ export function RoundInCart(
   ]);
 
   const estimate = matchingEstimatesToText(matchingEstimates);
+  const [gitcoinEnabled, setGitcoinEnabled] = React.useState(false);
+  const [gitcoinAmount, setGitcoinAmount] = React.useState("");
+  const [gitcoinDonationType, setGitcoinDonationType] = React.useState<
+    "percentage" | "amount"
+  >("percentage");
 
-  const totalDonationInUSD =
+  const baseDonationInUSD =
     props.roundCart.reduce((acc, proj) => acc + Number(proj.amount), 0) *
     props.payoutTokenPrice;
 
+  // Helper function to convert between percentage and amount
+  const convertAmount = (
+    value: string,
+    fromType: "percentage" | "amount",
+    toType: "percentage" | "amount"
+  ) => {
+    const numValue = Number(value) || 0;
+    if (fromType === toType) return value;
+    if (fromType === "percentage" && toType === "amount") {
+      return (
+        (baseDonationInUSD * numValue) /
+        (100 * props.payoutTokenPrice)
+      ).toFixed(6);
+    } else {
+      return (
+        (numValue * props.payoutTokenPrice * 100) /
+        baseDonationInUSD
+      ).toFixed(2);
+    }
+  };
+
+  // Update the donation calculation
+  const gitcoinDonationInUSD = gitcoinEnabled
+    ? gitcoinDonationType === "percentage"
+      ? (baseDonationInUSD * (Number(gitcoinAmount) || 0)) / 100
+      : (Number(gitcoinAmount) || 0) * props.payoutTokenPrice
+    : 0;
+
   const showMatchingEstimate =
     matchingEstimateError === undefined &&
     matchingEstimates !== undefined &&
     round?.chainId !== 43114; // Avalanche
 
+  React.useEffect(() => {
+    if (!gitcoinEnabled) {
+      setGitcoinAmount("");
+    }
+  }, [gitcoinEnabled]);
+
   return (
     <div className="my-4">
       {/* Round In Cart */}
@@ -128,6 +167,61 @@ export function RoundInCart(
               </div>
             );
           })}
+
+          {/* Gitcoin Donation Section */}
+          <div className="mt-4 p-4 border-t border-gray-200">
+            <div className="flex items-center justify-end space-x-2">
+              <input
+                type="checkbox"
+                id="gitcoinDonation"
+                className="rounded border-gray-300"
+                checked={gitcoinEnabled}
+                onChange={(e) => setGitcoinEnabled(e.target.checked)}
+              />
+              <label htmlFor="gitcoinDonation" className="text-sm font-medium">
+                Support Gitcoin with an additional donation
+              </label>
+            </div>
+
+            {gitcoinEnabled && (
+              <div className="mt-2 flex items-center justify-end space-x-2">
+                <input
+                  type="number"
+                  min="0"
+                  max={gitcoinDonationType === "percentage" ? 1000 : undefined}
+                  value={gitcoinAmount}
+                  onChange={(e) => {
+                    setGitcoinAmount(e.target.value);
+                  }}
+                  className="w-20 px-2 py-1 border rounded text-right"
+                  placeholder="0"
+                  step="any"
+                />
+                <select
+                  value={gitcoinDonationType}
+                  onChange={(e) => {
+                    const newType = e.target.value as "percentage" | "amount";
+                    const newAmount = convertAmount(
+                      gitcoinAmount,
+                      gitcoinDonationType,
+                      newType
+                    );
+                    setGitcoinDonationType(newType);
+                    setGitcoinAmount(newAmount);
+                  }}
+                  className="px-2 py-1 border rounded text-sm w-40"
+                >
+                  <option value="percentage">% of donation</option>
+                  <option value="amount">
+                    {props.selectedPayoutToken.code}
+                  </option>
+                </select>
+                <span className="text-sm text-gray-500">
+                  (${gitcoinDonationInUSD.toFixed(2)})
+                </span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
       {/* Total Donations */}
@@ -167,9 +261,15 @@ export function RoundInCart(
             <div className="font-semibold">
               <p>
                 <span className="mr-2">Total donation</span>$
-                {isNaN(totalDonationInUSD)
+                {isNaN(baseDonationInUSD)
                   ? "0.0"
-                  : totalDonationInUSD.toFixed(2)}
+                  : baseDonationInUSD.toFixed(2)}
+                {gitcoinEnabled && gitcoinAmount !== "" && (
+                  <span className="text-sm text-gray-500 ml-2">
+                    (plus an additional ${gitcoinDonationInUSD.toFixed(2)}{" "}
+                    Gitcoin donation)
+                  </span>
+                )}
               </p>
             </div>
           </div>