> For the complete documentation index, see [llms.txt](https://seinetwork.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seinetwork.gitbook.io/docs/front-end-development/javascript-tutorial.md).

# Руководство по JavaScript

### Начало работы

Если вы начинаете с нуля, мы рекомендуем вам начать с использования пустого проекта Vite Typescript, выполнив следующие команды

```
yarn create vite YOUR-APP-NAME --template react-ts && yarn install
```

Установите зависимости проекта

```
yarn add @sei-js/react // or npm install @sei-js/react
```

{% hint style="info" %}
Если вы не пользуетесь React для разработки кода, вам необходимо использовать основную библиотеку JS [NPM Packages](/docs/front-end-development/npm-packages.md)
{% endhint %}

### Подключение кошелька

Для взаимодействия с блокчейном вам нужна автономная подписывающая сторона. Хук useWallet позволяет вам подключить предопределённых провайдеров кошельков, чтобы получить автономную подписывающую сторону, также он содержит другие полезные функции и константы.

Официально Sei поддерживает следующие кошельки, один из них будет необходим для разработки вашего интерфейса.

* Leap for Cosmos <https://www.leapwallet.io/>
* Keplr <https://www.keplr.app/download>
* Falcon <https://www.falconwallet.app/>
* Coin98 <https://coin98.com/wallet>

```
import { useWallet } from '@sei-js/react';

const { connectedWallet, offlineSigner } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: 'testnet' })
```

{% hint style="info" %}
Результат использования хука useWallet может быть сохранен в инструменте recoil atom для использования с другими компонентами, но тогда будет необходим флаг  dangerouslyAllowMutability.

```
export const seiWalletAtom = atom({
   key: 'seiWallet',
   default: {},
   dangerouslyAllowMutability: true
});
```

{% endhint %}

#### Подключение пользовательского узла

Если вам необходимо подключиться к локальной ноде или локальному RPC, вы можете использовать пользовательские данные restUrl, rpcUrl и chainId.

```
import { useWallet } from '@sei-js/react';

const { connectedWallet, offlineSigner } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: { chainId: 'atlantic-1', restUrl: '', rpcUrl: ''})
```

### Клиент для  запросов

Чтобы запрашивать данные через RPC, вам нужен queryClient, подключенный к RPC.

```
import { useQueryClient } from '@sei-js/react';

const { restUrl } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: 'testnet' })
const { queryClient, accounts } = useQueryClient(restUrl)

//Query balances
const { balances } = await queryClient.cosmos.bank.v1beta1.allBalances({ address: accounts[0].address })
```

### Клиент для подписи

Для подписания транзакций или исполнения контрактов вам нужен клиент для подписи. Используя автономную подпись и rpcUrl из хука useWallet, вы можете легко получить клиент для подписи для вашего подключенного кошелька.

#### Перевод токенов

```
import { useWallet, useSigningClient } from '@sei-js/react';
import { calculateFee, GasPrice } from '@cosmjs/stargate';

const { rpcUrl, offlineSigner, accounts } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: 'testnet' });
const { signingClient } = useSigningClient(rpcUrl, offlineSigner);

const fee = calculateFee(150000, GasPrice.fromString('3750usei'));
const transferAmount = { amount: SEND_AMOUNT, denom: TOKEN_DENOM };

const sendResponse = await signingClient.sendTokens(accounts[0], DESTINATION_ADDRESSS, [transferAmount], fee);
```

#### Перевод через IBC

Переводы через IBC требуют наличия мостов и наличия id канала назначения до начала операции перевода.&#x20;

```
import { useWallet, useSigningClient } from '@sei-js/react';
import { calculateFee, GasPrice } from '@cosmjs/stargate';

const { rpcUrl, offlineSigner, accounts } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: 'testnet' });
const { signingClient } = useSigningClient(rpcUrl, offlineSigner);

const fee = calculateFee(150000, GasPrice.fromString('3750usei'));
const transferAmount = { amount: SEND_AMOUNT, denom: TOKEN_DENOM };

const ibcResponse = await signingClient.sendIbcTokens(accounts[0].address, DESTINATION_ADDRESSS, transferAmount, 'transfer', CHANNEL_ID, undefined, undefined, fee)
```

#### Исполнение контракта (минт)

```
import { useWallet, useSigningClient } from '@sei-js/react';

const { rpcUrl, offlineSigner, accounts } = useWallet(window, { inputWallet: "leap", autoconnect: true, chainConfiguration: 'testnet' });
const { signingClient } = useSigningClient(rpcUrl, offlineSigner);

const account = accounts[0];
const mintMsg = { mint: {} };

const msg = {
            typeUrl: "/cosmwasm.wasm.v1.MsgExecuteContract",
            value: {
                sender: account.address,
                contract: CONTRACT_ADDR,
                msg: toUtf8(JSON.stringify(mintMsg)),
                funds: [],
            }
 }

const result = await signingClient.signAndBroadcast(account.address, [msg], fee);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://seinetwork.gitbook.io/docs/front-end-development/javascript-tutorial.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.