diff --git a/src/app/deploy/page.tsx b/src/app/deploy/page.tsx new file mode 100644 index 0000000..659e33f --- /dev/null +++ b/src/app/deploy/page.tsx @@ -0,0 +1,466 @@ +import type { CSSProperties, ReactNode } from "react"; + +const flowSteps = [ + "A repository owner installs the GitHub App.", + "A maintainer labels an issue with a Pvium bounty label, for example pvium:20USDC or pvium:10.", + "When a pull request is merged into a configured reward target branch and closes that issue, the app checks the PR author.", + "If the PR author is already linked to a Pvium account, the app creates a Pvium payment link and comments a Pay reward link on the PR.", + "If the PR author is not linked, the app generates a signed Pvium OAuth invite for type: github and comments the invite link on the PR.", + "Once the user accepts the invite and connects the matching GitHub account in Pvium, the Pvium webhook creates the payment link and comments the Pay reward link on the PR.", + "When Pvium sends a paid or funded webhook, the app marks the reward and bounty as PAID.", +]; + +const localSetupCommands = [ + "cd /Users/Projects/Javascript/paytrack/sdks/node", + "npm install", + "npm run build", + "", + "cd /Users/Projects/Javascript/paytrack/github-app", + "npm install", + "cp .env.example .env", + "npm run prisma:generate", + "npm run prisma:migrate", + "npm run dev", +]; + +const envExample = `DATABASE_URL="postgresql://postgres:postgres@localhost:5432/pvium_github_app" + +GITHUB_APP_ID="" +GITHUB_APP_PRIVATE_KEY="" +GITHUB_WEBHOOK_SECRET="" +GITHUB_REWARD_TARGET_BRANCHES="main,master" +PVIUM_BOUNTY_LABEL_PREFIX="pvium:" + +PVIUM_ENVIRONMENT="sandbox" +PVIUM_API_BASE_URL="" +PVIUM_CONSENT_HOST="" +PVIUM_SDK_LOG_REQUESTS="false" +PVIUM_API_KEY="" +PVIUM_CLIENT_ID="" +PVIUM_WEBHOOK_SECRET="" +PVIUM_INVITE_SIGNER_PRIVATE_KEY="" +PVIUM_OAUTH_REDIRECT_URI="http://localhost:3000/api/pvium/oauth/callback" +PVIUM_REWARD_PAYMENT_MODEL="instant-batch" +PVIUM_REWARD_PAYMENT_SIGNER_PRIVATE_KEY="" +PVIUM_REWARD_PAYMENT_CHAIN="base" +PVIUM_REWARD_PAYMENT_CHAIN_ID="8453" +PVIUM_REWARD_PAYMENT_CURRENCY="USDC" +PVIUM_REWARD_PAYMENT_TOKEN_ADDRESS="" +PVIUM_REWARD_PAYMENT_TOKEN_DECIMALS="6" +PVIUM_REWARD_PLATFORM_FEE_WALLET="" +PVIUM_REWARD_PLATFORM_FEE_BASIS_POINTS="0" +PVIUM_REWARD_MAX_FEE_AMOUNT="0" +PVIUM_INVOICE_REDIRECT_URI="http://localhost:3000/api/pvium/oauth/callback" + +APP_BASE_URL="http://localhost:3000"`; + +const githubPermissions = [ + "Issues: read and write", + "Pull requests: read and write", + "Metadata: read-only", +]; + +const githubEvents = ["issues", "pull_request"]; + +const configItems = [ + "GITHUB_REWARD_TARGET_BRANCHES is a comma-separated list of base branches that can trigger reward processing when a PR is merged.", + "PVIUM_BOUNTY_LABEL_PREFIX controls the GitHub issue label prefix used to detect bounties. It defaults to pvium: when unset or empty.", + "PVIUM_ENVIRONMENT resolves Pvium hosts: test uses localhost, sandbox uses api-sandbox.pvium.com, and production uses api.pvium.com.", + "PVIUM_API_BASE_URL and PVIUM_CONSENT_HOST override the resolved Pvium hosts when needed.", + "PVIUM_SDK_LOG_REQUESTS=true logs SDK request method, host, path, status, duration, and network errors without logging full URLs or secrets.", + "PVIUM_REWARD_PAYMENT_MODEL controls the payment artifact. Use instant-batch for finalized instant batch payment links or invoice for the legacy invoice flow.", + "PVIUM_REWARD_PAYMENT_CHAIN is the chain used by both invoice payment channels and instant batch links.", + "PVIUM_REWARD_PAYMENT_CURRENCY is the invoice payment currency.", + "PVIUM_REWARD_PAYMENT_SIGNER_PRIVATE_KEY signs instant batches. If omitted, the invite signer is used.", + "PVIUM_REWARD_PAYMENT_CHAIN_ID is the chain id used to finalize instant batches.", + "PVIUM_REWARD_PAYMENT_TOKEN_ADDRESS and PVIUM_REWARD_PAYMENT_TOKEN_DECIMALS define the instant batch payout token.", + "PVIUM_REWARD_PLATFORM_FEE_WALLET receives the platform fee. If omitted, no platform fee payee is added.", + "PVIUM_REWARD_PLATFORM_FEE_BASIS_POINTS sets the fee. For example, 100 is 1% and 250 is 2.5%.", + "PVIUM_REWARD_MAX_FEE_AMOUNT caps the computed platform fee. Use 0 for no cap.", +]; + +const pviumEvents = [ + "oauth.invite.accepted", + "invoice.paid", + "invoice.payment_completed", + "invoice.payment.succeeded", + "payment.attached", + "batch.funded", + "batch.payment_completed", + "batch.payment.succeeded", +]; + +const usageSteps = [ + "Install the GitHub App on a repository.", + "Add a bounty label to an issue, such as pvium:20USDC or pvium:20. If PVIUM_BOUNTY_LABEL_PREFIX is changed, use that prefix instead.", + "Merge a PR into a configured reward target branch with a closing reference like Closes #123.", + "The app comments on the merged PR.", + "If the contributor needs to link Pvium, they use the invite link in the comment.", + "Pvium redirects back to /api/pvium/oauth/callback with an OAuth code.", + "The app exchanges the code through the local Pvium SDK, verifies the accepted GitHub handle, saves the OAuth token set, creates the payment link, and comments a Pay reward link.", + "The maintainer clicks Pay reward and completes payment in Pvium.", +]; + +export default function Home() { + return ( +
+
+
+
+ + Powered by Pvium + + + Install GitHub App + +
+ + Pvium logo + +
+

Pvium GitHub App

+

+ Reward GitHub contributors with Pvium payment links. +

+

+ Turn merged pull requests into payable rewards. Maintainers label + bounty issues, contributors close them with PRs, and Pvium handles the + invite, payment link, funded webhook, and paid status updates. +

+
+ + + +
+
+ +
+ +
+ +
+

+ The reward automation uses the local Pvium SDK at{" "} + + /Users/Projects/Javascript/paytrack/sdks/node + + . The package points @pvium/sdk{" "} + at file:../sdks/node, so + rebuild the SDK after changing it. +

+ +
+ +
+

+ Required values are documented in .env.example: +

+ +
+ +
+

+ Generate GITHUB_APP_PRIVATE_KEY{" "} + from the GitHub App settings page under Private keys, then copy the + full PEM contents into the environment with line breaks replaced by{" "} + \n. +

+

+ Configure the webhook URL as{" "} + + https://<your-host>/api/github/webhook + + . +

+
+ + +
+
+ +
+

+ Configure the Pvium webhook URL as{" "} + + https://<your-host>/api/pvium/webhook + + . Set PVIUM_WEBHOOK_SECRET to + the same secret configured on the Pvium client app. +

+ +

+ When{" "} + + PVIUM_REWARD_PLATFORM_FEE_WALLET + {" "} + is set and the fee basis points are greater than zero, instant batches + include the platform fee as the first payee with memo{" "} + platform fee. The contributor + reward amount is not reduced by the fee. +

+
+ +
+
+ + +
+
+ +
+ +

+ The app stores Pvium OAuth access and refresh tokens on the GitHub + user link so future merged PRs for the same contributor can create + rewards without asking the contributor to authorize again. Treat these + OAuth tokens as secrets; production deployments should encrypt them at + rest and restrict database access. +

+
+
+ ); +} + +function Section({ title, children }: { title: string; children: ReactNode }) { + return ( +
+

{title}

+ {children} +
+ ); +} + +function Endpoint({ label, value }: { label: string; value: string }) { + return ( +
+ {label} + {value} +
+ ); +} + +function ListBlock({ title, items }: { title: string; items: string[] }) { + return ( +
+

{title}

+ +
+ ); +} + +function BulletList({ items }: { items: string[] }) { + return ( + + ); +} + +function NumberedList({ items }: { items: string[] }) { + return ( +
    + {items.map((item) => ( +
  1. + {item} +
  2. + ))} +
+ ); +} + +function CodeBlock({ value }: { value: string }) { + return
{value}
; +} + +const styles: Record = { + page: { + minHeight: "100vh", + margin: 0, + padding: "48px 20px", + background: "#f7f8fb", + color: "#172033", + fontFamily: + 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', + }, + hero: { + maxWidth: 980, + margin: "0 auto 24px", + padding: "32px 0 8px", + }, + brandRow: { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + gap: 12, + marginBottom: 18, + }, + topLinks: { + display: "flex", + alignItems: "center", + flexWrap: "wrap", + gap: 10, + }, + logo: { + width: 96, + height: 96, + borderRadius: 8, + objectFit: "contain", + }, + logoLink: { + display: "inline-flex", + lineHeight: 0, + }, + poweredBy: { + display: "inline-flex", + alignItems: "center", + padding: "9px 13px", + border: "1px solid #c8d0df", + borderRadius: 999, + background: "#ffffff", + color: "#172033", + fontSize: 14, + fontWeight: 600, + textDecoration: "none", + }, + installLink: { + display: "inline-flex", + alignItems: "center", + padding: "10px 14px", + borderRadius: 8, + background: "#172033", + color: "#ffffff", + fontSize: 14, + fontWeight: 700, + textDecoration: "none", + }, + eyebrow: { + margin: "0 0 12px", + color: "#52627a", + fontSize: 14, + fontWeight: 700, + textTransform: "uppercase", + }, + title: { + maxWidth: 820, + margin: "0 0 18px", + fontSize: 48, + lineHeight: 1.08, + letterSpacing: 0, + }, + lede: { + maxWidth: 760, + margin: "0 0 24px", + color: "#46556e", + fontSize: 18, + lineHeight: 1.65, + }, + endpointGrid: { + display: "grid", + gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", + gap: 12, + maxWidth: 920, + }, + endpoint: { + border: "1px solid #d9deea", + borderRadius: 8, + background: "#ffffff", + padding: 16, + }, + endpointLabel: { + display: "block", + marginBottom: 8, + color: "#66748a", + fontSize: 13, + fontWeight: 700, + }, + endpointCode: { + color: "#172033", + fontSize: 14, + wordBreak: "break-word", + }, + section: { + maxWidth: 980, + margin: "18px auto", + padding: 24, + border: "1px solid #d9deea", + borderRadius: 8, + background: "#ffffff", + }, + sectionTitle: { + margin: "0 0 16px", + fontSize: 24, + letterSpacing: 0, + }, + paragraph: { + margin: "0 0 14px", + color: "#46556e", + fontSize: 15, + lineHeight: 1.7, + }, + columns: { + display: "grid", + gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", + gap: 18, + }, + listBlock: { + minWidth: 0, + }, + listTitle: { + margin: "0 0 10px", + color: "#263247", + fontSize: 16, + }, + list: { + margin: 0, + paddingLeft: 22, + color: "#46556e", + fontSize: 15, + lineHeight: 1.7, + }, + listItem: { + marginBottom: 8, + }, + codeBlock: { + margin: "14px 0 0", + padding: 16, + overflowX: "auto", + borderRadius: 8, + background: "#141925", + color: "#eef3ff", + fontSize: 13, + lineHeight: 1.6, + }, + inlineCode: { + padding: "2px 5px", + borderRadius: 5, + background: "#eef1f6", + color: "#263247", + fontSize: "0.92em", + }, +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index 659e33f..9c8c039 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,466 +1,531 @@ -import type { CSSProperties, ReactNode } from "react"; +import type { CSSProperties } from "react"; +import { prisma } from "@/lib/db/prisma"; -const flowSteps = [ - "A repository owner installs the GitHub App.", - "A maintainer labels an issue with a Pvium bounty label, for example pvium:20USDC or pvium:10.", - "When a pull request is merged into a configured reward target branch and closes that issue, the app checks the PR author.", - "If the PR author is already linked to a Pvium account, the app creates a Pvium payment link and comments a Pay reward link on the PR.", - "If the PR author is not linked, the app generates a signed Pvium OAuth invite for type: github and comments the invite link on the PR.", - "Once the user accepts the invite and connects the matching GitHub account in Pvium, the Pvium webhook creates the payment link and comments the Pay reward link on the PR.", - "When Pvium sends a paid or funded webhook, the app marks the reward and bounty as PAID.", -]; +export const dynamic = "force-dynamic"; -const localSetupCommands = [ - "cd /Users/Projects/Javascript/paytrack/sdks/node", - "npm install", - "npm run build", - "", - "cd /Users/Projects/Javascript/paytrack/github-app", - "npm install", - "cp .env.example .env", - "npm run prisma:generate", - "npm run prisma:migrate", - "npm run dev", -]; - -const envExample = `DATABASE_URL="postgresql://postgres:postgres@localhost:5432/pvium_github_app" - -GITHUB_APP_ID="" -GITHUB_APP_PRIVATE_KEY="" -GITHUB_WEBHOOK_SECRET="" -GITHUB_REWARD_TARGET_BRANCHES="main,master" -PVIUM_BOUNTY_LABEL_PREFIX="pvium:" - -PVIUM_ENVIRONMENT="sandbox" -PVIUM_API_BASE_URL="" -PVIUM_CONSENT_HOST="" -PVIUM_SDK_LOG_REQUESTS="false" -PVIUM_API_KEY="" -PVIUM_CLIENT_ID="" -PVIUM_WEBHOOK_SECRET="" -PVIUM_INVITE_SIGNER_PRIVATE_KEY="" -PVIUM_OAUTH_REDIRECT_URI="http://localhost:3000/api/pvium/oauth/callback" -PVIUM_REWARD_PAYMENT_MODEL="instant-batch" -PVIUM_REWARD_PAYMENT_SIGNER_PRIVATE_KEY="" -PVIUM_REWARD_PAYMENT_CHAIN="base" -PVIUM_REWARD_PAYMENT_CHAIN_ID="8453" -PVIUM_REWARD_PAYMENT_CURRENCY="USDC" -PVIUM_REWARD_PAYMENT_TOKEN_ADDRESS="" -PVIUM_REWARD_PAYMENT_TOKEN_DECIMALS="6" -PVIUM_REWARD_PLATFORM_FEE_WALLET="" -PVIUM_REWARD_PLATFORM_FEE_BASIS_POINTS="0" -PVIUM_REWARD_MAX_FEE_AMOUNT="0" -PVIUM_INVOICE_REDIRECT_URI="http://localhost:3000/api/pvium/oauth/callback" - -APP_BASE_URL="http://localhost:3000"`; - -const githubPermissions = [ - "Issues: read and write", - "Pull requests: read and write", - "Metadata: read-only", -]; - -const githubEvents = ["issues", "pull_request"]; +type SearchParams = Record; +type SortMode = "recent" | "top"; +type SortOrder = "asc" | "desc"; +type BountyIssue = { + id: string; + repositoryId: string; + issueNumber: number; + labelName: string; + amount: number | { toString(): string }; + currency: string; + status: string; + createdAt: Date; + updatedAt: Date; + repository: { + owner: string; + repo: string; + }; + rewards: Array<{ + id: string; + status: string; + pullRequestNumber: number; + solverGithubLogin: string; + updatedAt: Date; + }>; +}; -const configItems = [ - "GITHUB_REWARD_TARGET_BRANCHES is a comma-separated list of base branches that can trigger reward processing when a PR is merged.", - "PVIUM_BOUNTY_LABEL_PREFIX controls the GitHub issue label prefix used to detect bounties. It defaults to pvium: when unset or empty.", - "PVIUM_ENVIRONMENT resolves Pvium hosts: test uses localhost, sandbox uses api-sandbox.pvium.com, and production uses api.pvium.com.", - "PVIUM_API_BASE_URL and PVIUM_CONSENT_HOST override the resolved Pvium hosts when needed.", - "PVIUM_SDK_LOG_REQUESTS=true logs SDK request method, host, path, status, duration, and network errors without logging full URLs or secrets.", - "PVIUM_REWARD_PAYMENT_MODEL controls the payment artifact. Use instant-batch for finalized instant batch payment links or invoice for the legacy invoice flow.", - "PVIUM_REWARD_PAYMENT_CHAIN is the chain used by both invoice payment channels and instant batch links.", - "PVIUM_REWARD_PAYMENT_CURRENCY is the invoice payment currency.", - "PVIUM_REWARD_PAYMENT_SIGNER_PRIVATE_KEY signs instant batches. If omitted, the invite signer is used.", - "PVIUM_REWARD_PAYMENT_CHAIN_ID is the chain id used to finalize instant batches.", - "PVIUM_REWARD_PAYMENT_TOKEN_ADDRESS and PVIUM_REWARD_PAYMENT_TOKEN_DECIMALS define the instant batch payout token.", - "PVIUM_REWARD_PLATFORM_FEE_WALLET receives the platform fee. If omitted, no platform fee payee is added.", - "PVIUM_REWARD_PLATFORM_FEE_BASIS_POINTS sets the fee. For example, 100 is 1% and 250 is 2.5%.", - "PVIUM_REWARD_MAX_FEE_AMOUNT caps the computed platform fee. Use 0 for no cap.", -]; +const visibleStatuses = ["OPEN", "RESERVED", "INVOICE_CREATED"] as const; -const pviumEvents = [ - "oauth.invite.accepted", - "invoice.paid", - "invoice.payment_completed", - "invoice.payment.succeeded", - "payment.attached", - "batch.funded", - "batch.payment_completed", - "batch.payment.succeeded", -]; +export default async function Home({ + searchParams, +}: { + searchParams?: Promise; +}) { + const params = searchParams ? await searchParams : {}; + const sort = parseSort(params.sort); + const order = parseOrder(params.order); + const minimumBounty = parseMinimumBounty(params.min); -const usageSteps = [ - "Install the GitHub App on a repository.", - "Add a bounty label to an issue, such as pvium:20USDC or pvium:20. If PVIUM_BOUNTY_LABEL_PREFIX is changed, use that prefix instead.", - "Merge a PR into a configured reward target branch with a closing reference like Closes #123.", - "The app comments on the merged PR.", - "If the contributor needs to link Pvium, they use the invite link in the comment.", - "Pvium redirects back to /api/pvium/oauth/callback with an OAuth code.", - "The app exchanges the code through the local Pvium SDK, verifies the accepted GitHub handle, saves the OAuth token set, creates the payment link, and comments a Pay reward link.", - "The maintainer clicks Pay reward and completes payment in Pvium.", -]; + const bounties = (await prisma.bounty.findMany({ + where: { + status: { in: [...visibleStatuses] }, + amount: { gte: minimumBounty }, + }, + include: { + repository: true, + rewards: { + select: { + id: true, + status: true, + pullRequestNumber: true, + solverGithubLogin: true, + updatedAt: true, + }, + }, + }, + orderBy: + sort === "top" + ? [{ amount: order }, { updatedAt: "desc" }] + : [{ updatedAt: order }, { amount: "desc" }], + take: 100, + })) as BountyIssue[]; -export default function Home() { return (
-
- -

Pvium GitHub App

-

- Reward GitHub contributors with Pvium payment links. -

-

- Turn merged pull requests into payable rewards. Maintainers label - bounty issues, contributors close them with PRs, and Pvium handles the - invite, payment link, funded webhook, and paid status updates. -

-
- - - +
+
+

Pvium GitHub App

+

Bounty issue discovery

+

+ Browse active Pvium bounty issues across connected repositories, + sort by recency or payout, and jump directly to the GitHub issue. +

-
- -
- -
- -
-

- The reward automation uses the local Pvium SDK at{" "} - - /Users/Projects/Javascript/paytrack/sdks/node - - . The package points @pvium/sdk{" "} - at file:../sdks/node, so - rebuild the SDK after changing it. -

- -
+ + Deploy setup + + -
-

- Required values are documented in .env.example: -

- -
+
+ -
-

- Generate GITHUB_APP_PRIVATE_KEY{" "} - from the GitHub App settings page under Private keys, then copy the - full PEM contents into the environment with line breaks replaced by{" "} - \n. -

-

- Configure the webhook URL as{" "} - - https://<your-host>/api/github/webhook - - . -

-
- - -
-
+
+ + + + +
+
-
-

- Configure the Pvium webhook URL as{" "} - - https://<your-host>/api/pvium/webhook - - . Set PVIUM_WEBHOOK_SECRET to - the same secret configured on the Pvium client app. -

- -

- When{" "} - - PVIUM_REWARD_PLATFORM_FEE_WALLET - {" "} - is set and the fee basis points are greater than zero, instant batches - include the platform fee as the first payee with memo{" "} - platform fee. The contributor - reward amount is not reduced by the fee. -

-
+
+ + bounty.repositoryId), + ).size.toString()} + /> + total + Number(bounty.amount), + 0, + ), + )} USDC`} + /> +
-
-
- - -
-
+
+ {bounties.length ? ( + bounties.map((bounty) => { + const repoFullName = `${bounty.repository.owner}/${bounty.repository.repo}`; + const issueUrl = `https://github.com/${repoFullName}/issues/${bounty.issueNumber}`; + const latestReward = [...bounty.rewards].sort( + (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime(), + )[0]; -
- -

