feat: matching estimates hook

Author: vacekj

packages/grant-explorer/package.json

@@ -59,7 +59,8 @@
     "@testing-library/user-event": "^14.1.1",
     "@wagmi/core": "0.10.16",
     "@walletconnect/modal": "^2.5.9",
-    "allo-indexer-client": "github:gitcoinco/allo-indexer-client#0549b473941a916b38426b32f59250f87ec3274d",
+    "allo-indexer": "file:/Users/vacekj/Programming/allo-indexer",
+    "allo-indexer-client": "github:gitcoinco/allo-indexer-client#6220c4a7f6c7770117380581b2d0afb9abf0a4eb",
     "babel-loader": "^8.3.0",
     "buffer": "^6.0.3",
     "common": "workspace:*",
@@ -95,9 +96,10 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "swr": "^2.0.0",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
     "url": "^0.11.0",
     "util": "^0.12.4",
+    "viem": "^1.4.1",
     "wagmi": "0.12.18",
     "web-vitals": "^2.1.0",
     "webpack": ">=2"

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

@@ -1,32 +1,91 @@
 import { BigNumber, ethers } from "ethers";
-import React from "react";
-import { PayoutToken } from "../../api/types";
+import React, { useMemo } from "react";
+import { DonationInput, PayoutToken } from "../../api/types";
+import useSWR from "swr";
+import { Client } from "allo-indexer-client";
+import { useParams } from "react-router-dom";
+import { useAccount, useNetwork } from "wagmi";
 
-function useMatchingEstimation(): {
-  totalMatchingEstimation: bigint;
-} {
-  return {
-    totalMatchingEstimation: 0n,
-  };
+export function useAlloIndexerClient(): Client {
+  const { chain } = useNetwork();
+
+  return useMemo(() => {
+    return new Client(
+      fetch.bind(window),
+      process.env.REACT_APP_ALLO_API_URL ?? "",
+      chain?.id ?? 1
+    );
+  }, [chain?.id]);
+}
+
+export function useMatchingEstimates(
+  roundId: string,
+  chainId: string,
+  potentialVotes: {
+    contributor: string;
+    recipient: string;
+    amount: bigint;
+  }[]
+) {
+  const client = useAlloIndexerClient();
+  console.log(client, roundId, chainId, potentialVotes);
+  return useSWR([roundId, chainId, "/estimates"], ([roundId]) => {
+    return client.getMatchingEstimations(roundId, chainId, potentialVotes);
+  });
 }
 
 type SummaryBoxProps = {
   payoutTokenPrice: number | undefined;
   totalDonation: BigNumber;
   selectedPayoutToken: PayoutToken;
+  donations: DonationInput[];
 };
 
 export function Summary({
   payoutTokenPrice,
   totalDonation,
   selectedPayoutToken,
+  donations,
 }: SummaryBoxProps) {
+  const { chainId, roundId } = useParams();
+  const { address } = useAccount();
+
+  const { data, error, isLoading } = useMatchingEstimates(
+    roundId!,
+    chainId!,
+    donations.map((donation) => ({
+      amount: BigInt(donation.amount),
+      recipient: donation.projectAddress,
+      contributor: address ?? "",
+    }))
+  );
+
+  console.log("loading", isLoading);
+  if (error) {
+    console.log(
+      "error",
+      JSON.stringify(error, Object.getOwnPropertyNames(error))
+    );
+  }
+  console.log("data", data);
+
+  if (!roundId || !chainId) {
+    return null;
+  }
+
   const totalDonationInUSD =
     payoutTokenPrice &&
     Number(
       ethers.utils.formatUnits(totalDonation, selectedPayoutToken.decimal)
     ) * Number(payoutTokenPrice.toFixed(2));
 
+  const totalMatchingInUSD =
+    data &&
+    data
+      ?.filter((estimate) => estimate.difference > 0)
+      .map((estimate) => estimate.difference)
+      .reduce((acc, curr) => acc + curr) * BigInt(payoutTokenPrice ?? 0);
+
   return (
     <div className="shrink 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>
@@ -35,7 +94,7 @@ export function Summary({
         <p>
           <span data-testid={"totalDonation"} className="mr-2">
             {ethers.utils.formatUnits(
-              totalDonation,
+              BigNumber.from(totalMatchingInUSD),
               selectedPayoutToken.decimal
             )}
           </span>

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

@@ -318,6 +318,7 @@ export default function ViewCart() {
             payoutTokenPrice={payoutTokenPrice}
             selectedPayoutToken={selectedPayoutToken}
             totalDonation={totalDonation}
+            donations={donations}
           />
           <Button
             $variant="solid"

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

@@ -32,8 +32,6 @@ import PassportBanner from "../common/PassportBanner";
 import { ProjectBanner } from "../common/ProjectBanner";
 import RoundEndedBanner from "../common/RoundEndedBanner";
 import Breadcrumb, { BreadcrumbItem } from "../common/Breadcrumb";
-import { linearQF } from "pluralistic";
-import { MatchingEstimations } from "../common/MatchingEstimations";
 
 const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
@@ -550,13 +548,6 @@ export function ProjectStats() {
         "rounded bg-gray-50 mb-4 p-4 gap-4 grid grid-cols-3 md:flex md:flex-col"
       }
     >
-      {projectToRender && (
-        <MatchingEstimations
-          projectId={projectToRender.grantApplicationId}
-          roundId={roundId as string}
-          recipient={projectToRender.recipient}
-        />
-      )}
       <div>
         <h3>${application?.amountUSD.toFixed(2) ?? "-"}</h3>
         <p>funding received in current round</p>

packages/grant-explorer/src/features/round/ViewProjectDetails.tsx

@@ -3,6 +3,7 @@ import { Client } from "allo-indexer-client";
 import { useWallet } from "./features/common/Auth";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
+import { ChainId } from "common";
 
 export function useDebugMode(): boolean {
   const [searchParams] = useSearchParams();