use BG Ponder Indexer for fetching data (#6)

BuidlGuidl · Jan 18, 2024 · fec7919 · fec7919 · vercel · Jan 18, 2024
1 parent e144a16
commit fec7919
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 73 deletions.
diff --git a/packages/nextjs/hooks/useCohortWithdrawEvents.ts b/packages/nextjs/hooks/useCohortWithdrawEvents.ts
@@ -0,0 +1,40 @@
+import { gql, useQuery } from "urql";
+import contracts from "~~/generated/hardhat_contracts";
+
+const WithdrawalsQuery = gql`
+  query Withdrawls($cohortAddress: String!) {
+    cohortWithdrawals(where: { cohortContractAddress: $cohortAddress }, orderBy: "timestamp", orderDirection: "desc") {
+      reason
+      builder
+      amount
+      timestamp
+      builder
+      id
+    }
+  }
+`;
+
+export const useCohortWithdrawEvents = () => {
+  const [{ data: newWithdrawEventsData, fetching: isLoadingNew }] = useQuery({
+    query: WithdrawalsQuery,
+    variables: {
+      cohortAddress: contracts[10][0].contracts.SandGardenStreams.address,
+    },
+  });
+
+  const [{ data: oldWithdrawEventsData, fetching: isLoadingOld }] = useQuery({
+    query: WithdrawalsQuery,
+    variables: {
+      cohortAddress: contracts[10][0].contracts._SandGardenStreamsOld.address,
+    },
+  });
+
+  const newContractWithdrawEvents = newWithdrawEventsData?.cohortWithdrawals || [];
+  const oldContractWithdrawEvents = oldWithdrawEventsData?.cohortWithdrawals || [];
+
+  const data = [...newContractWithdrawEvents, ...oldContractWithdrawEvents];
+
+  const isLoading = isLoadingNew || isLoadingOld;
+
+  return { data, isLoading };
+};
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -30,6 +30,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
     "react-hot-toast": "^2.4.0",
+    "urql": "^4.0.6",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.7.2",
     "wagmi": "^0.12.0",

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -5,6 +5,7 @@ import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
+import { Client, Provider as URQLProvider, cacheExchange, fetchExchange } from "urql";
 import { WagmiConfig } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
@@ -17,6 +18,11 @@ import "~~/styles/globals.css";
 
 const shareTechMono = Share_Tech_Mono({ subsets: ["latin"], weight: "400" });
 
+const urqlClient = new Client({
+  url: "https://bg-ponder-indexer-production.up.railway.app/",
+  exchanges: [cacheExchange, fetchExchange],
+});
+
 const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   const price = useEthPrice();
   const setEthPrice = useAppStore(state => state.setEthPrice);
@@ -30,16 +36,18 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   return (
     <WagmiConfig client={wagmiClient}>
       <NextNProgress color="#c913ff" />
-      <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar}>
-        <div className={`flex flex-col min-h-screen ${shareTechMono.className}`}>
-          <Header />
-          <main className="relative flex flex-col flex-1">
-            <Component {...pageProps} />
-          </main>
-          <Footer />
-        </div>
-        <Toaster />
-      </RainbowKitProvider>
+      <URQLProvider value={urqlClient}>
+        <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar}>
+          <div className={`flex flex-col min-h-screen ${shareTechMono.className}`}>
+            <Header />
+            <main className="relative flex flex-col flex-1">
+              <Component {...pageProps} />
+            </main>
+            <Footer />
+          </div>
+          <Toaster />
+        </RainbowKitProvider>
+      </URQLProvider>
     </WagmiConfig>
   );
 };

