Matching estimates on checkout page

.github/workflows/grant-explorer.yml

@@ -32,12 +32,12 @@ jobs:
 
       - name: Lint Explorer
         run: |
-          pnpm re-lint    
+          pnpm ge-lint    
 
       - name: Test Explorer
         run: |
-          pnpm re-test
+          pnpm ge-test
 
       - name: Typecheck Explorer
         run: |
-          pnpm re-typecheck
+          pnpm ge-typecheck

package.json

@@ -19,11 +19,11 @@
     "rm-lint": "turbo run lint:ci --filter=round-manager",
     "rm-typecheck": "turbo run typecheck --filter=round-manager",
     "// grant explorer script": "====== packages/grant-explorer specific ======",
-    "re-build": "turbo run build --filter=grant-explorer",
-    "re-test": "turbo run test --filter=grant-explorer",
-    "re-start": "pnpm --filter grant-explorer run start",
-    "re-typecheck": "turbo run typecheck --filter=grant-explorer",
-    "re-lint": "turbo run lint:ci --filter=grant-explorer",
+    "ge-build": "turbo run build --filter=grant-explorer",
+    "ge-test": "turbo run test --filter=grant-explorer",
+    "ge-start": "pnpm --filter grant-explorer run start",
+    "ge-typecheck": "turbo run typecheck --filter=grant-explorer",
+    "ge-lint": "turbo run lint:ci --filter=grant-explorer",
     "// builder script": "====== packages/builder specific ======",
     "b-start": "pnpm --filter builder run start",
     "b-lint": "turbo run lint:ci --filter=builder",

packages/grant-explorer/src/features/common/MatchingEstimateTooltip.tsx

@@ -0,0 +1,46 @@
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
+import React from "react";
+import { Tooltip } from "@chakra-ui/react";
+
+export function MatchingEstimateTooltip(props: { isEligible: boolean }) {
+  return (
+    <div>
+      <Tooltip
+        hasArrow
+        closeDelay={2000}
+        placement={"bottom-end"}
+        label={
+          <p className="text-xs p-1 pointer-events-auto select-all">
+            {props.isEligible ? (
+              <>
+                Due to the nature of quadratic funding, this estimated match is
+                subject to change as the round progresses. Your match may start
+                at $0, but can change as the project receives more donations.
+                Read more about how quadratic funding works{" "}
+                <a href="https://wtfisqf.com">here</a>.
+              </>
+            ) : (
+              <>
+                Keep in mind that this is a potential match. By connecting to
+                Gitcoin Passport, you can update your score before or after
+                submitting your donation.
+                <a href="https://passport.gitcoin.co" target="_blank">
+                  Click here
+                </a>{" "}
+                to configure your score.
+              </>
+            )}
+          </p>
+        }
+        id="matching-estimate-tooltip"
+        className={"max-w-sm bg-gray-500 text-gray-50"}
+      >
+        <InformationCircleIcon
+          data-background-color="#5932C4"
+          className="inline w-4 h-4 ml-2"
+          data-testid={"matching-estiamte-tooltip"}
+        />
+      </Tooltip>
+    </div>
+  );
+}

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

