Перевод
+``` + +Это формат HTML (точнее, [JSX](https://react.dev/learn/writing-markup-with-jsx)) компонента. + +#### `server/noir/src/main.nr` {#server-noir-src-main-nr} + +[Этот файл](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/src/main.nr) является фактическим кодом с нулевым разглашением. + +``` +use std::hash::pedersen_hash; +``` + +[Хэш Педерсена](https://rya-sge.github.io/access-denied/2024/05/07/pedersen-hash-function/) предоставляется стандартной библиотекой [Noir](https://noir-lang.org/docs/noir/standard_library/cryptographic_primitives/hashes#pedersen_hash). Доказательства с нулевым разглашением обычно используют эту хэш-функцию. Ее гораздо проще вычислять внутри [арифметических схем](https://rareskills.io/post/arithmetic-circuit) по сравнению со стандартными хэш-функциями. + +``` +use keccak256::keccak256; +use dep::ecrecover; +``` + +Эти две функции являются внешними библиотеками, определенными в [`Nargo.toml`](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/Nargo.toml). Они представляют собой именно то, для чего они названы: функция, которая вычисляет [хэш keccak256](https://emn178.github.io/online-tools/keccak_256.html), и функция, которая проверяет подписи Ethereum и восстанавливает адрес Ethereum подписывающего. + +``` +global ACCOUNT_NUMBER : u32 = 5; +``` + +Noir вдохновлен [Rust](https://www.rust-lang.org/). Переменные по умолчанию являются константами. Так мы определяем глобальные константы конфигурации. В частности, `ACCOUNT_NUMBER` — это количество аккаунтов, которые мы храним. + +Типы данных с именем `uGreeter
+Greeter
+ { + !readResults.isError && !readResults.isLoading && ++``` + +Создайте компонент `ShowGreeting` (описан ниже), но только если приветствие было успешно прочитано из блокчейна. + +```tsx + +``` + +Это поле для ввода текста, где пользователь может установить новое приветствие. Каждый раз, когда пользователь нажимает клавишу, мы вызываем `greetingChange`, который вызывает `setNewGreeting`. Поскольку `setNewGreeting` происходит из хука `useState`, это заставляет компонент `Greeter` отрисовываться снова. Это означает, что: + +- Нам нужно указать `value`, чтобы сохранить значение нового приветствия, иначе оно вернется к значению по умолчанию — пустой строке. +- `usePrepareContractWrite` вызывается каждый раз, когда `newGreeting` меняется, что означает, что в подготовленной транзакции всегда будет самое последнее `newGreeting`. + +```tsx + +``` + +Если `workingTx.write` отсутствует, значит, мы все еще ждем информацию, необходимую для отправки обновления приветствия, поэтому кнопка отключена. Если значение `workingTx.write` есть, то это функция, которую нужно вызвать для отправки транзакции. + +```tsx +
+
+```
+
+Мы не хотим загромождать пользовательский интерфейс всей информацией, поэтому, чтобы можно было просматривать или скрывать ее, мы используем тег [`details`](https://www.w3schools.com/tags/tag_details.asp).
+
+```tsx
+
+
+}
+```
+
+Закройте различные HTML-теги.
+
+##### Финальный `export` {#the-final-export}
+
+```tsx
+export { Greeter }
+```
+
+Компонент `Greeter` — это тот, который нам нужно экспортировать для приложения.
+
+#### `src/wagmi.ts` {#wagmi-ts}
+
+Наконец, различные определения, связанные с WAGMI, находятся в `src/wagmi.ts`. Я не буду здесь все объяснять, потому что большая часть — это шаблонный код, который вам вряд ли понадобится менять.
+
+Код здесь не совсем такой же, как [на github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts), потому что позже в статье мы добавляем еще одну сеть ([Redstone Holesky](https://redstone.xyz/docs/network-info)).
+
+```ts
+import { getDefaultWallets } from '@rainbow-me/rainbowkit'
+import { configureChains, createConfig } from 'wagmi'
+import { holesky, sepolia } from 'wagmi/chains'
+```
+
+Импортируйте блокчейны, которые поддерживает приложение. Вы можете увидеть список поддерживаемых сетей [на GitHub viem](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions).
+
+```ts
+import { publicProvider } from 'wagmi/providers/public'
+
+const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575'
+```
+
+Чтобы использовать [WalletConnect](https://walletconnect.com/), вам нужен идентификатор проекта для вашего приложения. Вы можете получить его на [cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in).
+
+```ts
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia ],
+ [
+ publicProvider(),
+ ],
+)
+
+const { connectors } = getDefaultWallets({
+ appName: 'My wagmi + RainbowKit App',
+ chains,
+ projectId: walletConnectProjectId,
+})
+
+export const config = createConfig({
+ autoConnect: true,
+ connectors,
+ publicClient,
+ webSocketPublicClient,
+})
+
+export { chains }
+```
+
+### Добавление другого блокчейна {#add-blockchain}
+
+В наши дни существует множество [решений для масштабирования L2](/layer-2/), и вы, возможно, захотите поддержать некоторые, которые viem еще не поддерживает. Для этого вы изменяете `src/wagmi.ts`. Эти инструкции объясняют, как добавить [Redstone Holesky](https://redstone.xyz/docs/network-info).
+
+1. Импортируйте тип `defineChain` из viem.
+
+ ```ts
+ import { defineChain } from 'viem'
+ ```
+
+2. Добавьте определение сети.
+
+ ```ts
+ const redstoneHolesky = defineChain({
+ id: 17_001,
+ name: 'Redstone Holesky',
+ network: 'redstone-holesky',
+ nativeCurrency: {
+ decimals: 18,
+ name: 'Ether',
+ symbol: 'ETH',
+ },
+ rpcUrls: {
+ default: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ public: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ },
+ blockExplorers: {
+ default: { name: 'Explorer', url: 'https://explorer.holesky.redstone.xyz' },
+ },
+ })
+ ```
+
+3. Добавьте новую сеть в вызов `configureChains`.
+
+ ```ts
+ const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia, redstoneHolesky ],
+ [ publicProvider(), ],
+ )
+ ```
+
+4. Убедитесь, что приложение знает адрес ваших контрактов в новой сети. В этом случае мы изменяем `src/components/Greeter.tsx`:
+
+ ```ts
+ const contractAddrs : AddressPerBlockchainType = {
+ // Holesky
+ 17000: '0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8',
+
+ // Redstone Holesky
+ 17001: '0x4919517f82a1B89a32392E1BF72ec827ba9986D3',
+
+ // Sepolia
+ 11155111: '0x7143d5c190F048C8d19fe325b748b081903E3BF0'
+ }
+ ```
+
+## Заключение {#conclusion}
+
+Конечно, вас не особо волнует предоставление пользовательского интерфейса для `Greeter`. Вы хотите создать пользовательский интерфейс для своих собственных контрактов. Чтобы создать собственное приложение, выполните следующие шаги:
+
+1. Укажите, что нужно создать приложение wagmi.
+
+ ```sh copy
+ pnpm create wagmi
+ ```
+
+2. Назовите приложение.
+
+3. Выберите фреймворк **React**.
+
+4. Выберите вариант **Vite**.
+
+5. Вы можете [добавить Rainbow kit](https://www.rainbowkit.com/docs/installation#manual-setup).
+
+Теперь идите и сделайте свои контракты пригодными для использования во всем мире.
+
+[Больше моих работ смотрите здесь](https://cryptodocguy.pro/).
+
diff --git a/public/content/translations/ru/developers/tutorials/deploying-your-first-smart-contract/index.md b/public/content/translations/ru/developers/tutorials/deploying-your-first-smart-contract/index.md
new file mode 100644
index 00000000000..7c657b2be6f
--- /dev/null
+++ b/public/content/translations/ru/developers/tutorials/deploying-your-first-smart-contract/index.md
@@ -0,0 +1,101 @@
+---
+title: "Развертывание вашего первого смарт-контракта"
+description: "Введение в развертывание вашего первого смарт-контракта в тестовой сети Ethereum"
+author: "jdourlens"
+tags:
+ [
+ "Умные контракты",
+ "remix",
+ "твердость",
+ "развертывание"
+ ]
+skill: beginner
+lang: ru
+published: 2020-04-03
+source: EthereumDev
+sourceUrl: https://ethereumdev.io/deploying-your-first-smart-contract/
+address: "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE"
+---
+
+Полагаю, вы так же, как и мы, с нетерпением ждете возможности [развернуть](/developers/docs/smart-contracts/deploying/) и повзаимодействовать со своим первым [смарт-контрактом](/developers/docs/smart-contracts/) в блокчейне Ethereum.
+
+Не волнуйтесь, так как это наш первый смарт-контракт, мы развернем его в [локальной тестовой сети](/developers/docs/networks/), поэтому его развертывание и эксперименты с ним будут для вас совершенно бесплатными.
+
+## Написание нашего контракта {#writing-our-contract}
+
+Первым делом [посетите Remix](https://remix.ethereum.org/) и создайте новый файл. В левой верхней части интерфейса Remix добавьте новый файл и введите желаемое имя файла.
+
+
+
+В новый файл мы вставим следующий код.
+
+```solidity
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.5.17;
+
+contract Counter {
+
+ // Открытая переменная типа unsigned int для хранения количества подсчетов
+ uint256 public count = 0;
+
+ // Функция, которая увеличивает наш счетчик
+ function increment() public {
+ count += 1;
+ }
+
+ // Необязательный геттер для получения значения счетчика
+ function getCount() public view returns (uint256) {
+ return count;
+ }
+
+}
+```
+
+Если вы знакомы с программированием, вы легко догадаетесь, что делает эта программа. Вот построчное объяснение:
+
+- Строка 4: мы определяем контракт с именем `Counter`.
+- Строка 7: наш контракт хранит одно беззнаковое целое число с именем `count`, начальное значение которого равно 0.
+- Строка 10: первая функция изменит состояние контракта и увеличит (`increment()`) значение нашей переменной `count`.
+- Строка 15: вторая функция — это просто геттер, позволяющий считывать значение переменной `count` извне смарт-контракта. Обратите внимание, что, поскольку мы определили нашу переменную `count` как public, в этом нет необходимости, но это показано в качестве примера.
+
+Это все, что касается нашего первого простого смарт-контракта. Как вы, возможно, знаете, он похож на класс из языков ООП (объектно-ориентированного программирования), таких как Java или C++. Теперь пришло время поэкспериментировать с нашим контрактом.
+
+## Развертывание нашего контракта {#deploying-our-contract}
+
+Поскольку мы написали наш самый первый смарт-контракт, теперь мы развернем его в блокчейне, чтобы поэкспериментировать с ним.
+
+[Развертывание смарт-контракта в блокчейне](/developers/docs/smart-contracts/deploying/) — это, по сути, просто отправка транзакции, содержащей код скомпилированного смарт-контракта, без указания получателей.
+
+Сначала мы [скомпилируем контракт](/developers/docs/smart-contracts/compiling/), нажав на значок компиляции в левой части:
+
+
+
+Затем нажмите кнопку компиляции:
+
+
+
+Вы можете выбрать опцию «Auto compile», чтобы контракт всегда компилировался при сохранении содержимого в текстовом редакторе.
+
+Затем перейдите на экран «deploy and run transactions»:
+
+
+
+Когда вы окажетесь на экране «deploy and run transactions», дважды проверьте, что отображается имя вашего контракта, и нажмите «Deploy». Как видно в верхней части страницы, текущая среда — «JavaScript VM». Это означает, что мы будем развертывать наш смарт-контракт и взаимодействовать с ним в локальном тестовом блокчейне, чтобы иметь возможность проводить тестирование быстрее и без каких-либо комиссий.
+
+
+
+После нажатия кнопки «Deploy» вы увидите свой контракт в нижней части экрана. Нажмите на стрелку слева, чтобы развернуть его и увидеть содержимое нашего контракта. Это наша переменная `counter`, наша функция `increment()` и геттер `getCounter()`.
+
+Если вы нажмете на кнопку `count` или `getCount`, она получит и отобразит содержимое переменной `count` контракта. Поскольку мы еще не вызывали функцию `increment`, она должна отобразить 0.
+
+
+
+Теперь давайте вызовем функцию `increment`, нажав на соответствующую кнопку. В нижней части окна вы увидите журналы выполненных транзакций. Вы увидите, что журналы отличаются, когда вы нажимаете кнопку для получения данных, а не кнопку `increment`. Это потому, что чтение данных из блокчейна не требует каких-либо транзакций (записи) или комиссий. Потому что только изменение состояния блокчейна требует выполнения транзакции:
+
+
+
+После нажатия кнопки `increment`, которая создаст транзакцию для вызова нашей функции `increment()`, если мы снова нажмем на кнопки `count` или `getCount`, мы прочтем новое обновленное состояние нашего смарт-контракта, в котором переменная `count` будет больше 0.
+
+
+
+В следующем руководстве мы рассмотрим, [как добавлять события в смарт-контракты](/developers/tutorials/logging-events-smart-contracts/). Ведение журнала событий — это удобный способ отладить ваш смарт-контракт и понять, что происходит при вызове функции.
diff --git a/public/content/translations/ru/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md b/public/content/translations/ru/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
new file mode 100644
index 00000000000..9955e911e61
--- /dev/null
+++ b/public/content/translations/ru/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
@@ -0,0 +1,372 @@
+---
+title: "Как разработать и протестировать децентрализованное приложение в локальной многоклиентской тестовой сети"
+description: "В этом руководстве вы сначала узнаете, как создать и настроить локальную многоклиентскую тестовую сеть Ethereum, а затем использовать эту тестовую сеть для развертывания и тестирования децентрализованного приложения."
+author: "Tedi Mitiku"
+tags:
+ [
+ "клиенты",
+ "узлы",
+ "Умные контракты",
+ "композиционность",
+ "уровень консенсуса",
+ "Уровень исполнения",
+ "тестирование"
+ ]
+skill: intermediate
+lang: ru
+published: 2023-04-11
+---
+
+## Введение {#introduction}
+
+Это руководство проведет вас через процесс создания настраиваемой локальной тестовой сети Ethereum, развертывания в ней смарт-контракта и использования тестовой сети для запуска тестов для вашего децентрализованного приложения. Это руководство предназначено для разработчиков децентрализованных приложений, которые хотят разрабатывать и тестировать свои децентрализованные приложения локально с различными конфигурациями сети перед развертыванием в работающую тестовую сеть или основную сеть.
+
+В этом руководстве вы:
+
+- Создадите локальную тестовую сеть Ethereum с помощью [`eth-network-package`](https://github.com/kurtosis-tech/eth-network-package), используя [Kurtosis](https://www.kurtosis.com/),
+- Подключите среду разработки децентрализованных приложений Hardhat к локальной тестовой сети, чтобы скомпилировать, развернуть и протестировать децентрализованное приложение, и
+- Настроите локальную тестовую сеть, включая такие параметры, как количество узлов и конкретные пары клиентов EL/CL, чтобы обеспечить рабочие процессы разработки и тестирования для различных конфигураций сети.
+
+### Что такое Kurtosis? {#what-is-kurtosis}
+
+[Kurtosis](https://www.kurtosis.com/) — это компонуемая система сборки, предназначенная для настройки многоконтейнерных тестовых сред. Он специально позволяет разработчикам создавать воспроизводимые среды, требующие динамической логики настройки, например, тестовые сети блокчейна.
+
+В этом руководстве пакет Kurtosis eth-network-package запускает локальную тестовую сеть Ethereum с поддержкой клиента уровня исполнения (EL) [`geth`](https://geth.ethereum.org/), а также клиентов уровня консенсуса (CL) [`teku`](https://consensys.io/teku), [`lighthouse`](https://lighthouse.sigmaprime.io/) и [`lodestar`](https://lodestar.chainsafe.io/). Этот пакет служит настраиваемой и компонуемой альтернативой сетям во фреймворках, таких как Hardhat Network, Ganache и Anvil. Kurtosis предлагает разработчикам больший контроль и гибкость над используемыми ими тестовыми сетями, что является основной причиной, по которой [Ethereum Foundation использовал Kurtosis для тестирования Слияния](https://www.kurtosis.com/blog/testing-the-ethereum-merge) и продолжает использовать его для тестирования обновлений сети.
+
+## Настройка Kurtosis {#setting-up-kurtosis}
+
+Прежде чем продолжить, убедитесь, что у вас есть:
+
+- [Установленный и запущенный движок Docker](https://docs.kurtosis.com/install/#i-install--start-docker) на вашем локальном компьютере
+- [Установленный Kurtosis CLI](https://docs.kurtosis.com/install#ii-install-the-cli) (или обновленный до последней версии, если CLI у вас уже установлен)
+- Установленные [Node.js](https://nodejs.org/en), [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) и [npx](https://www.npmjs.com/package/npx) (для вашей среды децентрализованных приложений)
+
+## Создание локальной тестовой сети Ethereum {#instantiate-testnet}
+
+Чтобы запустить локальную тестовую сеть Ethereum, выполните:
+
+```python
+kurtosis --enclave local-eth-testnet run github.com/kurtosis-tech/eth-network-package
+```
+
+Примечание: эта команда дает вашей сети имя «local-eth-testnet» с помощью флага `--enclave`.
+
+Kurtosis выведет на экран шаги, которые он выполняет «под капотом» в процессе интерпретации, проверки и последующего выполнения инструкций. В конце вы должны увидеть вывод, похожий на следующий:
+
+```python
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+INFO[2023-04-04T18:09:44-04:00] || Created enclave: local-eth-testnet ||
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+Name: local-eth-testnet
+UUID: 39372d756ae8
+Status: RUNNING
+Creation Time: Tue, 04 Apr 2023 18:09:03 EDT
+
+========================================= Files Artifacts =========================================
+UUID Name
+d4085a064230 cl-genesis-data
+1c62cb792e4c el-genesis-data
+bd60489b73a7 genesis-generation-config-cl
+b2e593fe5228 genesis-generation-config-el
+d552a54acf78 geth-prefunded-keys
+5f7e661eb838 prysm-password
+054e7338bb59 validator-keystore-0
+
+========================================== User Services ==========================================
+UUID Name Ports Status
+e20f129ee0c5 cl-client-0-beacon http: 4000/tcp -> {attrs.name}
+
+ {JSON.stringify(attrs.object, null, 2)}
+```
+
+Большинство полей отображаются с помощью [`JSON.stringify`](https://www.w3schools.com/js/js_json_stringify.asp).
+
+```tsx
+
+ { funs.length > 0 &&
+ <>
+ Функции:
+ -
+```
+
+Исключение составляют функции, которые не являются частью [стандарта JSON](https://www.json.org/json-en.html), поэтому их нужно отображать отдельно.
+
+```tsx
+ {funs.map((f, i) =>
+```
+
+Внутри JSX код внутри `{` фигурных скобок `}` интерпретируется как JavaScript. Затем код внутри `(` круглых скобок `)` снова интерпретируется как JSX.
+
+```tsx
+ (
- {f} ) + )} +``` + +React требует, чтобы теги в [дереве DOM](https://www.w3schools.com/js/js_htmldom.asp) имели уникальные идентификаторы. Это означает, что дочерние элементы одного и того же тега (в данном случае [неупорядоченного списка](https://www.w3schools.com/tags/tag_ul.asp)) должны иметь разные атрибуты `key`. + +```tsx +
Hello ${loginResponse.extract.nameID}
+ + + `) + res.send(); +``` + +Отправьте HTML-ответ, чтобы показать пользователю, что мы получили запрос на вход. + +```typescript + } catch (err) { + console.error('Error processing SAML response:', err); + res.status(400).send('SAML authentication failed'); + } + } +) +``` + +Сообщите пользователю в случае сбоя. + +```typescript +spRouter.get('/login', +``` + +Создайте запрос на вход, когда браузер пытается получить эту страницу. Это обработчик для шага 1 на диаграмме последовательности выше. + +```typescript + async (req, res) => { + const loginRequest = await sp.createLoginRequest(idp, "post") +``` + +Получите информацию для отправки запроса на вход. + +```typescript + res.send(` + + + +``` + +Эта страница автоматически отправляет форму (см. ниже). Таким образом, пользователю не нужно ничего делать для перенаправления. Это шаг 2 на диаграмме последовательности выше. + +```typescript + + + + `) + } +) + +app.use(express.urlencoded({extended: true})) +``` + +[Это промежуточное ПО](https://expressjs.com/en/5x/api.html#express.urlencoded) читает тело [HTTP-запроса](https://www.tutorialspoint.com/http/http_requests.htm). По умолчанию express игнорирует его, потому что большинство запросов этого не требуют. Нам это нужно, потому что POST использует тело запроса. + +```typescript +app.use(`/${config.spDir}`, spRouter) +``` + +Подключите маршрутизатор в каталоге поставщика услуг (`/sp`). + +```typescript +app.get("/", (req, res) => { + res.send(` + + + + + + `) +}) +``` + +Если браузер пытается получить корневой каталог, предоставьте ему ссылку на страницу входа. + +```typescript +app.listen(config.spPort, () => { + console.log(`service provider is running on http://${config.spHostname}:${config.spPort}`) +}) +``` + +Прослушивайте `spPort` с помощью этого приложения express. + +#### src/idp.mts + +Это поставщик удостоверений. Он очень похож на поставщика услуг, приведенные ниже объяснения относятся к тем частям, которые отличаются. + +```typescript +const xmlParser = new (await import("fast-xml-parser")).XMLParser( + { + ignoreAttributes: false, // Сохранять атрибуты + attributeNamePrefix: "@_", // Префикс для атрибутов + } +) +``` + +Нам нужно прочитать и понять XML-запрос, который мы получаем от поставщика услуг. + +```typescript +const getLoginPage = requestId => ` +``` + +Эта функция создает страницу с автоматически отправляемой формой, которая возвращается на шаге 4 диаграммы последовательности выше. + +```typescript + + +Страница входа
+ + + + +const idpRouter = express.Router() + +idpRouter.post("/loginSubmitted", async (req, res) => { + const loginResponse = await idp.createLoginResponse( +``` + +Это обработчик для шага 5 на диаграмме последовательности выше. [`idp.createLoginResponse`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L73-L125) создает ответ на запрос входа. + +```typescript + sp, + { + authnContextClassRef: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport', + audience: sp.entityID, +``` + +Аудитория — это поставщик услуг. + +```typescript + extract: { + request: { + id: req.body.requestId + } + }, +``` + +Информация, извлеченная из запроса. Единственный параметр, который нас интересует в запросе, — это requestId, который позволяет поставщику услуг сопоставлять запросы и ответы на них. + +```typescript + signingKey: { privateKey: idpPrivateKey, publicKey: config.idpCert } // Обеспечить подпись +``` + +Нам нужен `signingKey` для получения данных для подписи ответа. Поставщик услуг не доверяет неподписанным запросам. + +```typescript + }, + "post", + { + email: req.body.email +``` + +Это поле с информацией о пользователе, которую мы отправляем обратно поставщику услуг. + +```typescript + } + ); + + res.send(` + + + + + + + + `) +}) +``` + +Опять же, используйте автоматически отправляемую форму. Это шаг 6 на диаграмме последовательности выше. + +```typescript + +// Конечная точка IdP для запросов на вход +idpRouter.post(`/login`, +``` + +Это конечная точка, которая получает запрос на вход от поставщика услуг. Это обработчик для шага 3 на диаграмме последовательности выше. + +```typescript + async (req, res) => { + try { + // Обходной путь, потому что мне не удалось заставить parseLoginRequest работать. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getLoginPage(samlRequest["samlp:AuthnRequest"]["@_ID"])) +``` + +Мы должны иметь возможность использовать [`idp.parseLoginRequest`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L127-L144) для чтения ID запроса на аутентификацию. Однако мне не удалось заставить его работать, и не стоило тратить на это много времени, поэтому я просто использую [XML-парсер общего назначения](https://www.npmjs.com/package/fast-xml-parser). Информация, которая нам нужна, — это атрибут `ID` внутри тега `Пожалуйста, подпишите
+ ++ + + +` +} +``` + +Остальное — просто стандартный HTML. + +```typescript +idpRouter.get("/signature/:nonce/:account/:signature", async (req, res) => { +``` + +Это обработчик для шага 5 на диаграмме последовательности. + +```typescript + const requestId = nonces[req.params.nonce] + if (requestId === undefined) { + res.send("Bad nonce") + return ; + } + + nonces[req.params.nonce] = undefined +``` + +Получите ID запроса и удалите nonce из `nonces`, чтобы убедиться, что его нельзя использовать повторно. + +```typescript + try { +``` + +Поскольку существует так много способов, которыми подпись может быть недействительной, мы оборачиваем это в `try ...` блок `catch`, чтобы перехватить любые возникающие ошибки. + +```typescript + const validSignature = await verifyMessage({ + address: req.params.account, + message: `${loginPrompt}${req.params.nonce}`, + signature: req.params.signature + }) +``` + +Используйте [`verifyMessage`](https://viem.sh/docs/actions/public/verifyMessage#verifymessage) для реализации шага 5.5 на диаграмме последовательности. + +```typescript + if (!validSignature) + throw("Bad signature") + } catch (err) { + res.send("Error:" + err) + return ; + } +``` + +Остальная часть обработчика эквивалентна тому, что мы делали в обработчике `/loginSubmitted` ранее, за исключением одного небольшого изменения. + +```typescript + const loginResponse = await idp.createLoginResponse( + . + . + . + { + email: req.params.account + "@bad.email.address" + } + ); +``` + +У нас нет фактического адреса электронной почты (мы получим его в следующем разделе), поэтому пока мы возвращаем адрес Ethereum и четко помечаем его как не являющийся адресом электронной почты. + +```typescript +// Конечная точка IdP для запросов на вход +idpRouter.post(`/login`, + async (req, res) => { + try { + // Обходной путь, потому что мне не удалось заставить parseLoginRequest работать. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getSignaturePage(samlRequest["samlp:AuthnRequest"]["@_ID"])) + } catch (err) { + console.error('Error processing SAML response:', err); + res.status(400).send('SAML authentication failed'); + } + } +) +``` + +Вместо `getLoginPage` теперь используйте `getSignaturePage` в обработчике шага 3. + +## Получение адреса электронной почты + +Следующий шаг — получение адреса электронной почты, идентификатора, запрошенного поставщиком услуг. Для этого мы используем [Ethereum Attestation Service (EAS)](https://attest.org/). + +Самый простой способ получить аттестации — использовать [GraphQL API](https://docs.attest.org/docs/developer-tools/api). Мы используем этот запрос: + +``` +query GetAttestationsByRecipient { + attestations( + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } + take: 1 + ) { + data + id + attester + } +} +``` + +Этот [`schemaId`](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977) включает только адрес электронной почты. Этот запрос запрашивает аттестации этой схемы. Субъект аттестации называется `recipient`. Это всегда адрес Ethereum. + +Внимание: способ получения аттестаций здесь имеет две проблемы с безопасностью. + +- Мы обращаемся к конечной точке API, `https://optimism.easscan.org/graphql`, которая является централизованным компонентом. Мы можем получить атрибут `id`, а затем выполнить поиск он-чейн, чтобы проверить, что аттестация реальна, но конечная точка API все еще может подвергать цензуре аттестации, не сообщая нам о них. + + Эту проблему можно решить: мы могли бы запустить собственную конечную точку GraphQL и получать аттестации из логов цепи, но это излишне для наших целей. + +- Мы не смотрим на личность аттестующего. Любой может предоставить нам ложную информацию. В реальной реализации у нас был бы набор доверенных аттестующих, и мы бы рассматривали только их аттестации. + +Чтобы увидеть это в действии, остановите существующие IdP и SP и выполните следующие команды: + +```sh +git checkout email-address +pnpm install +pnpm start +``` + +Затем укажите свой адрес электронной почты. У вас есть два способа сделать это: + +- Импортируйте кошелек, используя приватный ключ, и используйте тестовый приватный ключ `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`. + +- Добавьте аттестацию для своего собственного адреса электронной почты: + + 1. Перейдите к [схеме в обозревателе аттестаций](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977). + + 2. Нажмите **Attest with Schema**. + + 3. Введите свой адрес Ethereum в качестве получателя, свой адрес электронной почты в качестве адреса электронной почты и выберите **Onchain**. Затем нажмите **Make Attestation**. + + 4. Одобрите транзакцию в своем кошельке. Вам понадобится немного ETH в [блокчейне Optimism](https://app.optimism.io/bridge/deposit), чтобы заплатить за газ. + +В любом случае, после этого перейдите по адресу [http://localhost:3000](http://localhost:3000) и следуйте инструкциям. Если вы импортировали тестовый приватный ключ, вы получите электронное письмо `test_addr_0@example.com`. Если вы использовали свой собственный адрес, это должно быть то, что вы аттестовали. + +### Подробное объяснение + + + +Новые шаги — это взаимодействие GraphQL, шаги 5.6 и 5.7. + +И снова, вот измененные части `idp.mts`. + +```typescript +import { GraphQLClient } from 'graphql-request' +import { SchemaEncoder } from '@ethereum-attestation-service/eas-sdk' +``` + +Импортируйте необходимые нам библиотеки. + +```typescript +const graphqlEndpointUrl = "https://optimism.easscan.org/graphql" +``` + +Для каждого блокчейна существует [отдельная конечная точка](https://docs.attest.org/docs/developer-tools/api). + +```typescript +const graphqlClient = new GraphQLClient(graphqlEndpointUrl, { fetch }) +``` + +Создайте новый клиент `GraphQLClient`, который мы можем использовать для запросов к конечной точке. + +```typescript +const graphqlSchema = 'string emailAddress' +const graphqlEncoder = new SchemaEncoder(graphqlSchema) +``` + +GraphQL дает нам только непрозрачный объект данных с байтами. Чтобы понять его, нам нужна схема. + +```typescript +const ethereumAddressToEmail = async ethAddr => { +``` + +Функция для получения адреса электронной почты из адреса Ethereum. + +```typescript + const query = ` + query GetAttestationsByRecipient { +``` + +Это GraphQL-запрос. + +```typescript + attestations( +``` + +Мы ищем аттестации. + +```typescript + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } +``` + +Аттестации, которые нам нужны, — это те, что находятся в нашей схеме, где получателем является `getAddress(ethAddr)`. Функция [`getAddress`](https://viem.sh/docs/utilities/getAddress#getaddress) гарантирует, что наш адрес имеет правильную [контрольную сумму](https://github.com/ethereum/ercs/blob/master/ERCS/erc-55.md). Это необходимо, поскольку GraphQL чувствителен к регистру. "0xBAD060A7", "0xBad060A7" и "0xbad060a7" — это разные значения. + +```typescript + take: 1 +``` + +Независимо от того, сколько аттестаций мы найдем, нам нужна только первая. + +```typescript + ) { + data + id + attester + } + }` +``` + +Поля, которые мы хотим получить. + +- `attester`: адрес, который отправил аттестацию. Обычно это используется для принятия решения о том, доверять ли аттестации. +- `id`: идентификатор аттестации. Вы можете использовать это значение, чтобы [прочитать аттестацию он-чейн](https://optimism.blockscout.com/address/0x4200000000000000000000000000000000000021?tab=read_proxy&source_address=0x4E0275Ea5a89e7a3c1B58411379D1a0eDdc5b088#0xa3112a64) и проверить, верна ли информация из запроса GraphQL. +- `data`: данные схемы (в данном случае адрес электронной почты). + +```typescript + const queryResult = await graphqlClient.request(query) + + if (queryResult.attestations.length == 0) + return "no_address@available.is" +``` + +Если аттестации нет, верните очевидно неверное значение, которое, однако, будет выглядеть действительным для поставщика услуг. + +```typescript + const attestationDataFields = graphqlEncoder.decodeData(queryResult.attestations[0].data) + return attestationDataFields[0].value.value +} +``` + +Если значение есть, используйте `decodeData` для его декодирования. Нам не нужны предоставляемые метаданные, только само значение. + +```typescript + const loginResponse = await idp.createLoginResponse( + sp, + { + . + . + . + }, + "post", + { + email: await ethereumAddressToEmail(req.params.account) + } + ); +``` + +Используйте новую функцию для получения адреса электронной почты. + +## Что насчет децентрализации? + +В этой конфигурации пользователи не могут выдавать себя за кого-то другого, пока мы полагаемся на надежных аттестующих для сопоставления адресов Ethereum с адресами электронной почты. Однако наш поставщик удостоверений по-прежнему является централизованным компонентом. Любой, у кого есть приватный ключ поставщика удостоверений, может отправить ложную информацию поставщику услуг. + +Возможно, есть решение с использованием [многосторонних вычислений (MPC)](https://en.wikipedia.org/wiki/Secure_multi-party_computation). Я надеюсь написать об этом в будущем руководстве. + +## Заключение + +Внедрение стандарта входа в систему, такого как подписи Ethereum, сталкивается с проблемой «курицы и яйца». Поставщики услуг хотят привлечь как можно более широкий рынок. Пользователи хотят иметь возможность получать доступ к услугам, не беспокоясь о поддержке своего стандарта входа. +Создание адаптеров, таких как Ethereum IdP, может помочь нам преодолеть это препятствие. + +[Больше моих работ смотрите здесь](https://cryptodocguy.pro/). diff --git a/public/content/translations/ru/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md b/public/content/translations/ru/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md new file mode 100644 index 00000000000..49f27578e51 --- /dev/null +++ b/public/content/translations/ru/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md @@ -0,0 +1,156 @@ +--- +title: "Начало разработки Ethereum" +description: "Это руководство для начинающих по разработке на Ethereum. Мы проведем вас от развертывания конечной точки API и выполнения запроса в командной строке до написания вашего первого скрипта web3! Опыт разработки на блокчейне не требуется!" +author: "Elan Halpern" +tags: + [ + "javascript", + "ethers.js", + "узлы", + "запросы", + "alchemy" + ] +skill: beginner +lang: ru +published: 2020-10-30 +source: Medium +sourceUrl: https://medium.com/alchemy-api/getting-started-with-ethereum-development-using-alchemy-c3d6a45c567f +--- + + + +Это руководство для начинающих по разработке на Ethereum. В этом руководстве мы будем использовать [Alchemy](https://alchemyapi.io/), ведущую платформу для разработчиков блокчейна, которая обслуживает миллионы пользователей из 70 % лучших блокчейн-приложений, включая Maker, 0x, MyEtherWallet, Dharma и Kyber. Alchemy предоставит нам доступ к конечной точке API в сети Ethereum, чтобы мы могли читать и записывать транзакции. + +Мы проведем вас от регистрации в Alchemy до написания вашего первого скрипта web3! Опыт разработки на блокчейне не требуется! + +## 1. Зарегистрируйте бесплатный аккаунт Alchemy {#sign-up-for-a-free-alchemy-account} + +Создать аккаунт в Alchemy легко, [зарегистрируйтесь бесплатно здесь](https://auth.alchemy.com/). + +## 2. Создайте приложение Alchemy {#create-an-alchemy-app} + +Чтобы взаимодействовать с сетью Ethereum и использовать продукты Alchemy, вам понадобится ключ API для аутентификации ваших запросов. + +Вы можете [создать ключи API на панели управления](https://dashboard.alchemy.com/). Чтобы создать новый ключ, перейдите в раздел «Create App» (Создать приложение), как показано ниже: + +Отдельная благодарность [_ShapeShift_](https://shapeshift.com/) _за то, что позволили нам показать их панель управления!_ + + + +Заполните данные в разделе «Create App» (Создать приложение), чтобы получить новый ключ. Здесь вы также можете увидеть приложения, которые вы создали ранее, и те, которые создала ваша команда. Получите существующие ключи, нажав «View Key» (Просмотреть ключ) для любого приложения. + + + +Вы также можете получить существующие ключи API, наведя курсор на «Apps» (Приложения) и выбрав одно из них. Здесь вы можете выбрать «View Key» (Просмотреть ключ), а также «Edit App» (Редактировать приложение), чтобы внести определенные домены в белый список, просмотреть несколько инструментов для разработчиков и аналитику. + + + +## 3. Сделайте запрос из командной строки {#make-a-request-from-the-command-line} + +Взаимодействуйте с блокчейном Ethereum через Alchemy, используя JSON-RPC и curl. + +Для запросов вручную мы рекомендуем взаимодействовать с `JSON-RPC` через `POST`-запросы. Просто передайте заголовок `Content-Type: application/json` и ваш запрос в качестве тела `POST`-запроса со следующими полями: + +- `jsonrpc`: версия JSON-RPC — в настоящее время поддерживается только `2.0`. +- `method`: метод ETH API. [См. справочник по API.](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc) +- `params`: список параметров для передачи в метод. +- `id`: идентификатор вашего запроса. Он будет возвращен в ответе, чтобы вы могли отслеживать, к какому запросу относится ответ. + +Вот пример, который можно запустить из командной строки, чтобы получить текущую цену на газ: + +```bash +curl https://eth-mainnet.alchemyapi.io/v2/demo \ +-X POST \ +-H "Content-Type: application/json" \ +-d '{"jsonrpc":"2.0","method":"eth_gasPrice","params":[],"id":73}' +``` + +_**ПРИМЕЧАНИЕ.** Замените [https://eth-mainnet.alchemyapi.io/v2/demo](https://eth-mainnet.alchemyapi.io/jsonrpc/demo) на свой собственный ключ API `https://eth-mainnet.alchemyapi.io/v2/**your-api-key`._ + +**Результаты:** + +```json +{ "id": 73,"jsonrpc": "2.0","result": "0x09184e72a000" // 10000000000000 } +``` + +## 4. Настройте свой клиент Web3 {#set-up-your-web3-client} + +**Если у вас уже есть клиент,** измените URL-адрес текущего провайдера узла на URL-адрес Alchemy с вашим ключом API: `“https://eth-mainnet.alchemyapi.io/v2/your-api-key"` + +**_ПРИМЕЧАНИЕ:_** Приведенные ниже скрипты необходимо запускать в **контексте node** или **сохранять в файл**, а не запускать из командной строки. Если у вас еще не установлены Node или npm, ознакомьтесь с этим кратким [руководством по настройке для Mac](https://app.gitbook.com/@alchemyapi/s/alchemy/guides/alchemy-for-macs). + +Существует множество [библиотек Web3](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries), которые можно интегрировать с Alchemy, однако мы рекомендуем использовать [Alchemy Web3](https://docs.alchemy.com/reference/api-overview), прямую замену web3.js, созданную и настроенную для бесперебойной работы с Alchemy. Это дает множество преимуществ, таких как автоматические повторные попытки и надежная поддержка WebSocket. + +Чтобы установить AlchemyWeb3.js, **перейдите в каталог вашего проекта** и выполните: + +**С помощью Yarn:** + +``` +yarn add @alch/alchemy-web3 +``` + +**С помощью NPM:** + +``` +npm install @alch/alchemy-web3 +``` + +Чтобы взаимодействовать с инфраструктурой узлов Alchemy, запустите в NodeJS или добавьте это в файл JavaScript: + +```js +const { createAlchemyWeb3 } = require("@alch/alchemy-web3") +const web3 = createAlchemyWeb3( + "https://eth-mainnet.alchemyapi.io/v2/your-api-key" +) +``` + +## 5. Напишите свой первый скрипт Web3! {#write-your-first-web3-script} + +Теперь, чтобы немного попрактиковаться в программировании на web3, мы напишем простой скрипт, который выводит номер последнего блока из основной сети Ethereum. + +**1. Если вы еще этого не сделали, создайте в своем терминале новый каталог проекта и перейдите в него с помощью cd:** + +``` +mkdir web3-example +cd web3-example +``` + +**2. Установите зависимость Alchemy web3 (или любую другую web3) в свой проект, если вы еще этого не сделали:** + +``` +npm install @alch/alchemy-web3 +``` + +**3. Создайте файл с именем `index.js` и добавьте в него следующее содержимое:** + +> В конечном итоге вы должны заменить `demo` своим ключом HTTP API от Alchemy. + +```js +async function main() { + const { createAlchemyWeb3 } = require("@alch/alchemy-web3") + const web3 = createAlchemyWeb3("https://eth-mainnet.alchemyapi.io/v2/demo") + const blockNumber = await web3.eth.getBlockNumber() + console.log("Последний номер блока: " + blockNumber) +} +main() +``` + +Не знакомы с асинхронностью? Ознакомьтесь с этой [статьей на Medium](https://medium.com/better-programming/understanding-async-await-in-javascript-1d81bb079b2c). + +**4.** Запустите его в терминале с помощью node\*\* + +``` +node index.js +``` + +**5.** Теперь вы должны увидеть вывод последнего номера блока в вашей консоли!\*\* + +``` +Последний номер блока: 11043912 +``` + +**Ура! Поздравляем! Вы только что написали свой первый скрипт web3 с помощью Alchemy 🎉** + +Не знаете, что делать дальше? Попробуйте развернуть свой первый смарт-контракт и попрактиковаться в программировании на Solidity с помощью нашего [руководства по созданию смарт-контракта Hello World](https://www.alchemy.com/docs/hello-world-smart-contract) или проверьте свои знания о панели управления с помощью [демо-приложения Dashboard](https://docs.alchemyapi.io/tutorials/demo-app)! + +_[Зарегистрируйтесь в Alchemy бесплатно](https://auth.alchemy.com/), ознакомьтесь с нашей [документацией](https://www.alchemy.com/docs/), а чтобы быть в курсе последних новостей, подписывайтесь на нас в [Twitter](https://twitter.com/AlchemyPlatform)_. diff --git a/public/content/translations/ru/developers/tutorials/guide-to-smart-contract-security-tools/index.md b/public/content/translations/ru/developers/tutorials/guide-to-smart-contract-security-tools/index.md new file mode 100644 index 00000000000..57923345a2d --- /dev/null +++ b/public/content/translations/ru/developers/tutorials/guide-to-smart-contract-security-tools/index.md @@ -0,0 +1,102 @@ +--- +title: "Руководство по инструментам безопасности смарт-контрактов" +description: "Обзор трех различных методов тестирования и анализа программ" +author: "Trailofbits" +lang: ru +tags: [ "твердость", "Умные контракты", "безопасность" ] +skill: intermediate +published: 2020-09-07 +source: Building secure contracts +sourceUrl: https://github.com/crytic/building-secure-contracts/tree/master/program-analysis +--- + +Мы будем использовать три различных метода тестирования и анализа программ: + +- **Статический анализ с помощью [Slither](/developers/tutorials/how-to-use-slither-to-find-smart-contract-bugs/).** Все пути программы аппроксимируются и анализируются одновременно через различные представления программы (например, граф потока управления). +- **Фазинг с помощью [Echidna](/developers/tutorials/how-to-use-echidna-to-test-smart-contracts/).** Код выполняется с псевдослучайной генерацией транзакций. Фазер попытается найти последовательность транзакций для нарушения заданного свойства. +- **Символическое выполнение с помощью [Manticore](/developers/tutorials/how-to-use-manticore-to-find-smart-contract-bugs/).** Метод формальной верификации, который преобразует каждый путь выполнения в математическую формулу, для которой можно проверить ограничения. + +Каждый метод имеет свои преимущества и недостатки и будет полезен в [конкретных случаях](#determining-security-properties): + +| Метод | Инструмент | Использование | Скорость | Пропущенные ошибки | Ложные срабатывания | +| ------------------------ | ---------- | --------------------------- | -------- | ------------------ | ------------------- | +| Статический анализ | Slither | CLI и скрипты | секунд | Средний уровень | Низкий уровень | +| Фазинг | Echidna | Свойства Solidity | минут | Низкий уровень | Отсутствуют | +| Символическое выполнение | Manticore | Свойства Solidity и скрипты | часа | Отсутствуют\* | Отсутствуют | + +\* если все пути исследованы без тайм-аута + +**Slither** анализирует контракты за считаные секунды, однако статический анализ может приводить к ложным срабатываниям и будет менее пригоден для сложных проверок (например, арифметических). Запускайте Slither через API для простого доступа к встроенным детекторам или через API для пользовательских проверок. + +Выполнение **Echidna** занимает несколько минут, и она выдает только истинно-положительные результаты. Echidna проверяет предоставленные пользователем свойства безопасности, написанные на Solidity. Она может пропускать ошибки, поскольку основана на случайном исследовании. + +**Manticore** выполняет самый "тяжеловесный" анализ. Как и Echidna, Manticore проверяет предоставленные пользователем свойства. Ее выполнение занимает больше времени, но она может доказать достоверность свойства и не сообщает о ложных срабатываниях. + +## Предлагаемый рабочий процесс {#suggested-workflow} + +Начните со встроенных детекторов Slither, чтобы убедиться, что простые ошибки отсутствуют сейчас и не появятся позже. Используйте Slither для проверки свойств, связанных с наследованием, зависимостями переменных и структурными проблемами. По мере роста кодовой базы используйте Echidna для тестирования более сложных свойств конечного автомата. Вернитесь к Slither для разработки пользовательских проверок для защиты, недоступной в Solidity, например, для защиты от переопределения функции. Наконец, используйте Manticore для целенаправленной проверки критически важных свойств безопасности, например, арифметических операций. + +- Используйте CLI Slither для выявления распространенных проблем +- Используйте Echidna для тестирования высокоуровневых свойств безопасности вашего контракта +- Используйте Slither для написания пользовательских статических проверок +- Используйте Manticore, когда вам потребуется углубленная проверка критически важных свойств безопасности + +**Примечание о модульных тестах**. Модульные тесты необходимы для создания высококачественного программного обеспечения. Однако эти методы не очень подходят для поиска уязвимостей в системе безопасности. Обычно они используются для тестирования позитивного поведения кода (т. е. код работает так, как ожидалось в обычном контексте), в то время как уязвимости в системе безопасности, как правило, находятся в крайних случаях, которые разработчики не учли. В нашем исследовании десятков аудитов безопасности смарт-контрактов [покрытие модульными тестами не повлияло на количество или серьезность уязвимостей](https://blog.trailofbits.com/2019/08/08/246-findings-from-our-smart-contract-audits-an-executive-summary/), которые мы обнаружили в коде наших клиентов. + +## Определение свойств безопасности {#determining-security-properties} + +Чтобы эффективно тестировать и проверять ваш код, вы должны определить области, требующие внимания. Поскольку ваши ресурсы, затрачиваемые на безопасность, ограничены, важно определить слабые или наиболее ценные части вашей кодовой базы, чтобы оптимизировать ваши усилия. Моделирование угроз может помочь. Рассмотрите следующие материалы: + +- [Быстрая оценка рисков (Rapid Risk Assessments)](https://infosec.mozilla.org/guidelines/risk/rapid_risk_assessment.html) (наш предпочтительный подход при нехватке времени) +- [Руководство по моделированию угроз для систем, ориентированных на данные (Guide to Data-Centric System Threat Modeling)](https://csrc.nist.gov/pubs/sp/800/154/ipd) (также известно как NIST 800-154) +- [Моделирование угроз по Шостаку (Shostack threat modeling)](https://www.amazon.com/Threat-Modeling-Designing-Adam-Shostack/dp/1118809998) +- [STRIDE](https://wikipedia.org/wiki/STRIDE_\(security\)) / [DREAD](https://wikipedia.org/wiki/DREAD_\(risk_assessment_model\)) +- [PASTA](https://wikipedia.org/wiki/Threat_model#P.A.S.T.A.) +- [Использование утверждений (Use of Assertions)](https://blog.regehr.org/archives/1091) + +### Компоненты {#components} + +Знание того, что вы хотите проверить, также поможет вам выбрать правильный инструмент. + +Общие области, которые часто актуальны для смарт-контрактов, включают в себя: + +- **Конечный автомат.** Большинство контрактов можно представить в виде конечного автомата. Рассмотрите возможность проверки того, что (1) недопустимое состояние не может быть достигнуто, (2) если состояние является допустимым, оно может быть достигнуто и (3) никакое состояние не блокирует контракт. + + - Echidna и Manticore — предпочтительные инструменты для тестирования спецификаций конечного автомата. + +- **Средства контроля доступа.** Если в вашей системе есть привилегированные пользователи (например, владелец, контроллеры и т. д.) вы должны убедиться, что (1) каждый пользователь может выполнять только разрешенные действия и (2) ни один пользователь не может заблокировать действия более привилегированного пользователя. + + - Slither, Echidna и Manticore могут проверять правильность контроля доступа. Например, Slither может проверить, что только у функций из белого списка отсутствует модификатор onlyOwner. Echidna и Manticore полезны для более сложного контроля доступа, например, когда разрешение предоставляется только в том случае, если контракт достигает определенного состояния. + +- **Арифметические операции.** Проверка правильности арифметических операций имеет решающее значение. Использование `SafeMath` повсеместно — это хороший шаг для предотвращения переполнения/потери значимости, однако вам все равно нужно учитывать другие арифметические недостатки, включая проблемы с округлением и недостатки, которые блокируют контракт. + + - Manticore — лучший выбор в этом случае. Echidna можно использовать, если арифметика выходит за рамки возможностей решателя SMT. + +- **Корректность наследования.** Контракты Solidity в значительной степени полагаются на множественное наследование. Можно легко допустить такие ошибки, как отсутствие вызова `super` в затеняющей функции и неправильно интерпретированный порядок линеаризации c3. + + - Slither — это инструмент для обеспечения обнаружения этих проблем. + +- **Внешние взаимодействия.** Контракты взаимодействуют друг с другом, и некоторым внешним контрактам не следует доверять. Например, если ваш контракт полагается на внешние оракулы, останется ли он безопасным, если половина доступных оракулов будет скомпрометирована? + + - Manticore и Echidna — лучший выбор для тестирования внешних взаимодействий с вашими контрактами. У Manticore есть встроенный механизм для создания заглушек для внешних контрактов. + +- **Соответствие стандартам.** Стандарты Ethereum (например, ERC20) имеют историю недостатков в своей конструкции. Помните об ограничениях стандарта, на котором вы строите. + - Slither, Echidna и Manticore помогут вам обнаружить отклонения от заданного стандарта. + +### Шпаргалка по выбору инструментов {#tool-selection-cheatsheet} + +| Компонент | Инструменты | Примеры программ | +| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Конечный автомат | Echidna, Manticore | | +| Контроль доступа | Slither, Echidna, Manticore | [Упражнение 2 для Slither](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise2.md), [Упражнение 2 для Echidna](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-2.md) | +| Арифметические операции | Manticore, Echidna | [Упражнение 1 для Echidna](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-1.md), [Упражнения 1–3 для Manticore](https://github.com/crytic/building-secure-contracts/tree/master/program-analysis/manticore/exercises) | +| Корректность наследования | Slither | [Упражнение 1 для Slither](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise1.md) | +| Внешние взаимодействия | Manticore, Echidna | | +| Соответствие стандартам | Slither, Echidna, Manticore | [`slither-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) | + +В зависимости от ваших целей необходимо будет проверить и другие области, но эти общие области внимания являются хорошей отправной точкой для любой системы смарт-контрактов. + +Наши публичные аудиты содержат примеры проверенных или протестированных свойств. Рекомендуем прочитать разделы `Automated Testing and Verification` (Автоматическое тестирование и проверка) следующих отчетов, чтобы ознакомиться с реальными свойствами безопасности: + +- [0x](https://github.com/trailofbits/publications/blob/master/reviews/0x-protocol.pdf) +- [Balancer](https://github.com/trailofbits/publications/blob/master/reviews/BalancerCore.pdf) diff --git a/public/content/translations/ru/developers/tutorials/hello-world-smart-contract-fullstack/index.md b/public/content/translations/ru/developers/tutorials/hello-world-smart-contract-fullstack/index.md new file mode 100644 index 00000000000..f3aff06012e --- /dev/null +++ b/public/content/translations/ru/developers/tutorials/hello-world-smart-contract-fullstack/index.md @@ -0,0 +1,1544 @@ +--- +title: "Смарт-контракт Hello World для начинающих — полный стек" +description: "Вводное руководство по написанию и развертыванию простого смарт-контракта на Ethereum." +author: "nstrike2" +tags: + [ + "твердость", + "hardhat", + "alchemy", + "Умные контракты", + "развертывание", + "обозреватель блоков", + "интерфейс", + "транзакции" + ] +skill: beginner +lang: ru +published: 2021-10-25 +--- + +Это руководство для вас, если вы новичок в разработке блокчейна и не знаете, с чего начать или как развертывать смарт-контракты и взаимодействовать с ними. Мы рассмотрим создание и развертывание простого смарт-контракта в тестовой сети Goerli с использованием [MetaMask](https://metamask.io), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org) и [Alchemy](https://alchemy.com/eth). + +Для выполнения этого руководства вам понадобится аккаунт Alchemy. [Зарегистрируйте бесплатный аккаунт](https://www.alchemy.com/). + +Если у вас возникнут вопросы, обращайтесь в [Discord Alchemy](https://discord.gg/gWuC7zB)! + +## Часть 1. Создание и развертывание вашего смарт-контракта с помощью Hardhat {#part-1} + +### Подключение к сети Ethereum {#connect-to-the-ethereum-network} + +Существует много способов отправлять запросы в сеть Ethereum. Для простоты мы будем использовать бесплатный аккаунт на Alchemy, платформе для разработчиков блокчейна и API, которая позволяет нам взаимодействовать с блокчейном Ethereum без необходимости запускать собственный узел. Alchemy также имеет инструменты для разработчиков для мониторинга и аналитики; мы воспользуемся ими в этом руководстве, чтобы понять, что происходит «под капотом» при развертывании нашего смарт-контракта. + +### Создайте свое приложение и ключ API {#create-your-app-and-api-key} + +После создания аккаунта Alchemy вы можете сгенерировать ключ API, создав приложение. Это позволит вам делать запросы к тестовой сети Goerli. Если вы не знакомы с тестовыми сетями, вы можете [прочитать руководство Alchemy по выбору сети](https://www.alchemy.com/docs/choosing-a-web3-network). + +На панели инструментов Alchemy найдите выпадающее меню **Приложения** на панели навигации и нажмите **Создать приложение**. + + + +Дайте вашему приложению имя «_Hello World_» и напишите краткое описание. Выберите **Staging** в качестве среды и **Goerli** в качестве сети. + + + +_Примечание: обязательно выберите **Goerli**, иначе это руководство не будет работать._ + +Нажмите **Создать приложение**. Ваше приложение появится в таблице ниже. + +### Создайте аккаунт Ethereum {#create-an-ethereum-account} + +Вам нужен аккаунт Ethereum для отправки и получения транзакций. Мы будем использовать MetaMask, виртуальный кошелек в браузере, который позволяет пользователям управлять адресом своего аккаунта Ethereum. + +Вы можете бесплатно скачать и создать аккаунт MetaMask [здесь](https://metamask.io/download). При создании аккаунта или если у вас уже есть аккаунт, убедитесь, что вы переключились на «тестовую сеть Goerli» в правом верхнем углу (чтобы мы не имели дело с реальными деньгами). + +### Шаг 4. Добавьте эфир из крана (Faucet) {#step-4-add-ether-from-a-faucet} + +Чтобы развернуть свой смарт-контракт в тестовой сети, вам понадобится немного тестовых ETH. Чтобы получить ETH в сети Goerli, перейдите в кран Goerli и введите адрес своего аккаунта Goerli. Обратите внимание, что краны Goerli в последнее время могут быть немного ненадежными — смотрите [страницу тестовых сетей](/developers/docs/networks/#goerli) для списка вариантов, которые можно попробовать: + +_Примечание: из-за перегрузки сети это может занять некоторое время._ +`` + +### Шаг 5: Проверьте свой баланс {#step-5-check-your-balance} + +Чтобы перепроверить, что ETH находится в вашем кошельке, давайте сделаем запрос [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance) с помощью [инструмента-компоновщика Alchemy](https://composer.alchemyapi.io/?composer_state=%7B%22network%22%3A0%2C%22methodName%22%3A%22eth_getBalance%22%2C%22paramValues%22%3A%5B%22%22%2C%22latest%22%5D%7D). Результат будет содержать сумму ETH в нашем кошельке. Чтобы узнать больше, посмотрите [короткое руководство от Alchemy о том, как использовать инструмент-компоновщик](https://youtu.be/r6sjRxBZJuU). + +Введите адрес своего аккаунта MetaMask и нажмите **Отправить запрос**. Вы увидите ответ, похожий на фрагмент кода ниже. + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> _Примечание: этот результат указан в wei, а не в ETH._ _Wei используется как наименьшая единица эфира._ + +Фух! Наши ненастоящие деньги уже все там. + +### Шаг 6: Инициализация нашего проекта {#step-6-initialize-our-project} + +Во-первых, нам нужно создать папку для нашего проекта. Перейдите в командную строку и введите следующее. + +``` +mkdir hello-world +cd hello-world +``` + +Теперь, когда мы находимся в папке нашего проекта, мы будем использовать `npm init` для его инициализации. + +> Если у вас еще не установлен npm, следуйте [этим инструкциям по установке Node.js и npm](https://docs.alchemyapi.io/alchemy/guides/alchemy-for-macs#1-install-nodejs-and-npm). + +Для целей этого руководства не имеет значения, как вы ответите на вопросы инициализации. Вот как мы это сделали для примера: + +``` +имя пакета: (hello-world) +версия: (1.0.0) +описание: смарт-контракт hello world +точка входа: (index.js) +команда для тестирования: +репозиторий git: +ключевые слова: +автор: +лицензия: (ISC) + +Будет записано в /Users/.../.../.../hello-world/package.json: + +{ + "name": "hello-world", + "version": "1.0.0", + "description": "смарт-контракт hello world", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} +``` + +Подтвердите `package.json`, и мы готовы! + +### Шаг 7: Загрузка Hardhat {#step-7-download-hardhat} + +Hardhat - это среда для сборки, развертывания, тестирования и отладки программного обеспечения Ethereum. Он помогает разработчикам создавать смарт-контракты и децентрализованные приложения локально перед их развертыванием в основной сети. + +Внутри нашего проекта `hello-world` запустите: + +``` +npm install --save-dev hardhat +``` + +Более подробную информацию об [инструкциях по установке](https://hardhat.org/getting-started/#overview) можно найти на этой странице. + +### Шаг 8: Создание проекта Hardhat {#step-8-create-hardhat-project} + +В папке нашего проекта `hello-world` выполните: + +``` +npx hardhat +``` + +Вы увидите приветственное сообщение и интерфейс с вариантами того, что делать дальше. Выберите "create an empty hardhat.config.js": + +``` +888 888 888 888 888 +888 888 888 888 888 +888 888 888 888 888 +8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888 +888 888 "88b 888P" d88" 888 888 "88b "88b 888 +888 888 .d888888 888 888 888 888 888 .d888888 888 +888 888 888 888 888 Y88b 888 888 888 888 888 Y88b. +888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888 + +👷 Добро пожаловать в Hardhat v2.0.11 👷 + +Что вы хотите сделать? … +Создать пример проекта +❯ Создать пустой hardhat.config.js +Выйти +``` + +Это создаст файл `hardhat.config.js` в проекте. Мы будем использовать его позже в этом руководстве, чтобы указать настройки для нашего проекта. + +### Шаг 9: Добавление папок проекта {#step-9-add-project-folders} + +Чтобы поддерживать порядок в проекте, давайте создадим две новые папки. В командной строке перейдите в корневой каталог вашего проекта `hello-world` и введите: + +``` +mkdir contracts +mkdir scripts +``` + +- `contracts/` — здесь мы будем хранить файл с кодом нашего смарт-контракта «hello world». +- `scripts/` — здесь мы будем хранить скрипты для развертывания нашего контракта и взаимодействия с ним. + +### Шаг 10: Написание нашего контракта {#step-10-write-our-contract} + +Вы можете спросить себя, когда мы собираемся писать код? Время пришло! + +Откройте проект hello-world в своем любимом редакторе. Смарт-контракты чаще всего пишутся на Solidity, который мы и будем использовать для написания нашего смарт-контракта. + +1. Перейдите в папку `contracts` и создайте новый файл с именем `HelloWorld.sol` +2. Ниже приведен пример смарт-контракта Hello World, который мы будем использовать в этом руководстве. Скопируйте содержимое ниже в файл `HelloWorld.sol`. + +_Примечание: обязательно прочитайте комментарии, чтобы понять, что делает этот контракт._ + +``` +// Указывает версию Solidity, используя семантическое версионирование. +// Узнайте больше: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma +pragma solidity >=0.7.3; + +// Определяет контракт с именем `HelloWorld`. +// Контракт — это набор функций и данных (его состояние). После развертывания контракт находится по определенному адресу в блокчейне Ethereum. Узнайте больше: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html +contract HelloWorld { + + // Генерируется при вызове функции update + //События смарт-контракта — это способ сообщить из вашего контракта во фронтенд вашего приложения о том, что что-то произошло в блокчейне. Фронтенд может «прослушивать» определенные события и предпринимать действия, когда они происходят. + event UpdatedMessages(string oldStr, string newStr); + + // Объявляет переменную состояния `message` типа `string`. + // Переменные состояния — это переменные, значения которых постоянно хранятся в хранилище контракта. Ключевое слово `public` делает переменные доступными извне контракта и создает функцию, которую другие контракты или клиенты могут вызывать для доступа к значению. + string public message; + + // Подобно многим объектно-ориентированным языкам на основе классов, конструктор — это специальная функция, которая выполняется только при создании контракта. + // Конструкторы используются для инициализации данных контракта. Узнайте больше:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors + constructor(string memory initMessage) { + + // Принимает строковый аргумент `initMessage` и устанавливает значение в переменную хранилища контракта `message`). + message = initMessage; + } + + // Публичная функция, которая принимает строковый аргумент и обновляет переменную хранилища `message`. + function update(string memory newMessage) public { + string memory oldMsg = message; + message = newMessage; + emit UpdatedMessages(oldMsg, newMessage); + } +} +``` + +Это базовый смарт-контракт, который хранит сообщение при создании. Его можно обновить, вызвав функцию `update`. + +### Шаг 11. Подключите MetaMask и Alchemy к вашему проекту {#step-11-connect-metamask-alchemy-to-your-project} + +Мы создали кошелек MetaMask, учетную запись Alchemy и написали наш смарт-контракт, теперь пришло время их соединить. + +Каждая транзакция, отправляемая из вашего кошелька, требует подписи с использованием вашего уникального приватного ключа. Чтобы предоставить нашей программе это разрешение, мы можем безопасно хранить наш приватный ключ в файле среды. Мы также будем хранить здесь ключ API для Alchemy. + +> Чтобы узнать больше об отправке транзакций, ознакомьтесь с [этим руководством](https://www.alchemy.com/docs/hello-world-smart-contract#step-11-connect-metamask--alchemy-to-your-project) по отправке транзакций с помощью web3. + +Во-первых, установите dotenv, находясь в директории проекта: + +``` +npm install dotenv --save +``` + +Затем создайте файл `.env` в корневом каталоге проекта. Добавьте в него свой приватный ключ MetaMask и URL-адрес HTTP API Alchemy. + +Ваш файл среды должен называться `.env`, иначе он не будет распознан как файл среды. + +Не называйте его `process.env`, `.env-custom` или как-либо еще. + +- Следуйте [этим инструкциям](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key), чтобы экспортировать свой приватный ключ. +- Ниже показано, как получить URL-адрес HTTP API Alchemy + + + +Ваш `.env` должен выглядеть следующим образом: + +``` +API_URL = "https://eth-goerli.alchemyapi.io/v2/ваш-api-ключ" +PRIVATE_KEY = "ваш-приватный-ключ-metamask" +``` + +Чтобы подключить их к нашему коду, мы будем ссылаться на эти переменные в нашем файле `hardhat.config.js` в шаге 13. + +### Шаг 12: Установите Ethers.js {#step-12-install-ethersjs} + +Ethers.js — это библиотека, которая упрощает взаимодействие и отправку запросов в Ethereum, оборачивая [стандартные методы JSON-RPC](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc) в более удобные для пользователя методы. + +Hardhat позволяет нам интегрировать [плагины](https://hardhat.org/plugins/) для дополнительных инструментов и расширенной функциональности. Мы воспользуемся [плагином Ethers](https://hardhat.org/docs/plugins/official-plugins#hardhat-ethers) для развертывания контракта. + +В директории проекта запустите: + +```bash +npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0" +``` + +### Шаг 13: Обновление hardhat.config.js {#step-13-update-hardhat-configjs} + +Мы добавили несколько зависимостей и плагинов, и теперь нам нужно обновить `hardhat.config.js`, чтобы наш проект знал обо всех них. + +Обновите ваш `hardhat.config.js`, чтобы он выглядел следующим образом: + +```javascript +/** + * @type import('hardhat/config').HardhatUserConfig + */ + +require("dotenv").config() +require("@nomiclabs/hardhat-ethers") + +const { API_URL, PRIVATE_KEY } = process.env + +module.exports = { + solidity: "0.7.3", + defaultNetwork: "goerli", + networks: { + hardhat: {}, + goerli: { + url: API_URL, + accounts: [`0x${PRIVATE_KEY}`], + }, + }, +} +``` + +### Шаг 14: Компиляция нашего контракта {#step-14-compile-our-contract} + +Пора заставить это работать, давайте скомпилируем наш контракт. Задача `compile` — одна из встроенных задач hardhat. + +Запустите в командной строке: + +```bash +npx hardhat compile +``` + +Вы можете получить предупреждение `SPDX license identifier not provided in source file`, но не стоит об этом беспокоиться — надеемся, все остальное выглядит хорошо! Если нет, вы всегда можете написать в [Discord-канал Alchemy](https://discord.gg/u72VCg3). + +### Шаг 15: Написание нашего скрипта развертывания {#step-15-write-our-deploy-script} + +Контракт написан, файл конфигурации корректен, пора писать скрипт развертывания. + +Перейдите в папку `scripts/`, создайте новый файл `deploy.js` и добавьте в него следующее содержимое: + +```javascript +async function main() { + const HelloWorld = await ethers.getContractFactory("HelloWorld") + + // Начинаем развертывание, возвращая promise, который разрешается в объект контракта + const hello_world = await HelloWorld.deploy("Hello World!") + console.log("Контракт развернут по адресу:", hello_world.address) +} + +main() + .then(() => process.exit(0)) + .catch((error) => { + console.error(error) + process.exit(1) + }) +``` + +Hardhat отлично объясняет, что делает каждая из этих строк кода, в своем [руководстве по контрактам](https://hardhat.org/tutorial/testing-contracts.html#writing-tests), мы использовали их объяснения здесь. + +```javascript +const HelloWorld = await ethers.getContractFactory("HelloWorld") +``` + +`ContractFactory` в ethers.js — это абстракция, используемая для развертывания новых смарт-контрактов, поэтому `HelloWorld` здесь — это [фабрика](https://en.wikipedia.org/wiki/Factory_\(object-oriented_programming\)) для экземпляров нашего контракта hello world. При использовании плагина `hardhat-ethers` экземпляры `ContractFactory` и `Contract` по умолчанию подключаются к первому подписанту (владельцу). + +```javascript +const hello_world = await HelloWorld.deploy() +``` + +Вызов `deploy()` на `ContractFactory` запустит развертывание и вернет `Promise`, который разрешается в объект `Contract`. Это объект, который имеет метод для каждой из функций нашего смарт контракта. + +### Шаг 16: Разверните наш контракт {#step-16-deploy-our-contract} + +Мы наконец-то готовы развернуть наш смарт контракт! Перейдите в командную строку и запустите: + +```bash +npx hardhat run scripts/deploy.js --network goerli +``` + +Вы должны увидеть что-то наподобие: + +```bash +Контракт развернут по адресу: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570 +``` + +**Пожалуйста, сохраните этот адрес**. Мы будем использовать его позже в этом руководстве. + +Если мы перейдем на [Etherscan для Goerli](https://goerli.etherscan.io) и поищем адрес нашего контракта, мы должны увидеть, что он был успешно развернут. Транзакция будет выглядеть примерно так: + + + +Адрес `From` должен совпадать с адресом вашего аккаунта MetaMask, а в адресе `To` будет указано **Создание контракта**. Если мы щелкнем по транзакции, то увидим адрес нашего контракта в поле `To`. + + + +Поздравляем! Вы только что развернули смарт-контракт в тестовой сети Ethereum. + +Чтобы понять, что происходит «под капотом», давайте перейдем на вкладку Explorer на нашей [панели инструментов Alchemy](https://dashboard.alchemy.com/explorer). Если у вас несколько приложений Alchemy, убедитесь, что вы отфильтровали их по приложению и выбрали **Hello World**. + + + +Здесь вы увидите несколько методов JSON-RPC, которые Hardhat/Ethers сделали для нас «под капотом», когда мы вызвали функцию `.deploy()`. Два важных метода здесь — это [`eth_sendRawTransaction`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction), который является запросом на запись нашего контракта в сеть Goerli, и [`eth_getTransactionByHash`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_gettransactionbyhash), который является запросом на чтение информации о нашей транзакции по заданному хэшу. Чтобы узнать больше об отправке транзакций, ознакомьтесь с [нашим руководством по отправке транзакций с помощью Web3](/developers/tutorials/sending-transactions-using-web3-and-alchemy/). + +## Часть 2. Взаимодействие с вашим смарт-контрактом {#part-2-interact-with-your-smart-contract} + +Теперь, когда мы успешно развернули смарт-контракт в сети Goerli, давайте научимся с ним взаимодействовать. + +### Создайте файл interact.js {#create-a-interactjs-file} + +Это файл, в котором мы напишем наш скрипт взаимодействия. Мы будем использовать библиотеку Ethers.js, которую вы ранее установили в Части 1. + +В папке `scripts/` создайте новый файл с именем `interact.js` и добавьте следующий код: + +```javascript +// interact.js + +const API_KEY = process.env.API_KEY +const PRIVATE_KEY = process.env.PRIVATE_KEY +const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS +``` + +### Обновите ваш файл .env {#update-your-env-file} + +Мы будем использовать новые переменные среды, поэтому нам нужно определить их в файле `.env`, который [мы создали ранее](#step-11-connect-metamask-&-alchemy-to-your-project). + +Нам нужно будет добавить определение для нашего `API_KEY` Alchemy и `CONTRACT_ADDRESS`, по которому был развернут ваш смарт-контракт. + +Ваш файл `.env` должен выглядеть примерно так: + +```bash +# .env + +API_URL = "https://eth-goerli.alchemyapi.io/v2/<ваш-api-ключ>" +API_KEY = "<ваш-api-ключ>" +PRIVATE_KEY = "<ваш-приватный-ключ-metamask>" +CONTRACT_ADDRESS = "0x<адрес_вашего_контракта>" +``` + +### Получите ABI вашего контракта {#grab-your-contract-ABI} + +Наш [ABI (двоичный интерфейс приложения)](/glossary/#abi) контракта — это интерфейс для взаимодействия с нашим смарт-контрактом. Hardhat автоматически генерирует ABI и сохраняет его в `HelloWorld.json`. Чтобы использовать ABI, нам нужно будет разобрать его содержимое, добавив следующие строки кода в наш файл `interact.js`: + +```javascript +// interact.js +const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json") +``` + +Если вы хотите увидеть ABI, вы можете вывести его в консоль: + +```javascript +console.log(JSON.stringify(contract.abi)) +``` + +Чтобы увидеть ваш ABI, выведенный в консоль, перейдите в терминал и выполните: + +```bash +npx hardhat run scripts/interact.js +``` + +### Создайте экземпляр вашего контракта {#create-an-instance-of-your-contract} + +Для взаимодействия с нашим контрактом нам нужно создать экземпляр контракта в нашем коде. Чтобы сделать это с помощью Ethers.js, нам нужно будет работать с тремя концепциями: + +1. Provider (провайдер) — поставщик узлов, который дает вам доступ на чтение и запись в блокчейн. +2. Signer (подписант) — представляет аккаунт Ethereum, который может подписывать транзакции. +3. Contract (контракт) — объект Ethers.js, представляющий конкретный контракт, развернутый в сети. + +Мы будем использовать ABI контракта из предыдущего шага, чтобы создать наш экземпляр контракта: + +```javascript +// interact.js + +// Провайдер +const alchemyProvider = new ethers.providers.AlchemyProvider( + (network = "goerli"), + API_KEY +) + +// Подписант +const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider) + +// Контракт +const helloWorldContract = new ethers.Contract( + CONTRACT_ADDRESS, + contract.abi, + signer +) +``` + +Узнайте больше о провайдерах, подписантах и контрактах в [документации ethers.js](https://docs.ethers.io/v5/). + +### Прочитайте начальное сообщение {#read-the-init-message} + +Помните, как мы развертывали наш контракт с `initMessage = "Hello world!"`? Теперь мы собираемся прочитать это сообщение, хранящееся в нашем смарт-контракте, и вывести его в консоль. + +В JavaScript асинхронные функции используются при взаимодействии с сетями. Чтобы узнать больше об асинхронных функциях, [прочитайте эту статью на Medium](https://blog.bitsrc.io/understanding-asynchronous-javascript-the-event-loop-74cd408419ff). + +Используйте приведенный ниже код, чтобы вызвать функцию `message` в нашем смарт-контракте и прочитать начальное сообщение: + +```javascript +// interact.js + +// ... + +async function main() { + const message = await helloWorldContract.message() + console.log("Сообщение: " + message) +} +main() +``` + +После запуска файла с помощью `npx hardhat run scripts/interact.js` в терминале мы должны увидеть следующий ответ: + +``` +Сообщение: Hello world! +``` + +Поздравляем! Вы только что успешно прочитали данные смарт-контракта из блокчейна Ethereum, так держать! + +### Обновите сообщение {#update-the-message} + +Вместо того, чтобы просто читать сообщение, мы также можем обновить сообщение, сохраненное в нашем смарт-контракте, с помощью функции `update`! Круто, не так ли? + +Чтобы обновить сообщение, мы можем напрямую вызвать функцию `update` на нашем созданном объекте Contract: + +```javascript +// interact.js + +// ... + +async function main() { + const message = await helloWorldContract.message() + console.log("Сообщение: " + message) + + console.log("Обновление сообщения...") + const tx = await helloWorldContract.update("Это новое сообщение.") + await tx.wait() +} +main() +``` + +Обратите внимание, что в строке 11 мы вызываем `.wait()` для возвращенного объекта транзакции. Это гарантирует, что наш скрипт дождется майнинга транзакции в блокчейне перед выходом из функции. Если вызов `.wait()` не включен, скрипт может не увидеть обновленное значение `message` в контракте. + +### Прочитайте новое сообщение {#read-the-new-message} + +Вы должны быть в состоянии повторить [предыдущий шаг](#read-the-init-message), чтобы прочитать обновленное значение `message`. Потратьте немного времени и посмотрите, сможете ли вы внести необходимые изменения, чтобы вывести это новое значение! + +Если вам нужна подсказка, вот как должен выглядеть ваш файл `interact.js` на данном этапе: + +```javascript +// interact.js + +const API_KEY = process.env.API_KEY +const PRIVATE_KEY = process.env.PRIVATE_KEY +const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS + +const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json") + +// провайдер - Alchemy +const alchemyProvider = new ethers.providers.AlchemyProvider( + (network = "goerli"), + API_KEY +) + +// подписант - вы +const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider) + +// экземпляр контракта +const helloWorldContract = new ethers.Contract( + CONTRACT_ADDRESS, + contract.abi, + signer +) + +async function main() { + const message = await helloWorldContract.message() + console.log("Сообщение: " + message) + + console.log("Обновление сообщения...") + const tx = await helloWorldContract.update("это новое сообщение") + await tx.wait() + + const newMessage = await helloWorldContract.message() + console.log("Новое сообщение: " + newMessage) +} + +main() +``` + +Теперь просто запустите скрипт, и вы сможете увидеть старое сообщение, статус обновления и новое сообщение, выведенные в ваш терминал! + +`npx hardhat run scripts/interact.js --network goerli` + +``` +Сообщение: Hello World! +Обновление сообщения... +Новое сообщение: This is the new message. +``` + +Во время выполнения этого скрипта вы можете заметить, что шаг `Обновление сообщения...` занимает некоторое время перед загрузкой нового сообщения. Это связано с процессом майнинга; если вам интересно отслеживать транзакции во время их майнинга, посетите [мемпул Alchemy](https://dashboard.alchemyapi.io/mempool), чтобы увидеть статус транзакции. Если транзакция была отброшена, также полезно проверить [Etherscan для Goerli](https://goerli.etherscan.io) и найти хэш вашей транзакции. + +## Часть 3: Публикация вашего смарт-контракта на Etherscan {#part-3-publish-your-smart-contract-to-etherscan} + +Вы проделали всю тяжелую работу по воплощению вашего смарт-контракта в жизнь; теперь пришло время поделиться им со всем миром! + +Проверив свой смарт-контракт на Etherscan, любой сможет просмотреть ваш исходный код и взаимодействовать с вашим смарт-контрактом. Давайте начнем! + +### Шаг 1: Создайте ключ API в своей учетной записи Etherscan {#step-1-generate-an-api-key-on-your-etherscan-account} + +Ключ API Etherscan необходим для подтверждения того, что вы являетесь владельцем смарт-контракта, который пытаетесь опубликовать. + +Если у вас еще нет аккаунта Etherscan, [зарегистрируйте аккаунт](https://etherscan.io/register). + +После входа в систему найдите свое имя пользователя на панели навигации, наведите на него курсор и выберите кнопку **Мой профиль**. + +На странице вашего профиля вы должны увидеть боковую панель навигации. На боковой панели навигации выберите **API Keys**. Затем нажмите кнопку «Add», чтобы создать новый ключ API, назовите свое приложение **hello-world** и нажмите кнопку **Create New API Key**. + +Ваш новый ключ API должен появиться в таблице ключей API. Скопируйте ключ API в буфер обмена. + +Далее нам нужно добавить ключ API Etherscan в наш файл `.env`. + +После его добавления ваш файл `.env` должен выглядеть так: + +```javascript +API_URL = "https://eth-goerli.alchemyapi.io/v2/ваш-api-ключ" +PUBLIC_KEY = "ваш-публичный-адрес-аккаунта" +PRIVATE_KEY = "ваш-приватный-адрес-аккаунта" +CONTRACT_ADDRESS = "адрес-вашего-контракта" +ETHERSCAN_API_KEY = "ваш-ключ-etherscan" +``` + +### Смарт-контракты, развернутые с помощью Hardhat {#hardhat-deployed-smart-contracts} + +#### Установите hardhat-etherscan {#install-hardhat-etherscan} + +Публикация вашего контракта на Etherscan с помощью Hardhat очень проста. Сначала вам нужно будет установить плагин `hardhat-etherscan`. `hardhat-etherscan` автоматически проверит исходный код смарт-контракта и ABI на Etherscan. Чтобы добавить его, в каталоге `hello-world` выполните: + +```text +npm install --save-dev @nomiclabs/hardhat-etherscan +``` + +После установки включите следующее выражение вверху вашего `hardhat.config.js` и добавьте параметры конфигурации Etherscan: + +```javascript +// hardhat.config.js + +require("dotenv").config() +require("@nomiclabs/hardhat-ethers") +require("@nomiclabs/hardhat-etherscan") + +const { API_URL, PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env + +module.exports = { + solidity: "0.7.3", + defaultNetwork: "goerli", + networks: { + hardhat: {}, + goerli: { + url: API_URL, + accounts: [`0x${PRIVATE_KEY}`], + }, + }, + etherscan: { + // Ваш ключ API для Etherscan + // Получите его на https://etherscan.io/ + apiKey: ETHERSCAN_API_KEY, + }, +} +``` + +#### Подтвердите свой смарт-контракт на Etherscan {#verify-your-smart-contract-on-etherscan} + +Убедитесь, что все файлы сохранены и все переменные `.env` настроены правильно. + +Запустите задачу `verify`, передав адрес контракта и сеть, в которой он развернут: + +```text +npx hardhat verify --network goerli АДРЕС_РАЗВЕРНУТОГО_КОНТРАКТА 'Hello World!' +``` + +Убедитесь, что `DEPLOYED_CONTRACT_ADDRESS` — это адрес вашего развернутого смарт-контракта в тестовой сети Goerli. Кроме того, последний аргумент (`'Hello World!'`) должен быть той же строковой величиной, которая использовалась [на этапе развертывания в части 1](#write-our-deploy-script). + +Если все пройдет хорошо, вы увидите следующее сообщение в своем терминале: + +```text +Исходный код для контракта успешно отправлен +contracts/HelloWorld.sol:HelloWorld по адресу 0xdeployed-contract-address +для проверки на Etherscan. Ожидание результата проверки... + + +Контракт HelloWorld успешно проверен на Etherscan. +https://goerli.etherscan.io/address/<адрес-контракта>#contracts +``` + +Поздравляем! Код вашего смарт-контракта находится на Etherscan! + +### Проверьте свой смарт-контракт на Etherscan! {#check-out-your-smart-contract-on-etherscan} + +Когда вы перейдете по ссылке, указанной в вашем терминале, вы сможете увидеть код вашего смарт-контракта и ABI, опубликованные на Etherscan! + +**Урааа — ты сделал это, чемпион! Теперь любой может вызывать или записывать данные в ваш смарт-контракт! Нам не терпится увидеть, что вы создадите дальше!** + +## Часть 4 — Интеграция вашего смарт-контракта с фронтендом {#part-4-integrating-your-smart-contract-with-the-frontend} + +К концу этого руководства вы узнаете, как: + +- Подключить кошелек MetaMask к вашему децентрализованному приложению +- Считывать данные с вашего смарт-контракта с помощью API [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) +- Подписывать транзакции Ethereum с помощью MetaMask + +Для этого децентрализованного приложения мы будем использовать [React](https://react.dev/) в качестве нашего фронтенд-фреймворка; однако важно отметить, что мы не будем тратить много времени на разбор его основ, поскольку в основном мы сосредоточимся на внедрении функциональности Web3 в наш проект. + +В качестве предварительного условия вы должны иметь начальный уровень понимания React. В противном случае мы рекомендуем пройти официальное [руководство по введению в React](https://react.dev/learn). + +### Клонируйте стартовые файлы {#clone-the-starter-files} + +Сначала перейдите в [репозиторий GitHub hello-world-part-four](https://github.com/alchemyplatform/hello-world-part-four-tutorial), чтобы получить стартовые файлы для этого проекта, и клонируйте этот репозиторий на свой локальный компьютер. + +Откройте клонированный репозиторий локально. Обратите внимание, что он содержит две папки: `starter-files` и `completed`. + +- `starter-files` - **мы будем работать в этом каталоге**, мы подключим пользовательский интерфейс к вашему кошельку Ethereum и смарт-контракту, который мы опубликовали на Etherscan в [Части 3](#part-3). +- `completed` содержит полностью завершенное руководство и должен использоваться только в качестве справочника, если вы застряли. + +Далее откройте свою копию `starter-files` в вашем любимом редакторе кода, а затем перейдите в папку `src`. + +Весь код, который мы напишем, будет находиться в папке `src`. Мы будем редактировать компонент `HelloWorld.js` и файлы JavaScript `util/interact.js`, чтобы придать нашему проекту функциональность Web3. + +### Ознакомьтесь со стартовыми файлами {#check-out-the-starter-files} + +Прежде чем мы начнем писать код, давайте рассмотрим, что нам предоставлено в стартовых файлах. + +#### Запустите ваш React-проект {#get-your-react-project-running} + +Начнем с запуска проекта React в нашем браузере. Прелесть React в том, что как только наш проект запускается в нашем браузере, любые сохраняемые нами изменения будут обновляться в реальном времени в нашем браузере. + +Чтобы запустить проект, перейдите в корневой каталог папки `starter-files` и запустите `npm install` в своем терминале, чтобы установить зависимости проекта: + +```bash +cd starter-files +npm install +``` + +После завершения установки выполните `npm start` в терминале: + +```bash +npm start +``` + +Это должно открыть [http://localhost:3000/](http://localhost:3000/) в вашем браузере, где вы увидите интерфейс нашего проекта. Он должен состоять из одного поля (места для обновления сообщения, хранящегося в вашем смарт-контракте), кнопки «Подключить кошелек» и кнопки «Обновить». + +Если вы попробуете нажать на любую из кнопок, вы заметите, что они не работают — это потому, что нам все еще нужно запрограммировать их функциональность. + +#### Компонент `HelloWorld.js` {#the-helloworld-js-component} + +Давайте вернемся в папку `src` в нашем редакторе и откроем файл `HelloWorld.js`. Очень важно, чтобы мы понимали все в этом файле, поскольку это основной компонент React, над которым мы будем работать. + +В верхней части этого файла вы заметите, что у нас есть несколько операторов импорта, которые необходимы для запуска нашего проекта, включая библиотеку React, хуки useEffect и useState, некоторые элементы из `./util/interact.js` (мы опишем их более подробно в ближайшее время!) и логотип Alchemy. + +```javascript +// HelloWorld.js + +import React from "react" +import { useEffect, useState } from "react" +import { + helloWorldContract, + connectWallet, + updateMessage, + loadCurrentMessage, + getCurrentWalletConnected, +} from "./util/interact.js" + +import alchemylogo from "./alchemylogo.svg" +``` + +Далее у нас есть переменные состояния, которые мы будем обновлять после определенных событий. + +```javascript +// HelloWorld.js + +//Переменные состояния +const [walletAddress, setWallet] = useState("") +const [status, setStatus] = useState("") +const [message, setMessage] = useState("Нет подключения к сети.") +const [newMessage, setNewMessage] = useState("") +``` + +Вот что представляет собой каждая из переменных: + +- `walletAddress` — строка, в которой хранится адрес кошелька пользователя +- `status` — строка, в которой хранится полезное сообщение, которое помогает пользователю взаимодействовать с децентрализованным приложением +- `message` — строка, в которой хранится текущее сообщение в смарт-контракте +- `newMessage` — строка, в которой хранится новое сообщение, которое будет записано в смарт-контракт + +После переменных состояния вы увидите пять нереализованных функций: `useEffect`, `addSmartContractListener`, `addWalletListener`, `connectWalletPressed` и `onUpdatePressed`. Ниже мы объясним, что они делают: + +```javascript +// HelloWorld.js + +//вызывается только один раз +useEffect(async () => { + //TODO: реализовать +}, []) + +function addSmartContractListener() { + //TODO: реализовать +} + +function addWalletListener() { + //TODO: реализовать +} + +const connectWalletPressed = async () => { + //TODO: реализовать +} + +const onUpdatePressed = async () => { + //TODO: реализовать +} +``` + +- [`useEffect`](https://legacy.reactjs.org/docs/hooks-effect.html) — это хук React, который вызывается после рендеринга вашего компонента. Поскольку в него передается пустой массив `[]` в качестве свойства (см. строку 4), он будет вызываться только при _первом_ рендеринге компонента. Здесь мы загрузим текущее сообщение, хранящееся в нашем смарт-контракте, вызовем наши прослушиватели смарт-контракта и кошелька и обновим наш пользовательский интерфейс, чтобы отразить, подключен ли уже кошелек. +- `addSmartContractListener` — эта функция настраивает прослушиватель, который будет отслеживать событие `UpdatedMessages` нашего контракта HelloWorld и обновлять наш пользовательский интерфейс при изменении сообщения в нашем смарт-контракте. +- `addWalletListener` — эта функция настраивает прослушиватель, который обнаруживает изменения в состоянии кошелька MetaMask пользователя, например, когда пользователь отключает свой кошелек или переключает адреса. +- `connectWalletPressed` — эта функция будет вызываться для подключения кошелька MetaMask пользователя к нашему децентрализованному приложению. +- `onUpdatePressed` — эта функция будет вызываться, когда пользователь захочет обновить сообщение, хранящееся в смарт-контракте. + +Ближе к концу этого файла находится пользовательский интерфейс нашего компонента. + +```javascript +// HelloWorld.js + +//UI нашего компонента +return ( +
+ 
+
+
+
+)
+```
+
+Если вы внимательно изучите этот код, вы заметите, где мы используем наши различные переменные состояния в нашем пользовательском интерфейсе:
+
+- В строках 6–12, если кошелек пользователя подключен (т. е. `walletAddress.length > 0`), мы отображаем усеченную версию `walletAddress` пользователя на кнопке с идентификатором «walletButton»; в противном случае она просто гласит «Подключить кошелек».
+- В строке 17 мы отображаем текущее сообщение, хранящееся в смарт-контракте, которое зафиксировано в строке `message`.
+- В строках 23–26 мы используем [контролируемый компонент](https://legacy.reactjs.org/docs/forms.html#controlled-components) для обновления нашей переменной состояния `newMessage` при изменении ввода в текстовом поле.
+
+В дополнение к нашим переменным состояния вы также увидите, что функции `connectWalletPressed` и `onUpdatePressed` вызываются при нажатии кнопок с идентификаторами `publishButton` и `walletButton` соответственно.
+
+Наконец, давайте рассмотрим, куда добавляется этот компонент `HelloWorld.js`.
+
+Если вы перейдете к файлу `App.js`, который является основным компонентом в React, выступающим в качестве контейнера для всех других компонентов, вы увидите, что наш компонент `HelloWorld.js` внедряется в строке 7.
+
+И последнее, но не менее важное: давайте рассмотрим еще один предоставленный вам файл — `interact.js`.
+
+#### Файл `interact.js` {#the-interact-js-file}
+
+Поскольку мы хотим следовать парадигме [M-V-C](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller), нам понадобится отдельный файл, который содержит все наши функции для управления логикой, данными и правилами нашего децентрализованного приложения, а затем мы сможем экспортировать эти функции в наш интерфейс (наш компонент `HelloWorld.js`).
+
+👆🏽Именно в этом и заключается цель нашего файла `interact.js`!
+
+Перейдите в папку `util` в вашем каталоге `src`, и вы заметите, что мы включили файл с именем `interact.js`, который будет содержать все наши функции и переменные для взаимодействия со смарт-контрактами и кошельками.
+
+```javascript
+// interact.js
+
+//export const helloWorldContract;
+
+export const loadCurrentMessage = async () => {}
+
+export const connectWallet = async () => {}
+
+const getCurrentWalletConnected = async () => {}
+
+export const updateMessage = async (message) => {}
+```
+
+Вы заметите, что вверху файла мы закомментировали объект `helloWorldContract`. Позже в этом руководстве мы раскомментируем этот объект и создадим экземпляр нашего смарт-контракта в этой переменной, который затем экспортируем в наш компонент `HelloWorld.js`.
+
+Четыре нереализованные функции после нашего объекта `helloWorldContract` делают следующее:
+
+- `loadCurrentMessage` — эта функция обрабатывает логику загрузки текущего сообщения, хранящегося в смарт-контракте. Она сделает вызов для _чтения_ в смарт-контракт Hello World с помощью [API Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3).
+- `connectWallet` — эта функция подключит MetaMask пользователя к нашему децентрализованному приложению.
+- `getCurrentWalletConnected` — эта функция проверит, подключен ли уже аккаунт Ethereum к нашему децентрализованному приложению при загрузке страницы, и соответствующим образом обновит наш пользовательский интерфейс.
+- `updateMessage` — эта функция обновит сообщение, хранящееся в смарт-контракте. Она сделает вызов для _записи_ в смарт-контракт Hello World, поэтому кошелек MetaMask пользователя должен будет подписать транзакцию Ethereum для обновления сообщения.
+
+Теперь, когда мы понимаем, с чем работаем, давайте разберемся, как читать из нашего смарт-контракта!
+
+### Шаг 3: Чтение из вашего смарт-контракта {#step-3-read-from-your-smart-contract}
+
+Чтобы читать из вашего смарт-контракта, вам нужно будет успешно настроить:
+
+- API-соединение с блокчейном Ethereum
+- Загруженный экземпляр вашего смарт-контракта
+- Функция для вызова функции вашего смарт-контракта
+- Прослушиватель для отслеживания обновлений, когда данные, которые вы читаете из смарт-контракта, изменяются
+
+Это может показаться большим количеством шагов, но не волнуйтесь! Мы проведем вас через каждый из них шаг за шагом! :\)
+
+#### Установите API-соединение с блокчейном Ethereum {#establish-an-api-connection-to-the-ethereum-chain}
+
+Итак, помните, как во второй части этого руководства мы использовали наш ключ [Alchemy Web3 для чтения из нашего смарт-контракта](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract#step-1-install-web3-library)? Вам также понадобится ключ Alchemy Web3 в вашем децентрализованном приложении для чтения из блокчейна.
+
+Если у вас его еще нет, сначала установите [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3), перейдя в корневой каталог ваших `starter-files` и выполнив в терминале следующую команду:
+
+```text
+npm install @alch/alchemy-web3
+```
+
+[Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) — это оболочка для [Web3.js](https://docs.web3js.org/), предоставляющая расширенные методы API и другие важные преимущества, облегчающие жизнь веб-разработчика. Он разработан с требованием минимальной настройки, поэтому вы можете сразу начать использовать его в своем приложении!
+
+Затем установите пакет [dotenv](https://www.npmjs.com/package/dotenv) в каталог вашего проекта, чтобы у нас было безопасное место для хранения нашего ключа API после того, как мы его получим.
+
+```text
+npm install dotenv --save
+```
+
+Для нашего децентрализованного приложения **мы будем использовать наш ключ API для Websockets**, а не наш ключ API для HTTP, так как это позволит нам настроить прослушиватель, который обнаруживает, когда меняется сообщение, хранящееся в смарт-контракте.
+
+Как только у вас будет ключ API, создайте файл `.env` в вашем корневом каталоге и добавьте в него свой URL-адрес для Websockets Alchemy. После этого ваш файл `.env` должен выглядеть следующим образом:
+
+```javascript
+REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/<ключ>
+```
+
+Теперь мы готовы настроить нашу конечную точку Alchemy Web3 в нашем децентрализованном приложении! Давайте вернемся к нашему `interact.js`, который находится в нашей папке `util`, и добавим следующий код в начало файла:
+
+```javascript
+// interact.js
+
+require("dotenv").config()
+const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
+const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
+const web3 = createAlchemyWeb3(alchemyKey)
+
+//export const helloWorldContract;
+```
+
+Выше мы сначала импортировали ключ Alchemy из нашего файла `.env`, а затем передали наш `alchemyKey` в `createAlchemyWeb3`, чтобы установить нашу конечную точку Alchemy Web3.
+
+С этой готовой конечной точкой пришло время загрузить наш смарт-контракт!
+
+#### Загрузка вашего смарт-контракта Hello World {#loading-your-hello-world-smart-contract}
+
+Чтобы загрузить ваш смарт-контракт Hello World, вам понадобится его адрес контракта и ABI, оба из которых можно найти на Etherscan, если вы завершили [Часть 3 этого руководства.](/developers/tutorials/hello-world-smart-contract-fullstack/#part-3-publish-your-smart-contract-to-etherscan-part-3-publish-your-smart-contract-to-etherscan)
+
+#### Как получить ABI вашего контракта с Etherscan {#how-to-get-your-contract-abi-from-etherscan}
+
+Если вы пропустили часть 3 этого руководства, вы можете использовать контракт HelloWorld с адресом [0x6f3f635A9762B47954229Ea479b4541eAF402A6A](https://goerli.etherscan.io/address/0x6f3f635a9762b47954229ea479b4541eaf402a6a#code). Его ABI можно найти [здесь](https://goerli.etherscan.io/address/0x6f3f635a9762b47954229ea479b4541eaf402a6a#code).
+
+ABI контракта необходим для указания, какую функцию будет вызывать контракт, а также для обеспечения того, чтобы функция возвращала данные в ожидаемом формате. После того, как мы скопировали ABI нашего контракта, давайте сохраним его в виде файла JSON с именем `contract-abi.json` в вашем каталоге `src`.
+
+Ваш файл contract-abi.json должен храниться в вашей папке src.
+
+Вооружившись адресом нашего контракта, ABI и конечной точкой Alchemy Web3, мы можем использовать [метод contract](https://docs.web3js.org/api/web3-eth-contract/class/Contract), чтобы загрузить экземпляр нашего смарт-контракта. Импортируйте ABI вашего контракта в файл `interact.js` и добавьте адрес вашего контракта.
+
+```javascript
+// interact.js
+
+const contractABI = require("../contract-abi.json")
+const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"
+```
+
+Теперь мы наконец-то можем раскомментировать нашу переменную `helloWorldContract` и загрузить смарт-контракт с помощью нашей конечной точки AlchemyWeb3:
+
+```javascript
+// interact.js
+export const helloWorldContract = new web3.eth.Contract(
+ contractABI,
+ contractAddress
+)
+```
+
+Подводя итог, первые 12 строк вашего `interact.js` теперь должны выглядеть так:
+
+```javascript
+// interact.js
+
+require("dotenv").config()
+const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
+const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
+const web3 = createAlchemyWeb3(alchemyKey)
+
+const contractABI = require("../contract-abi.json")
+const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"
+
+export const helloWorldContract = new web3.eth.Contract(
+ contractABI,
+ contractAddress
+)
+```
+
+Теперь, когда мы загрузили наш контракт, мы можем реализовать нашу функцию `loadCurrentMessage`!
+
+#### Реализация `loadCurrentMessage` в вашем файле `interact.js` {#implementing-loadCurrentMessage-in-your-interact-js-file}
+
+Эта функция очень проста. Мы сделаем простой асинхронный вызов web3 для чтения из нашего контракта. Наша функция вернет сообщение, хранящееся в смарт-контракте:
+
+Обновите `loadCurrentMessage` в вашем файле `interact.js` до следующего:
+
+```javascript
+// interact.js
+
+export const loadCurrentMessage = async () => {
+ const message = await helloWorldContract.methods.message().call()
+ return message
+}
+```
+
+Поскольку мы хотим отображать этот смарт-контракт в нашем пользовательском интерфейсе, давайте обновим функцию `useEffect` в нашем компоненте `HelloWorld.js` до следующего:
+
+```javascript
+// HelloWorld.js
+
+//вызывается только один раз
+useEffect(async () => {
+ const message = await loadCurrentMessage()
+ setMessage(message)
+}, [])
+```
+
+Обратите внимание, мы хотим, чтобы наша `loadCurrentMessage` вызывалась только один раз во время первого рендеринга компонента. Вскоре мы реализуем `addSmartContractListener` для автоматического обновления пользовательского интерфейса после изменения сообщения в смарт-контракте.
+
+Прежде чем мы углубимся в наш прослушиватель, давайте посмотрим, что у нас есть на данный момент! Сохраните ваши файлы `HelloWorld.js` и `interact.js`, а затем перейдите по адресу [http://localhost:3000/](http://localhost:3000/)
+
+Вы заметите, что текущее сообщение больше не гласит «Нет подключения к сети». Вместо этого оно отражает сообщение, хранящееся в смарт-контракте. Отлично!
+
+#### Ваш пользовательский интерфейс теперь должен отражать сообщение, хранящееся в смарт-контракте {#your-UI-should-now-reflect-the-message-stored-in-the-smart-contract}
+
+Теперь о прослушивателе...
+
+#### Реализуйте `addSmartContractListener` {#implement-addsmartcontractlistener}
+
+Если вы вернетесь к файлу `HelloWorld.sol`, который мы написали в [Части 1 этой серии руководств](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract#step-10-write-our-contract), вы вспомните, что есть событие смарт-контракта под названием `UpdatedMessages`, которое генерируется после вызова функции `update` нашего смарт-контракта (см. строки 9 и 27):
+
+```javascript
+// HelloWorld.sol
+
+// Указывает версию Solidity, используя семантическое версионирование.
+// Узнайте больше: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
+pragma solidity ^0.7.3;
+
+// Определяет контракт с именем `HelloWorld`.
+// Контракт — это набор функций и данных (его состояние). После развертывания контракт находится по определенному адресу в блокчейне Ethereum. Узнайте больше: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
+contract HelloWorld {
+
+ // Генерируется при вызове функции update
+ //События смарт-контракта — это способ сообщить из вашего контракта во фронтенд вашего приложения о том, что что-то произошло в блокчейне. Фронтенд может «прослушивать» определенные события и предпринимать действия, когда они происходят.
+ event UpdatedMessages(string oldStr, string newStr);
+
+ // Объявляет переменную состояния `message` типа `string`.
+ // Переменные состояния — это переменные, значения которых постоянно хранятся в хранилище контракта. Ключевое слово `public` делает переменные доступными извне контракта и создает функцию, которую другие контракты или клиенты могут вызывать для доступа к значению.
+ string public message;
+
+ // Подобно многим объектно-ориентированным языкам на основе классов, конструктор — это специальная функция, которая выполняется только при создании контракта.
+ // Конструкторы используются для инициализации данных контракта. Узнайте больше:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
+ constructor(string memory initMessage) {
+
+ // Принимает строковый аргумент `initMessage` и устанавливает значение в переменную хранилища контракта `message`).
+ message = initMessage;
+ }
+
+ // Публичная функция, которая принимает строковый аргумент и обновляет переменную хранилища `message`.
+ function update(string memory newMessage) public {
+ string memory oldMsg = message;
+ message = newMessage;
+ emit UpdatedMessages(oldMsg, newMessage);
+ }
+}
+```
+
+События смарт-контракта — это способ, которым ваш контракт сообщает вашему фронтенд-приложению о том, что что-то произошло (т. е. произошло _событие_) в блокчейне, которое может «прослушивать» определенные события и предпринимать действия, когда они происходят.
+
+Функция `addSmartContractListener` будет специально прослушивать событие `UpdatedMessages` нашего смарт-контракта Hello World и обновлять наш пользовательский интерфейс для отображения нового сообщения.
+
+Измените `addSmartContractListener` на следующее:
+
+```javascript
+// HelloWorld.js
+
+function addSmartContractListener() {
+ helloWorldContract.events.UpdatedMessages({}, (error, data) => {
+ if (error) {
+ setStatus("😥 " + error.message)
+ } else {
+ setMessage(data.returnValues[1])
+ setNewMessage("")
+ setStatus("🎉 Ваше сообщение было обновлено!")
+ }
+ })
+}
+```
+
+Давайте разберем, что происходит, когда прослушиватель обнаруживает событие:
+
+- Если при генерации события произойдет ошибка, она будет отражена в пользовательском интерфейсе через нашу переменную состояния `status`.
+- В противном случае мы будем использовать возвращенный объект `data`. `data.returnValues` — это массив, индексированный с нуля, где первый элемент массива хранит предыдущее сообщение, а второй — обновленное. В целом, при успешном событии мы установим нашу строку `message` на обновленное сообщение, очистим строку `newMessage` и обновим нашу переменную состояния `status`, чтобы отразить, что новое сообщение было опубликовано в нашем смарт-контракте.
+
+Наконец, давайте вызовем наш прослушиватель в нашей функции `useEffect`, чтобы он был инициализирован при первом рендеринге компонента `HelloWorld.js`. В целом, ваша функция `useEffect` должна выглядеть так:
+
+```javascript
+// HelloWorld.js
+
+useEffect(async () => {
+ const message = await loadCurrentMessage()
+ setMessage(message)
+ addSmartContractListener()
+}, [])
+```
+
+Теперь, когда мы можем читать из нашего смарт-контракта, было бы здорово разобраться, как в него записывать! Однако, чтобы записывать в наше децентрализованное приложение, у нас сначала должен быть подключенный к нему кошелек Ethereum.
+
+Итак, далее мы займемся настройкой нашего кошелька Ethereum (MetaMask), а затем подключим его к нашему децентрализованному приложению!
+
+### Шаг 4: Настройте свой кошелек Ethereum {#step-4-set-up-your-ethereum-wallet}
+
+Чтобы что-либо записать в блокчейн Ethereum, пользователи должны подписывать транзакции с помощью приватных ключей своего виртуального кошелька. В этом руководстве мы будем использовать [MetaMask](https://metamask.io/), виртуальный кошелек в браузере, используемый для управления адресом вашего аккаунта Ethereum, так как он делает подписание транзакций очень простым для конечного пользователя.
+
+Если вы хотите больше узнать о том, как работают транзакции в Ethereum, ознакомьтесь с [этой страницей](/developers/docs/transactions/) от Ethereum Foundation.
+
+#### Загрузите MetaMask {#download-metamask}
+
+Вы можете бесплатно скачать и создать аккаунт MetaMask [здесь](https://metamask.io/download). При создании аккаунта или если у вас уже есть аккаунт, убедитесь, что вы переключились на «тестовую сеть Goerli» в правом верхнем углу (чтобы мы не имели дело с реальными деньгами).
+
+#### Добавьте эфир из крана {#add-ether-from-a-faucet}
+
+Чтобы подписать транзакцию в блокчейне Ethereum, нам понадобится немного тестового Eth. Чтобы получить Eth, вы можете перейти на [FaucETH](https://fauceth.komputing.org) и ввести адрес своего аккаунта Goerli, нажать «Запросить средства», затем выбрать «Ethereum Testnet Goerli» в выпадающем списке и, наконец, снова нажать кнопку «Запросить средства». Вскоре после этого вы должны увидеть Eth в своей учетной записи MetaMask!
+
+#### Проверьте свой баланс {#check-your-balance}
+
+Чтобы дважды проверить наш баланс, давайте сделаем запрос [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance), используя [инструмент для составления запросов от Alchemy](https://composer.alchemyapi.io/?composer_state=%7B%22network%22%3A0%2C%22methodName%22%3A%22eth_getBalance%22%2C%22paramValues%22%3A%5B%22%22%2C%22latest%22%5D%7D). Так сумма Eth вернется в наш кошелек. После ввода адреса вашего аккаунта MetaMask и нажатия «Send Request» вы должны увидеть примерно такой ответ:
+
+```text
+{"jsonrpc": "2.0", "id": 0, "result": "0xde0b6b3a7640000"}
+```
+
+**ПРИМЕЧАНИЕ:** этот результат указан в wei, а не в ETH. Wei это наименьшая единица измерения эфира. Преобразование wei в eth: 1 eth = 10¹⁸ wei. Итак, если мы преобразуем 0xde0b6b3a7640000 в десятичное число, мы получим 1\*10¹⁸, что равно 1 eth.
+
+Фух! Наши ненастоящие деньги уже все там! 🤑
+
+### Шаг 5: Подключите MetaMask к вашему пользовательскому интерфейсу {#step-5-connect-metamask-to-your-UI}
+
+Теперь, когда наш кошелек MetaMask настроен, давайте подключим к нему наше децентрализованное приложение!
+
+#### Функция `connectWallet` {#the-connectWallet-function}
+
+В нашем файле `interact.js` мы реализуем функцию `connectWallet`, которую затем сможем вызвать в нашем компоненте `HelloWorld.js`.
+
+Давайте изменим `connectWallet` на следующее:
+
+```javascript
+// interact.js
+
+export const connectWallet = async () => {
+ if (window.ethereum) {
+ try {
+ const addressArray = await window.ethereum.request({
+ method: "eth_requestAccounts",
+ })
+ const obj = {
+ status: "👆🏽 Напишите сообщение в текстовом поле выше.",
+ address: addressArray[0],
+ }
+ return obj
+ } catch (err) {
+ return {
+ address: "",
+ status: "😥 " + err.message,
+ }
+ }
+ } else {
+ return {
+ address: "",
+ status: (
+
+ Текущее сообщение:
+{message}
+ +Новое сообщение:
+ +
+ setNewMessage(e.target.value)}
+ value={newMessage}
+ />
+
+
+{status}
+ + ++ {" "} + 🦊 + Вы должны установить MetaMask, виртуальный кошелек Ethereum, в свой + браузер. + +
+ + ), + } + } +} +``` + +Так что же именно делает этот гигантский блок кода? + +Ну, во-первых, он проверяет, включен ли `window.ethereum` в вашем браузере. + +`window.ethereum` — это глобальный API, внедряемый MetaMask и другими поставщиками кошельков, который позволяет веб-сайтам запрашивать аккаунты пользователей Ethereum. В случае одобрения он может считывать данные из блокчейнов, к которым подключен пользователь, и предлагать пользователю подписывать сообщения и транзакции. Для получения дополнительной информации см. [документацию MetaMask](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents)! + +Если `window.ethereum` _отсутствует_, это означает, что MetaMask не установлен. В результате возвращается объект JSON, где возвращаемый `address` представляет собой пустую строку, а объект `status` JSX сообщает, что пользователь должен установить MetaMask. + +Если же `window.ethereum` _присутствует_, то здесь начинается самое интересное. + +Используя цикл try/catch, мы попытаемся подключиться к MetaMask, вызвав [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts). Вызов этой функции откроет MetaMask в браузере, и пользователю будет предложено подключить свой кошелек к вашему децентрализованному приложению. + +- Если пользователь решит подключиться, `method: "eth_requestAccounts"` вернет массив, содержащий все адреса аккаунтов пользователя, подключенных к децентрализованному приложению. В целом, наша функция `connectWallet` вернет объект JSON, который содержит _первый_ `address` в этом массиве (см. строку 9) и сообщение `status`, предлагающее пользователю написать сообщение в смарт-контракт. +- Если пользователь отклоняет подключение, то объект JSON будет содержать пустую строку для возвращаемого `address` и сообщение `status`, которое отражает, что пользователь отклонил подключение. + +Теперь, когда мы написали эту функцию `connectWallet`, следующим шагом является ее вызов в нашем компоненте `HelloWorld.js`. + +#### Добавьте функцию `connectWallet` в ваш компонент пользовательского интерфейса `HelloWorld.js` {#add-the-connectWallet-function-to-your-HelloWorld-js-ui-component} + +Перейдите к функции `connectWalletPressed` в `HelloWorld.js` и обновите ее до следующего: + +```javascript +// HelloWorld.js + +const connectWalletPressed = async () => { + const walletResponse = await connectWallet() + setStatus(walletResponse.status) + setWallet(walletResponse.address) +} +``` + +Обратите внимание, как большая часть нашей функциональности абстрагирована от нашего компонента `HelloWorld.js` из файла `interact.js`? Это значит, что мы соответствуем парадигме M-V-С! + +В `connectWalletPressed` мы просто делаем вызов `await` к нашей импортированной функции `connectWallet` и, используя ее ответ, обновляем наши переменные `status` и `walletAddress` через их хуки состояния. + +Теперь давайте сохраним оба файла (`HelloWorld.js` и `interact.js`) и протестируем наш пользовательский интерфейс. + +Откройте браузер на странице [http://localhost:3000/](http://localhost:3000/) и нажмите кнопку «Подключить кошелек» в правом верхнем углу страницы. + +Если у вас установлен MetaMask, вам будет предложено подключить кошелек к вашему децентрализованному приложению. Примите приглашение на подключение. + +Вы должны увидеть, что кнопка кошелька теперь показывает, что ваш адрес подключен! Даааааа 🔥 + +Далее попробуйте обновить страницу... это странно. Кнопка нашего кошелька предлагает нам подключить MetaMask, хотя он уже подключен... + +Однако, не бойтесь! Мы легко можем решить эту проблему (поняли каламбур с адресом?). реализовав `getCurrentWalletConnected`, которая проверит, подключен ли уже адрес к нашему децентрализованному приложению, и соответствующим образом обновит наш пользовательский интерфейс! + +#### Функция `getCurrentWalletConnected` {#the-getcurrentwalletconnected-function} + +Обновите вашу функцию `getCurrentWalletConnected` в файле `interact.js` до следующего: + +```javascript +// interact.js + +export const getCurrentWalletConnected = async () => { + if (window.ethereum) { + try { + const addressArray = await window.ethereum.request({ + method: "eth_accounts", + }) + if (addressArray.length > 0) { + return { + address: addressArray[0], + status: "👆🏽 Напишите сообщение в текстовом поле выше.", + } + } else { + return { + address: "", + status: "🦊 Подключитесь к MetaMask, используя кнопку в правом верхнем углу.", + } + } + } catch (err) { + return { + address: "", + status: "😥 " + err.message, + } + } + } else { + return { + address: "", + status: ( + ++ {" "} + 🦊 + Вы должны установить MetaMask, виртуальный кошелек Ethereum, в свой + браузер. + +
+ + ), + } + } +} +``` + +Этот код _очень_ похож на функцию `connectWallet`, которую мы только что написали в предыдущем шаге. + +Основное отличие состоит в том, что вместо вызова метода `eth_requestAccounts`, который открывает MetaMask для подключения пользователя к кошельку, мы вызываем метод `eth_accounts`, который просто возвращает массив с адресами MetaMask, которые в данный момент подключены к нашему децентрализованному приложению. + +Чтобы увидеть эту функцию в действии, давайте вызовем ее в нашей функции `useEffect` нашего компонента `HelloWorld.js`: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) +}, []) +``` + +Обратите внимание: мы используем ответ на наш вызов `getCurrentWalletConnected` для обновления наших переменных состояния `walletAddress` и `status`. + +Теперь, когда вы добавили этот код, давайте попробуем обновить окно нашего браузера. + +Отличнооооо! На кнопке должно быть указано, что вы подключены, и показан предварительный просмотр адреса вашего подключенного кошелька — даже после обновления! + +#### Реализуйте `addWalletListener` {#implement-addwalletlistener} + +Последним шагом в настройке нашего кошелька в децентрализированном приложении является реализация прослушивателя кошелька, чтобы наш пользовательский интерфейс обновлялся при изменении состояния нашего кошелька, например, когда пользователь отключает или переключает учетные записи. + +В вашем файле `HelloWorld.js` измените вашу функцию `addWalletListener` следующим образом: + +```javascript +// HelloWorld.js + +function addWalletListener() { + if (window.ethereum) { + window.ethereum.on("accountsChanged", (accounts) => { + if (accounts.length > 0) { + setWallet(accounts[0]) + setStatus("👆🏽 Напишите сообщение в текстовом поле выше.") + } else { + setWallet("") + setStatus("🦊 Подключитесь к MetaMask, используя кнопку в правом верхнем углу.") + } + }) + } else { + setStatus( ++ {" "} + 🦊 + Вы должны установить MetaMask, виртуальный кошелек Ethereum, в свой браузер. + +
+ ) + } +} +``` + +Спорим, вам даже не нужна наша помощь, чтобы понять, что здесь происходит, но для полноты картины давайте быстро разберем это: + +- Сначала наша функция проверяет, включен ли `window.ethereum` (т. е. установлен ли MetaMask). + - Если нет, мы просто устанавливаем для нашей переменной состояния `status` строку JSX, которая предлагает пользователю установить MetaMask. + - Если он включен, мы устанавливаем прослушиватель `window.ethereum.on("accountsChanged")` в строке 3, который прослушивает изменения состояния в кошельке MetaMask, включая подключение пользователем дополнительного аккаунта к децентрализованному приложению, переключение аккаунтов или отключение аккаунта. Если подключен хотя бы один аккаунт, переменная состояния `walletAddress` обновляется как первый аккаунт в массиве `accounts`, возвращаемом прослушивателем. В противном случае `walletAddress` устанавливается как пустая строка. + +И последнее, но не менее важное: мы должны вызвать ее в нашей функции `useEffect`: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) + + addWalletListener() +}, []) +``` + +Вот и все! Мы успешно завершили программирование всей функциональности нашего кошелька! Теперь перейдем к нашей последней задаче: обновлению сообщения, хранящегося в нашем смарт-контракте! + +### Шаг 6: Реализуйте функцию `updateMessage` {#step-6-implement-the-updateMessage-function} + +Итак, друзья, мы на финишной прямой! В `updateMessage` вашего файла `interact.js` мы сделаем следующее: + +1. Убедитесь, что сообщение, которое мы хотим опубликовать в нашем смарт-контакте, является действительным +2. Подписать нашу транзакцию с помощью MetaMask +3. Вызвать эту функцию из нашего фронтенд-компонента `HelloWorld.js` + +Это не займет много времени; давайте завершим это децентрализованное приложение! + +#### Обработка ошибок ввода {#input-error-handling} + +Естественно, имеет смысл иметь некоторую обработку ошибок ввода в начале функции. + +Мы хотим, чтобы наша функция завершалась раньше, если не установлено расширение MetaMask, не подключен кошелек (т. е. переданный `address` является пустой строкой) или `message` является пустой строкой. Давайте добавим следующую обработку ошибок в `updateMessage`: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + if (!window.ethereum || address === null) { + return { + status: + "💡 Подключите свой кошелек MetaMask, чтобы обновить сообщение в блокчейне.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Ваше сообщение не может быть пустой строкой.", + } + } +} +``` + +Теперь, когда у нас есть правильная обработка ошибок ввода, пришло время подписать транзакцию через MetaMask! + +#### Подписание нашей транзакции {#signing-our-transaction} + +Если вы уже знакомы с традиционными транзакциями Ethereum в web3, код, который мы напишем дальше, будет вам очень знаком. Ниже вашего кода обработки ошибок ввода добавьте следующее в `updateMessage`: + +```javascript +// interact.js + +//настройка параметров транзакции +const transactionParameters = { + to: contractAddress, // Обязательно, кроме случаев публикации контракта. + from: address, // должен совпадать с активным адресом пользователя. + data: helloWorldContract.methods.update(message).encodeABI(), +} + +//подписание транзакции +try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Посмотрите статус вашей транзакции на Etherscan! + ++ ℹ️ Как только транзакция будет проверена сетью, сообщение будет + обновлено автоматически. + + ), + } +} catch (error) { + return { + status: "😥 " + error.message, + } +} +``` + +Давайте разберемся, что происходит. Сначала мы настраиваем параметры наших транзакций, где: + +- `to` указывает адрес получателя (наш смарт-контракт) +- `from` указывает подписанта транзакции, переменную `address`, которую мы передали в нашу функцию +- `data` содержит вызов метода `update` нашего смарт-контракта Hello World, получая нашу строковую переменную `message` в качестве входных данных + +Затем мы делаем вызов await, `window.ethereum.request`, где мы просим MetaMask подписать транзакцию. Обратите внимание, в строках 11 и 12 мы указываем наш метод eth, `eth_sendTransaction`, и передаем наши `transactionParameters`. + +На этом этапе MetaMask откроется в браузере и предложит пользователю подписать или отклонить транзакцию. + +- Если транзакция будет успешной, функция вернет объект JSON, где строковая JSX `status` предлагает пользователю проверить Etherscan для получения дополнительной информации о своей транзакции. +- Если транзакция не удастся, функция вернет объект JSON, где строковая `status` передает сообщение об ошибке. + +В целом, наша функция `updateMessage` должна выглядеть так: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + //обработка ошибок ввода + if (!window.ethereum || address === null) { + return { + status: + "💡 Подключите свой кошелек MetaMask, чтобы обновить сообщение в блокчейне.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Ваше сообщение не может быть пустой строкой.", + } + } + + //настройка параметров транзакции + const transactionParameters = { + to: contractAddress, // Обязательно, кроме случаев публикации контракта. + from: address, // должен совпадать с активным адресом пользователя. + data: helloWorldContract.methods.update(message).encodeABI(), + } + + //подписание транзакции + try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Посмотрите статус вашей транзакции на Etherscan! + +
+ ℹ️ Как только транзакция будет проверена сетью, сообщение будет + обновлено автоматически. + + ), + } + } catch (error) { + return { + status: "😥 " + error.message, + } + } +} +``` + +И последнее, но не менее важное: нам нужно подключить нашу функцию `updateMessage` к нашему компоненту `HelloWorld.js`. + +#### Подключите `updateMessage` к фронтенду `HelloWorld.js` {#connect-updatemessage-to-the-helloworld-js-frontend} + +Наша функция `onUpdatePressed` должна сделать вызов await к импортированной функции `updateMessage` и изменить переменную состояния `status`, чтобы отразить, удалась ли наша транзакция или нет: + +```javascript +// HelloWorld.js + +const onUpdatePressed = async () => { + const { status } = await updateMessage(walletAddress, newMessage) + setStatus(status) +} +``` + +Это очень чисто и просто. И угадайте что... ВАШЕ ДЕЦЕНТРАЛИЗОВАННОЕ ПРИЛОЖЕНИЕ ГОТОВО!!! + +Вперед, протестируйте кнопку **Обновить**! + +### Создайте свое собственное децентрализованное приложение {#make-your-own-custom-dapp} + +Ура, вы дошли до конца руководства! Подведем итоги, вы научились: + +- Подключить кошелек MetaMask к вашему проекту децентрализованного приложения +- Считывать данные с вашего смарт-контракта с помощью API [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) +- Подписывать транзакции Ethereum с помощью MetaMask + +Теперь вы полностью готовы применить навыки из этого руководства для создания своего собственного проекта децентрализованного приложения! Как всегда, если у вас есть какие-либо вопросы, не стесняйтесь обращаться к нам за помощью в [Discord Alchemy](https://discord.gg/gWuC7zB). 🧙♂️ + +Как только вы завершите это руководство, дайте нам знать, как прошел ваш опыт или если у вас есть какие-либо отзывы, отметив нас в Twitter [@alchemyplatform](https://twitter.com/AlchemyPlatform)! diff --git a/public/content/translations/ru/developers/tutorials/hello-world-smart-contract/index.md b/public/content/translations/ru/developers/tutorials/hello-world-smart-contract/index.md new file mode 100644 index 00000000000..b13078a4658 --- /dev/null +++ b/public/content/translations/ru/developers/tutorials/hello-world-smart-contract/index.md @@ -0,0 +1,367 @@ +--- +title: "Смарт-контракт Hello World для начинающих" +description: "Вводное руководство по написанию и развертыванию простого смарт-контракта на Ethereum." +author: "elanh" +tags: + [ + "твердость", + "hardhat", + "alchemy", + "Умные контракты", + "развертывание" + ] +skill: beginner +lang: ru +published: 2021-03-31 +--- + +Если вы новичок в разработке блокчейн-приложений и не знаете, с чего начать, или если вы просто хотите понять, как развертывать смарт-контракты и взаимодействовать с ними, это руководство для вас. Мы рассмотрим создание и развертывание простого смарт-контракта в тестовой сети Sepolia с помощью виртуального кошелька [MetaMask](https://metamask.io/), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org/) и [Alchemy](https://www.alchemy.com/eth) (не волнуйтесь, если вы еще не понимаете, что все это значит, мы объясним). + +Во [второй части](https://docs.alchemy.com/docs/interacting-with-a-smart-contract) этого руководства мы рассмотрим, как можно взаимодействовать с нашим смарт-контрактом после его развертывания, а в [третьей части](https://www.alchemy.com/docs/submitting-your-smart-contract-to-etherscan) мы расскажем, как опубликовать его на Etherscan. + +Если у вас на любом этапе возникнут вопросы, не стесняйтесь задавать их в [Discord-канале Alchemy](https://discord.gg/gWuC7zB)! + +## Шаг 1. Подключение к сети Ethereum {#step-1} + +Существует много способов отправлять запросы в сеть Ethereum. Для простоты мы будем использовать бесплатную учетную запись на Alchemy — это платформа для блокчейн-разработчиков и API, которая позволяет нам взаимодействовать с блокчейном Ethereum без необходимости запускать собственные узлы. Платформа также имеет инструменты для мониторинга и аналитики, которыми мы воспользуемся в этом руководстве, чтобы понять, что происходит «под капотом» при развертывании нашего смарт-контракта. Если у вас еще нет учетной записи Alchemy, [вы можете бесплатно зарегистрироваться здесь](https://dashboard.alchemy.com/signup). + +## Шаг 2. Создайте свое приложение (и ключ API) {#step-2} + +Как только регистрация в Alchemy завершена, можно создать приложение и таким образом сгенерировать ключ API. Это позволит нам делать запросы к тестовой сети Sepolia. Если вы не знакомы с тестовыми сетями, ознакомьтесь с [этой страницей](/developers/docs/networks/). + +1. Перейдите на страницу "Create new app" в вашей панели управления Alchemy, выбрав "Select an app" на панели навигации и нажав "Create new app" + + + +2. Назовите свое приложение "Hello World", добавьте краткое описание и выберите вариант использования, например "Infra & Tooling". Далее найдите "Ethereum" и выберите сеть. + + + +3. Нажмите "Next" для продолжения, затем “Create app”, и все готово! Ваше приложение должно появиться в раскрывающемся меню панели навигации, а ключ API будет доступен для копирования. + +## Шаг 3. Создайте учетную запись Ethereum (адрес) {#step-3} + +Нам нужен аккаунт Ethereum для того, чтобы отправлять и получать транзакции. В этом руководстве мы будем использовать MetaMask, виртуальный кошелек в браузере, используемый для управления адресом вашего аккаунта Ethereum. Подробнее о [транзакциях](/developers/docs/transactions/). + +Вы можете скачать MetaMask и бесплатно создать учетную запись Ethereum [здесь](https://metamask.io/download). При создании учетной записи или если она у вас уже есть, обязательно переключитесь на тестовую сеть "Sepolia" в раскрывающемся меню сетей (чтобы мы не работали с реальными деньгами). + +Если вы не видите Sepolia в списке, зайдите в меню, затем в раздел Advanced и прокрутите вниз, чтобы включить опцию "Show test networks". В меню выбора сети перейдите на вкладку "Custom", чтобы найти список тестовых сетей, и выберите "Sepolia". + + + +## Шаг 4. Получите эфир из крана {#step-4} + +Чтобы развернуть наш смарт-контракт в тестовой сети, нам понадобится немного тестового Eth. Чтобы получить ETH в сети Sepolia, вы можете перейти к [сведениям о сети Sepolia](/developers/docs/networks/#sepolia), чтобы просмотреть список различных кранов. Если один не работает, попробуйте другой, так как они иногда могут иссякать. Получение тестовых ETH может занять некоторое время из-за загруженности сети. Вскоре после этого вы увидите ETH в своем кошельке MetaMask! + +## Шаг 5. Проверьте свой баланс {#step-5} + +Чтобы дважды проверить наш баланс, давайте сделаем запрос [eth_getBalance](/developers/docs/apis/json-rpc/#eth_getbalance), используя [инструмент Alchemy Composer](https://sandbox.alchemy.com/?network=ETH_SEPOLIA&method=eth_getBalance&body.id=1&body.jsonrpc=2.0&body.method=eth_getBalance&body.params%5B0%5D=&body.params%5B1%5D=latest). Результат будет содержать сумму ETH в нашем кошельке. После ввода адреса вашего аккаунта MetaMask и нажатия «Send Request» вы должны увидеть примерно такой ответ: + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> **ПРИМЕЧАНИЕ.** Этот результат указан в wei, а не в ETH. Wei это наименьшая единица измерения эфира. Конвертация из wei в ETH: 1 eth = 1018 wei. Итак, если мы конвертируем 0x2B5E3AF16B1880000 в десятичную систему, мы получим 5\*10¹⁸, что равно 5 ETH. +> +> Фух! Наши тестовые деньги на месте
.env в коммиты! Пожалуйста, никогда и никому не сообщайте и не показывайте содержимое файла .env, так как тем самым вы компрометируете свои секретные данные. Если вы используете систему контроля версий, добавьте .env в файл gitignore.
+