Чтение данных из нашего контракта

📚Lecture Notes

AНа данный момент мы внедрили функциональность авторизации конечных пользователей для взаимодействия с нашим контрактом.

Давайте теперь подключим наш DApp к нашему фактическому контракту, который мы развернули в главе 5.

Есть несколько требований, о которых вам нужно позаботиться, чтобы правильно работать с шагами, которые мы должны пройти на этом и предстоящих уроках:

1. Мы собираемся работать с tesnet. Пожалуйста, убедитесь, что вы развернули свой контракт в главе 4 / Урок 5 в тестовой сети.
2. Убедитесь, что в главе 4 / Урок 5 вы развернули свой контракт с надлежащими исходными данными, а именно: счетная стоимость
3. Адрес последнего отправителя
   
   Адрес владельца - это должен быть ваш активный адрес кошелька в тестовой сети, потому что вы собираетесь выполнять операции по выводу средств, и, как вы помните, логика нашего контракта откажется от любых попыток вывести средства, которые будут сделаны не владельцами.
   
4. Убедитесь, что у вас есть монеты тестовой сети. Вы можете легко получить их here.

На данный момент я предполагаю, что ваш контракт из главы 4 / Урок 5 развернут в тестовой сети, и вы знаете его адрес.

Вот адрес моего контракта:

EQCS7PUYXVFI-4uvP1_vZsMVqLDmzwuimhEPtsyQKIcdeNPu

Как вы помните, мы уже сделали некоторые бездействия с нашим контрактом во время написания тестов. Нам пришлось создать файл обертки, который помогал нам отправлять внутренние сообщения в наш контракт, а также запускать методы геттера. Приятный сюрприз - мы можем использовать один и тот же файл обертки :)

Давайте создадим новые контракты папок в нашей папке src и скопируем file wrappers/MainContract.ts из нашей предыдущей главы. Вы также можете найти его содержимое here in my published repository.

Файл упаковки контракта для нашего DApp теперь находится по адресу src/contracts/MainContract.ts.

Теперь у нас есть правильная обертка для контракта, но как на самом деле установить связь с контрактом onchain из браузера? В главе 3 мы определяли, развернут ли контракт или нет, и использовали экземпляр TonClient из библиотеки ton. Он использовал поставщика RPC с тональным доступом для извлечения информации из цепочки (thanks to Orbs team) И отправьте запросы на наш контракт. На этом уроке мы будем использовать ту же логику.

Прежде чем мы начнем, давайте сделаем «очень React», мы реализуем React-хук общего назначения, который поможет нам в инициализации асинхронных объектов. Мы будем использовать его для связи с TonClient.

Create the file src/hooks/useAsyncInitialize.ts with the following content:

import { useEffect, useState } from "react";

export function useAsyncInitialize<T>(
func: () => Promise<T>,
deps: any[] = []
) {
const [state, setState] = useState<T | undefined>();
useEffect(() => {
(async () => {
setState(await func());
})();
}, deps);

return state;
}

Затем мы создадим еще один React-хук, который будет полагаться на useAsyncInitialize и инициализирует RPC-клиент в нашем приложении. Как мы уже упоминали выше, мы будем использовать TON Access Что предоставит нам бесплатный доступ к API. Он также децентрализован, что является предпочтительным способом доступа к сети.

Создайте файл src/hooks/useTonClient.ts со следующим содержимым:

import { getHttpEndpoint } from '@orbs-network/ton-access';
import { TonClient } from 'ton';
import { useAsyncInitialize } from './useAsyncInitialize';

export function useTonClient() {
return useAsyncInitialize(
async () =>
new TonClient({
endpoint: await getHttpEndpoint({ network: 'testnet' }),
})
);
}

Давайте создадим еще один хук под названием useMainContract(), который примет адрес в цепочке развернутого контракта и запустит метод геттера нашего контракта (с помощью метода .getData() нашей обертки).

Код этого крючка будет выглядеть следующим образом:

Please be sure to replace the contract address with the one of your deployed contract

На данный момент мы готовы представить данные, которые мы прочитали из цепочки, в наш интерфейс. Давайте обновим наш src/App.tsx, чтобы иметь следующий код:

Отлично, на данный момент мы все готовы, и данные нашего контракта легко считываются из цепочки. Обратите внимание, что его можно прочитать, даже если мы не авторизовались с помощью TON Connect, потому что это только для чтения, нам нужна авторизация только тогда, когда мы хотим выполнить какие-то действия типа "записи".

На следующем уроке мы выполним эти интерактивные действия для отправки транзакций по приращению, вносу и выводу средств.

P.S. Кредиты за вдохновение на большом коде в этом уроке идут к потрясающему Shahar Yakir from Orbs team.