diff --git a/packages/nextjs/pages/members.tsx b/packages/nextjs/pages/members.tsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ethers } from "ethers";
 import type { NextPage } from "next";
 import { StreamContractInfo } from "~~/components/StreamContractInfo";
 import { Address, EtherInput } from "~~/components/scaffold-eth";
 import { useScaffoldContractRead, useScaffoldContractWrite, useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+import { useCohortWithdrawEvents } from "~~/hooks/useCohortWithdrawEvents";
 import scaffoldConfig from "~~/scaffold.config";
 
 const Members: NextPage = () => {
@@ -26,27 +27,7 @@ const Members: NextPage = () => {
     args: [ethers.utils.parseEther(amount || "0"), reason],
   });
 
-  const { data: newContractWithdrawEvents, isLoading: isLoadingNewContractWithdrawEvents } = useScaffoldEventHistory({
-    contractName: "SandGardenStreams",
-    eventName: "Withdraw",
-    fromBlock: scaffoldConfig.contracts.SandGardenStreams.fromBlock,
-    blockData: true,
-  });
-
-  const { data: oldContractWithdrawEvents, isLoading: isLoadingOldContractWithdrawEvents } = useScaffoldEventHistory({
-    contractName: "_SandGardenStreamsOld",
-    eventName: "Withdraw",
-    fromBlock: scaffoldConfig.contracts._SandGardenStreamsOld.fromBlock,
-    blockData: true,
-  });
-
-  const sortedWithdrawEvents = useMemo(
-    () =>
-      [...(newContractWithdrawEvents || []), ...(oldContractWithdrawEvents || [])].sort(
-        (a: any, b: any) => b.block.number - a.block.number,
-      ),
-    [newContractWithdrawEvents, oldContractWithdrawEvents],
-  );
+  const { data: allWithdrawEvents, isLoading: isWithdrawEventsLoading } = useCohortWithdrawEvents();
 
   const { data: addBuilderEvents, isLoading: isLoadingBuilderEvents } = useScaffoldEventHistory({
     contractName: "SandGardenStreams",
@@ -63,9 +44,9 @@ const Members: NextPage = () => {
 
   useEffect(() => {
     if (selectedAddress) {
-      setFilteredEvents(sortedWithdrawEvents?.filter((event: any) => event.args.to === selectedAddress) || []);
+      setFilteredEvents(allWithdrawEvents?.filter((event: any) => event.builder === selectedAddress) || []);
     }
-  }, [selectedAddress, sortedWithdrawEvents]);
+  }, [selectedAddress, allWithdrawEvents]);
 
   const sortedBuilders = allBuildersData && [...allBuildersData].reverse();
 
@@ -162,24 +143,23 @@ const Members: NextPage = () => {
           </label>
           <div className="space-y-3">
             <ul>
-              {isLoadingNewContractWithdrawEvents || isLoadingOldContractWithdrawEvents ? (
+              {isWithdrawEventsLoading ? (
                 <div>
                   <div className="text-4xl animate-bounce mb-2">👾</div>
                   <div className="text-lg loading-dots">Loading...</div>
                 </div>
               ) : filteredEvents.length > 0 ? (
                 <div className="flex flex-col">
                   {filteredEvents.map(event => (
-                    <div key={event.log.transactionHash} className="flex flex-col">
+                    <div key={event.id} className="flex flex-col">
                       <div>
                         <span className="font-bold">Date: </span>
-                        {new Date(event.block.timestamp * 1000).toISOString().split("T")[0]}
+                        {new Date(event.timestamp * 1000).toISOString().split("T")[0]}
                       </div>
                       <div>
-                        <span className="font-bold">Amount: </span>Ξ{" "}
-                        {ethers.utils.formatEther(event.args.amount.toString())}
+                        <span className="font-bold">Amount: </span>Ξ {event.amount}
                       </div>
-                      <div>{event.args.reason}</div>
+                      <div>{event.reason}</div>
                       <hr className="my-8" />
                     </div>
                   ))}

diff --git a/packages/nextjs/pages/projects.tsx b/packages/nextjs/pages/projects.tsx
@@ -1,12 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { ethers } from "ethers";
 import { DateTime } from "luxon";
 import type { NextPage } from "next";
 import { Address } from "~~/components/scaffold-eth";
-import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
-import scaffoldConfig from "~~/scaffold.config";
+import { useCohortWithdrawEvents } from "~~/hooks/useCohortWithdrawEvents";
 
 const projects = [
   {
@@ -56,27 +54,7 @@ const projects = [
 const githubApiUri = "https://api.github.com/repos";
 
 const Projects: NextPage = () => {
-  const { data: newContractWithdrawEvents, isLoading: isLoadingNewContractWithdrawEvents } = useScaffoldEventHistory({
-    contractName: "SandGardenStreams",
-    eventName: "Withdraw",
-    fromBlock: scaffoldConfig.contracts.SandGardenStreams.fromBlock,
-    blockData: true,
-  });
-
-  const { data: oldContractWithdrawEvents, isLoading: isLoadingOldContractWithdrawEvents } = useScaffoldEventHistory({
-    contractName: "_SandGardenStreamsOld",
-    eventName: "Withdraw",
-    fromBlock: scaffoldConfig.contracts._SandGardenStreamsOld.fromBlock,
-    blockData: true,
-  });
-
-  const sortedWithdrawEvents = useMemo(
-    () =>
-      [...(newContractWithdrawEvents || []), ...(oldContractWithdrawEvents || [])].sort(
-        (a: any, b: any) => b.block.number - a.block.number,
-      ),
-    [newContractWithdrawEvents, oldContractWithdrawEvents],
-  );
+  const { data: allWithdrawEvents, isLoading: isWithdrawEventsLoading } = useCohortWithdrawEvents();
 
   type LastUpdateType = {
     [key: string]: string;
@@ -138,33 +116,33 @@ const Projects: NextPage = () => {
           })}
         </div>
         <h2 className="font-bold mb-2 text-xl text-secondary">Recent Contributions</h2>
-        {isLoadingNewContractWithdrawEvents || isLoadingOldContractWithdrawEvents ? (
+        {isWithdrawEventsLoading ? (
           <div className="m-10">
             <div className="text-5xl animate-bounce mb-2">👾</div>
             <div className="text-lg loading-dots">Loading...</div>
           </div>
         ) : (
           <>
-            {sortedWithdrawEvents?.length === 0 && (
+            {allWithdrawEvents?.length === 0 && (
               <div className="my-2">
                 <p>No contributions yet!</p>
               </div>
             )}
-            {sortedWithdrawEvents?.map((event: any) => {
+            {allWithdrawEvents?.map((event: any) => {
               return (
                 <div
                   className="flex flex-col gap-1 mb-6"
-                  key={`${event.log.address}_${event.log.blockNumber}`}
-                  data-test={`${event.log.address}_${event.log.blockNumber}`}
+                  key={`${event.builder}_${event.timestamp}`}
+                  data-test={`${event.builderAddress}_${event.timestamp}`}
                 >
                   <div>
-                    <Address address={event.args.to} />
+                    <Address address={event.builder} />
                   </div>
                   <div>
-                    <strong>{new Date(event.block.timestamp * 1000).toISOString().split("T")[0]}</strong>
+                    <strong>{new Date(event.timestamp * 1000).toISOString().split("T")[0]}</strong>
                   </div>
                   <div>
-                    Ξ {ethers.utils.formatEther(event.args.amount)} / {event.args.reason}
+                    Ξ {event.amount} / {event.reason}
                   </div>
                 </div>
               );

diff --git a/yarn.lock b/yarn.lock
@@ -5,6 +5,18 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@0no-co/graphql.web@npm:^1.0.1":
+  version: 1.0.4
+  resolution: "@0no-co/graphql.web@npm:1.0.4"
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+  peerDependenciesMeta:
+    graphql:
+      optional: true
+  checksum: d415fb2f063a024e2d382e8dc5e66929d0d9bf94f2c22e03cde201dc2fa03e15d21274dbe5c23a26ce016a4cac3db93ad99fb454de76fd94bc1600fd7062eebe
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/code-frame@npm:7.18.6"
@@ -1759,6 +1771,7 @@ __metadata:
     react-hot-toast: ^2.4.0
     tailwindcss: ^3.1.8
     typescript: ^4.9.5
+    urql: ^4.0.6
     use-debounce: ^8.0.4
     usehooks-ts: ^2.7.2
     vercel: ^28.15.1
@@ -2851,6 +2864,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@urql/core@npm:^4.2.0":
+  version: 4.2.2
+  resolution: "@urql/core@npm:4.2.2"
+  dependencies:
+    "@0no-co/graphql.web": ^1.0.1
+    wonka: ^6.3.2
+  checksum: 5ac5b1101f2db160968c945529d16d640b7761a4edbb320abe2bd31cab83cce424db6f833e368885882da75c5f9bf94f408ff0003662d6c845bbd6d6e660004d
+  languageName: node
+  linkType: hard
+
 "@vanilla-extract/css@npm:1.9.1":
   version: 1.9.1
   resolution: "@vanilla-extract/css@npm:1.9.1"
@@ -12789,6 +12812,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"urql@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "urql@npm:4.0.6"
+  dependencies:
+    "@urql/core": ^4.2.0
+    wonka: ^6.3.2
+  peerDependencies:
+    react: ">= 16.8.0"
+  checksum: 1af8471991be3ddd897e8268bc359e605f6a65bae8ff0b624764fb9fb2c555f678ad4f119220d84c279e3bb08418b4e7f0b256b73e766824cb55b07e3a8736a2
+  languageName: node
+  linkType: hard
+
 "use-callback-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-callback-ref@npm:1.3.0"
@@ -13102,6 +13137,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wonka@npm:^6.3.2":
+  version: 6.3.4
+  resolution: "wonka@npm:6.3.4"
+  checksum: 6bb57955cb2982fb469a7824484e6854b436f89a7f10b6a981348789d88fbc944665771adc4cc404f62416417eb47ab2b8657d898e5301ccd4a53eaac6a10508
+  languageName: node
+  linkType: hard
+
 "word-wrap@npm:^1.2.3, word-wrap@npm:~1.2.3":
   version: 1.2.3
   resolution: "word-wrap@npm:1.2.3"