mvp for streams page

packages/nextjs/app/builders/page.tsx

@@ -96,11 +96,10 @@ const BuilderTotals: NextPage = () => {
 
   return (
     <section className="flex justify-center">
-      <div className="flex flex-col justify-center items-center gap-10 my-10">
+      <div className="flex flex-col justify-center items-center gap-10 my-14">
         <div className="relative">
-          <div className="absolute left-0 text-5xl">🏗️</div>
-
-          <h1 className="text-5xl mb-0 font-paytone px-16">Builders</h1>
+          <div className="absolute left-0 text-5xl mt-1">🏗️</div>
+          <h1 className="text-6xl mb-0 font-paytone px-16">Builders</h1>
         </div>
         <div className="text-2xl">Sort by column name and select a builder to see their full details</div>
 

packages/nextjs/app/charts/page.tsx

@@ -12,11 +12,12 @@ import type { NextPage } from "next";
 const Charts: NextPage = () => {
   return (
     <section className="flex justify-center">
-      <div className="flex flex-col justify-center items-center gap-14 my-14">
-        <div>
-          <h1 className="text-5xl mb-0 font-paytone">CHARTS</h1>
+      <div className="flex flex-col justify-center items-center gap-10 my-14">
+        <div className="relative">
+          <div className="absolute left-0 text-5xl mt-2">📊</div>
+          <h1 className="text-6xl mb-0 font-paytone px-16">Charts</h1>
         </div>
-        <div className="text-2xl">📊 Visualizations for Buidl Guidl stream contract withdrawals</div>
+        <div className="text-2xl"> Visualizations for Buidl Guidl stream contract withdrawals</div>
       </div>
     </section>
   );

packages/nextjs/app/page.tsx

@@ -33,8 +33,9 @@ const Home: NextPage = () => {
   return (
     <section className="flex justify-center px-10">
       <div className="flex flex-col justify-center items-center gap-14 my-14">
-        <div>
-          <h1 className="text-6xl mb-0 font-paytone">STREAMOGATOR</h1>
+        <div className="relative">
+          <div className="mt-2 absolute left-0 text-5xl">🐊</div>
+          <h1 className="text-6xl mb-0 font-paytone px-16">StreamoGator</h1>
         </div>
         <div className="text-2xl">
           🕵️ Data analytics for all Buidl Guidl stream contracts deployed on Ethereum and Optimism

packages/nextjs/app/streams/page.tsx

@@ -4,7 +4,7 @@
 import { useState } from "react";
 import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
-// import { formatEther } from "viem";
+import { formatEther } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 import { SkeletonLoader, Table } from "~~/components/streamogator";
 import { timestampToDate } from "~~/utils/helpers";
@@ -14,6 +14,10 @@ type Stream = {
   name: string;
   chainId: string;
   startBlock: number;
+  buildersCount: number;
+  withdrawalsCount: number;
+  totalWithdrawals: bigint;
+  timestamp: string;
 };
 
 const STREAMS = gql`
@@ -23,15 +27,18 @@ const STREAMS = gql`
         id
         name
         chainId
-        startBlock
+        timestamp
+        buildersCount
+        withdrawalsCount
+        totalWithdrawals
       }
     }
   }
 `;
 
 const Streams: NextPage = () => {
-  const [orderDirection, setOrderDirection] = useState<"asc" | "desc">("desc");
-  const [orderBy, setOrderBy] = useState("startBlock");
+  const [orderDirection, setOrderDirection] = useState<"asc" | "desc">("asc");
+  const [orderBy, setOrderBy] = useState("timestamp");
 
   const { data, loading, error } = useQuery(STREAMS, {
     variables: { orderBy, orderDirection },
@@ -52,19 +59,19 @@ const Streams: NextPage = () => {
   const headers = [
     { label: "Address", key: "id", isSortable: true },
     { label: "Name", key: "name", isSortable: true },
-    { label: "Start", key: "startBlock", isSortable: true },
-    { label: "Network", key: "chainId", isSortable: true },
-    // { label: "Balance", key: "???", isSortable: true },
-    // { label: "Builders", key: "???", isSortable: true },
-    // { label: "Total Streamed", key: "???", isSortable: true },
+    { label: "Start", key: "timestamp", isSortable: true },
+    { label: "Builders", key: "buildersCount", isSortable: true },
+    { label: "Pulls", key: "withdrawalsCount", isSortable: true },
+    { label: "Total", key: "totalWithdrawals", isSortable: true },
+    { label: "Chain", key: "chainId", isSortable: true },
   ];
 
   return (
     <section className="flex justify-center">
       <div className="flex flex-col justify-center items-center gap-10 my-14">
         <div className="relative">
-          <div className="absolute left-0 text-5xl">🏞️</div>
-          <h1 className="text-5xl mb-0 font-paytone px-16">Streams</h1>
+          <div className="absolute left-0 text-5xl mt-2">🏞️</div>
+          <h1 className="text-6xl mb-0 font-paytone px-16">Streams</h1>
         </div>
         <div className="text-2xl">Sort by column name and select a stream to see more details</div>
 
@@ -82,10 +89,13 @@ const Streams: NextPage = () => {
               rows={data?.streams?.items.map((stream: Stream) => {
                 const address = <Address size="xl" address={stream.id} />;
                 const name = stream.name;
-                const startBlock = timestampToDate(stream.startBlock);
+                const start = timestampToDate(Number(stream.timestamp));
+                const buildersCount = stream.buildersCount;
+                const withdrawalsCount = stream.withdrawalsCount;
+                const totalWithdrawals = `Ξ ${Number(formatEther(stream.totalWithdrawals)).toFixed(2)}`;
                 const chainId = stream.chainId;
 
-                return [address, name, startBlock, chainId];
+                return [address, name, start, buildersCount, withdrawalsCount, totalWithdrawals, chainId];
               })}
             />
           )}

packages/nextjs/app/withdrawals/page.tsx

@@ -99,11 +99,10 @@ const Withdrawals: NextPage = () => {
 
   return (
     <section className="flex justify-center">
-      <div className="flex flex-col justify-center items-center gap-10 my-10">
+      <div className="flex flex-col justify-center items-center gap-10 my-14">
         <div className="relative">
-          <div className="absolute left-0 text-5xl">💰</div>
-
-          <h1 className="text-5xl mb-0 font-paytone px-16">Withdrawals</h1>
+          <div className="mt-2 absolute left-0 text-5xl">💰</div>
+          <h1 className="text-6xl mb-0 font-paytone px-16">Withdrawals</h1>
         </div>
         <div className="text-2xl">Sort by column name and select a withdrawal to see the full details</div>
 

packages/nextjs/components/Header.tsx

@@ -105,7 +105,7 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="font-paytone text-2xl">🐊 STREAMOGATOR</div>
+          <div className="font-paytone text-2xl">🐊 StreamoGator</div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
           <HeaderMenuLinks />

packages/nextjs/package.json

@@ -22,6 +22,7 @@
     "@uniswap/v2-sdk": "~3.0.1",
     "blo": "~1.0.1",
     "burner-connector": "^0.0.3",
+    "chart.js": "^4.4.2",
     "daisyui": "4.5.0",
     "graphql": "^16.8.1",
     "next": "~14.0.4",

packages/ponder/ponder.schema.ts

@@ -5,7 +5,11 @@ export default createSchema((p) => ({
     id: p.hex(), // stream contract address
     name: p.string(),
     startBlock: p.int(),
+    timestamp: p.bigint(),
     chainId: p.int(),
+    buildersCount: p.int(), // updated every AddBuilder event
+    withdrawalsCount: p.int(), // updated every Withdrawal event
+    totalWithdrawals: p.bigint(), // updated every Withdrawal event
   }),
   Builder: p.createTable({
     id: p.hex(), // the EOA address

packages/ponder/src/StreamContract.ts

@@ -1,6 +1,19 @@
 import { ponder } from "@/generated";
 import { type Stream, optimismStreams, mainnetStreams } from "../ponder.config";
 
+import { createPublicClient, http } from "viem";
+import { mainnet, optimism } from "viem/chains";
+
+const mainnetClient = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+});
+
+const optimismClient = createPublicClient({
+  chain: optimism,
+  transport: http(),
+});
+
 /**
  * Setup runs before all the event indexing to create table of stream contract information
  */
@@ -14,13 +27,28 @@ ponder.on("StreamContract:setup", async ({ context }) => {
       const alreadyExists = await Stream.findUnique({
         id: stream.address,
       });
+
+      let block;
       if (!alreadyExists) {
+        if (chainId === 1) {
+          block = await mainnetClient.getBlock({
+            blockNumber: BigInt(stream.startBlock),
+          });
+        } else {
+          block = await optimismClient.getBlock({
+            blockNumber: BigInt(stream.startBlock),
+          });
+        }
         await Stream.create({
           id: stream.address,
           data: {
             name: stream.name,
             startBlock: stream.startBlock,
+            timestamp: block.timestamp,
             chainId: chainId,
+            buildersCount: 0,
+            withdrawalsCount: 0,
+            totalWithdrawals: 0n,
           },
         });
       }
@@ -46,7 +74,7 @@ ponder.on("StreamContract:AddBuilder", async ({ event, context }) => {
   });
 
   if (builder) {
-    // Update to record with another stream contract and stream cap
+    // Update builder record with another stream contract and add to stream cap
     await Builder.update({
       id: event.args.to,
       data: {
@@ -58,7 +86,7 @@ ponder.on("StreamContract:AddBuilder", async ({ event, context }) => {
       },
     });
   } else {
-    // Otherwise, create a new Builder record
+    // Create a new Builder record
     await Builder.create({
       id: event.args.to,
       data: {
@@ -69,6 +97,19 @@ ponder.on("StreamContract:AddBuilder", async ({ event, context }) => {
         withdrawalsCount: 0,
       },
     });
+    // And update the buildersCount for the Stream record
+    const { Stream } = context.db;
+    const stream = await Stream.findUnique({
+      id: event.transaction.to as `0x${string}`,
+    });
+    if (stream) {
+      await Stream.update({
+        id: event.transaction.to as `0x${string}`,
+        data: {
+          buildersCount: stream.buildersCount + 1,
+        },
+      });
+    }
   }
 });
 
@@ -93,33 +134,50 @@ ponder.on("StreamContract:UpdateBuilder", async ({ event, context }) => {
  */
 ponder.on("StreamContract:Withdraw", async ({ event, context }) => {
   // console.log("Withdrawal Event...");
-  const { Withdrawal } = context.db;
+  const streamContract = event.transaction.to as `0x${string}`;
+  const amount = event.args.amount;
 
+  // 1. Create a new Withdrawal record
+  const { Withdrawal } = context.db;
   await Withdrawal.create({
     id: event.transaction.hash,
     data: {
       date: event.block.timestamp,
       to: event.args.to,
-      amount: event.args.amount,
+      amount,
       reason: event.args.reason,
-      streamContract: event.transaction.to as `0x${string}`,
+      streamContract,
       network: context.network.chainId,
     },
   });
 
+  // 2. Update the builder record's totalWithdrawals and withdrawalsCount
   const { Builder } = context.db;
-
   const builder = await Builder.findUnique({
     id: event.args.to,
   });
-
   if (builder) {
     await Builder.update({
       id: event.args.to,
       data: {
-        totalWithdrawals: builder.totalWithdrawals + event.args.amount,
+        totalWithdrawals: builder.totalWithdrawals + amount,
         withdrawalsCount: builder.withdrawalsCount + 1,
       },
     });
   }
+
+  // 3. Update the Stream record's totalWithdrawals and withdrawalsCount
+  const { Stream } = context.db;
+  const stream = await Stream.findUnique({
+    id: streamContract,
+  });
+  if (stream) {
+    await Stream.update({
+      id: streamContract,
+      data: {
+        totalWithdrawals: stream.totalWithdrawals + amount,
+        withdrawalsCount: stream.withdrawalsCount + 1,
+      },
+    });
+  }
 });

yarn.lock

@@ -1484,6 +1484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kurkle/color@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "@kurkle/color@npm:0.3.2"
+  checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49
+  languageName: node
+  linkType: hard
+
 "@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
   version: 1.2.0
   resolution: "@lit-labs/ssr-dom-shim@npm:1.2.0"
@@ -2491,6 +2498,7 @@ __metadata:
     autoprefixer: ~10.4.12
     blo: ~1.0.1
     burner-connector: ^0.0.3
+    chart.js: ^4.4.2
     daisyui: 4.5.0
     eslint: ~8.24.0
     eslint-config-next: ~14.0.4
@@ -5060,6 +5068,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chart.js@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "chart.js@npm:4.4.2"
+  dependencies:
+    "@kurkle/color": ^0.3.0
+  checksum: 72506af9abd33dd99484322dd26e854693323959fe2d6e750bf670e3959737bc195807e91a4d939bc04124c05c7a2f3c435e52d1a668e0e945869f37fcba90a8
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:3.3.1":
   version: 3.3.1
   resolution: "chokidar@npm:3.3.1"