Skip to content

Commit a04a954

Browse files
sainthiagosainthiago
committed
Enhance wallet integration by adding new wallet types and customizable options
- Added support for new wallets: hot-wallet, intear-wallet, and okx-wallet in package.json and pnpm-lock.yaml. - Updated README.md to reflect new customizable wallet selection approach and properties. - Introduced WALLET_CUSTOMIZATION.md for detailed wallet customization guidance. - Refactored wallet handling in BitteWalletContext to support new wallet configuration. - Created wallet-registry.ts to manage wallet setup functions and configurations.
1 parent 562b798 commit a04a954

File tree

8 files changed

+977
-37
lines changed

8 files changed

+977
-37
lines changed

‎README.md‎

Lines changed: 74 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,94 @@ pnpm install @near-wallet-selector/modal-ui
4444
the default way of interacting with Bitte Wallet is using the BitteWalletContextProvider
4545

4646

47-
## properties:
47+
## Properties:
4848

49-
**network** : ` mainnet | testnet`
49+
### Core Properties
50+
**network** : `mainnet | testnet` - NEAR network to connect to
5051

51-
**additionalWallets** : `WalletModuleFactory[] extra wallets setup`
52+
**contractAddress** : `string` - Contract address for the wallet modal
53+
54+
### New Customizable Wallet Selection (Recommended)
55+
**wallets** : `SupportedWalletType[]` - Array of wallet keywords you want to include
56+
57+
**walletOptions** : `Record<SupportedWalletType, WalletSetupOptions>` - Configuration options for each wallet
58+
59+
### Legacy Properties (Deprecated)
60+
**additionalWallets** : `WalletModuleFactory[]` - Extra wallets setup
61+
62+
**onlyBitteWallet** : `boolean` - Only show Bitte wallet
63+
64+
**walletUrl** : `string` - Custom Bitte wallet URL
65+
66+
## Basic Usage
67+
68+
### New Customizable Approach (Recommended)
69+
70+
```typescript
71+
import "@near-wallet-selector/modal-ui/styles.css";
72+
import { BitteWalletContextProvider, SupportedWalletType } from '@bitte-ai/react'
73+
74+
// Choose exactly which wallets you want
75+
const wallets: SupportedWalletType[] = ["bitte", "intear", "meteor", "okx", "hot"];
76+
77+
<BitteWalletContextProvider
78+
network="mainnet"
79+
wallets={wallets}
80+
>
81+
<Component {...pageProps} />
82+
</BitteWalletContextProvider>
83+
```
84+
85+
### Legacy Usage (Still Supported)
5286

5387
```typescript
5488
import "@near-wallet-selector/modal-ui/styles.css";
55-
import { BitteWalletContextProvider } from '@bitte-ai/react'
89+
import { BitteWalletContextProvider } from '@bitte-ai/react'
5690

5791
<BitteWalletContextProvider
5892
network="mainnet"
5993
>
6094
<Component {...pageProps} />
6195
</BitteWalletContextProvider>
96+
```
97+
98+
## Supported Wallets
99+
100+
- `"bitte"` - Bitte Wallet
101+
- `"meteor"` - Meteor Wallet
102+
- `"here"` - HERE Wallet
103+
- `"mynear"` - MyNearWallet
104+
- `"intear"` - Intear Wallet
105+
- `"okx"` - OKX Wallet
106+
- `"hot"` - HOT Wallet
107+
108+
## Examples
109+
110+
### Only Bitte Wallet
111+
```typescript
112+
<BitteWalletContextProvider
113+
network="mainnet"
114+
wallets={["bitte"]}
115+
>
116+
<YourApp />
117+
</BitteWalletContextProvider>
118+
```
62119

120+
### Multiple Wallets with Options
121+
```typescript
122+
<BitteWalletContextProvider
123+
network="mainnet"
124+
wallets={["bitte", "meteor", "intear", "okx", "hot"]}
125+
walletOptions={{
126+
bitte: { walletUrl: "https://custom.wallet.url" }
127+
}}
128+
>
129+
<YourApp />
130+
</BitteWalletContextProvider>
63131
```
64132

