Skip to content

Storyline page: 3-col stats boxes like profile page #805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
realproject7 merged 2 commits into from
Apr 3, 2026
Merged

Storyline page: 3-col stats boxes like profile page #805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e7e8c2
[#802] Redesign stats as 3-col boxes in header info panel
realproject7 Apr 3, 2026
f21c18f
[#802] Fix MarketCapBox to match profile stat box pattern
realproject7 Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 29 additions & 32 deletions src/app/story/[storylineId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,48 +333,45 @@ function StoryHeader({
</span>
</div>
</div>
</div>
</div>

{/* Market stats */}
{priceInfo && (
<div className="mt-4 text-xs">
<div className="border-border bg-surface grid grid-cols-1 sm:grid-cols-2 gap-2 rounded border px-3 py-2">
<div className="grid grid-cols-2 gap-2">
<div className="min-w-0">
{/* Stat boxes — inside info panel on desktop, below info rows */}
{priceInfo && (
<div className="mt-3 grid grid-cols-3 gap-2">
<div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
<MarketCapBox
tokenAddress={storyline.token_address}
totalSupply={parseFloat(priceInfo.totalSupply)}
pricePerToken={parseFloat(priceInfo.pricePerToken)}
/>
</div>
<div className="min-w-0">
<span className="text-muted block text-[10px] uppercase tracking-wider">
Supply Minted
</span>
<span className="font-semibold text-accent">
{formatSupply(priceInfo.totalSupply)} tokens
</span>
<div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
<div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
<div className="text-muted text-[9px]">Supply Minted</div>
</div>
</div>
{storyline.sunset ? (
<div>
<span className="text-muted">Story complete</span>
<span className="text-foreground ml-2">
{storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
</span>
</div>
) : storyline.last_plot_time ? (
<div>
<span className="text-muted block text-[10px] uppercase tracking-wider mb-1">
Next Plot Publish Deadline
</span>
<DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
<div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
{storyline.sunset ? (
<>
<div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
<div className="text-muted text-[9px]">Complete</div>
</>
) : storyline.last_plot_time ? (
<>
<div className="text-foreground text-sm font-bold leading-tight">
<DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
</div>
<div className="text-muted text-[9px]">Deadline</div>
</>
) : (
<>
<div className="text-foreground text-sm font-bold">—</div>
<div className="text-muted text-[9px]">Deadline</div>
</>
)}
</div>
) : null}
</div>
</div>
)}
</div>
)}
</div>
{!storyline.sunset && (
<AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} />
)}
Expand Down
14 changes: 6 additions & 8 deletions src/components/MarketCapBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,16 @@ export function MarketCapBox({
const changePercent = priceChange?.changePercent ?? null;

return (
<div>
<span className="text-muted block text-[10px] uppercase tracking-wider">
Market Cap
</span>
<span className="font-semibold text-accent">
<>
<div className="text-foreground text-sm font-bold">
{formatUsdValue(marketCapUsd)}
{changePercent !== null && (
<span className={`ml-1.5 text-[10px] font-medium ${changePercent >= 0 ? "text-accent" : "text-error"}`}>
<span className={`ml-1 text-[10px] font-medium ${changePercent >= 0 ? "text-accent" : "text-error"}`}>
{changePercent >= 0 ? "+" : ""}{changePercent.toFixed(1)}%
</span>
)}
</span>
</div>
</div>
<div className="text-muted text-[9px]">Market Cap</div>
</>
);
}
Loading