diff --git a/packages/nextjs/app/builders/[address]/page.tsx b/packages/nextjs/app/builders/[address]/page.tsx index e1e9e26..bae1a0c 100644 --- a/packages/nextjs/app/builders/[address]/page.tsx +++ b/packages/nextjs/app/builders/[address]/page.tsx @@ -49,44 +49,40 @@ const BuilderDetails: NextPage = ({ params }) => { const { withdrawalsCount, totalWithdrawals, streamCap, streamContracts, date } = data.builder; return ( -
-
-
-
- - 0 - ? customFormatEther(BigInt(totalWithdrawals) / BigInt(withdrawalsCount)) - : "0.00", - }, - { - label: "Total", - value: customFormatEther(totalWithdrawals), - }, - ]} - /> +
+
+
+
-
- {streamContracts.map((contract: string) => streamDirectory[contract.toLowerCase()]?.name).join(", ")} since{" "} - {timestampToFormattedDate(date)} -
+ 0 ? customFormatEther(BigInt(totalWithdrawals) / BigInt(withdrawalsCount)) : "0.00", + }, + { + label: "Total", + value: customFormatEther(totalWithdrawals), + }, + ]} + /> - -
+
+ {streamContracts.map((contract: string) => streamDirectory[contract.toLowerCase()]?.name).join(", ")} since{" "} + {timestampToFormattedDate(date)}
+ +
); }; const Withdrawals = ({ withdrawals }: { withdrawals: Withdrawal[] }) => { return ( -
+
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index 1fdf634..211307c 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -6,7 +6,7 @@ import { gql, useQuery } from "@apollo/client"; import type { NextPage } from "next"; import { formatEther } from "viem"; import { Address } from "~~/components/scaffold-eth"; -import { SkeletonLoader, Table, TableControls } from "~~/components/streamogator"; +import { PageTitle, PaginationControls, SkeletonLoader, Table } from "~~/components/streamogator"; import { type Builder } from "~~/types/streamogator"; import { streamDirectory, timestampToIsoDate } from "~~/utils/helpers"; @@ -31,7 +31,7 @@ const BUILDERS = gql` } `; -const BuilderTotals: NextPage = () => { +const Builders: NextPage = () => { const [afterCursor, setAfterCursor] = useState(null); const [cursorHistory, setCursorHistory] = useState([]); const [orderDirection, setOrderDirection] = useState<"asc" | "desc">("desc"); @@ -87,67 +87,64 @@ const BuilderTotals: NextPage = () => { ]; return ( -
-
-
-
๐Ÿ—๏ธ
-

Builders

-
-
Sort by column name and select a builder to see their full details
- -
- {loading ? ( -
- -
- ) : ( -
{ - const builderAddress =
; - const startDate = timestampToIsoDate(builder.date); - const averageWithdrawalAmount = - builder.withdrawalsCount > 0 - ? `ฮž ${Number( - formatEther(BigInt(builder.totalWithdrawals) / BigInt(builder.withdrawalsCount)), - ).toFixed(2)}` - : "ฮž 0.00"; - const streamCap = `ฮž ${Number(formatEther(builder.streamCap)).toFixed(2)}`; - const totalWithdrawals = `ฮž ${Number(formatEther(builder.totalWithdrawals)).toFixed(2)}`; - const streamContracts = builder.streamContracts - .map(contract => streamDirectory[contract.toLowerCase()]?.name) - .join(", "); - return [ - builder.id, - builderAddress, - startDate, - builder.withdrawalsCount, - averageWithdrawalAmount, - totalWithdrawals, - streamCap, - streamContracts || "N/A", - , - ]; - })} - /> - )} - - + +
+ {loading ? ( +
+ +
+ ) : ( +
{ + const builderAddress =
; + const startDate = timestampToIsoDate(builder.date); + const averageWithdrawalAmount = + builder.withdrawalsCount > 0 + ? `ฮž ${Number( + formatEther(BigInt(builder.totalWithdrawals) / BigInt(builder.withdrawalsCount)), + ).toFixed(2)}` + : "ฮž 0.00"; + const streamCap = `ฮž ${Number(formatEther(builder.streamCap)).toFixed(2)}`; + const totalWithdrawals = `ฮž ${Number(formatEther(builder.totalWithdrawals)).toFixed(2)}`; + const streamContracts = builder.streamContracts + .map(contract => streamDirectory[contract.toLowerCase()]?.name) + .join(", "); + return [ + builder.id, + builderAddress, + startDate, + builder.withdrawalsCount, + averageWithdrawalAmount, + totalWithdrawals, + streamCap, + streamContracts || "N/A", + , + ]; + })} /> - + )} + + ); }; -export default BuilderTotals; +export default Builders; diff --git a/packages/nextjs/app/charts/page.tsx b/packages/nextjs/app/charts/page.tsx index ec3b51e..6fc7c9d 100644 --- a/packages/nextjs/app/charts/page.tsx +++ b/packages/nextjs/app/charts/page.tsx @@ -69,7 +69,7 @@ const ChartDisplay = ({ data }: { data: any }) => { const labels = data.streams.items.map((stream: any) => stream.name); return ( -
+
{ return ( -
+
-
-
๐ŸŠ
-

StreamoGator

-
-
- ๐Ÿ•ต๏ธ Data analytics for all Buidl Guidl stream contracts deployed on Ethereum and Optimism -
+
{PAGES.map(item => ( @@ -49,7 +47,7 @@ const Home: NextPage = () => { href={item.href} passHref > -

{item.title}

+

{item.title}

{item.emoji}

{item.description}

diff --git a/packages/nextjs/app/streams/[address]/page.tsx b/packages/nextjs/app/streams/[address]/page.tsx index fe95b19..80e54f8 100644 --- a/packages/nextjs/app/streams/[address]/page.tsx +++ b/packages/nextjs/app/streams/[address]/page.tsx @@ -65,35 +65,27 @@ const StreamDetails: NextPage = ({ params }) => { if (error) return
Error : {error.message}
; return ( -
-
-
-
-
{data.stream.name}
-
+
+
{data.stream.name}
+ - - -
-
deployed on{" "} - {timestampToFormattedDate(data.stream.timestamp)} -
- -
+
+
deployed on {timestampToFormattedDate(data.stream.timestamp)}
+
); }; const Withdrawals = ({ withdrawals }: { withdrawals: Withdrawal[] }) => { return ( -
+
diff --git a/packages/nextjs/app/streams/page.tsx b/packages/nextjs/app/streams/page.tsx index 4bd6b3f..4bfd7ca 100644 --- a/packages/nextjs/app/streams/page.tsx +++ b/packages/nextjs/app/streams/page.tsx @@ -6,7 +6,7 @@ import { gql, useQuery } from "@apollo/client"; import type { NextPage } from "next"; import { formatEther } from "viem"; import { Address } from "~~/components/scaffold-eth"; -import { SkeletonLoader, Table } from "~~/components/streamogator"; +import { PageTitle, SkeletonLoader, Table } from "~~/components/streamogator"; import { type Stream } from "~~/types/streamogator"; import { timestampToIsoDate } from "~~/utils/helpers"; @@ -57,40 +57,33 @@ const Streams: NextPage = () => { ]; return ( -
-
-
-
๐Ÿž๏ธ
-

Streams

-
-
Sort by column name and select a stream to see more details
+
+ +
+ {loading ? ( +
+ +
+ ) : ( +
{ + const address =
; + const name = stream.name; + const start = timestampToIsoDate(Number(stream.timestamp)); + const buildersCount = stream.buildersCount; + const withdrawalsCount = stream.withdrawalsCount; + const totalWithdrawals = `ฮž ${Number(formatEther(stream.totalWithdrawals)).toFixed(2)}`; + const chainId = stream.chainId; -
- {loading ? ( -
- -
- ) : ( -
{ - const address =
; - const name = stream.name; - const start = timestampToIsoDate(Number(stream.timestamp)); - const buildersCount = stream.buildersCount; - const withdrawalsCount = stream.withdrawalsCount; - const totalWithdrawals = `ฮž ${Number(formatEther(stream.totalWithdrawals)).toFixed(2)}`; - const chainId = stream.chainId; - - return [stream.id, name, address, start, buildersCount, withdrawalsCount, totalWithdrawals, chainId]; - })} - /> - )} - + return [stream.id, name, address, start, buildersCount, withdrawalsCount, totalWithdrawals, chainId]; + })} + /> + )} ); diff --git a/packages/nextjs/app/withdrawals/[hash]/page.tsx b/packages/nextjs/app/withdrawals/[hash]/page.tsx index d4fe215..9f62734 100644 --- a/packages/nextjs/app/withdrawals/[hash]/page.tsx +++ b/packages/nextjs/app/withdrawals/[hash]/page.tsx @@ -4,6 +4,7 @@ import { gql, useQuery } from "@apollo/client"; import type { NextPage } from "next"; import { Address } from "~~/components/scaffold-eth"; import { SkeletonLoader } from "~~/components/streamogator"; +import { PageTitle } from "~~/components/streamogator"; import { abbreviateHex, customFormatEther, timestampToIsoDate } from "~~/utils/helpers"; const WITHDRAWAL = gql` @@ -41,38 +42,32 @@ const WithdrawalDetails: NextPage = ({ params }) => { ); return ( -
-
-
-
-
๐Ÿงพ
-

Withdrawal

-
+
+ -
-
- - {[ - { label: "Date", value: loading ? skeleton : timestampToIsoDate(data?.withdrawal?.date) }, - { - label: "From", - value: loading ? skeleton :
, - }, - { label: "To", value: loading ? skeleton :
}, - { label: "Amount", value: loading ? skeleton : `${customFormatEther(data?.withdrawal?.amount)} ETH` }, - { label: "ChainId", value: loading ? skeleton : data?.withdrawal?.chainId }, - { label: "Tx Hash", value: loading ? skeleton : abbreviateHex(data?.withdrawal?.id) }, - { label: "Reason", value: loading ? skeleton : data?.withdrawal?.reason }, - ].map((item, index) => ( -
- - - - ))} - -
{item.label}:{item.value}
-
-
+
+ + + {[ + { label: "Amount", value: loading ? skeleton : `${customFormatEther(data?.withdrawal?.amount)} ETH` }, + + { + label: "From", + value: loading ? skeleton :
, + }, + { label: "To", value: loading ? skeleton :
}, + { label: "Date", value: loading ? skeleton : timestampToIsoDate(data?.withdrawal?.date) }, + { label: "ChainId", value: loading ? skeleton : data?.withdrawal?.chainId }, + { label: "Tx Hash", value: loading ? skeleton : abbreviateHex(data?.withdrawal?.id) }, + { label: "Reason", value: loading ? skeleton : data?.withdrawal?.reason }, + ].map((item, index) => ( +
+ + + + ))} + +
{item.label}:{item.value}
); diff --git a/packages/nextjs/app/withdrawals/page.tsx b/packages/nextjs/app/withdrawals/page.tsx index 7d54eaf..e00f4bf 100644 --- a/packages/nextjs/app/withdrawals/page.tsx +++ b/packages/nextjs/app/withdrawals/page.tsx @@ -5,7 +5,7 @@ import { useState } from "react"; import { gql, useQuery } from "@apollo/client"; import type { NextPage } from "next"; import { Address } from "~~/components/scaffold-eth"; -import { SkeletonLoader, Table, TableControls } from "~~/components/streamogator"; +import { PageTitle, PaginationControls, SkeletonLoader, Table } from "~~/components/streamogator"; import { type Withdrawal } from "~~/types/streamogator"; import { customFormatEther, streamDirectory, timestampToIsoDate } from "~~/utils/helpers"; @@ -81,58 +81,56 @@ const Withdrawals: NextPage = () => { }; const headers = [ - { label: "Builder", key: "to", isSortable: true }, - { label: "Date", key: "date", isSortable: true }, - { label: "Amount", key: "amount", isSortable: true }, - { label: "Stream", key: "streamContract", isSortable: true }, - { label: "Chain", key: "network", isSortable: true }, + { label: "Builder", key: "to", isSortable: true, showMobile: true }, + { label: "Date", key: "date", isSortable: true, showMobile: true }, + { label: "Amount", key: "amount", isSortable: true, showMobile: true }, + { label: "Stream", key: "streamContract", isSortable: true, showMobile: false }, + { label: "Chain", key: "network", isSortable: true, showMobile: false }, ]; return ( -
-
-
-
๐Ÿ’ฐ
-

Withdrawals

-
-
Sort by column name and select a withdrawal to see the full details
- -
- {loading ? ( -
- -
- ) : ( - { - const builder =
; - const date = timestampToIsoDate(withdrawal.date); - const amount = customFormatEther(withdrawal.amount); - const id = withdrawal.id; - const stream = streamDirectory[withdrawal.streamContract]?.name || "N/A"; - const chain = withdrawal.chainId; - - // id is not displayed (only used for details page link) - // must match the order from headers - return [id, builder, date, amount, stream, chain]; - })} - /> - )} - - + + +
+ {loading ? ( +
+ +
+ ) : ( +
{ + const builder =
; + const date = timestampToIsoDate(withdrawal.date); + const amount = customFormatEther(withdrawal.amount); + const id = withdrawal.id; + const stream = streamDirectory[withdrawal.streamContract]?.name || "N/A"; + const chain = withdrawal.chainId; + + // id is not displayed (only used for details page link) + // must match the order from headers + return [id, builder, date, amount, stream, chain]; + })} /> - + )} + + ); diff --git a/packages/nextjs/components/streamogator/PageTitle.tsx b/packages/nextjs/components/streamogator/PageTitle.tsx new file mode 100644 index 0000000..fe11aa9 --- /dev/null +++ b/packages/nextjs/components/streamogator/PageTitle.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +interface PageTitleProps { + title: string; // The title text + emoji?: string; // Emoji to display next to the title + description: string; // The description text +} + +export const PageTitle: React.FC = ({ title, emoji, description }) => { + return ( +
+
+
{emoji}
+

{title}

+
+
{description}
+
+ ); +}; diff --git a/packages/nextjs/components/streamogator/TableControls.tsx b/packages/nextjs/components/streamogator/PaginationControls.tsx similarity index 86% rename from packages/nextjs/components/streamogator/TableControls.tsx rename to packages/nextjs/components/streamogator/PaginationControls.tsx index c6a663e..16d9275 100644 --- a/packages/nextjs/components/streamogator/TableControls.tsx +++ b/packages/nextjs/components/streamogator/PaginationControls.tsx @@ -1,6 +1,6 @@ import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outline"; -interface TableControlsProps { +interface PaginationControlsProps { limit: number; setLimit: (limit: number) => void; loadPreviousItems: () => void; @@ -9,7 +9,7 @@ interface TableControlsProps { hasNextPage: boolean; } -export const TableControls: React.FC = ({ +export const PaginationControls: React.FC = ({ limit, setLimit, loadPreviousItems, @@ -18,7 +18,7 @@ export const TableControls: React.FC = ({ hasNextPage, }) => { return ( -
+
Show{" "}
diff --git a/packages/nextjs/components/streamogator/Table.tsx b/packages/nextjs/components/streamogator/Table.tsx index 6b46e08..2264afc 100644 --- a/packages/nextjs/components/streamogator/Table.tsx +++ b/packages/nextjs/components/streamogator/Table.tsx @@ -23,10 +23,10 @@ interface TableProps { export const Table = ({ headers, rows, orderDirection, setOrderDirection, orderBy, hrefPrefix }: TableProps) => { const router = useRouter(); return ( -
+
- + @@ -61,7 +61,7 @@ export const Table = ({ headers, rows, orderDirection, setOrderDirection, orderB onClick={() => router.push(`${hrefPrefix}/${row[0]}`)} > diff --git a/packages/nextjs/components/streamogator/index.tsx b/packages/nextjs/components/streamogator/index.tsx index 27260b5..27f3dd3 100644 --- a/packages/nextjs/components/streamogator/index.tsx +++ b/packages/nextjs/components/streamogator/index.tsx @@ -1,4 +1,5 @@ export * from "./SkeletonLoader"; export * from "./Table"; -export * from "./TableControls"; +export * from "./PaginationControls"; export * from "./StatsShowcase"; +export * from "./PageTitle";
-
+