diff --git a/src/pages/Home.css b/src/pages/Home.css index 2c4cb0b5..ab013abb 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -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; + } +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 8e6551d5..3a86045a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -7,7 +7,8 @@ export default function Home() {

Credence — Economic Trust

- 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.

@@ -21,3 +22,132 @@ export default function Home() {
) } + +// --------------------------------------------------------------------------- +// 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 ( +
+ {/* Page header */} +
+
+

Welcome back

+

Here's a snapshot of your Credence account.

+
+
+ Wallet + + {address.slice(0, 8)}…{address.slice(-6)} + +
+
+ + {/* Stat cards */} +
+

+ Account summary +

+
+ {/* Trust tier */} +
+

Trust tier

+
+ {MOCK_TRUST_SCORE} + +
+
+ + {/* Total bonded */} +
+

Total bonded

+

{formatUsdc(totalBonded)}

+
+ + {/* Active bonds */} +
+

Active bonds

+

{MOCK_BONDS.length}

+
    + {MOCK_BONDS.map((bond) => ( +
  • + {formatUsdc(bond.amountUsdc)} + Unlocks {bond.unlockLabel} + +
  • + ))} +
+
+
+
+ + {/* Quick actions */} +
+

+ Quick actions +

+
+ + Create bond + + + Open dashboard + + + View trust score + +
+
+ + {/* Activity preview */} +
+

+ Recent activity +

+ {/* + 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. + */} + +
+ + View all attestations + +
+
+
+ ) +} + +// --------------------------------------------------------------------------- +// 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 ( +
+ +
+ ) + } + + if (connected && address) { + return + } + + return +}