@wangjinbao/wallet-connect 0.1.3 → 0.1.4
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 +10 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @wangjinbao/wallet-connect
|
|
2
2
|
|
|
3
3
|
A React + TypeScript wallet connection library supporting MetaMask, OKX Wallet, Phantom, and Coinbase Wallet.
|
|
4
4
|
|
|
@@ -22,7 +22,7 @@ A React + TypeScript wallet connection library supporting MetaMask, OKX Wallet,
|
|
|
22
22
|
## Installation
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
npm install @
|
|
25
|
+
npm install @wangjinbao/wallet-connect
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## Quick Start
|
|
@@ -32,14 +32,13 @@ npm install @wjb/wallet-connect
|
|
|
32
32
|
Import the component styles in your app's entry point:
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
|
-
import "@
|
|
35
|
+
import "@wangjinbao/wallet-connect/styles.css";
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
### 2. Wrap Your App with WalletProvider
|
|
39
39
|
|
|
40
40
|
```tsx
|
|
41
|
-
import { WalletProvider } from "@
|
|
42
|
-
import { mainnet, sepolia } from "@wjb/wallet-connect";
|
|
41
|
+
import { WalletProvider, mainnet, sepolia } from "@wangjinbao/wallet-connect";
|
|
43
42
|
|
|
44
43
|
function App() {
|
|
45
44
|
return (
|
|
@@ -58,7 +57,7 @@ function App() {
|
|
|
58
57
|
### 3. Use the ConnectButton Component
|
|
59
58
|
|
|
60
59
|
```tsx
|
|
61
|
-
import { ConnectButton } from "@
|
|
60
|
+
import { ConnectButton } from "@wangjinbao/wallet-connect";
|
|
62
61
|
|
|
63
62
|
function YourApp() {
|
|
64
63
|
return (
|
|
@@ -72,7 +71,7 @@ function YourApp() {
|
|
|
72
71
|
### 4. Access Wallet State
|
|
73
72
|
|
|
74
73
|
```tsx
|
|
75
|
-
import { useWallet } from "@
|
|
74
|
+
import { useWallet } from "@wangjinbao/wallet-connect";
|
|
76
75
|
|
|
77
76
|
function MyComponent() {
|
|
78
77
|
const { state, switchChain } = useWallet();
|
|
@@ -134,7 +133,7 @@ Hook to access wallet context.
|
|
|
134
133
|
## Custom Chain Configuration
|
|
135
134
|
|
|
136
135
|
```typescript
|
|
137
|
-
import { Chain } from "@
|
|
136
|
+
import { Chain } from "@wangjinbao/wallet-connect";
|
|
138
137
|
|
|
139
138
|
const myCustomChain: Chain = {
|
|
140
139
|
chainId: "0x89", // Polygon
|
|
@@ -154,7 +153,7 @@ const myCustomChain: Chain = {
|
|
|
154
153
|
### Direct Wallet Access
|
|
155
154
|
|
|
156
155
|
```typescript
|
|
157
|
-
import { MetaMaskWallet } from "@
|
|
156
|
+
import { MetaMaskWallet } from "@wangjinbao/wallet-connect";
|
|
158
157
|
|
|
159
158
|
const wallet = new MetaMaskWallet();
|
|
160
159
|
|
|
@@ -166,7 +165,7 @@ if (wallet.isInstalled()) {
|
|
|
166
165
|
|
|
167
166
|
### Custom Styling
|
|
168
167
|
|
|
169
|
-
The library uses TailwindCSS for styling. All classes are prefixed with `
|
|
168
|
+
The library uses TailwindCSS for styling. All classes are prefixed with `wangjinbao-` to avoid conflicts. You can override styles by targeting these classes in your CSS.
|
|
170
169
|
|
|
171
170
|
## TypeScript
|
|
172
171
|
|
|
@@ -179,7 +178,7 @@ import type {
|
|
|
179
178
|
WalletState,
|
|
180
179
|
WalletContextValue,
|
|
181
180
|
EthereumProvider,
|
|
182
|
-
} from "@
|
|
181
|
+
} from "@wangjinbao/wallet-connect";
|
|
183
182
|
```
|
|
184
183
|
|
|
185
184
|
## License
|
package/package.json
CHANGED