TP Provider (Frontend simple)

Objectif: Créer un mini site web qui permet d’afficher le solde en ETH du portefeuille de cryptomonnaies de l’utilisateur (sujet inspiré de l'évaluation technique proposée aux candidats pour un poste chez EthScore).

Point de vue fonctionnel

Développez un mini site web qui doit à minima respecter l’ensemble des contraintes suivantes :

• Le site dispose d’une unique page qui invite simplement l'utilisateur à se connecter à l’aide de l’extension pour navigateur Metamask [1] par l’intermédiaire d’un bouton ;
• Une fois le portefeuille de l’utilisateur connecté (qui doit au préalable avoir été créé et alimenté en ETH [2, 3]), l’interface de la page se modifie alors pour :
  • Afficher un bouton de déconnexion à la place de celui dédié à la connexion ;
  • Afficher le solde d'ETH du portefeuille sur un réseau testnet d’Ethereum au choix (Kovan, Rinkeby, Goerli...) [4].
  • Afficher les 10 dernières transactions du portefeuille sur ce même réseau, avec pour chaque transaction : (a) Quelques propriétés intéressantes/pertinentes de la transaction (au choix : statut, date, émetteur, destinataire, #block, etc.) ; (b) Un lien hypertexte vers l'instance Etherscan [5] dédiée à ce réseau.

Point de vue technique

• Le frontend devrait idéalement être implémenté à l’aide de Javascript ;
• Le backend peut interagir avec la blockchain en utilisant au choix les bibliothèques web3.js [6] ou ethers.js [7] et être implémenté en utilisant langage(s) et framework(s) de votre choix ;
• La connexion de l’utilisateur doit être réalisée via l’intégration de l’extension Metamask ;
• Il doit y avoir un découplage entre le frontend et le backend, c’est-à-dire entre le code permettant l’affiche de la page et les méthodes de récupération des données ;
• Il n’est pas nécessaire de faire de stockage de données persistant (fichier, BDD, ...) ;

Critères d’évaluation

Vous êtes invité à porter un soin particulier aux critères suivants (de manière non exhaustive) :

• Mise à disposition de votre réalisation sur un repository accessible publiquement (tel que Github) ;
• Respects des contraintes formulées dans le présent document (aussi bien fonctionnelles que techniques) ;
• Gestion des différents contextes possible d’utilisation ainsi que des erreurs potentiellement rencontrées ;
• Organisation du code (en différentes couches applicatives, choix des abstractions et méthodes utilisées, …) ;
• Clarté du code (règle de nommages, commentaires, documentation minimale …) ;
• Originalité et élégance de votre réalisation.

Références

• [1] MetaMask Docs - Getting Started : https://docs.metamask.io/guide/getting-started.html#basic-considerations
• [2] Metamask - How to create an additional account in your wallet : https://metamask.zendesk.com/hc/en-us/articles/360015289452-How-to-create-an-additional-account-in-your-wallet
• [3] Alchemy’s Goerli FAUCET : https://goerlifaucet.com
• [4] Ethereum and Web3.js “Hello World”: Get the ETH Balance of an Ethereum Address :
• https://www.shawntabrizi.com/ethereum/ethereum-web3-js-hello-world-get-eth-balance-ethereum-address
• [5] Etherscan (mainnet) : https://etherscan.io
• [6] web3.js - Ethereum JavaScript API : https://web3js.readthedocs.io/en/v1.7.3
• [7] Ethers - Documentation : https://docs.ethers.io/v5