-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
details pages for withdrawals and builders
- Loading branch information
1 parent
6e5fbd3
commit 6f7fc67
Showing
10 changed files
with
315 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| "use client"; | ||
|
|
||
| import { gql, useQuery } from "@apollo/client"; | ||
| import type { NextPage } from "next"; | ||
| import { Address } from "~~/components/scaffold-eth"; | ||
| import { type Builder, type Withdrawal } from "~~/types/streamogator"; | ||
| import { customFormatEther, streamDirectory, timestampToDate } from "~~/utils/helpers"; | ||
|
|
||
| const BUILDER = gql` | ||
| query SingleBuilder($id: String!) { | ||
| builder(id: $id) { | ||
| date | ||
| id | ||
| streamCap | ||
| streamContracts | ||
| totalWithdrawals | ||
| withdrawalsCount | ||
| } | ||
| withdrawals(where: { to: $id }) { | ||
| items { | ||
| amount | ||
| chainId | ||
| date | ||
| reason | ||
| id | ||
| streamContract | ||
| to | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| interface PageProps { | ||
| params: { | ||
| address: string; | ||
| }; | ||
| } | ||
|
|
||
| const BuilderDetails: NextPage<PageProps> = ({ params }) => { | ||
| const { data, loading, error } = useQuery(BUILDER, { | ||
| variables: { id: params.address }, | ||
| fetchPolicy: "network-only", // Ensures fresh server-side fetch | ||
| }); | ||
|
|
||
| if (loading) return <div className="text-center my-10">Loading...</div>; | ||
| if (error) return <div className="text-red-500 text-center my-10">Error : {error.message}</div>; | ||
|
|
||
| return ( | ||
| <section className="overflow-x-auto "> | ||
| <div className="flex justify-center "> | ||
| <div className="flex flex-col justify-center items-center gap-10 my-14 max-w-[1000px]"> | ||
| <Address size="3xl" address={params.address} /> | ||
| <Showcase builder={data?.builder} /> | ||
| <Withdrawals withdrawals={data?.withdrawals?.items} /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| const Withdrawals = ({ withdrawals }: { withdrawals: Withdrawal[] }) => { | ||
| return ( | ||
| <div> | ||
| <div className="overflow-x-auto w-full border border-neutral-600 rounded-xl"> | ||
| <table className="table text-xl"> | ||
| <thead> | ||
| <tr className="text-xl"> | ||
| <th>Date</th> | ||
| <th>Amount</th> | ||
| <th>Stream</th> | ||
| <th>Reason</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {withdrawals.map(withdrawal => ( | ||
| <tr key={withdrawal.id}> | ||
| <td className="text-nowrap">{timestampToDate(withdrawal.date)}</td> | ||
| <td className="text-nowrap">{customFormatEther(withdrawal.amount)}</td> | ||
| <td>{streamDirectory[withdrawal.streamContract.toLowerCase()]?.name}</td> | ||
| <td>{withdrawal.reason}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const Showcase = ({ builder }: { builder: Builder }) => { | ||
| if (!builder) return null; | ||
|
|
||
| const { withdrawalsCount, totalWithdrawals, streamCap, streamContracts, date } = builder; | ||
|
|
||
| const average = | ||
| withdrawalsCount > 0 ? customFormatEther(BigInt(totalWithdrawals) / BigInt(withdrawalsCount)) : "0.00"; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="stats stats-vertical sm:stats-horizontal shadow "> | ||
| <div className="stat place-items-center"> | ||
| <div className="stat-title">Withdrawals</div> | ||
| <div className="stat-value">{withdrawalsCount}</div> | ||
| </div> | ||
|
|
||
| <div className="stat place-items-center"> | ||
| <div className="stat-title">Average Amt</div> | ||
| <div className="stat-value">{average}</div> | ||
| </div> | ||
|
|
||
| <div className="stat place-items-center"> | ||
| <div className="stat-title">Total Amt</div> | ||
| <div className="stat-value">{customFormatEther(totalWithdrawals)}</div> | ||
| </div> | ||
| <div className="stat place-items-center"> | ||
| <div className="stat-title">Monthly Cap</div> | ||
| <div className="stat-value">{customFormatEther(streamCap)}</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="overflow-x-auto w-full border border-neutral-600 rounded-xl"> | ||
| <table className="table text-xl"> | ||
| <tbody> | ||
| {[ | ||
| { label: "Started", value: timestampToDate(date) }, | ||
| { | ||
| label: "Streams", | ||
| value: streamContracts.map(contract => streamDirectory[contract.toLowerCase()]?.name).join(", "), | ||
| }, | ||
| ].map((item, index) => ( | ||
| <tr key={index} className=""> | ||
| <th>{item.label}:</th> | ||
| <td>{item.value}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BuilderDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| "use client"; | ||
|
|
||
| import { gql, useQuery } from "@apollo/client"; | ||
| import type { NextPage } from "next"; | ||
| import { Address } from "~~/components/scaffold-eth"; | ||
| import { SkeletonLoader } from "~~/components/streamogator"; | ||
| import { abbreviateHex, customFormatEther, timestampToDate } from "~~/utils/helpers"; | ||
|
|
||
| const WITHDRAWAL = gql` | ||
| query SingleWithdrawal($id: String!) { | ||
| withdrawal(id: $id) { | ||
| id | ||
| date | ||
| to | ||
| amount | ||
| chainId | ||
| streamContract | ||
| reason | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| interface PageProps { | ||
| params: { | ||
| hash: string; | ||
| }; | ||
| } | ||
|
|
||
| const WithdrawalDetails: NextPage<PageProps> = ({ params }) => { | ||
| const { data, loading, error } = useQuery(WITHDRAWAL, { | ||
| variables: { id: params.hash }, | ||
| fetchPolicy: "network-only", // Ensures fresh server-side fetch | ||
| }); | ||
|
|
||
| if (error) return <div className="text-red-500 text-center my-10">Error : {error.message}</div>; | ||
|
|
||
| const skeleton = ( | ||
| <div className="w-96 h-10"> | ||
| <SkeletonLoader /> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <section className="overflow-x-auto "> | ||
| <div className="flex justify-center "> | ||
| <div className="flex flex-col justify-center items-center gap-10 my-14 max-w-[1000px]"> | ||
| <div className="relative"> | ||
| <div className="mt-1 absolute left-0 text-4xl">🧾</div> | ||
| <h1 className="text-5xl mb-0 font-paytone px-12">Withdrawal</h1> | ||
| </div> | ||
|
|
||
| <div className="overflow-x-auto w-full border border-neutral-600 rounded-xl"> | ||
| <table className="table text-xl"> | ||
| <tbody> | ||
| {[ | ||
| { label: "Date", value: loading ? skeleton : timestampToDate(data?.withdrawal?.date) }, | ||
| { | ||
| label: "From", | ||
| value: loading ? skeleton : <Address size="xl" address={data?.withdrawal?.streamContract} />, | ||
| }, | ||
| { label: "To", value: loading ? skeleton : <Address size="xl" address={data?.withdrawal?.to} /> }, | ||
| { 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) => ( | ||
| <tr key={index}> | ||
| <th>{item.label}:</th> | ||
| <td>{item.value}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default WithdrawalDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.