Contenu
Au cours des dernières années, j'ai été profondément impliqué dans des projets blockchain, et React a souvent été ma bibliothèque de prédilection. React s'adapte bien à ces projets sur le plan architectural, surtout parce que de nombreuses applications blockchain partagent des schémas similaires comme l'envoi de transactions, la lecture des données des contrats intelligents et la synchronisation de l'interface utilisateur avec les informations on-chain. Bien que les bibliothèques web3 existantes aient été utiles, je me suis constamment retrouvé à réimplémenter les mêmes éléments de base pour chaque nouvelle dApp. Cela inclut des choses comme la saisie des requêtes et réponses, la gestion des clés de cache, la gestion du polling versus les abonnements, le changement de chaînes et la gestion des erreurs. Ce travail répétitif est vite devenu lassant, et je voulais vraiment une bibliothèque légère et flexible qui ne me lie pas à un fournisseur ou une pile SDK spécifique. C'est pourquoi j'ai créé Web3-Hooks.\n\nWeb3-Hooks est conçu comme une bibliothèque modulaire de hooks React axée sur le Web3 qui sépare clairement les préoccupations. Vous pouvez échanger librement les transports et fournisseurs — que ce soit Viem, Ethers, ou même une configuration JSON-RPC personnalisée — sans changer vos composants React. Cette séparation permet à votre base de code de s'étendre sans coupler les composants à un SDK blockchain particulier. L'idée principale est de vous libérer des solutions groupées qui combinent connecteurs de portefeuille, couches de transport et gestion d'état React en un seul. Ces bibliothèques tout-en-un sont bien quand vous voulez une solution complète, mais elles peuvent causer des problèmes si votre équipe doit mixer différents fournisseurs RPC comme Alchemy, Infura ou des nœuds auto-hébergés, ajouter des middlewares pour les retries ou le tracing, ou prévoir de supporter des blockchains non-EVM.\n\nLa prévisibilité et la sécurité des types sont d'autres objectifs clés. Pour les lectures dans les dApps, TanStack Query (anciennement React Query) est parfait car il gère les clés de cache, les politiques de données obsolètes, la prise en compte du rendu côté serveur et la déduplication pour éviter les appels réseau inutiles. Web3-Hooks maintient un typage fort de bout en bout — des requêtes JSON-RPC aux signatures et réponses des hooks — ce qui aide à éviter les problèmes avec des données hex inconnues ou des incompatibilités, surtout avec BigInt et les formats préfixés 0x.\n\nArchitecturalement, Web3-Hooks est composé de trois couches : le cœur, l'adaptateur et la couche React. La couche cœur (@web3-hooks/core) est agnostique au framework et définit simplement l'interface Web3Client, les formes de requêtes/réponses et les utilitaires pour des clés de requête déterministes. Elle ne s'intéresse pas à React ni aux détails du transport — juste au protocole de communication avec la blockchain. Ensuite, il y a l'adaptateur EVM (@web3-hooks/adapter-evm-viem), qui connecte le cœur aux clients Viem et normalise les formats de données tout en fournissant des actions spécifiques à l'EVM comme récupérer l'ID de chaîne ou les soldes. Vous pouvez échanger cet adaptateur pour d'autres, par exemple pour Ethers ou Solana, sans toucher à votre code React. Enfin, la couche React (@web3-hooks/react) fournit des hooks React comme useBlockNumber et useBalance, ainsi qu'un Web3Provider qui injecte votre client dans le contexte React. Elle utilise TanStack Query en interne pour gérer le cache, le refetching et les mises à jour optimistes de l'UI.\n\nLes principes de conception mettent l'accent sur des interfaces petites et ciblées, des clés de cache prévisibles et stables, aucune hypothèse sur l'UI (vous laissant choisir votre propre système de design), et des échappatoires où vous pouvez descendre aux appels RPC bruts si nécessaire. Le démarrage est simple, surtout pour les chaînes EVM, avec un bundle préconfiguré qui connecte tout. Sous le capot, les hooks construisent des clés de requête stables et utilisent React Query pour gérer le cache et la déduplication. Les requêtes passent par l'adaptateur vers la blockchain via HTTP ou WebSocket, les réponses sont normalisées, et React Query gère le refetching selon les temps d'obsolescence ou la visibilité.\n\nWeb3-Hooks s'inscrit dans l'écosystème aux côtés d'outils comme Viem (une boîte à outils EVM typée moderne qu'il utilise actuellement), Ethers.js (bibliothèque EVM classique pouvant être ajoutée via des adaptateurs), wagmi (une bibliothèque React EVM plus riche en fonctionnalités avec connecteurs intégrés), The Graph (pour les données indexées/historiques) et TypeChain (pour générer des typings TypeScript pour les ABI de contrats). Alors que wagmi offre une solution complète, Web3-Hooks séduit ceux qui veulent plus de flexibilité et un contrôle fin sur les transports et adaptateurs. Il se concentre sur les appels RPC en direct plutôt que sur des analyses ou indexations plus riches.\n\nDans l'ensemble, Web3-Hooks vise à simplifier la création de dApps avec React en fournissant un ensemble modulaire, typé et agnostique aux adaptateurs de hooks qui réduisent le code répétitif et améliorent la scalabilité de la base de code. Il combine le meilleur des clients EVM typés, du cache React Query et d'une séparation claire des préoccupations pour offrir aux développeurs du contrôle sans sacrifier la commodité ni la performance.
