### Install web-animations-js Polyfill

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Install the `web-animations-js` polyfill using npm to resolve issues with animations not working due to lack of Web Animations API support.

```bash
npm install web-animations-js
```

--------------------------------

### Example: Sending a Transaction and Waiting for Confirmation

Source: https://ton-connect.github.io/sdk/media/transaction-by-external-message.md

This example demonstrates sending a transaction using `tonConnectUI.sendTransaction` and then using `waitForTransaction` to confirm its appearance on the blockchain. It requires initializing `TonClient` and `useTonConnectUI`.

```typescript
import { TonClient } from '@ton/ton';

const client = new TonClient({ endpoint: 'https://toncenter.com/api/v2/jsonRPC' });

const [tonConnectUI, setOptions] = useTonConnectUI();

// Obtain ExternalInMessage boc
const { boc } = await tonConnectUI.sendTransaction({
    messages: [
        {
            address: "UQBSzBN6cnxDwDjn_IQXqgU8OJXUMcol9pxyL-yLkpKzYpKR",
            amount: "20000000"
        }
    ]
});

const tx = await waitForTransaction(
    boc,
    client,
    10, // retries
    1000, // timeout before each retry
);

if (tx) {
    console.log('Found transaction:', tx);
} else {
    console.log('Transaction not found');
}
```

--------------------------------

### Install Dependencies in Demo App

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

After updating the package version in the demo app's package.json, run this command to install the new dependencies and update the pnpm-lock.json file.

```shell
pnpm install
```

--------------------------------

### Install TonConnect UI with npm

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Install the @tonconnect/ui package using npm for use in your project.

```bash
npm i @tonconnect/ui
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Clone the TON Connect SDK repository and install all project dependencies using pnpm. The `--frozen-lockfile` flag ensures consistent dependency versions.

```shell
git clone git@github.com:ton-connect/sdk.git && cd sdk
pnpm i --frozen-lockfile
```

--------------------------------

### Install @tonconnect/sdk via CDN

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Add this script to your HTML file to include the SDK. Use 'latest' for the newest version or a specific version number.

```html
<script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
```

```html
<script src="https://unpkg.com/@tonconnect/sdk@0.0.34/dist/tonconnect-sdk.min.js"></script>
```

--------------------------------

### Import web-animations-js Polyfill

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Import the `web-animations-js` polyfill in your project after installation to enable Web Animations API support.

```javascript
import 'web-animations-js';
```

--------------------------------

### Dynamically Manage Ton Proof Connect Request Parameters

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

This example shows how to dynamically manage connect request parameters, including enabling a UI loader, fetching a tonProof payload from a backend, and updating the parameters accordingly or removing them if fetching fails.

```typescript
// enable ui loader
tonConnectUI.setConnectRequestParameters({ state: 'loading' });

// fetch you tonProofPayload from the backend
const tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();

if (!tonProofPayload) {
    // remove loader, connect request will be without any additional parameters
    tonConnectUI.setConnectRequestParameters(null);
} else {
    // add tonProof to the connect request
    tonConnectUI.setConnectRequestParameters({
        state: "ready",
        value: { tonProof: tonProofPayload }
    });
}
```

--------------------------------

### Publish Beta Version of @tonconnect/ui

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Use this command to publish a beta version of the @tonconnect/ui package. The --tag=beta flag prevents accidental installation of the beta version.

```shell
cd packages/ui && pnpm publish --access=public --tag=beta
```

--------------------------------

### Install TonConnect UI via CDN

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Add this script to your HTML file to include the TonConnect UI library. Use 'latest' for the most recent version or a specific version number to prevent auto-updates.

```html
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
```

```html
<script src="https://unpkg.com/@tonconnect/ui@0.0.9/dist/tonconnect-ui.min.js"></script>
```

--------------------------------

### Install Encoding Package in Next.js

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

If you encounter a warning about the 'encoding' module in Next.js, you can install the 'encoding' package to resolve it. This is an optional solution while a permanent fix is developed.

```bash
npm install encoding
```

--------------------------------

### Configure Preferred Wallet Features

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Prioritize wallets in the connect modal by specifying preferred features. This example prioritizes wallets that support sending at least 2 messages and extra currency, without excluding others.

```typescript
<TonConnectUIProvider  
    manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"  
    walletsPreferredFeatures={{
        sendTransaction: {
            minMessages: 2, // Wallets supporting at least 2 messages are prioritized
            extraCurrencyRequired: true // Wallets supporting extra currency are prioritized
        }
    }}  
>
    { /* Your app */ }
</TonConnectUIProvider>
```

--------------------------------

### Configure TonConnectUI with Required Wallet Features

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Initialize TonConnectUI and specify required wallet features to filter the displayed wallets. This example filters for wallets that support sending at least two messages and require extra currency.

```javascript
import { TonConnectUI } from '@tonconnect/ui'

