diff --git a/src/App.tsx b/src/App.tsx index 93cbd648..749f787e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,7 @@ -import { Routes, Route, Outlet } from "react-router-dom" +import { Button, Icon, Layout } from "@stellar/design-system" +import { Routes, Route, Outlet, NavLink } from "react-router-dom" +import styles from "./App.module.css" +import ConnectAccount from "./components/ConnectAccount" import ErrorBoundary from "./components/ErrorBoundary" import ComingSoon from "./components/ComingSoon" import Footer from "./components/Footer" @@ -46,10 +49,48 @@ function App() { } const AppLayout: React.FC = () => ( -
- -
- +
+ + + {({ isActive }) => ( + + )} + + + {({ isActive }) => ( + + )} + + + {({ isActive }) => ( + + )} + + + } + contentRight={} + /> + +
+ + + + +
diff --git a/src/components/MilestoneTracker.tsx b/src/components/MilestoneTracker.tsx index f70275b7..d636f561 100644 --- a/src/components/MilestoneTracker.tsx +++ b/src/components/MilestoneTracker.tsx @@ -1,151 +1,97 @@ -import React, { useState } from "react" -import { useTranslation } from "react-i18next" -import { useCourse } from "../hooks/useCourse" -import styles from "./MilestoneTracker.module.css" +import React, { useState, useEffect } from "react"; +import { Icon, Button, Card, Badge } from "@stellar/design-system"; -export interface Milestone { - id: number - label: string - lrnReward: number +interface Milestone { + id: number; + label: string; + lrnReward: number; + status: "completed" | "in-progress" | "locked"; + txHash?: string; } interface MilestoneTrackerProps { - courseId: string - milestones: Milestone[] + courseId: string; + milestones: Milestone[]; } -function MilestoneStep({ - courseId, - milestone, -}: { - courseId: string - milestone: Milestone -}) { - const { getCourseProgress, completeMilestone, isCompletingMilestone } = - useCourse() - const progress = getCourseProgress(courseId) - const isCompleted = progress.completedMilestoneIds.includes(milestone.id) - const hasPrevious = - milestone.id <= 1 || - progress.completedMilestoneIds.includes(milestone.id - 1) - const status = isCompleted - ? "completed" - : hasPrevious - ? "in_progress" - : "locked" - const txHash: string | undefined = undefined - const { t, i18n } = useTranslation() +export const MilestoneTracker: React.FC = ({ milestones }) => { + return ( +
+ {milestones.map((milestone, index) => ( +
+ {/* Progress Line */} + {index !== milestones.length - 1 && ( +
+ )} - const [isCompleting, setIsCompleting] = useState(false) + {/* Status Icon */} +
+
+ {milestone.status === "completed" ? ( + + ) : milestone.status === "in-progress" ? ( +
+ ) : ( + + )} +
+
- const handleComplete = async () => { - if (status !== "in_progress") return + {/* Content Card */} + +
+

+ {milestone.label} +

+ + +{milestone.lrnReward} LRN + +
- setIsCompleting(true) - try { - // Optimistically UI changes within useCourse - // wait for completion - await completeMilestone(courseId, milestone.id) - } catch (err) { - console.error("Failed to complete milestone:", err) - } finally { - setIsCompleting(false) - } - } - - const getIcon = () => { - switch (status) { - case "completed": - return ✅ - case "in_progress": - return ⏳ - case "locked": - return 🔒 - default: - return 🔒 - } - } - - return ( -
-
{getIcon()}
-
-
-

{milestone.label}

-
- {t("home.milestones.lrnReward", { - amount: new Intl.NumberFormat(i18n.language).format( - milestone.lrnReward, - ), - })} -
-
- - {status === "locked" && ( -

- {t("home.milestones.locked")} -

- )} - - {status === "in_progress" && ( -
-

- {t("home.milestones.inProgress")} -

- -
- )} - - {status === "completed" && ( -
-

- {t("home.milestones.completedText")} -

- {txHash && ( - - {t("home.milestones.tx")}: {txHash} ↗ - - )} -
- )} -
-
- ) -} - -export function MilestoneTracker({ - courseId, - milestones, -}: MilestoneTrackerProps) { - return ( -
- {milestones.map((milestone) => ( - - ))} -
- ) -} + {milestone.status === "completed" && milestone.txHash && ( + + )} + + {milestone.status === "in-progress" && ( +
+ +
+ )} + +
+ ))} +
+ ); +}; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 4d7c2120..f5d52a0c 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,81 +1,89 @@ -import { Button, Icon } from "@stellar/design-system" +import { Button, Card, Icon } from "@stellar/design-system" import React from "react" import { useTranslation } from "react-i18next" import { Link } from "react-router-dom" import { GuessTheNumber } from "../components/GuessTheNumber" import { MilestoneTracker } from "../components/MilestoneTracker" -import OnboardingWizard from "../components/OnboardingWizard" +import { labPrefix } from "../contracts/util" +import styles from "./Home.module.css" -const Home: React.FC = () => { - const { t } = useTranslation() +const Home: React.FC = () => ( +
+
+
+

Yay! You're on Stellar!

- const mockMilestones = [ - { id: 1, label: t("home.milestones.1"), lrnReward: 10 }, - { id: 2, label: t("home.milestones.2"), lrnReward: 20 }, - { id: 3, label: t("home.milestones.3"), lrnReward: 50 }, - ] - - return ( -
- {/* Immersive Background Elements */} -
-
-
- - - -
-
-
- LV -
-
- -

- {t("home.heroTitle")} -

-

- {t("home.heroDesc")} -

-
+

+ A local development template designed to help you build dApps on the + Stellar network. This environment lets you easily test wallet + connections, smart contract interactions, transaction verifications, + etc.{" "} - Browse Tracks + View docs - - {t("nav.learn")} - -

-
+

-
- {/* Upstream Content: Course Progress */} -
-
-
-
-

- - {t("home.courseProgress.title")} -

-

- {t("home.courseProgress.desc")} -

-
-
- -
-
-
+
+

+ + Course Progress: Stellar Basics +

+
+
+ +
+ +

+ + Sample Contracts +

+ +

+ Guess The Number: Interact with the sample contract + from the{" "} + + Scaffold Tutorial + {" "} + using an automatically generated contract client. +

+ + + +

Or take a look at other sample contracts to get you started:

+ + + +
+
{/* Upstream Content: Sample Contracts */}
diff --git a/src/pages/Treasury.tsx b/src/pages/Treasury.tsx index 0ab6900c..04bd7e8b 100644 --- a/src/pages/Treasury.tsx +++ b/src/pages/Treasury.tsx @@ -1,268 +1,73 @@ -import React from "react" -import { - AreaChart, - Area, - XAxis, - YAxis, - CartesianGrid, - Tooltip, - ResponsiveContainer, -} from "recharts" +import React, { useState, useEffect } from "react"; +import { Layout, Button, Icon } from "@stellar/design-system"; -const Treasury: React.FC = () => { - // Mock data for the treasury health chart - const data = [ - { name: "Mon", inflows: 4000, outflows: 2400 }, - { name: "Tue", inflows: 3000, outflows: 1398 }, - { name: "Wed", inflows: 2000, outflows: 9800 }, - { name: "Thu", inflows: 2780, outflows: 3908 }, - { name: "Fri", inflows: 1890, outflows: 4800 }, - { name: "Sat", inflows: 2390, outflows: 3800 }, - { name: "Sun", inflows: 3490, outflows: 4300 }, - ] +export default function Treasury() { + const [stats, setStats] = useState({ + totalTreasury: "125,000", + totalDisbursed: "45,000", + scholarsFunded: 120, + donorsCount: 85, + }); - const stats = { - totalTreasury: "125,400 USDC", - totalDisbursed: "45,200 USDC", - scholarsFunded: "128", - donorsCount: "842", - } + const [donations, setDonations] = useState([ + { id: 1, donor: "0xABC...123", amount: "500 USDC", time: "2 mins ago" }, + { id: 2, donor: "0xDEF...456", amount: "1,200 USDC", time: "15 mins ago" }, + { id: 3, donor: "0xGHI...789", amount: "250 USDC", time: "1 hour ago" }, + ]); - return ( -
-
-
-

- Treasury Dashboard -

-

- Real-time transparency into the LearnVault decentralized scholarship - fund. -

-
+ return ( +
+

Community Treasury Dashboard

+ + {/* Summary Stats */} +
+ } /> + } /> + } /> + } /> +
-
- - - - -
+
+ {/* Recent Donations */} +
+

Recent Donations

+
+ {donations.map((d) => ( +
+ {d.donor} + {d.amount} + {d.time} +
+ ))} +
+
-
-
-
-
-

Treasury Health

-

- Comparison of community inflows vs scholarship outflows. -

-
-
- - -
-
-
- - - - - - - - - - - - - - - `$${val / 1000}k`} - /> - - - - - -
-
-
+ {/* Treasury Health Chart Placeholder */} +
+

Treasury Health

+
+ [ Treasury Health Chart (Inflows vs Outflows) ] +
+
+
-
- - -
- -
- -
-
- ) +
+ +
+
+ ); } -const StatCard: React.FC<{ - label: string - value: string - icon: string - color: string -}> = ({ label, value, icon, color }) => ( -
-
- {icon} -
-

- {label} -

-

{value}

-
-) - -const LegendItem: React.FC<{ color: string; label: string }> = ({ - color, - label, -}) => ( -
-
- {label} -
-) - -const ActivityFeed: React.FC<{ title: string; items: any[] }> = ({ - title, - items, -}) => ( -
-

- {title} -

-
- {items.map((item, i) => ( -
-
-
-
-

{item.user}

-

- {item.time} -

-
-
-

- {item.amount} -

-
- ))} -
-
-) - -export default Treasury +function StatCard({ title, value, icon }: { title: string; value: string | number; icon: React.ReactNode }) { + return ( +
+
+ {icon} + {title} +
+
{value}
+
+ ); +}