Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Developer-DAO/web3-ui
A React UI library for Web3
https://github.com/Developer-DAO/web3-ui
hooks react ui-components web3 web3-ui
Last synced: 3 months ago
JSON representation
A React UI library for Web3
- Host: GitHub
- URL: https://github.com/Developer-DAO/web3-ui
- Owner: Developer-DAO
- License: mit
- Created: 2021-11-22T16:48:16.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-08T02:41:38.000Z (almost 2 years ago)
- Last Synced: 2024-07-19T21:16:17.009Z (4 months ago)
- Topics: hooks, react, ui-components, web3, web3-ui
- Language: TypeScript
- Homepage: https://web3-ui.vercel.app/
- Size: 4.12 MB
- Stars: 761
- Watchers: 26
- Forks: 157
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- Blockchain-Development-Resources - Web3-ui
README
# web3-ui
[](#contributors-)
_In Development - Refactoring in Progress 🏗️_
A library of UI components specifically crafted for web3 use cases.
| Package name | Current version |
| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| [(Deprecated) `@web3-ui/core`](https://github.com/Developer-DAO/web3-ui/tree/main/packages/core) | [](https://badge.fury.io/js/@web3-ui%2Fcore) |
| [`@web3-ui/components`](https://github.com/Developer-DAO/web3-ui/tree/main/packages/components) | [](https://badge.fury.io/js/@web3-ui%2Fcomponents) |
| [(Deprecated) `@web3-ui/hooks`](https://github.com/Developer-DAO/web3-ui/tree/main/packages/hooks) | [](https://badge.fury.io/js/@web3-ui%2Fhooks) |
## Quick start
### Note: This is for the current public release. This library is being refactored and instructions will change.
1. Install the package
```bash
$ yarn add @web3-ui/core ethers
```
2. Setup the Provider
```tsx
import { Provider, NETWORKS } from '@web3-ui/core';
function MyApp({ Component, pageProps }) {
return (
);
}
```
3. Use the components and hooks
```tsx
import { ConnectWallet, useWallet } from '@web3-ui/core';
function Home() {
const { connection } = useWallet();
return (
{connection.ens || connection.userAddress}
);
}
```
## Roadmap
Please see the [Roadmap](/contributing/ROADMAP.md) for more details
## How to Contribute
Read the [CONTRIBUTING GUIDELINES](/CONTRIBUTING.md).
## The motive behind this package
- [RFC: web3-ui (a web3-specific UI library)](https://forum.developerdao.com/t/rfc-web3-ui-a-web3-specific-ui-library/565)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Erik Ritter
💻 👀
Camila Rondinini
💻 👀
Dhaiwat Pandya
💻 👀
Nazeeh Vahora
💻 📖
Jose L. Velez
📖 💻
with-heart
👀 💻
Christian
💻
Alex
💻
Sam Wellander
📖
Todor Tsankov
💻
Jovi De Croock
💻
Bonhomme
💻
hone1er
💻
Emanuel López
💻
Greg Syme
💻
Casuneanu Catalin
💻
Jake Warren
💻
Carlo Miguel Dy
💻 📖
Akshata Mohanty
📖
Ibby E
💻
Sweta Shaw
💻
Snehit Paunikar
📖
Nathan Ng
💻
manny
💻
fangjun
📖
Julian Krispel-Samsel
📖
Ikko Ashimine
📖
Leonardo Berteotti
💻
Patrick Aljord
💻
Shamoil Arsiwala
💻
Ernesto García
💻
David
💻
Eric Roupe
💻
Ricardo Seromenho
💻
James Charlesworth
💻
Diego Alzate
💻
Andrii Shupta
💻
meowy
💻
Rémi Roycourt
💻
Ajinkya Shinde
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## Special thanks
This project would not have been possible without these wonderful projects:
- [ethers](https://github.com/ethers-io/ethers.js/)
- [scaffold-eth](https://github.com/scaffold-eth/scaffold-eth)
- [Chakra UI](https://github.com/chakra-ui/chakra-ui)
- [web3modal](https://github.com/web3modal/web3modal)
- [useDApp](https://github.com/EthWorks/useDapp)
- [wagmi](https://github.com/tmm/wagmi)
- [Storybook](https://github.com/storybookjs/storybook)
- [Preconstruct](https://github.com/preconstruct/preconstruct)