const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>',
    walletsRequiredFeatures: {
        sendTransaction: {
            minMessages: 2, // Wallet must support at least 2 messages
            extraCurrencyRequired: true // Wallet must support extra currency
        }
    }
});
```

--------------------------------

### Example Usage of getTransactionByInMessage

Source: https://ton-connect.github.io/sdk/media/transaction-by-external-message.md

Demonstrates how to use the `getTransactionByInMessage` function with a TonClient instance and a base64 encoded message.

```typescript
import { TonClient } from '@ton/ton';

const client = new TonClient({ endpoint: 'https://toncenter.com/api/v2/jsonRPC' });

const tx = await getTransactionByInMessage(
  'te6ccgEBAQEA...your-base64-message...', 
  client
);

if (tx) {
  console.log('Found transaction:', tx);
} else {
  console.log('Transaction not found');
}
```

--------------------------------

### Get Current Wallet and WalletInfo

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Getters to retrieve the current connection status, wallet information, account details, and connection status.

```APIDOC
## Get current connected Wallet and WalletInfo
You can use special getters to read current connection state. Note that this getter only represents current value, so they are not reactive. To react and handle wallet changes use `onStatusChange` method.
```
const currentWallet = tonConnectUI.wallet;
const currentWalletInfo = tonConnectUI.walletInfo;
const currentAccount = tonConnectUI.account;
const currentIsConnectedStatus = tonConnectUI.connected;
```
```

--------------------------------

### Configure Required Wallet Features

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Filter wallets displayed in the connect modal by specifying required features. This example ensures wallets support sending at least 2 messages and extra currency in transactions.

```typescript
<TonConnectUIProvider  
    manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"  
    walletsRequiredFeatures={{
        sendTransaction: {
            minMessages: 2, // Wallet must support at least 2 messages
            extraCurrencyRequired: true // Wallet must support extra currency
        }
    }}  
>
    { /* Your app */ }
</TonConnectUIProvider>
```

--------------------------------

### WalletMissingRequiredFeaturesError Constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.WalletMissingRequiredFeaturesError.html

Initializes a new instance of the WalletMissingRequiredFeaturesError class. This error is thrown when a wallet cannot get its manifest by the passed manifestUrl.

```APIDOC
## Constructor

### constructor
  * new WalletMissingRequiredFeaturesError(
message: string,
options: { cause: { connectEvent: { device: DeviceInfo; items: ConnectItemReply[] } } },
): WalletMissingRequiredFeaturesError

#### Parameters
    * message: string
    * options: { cause: { connectEvent: { device: DeviceInfo; items: ConnectItemReply[] } } }

#### Returns WalletMissingRequiredFeaturesError
```

--------------------------------

### Dynamic Connect Request Parameters with tonProof

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Call `tonConnectUI.setConnectRequestParameters` multiple times if your tonProof payload has a bounded lifetime. This example shows enabling a UI loader, fetching a payload, and then either removing the loader or adding the tonProof to the connect request.

```javascript
const [tonConnectUI] = useTonConnectUI();

// enable ui loader
tonConnectUI.setConnectRequestParameters({ state: 'loading' });

// fetch you tonProofPayload from the backend
const tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();

if (!tonProofPayload) {
    // remove loader, connect request will be without any additional parameters
    tonConnectUI.setConnectRequestParameters(null);
} else {
    // add tonProof to the connect request
    tonConnectUI.setConnectRequestParameters({
        state: "ready",
        value: { tonProof: tonProofPayload }
    });
}
```

--------------------------------

### Build Demo App

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Build the demo application to ensure that the updated packages are correctly integrated and that the application builds without errors.

```shell
pnpm run build
```

--------------------------------

### Enter Beta Release Mode

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Use 'pnpm changeset pre enter beta' to prepare for publishing a beta version. This command enables beta release mode, affecting how versions are bumped.

```shell
pnpm changeset pre enter beta
```

--------------------------------

### Set Connect Request Parameters (Ready State with tonProof)

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Set the state to 'ready' and define the `tonProof` value. The passed parameter will be applied to the connect request (QR and universal link).

```javascript
const [tonConnectUI] = useTonConnectUI();

tonConnectUI.setConnectRequestParameters({
    state: 'ready',
    value: {
        tonProof: '<your-proof-payload>'
    }
});
```

--------------------------------

### Create TonConnectUI Instance with npm

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Import and instantiate TonConnectUI in your project. Provide the manifest URL and the root ID for the connect button.

```javascript
import { TonConnectUI } from '@tonconnect/ui'

const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});
```

--------------------------------

### Get Current Specific Wallet Modal State

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieves the current state of the specific wallet modal window.

```APIDOC
To get the current state of the specific wallet modal window, use the `singleWalletModalState` property:
```
const currentState = tonConnectUI.singleWalletModalState;
console.log('Current modal state:', currentState);
```
```

--------------------------------

### Get Current Specific Wallet Modal State

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieve the current state of the specific wallet modal window.

```javascript
const currentState = tonConnectUI.singleWalletModalState;  
console.log('Current modal state:', currentState);
```

--------------------------------

### Fetch Supported Wallets List (Static Method)

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

An alternative way to fetch the list of supported wallets using the static `getWallets` method directly on the `TonConnect` class.

```APIDOC
const walletsList = await TonConnect.getWallets();
```

--------------------------------

### Create TonConnectUI instance

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Instantiate TonConnectUI with your manifest URL and the root ID for the connect button. You can also specify required or preferred wallet features to filter and prioritize wallets.

```APIDOC
import { TonConnectUI } from '@tonconnect/ui'