- The app stores Pvium OAuth access and refresh tokens on the GitHub - user link so future merged PRs for the same contributor can create - rewards without asking the contributor to authorize again. Treat these - OAuth tokens as secrets; production deployments should encrypt them at - rest and restrict database access. -

-
+ return ( +
+
+ +

+ Label {bounty.labelName} tracked{" "} + {formatDate(bounty.createdAt)} - updated{" "} + {formatDate(bounty.updatedAt)} +

+

+ Bounty issue from {repoFullName}. Open the GitHub issue for + the full title, discussion, and implementation context. +

+ {latestReward ? ( +

+ Latest reward attempt: PR #{latestReward.pullRequestNumber} by @ + {latestReward.solverGithubLogin} is {latestReward.status}. +

+ ) : ( +

+ No reward attempts recorded yet. +

+ )} +
+
+ + {formatAmount(Number(bounty.amount))} + + {bounty.currency} +
+
+ ); + }) + ) : ( +
+

No active bounty issues found

+

+ Add labels such as pvium:20USDC to issues in connected + repositories, then return here to browse them. +

+
+ )} +
); } -function Section({ title, children }: { title: string; children: ReactNode }) { +function Metric({ label, value }: { label: string; value: string }) { return ( -
-

{title}

- {children} -
+
+ {label} + {value} +
); } -function Endpoint({ label, value }: { label: string; value: string }) { +function TabLink({ + href, + active, + children, +}: { + href: string; + active: boolean; + children: string; +}) { return ( -
- {label} - {value} -
+ + {children} + ); } -function ListBlock({ title, items }: { title: string; items: string[] }) { - return ( -
-

{title}

- -
- ); +function parseSort(value: string | string[] | undefined): SortMode { + const raw = Array.isArray(value) ? value[0] : value; + return raw === "top" ? "top" : "recent"; } -function BulletList({ items }: { items: string[] }) { - return ( -
    - {items.map((item) => ( -
  • - {item} -
  • - ))} -
- ); +function parseOrder(value: string | string[] | undefined): SortOrder { + const raw = Array.isArray(value) ? value[0] : value; + return raw === "asc" ? "asc" : "desc"; } -function NumberedList({ items }: { items: string[] }) { - return ( -
    - {items.map((item) => ( -
  1. - {item} -
  2. - ))} -
- ); +function parseMinimumBounty(value: string | string[] | undefined) { + const raw = Array.isArray(value) ? value[0] : value; + if (!raw) return 0; + const parsed = Number(raw); + return Number.isFinite(parsed) && parsed > 0 ? parsed : 0; +} + +function buildQuery({ + sort, + order, + min, +}: { + sort: SortMode; + order: SortOrder; + min: number; +}) { + const params = new URLSearchParams({ sort, order }); + if (min > 0) params.set("min", String(min)); + return `/?${params.toString()}`; } -function CodeBlock({ value }: { value: string }) { - return
{value}
; +function formatAmount(value: number) { + return new Intl.NumberFormat("en-US", { + maximumFractionDigits: 6, + }).format(value); +} + +function formatDate(value: Date) { + return new Intl.DateTimeFormat("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }).format(value); } const styles: Record = { page: { minHeight: "100vh", margin: 0, - padding: "48px 20px", - background: "#f7f8fb", - color: "#172033", + padding: "40px 20px", + background: "#f6f8fb", + color: "#152033", fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', }, - hero: { - maxWidth: 980, - margin: "0 auto 24px", - padding: "32px 0 8px", - }, - brandRow: { + header: { + maxWidth: 1080, + margin: "0 auto 22px", display: "flex", - alignItems: "center", justifyContent: "space-between", - gap: 12, - marginBottom: 18, + gap: 24, + alignItems: "flex-start", + }, + eyebrow: { + margin: "0 0 8px", + color: "#5e6e86", + fontSize: 13, + fontWeight: 700, + textTransform: "uppercase", + }, + title: { + margin: "0 0 12px", + fontSize: 40, + lineHeight: 1.12, + letterSpacing: 0, + }, + lede: { + maxWidth: 690, + margin: 0, + color: "#4d5d75", + fontSize: 17, + lineHeight: 1.6, }, - topLinks: { + deployLink: { + flex: "0 0 auto", + padding: "10px 14px", + borderRadius: 8, + background: "#152033", + color: "#ffffff", + fontSize: 14, + fontWeight: 700, + textDecoration: "none", + }, + toolbar: { + maxWidth: 1080, + margin: "0 auto 16px", display: "flex", - alignItems: "center", flexWrap: "wrap", - gap: 10, - }, - logo: { - width: 96, - height: 96, + alignItems: "flex-end", + justifyContent: "space-between", + gap: 16, + padding: 16, + border: "1px solid #d8deea", borderRadius: 8, - objectFit: "contain", + background: "#ffffff", }, - logoLink: { - display: "inline-flex", - lineHeight: 0, + tabs: { + display: "flex", + flexWrap: "wrap", + gap: 8, }, - poweredBy: { + tab: { display: "inline-flex", alignItems: "center", - padding: "9px 13px", - border: "1px solid #c8d0df", - borderRadius: 999, - background: "#ffffff", - color: "#172033", + minHeight: 38, + padding: "0 13px", + border: "1px solid #cfd7e6", + borderRadius: 8, + color: "#233047", fontSize: 14, - fontWeight: 600, + fontWeight: 700, textDecoration: "none", }, - installLink: { + activeTab: { display: "inline-flex", alignItems: "center", - padding: "10px 14px", + minHeight: 38, + padding: "0 13px", + border: "1px solid #152033", borderRadius: 8, - background: "#172033", + background: "#152033", color: "#ffffff", fontSize: 14, fontWeight: 700, textDecoration: "none", }, - eyebrow: { - margin: "0 0 12px", - color: "#52627a", - fontSize: 14, + filters: { + display: "flex", + flexWrap: "wrap", + gap: 10, + alignItems: "flex-end", + }, + field: { + display: "grid", + gap: 5, + }, + fieldLabel: { + color: "#5e6e86", + fontSize: 12, fontWeight: 700, - textTransform: "uppercase", }, - title: { - maxWidth: 820, - margin: "0 0 18px", - fontSize: 48, - lineHeight: 1.08, - letterSpacing: 0, + input: { + width: 120, + minHeight: 38, + boxSizing: "border-box", + border: "1px solid #cfd7e6", + borderRadius: 8, + padding: "0 10px", + color: "#152033", + background: "#ffffff", }, - lede: { - maxWidth: 760, - margin: "0 0 24px", - color: "#46556e", - fontSize: 18, - lineHeight: 1.65, + select: { + minHeight: 38, + border: "1px solid #cfd7e6", + borderRadius: 8, + padding: "0 10px", + color: "#152033", + background: "#ffffff", }, - endpointGrid: { + button: { + minHeight: 38, + border: 0, + borderRadius: 8, + padding: "0 14px", + background: "#316f66", + color: "#ffffff", + fontSize: 14, + fontWeight: 700, + cursor: "pointer", + }, + summary: { + maxWidth: 1080, + margin: "0 auto 16px", display: "grid", - gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", + gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12, - maxWidth: 920, }, - endpoint: { - border: "1px solid #d9deea", + metric: { + padding: 16, + border: "1px solid #d8deea", borderRadius: 8, background: "#ffffff", - padding: 16, }, - endpointLabel: { + metricLabel: { display: "block", - marginBottom: 8, - color: "#66748a", + color: "#5e6e86", fontSize: 13, fontWeight: 700, + marginBottom: 6, }, - endpointCode: { - color: "#172033", - fontSize: 14, - wordBreak: "break-word", - }, - section: { - maxWidth: 980, - margin: "18px auto", - padding: 24, - border: "1px solid #d9deea", - borderRadius: 8, - background: "#ffffff", - }, - sectionTitle: { - margin: "0 0 16px", + metricValue: { + display: "block", + color: "#152033", fontSize: 24, - letterSpacing: 0, }, - paragraph: { - margin: "0 0 14px", - color: "#46556e", - fontSize: 15, - lineHeight: 1.7, + issueList: { + maxWidth: 1080, + margin: "0 auto", + display: "grid", + gap: 12, }, - columns: { + issueCard: { display: "grid", - gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", + gridTemplateColumns: "minmax(0, 1fr) auto", gap: 18, + padding: 18, + border: "1px solid #d8deea", + borderRadius: 8, + background: "#ffffff", }, - listBlock: { + issueMain: { minWidth: 0, }, - listTitle: { - margin: "0 0 10px", - color: "#263247", - fontSize: 16, + issueTitleRow: { + display: "flex", + flexWrap: "wrap", + alignItems: "center", + gap: 10, + marginBottom: 8, + }, + issueTitle: { + color: "#152033", + fontSize: 18, + fontWeight: 800, + textDecoration: "none", + wordBreak: "break-word", + }, + statusPill: { + padding: "4px 8px", + borderRadius: 8, + background: "#e9f3ef", + color: "#25584f", + fontSize: 12, + fontWeight: 800, + }, + issueMeta: { + margin: "0 0 8px", + color: "#66768c", + fontSize: 13, + lineHeight: 1.5, + }, + issueExcerpt: { + margin: "0 0 8px", + color: "#44536a", + fontSize: 14, + lineHeight: 1.55, }, - list: { + rewardMeta: { margin: 0, - paddingLeft: 22, - color: "#46556e", - fontSize: 15, - lineHeight: 1.7, + color: "#5d6c80", + fontSize: 13, + lineHeight: 1.5, }, - listItem: { - marginBottom: 8, + amountBlock: { + minWidth: 96, + textAlign: "right", }, - codeBlock: { - margin: "14px 0 0", - padding: 16, - overflowX: "auto", - borderRadius: 8, - background: "#141925", - color: "#eef3ff", + amount: { + display: "block", + fontSize: 26, + color: "#152033", + }, + currency: { + display: "block", + color: "#66768c", fontSize: 13, - lineHeight: 1.6, + fontWeight: 800, + }, + emptyState: { + padding: 28, + border: "1px solid #d8deea", + borderRadius: 8, + background: "#ffffff", + textAlign: "center", }, - inlineCode: { - padding: "2px 5px", - borderRadius: 5, - background: "#eef1f6", - color: "#263247", - fontSize: "0.92em", + emptyTitle: { + margin: "0 0 8px", + fontSize: 22, + }, + emptyText: { + margin: 0, + color: "#4d5d75", + fontSize: 15, + lineHeight: 1.6, }, };