Skip to content

Commit 294b1e7

Browse files
sainthiagosainthiago
committed
Enhance wallet support and documentation
- Added support for Intear Wallet and OKX Wallet in package.json and pnpm-lock.yaml. - Updated README.md to include wallet selection feature and list of available wallets. - Modified BitteWalletContext to support enabledWallets prop for customizable wallet selection. - Improved type definitions and added helper functions for wallet module management.
1 parent 562b798 commit 294b1e7

File tree

6 files changed

+336
-65
lines changed

6 files changed

+336
-65
lines changed

‎README.md‎

Lines changed: 165 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,217 @@
11
# @bitte-ai/react
22

3-
This package contains React helpers for interacting with Bitte Wallet.
3+
This package contains React helpers for interacting with Bitte Wallet and other NEAR wallets.
44

55
<p align="center">
66

77
<img src='https://img.shields.io/npm/dw/@bitte-ai/react' />
88

99
</p>
1010

11-
1211
## Summary
1312

14-
- [Installing](#Installing)
15-
16-
- [BitteWalletContextProvider (default)](#bittewalletcontextprovider) : The default Bitte Wallet provider
17-
13+
- [Installing](#installing)
14+
- [Wallet Selection](#wallet-selection)
15+
- [BitteWalletContextProvider](#bittewalletcontextprovider)
16+
- [Available Wallets](#available-wallets)
17+
- [Usage Examples](#usage-examples)
18+
- [Legacy API](#legacy-api)
19+
- [Troubleshooting](#troubleshooting)
1820

1921
# Installing
2022

2123
### NPM:
2224

23-
```
25+
```bash
2426
npm install @bitte-ai/react
2527
npm install @near-wallet-selector/modal-ui
2628
```
2729

2830
### Yarn:
2931

30-
```
32+
```bash
3133
yarn add @bitte-ai/react
3234
yarn add @near-wallet-selector/modal-ui
3335
```
3436

3537
### PNPM:
3638

37-
```
39+
```bash
3840
pnpm install @bitte-ai/react
3941
pnpm install @near-wallet-selector/modal-ui
4042
```
4143

44+
# Wallet Selection
45+
46+
You can now easily choose which wallets to display by using the `enabledWallets` prop. This gives developers full control over the wallet selection experience.
47+
48+
## Available Wallets
49+
50+
The following wallets are supported:
51+
52+
- `"intear"` - Intear Wallet
53+
- `"hot"` - Here Wallet (formerly HOT Wallet)
54+
- `"okx"` - OKX Wallet
55+
- `"bitte"` - Bitte Wallet
56+
- `"meteor"` - Meteor Wallet
57+
- `"mynear"` - MyNEAR Wallet
58+
4259
# BitteWalletContextProvider
4360

44-
the default way of interacting with Bitte Wallet is using the BitteWalletContextProvider
61+
The default way of interacting with Bitte Wallet is using the BitteWalletContextProvider.
62+
63+
## Properties:
64+
65+
**network**: `"mainnet" | "testnet"` - The NEAR network to connect to
66+
67+
**enabledWallets**: `WalletName[]` - Array of wallet names to display (recommended)
68+
69+
**additionalWallets**: `WalletModuleFactory[]` - Extra wallets setup
70+
71+
**contractAddress**: `string` - Contract address for wallet connection
4572

73+
**onlyBitteWallet**: `boolean` - Legacy prop to show only Bitte Wallet
4674

47-
## properties:
75+
**walletUrl**: `string` - Custom Bitte Wallet URL
4876

49-
**network** : ` mainnet | testnet`
77+
# Usage Examples
5078

51-
**additionalWallets** : `WalletModuleFactory[] extra wallets setup`
79+
## Basic Wallet Selection (Recommended)
5280

5381
```typescript
5482
import "@near-wallet-selector/modal-ui/styles.css";
55-
import { BitteWalletContextProvider } from '@bitte-ai/react'
83+
import { BitteWalletContextProvider, useBitteWallet, WalletName } from '@bitte-ai/react';
84+
85+
// Select only the wallets you want to show
86+
const enabledWallets: WalletName[] = ['intear', 'hot', 'okx', 'bitte'];
87+
88+
function MyApp() {
89+
return (
90+
<BitteWalletContextProvider
91+
network="mainnet"
92+
enabledWallets={enabledWallets}
93+
contractAddress="your-contract.near"
94+
>
95+
<WalletConnector />
96+
</BitteWalletContextProvider>
97+
);
98+
}
99+
100+
function WalletConnector() {
101+
const { connect, disconnect, isConnected, accounts } = useBitteWallet();
102+
103+
return (
104+
<div>
105+
{!isConnected ? (
106+
<button onClick={connect}>Connect Wallet</button>
107+
) : (
108+
<div>
109+
<p>Connected: {accounts[0]?.accountId}</p>
110+
<button onClick={disconnect}>Disconnect</button>
111+
</div>
112+
)}
113+
</div>
114+
);
115+
}
116+
```
117+
118+
## All Available Wallets
119+
120+
```typescript
121+
const allWallets: WalletName[] = ['intear', 'hot', 'okx', 'bitte', 'meteor', 'mynear'];
122+
123+
<BitteWalletContextProvider
124+
network="mainnet"
125+
enabledWallets={allWallets}
126+
contractAddress="your-contract.near"
127+
>
128+
<App />
129+
</BitteWalletContextProvider>
130+
```
131+
132+
## Only Specific Wallets
133+
134+
```typescript
135+
// Only show Bitte and Intear wallets
136+
const selectedWallets: WalletName[] = ['bitte', 'intear'];
137+
138+
<BitteWalletContextProvider
139+
network="testnet"
140+
enabledWallets={selectedWallets}
141+
contractAddress="your-contract.testnet"
142+
>
143+
<App />
144+
</BitteWalletContextProvider>
145+
```
146+
147+
## Combining with Additional Wallets
148+
149+
```typescript
150+
import { setupCustomWallet } from 'custom-wallet';
151+
152+
const myWallets: WalletName[] = ['bitte', 'intear', 'meteor'];
56153

57154
<BitteWalletContextProvider
58155
network="mainnet"
156+
enabledWallets={myWallets}
157+
additionalWallets={[setupCustomWallet()]}
158+
contractAddress="your-contract.near"
159+
>
160+
<App />
161+
</BitteWalletContextProvider>
162+
```
163+
164+
## TypeScript Support
165+
166+
The `WalletName` type ensures you only use supported wallet names:
167+
168+
```typescript
169+
import { WalletName } from '@bitte-ai/react';
170+
171+
// ✅ This works
172+
const validWallets: WalletName[] = ['intear', 'bitte', 'meteor'];
173+
174+
// ❌ TypeScript error - 'invalid' is not a valid wallet name
175+
const invalidWallets: WalletName[] = ['intear', 'invalid'];
176+
```
177+
178+
# Legacy API
179+
180+
The previous API is still supported for backwards compatibility:
181+
182+
## Using onlyBitteWallet
183+
184+
```typescript
185+
<BitteWalletContextProvider
186+
network="mainnet"
187+
onlyBitteWallet={true}
188+
contractAddress="your-contract.near"
59189
>
60-
<Component {...pageProps} />
190+
<App />
61191
</BitteWalletContextProvider>
192+
```
193+
194+
## Using additionalWallets Only
62195

196+
```typescript
197+
import { setupSomeCustomWallet } from 'some-custom-wallet';
198+
199+
<BitteWalletContextProvider
200+
network="mainnet"
201+
additionalWallets={[setupSomeCustomWallet()]}
202+
contractAddress="your-contract.near"
203+
>
204+
<App />
205+
</BitteWalletContextProvider>
63206
```
64207

208+
## Important Notes
209+
210+
- If you don't specify `enabledWallets`, the default wallets (`meteor`, `mynear`, `hot`) plus `bitte` will be used
211+
- If you specify an empty `enabledWallets` array, no wallets will be shown
212+
- The `enabledWallets` option takes precedence over `onlyBitteWallet` when both are provided
213+
- Additional wallets from `additionalWallets` will always be included regardless of the `enabledWallets` setting
214+
65215
# Troubleshooting
66216
The wallet runs only on client-side.
67217

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,11 @@
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/intear-wallet": "^9.5.1",
5253
"@near-wallet-selector/meteor-wallet": "^9.5.1",
5354
"@near-wallet-selector/modal-ui": "^9.5.1",
5455
"@near-wallet-selector/my-near-wallet": "^9.5.1",
56+
"@near-wallet-selector/okx-wallet": "^9.5.1",
5557
"buffer": "^6.0.3",
5658
"react": "^19.1.1",
5759
"react-dom": "^19.1.1"

‎pnpm-lock.yaml‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/BitteWalletContext.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import React, {
88
useState,
99
} from "react";
1010
import { BitteWalletAuth } from "./wallet/bitte-wallet";
11-
import type { WalletSelectorComponents } from "./wallet/bitte-wallet";
11+
import type {
12+
WalletSelectorComponents,
13+
WalletName,
14+
} from "./wallet/bitte-wallet";
1215

1316
import type {
1417
WalletSelector,
@@ -41,6 +44,7 @@ interface ContextProviderType {
4144
additionalWallets?: Array<WalletModuleFactory>;
4245
onlyBitteWallet?: boolean;
4346
walletUrl?: string;
47+
enabledWallets?: WalletName[];
4448
}
4549

4650
export const BitteWalletContext = createContext<BitteWalletContext | null>(
@@ -54,6 +58,7 @@ export const BitteWalletContextProvider: React.FC<ContextProviderType> = ({
5458
additionalWallets,
5559
onlyBitteWallet,
5660
walletUrl,
61+
enabledWallets,
5762
}): JSX.Element => {
5863
const [errorMessage, setErrorMessage] = useState<string | null>(null);
5964
const [components, setComponents] = useState<WalletSelectorComponents | null>(
@@ -85,7 +90,11 @@ export const BitteWalletContextProvider: React.FC<ContextProviderType> = ({
8590
return await setupBitteWalletSelector(
8691
isOnlyBitteWallet,
8792
selectedNetwork,
88-
{ additionalWallets: additionalWallets },
93+
{
94+
additionalWallets: additionalWallets,
95+
enabledWallets: enabledWallets,
96+
},
97+
selectedContract,
8998
walletUrl,
9099
);
91100
};

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from "./BitteWalletContext";
22
export * from "./hooks/useNearPrice";
3+
export type { WalletName } from "./wallet/bitte-wallet";
34
export type {
45
Wallet,
56
WalletModuleFactory,

0 commit comments

Comments
 (0)