const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});

// With required features:
const tonConnectUIRequired = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>',
    walletsRequiredFeatures: {
        sendTransaction: {
            minMessages: 2, // Wallet must support at least 2 messages
            extraCurrencyRequired: true // Wallet must support extra currency
        }
    }
});

// With preferred features:
const tonConnectUIPreferred = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>',
    walletsPreferredFeatures: {
        sendTransaction: {
            minMessages: 2,
            extraCurrencyRequired: true
        }
    }
});
```

--------------------------------

### Get Current Modal State

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieves the current state of the modal window, including its status ('opened' or 'closed') and the reason for closing if applicable.

```APIDOC
## Get current modal state
This getter returns the current state of the modal window. The state will be an object with `status` and `closeReason` properties. The `status` can be either 'opened' or 'closed'. If the modal is closed, you can check the `closeReason` to find out the reason of closing.
```
const currentModalState = tonConnectUI.modalState;
```
```

--------------------------------

### Get Current Modal State

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieve the current state of the modal window, including its status ('opened' or 'closed') and the reason for closing if applicable.

```javascript
const currentModalState = tonConnectUI.modalState;
```

--------------------------------

### connectWallet

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnectUI.html

Opens the modal window and initiates the wallet connection process. This method is deprecated and `openModal()` should be used instead.

```APIDOC
## connectWallet
  * connectWallet(): Promise<ConnectedWallet>
#### Returns Promise<ConnectedWallet>
Connected wallet.
#### Deprecated
Use `tonConnectUI.openModal()` instead. Will be removed in the next major version.
#### Throws
TonConnectUIError if connection was aborted.
```

--------------------------------

### createConnectionRestoringStartedEvent

Source: https://ton-connect.github.io/sdk/functions/_tonconnect_ui.createConnectionRestoringStartedEvent.html

Creates a connection restoring started event. This event is typically used internally by the TonConnect UI to manage the connection restoration process.

```APIDOC
## Function createConnectionRestoringStartedEvent
  * createConnectionRestoringStartedEvent(
version: Version,
): ConnectionRestoringStartedEvent
Create a connection restoring started event.
#### Parameters
    * version: Version
#### Returns ConnectionRestoringStartedEvent
```

--------------------------------

### Configure TonConnectUI with Preferred Wallet Features

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Initialize TonConnectUI and specify preferred wallet features to prioritize certain wallets in the connect modal. Wallets matching these features will be shown first.

```javascript
import { TonConnectUI } from '@tonconnect/ui'

const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>',
    walletsPreferredFeatures: {
        sendTransaction: {
            minMessages: 2,
            extraCurrencyRequired: true
        }
    }
});
```

--------------------------------

### Initialize Remote Wallet Connection via Universal Link

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Connect to a remote wallet using a universal link. This link should be presented to the user as a QR code or a deeplink. The connection status is updated via `connector.onStatusChange`.

```javascript
const walletConnectionSource = {
    universalLink: 'https://app.tonkeeper.com/ton-connect',
    bridgeUrl: 'https://bridge.tonapi.io/bridge'
}

const universalLink = connector.connect(walletConnectionSource);
```

--------------------------------

### Fetch Supported Wallets List

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Fetch a list of all supported wallets that users can connect to. This list can be used to display a custom wallet selection interface.

```APIDOC
const walletsList = await connector.getWallets();

/* walletsList is an array of objects, each containing wallet details such as:
{
    name: string;
    imageUrl: string;
    tondns?: string;
    aboutUrl: string;
    universalLink?: string;
    deepLink?: string;
    bridgeUrl?: string;
    jsBridgeKey?: string;
    injected?: boolean; // true if this wallet is injected to the webpage
    embedded?: boolean; // true if the dapp is opened inside this wallet's browser
}
 */
```

--------------------------------

### AddTonConnectPrefix Type Alias

Source: https://ton-connect.github.io/sdk/types/_tonconnect_ui.AddTonConnectPrefix.html

This type alias defines a union of strings that start with either 'ton-connect-' or 'ton-connect-ui-', followed by a generic string type T.

```APIDOC
## Type Alias AddTonConnectPrefix<T>

AddTonConnectPrefix: `ton-connect-${T}` | `ton-connect-ui-${T}`

### Type Parameters

* T extends string
```

--------------------------------

### Initialize Connector with Custom Manifest URL

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

If your `tonconnect-manifest.json` is not in the root of your app, specify its path during connector initialization.

```javascript
const connector = new TonConnect({
    manifestUrl: 'https://myApp.com/assets/tonconnect-manifest.json'
});
```

--------------------------------

### useTonWallet

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Hook to get the user's currently connected TON wallet information. Returns `null` if no wallet is connected. Provides access to wallet name, device information, and more.

```APIDOC
## useTonWallet

