> For the complete documentation index, see [llms.txt](https://docs.bitte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bitte.ai/wallet/integrations.md).

# Integrations

Developers can integrate Bitte Wallet either with wallet Selector or directly with callbacks

## Bitte Wallet Integration via packages

1. **Using @bitte-ai/react**\
   You can check the readme [here](https://github.com/BitteProtocol/react)\
   \
   NPM:

   ```
   npm install @bitte-ai/react
   npm install @near-wallet-selector/modal-ui
   ```

   ####

   #### Yarn:

   ```
   yarn add @bitte-ai/react
   yarn add @near-wallet-selector/modal-ui
   ```

   ####

   #### PNPM:

   ```
   pnpm install @bitte-ai/react
   pnpm install @near-wallet-selector/modal-ui
   ```

   ##

   ## BitteWalletContextProvider

   the default way of interacting with Bitte Wallet is using the BitteWalletContextProvider

   ### properties:

   **network** : `mainnet | testnet`

   **additionalWallets** : `WalletModuleFactory[] extra wallets setup`<br>

   ```
   import "@near-wallet-selector/modal-ui/styles.css";
   import { BitteWalletContextProvider } from  '@bitte-ai/react'

   <BitteWalletContextProvider
     network="mainnet"
   >
      <Component {...pageProps} />
   </BitteWalletContextProvider>
   ```

   \ <br>
2. &#x20;**Using @near-wallet-selector**<br>

The easiest way to use this package is to install it from the NPM registry, this package requires `near-api-js` v1.0.0 or above:

```
# Using Yarn
yarn add near-api-js

# Using NPM.
npm install near-api-js
```

```
# Using Yarn
yarn add @near-wallet-selector/bitte-wallet

# Using NPM.
npm install @near-wallet-selector/bitte-wallet
```

Then use it in your dApp:

```
import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";

const bitteWallet =  setupBitteWallet({
  networkId: 'mainnet',
  walletUrl: 'https://wallet.bitte.ai',
  callbackUrl: 'https://www.mywebsite.com',
  deprecated: false,
});

const selector = await setupWalletSelector({
  network: "testnet",
  modules: [bitteWallet],
});
```

### Options

* `networkId`: (`string?`): 'mainnet' or 'testnet' . Defaults to `mainnet`.
* `deprecated`: (`boolean?`): Deprecated is optional. Default is `false`.
* `callbackUrl`: (`string?`): Valid url to send your user after txn.
* `walletUrl`: (`string?`): wallet url: <https://wallet.bitte.ai> for mainnet and <https://testnet.wallet.bitte.ai> for testnet.

### License

This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0).

## Bitte Wallet Integration via URL Schemes

This guide explains how to interact with the Mintbase Wallet using URL schemes to perform operations like connecting or creating an account and signing transactions. Depending on your development environment, you can choose between the testnet and mainnet URLs.

### Base URLs

| Base URL                          | Network |
| --------------------------------- | ------- |
| <https://testnet.wallet.bitte.ai> | testnet |
| <https://wallet.bitte.ai>         | mainnet |

### Connect or Create an Account

To connect or create an account, use the following endpoint. This action will redirect users to authenticate or create a new wallet account

* **Endpoint**: `/connect`
* **URL**: `https://wallet.bitte.ai/connect`

#### Parameters

* `success_url`:&#x20;

  The URL to which the wallet redirects after a successful login. It should be able to handle the incoming parameters.

  * Example: your\_schema://\`

**Callback URL**

The callback URL is defined in the `success_url` parameter. After successful authentication, the user will be redirected to this URL.

**Parameters**

* `account_id`: The authenticated user's account ID.
* `public_key`: The currently connected public key of the user's account.&#x20;

### Sign Transactions

To sign a transaction, direct the user to the sign transaction endpoint.

* **Endpoint**: `/sign-transaction`
* **URL**: `https://wallet.bitte.ai/sign-transaction`

**Parameters**

* **transactions\_data**: The encoded data for the transaction that needs to be signed. See [this](https://github.com/near/wallet-selector/blob/main/packages/core/docs/api/transactions.md) to learn how to format the transaction object. The transaction object should be URL encoded (\`encodeURI(JSON.strinfigy(tx\_data))\`)&#x20;
* **callback\_url**: The URL to redirect after the transaction signing process.

**Callback URL**

After signing the transaction, the wallet will redirect to the provided `callback_url` with additional transaction details.

**Parameters**:

* `transactionHashes`: The hashes of the signed transactions.

### Examples

#### 1. **Connect Account on Mainnet**

```
https://wallet.bitte.ai/connect?success_url=https://mydapp.com
```

#### 2. **Sign Transaction on Mainnet**

```
https://wallet.bitte.ai/sign-transaction?transactions_data=%5B%7B%22receiverId%22%3A%220.drop.proxy.mintbase.near%22%2C%22actions%22%3A%5B%7B%22type%22%3A%22FunctionCall%22%2C%22params%22%3A%7B%22methodName%22%3A%22mint%22%2C%22args%22%3A%7B%22metadata%22%3A%22%7B%5C%22media%5C%22%3A%5C%22C6iWEOxKqUHJ2eAr5_3i0jyiYPLCcpUdoxRvM38xViM%5C%22%2C%5C%22creatorAddress%5C%22%3A%5C%22aurora-ahghara.near%5C%22%2C%5C%22title%5C%22%3A%5C%22%5C%22%2C%5C%22description%5C%22%3A%5C%22%5C%22%7D%22%2C%22nft_contract_id%22%3A%22drops.mintbase1.near%22%7D%2C%22gas%22%3A%22200000000000000%22%2C%22deposit%22%3A%2213500000000000000000000%22%7D%7D%5D%7D%5D&callback_url=https://mintbase.xyz
```