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
- 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.
- 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.
- 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.
- 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).
- We will be releasing iterations of the packaging to npm as we go.
- 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.