### Description
This hook provides access to the currently connected TON wallet's information. If no wallet is connected, it returns `null`. The returned object contains details about the wallet, such as its name and device information.

### Returns
* `WalletInfo | null` - An object containing wallet information if connected, otherwise `null`.

### Example
```javascript
import { useTonWallet } from '@tonconnect/ui-react';

export const Wallet = () => {
    const wallet = useTonWallet();

    return (
        wallet && (
            <div>
                <span>Connected wallet: {wallet.name}</span>
                <span>Device: {wallet.device.appName}</span>
            </div>
        )
    );
};
```
```

--------------------------------

### Initialize Injected Wallet Connection

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Connect to an injected wallet using its `jsBridgeKey`. The connection status is updated via `connector.onStatusChange`.

```javascript
const walletConnectionSource = {
    jsBridgeKey: 'tonkeeper'
}

connector.connect(walletConnectionSource);
```

--------------------------------

### Implement Custom Event Dispatcher with TonConnect SDK

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Pass a custom event dispatcher to the TonConnect constructor to track user actions. This example shows how to create and use a `CustomEventDispatcher` class.

```typescript
import {TonConnect, EventDispatcher, SdkActionEvent} from '@tonconnect/sdk';  
  
class CustomEventDispatcher implements EventDispatcher<SdkActionEvent> {  
    public async dispatchEvent(  
      eventName: string,   
      eventDetails: SdkActionEvent  
    ): Promise<void> {  
        console.log(`Event: ${eventName}, details:`, eventDetails);  
    }  
}  
  
const eventDispatcher = new CustomEventDispatcher();  
  
const connector = new TonConnect({ eventDispatcher });
```

--------------------------------

### Get Current Wallet Connection State

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Read the current wallet connection status, including the connected wallet, wallet info, account details, and connection status. These getters are not reactive.

```javascript
const currentWallet = tonConnectUI.wallet;  
const currentWalletInfo = tonConnectUI.walletInfo;  
const currentAccount = tonConnectUI.account;  
const currentIsConnectedStatus = tonConnectUI.connected;
```

--------------------------------

### Constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnectUI.html

Initializes a new instance of the TonConnectUI class.

```APIDOC
## constructor
  * new TonConnectUI(options?: TonConnectUiCreateOptions): TonConnectUI
#### Parameters
    * `Optional`options: TonConnectUiCreateOptions
#### Returns TonConnectUI
```

--------------------------------

### useTonAddress

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Hook to get the user's current TON wallet address. It accepts an optional boolean parameter `isUserFriendly` to format the address. Returns an empty string if the wallet is not connected.

```APIDOC
## useTonAddress

### Description
Use this hook to retrieve the user's current TON wallet address. You can specify the address format using the `isUserFriendly` boolean parameter. If no wallet is connected, the hook returns an empty string.

### Parameters
* `isUserFriendly` (boolean) - Optional. If true, returns the user-friendly address format. Defaults to true.

### Returns
* `string` - The user's TON wallet address in the specified format, or an empty string if not connected.

### Example
```javascript
import { useTonAddress } from '@tonconnect/ui-react';

export const Address = () => {
    const userFriendlyAddress = useTonAddress();
    const rawAddress = useTonAddress(false);

    return (
        userFriendlyAddress && (
            <div>
                <span>User-friendly address: {userFriendlyAddress}</span>
                <span>Raw address: {rawAddress}</span>
            </div>
        )
    );
};
```
```

--------------------------------

### connect

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnect.html

Initiates a connection to a wallet, either by generating a universal link for external wallets or sending a request to injected wallets.

```APIDOC
## connect
  * connect<  
T extends  
| WalletConnectionSource  
| Pick<WalletConnectionSourceHTTP, "bridgeUrl">[],  
>(  
wallet: T,  
options?: {  
openingDeadlineMS?: number;  
request?: ConnectAdditionalRequest;  
signal?: AbortSignal;  
},  
): T extends WalletConnectionSourceJS ? void : string
Generates universal link for an external wallet and subscribes to the wallet's bridge, or sends connect request to the injected wallet.
#### Type Parameters
    * T extends WalletConnectionSource | Pick<WalletConnectionSourceHTTP, "bridgeUrl">[]
#### Parameters
    * wallet: T
wallet's bridge url and universal link for an external wallet or jsBridge key for the injected wallet.
    * `Optional`options: {  
openingDeadlineMS?: number;  
request?: ConnectAdditionalRequest;  
signal?: AbortSignal;  
}
(optional) openingDeadlineMS for the connection opening deadline and signal for the connection abort.
#### Returns T extends WalletConnectionSourceJS ? void : string
universal link if external wallet was passed or void for the injected wallet.
  * connect<  