@@ -18,6 +18,7 @@ export function ProjectInCart(
     selectedPayoutToken: VotingToken;
     payoutTokenPrice: number;
     removeProjectFromCart: (grantApplicationId: string) => void;
+    matchingEstimateUSD: number | undefined;
   }
 ) {
   const { project, roundRoutePath } = props;

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

@@ -2,6 +2,14 @@ import React from "react";
 import { CartProject, VotingToken } from "../../api/types";
 import { useRoundById } from "../../../context/RoundContext";
 import { ProjectInCart } from "./ProjectInCart";
+import { useMatchingEstimates } from "../../../hooks/matchingEstimate";
+import { getAddress, parseUnits, zeroAddress } from "viem";
+import { useAccount } from "wagmi";
+import { useCartStorage } from "../../../store";
+import { Skeleton } from "@chakra-ui/react";
+import { BoltIcon } from "@heroicons/react/24/outline";
+import { PassportState, usePassport } from "../../api/passport";
+import { MatchingEstimateTooltip } from "../../common/MatchingEstimateTooltip";
 
 export function RoundInCart(
   props: React.ComponentProps<"div"> & {
@@ -15,14 +23,84 @@ export function RoundInCart(
     String(props.roundCart[0].chainId),
     props.roundCart[0].roundId
   ).round;
+
   const minDonationThresholdAmount =
     round?.roundMetadata?.quadraticFundingConfig?.minDonationThresholdAmount ??
     1;
+
+  const { address } = useAccount();
+  const votingTokenForChain = useCartStorage((state) =>
+    state.getVotingTokenForChain(props.roundCart[0].chainId)
+  );
+
+  const {
+    data: matchingEstimates,
+    error: matchingEstimateError,
+    isLoading: matchingEstimateLoading,
+  } = useMatchingEstimates([
+    {
+      roundId: getAddress(round?.id ?? zeroAddress),
+      chainid: props.roundCart[0].chainId,
+      potentialVotes: props.roundCart.map((proj) => ({
+        amount: parseUnits(
+          proj.amount ?? "0",
+          votingTokenForChain.decimal ?? 18
+        ),
+        recipient: proj.recipient,
+        contributor: address ?? zeroAddress,
+        token: votingTokenForChain.address.toLowerCase(),
+      })),
+    },
+  ]);
+
+  const estimateText = matchingEstimates
+    ?.flat()
+    .map((est) => est.differenceInUSD ?? 0)
+    .filter((diff) => diff > 0)
+    .reduce((acc, b) => acc + b, 0)
+    .toFixed(2);
+
+  const { passportState, passport } = usePassport({
+    address: address ?? "",
+  });
+
+  const isNotEligibleForMatching =
+    passportState === PassportState.NOT_CONNECTED ||
+    (passport?.score !== undefined && Number(passport.score) < 1);
+
   return (
     <div className="my-4 bg-grey-50 rounded-xl">
-      <div className="flex flex-row pt-4 sm:px-4 px-2">
-        <p className="text-xl  font-semibold">{round?.roundMetadata?.name}</p>
-        <p className="text-lg font-bold ml-2">({props.roundCart.length})</p>
+      <div className="flex flex-row items-center pt-4 sm:px-4 px-2 justify-between">
+        <div className={"flex"}>
+          <p className="text-xl  font-semibold">{round?.roundMetadata?.name}</p>
+          <p className="text-lg font-bold ml-2">({props.roundCart.length})</p>
+        </div>
+        <div
+          className={`flex flex-row gap-4 items-center justify-between font-semibold italic ${
+            isNotEligibleForMatching ? "text-red-400" : "text-teal-500"
+          }`}
+        >
+          {matchingEstimateError === undefined &&
+            matchingEstimates !== undefined && (
+              <>
+                <div className="flex flex-row  items-center">
+                  <p>Estimated match</p>
+                  <MatchingEstimateTooltip
+                    isEligible={!isNotEligibleForMatching}
+                  />
+                </div>
+                <div className="flex justify-end ">
+                  <Skeleton isLoaded={!matchingEstimateLoading}>
+                    <p>
+                      <BoltIcon className={"w-4 h-4 inline"} />
+                      ~$
+                      {estimateText}
+                    </p>
+                  </Skeleton>
+                </div>
+              </>
+            )}
+        </div>
       </div>
       {minDonationThresholdAmount && (
         <div>
@@ -41,6 +119,15 @@ export function RoundInCart(
             removeProjectFromCart={props.handleRemoveProjectFromCart}
             project={project}
             index={key}
+            matchingEstimateUSD={
+              matchingEstimates
+                ?.flat()
+                .find(
+                  (est) =>
+                    getAddress(est.recipient ?? zeroAddress) ===
+                    getAddress(project.recipient ?? zeroAddress)
+                )?.differenceInUSD
+            }
             roundRoutePath={`/round/${props.roundCart[0].chainId}/${props.roundCart[0].roundId}`}
             last={key === props.roundCart.length - 1}
             payoutTokenPrice={props.payoutTokenPrice}

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

@@ -1,4 +1,4 @@
-import { ChainId, PassportState, getTokenPrice } from "common";
+import { ChainId, getTokenPrice, PassportState } from "common";
 import { useCartStorage } from "../../../store";
 import React, { useEffect, useMemo, useState } from "react";
 import { Summary } from "./Summary";
@@ -8,18 +8,23 @@ import { ChainConfirmationModalBody } from "./ChainConfirmationModalBody";
 import { ProgressStatus } from "../../api/types";
 import { modalDelayMs } from "../../../constants";
 import { useNavigate } from "react-router-dom";
-import { useAccount, useWalletClient, usePublicClient } from "wagmi";
+import { useAccount, usePublicClient, useWalletClient } from "wagmi";
 import { Button } from "common/src/styles";
 import { InformationCircleIcon } from "@heroicons/react/24/solid";
+import { BoltIcon } from "@heroicons/react/24/outline";
+
 import { usePassport } from "../../api/passport";
 import useSWR from "swr";
-import { round, groupBy, uniqBy } from "lodash-es";
+import { groupBy, uniqBy } from "lodash-es";
 import { getRoundById } from "../../api/round";
 import MRCProgressModal from "../../common/MRCProgressModal";
 import { MRCProgressModalBody } from "./MRCProgressModalBody";
 import { useCheckoutStore } from "../../../checkoutStore";
-import { formatUnits, parseUnits } from "viem";
+import { Address, formatUnits, getAddress, parseUnits } from "viem";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { useMatchingEstimates } from "../../../hooks/matchingEstimate";
+import { Skeleton } from "@chakra-ui/react";
+import { MatchingEstimateTooltip } from "../../common/MatchingEstimateTooltip";
 
 export function SummaryContainer() {
   const { projects, getVotingTokenForChain, chainToVotingToken } =
@@ -214,7 +219,7 @@ export function SummaryContainer() {
 
   async function handleSubmitDonation() {
     try {
-      if (!round || !walletClient) {
+      if (!walletClient) {
         return;
       }
 
@@ -236,7 +241,7 @@ export function SummaryContainer() {
     }
   }
 
-  const { passportState } = usePassport({
+  const { passportState, passport } = usePassport({
     address: address ?? "",
   });
 
@@ -275,13 +280,78 @@ export function SummaryContainer() {
     }
   }, [totalDonationAcrossChainsInUSDData]);
 
+  /* Matching estimates are calculated per-round */
+  const matchingEstimateParamsPerRound =
+    rounds?.map((round) => {
+      const projs = projects.filter((project) => project.roundId === round.id);
+      return {
+        roundId: getAddress(round.id ?? ""),
+        chainid: projs[0].chainId,
+        potentialVotes: projects.map((proj) => ({
+          amount: parseUnits(
+            proj.amount ?? "0",
+            getVotingTokenForChain(Number(proj.chainId) as ChainId).decimal ??
+              18
+          ),
+          recipient: proj.recipient,
+          contributor: address as Address,
+          token: getVotingTokenForChain(
+            Number(proj.chainId) as ChainId
+          ).address.toLowerCase(),
+        })),
+      };
+    }) ?? [];
+
+  const {
+    data: matchingEstimates,
+    error: matchingEstimateError,
+    isLoading: matchingEstimateLoading,
+  } = useMatchingEstimates(matchingEstimateParamsPerRound);
+
+  const estimateText = matchingEstimates
+    ?.flat()
+    .map((est) => est.differenceInUSD ?? 0)
+    .filter((diff) => diff > 0)
+    .reduce((acc, b) => acc + b, 0)
+    .toFixed(2);
+
   if (projects.length === 0) {
     return null;
   }
 
+  const isNotEligibleForMatching =
+    passportState === PassportState.NOT_CONNECTED ||
+    (passport?.score !== undefined && Number(passport.score) < 1);
+
   return (
     <div className="mb-5 block px-[16px] py-4 rounded-lg shadow-lg bg-white border border-violet-400 font-semibold">
       <h2 className="text-xl border-b-2 pb-2">Summary</h2>
+      <div
+        className={`flex flex-row items-center justify-between mt-4 font-semibold italic ${
+          isNotEligibleForMatching ? "text-red-400" : "text-teal-500"
+        }`}
+      >
+        {matchingEstimateError === undefined &&
+          matchingEstimates !== undefined && (
+            <>
+              <div className="flex flex-row mt-4 items-center">
+                <p>Estimated match</p>
+                <MatchingEstimateTooltip
+                  isEligible={!isNotEligibleForMatching}
+                />
+              </div>
+              <div className="flex justify-end mt-4">
+                <Skeleton isLoaded={!matchingEstimateLoading}>
+                  <p>
+                    <BoltIcon className={"w-4 h-4 inline"} />
+                    ~$
+                    {estimateText}
+                  </p>
+                </Skeleton>
+              </div>
+            </>
+          )}
+      </div>
       <div>
         {Object.keys(projectsByChain).map((chainId) => (
           <Summary