Oval3 Viewer
Easily view your cards.
I. Introduction
A. Oval3
Oval3 is a web3 game (similar to Sorare) where users collect rugby player cards in the form of non-fungible tokens (NFTs). Each card represents a player during a specific season, in their respective competition (Top 14, PRO D2, MLR), with a rarity level ranging from “LIMITED” to “UNIQUE”. These cards are used to participate in tournaments where players select 5 cards based on their position, then earn a score based on the actual performance of the players during matches.
B. Oval3 Viewer
Oval3 Viewer is an open-source web application developed in NextJS, TailwindCSS, and Typescript. It uses the Oval3 API as well as blockchain data to retrieve the list of cards held by a user. This application allows for displaying the list of cards, sorting and filtering them, while also providing the option to view associated statistics.
II. Functionality of the Application
A. Retrieving blockchain data
To obtain data from the blockchain, the GetOwners.ts script uses the ownerOf function of the NFT smart contract to retrieve the address holding each non-fungible token. To keep this database up to date, the TransferListener.ts script monitors the Transfer events of the smart contract and updates the data based on the from, to, and tokenId parameters. It should also be possible to use TheGraph.
B. Data storage
The data is currently stored in a JSON file for ease of use and application creation. While this method simplifies things, it can lead to small errors. A more robust approach would be to index all Transfer events from the smart contract creation block, then listen for new events as they occur. Additionally, using a proper database such as PostgreSQL would be a more robust and scalable solution.
C. Card data retrieval
Card information such as images, match statistics, and player information are stored by Oval3. To retrieve this data, API calls are made to the appropriate endpoints. These calls are handled in the /app/Components/Cards.tsx file.
D. Displaying cards
Card display occurs dynamically as data arrives. The use of NextJS with TailwindCSS and the Shadcn-UI library enables fast and smooth display. The retrieved data allows sorting and filtering of cards based on all their statistics, displayed in the panel associated with each card.
III. References
- 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/