T extends  
| WalletConnectionSource  
| Pick<WalletConnectionSourceHTTP, "bridgeUrl">[],  
>(  
wallet: T,  
request?: ConnectAdditionalRequest,  
options?: { openingDeadlineMS?: number; signal?: AbortSignal },  
): T extends WalletConnectionSourceJS ? void : string
#### Type Parameters
    * T extends WalletConnectionSource | Pick<WalletConnectionSourceHTTP, "bridgeUrl">[]
#### Parameters
    * wallet: T
    * `Optional`request: ConnectAdditionalRequest
    * `Optional`options: { openingDeadlineMS?: number; signal?: AbortSignal }
#### Returns T extends WalletConnectionSourceJS ? void : string
#### Deprecated
use connect(wallet, options) instead
```

--------------------------------

### Implement Custom Event Dispatcher for TON Connect UI

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Pass a custom event dispatcher to the TonConnectUI constructor to track user actions. This example shows how to create and use a `CustomEventDispatcher` class.

```typescript
import { TonConnectUI, EventDispatcher, SdkActionEvent, UserActionEvent } from '@tonconnect/ui';  
  
class CustomEventDispatcher implements EventDispatcher<UserActionEvent | SdkActionEvent> {  
    public async dispatchEvent(  
      eventName: string,  
      eventDetails: UserActionEvent | SdkActionEvent  
    ): Promise<void> {  
        console.log(`Event: ${eventName}, details:`, eventDetails);  
    }  
}  
  
const eventDispatcher = new CustomEventDispatcher();  
  
const connector = new TonConnectUI({ eventDispatcher });
```

--------------------------------

### Link Packages to Demo App

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Link the locally built TON Connect packages into your demo application's 'node_modules' directory using 'npm link'. This allows for testing changes in the SDK against the demo app.

```shell
npm link @tonconnect/ui-react @tonconnect/ui @tonconnect/sdk @tonconnect/protocol
```

--------------------------------

### Initialize TonConnectUI with CDN

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

After including the script, TonConnectUI is available in the global variable TON_CONNECT_UI. Instantiate it with your manifest URL and the ID of the HTML element where the connect button should be rendered.

```javascript
const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});
```

--------------------------------

### Initialize TonConnectUI with UI Preferences

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

You can set initial UI preferences like `borderRadius` and `theme` when creating a new `TonConnectUI` instance.

```APIDOC
## Initialize TonConnectUI with UI Preferences

### Description
Set initial UI preferences such as `borderRadius`, `theme`, and `colorsSet` during the `TonConnectUI` constructor.

### Constructor Example
```javascript
import { THEME } from '@tonconnect/ui';

const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    uiPreferences: {
        borderRadius: 's',
        theme: THEME.DARK,
        colorsSet: {
            [THEME.DARK]: {
                connectButton: {
                    background: '#29CC6A'
                }
            }
        }
    }
});
```
```

--------------------------------

### Control Wallets Modal

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Manage the wallets modal window, including opening, closing, getting the current state, and subscribing to state changes. Direct access to the modal is available but generally discouraged in favor of `tonConnectUI` methods.

```javascript
const { modal } = tonConnectUI;  
  
// Open and close the modal  
await modal.open();  
modal.close();  
  
// Get the current modal state  
const currentState = modal.state;  
  
// Subscribe and unsubscribe to modal state changes  
const unsubscribe = modal.onStateChange(state => { /* ... */ });  
unsubscribe();
```

--------------------------------

### Fetch Supported Wallets List

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Retrieve a list of all supported TON wallets to display a custom selection dialog to the user. The `getWallets` static method can also be used.

```javascript
const walletsList = await connector.getWallets();

/* walletsList is
{
    name: string;
    imageUrl: string;
    tondns?: string;
    aboutUrl: string;
    universalLink?: string;
    deepLink?: string;
    bridgeUrl?: string;
    jsBridgeKey?: string;
    injected?: boolean; // true if this wallet is injected to the webpage
    embedded?: boolean; // true if the dapp is opened inside this wallet's browser
}[]
 */
```

```javascript
const walletsList = await TonConnect.getWallets();
```

--------------------------------

### Create unified link

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Create a unified link that can be accepted by any wallet by passing an array of http-wallet-connection-sources.

```APIDOC
## Create unified link

### Description
Create a unified link that can be accepted by any wallet. To do that, you should pass an array of http-wallet-connection-sources. If several wallets share the same bridge URL, you can pass this URL only once.

### Method
```javascript
connector.connect(sources)
```

### Parameters
#### Request Body
- **sources** (array, required): An array of wallet connection sources.
  - Each element in the array is an object with a `bridgeUrl` (string, required) property.

### Request Example
```javascript
const sources = [
    {
        bridgeUrl: 'https://bridge.tonapi.io/bridge' // Tonkeeper
    },
    {
        bridgeUrl: 'https://<OTHER_WALLET_BRIDGE>' // Another wallet
    }
];

connector.connect(sources);
```
```

--------------------------------

### Get User's TON Wallet Info with useTonWallet

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

The `useTonWallet` hook provides information about the currently connected TON wallet. It returns `null` if no wallet is connected. The returned object contains wallet details like name and device information.

```typescript
import { useTonWallet } from '@tonconnect/ui-react';

