Skip to content

Commit ba55322

Browse files
docs: Add readme to core package (#201)
* [Docs] Add readme to core package * Make some tweaks to the `core` README Co-authored-by: Dhaiwat Pandya <dhaiwatpandya@gmail.com>
1 parent 5f2d593 commit ba55322

File tree

1 file changed

+79
-1
lines changed

1 file changed

+79
-1
lines changed

packages/core/README.md

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,81 @@
11
# @web3-ui/core
22

3-
To be populated.
3+
A set of React [components](#components) and [hooks](#hooks) made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.
4+
5+
This package is an opinionated combination of `@web3-ui/components` and `@web3-ui/hooks`.
6+
7+
```bash
8+
yarn add @web3-ui/core
9+
```
10+
11+
## Getting started
12+
13+
At the root of your React app, wrap your app in the `<Provider>` component:
14+
15+
```tsx
16+
// _app.tsx (or the root of your app)
17+
import { Provider, NETWORKS } from '@web3-ui/core';
18+
19+
function MyApp({ Component, pageProps }) {
20+
return (
21+
<Provider network={NETWORKS.rinkeby}>
22+
<Component {...pageProps} />
23+
</Provider>
24+
);
25+
}
26+
```
27+
28+
---
29+
30+
## Components
31+
32+
This is the list of components the package currently provides:
33+
34+
- [Provider](#provider)
35+
- [ConnectWallet](#connectwallet)
36+
37+
---
38+
39+
### Provider
40+
41+
The Provider component is a parent provider, wrapping the `ComponentsProvider` and the `HooksProvider`. You need to wrap this component around your entire App.
42+
43+
#### Usage
44+
45+
See [Getting Started](#getting-started) for an example.
46+
47+
---
48+
49+
### ConnectWallet
50+
51+
The `ConnectWallet` is a `Button` based component with the following behaviour:
52+
53+
When wallet is connected,
54+
55+
- shows user's address or ENS
56+
- on click, disconnects wallet
57+
58+
When wallet is not connected,
59+
60+
- allows the user to connect to their wallet via Metamask or WalletConnect
61+
62+
#### Usage
63+
64+
```tsx
65+
import { ConnectWallet } from '@web3-ui/core';
66+
67+
<ConnectWallet />;
68+
```
69+
70+
---
71+
72+
## Hooks
73+
74+
This package exports all the hooks provided by the [`@web3-ui/hooks` package](https://npmjs.com/package/@web3-ui/hooks).
75+
76+
```tsx
77+
// Example
78+
import { useWallet } from '@web3-ui/core';
79+
80+
const { connectWallet } = useWallet();
81+
```

0 commit comments

Comments
 (0)