RFC: web3-ui (a web3-specific UI library)

What

web3-ui will be a library made up of UI components specifically crafted for web3 use cases. Use cases include:

  • An input specifically designed to handle ETH wallet addresses with support for ENS domains.
  • An input that lets you input token amount in wei/ether and is compatible with contract calls.
  • A <Form /> ecosystem that play well with contract calls.
  • Connect wallet button and a general web3 wallet context that gives easy access to the connected wallet throughtout your app.
  • Toast notifications that notify the user about the tranasaction’s status.
  • Components for displaying NFTs in various forms including but not limited to images and music.
  • And more.

At the moment, a Github repo has been initialized with some basic set-up for a React package. Some people have shown interest in contributing to help in building this library for Vue and Angular, too. For the sake of creating a MVP, I propose working on a solution for React for now. Anyone who wants to work on that by themselves is more than welcome to do so, of course!


Why

Right now, there is no UI library that is crafted specifically for web3. Everyone has to craft their own internal solutions. Most of these internal solutions aren’t well-tested, well-documented or well-functioning. This is because most teams don’t have the resources to invest in crafting a complete solution of their own. This also introduces a massive barrier for entry for new devs.

This is not ideal. This is what web3-ui will try to solve.

A lot of people have shown interest in using or helping in building the library.


How

  1. A GitHub issue has been created to keep track of a list of components that we might be interested in creating. This issue has been pinned and will serve as the go-to place to share any ideas.
  2. I have created a component checklist to easily keep track of the work that is being done and needs to be done. I recommend keeping an eye out on this checklist if you want to contribute to the project and commenting on relevant issues to get assigned. Components will be added to this checklist from the discussion issue over time.
  3. Once someone is assigned, they are expected to take ownership of the development of that component from start to finish - including proposing a rough design, writing the functionality, writing sufficient tests and documenting the component properly. To set a standard for following components to follow, I will be working on this issue first, collect some feedback on the PR and get it merged.
  4. I also want to clarify that taking ownership of a component doesn’t mean that you cannot ask for help. Please feel free to ask for help in the #web3-ui-lib channel on Discord or tag me on your issue (@dhaiwat10).
  5. We will be releasing iterations of the packaging to npm as we go.
  6. During development, we will be looking to get builders from and outside of the DAO to use the library and collect their feedback and act upon it.

Please leave any feedback that you may have - good or bad. Excited to work on this project with y’all.

10 Likes

I wanted to add that having a design system could be a possibility in the future if the library gains some traction, but I think it would be overkill for now and will slow us down. For now, we can just build upon the defaults provided by Chakra.

1 Like

Hey Dhaiwat, I’ve mentioned this to myself so many times when having to create the same components over and over again or copy/pasting my components across projects. This is much needed IMO and I’ll definitely get involved. Good initiative!

2 Likes

Yo awesome stuff @dhaiwat10 one thing I want to suggest is to allow them to completely override the styling since they might prefer to use their own design system that fits their dApps.

1 Like

This is awesome, really digging it and will try to contribute as well.

Couple questions:

Do you envision this to be rather low-level and without default styling, similar to radix, or rather fully opinionated with options to theme/customize styles like e.g. web3modal?

Would you want to build upon something like web3-react, or rather implement that functionality from scratch?

Thanks for the comments @embiem @carlomigueldy.eth. Answering your questions:

  • I intend this to be a clean slate with just the functionality. Not something literally headless but just the default Chakra styles + ability to pass in any props you would be able to pass to a Chakra component, ideally. Although, I gotta admit that I don’t know how practical the complete Chakra compatibilty part is, but we’ll try.

  • Yes I do plan on re-using as much as I can!

2 Likes

Great idea. I’m curious, because I’m not that knowledgeable about the front end side, how will this differ from web3-react library or usedapp?

web3-react focuses on providing utilities for connecting your wallet, etc. It does not provide UI components like Buttons, Inputs, etc. That’s what we are trying to build here. :slight_smile:

Thank you for clarifying. This is definitely something the web3 community needs!

Just capturing this from our Discord chat: we can use a common open-source pattern by offering multiple, focused libraries under the same name. For example, @dev-dao/web3-ui for a component library and @dev-dao/web3-hooks for React hooks :+1:

2 Likes

I think it’s a great idea and believe there’s definitely room for more/alternative components.
Just for reference, there have been several earlier attempts at creating Web3 UI component libraries / design systems.

https://ui.aragon.org/
https://rimble.consensys.design/

And hooks / utils
https://example.usedapp.io/

4 Likes

@wslyvh thanks for sharing these

Check Ethereum Boilerplates · GitHub out as well

How to use this with react so I can display the users NFTs after the Metamask auth? Is there a tutorial on how to use his web3-ui and its features?