export const Wallet = () => {
    const wallet = useTonWallet();

    return (
        wallet && (
            <div>
                <span>Connected wallet: {wallet.name}</span>
                <span>Device: {wallet.device.appName}</span>
            </div>
        )
    );
};
```

--------------------------------

### constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnect.html

Initializes a new instance of the TonConnect class.

```APIDOC
## constructor
  * new TonConnect(options?: TonConnectOptions): TonConnect
#### Parameters
    * `Optional`options: TonConnectOptions
#### Returns TonConnect
```

--------------------------------

### Get User's TON Address with useTonAddress

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Use the `useTonAddress` hook to retrieve the user's current TON wallet address. Pass `true` for a user-friendly format or `false` for the raw address. Returns an empty string if the wallet is not connected.

```typescript
import { useTonAddress } from '@tonconnect/ui-react';

export const Address = () => {
    const userFriendlyAddress = useTonAddress();
    const rawAddress = useTonAddress(false);

    return (
        address && (
            <div>
                <span>User-friendly address: {userFriendlyAddress}</span>
                <span>Raw address: {rawAddress}</span>
            </div>
        )
    );
};
```

--------------------------------

### Initialize a remote wallet connection via universal link

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Connect to a remote wallet using a universal link. This link can be displayed as a QR code or used as a deeplink.

```APIDOC
## Initialize a remote wallet connection via universal link

### Description
Connect to a remote wallet using a universal link. This link can be displayed as a QR code or used as a deeplink. The connection status is updated via `connector.onStatusChange`.

### Method
```javascript
connector.connect(walletConnectionSource)
```

### Parameters
#### Request Body
- **walletConnectionSource** (object, required): An object containing connection details.
  - **universalLink** (string, required): The universal link for the wallet.
  - **bridgeUrl** (string, required): The bridge URL for the wallet.

### Request Example
```javascript
const walletConnectionSource = {
    universalLink: 'https://app.tonkeeper.com/ton-connect',
    bridgeUrl: 'https://bridge.tonapi.io/bridge'
}

const universalLink = connector.connect(walletConnectionSource);
```
```

--------------------------------

### Web Animations Polyfill

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui-react.html

Instructions on how to use the `web-animations-js` polyfill to resolve issues with animations not working.

```APIDOC
## Animations not working

### Description
If you are experiencing issues with animations not working in your environment, it might be due to a lack of support for the Web Animations API. To resolve this issue, you can use the `web-animations-js` polyfill.

### Usage

#### Using npm
To install the polyfill, run the following command:
```bash
npm install web-animations-js
```

Then, import the polyfill in your project:
```javascript
import 'web-animations-js';
```

#### Using CDN
Alternatively, you can include the polyfill via CDN by adding the following script tag to your HTML:
```html
<script src="https://www.unpkg.com/web-animations-js@latest/web-animations.min.js"></script>
```

Both methods will provide a fallback implementation of the Web Animations API and should resolve the animation issues you are facing.
```

--------------------------------

### WalletsListManager Constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.WalletsListManager.html

Initializes a new instance of the WalletsListManager class. It accepts an optional options object to configure cache TTL and the wallets list source.

```APIDOC
## constructor

### Description
Initializes a new instance of the WalletsListManager class.

### Parameters
- `options` (object) - Optional. Configuration options for the manager.
  - `cacheTTLMs` (number) - Optional. Time-to-live for the cache in milliseconds.
  - `walletsListSource` (string) - Optional. URL for the wallets list source.
```

--------------------------------

### openModal

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnectUI.html

Opens the wallet connection modal window.

```APIDOC
## openModal
  * openModal(): Promise<void>
Opens the modal window, returns a promise that resolves after the modal window is opened.
#### Returns Promise<void>
```

--------------------------------

### Commit and Push Demo App Changes

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Commit the changes made to the demo application and push them to the repository. This action will update the GitHub pages for the demo app.

```shell
git add . && git commit -m "chore: update @tonconnect/ui-react to CURRENT_VERSION" && git push origin HEAD
```

--------------------------------

### Combine All UI Preferences

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Apply multiple UI preferences at once, including theme, border radius, and custom color schemes for both dark and light modes. This demonstrates a comprehensive configuration.

```javascript
tonConnectUI.uiOptions = {
        uiPreferences: {
            theme: THEME.DARK,
            borderRadius: 's',
            colorsSet: {
                [THEME.DARK]: {
                    connectButton: {
                        background: '#29CC6A'
                    }
                },
                [THEME.LIGHT]: {
                    text: {
                        primary: '#FF0000'
                    }
                }
            }
        }
    };
```

--------------------------------

### createVersionInfo

Source: https://ton-connect.github.io/sdk/functions/_tonconnect_ui.createVersionInfo.html

Creates a version info object. This function takes a Version object as input and returns a Version object.

```APIDOC
## Function createVersionInfo
  * createVersionInfo(version: Version): Version
Create a version info.
#### Parameters
    * version: Version
