web3-ui

Welcome one and all to another fantastic installment of DevNTell. For those of you who don't know what DevNTell is, it is basically an initiative to allow people of the DAO to have a platform to be able to present all the cool projects or topics they're passionate about in a 30-minute window. Allowing people to have a glimpse into all the cool stuff you're working on as well as to ask questions. So, very pleased to hand over the mic to our very own Dhaiwat. Take it away, Dhaiwat.

Thanks, Narb. Hey everyone, first of all, thanks for being here. I really appreciate it. A few weeks ago, I created this RFC about a web3-specific UI library which would basically handle web3-specific use cases. I got the inspiration for this project from Scaffold-ETH. Scaffold-ETH is basically a template that lets you get up and running with an Ethereum project, but unfortunately, it is also extremely bloated and the UI components aren't typed; they are written in JavaScript, and the documentation around it isn't that great. That's the biggest reason why I thought of creating something from scratch. We are starting from scratch in terms of code, but we are taking a lot of inspiration from these projects.

I'm just going to share my screen now. Initially, web3-ui was just meant to be a set of UI components, but eventually, we decided to create three packages: one containing the UI components, one containing some hooks, and a third package called 'core' which would be a combination of these two. This is the Storybook of the project. We have five to ten working parts right now and a lot of things planned for the future.

The first thing we created was something that displays an Ethereum address. If you pass an Ethereum address to this component, it will try to resolve the ENS related to that address. Then we have an AddressInput component, which is extremely common in Ethereum applications. We also have a component that displays an NFT. You just provide it with a contract address and the token ID, and it will render the NFT for you, supporting gifs, videos, and audio. We also have an NFT gallery component which shows all the NFTs owned by someone.

Then we have some hooks. These hooks are really similar to what you'll see in 'usedapp', but we have tweaked them a little. We created this hooks package because we want a specific API. We have this 'useContract' hook which basically lets you interact with a contract. It's an extremely basic hook; you just pass in an address and an ABI.

The USP of this project is the core package. If I open up the Story for this, you'll see that all you need to basically log someone in using their wallet is two lines of code. You specify the network that you want and you place this 'ConnectWallet' component here, and that's it. Under the hood, this is using our hooks package, and you can get info about the connection from anywhere inside your app using this hook. We are also working on a hook for contract functions to handle transaction states, error states, and loading states.

This, in my opinion, is so much easier than writing hundreds of lines of code just to get someone to sign in using MetaMask. This is super early days for this project, and almost 20 people have been working on this. I'm super excited for the future of it.

This is fantastic, Dhaiwat. One question I have for you is: is it only limited to Ethereum, or are there plans to extend this to say, a Solana wallet?

Great question. I would love to make this chain agnostic, but for now, I guess it's a good idea to validate this idea by creating this specifically for Ethereum and React so that we can see if this is actually useful.

Perfect. And are you and the team hosting your own Infura account to be able to connect to the mainnet, or are you allowing people to pass in their own API keys?

We are letting them pass in Infura keys; they are optional. Also, the UI library components are based off of Chakra UI. You can basically pass any props that you can pass to a Chakra component, so you can apply your existing Chakra themes.

That's great stuff. Does anybody else have any questions for Dhaiwat and the team? I've used Scaffold-ETH a bunch in the past and I totally agree it's really bloated, so I think that's a great goal to make this a lightweight library. Congrats on everything.

I want to ask if someone wants to contribute and help you build web3-ui, where can they start?

I'd say you can start by dropping a message in the web3-ui channel in the Dev Guild. Then you can have a look at the open issues on the repo. We are just upgrading our documentation as we go.

What's been something you found surprising or challenging about this project?

I would say the biggest challenge is having a concrete roadmap ahead of us while we are trying to discover what we are actually trying to build. This space is so early, there's not a lot of well-maintained packages like in Web2. The roadmap is constantly changing, so that's getting a bit hard to keep up.

It's always a challenge navigate such an ambitious project. One question for me is: is the library ready for consumption now?

I would say in its current state, it's extremely unstable because things are working, but you should expect to see some weird errors. If you're planning to use it on anything serious, I would say you wait for v1. But if anyone wants to experiment and play around with it, I would more than welcome any feedback.

Yes, for sure. We're coming up on time. If there are no further questions, you can always reach out to Dhaiwat and team in the web3-ui Dev Guild channel or on GitHub. The next scheduled DevNTell will be on January 6th. Happy holidays and Happy New Year to everybody!