Shonen-Labs/Roster-Rumble

FRONTEND: User Dashboard with Portfolio Analytics

Open

#19 创建于 2025年4月23日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (11 fork)auto 404
ODHack 14UI/Webgood first issue

仓库指标

Star
 (4 star)
PR 合并指标
 (PR 指标待抓取)

描述

Description
Personalized dashboard showing contest history and performance stats.

Acceptance Criteria:

  1. SSG page with client-side hydration
  2. Interactive charts:
    • ROI over time (Line chart)
    • Sport distribution (Pie chart)
    • Win/loss ratio (Donut chart)
  3. Paginated transaction history table
  4. Downloadable tax report (PDF)

Technical Details:

// pages/dashboard/[wallet].tsx
export const getStaticPaths: GetStaticPaths = async () => {
  return { paths: [], fallback: 'blocking' };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetchUserData(params.wallet as string);
  return { props: { userData: await res.json() } };
};

export default function Dashboard({ userData }: { userData: User }) {
  const { data } = useSWR(`/api/users/${userData.wallet}`, {
    fallbackData: userData
  });
  
  return (
    <div>
      <PortfolioChart data={data.performance} />
      <TransactionHistory transactions={data.txns} />
    </div>
  );
}

Notes:

  • Use recharts for visualizations
  • Implement SSG with fallback
  • Add CSV/PDF export functionality

贡献者指南