#### Returns Version
```

--------------------------------

### Initialize Connector and Restore Connection

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Initialize the TonConnect connector and attempt to restore a previous connection. This is useful if the user has connected their wallet before.

```javascript
import TonConnect from '@tonconnect/sdk';

const connector = new TonConnect();

connector.restoreConnection();
```

--------------------------------

### Clone Demo DApp Repository

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Clone the demo-dapp-with-wallet repository to update its package versions. This is a necessary step before testing new releases of TON Connect packages.

```shell
git clone git@github.com:ton-connect/demo-dapp-with-wallet.git && cd demo-dapp-with-wallet
```

--------------------------------

### Link Packages Locally

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Link individual packages within the 'packages' directory to your local environment using 'npm link'. This is typically done before linking them to a demo application.

```shell
cd packages/ui-react && npm link
cd ../ui && npm link
cd ../protocol && npm link
cd ../sdk && npm link
```

--------------------------------

### BrowserEventDispatcher Constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.BrowserEventDispatcher.html

Initializes a new instance of the BrowserEventDispatcher class.

```APIDOC
## constructor
  * new BrowserEventDispatcher<T extends { type: string }>(): BrowserEventDispatcher<T>
#### Type Parameters
    * T extends { type: string }
#### Returns BrowserEventDispatcher<T>
```

--------------------------------

### Set System Theme

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Configure the TON Connect UI to use the system's default theme. This is the default behavior if no theme is explicitly set.

```javascript
tonConnectUI.uiOptions = {
        uiPreferences: {
            theme: 'SYSTEM'
        }
    };
```

--------------------------------

### createConnectionStartedEvent

Source: https://ton-connect.github.io/sdk/functions/_tonconnect_ui.createConnectionStartedEvent.html

Creates a connection init event with the specified version.

```APIDOC
## Function createConnectionStartedEvent
  * createConnectionStartedEvent(version: Version): ConnectionStartedEvent
Create a connection init event.
#### Parameters
    * version: Version
#### Returns ConnectionStartedEvent
```

--------------------------------

### Fetch Available Wallets

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieve a list of available wallets that can be connected. This can be done using an instance of TonConnectUI or statically.

```javascript
const walletsList = await tonConnectUI.getWallets();
```

```javascript
const walletsList = await TonConnectUI.getWallets();
```

--------------------------------

### Initialize injected wallet connection

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Connect to an injected wallet using its JavaScript bridge key. The connection status is updated via `connector.onStatusChange`.

```APIDOC
## Initialize injected wallet connection

### Description
Connect to an injected wallet using its JavaScript bridge key. The connection status is updated via `connector.onStatusChange`.

### Method
```javascript
connector.connect(walletConnectionSource)
```

### Parameters
#### Request Body
- **walletConnectionSource** (object, required): An object containing connection details.
  - **jsBridgeKey** (string, required): The JavaScript bridge key for the wallet.

### Request Example
```javascript
const walletConnectionSource = {
    jsBridgeKey: 'tonkeeper'
}

connector.connect(walletConnectionSource);
```
```

--------------------------------

### Configure UI Package Build Script

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Modify the 'build' script in 'packages/ui/package.json' to include 'vite build'. This change is a temporary workaround to ensure watch mode functions correctly during development.

```json
{
  "scripts": {
    "build": "tsc --noEmit --emitDeclarationOnly false && vite build"
  }
}
```

--------------------------------

### Build All Packages

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Build all packages within the TON Connect SDK monorepo. This command compiles the TypeScript code and prepares packages for linking or publishing.

```shell
pnpm build
```

--------------------------------

### getWallets

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.WalletsListManager.html

Fetches and returns a list of available TON wallets.

```APIDOC
## getWallets

### Description
Fetches and returns a list of available TON wallets.

### Returns
- `Promise<WalletInfo[]>` - A promise that resolves to an array of wallet information objects.
```

--------------------------------

### Handle Wallet App Requests with Protocol Models

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_protocol.html

Use protocol models to define a handler for incoming requests from a dApp. This function should process the request and return a `WalletResponse`.

```typescript
import { AppRequest, RpcMethod, WalletResponse } from '@tonconnect/protocol';  
  
function myWalletAppRequestsHandler<T extends RpcMethod>(request: AppRequest<T>): Promise<WalletResponse<T>> {
    // handle request, ask the user for a confirmation and return WalletResponse  
}
```

--------------------------------

### Open Specific Wallet Modal

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Open a modal window for a specific wallet using its 'app_name'. This method is experimental.

```javascript
await tonConnectUI.openSingleWalletModal('wallet_identifier');
```

--------------------------------

### Publish New Release of @tonconnect/ui

Source: https://ton-connect.github.io/sdk/media/DEVELOPERS.md

Use this command to publish a new release of the @tonconnect/ui package. This is the standard command for releasing stable versions.

```shell
cd packages/ui && pnpm publish --access=public
```

--------------------------------

### openSingleWalletModal

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.TonConnectUI.html

Opens the experimental single wallet modal window for a specified wallet.

```APIDOC
## openSingleWalletModal
  * openSingleWalletModal(wallet: string): Promise<void>
