add addresses and filter by supported chains

0xKurt · 0xKurt · commit f7a430401b15 · 2025-03-31T09:48:31.000+02:00
diff --git a/packages/grant-explorer/src/features/round/DonateToGitcoin/components/DonateToGitcoinContent.tsx b/packages/grant-explorer/src/features/round/DonateToGitcoin/components/DonateToGitcoinContent.tsx
@@ -7,7 +7,10 @@ import {
 } from "common";
 import { useState, useRef, useEffect, useMemo } from "react";
 
-import { useDonateToGitcoin } from "../../DonateToGitcoinContext";
+import {
+  useDonateToGitcoin,
+  GITCOIN_RECIPIENT_CONFIG,
+} from "../../DonateToGitcoinContext";
 import { DonationInput } from "./DonationInput";
 
 import React from "react";
@@ -39,6 +42,7 @@ export const DonateToGitcoinContent = React.memo(
 
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef<HTMLDivElement>(null);
+    const [isInitialized, setIsInitialized] = useState(false);
 
     const { votingTokens, tokenAmountInfo } = useMemo(() => {
       if (!tokenFilters) {
@@ -80,6 +84,20 @@ export const DonateToGitcoinContent = React.memo(
     const [error, setError] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
 
+    // Filter chains to only show Gitcoin supported ones
+    const supportedChains = useMemo(
+      () => chains.filter((chain) => chain.id in GITCOIN_RECIPIENT_CONFIG),
+      [chains]
+    );
+
+    // Handle initial setup
+    useEffect(() => {
+      if (supportedChains.length === 1 && !selectedChainId) {
+        setSelectedChainId(supportedChains[0].id);
+      }
+      setIsInitialized(true);
+    }, [supportedChains, selectedChainId, setSelectedChainId]);
+
     useEffect(() => {
       let isMounted = true;
 
@@ -185,7 +203,7 @@ export const DonateToGitcoinContent = React.memo(
       totalDonationsByChain,
     ]);
 
-    if (!isEnabled) return null;
+    if (!isEnabled || !isInitialized) return null;
 
     const renderChainOption = (chain: TChain) => {
       const votingInfo = votingTokens[chain.id];
@@ -219,9 +237,9 @@ export const DonateToGitcoinContent = React.memo(
           </span>
 
           <div className="relative flex items-center rounded-lg flex-grow w-full">
-            {chains.length === 1 ? (
+            {supportedChains.length === 1 ? (
               <div className="w-full p-[9px] rounded-[6px] border-[0.75px] border-[#D7D7D7] bg-white font-modern-era font-medium">
-                {renderChainOption(chains[0])}
+                {renderChainOption(supportedChains[0])}
               </div>
             ) : (
               <>
@@ -242,7 +260,7 @@ export const DonateToGitcoinContent = React.memo(
 
                 {isOpen && (
                   <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#D7D7D7] rounded-[6px] shadow-lg z-10">
-                    {chains
+                    {supportedChains
                       .sort((a, b) => a.prettyName.localeCompare(b.prettyName))
                       .map((chain) => (
                         <div
@@ -274,7 +292,9 @@ export const DonateToGitcoinContent = React.memo(
           )}
         </div>
 
-        {error && <p className="text-[11px] text-red-500">{error}</p>}
+        {isInitialized && error && (
+          <p className="text-[11px] text-red-500">{error}</p>
+        )}
       </div>
     );
   }
diff --git a/packages/grant-explorer/src/features/round/DonateToGitcoinContext.tsx b/packages/grant-explorer/src/features/round/DonateToGitcoinContext.tsx
@@ -48,21 +48,45 @@ type DonateToGitcoinContextType = {
   setAmountInWei: (amount: bigint) => void;
 };
 
-//todo: update with actual gitcoin data
+export const GITCOIN_RECIPIENT_CONFIG: {
+  [chainId: number]: {
+    nonce: bigint;
+    recipient: Hex;
+  };
+} = {
+  42220: {
+    // Celo
+    nonce: 10000n,
+    recipient: "0x6a02e9bdAd1C5B8cBbC3B200F0aaE67496FFd4d4",
+  },
+  42161: {
+    // Arbitrum One
+    nonce: 10000n,
+    recipient: "0x6a02e9bdAd1C5B8cBbC3B200F0aaE67496FFd4d4",
+  },
+  10: {
+    // Optimism
+    nonce: 10000n,
+    recipient: "0x6a02e9bdAd1C5B8cBbC3B200F0aaE67496FFd4d4",
+  },
+  8453: {
+    // Base
+    nonce: 10000n,
+    recipient: "0x6a02e9bdAd1C5B8cBbC3B200F0aaE67496FFd4d4",
+  },
+};
+
 export const getGitcoinRecipientData = (
   chainId: number
 ): {
   nonce: bigint;
   recipient: Hex;
 } => {
-  // prepared for different addresses and profiles, like on zksync or so
-  switch (chainId) {
-    default:
-      return {
-        nonce: 1147166n,
-        recipient: "0x5645bF145C3f1E974D0D7FB91bf3c68592ab5012",
-      };
+  const config = GITCOIN_RECIPIENT_CONFIG[chainId];
+  if (!config) {
+    throw new Error(`Unsupported chainId: ${chainId}`);
   }
+  return config;
 };
 
 const DonateToGitcoinContext = createContext<DonateToGitcoinContextType | null>(
@@ -178,7 +202,6 @@ export function DonateToGitcoinProvider({
       setSelectedChainId(null);
       setSelectedToken("");
       setAmount("");
-      setTokenBalances({});
     }
   }, [isEnabled, setSelectedChainId, setSelectedToken, setAmount]);
 
diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/ChainConfirmationModalBody.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/ChainConfirmationModalBody.tsx
@@ -6,7 +6,10 @@ import { parseChainId } from "common/src/chains";
 import { Checkbox } from "@chakra-ui/react";
 import { DonateToGitcoin } from "../DonateToGitcoin";
 import { zeroAddress } from "viem";
-import { useDonateToGitcoin } from "../DonateToGitcoinContext";
+import {
+  useDonateToGitcoin,
+  GITCOIN_RECIPIENT_CONFIG,
+} from "../DonateToGitcoinContext";
 import { TotalAmountInclGitcoinDonation } from "../DonateToGitcoin/components/TotalAmountInclGitcoinDonation";
 
 type ChainConfirmationModalBodyProps = {
@@ -69,6 +72,10 @@ export function ChainConfirmationModalBody({
     setTokenFilters(tokenFilters);
   }, [tokenFilters, setTokenFilters]);
 
+  const hasGitcoinSupportedChain = chainIdsBeingCheckedOut.some(
+    (chainId) => chainId in GITCOIN_RECIPIENT_CONFIG
+  );
+
   return (
     <div className="flex flex-col">
       <p className="text-sm text-grey-400">
@@ -108,28 +115,45 @@ export function ChainConfirmationModalBody({
             ))}
         </div>
         <div className="">
-          <div className="flex justify-between items-center py-3 mb-6 border-b border-[#D7D7D7]">
-            <span className="font-inter text-[15px] font-medium text-black">
-              Subtotal
-            </span>
-            <span className="font-inter text-[15px] font-medium text-black">
-              ~${totalDonationAcrossChainsInUSD.toFixed(2)}
-            </span>
-          </div>
-          <DonateToGitcoin
-            totalAmount={totalDonationAcrossChainsInUSD.toFixed(2)}
-            totalDonationsByChain={totalDonationsPerChain}
-          />
-          <div className="pt-6">
-            <div className="flex justify-between items-center py-3 border-y mb-3 border-[#D7D7D7]">
+          {hasGitcoinSupportedChain && (
+            <div className="flex justify-between items-center py-3 mb-6 border-b border-[#D7D7D7]">
+              <span className="font-inter text-[15px] font-medium text-black">
+                Subtotal
+              </span>
+              <span className="font-inter text-[15px] font-medium text-black">
+                ~${totalDonationAcrossChainsInUSD.toFixed(2)}
+              </span>
+            </div>
+          )}
+          {hasGitcoinSupportedChain ? (
+            <DonateToGitcoin
+              totalAmount={totalDonationAcrossChainsInUSD.toFixed(2)}
+              totalDonationsByChain={totalDonationsPerChain}
+            />
+          ) : (
+            <div className="flex justify-between items-center mb-3 py-3">
               <span className="font-inter text-[15px] font-medium text-black">
                 Total
               </span>
               <TotalAmountInclGitcoinDonation
                 totalDonationAcrossChainsInUSD={totalDonationAcrossChainsInUSD}
               />
             </div>
-          </div>
+          )}
+          {hasGitcoinSupportedChain && (
+            <div className="pt-6">
+              <div className="flex justify-between items-center py-3 border-y mb-3 border-[#D7D7D7]">
+                <span className="font-inter text-[15px] font-medium text-black">
+                  Total
+                </span>
+                <TotalAmountInclGitcoinDonation
+                  totalDonationAcrossChainsInUSD={
+                    totalDonationAcrossChainsInUSD
+                  }
+                />
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/PayoutModals.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/PayoutModals.tsx
@@ -38,10 +38,8 @@ export function PayoutModals({
   totalDonationAcrossChainsInUSD: number;
 }) {
   const {
-    isEnabled,
     selectedChainId,
     selectedToken,
-    amount,
     directAllocationPoolId,
     amountInWei,
   } = useDonateToGitcoin();
@@ -59,6 +57,11 @@ export function PayoutModals({
     number[]
   >(Object.keys(projectsByChain).map(Number));
 
+  const cancelButtonAction = () => {
+    setOpenChainConfirmationModal(false);
+    setChainIdsBeingCheckedOut(Object.keys(projectsByChain).map(Number));
+  };
+
   /** We find the round that ends last, and take its end date as the permit deadline */
   const currentPermitDeadline =
     rounds && rounds.length > 0
@@ -113,6 +116,7 @@ export function PayoutModals({
         title={"Checkout"}
         confirmButtonText={"Checkout"}
         confirmButtonAction={handleSubmitDonation}
+        cancelButtonAction={cancelButtonAction}
         body={
           <ChainConfirmationModalBody
             projectsByChain={projectsByChain}
