FRONTEND: User Dashboard with Portfolio Analytics

Métriques du dépôt

Stars

4 stars (4 stars)

Métriques de merge PR

Métriques PR en attente (Métriques PR en attente)

Description

// 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>
  );
}

Guide contributeur

Direction de recherche

Explorez l'implémentation de SSG avec fallback 'blocking' pour les tableaux de bord utilisateur dynamiques, intégrez recharts pour les graphiques en courbes, circulaires et en anneau, et ajoutez la fonctionnalité d'exportation CSV/PDF.

Stack technique

typescriptreactnextjs

Domaine

frontend

Type d'issue

Fonctionnalité

DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.

3

Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.

Une demi journée

Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.

Récente

ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.

Claire

Prérequis

ReactTypeScriptNext.js

Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.

60