Skip to content

feat(home): adaptive dashboard landing for connected users (#837) #1029

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
Baskarayelu merged 2 commits into from
Jul 30, 2026
Merged

feat(home): adaptive dashboard landing for connected users (#837) #1029

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
3e971fb
feat(home): adaptive dashboard landing for connected users (#837)
Zizee1994 Jul 30, 2026
e1ee6be
Merge branch 'main' into feat/837-dashboard-landing-page
Zizee1994 Jul 30, 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
158 changes: 158 additions & 0 deletions src/pages/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,3 +195,161 @@
min-width: 200px;
}
}

/* ─── Dashboard-preview variant (connected users) ──────────────────────── */

.home--dashboard {
gap: var(--credence-space-10);
}

.home--loading {
padding-block: var(--credence-space-8);
}

/* Header with wallet chip */

.home__dashHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--credence-space-6);
flex-wrap: wrap;
}

.home__walletChip {
display: grid;
gap: var(--credence-space-1);
padding: var(--credence-space-3) var(--credence-space-4);
border: 1px solid var(--credence-border-default);
border-radius: var(--credence-radius-lg);
background: var(--credence-surface-card);
min-width: 12rem;
}

.home__walletChipLabel {
color: var(--credence-text-secondary);
font-size: var(--credence-font-size-sm);
}

.home__walletChipAddress {
color: var(--credence-text-primary);
font-size: var(--credence-font-size-sm);
}

/* Section headings */

.home__sectionTitle {
margin: 0 0 var(--credence-space-4);
color: var(--credence-text-secondary);
font-size: var(--credence-font-size-sm);
font-weight: var(--credence-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.07em;
}

/* Stat card grid */

.home__statGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--credence-space-4);
align-items: start;
}

.home__statCard {
padding: var(--credence-space-5) var(--credence-space-6);
border: 1px solid var(--credence-border-default);
border-radius: var(--credence-radius-xl);
background: var(--credence-surface-card);
display: grid;
gap: var(--credence-space-2);
}

.home__statLabel {
color: var(--credence-text-secondary);
font-size: var(--credence-font-size-sm);
}

.home__statNumber {
color: var(--credence-text-primary);
font-size: var(--credence-font-size-2xl);
font-weight: var(--credence-font-weight-bold);
line-height: var(--credence-line-height-tight);
}

.home__statValue--tier {
display: flex;
align-items: center;
gap: var(--credence-space-3);
flex-wrap: wrap;
}

/* Bond mini-list inside the Active Bonds stat card */

.home__bondList {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}

.home__bondRow {
display: flex;
align-items: center;
gap: var(--credence-space-3);
padding-block: var(--credence-space-2);
border-top: 1px solid var(--credence-border-default);
font-size: var(--credence-font-size-sm);
flex-wrap: wrap;
}

.home__bondAmount {
color: var(--credence-text-primary);
font-weight: var(--credence-font-weight-semibold);
min-width: 6rem;
}

.home__bondUnlock {
color: var(--credence-text-secondary);
flex: 1;
}

/* Activity footer link */

.home__activityFooter {
margin-top: var(--credence-space-4);
}

.home__activityLink {
color: var(--credence-color-primary);
font-size: var(--credence-font-size-sm);
font-weight: var(--credence-font-weight-semibold);
text-decoration: none;
}

.home__activityLink:hover {
text-decoration: underline;
}

.home__activityLink:focus-visible {
outline: var(--credence-focus-ring);
outline-offset: 2px;
border-radius: var(--credence-radius-sm);
}

/* Responsive adjustments */

@media (max-width: 768px) {
.home__dashHeader {
display: grid;
}

.home__walletChip {
width: 100%;
}

.home__statGrid {
grid-template-columns: 1fr;
}
}
132 changes: 131 additions & 1 deletion src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export default function Home() {
<div>
<h1 className="home__title">Credence — Economic Trust</h1>
<p className="home__description">
On-chain economic identity on Stellar. Stake USDC as a programmable reputation bond.
On-chain economic identity on Stellar. Stake USDC as a programmable reputation bond and
build verifiable trust.
</p>
</div>
<div className="home__ctaRow">
Expand All @@ -21,3 +22,132 @@ export default function Home() {
</div>
)
}

