BitteProtocol · sainthiago · Sep 10, 2025
diff --git a/README.md b/README.md
@@ -1,67 +1,217 @@
 # @bitte-ai/react
 
-This package contains React helpers for interacting with Bitte Wallet.
+This package contains React helpers for interacting with Bitte Wallet and other NEAR wallets.
 
 <p align="center">
 
 <img  src='https://img.shields.io/npm/dw/@bitte-ai/react'  />
 
 </p>
 
-
 ## Summary
 
-- [Installing](#Installing)
-
-- [BitteWalletContextProvider (default)](#bittewalletcontextprovider) : The default Bitte Wallet provider
-
+- [Installing](#installing)
+- [Wallet Selection](#wallet-selection)
+- [BitteWalletContextProvider](#bittewalletcontextprovider)
+- [Available Wallets](#available-wallets)
+- [Usage Examples](#usage-examples)
+- [Legacy API](#legacy-api)
+- [Troubleshooting](#troubleshooting)
 
 # Installing
 
 ### NPM:
 
-```
+```bash
 npm install @bitte-ai/react
 npm install @near-wallet-selector/modal-ui
 ```
 
 ### Yarn:
 
-```
+```bash
 yarn add @bitte-ai/react
 yarn add @near-wallet-selector/modal-ui
 ```
 
 ### PNPM:
 
-```
+```bash
 pnpm install @bitte-ai/react
 pnpm install @near-wallet-selector/modal-ui
 ```
 
+# Wallet Selection
+
+You can now easily choose which wallets to display by using the `enabledWallets` prop. This gives developers full control over the wallet selection experience.
+
+## Available Wallets
+
+The following wallets are supported:
+
+- `"intear"` - Intear Wallet
+- `"hot"` - Here Wallet (formerly HOT Wallet)
+- `"okx"` - OKX Wallet
+- `"bitte"` - Bitte Wallet
+- `"meteor"` - Meteor Wallet  
+- `"mynear"` - MyNEAR Wallet
+
 # BitteWalletContextProvider
 
-the default way of interacting with Bitte Wallet is using the BitteWalletContextProvider
+The default way of interacting with Bitte Wallet is using the BitteWalletContextProvider.
+
+## Properties:
+
+**network**: `"mainnet" | "testnet"` - The NEAR network to connect to
+
+**enabledWallets**: `WalletName[]` - Array of wallet names to display (recommended)
+
+**additionalWallets**: `WalletModuleFactory[]` - Extra wallets setup
+
+**contractAddress**: `string` - Contract address for wallet connection
 
+**onlyBitteWallet**: `boolean` - Legacy prop to show only Bitte Wallet
 
-## properties:
+**walletUrl**: `string` - Custom Bitte Wallet URL
 
-**network** : ` mainnet | testnet`
+# Usage Examples
 
-**additionalWallets** : `WalletModuleFactory[] extra wallets setup`
+## Basic Wallet Selection (Recommended)
 
 ```typescript
 import "@near-wallet-selector/modal-ui/styles.css";
-import { BitteWalletContextProvider } from  '@bitte-ai/react'
+import { BitteWalletContextProvider, useBitteWallet, WalletName } from '@bitte-ai/react';
+
+// Select only the wallets you want to show
+const enabledWallets: WalletName[] = ['intear', 'hot', 'okx', 'bitte'];
+
+function MyApp() {
+  return (
+    <BitteWalletContextProvider
+      network="mainnet"
+      enabledWallets={enabledWallets}
+      contractAddress="your-contract.near"
+    >
+      <WalletConnector />
+    </BitteWalletContextProvider>
+  );
+}
+
+function WalletConnector() {
+  const { connect, disconnect, isConnected, accounts } = useBitteWallet();
+
+  return (
+    <div>
+      {!isConnected ? (
+        <button onClick={connect}>Connect Wallet</button>
+      ) : (
+        <div>
+          <p>Connected: {accounts[0]?.accountId}</p>
+          <button onClick={disconnect}>Disconnect</button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## All Available Wallets
+
+```typescript
+const allWallets: WalletName[] = ['intear', 'hot', 'okx', 'bitte', 'meteor', 'mynear'];
+
+<BitteWalletContextProvider
+  network="mainnet"
+  enabledWallets={allWallets}
+  contractAddress="your-contract.near"
+>
+  <App />
+</BitteWalletContextProvider>
+```
+
+## Only Specific Wallets
+
+```typescript
+// Only show Bitte and Intear wallets
+const selectedWallets: WalletName[] = ['bitte', 'intear'];
+
+<BitteWalletContextProvider
+  network="testnet"
+  enabledWallets={selectedWallets}
+  contractAddress="your-contract.testnet"
+>
+  <App />
+</BitteWalletContextProvider>
+```
+
+## Combining with Additional Wallets
+
+```typescript
+import { setupCustomWallet } from 'custom-wallet';
+
+const myWallets: WalletName[] = ['bitte', 'intear', 'meteor'];
 
 <BitteWalletContextProvider
   network="mainnet"
+  enabledWallets={myWallets}
+  additionalWallets={[setupCustomWallet()]}
+  contractAddress="your-contract.near"
+>
+  <App />
+</BitteWalletContextProvider>
+```
+
+## TypeScript Support
+
+The `WalletName` type ensures you only use supported wallet names:
+
+```typescript
+import { WalletName } from '@bitte-ai/react';
+
+// ✅ This works
+const validWallets: WalletName[] = ['intear', 'bitte', 'meteor'];
+
+// ❌ TypeScript error - 'invalid' is not a valid wallet name
+const invalidWallets: WalletName[] = ['intear', 'invalid'];
+```
+
+# Legacy API
+
+The previous API is still supported for backwards compatibility:
+
+## Using onlyBitteWallet
+
+```typescript
+<BitteWalletContextProvider
+  network="mainnet" 
+  onlyBitteWallet={true}
+  contractAddress="your-contract.near"
 >
-   <Component {...pageProps} />
+  <App />
 </BitteWalletContextProvider>
+```
+
+## Using additionalWallets Only
 
+```typescript
+import { setupSomeCustomWallet } from 'some-custom-wallet';
+
+<BitteWalletContextProvider
+  network="mainnet"
+  additionalWallets={[setupSomeCustomWallet()]}
+  contractAddress="your-contract.near"
+>
+  <App />
+</BitteWalletContextProvider>
 ```
 
+## Important Notes
+
+- If you don't specify `enabledWallets`, the default wallets (`meteor`, `mynear`, `hot`) plus `bitte` will be used
+- If you specify an empty `enabledWallets` array, no wallets will be shown
+- The `enabledWallets` option takes precedence over `onlyBitteWallet` when both are provided
+- Additional wallets from `additionalWallets` will always be included regardless of the `enabledWallets` setting
+
 # Troubleshooting
 The wallet runs only on client-side.
 

diff --git a/package.json b/package.json
@@ -49,9 +49,11 @@
     "@bitte-ai/wallet": "0.8.2",
     "@near-wallet-selector/core": "^9.5.1",
     "@near-wallet-selector/here-wallet": "^9.5.1",
+    "@near-wallet-selector/intear-wallet": "^9.5.1",
     "@near-wallet-selector/meteor-wallet": "^9.5.1",
     "@near-wallet-selector/modal-ui": "^9.5.1",
     "@near-wallet-selector/my-near-wallet": "^9.5.1",
+    "@near-wallet-selector/okx-wallet": "^9.5.1",
     "buffer": "^6.0.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/BitteWalletContext.tsx b/src/BitteWalletContext.tsx
@@ -8,7 +8,10 @@ import React, {
   useState,
 } from "react";
 import { BitteWalletAuth } from "./wallet/bitte-wallet";
-import type { WalletSelectorComponents } from "./wallet/bitte-wallet";
+import type {
+  WalletSelectorComponents,
+  WalletName,
+} from "./wallet/bitte-wallet";
 
 import type {
   WalletSelector,
@@ -41,6 +44,7 @@ interface ContextProviderType {
   additionalWallets?: Array<WalletModuleFactory>;
   onlyBitteWallet?: boolean;
   walletUrl?: string;
+  enabledWallets?: WalletName[];
 }
 
 export const BitteWalletContext = createContext<BitteWalletContext | null>(
@@ -54,6 +58,7 @@ export const BitteWalletContextProvider: React.FC<ContextProviderType> = ({
   additionalWallets,
   onlyBitteWallet,
   walletUrl,
+  enabledWallets,
 }): JSX.Element => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [components, setComponents] = useState<WalletSelectorComponents | null>(
@@ -85,7 +90,11 @@ export const BitteWalletContextProvider: React.FC<ContextProviderType> = ({
     return await setupBitteWalletSelector(
       isOnlyBitteWallet,
       selectedNetwork,
-      { additionalWallets: additionalWallets },
+      {
+        additionalWallets: additionalWallets,
+        enabledWallets: enabledWallets,
+      },
+      selectedContract,
       walletUrl,
     );
   };

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./BitteWalletContext";
 export * from "./hooks/useNearPrice";
+export type { WalletName } from "./wallet/bitte-wallet";
 export type {
   Wallet,
   WalletModuleFactory,