`Experimental`
Opens the single wallet modal window, returns a promise that resolves after the modal window is opened.
```

--------------------------------

### Fetch Wallets List

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Retrieve a list of available wallets that can be used for connection. This can be done using either an instance of TonConnectUI or the static method.

```APIDOC
const walletsList = await tonConnectUI.getWallets();

// Or using the static method:
const walletsListStatic = await TonConnectUI.getWallets();
```

--------------------------------

### Extend Wallets List with Custom Wallets

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Pass a custom array of wallets to `uiOptions` to extend the default list. Custom wallets can be defined using `jsBridgeKey` for browser extensions or `bridgeUrl` and `universalLink` for HTTP-compatible wallets.

```typescript
import { UIWallet } from '@tonconnect/ui';

const customWallet: UIWallet = {
    name: '<CUSTOM_WALLET_NAME>',
    imageUrl: '<CUSTOM_WALLET_IMAGE_URL>',
    aboutUrl: '<CUSTOM_WALLET_ABOUT_URL>',
    jsBridgeKey: '<CUSTOM_WALLET_JS_BRIDGE_KEY>',
    bridgeUrl: '<CUSTOM_WALLET_HTTP_BRIDGE_URL>',
    universalLink: '<CUSTOM_WALLET_UNIVERSAL_LINK>'
};

tonConnectUI.uiOptions = {
    walletsListConfiguration: {
        includeWallets: [customWallet]
    }
}
```

--------------------------------

### Create Unified Link for Wallet Connection

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_sdk.html

Generate a unified link that can be accepted by any wallet by passing an array of `http-wallet-connection-sources`. If multiple wallets share the same bridge URL, it only needs to be listed once.

```javascript
const sources = [
    {
        bridgeUrl: 'https://bridge.tonapi.io/bridge' // Tonkeeper
    },
    {
        bridgeUrl: 'https://<OTHER_WALLET_BRIDGE>' // Tonkeeper
    }
];

connector.connect(sources);
```

--------------------------------

### Set Connect Request Parameters (ton_proof)

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Use `tonConnectUI.setConnectRequestParameters` to manage parameters for the `ton_proof` request. This allows you to set a loading state while waiting for backend responses, provide the `tonProof` payload, or remove the loader.

```APIDOC
## Add connect request parameters (ton_proof)

Use `tonConnectUI.setConnectRequestParameters` function to pass your connect request parameters.
This function takes one parameter:
Set state to 'loading' while you are waiting for the response from your backend. If user opens connect wallet modal at this moment, he will see a loader.

```typescript
tonConnectUI.setConnectRequestParameters({
    state: 'loading'
});
```

or
Set state to 'ready' and define `tonProof` value. Passed parameter will be applied to the connect request (QR and universal link).

```typescript
tonConnectUI.setConnectRequestParameters({
    state: 'ready',
    value: {
        tonProof: '<your-proof-payload>'
    }
});
```

or
Remove loader if it was enabled via `state: 'loading'` (e.g. you received an error instead of a response from your backend). Connect request will be created without any additional parameters.

```typescript
tonConnectUI.setConnectRequestParameters(null);
```

You can call `tonConnectUI.setConnectRequestParameters` multiple times if your tonProof payload has bounded lifetime (e.g. you can refresh connect request parameters every 10 minutes).

```typescript
// enable ui loader  
tonConnectUI.setConnectRequestParameters({ state: 'loading' });  
  
// fetch you tonProofPayload from the backend  
const tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();  
  
if (!tonProofPayload) {  
    // remove loader, connect request will be without any additional parameters  
    tonConnectUI.setConnectRequestParameters(null);  
} else {  
    // add tonProof to the connect request  
    tonConnectUI.setConnectRequestParameters({  
        state: "ready",  
        value: { tonProof: tonProofPayload }  
    });  
}
```

You can find `ton_proof` result in the `wallet` object when wallet will be connected:

```typescript
tonConnectUI.onStatusChange(wallet => {
        if (wallet && wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
            checkProofInYourBackend(wallet.connectItems.tonProof.proof);
        }
    });
```
```

--------------------------------

### Set Connect Request Parameters with Ton Proof

Source: https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html

Configure `tonConnectUI.setConnectRequestParameters` with `state: 'ready'` and a `tonProof` value to apply specific parameters to the connect request, including QR codes and universal links.

```typescript
tonConnectUI.setConnectRequestParameters({
    state: 'ready',
    value: {
        tonProof: '<your-proof-payload>'
    }
});
```

--------------------------------

### UnknownAppError Constructor

Source: https://ton-connect.github.io/sdk/classes/_tonconnect_ui.UnknownAppError.html

Initializes a new instance of the UnknownAppError class. This error is thrown when an app tries to send an RPC request to the injected wallet while not connected.

```APIDOC
## constructor
  * new UnknownAppError(
...args: [message?: string, options?: { cause?: unknown }],
): UnknownAppError
#### Parameters
    * ...args: [message?: string, options?: { cause?: unknown }]
#### Returns UnknownAppError
```