Oval3 Viewer
Voir ses cartes facilement.
I. Introduction
A. Oval3
Oval3 est un jeu web3 (semblable à Sorare) où les utilisateurs collectionnent des cartes de joueurs de rugby sous forme de jetons non fongibles (NFT). Chaque carte représente un joueur durant une saison spécifique, dans sa compétition respective (Top 14, PRO D2, MLR), avec un niveau de rareté allant de “LIMITED” à “UNIQUE”. Ces cartes servent à participer à des tournois où les joueurs sélectionnent 5 cartes en fonction de leur poste, puis obtiennent un score basé sur les performances réelles des joueurs lors des matchs.
B. Oval3 Viewer
Oval3 Viewer est une application web open source développée en NextJS, TailwindCSS et Typescript. Elle utilise l’API d’Oval3 ainsi que les données de la blockchain pour récupérer la liste des cartes détenues par un utilisateur. Cette application permet d’afficher la liste des cartes, de les trier et de les filtrer, tout en offrant la possibilité de consulter les statistiques associées.
II. Fonctionnement de l’application
A. Récupération des données blockchain
Pour obtenir les données de la blockchain, le script GetOwners.ts utilise la fonction ownerOf du contrat intelligent des NFT pour récupérer l'adresse détenant chaque jeton non fongible. Afin de maintenir cette base de données à jour, le script TransferListener.ts surveille les événements Transfer du contrat intelligent et met à jour les données en fonction des paramètres from, to et tokenId. Il devrait aussi être possible d’utiliser TheGraph.
B. Stockage des données
Les données sont actuellement stockées dans un fichier JSON pour faciliter l’utilisation et la création de l’application. Bien que cette méthode simplifie les choses, elle peut entraîner de petites erreurs. Une approche plus robuste consisterait à indexer tous les événements Transfer depuis le bloc de création du contrat intelligent, puis à écouter les nouveaux événements au fur et à mesure qu'ils surviennent. De plus, l'utilisation d'une véritable base de données, telle que PostgreSQL, serait une solution plus robuste et évolutive.
C. Récupération des données des cartes
Les informations des cartes, telles que les images, les statistiques de match et les informations des joueurs, sont stockées par Oval3. Pour récupérer ces données, il suffit d’effectuer des appels API aux endpoints appropriés. Ces appels sont gérés dans le fichier /app/Components/Cards.tsx.
D. Affichage des cartes
L’affichage des cartes se fait dynamiquement au fur et à mesure que les données arrivent. L’utilisation de NextJS avec TailwindCSS et la bibliothèque Shadcn-UI permet un affichage rapide et harmonieux. Les données récupérées permettent de trier et de filtrer les cartes en fonction de toutes leurs statistiques, et sont affichées dans le panneau associé à chaque carte.
III. Références
- Oval3 Viewer: https://oval3viewer.ereynier.me
- Oval3 Viewer Project: https://github.com/ereynier/Oval3-viewer
- Oval3: https://www.oval3.game/
- NextJS: https://nextjs.org/
- Viem.sh: https://viem.sh
- TailwindCSS: https://tailwindcss.com/
- Radix UI: https://www.radix-ui.com/
- Shadcn-UI: https://ui.shadcn.com/
- Aceternity UI: https://ui.aceternity.com/
