~/work/web3-ui.vercel.appOpen-source contributor

Developer DAO web3-ui

24 / 27

Project · 24 / 27

Developer DAO web3-ui — React UI library for Web3

Open-source contributor

Developer DAO's open-source React UI library for Web3 — a Chakra-themed set of components and hooks (wallet connect, ENS-aware address rendering, NFT cards and galleries, ERC-20 token balances, contract read/write hooks) so Web3 frontends don't re-derive the same five or six surfaces per hackathon. MIT-licensed, ~780 GitHub stars, 40 named contributors, shipped as @web3-ui/components and (deprecated) @web3-ui/core / @web3-ui/hooks on npm. Storybook gallery lives at web3-ui.vercel.app.

Impact

Raised the type-safety floor of the @web3-ui/hooks API — introduced a generic type argument on the contract write hook so consumers can pair the library with typechain-generated contract types and call contract methods with full IDE autocomplete and compile-time checking instead of falling back to any at the boundary. Credited in the project's all-contributors ledger for Code and Documentation.

Outcomes

  • Introduced a generic type argument on useWriteContract / useContract so consumers can pair the wallet and contract hooks with typechain-generated contract types — the hook returns a typed contract instance instead of any.
  • Authored the companion README walkthrough that teaches the typechain pairing end-to-end (postinstall codegen, ABI directory layout, generated type imports, generic usage at the call site) so a reader has a working blueprint and not just an API surface.
  • Kept the change backwards-compatible — the generic is optional, so every consumer already in production kept working without modification.
  • Recognised in the project's all-contributors ledger for both Code and Documentation, alongside ~40 named contributors on Developer DAO's longest-running shared engineering artifact.

Gallery

GitHub repository card for Developer-DAO/web3-ui
The open-source web3-ui library. via GitHub — Developer-DAO/web3-ui

Stack

  • TypeScript
  • React
  • Chakra UI
  • ethers.js
  • wagmi
  • typechain
  • Storybook
  • Preconstruct
  • Turborepo
  • Changesets

Coverage & write-ups