@thru/react-ui 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# @thru/react-ui
|
|
2
|
+
|
|
3
|
+
Headless-friendly React UI components built on top of `@thru/react-sdk`. These components provide polished wallet experiences that wire up to the shared Thru provider with zero additional state management.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @thru/react-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> Requires `@thru/react-sdk` and React 18+ as peer dependencies.
|
|
12
|
+
|
|
13
|
+
## Basic Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { ThruProvider } from '@thru/react-sdk';
|
|
17
|
+
import { ThruAccountSwitcher } from '@thru/react-ui';
|
|
18
|
+
|
|
19
|
+
function WalletBar() {
|
|
20
|
+
return (
|
|
21
|
+
<header style={{ display: 'flex', justifyContent: 'flex-end', padding: '1rem' }}>
|
|
22
|
+
<ThruAccountSwitcher />
|
|
23
|
+
</header>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export function App() {
|
|
28
|
+
return (
|
|
29
|
+
<ThruProvider
|
|
30
|
+
config={{
|
|
31
|
+
iframeUrl: 'https://thru-wallet.up.railway.app/embedded',
|
|
32
|
+
rpcUrl: 'https://grpc-web.alphanet.thruput.org',
|
|
33
|
+
}}
|
|
34
|
+
>
|
|
35
|
+
<WalletBar />
|
|
36
|
+
{/* rest of your app */}
|
|
37
|
+
</ThruProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
`ThruAccountSwitcher` automatically handles:
|
|
43
|
+
|
|
44
|
+
- Launching the wallet connect modal when the user clicks the button
|
|
45
|
+
- Showing connection progress and the active account address
|
|
46
|
+
- Listing connected accounts and updating the selection with `useAccounts()` and `useWallet()` under the hood
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thru/react-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@thru/react-sdk": "0.0.
|
|
15
|
-
"@thru/chain-interfaces": "0.0.
|
|
14
|
+
"@thru/react-sdk": "0.0.10",
|
|
15
|
+
"@thru/chain-interfaces": "0.0.10"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": "^18.0.0 || ^19.0.0",
|