133+
For more detailed examples and migration guide, see [WALLET_CUSTOMIZATION.md](./WALLET_CUSTOMIZATION.md).
134+
65135
# Troubleshooting
66136
The wallet runs only on client-side.
67137

‎WALLET_CUSTOMIZATION.md‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# Wallet Customization Guide
2+
3+
This guide shows how to use the new customizable wallet system in `@bitte-ai/react`.
4+
5+
## Overview
6+
7+
The new system allows you to specify exactly which wallets you want to include by passing an array of wallet keywords to the `wallets` prop. This gives you full control over which wallets are available to your users.
8+
9+
## Supported Wallet Types
10+
11+
| Keyword | Wallet Name | Description |
12+
|---------|-------------|-------------|
13+
| `"bitte"` | Bitte Wallet | The Bitte AI wallet |
14+
| `"meteor"` | Meteor Wallet | Popular NEAR wallet |
15+
| `"here"` | HERE Wallet | Mobile-first NEAR wallet |
16+
| `"mynear"` | MyNearWallet | Official NEAR wallet |
17+
| `"intear"` | Intear Wallet | Intear wallet for NEAR |
18+
| `"okx"` | OKX Wallet | OKX exchange wallet for NEAR |
19+
| `"hot"` | HOT Wallet | HOT wallet for NEAR |
20+
21+
## Basic Usage
22+
23+
### New Customizable Approach
24+
25+
```tsx
26+
import { BitteWalletContextProvider, SupportedWalletType } from "@bitte-ai/react";
27+
28+
function App() {
29+
// Only include Bitte, Intear, and OKX wallets
30+
const wallets: SupportedWalletType[] = ["bitte", "intear", "okx"];
31+
32+
return (
33+
<BitteWalletContextProvider
34+
network="mainnet"
35+
wallets={wallets}
36+
>
37+
<YourAppContent />
38+
</BitteWalletContextProvider>
39+
);
40+
}
41+
```
42+
43+
### With Wallet-Specific Options
44+
45+
```tsx
46+
import {
47+
BitteWalletContextProvider,
48+
SupportedWalletType,
49+
WalletSetupOptions
50+
} from "@bitte-ai/react";
51+
52+
function App() {
53+
const wallets: SupportedWalletType[] = ["bitte", "meteor", "intear", "okx", "hot"];
54+
55+
const walletOptions = {
56+
bitte: {
57+
walletUrl: "https://custom-wallet.bitte.ai"
58+
},
59+
// Other wallets will use their default options
60+
};
61+
62+
return (
63+
<BitteWalletContextProvider
64+
network="mainnet"
65+
wallets={wallets}
66+
walletOptions={walletOptions}
67+
>
68+
<YourAppContent />
69+
</BitteWalletContextProvider>
70+
);
71+
}
72+
```
73+
74+
## Common Use Cases
75+
76+
### Only Bitte Wallet
77+
```tsx
78+
<BitteWalletContextProvider
79+
network="mainnet"
80+
wallets={["bitte"]}
81+
>
82+
<YourApp />
83+
</BitteWalletContextProvider>
84+
```
85+
86+
### All Available Wallets
87+
```tsx
88+
<BitteWalletContextProvider
89+
network="mainnet"
90+
wallets={["bitte", "meteor", "here", "mynear", "intear", "okx", "hot"]}
91+
>
92+
<YourApp />
93+
</BitteWalletContextProvider>
94+
```
95+
96+
### Mobile-Focused Setup
97+
```tsx
98+
<BitteWalletContextProvider
99+
network="mainnet"
100+
wallets={["here", "meteor", "bitte", "hot"]}
101+
>
102+
<YourApp />
103+
</BitteWalletContextProvider>
104+
```
105+
106+
### DeFi/Trading Apps
107+
```tsx
108+
<BitteWalletContextProvider
109+
network="mainnet"
110+
wallets={["meteor", "mynear", "bitte", "okx"]}
111+
>
112+
<YourApp />
113+
</BitteWalletContextProvider>
114+
```
115+
116+
### Exchange-Focused Setup
117+
```tsx
118+
<BitteWalletContextProvider
119+
network="mainnet"
120+
wallets={["okx", "meteor", "bitte"]}
121+
>
122+
<YourApp />
123+
</BitteWalletContextProvider>
124+
```
125+
126+
## Backward Compatibility
127+
128+
The package still supports the legacy props for backward compatibility:
129+
130+
```tsx
131+
// Legacy approach (still works)
132+
<BitteWalletContextProvider
133+
network="mainnet"
134+
onlyBitteWallet={true}
135+
walletUrl="https://wallet.bitte.ai"
136+
>
137+
<YourApp />
138+
</BitteWalletContextProvider>
139+
```
140+
141+
However, we recommend migrating to the new `wallets` prop:
142+
143+
```tsx
144+
// New approach (recommended)
145+
<BitteWalletContextProvider
146+
network="mainnet"
147+
wallets={["bitte"]}
148+
walletOptions={{
149+
bitte: { walletUrl: "https://wallet.bitte.ai" }
150+
}}
151+
>
152+
<YourApp />
153+
</BitteWalletContextProvider>
154+
```
155+
156+
## Migration Guide
157+
158+
### From `onlyBitteWallet={true}`
159+
```tsx
160+
// Old
161+
<BitteWalletContextProvider onlyBitteWallet={true} />
162+
163+
// New
164+
<BitteWalletContextProvider wallets={["bitte"]} />
165+
```
166+
167+
### From Default (All Wallets)
168+
```tsx
169+
// Old
170+
<BitteWalletContextProvider network="mainnet" />
171+
172+
// New - specify exactly which wallets you want
173+
<BitteWalletContextProvider
174+
network="mainnet"
175+
wallets={["meteor", "mynear", "here", "intear", "okx", "hot"]}
176+
/>
177+
```
178+
179+
### With Additional Wallets
180+
```tsx
181+
// Old
182+
<BitteWalletContextProvider
183+
additionalWallets={[customWallet()]}
184+
/>
185+
186+
// New - use the wallets prop and include custom wallets separately if needed
187+
<BitteWalletContextProvider
188+
wallets={["bitte", "meteor", "okx"]}
189+
additionalWallets={[customWallet()]} // Still supported
190+
/>
191+
```
192+
193+
## Error Handling
194+
195+
The system will throw an error if you specify an unsupported wallet type:
196+
197+
```tsx
198+
// This will throw an error
199+
<BitteWalletContextProvider
200+
wallets={["bitte", "unsupported-wallet"]} // ❌ Error!
201+
/>
202+
```
203+
204+
## TypeScript Support
205+
206+
The package provides full TypeScript support with autocomplete for wallet types:
207+
208+
```tsx
209+
import { SupportedWalletType } from "@bitte-ai/react";
210+
211+
const wallets: SupportedWalletType[] = ["bitte", "intear", "okx", "hot"]; // ✅ Autocomplete works
212+
```
213+
214+
## Performance Considerations
215+
216+
- Only the wallets you specify will be loaded, reducing bundle size
217+
- Each wallet adds approximately 50-150kb to your bundle
218+
- Choose only the wallets your users actually need
219+
220+
## Testing
221+
222+
You can easily test different wallet configurations:
223+
224+
```tsx
225+
// Test with single wallet
226+
const testWallets = process.env.NODE_ENV === 'test'
227+
? ["bitte"]
228+
: ["bitte", "meteor", "intear", "okx", "hot"];
229+
230+
<BitteWalletContextProvider wallets={testWallets} />
231+
```

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,12 @@
4949
"@bitte-ai/wallet": "0.8.2",
5050
"@near-wallet-selector/core": "^9.5.1",
5151
"@near-wallet-selector/here-wallet": "^9.5.1",
52+
"@near-wallet-selector/hot-wallet": "^9.5.1",
53+
"@near-wallet-selector/intear-wallet": "^9.0.2",
5254
"@near-wallet-selector/meteor-wallet": "^9.5.1",
5355
"@near-wallet-selector/modal-ui": "^9.5.1",
5456
"@near-wallet-selector/my-near-wallet": "^9.5.1",
57+
"@near-wallet-selector/okx-wallet": "^9.5.1",
5558
"buffer": "^6.0.3",
5659
"react": "^19.1.1",
5760
"react-dom": "^19.1.1"

0 commit comments

Comments
 (0)