// ---------------------------------------------------------------------------
// DashboardPreview — shown to connected users
// ---------------------------------------------------------------------------

function DashboardPreview({ address }: { address: string }) {
const totalBonded = MOCK_BONDS.reduce((sum, b) => sum + b.amountUsdc, 0)
const tierLabel = `${MOCK_TRUST_TIER.charAt(0).toUpperCase()}${MOCK_TRUST_TIER.slice(1)} Tier`

return (
<div className="home home--dashboard">
{/* Page header */}
<header className="home__dashHeader">
<div>
<h1 className="home__title">Welcome back</h1>
<p className="home__description">Here's a snapshot of your Credence account.</p>
</div>
<div className="home__walletChip" aria-label="Connected wallet address">
<span className="home__walletChipLabel">Wallet</span>
<code className="home__walletChipAddress">
{address.slice(0, 8)}&hellip;{address.slice(-6)}
</code>
</div>
</header>

{/* Stat cards */}
<section aria-labelledby="home-stats-heading">
<h2 id="home-stats-heading" className="home__sectionTitle">
Account summary
</h2>
<div className="home__statGrid">
{/* Trust tier */}
<article className="home__statCard" aria-label="Trust tier">
<p className="home__statLabel">Trust tier</p>
<div className="home__statValue home__statValue--tier">
<span className="home__statNumber">{MOCK_TRUST_SCORE}</span>
<Badge variant={MOCK_TRUST_TIER} label={tierLabel} />
</div>
</article>

{/* Total bonded */}
<article className="home__statCard" aria-label="Total bonded USDC">
<p className="home__statLabel">Total bonded</p>
<p className="home__statNumber">{formatUsdc(totalBonded)}</p>
</article>

{/* Active bonds */}
<article className="home__statCard" aria-label="Active bond count">
<p className="home__statLabel">Active bonds</p>
<p className="home__statNumber">{MOCK_BONDS.length}</p>
<ul className="home__bondList" aria-label="Active bond breakdown">
{MOCK_BONDS.map((bond) => (
<li key={bond.id} className="home__bondRow">
<span className="home__bondAmount">{formatUsdc(bond.amountUsdc)}</span>
<span className="home__bondUnlock">Unlocks {bond.unlockLabel}</span>
<Badge variant={bond.status} />
</li>
))}
</ul>
</article>
</div>
</section>

{/* Quick actions */}
<section aria-labelledby="home-actions-heading">
<h2 id="home-actions-heading" className="home__sectionTitle">
Quick actions
</h2>
<div className="home__ctaRow">
<Link to="/bond/new" role="button" className="home__cta home__cta--primary">
Create bond
</Link>
<Link to="/dashboard" role="button" className="home__cta home__cta--secondary">
Open dashboard
</Link>
<Link to="/trust" role="button" className="home__cta home__cta--secondary">
View trust score
</Link>
</div>
</section>

{/* Activity preview */}
<section aria-labelledby="home-activity-heading">
<h2 id="home-activity-heading" className="home__sectionTitle">
Recent activity
</h2>
{/*
ActivityTimeline renders at most the SAMPLE_ACTIVITY items when no
real data is passed. A compact prop keeps the list concise.
Replace `items` with a real data source when the API is wired up.
*/}
<ActivityTimeline compact />
<div className="home__activityFooter">
<Link to="/attestations" className="home__activityLink">
View all attestations
</Link>
</div>
</section>
</div>
)
}

// ---------------------------------------------------------------------------
// Home — top-level entry point, adaptive on connection state
// ---------------------------------------------------------------------------

export default function Home() {
useSeo({
title: 'Home',
description:
'Credence — on-chain economic identity on Stellar. Stake USDC as a programmable reputation bond and build verifiable trust.',
})

const { connected, address, isConnecting } = useWallet()

if (isConnecting) {
return (
<div className="home home--loading" aria-label="Loading dashboard">
<LoadingSkeleton variant="dashboard" rows={3} />
</div>
)
}

if (connected && address) {
return <DashboardPreview address={address} />
}

return <Hero />
}