Ethereum ️❤️ JavaScript: шпаргалка

Даже если вы не верите, что Биткойн и Эфириум восстановятся, в областях Web3 и Metaverse все еще есть много вакансий. Это может быть чем-то стоящим, потому что это может стать началом хорошей карьеры. Я начал работать с криптой больше года назад и решил написать эту шпаргалку по Ethereum и JavaScript, потому что ее было не так просто найти. Здесь вы найдете примеры того, как использовать самые популярные библиотеки для создания распределенных приложений, включая создание кошельков, подписание сообщений и отправку транзакций. С помощью кода!

Я должен упомянуть об этом в самом начале. мы будем использовать тестовую сеть Görli для выполнения всех операций в этой статье. Мы не будем использовать токены, имеющие денежную стоимость, поэтому вам не нужно беспокоиться о своих средствах.

Что делает эту статью уникальной, так это то, что мы сосредоточимся только на наиболее практических аспектах, а не на создании всего приложения Next.JS, как я делал это в своих предыдущих статьях. Если вы чувствуете, что вам нужно обновить весь процесс создания всего приложения с нуля, вам следует прочитать мою статью на Как создать игру 2048 в React, которую я опубликовал несколько месяцев назад.

Эта статья содержит несколько внешних ресурсов, таких как:

* Görli ETH Faucet — пример приложения, созданного мной. Это позволит вам играть с вашим кошельком MetaMask. * Исходный код (GitHub) — не стесняйтесь использовать его самостоятельно. * ...и видео на YouTube. Мне потребовалось больше месяца, чтобы подготовить весь код для этого урока, поэтому для меня будет очень ценным, если вы посмотрите его, нажмете кнопку «Мне нравится» и подпишетесь на мой канал.

https://youtu.be/M0tX6l6INqY?embedable=true

Спасибо!

Краткое введение

Я не буду объяснять, что такое блокчейн и что он меняет мир. Я не ожидаю, что вы что-то знаете о блокчейне, но это может быть полезно. Если у вас есть какие-либо вопросы, вы можете связаться со мной в Twitter. Если вы хотите выполнить транзакцию на Ethereum, вам нужен кошелек. Есть два типа кошельков - программные (программные) кошельки и аппаратные кошельки. Аппаратные кошельки более безопасны, поскольку украсть их учетные данные (закрытые ключи и мнемоники) сложнее. Поскольку мы только тренируемся, в этой статье мы будем использовать софт-кошельки. Наиболее популярным является MetaMask. Вы можете установить его как расширение для браузера, и это бесплатно. Если у вас его еще нет - вы можете скачать его отсюда.

Библиотеки

После того как у вас есть бумажник, мы можем приступить к программированию. Во-первых, нам нужно установить две необходимые библиотеки для разработки Ethereum — ethers и useDapp. КСТАТИ. В этой статье я использую yarn, но если вы лучше знакомы с npm, вы также можете использовать его.

yarn add ethers @usedapp/core 

Войти в полноэкранный режим Выйти из полноэкранного режима

• эфиры — позволяет разработчикам взаимодействовать с блокчейном. Получайте данные, отправляйте транзакции, подписывайте сообщения, создавайте кошельки и многое другое.
• useDapp — это эфирная оболочка для React. Он предлагает множество хуков для подключения кошелька, получения баланса, отправки транзакции, поэтому разработчикам не нужно взаимодействовать с низкоуровневыми API. Мы будем использовать его для удобства.

Давайте настроим React

Все необходимые библиотеки установлены, поэтому мы можем настроить наше приложение React. В основном файле нам нужно активировать useDapp, добавив DAppProvider с конфигурацией Ethereum API:

// file: pages/_app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { DAppProvider, Goerli } from '@usedapp/core'

const config = {
  readOnlyChainId: Goerli.chainId,
  readOnlyUrls: {
    [Goerli.chainId]: "https://goerli.infura.io/v3/00000000000000000000000000000000"
  }
}
function MyApp({ Component, pageProps }: AppProps) {
  return (<DAppProvider config={config}><Component {...pageProps} /></DAppProvider>)
}

export default MyApp

Как видите, нам нужно предоставить Ethereum API для DAppProvider. Где мы можем его найти? Для разработки я бы создал бесплатную учетную запись на Infura.io и сгенерировал ключи API для Ethereum. Это самый простой способ. Когда вы создали свою учетную запись и вошли в свою панель управления. Вы должны нажать кнопку «Создать новый ключ» в правом верхнем углу и выбрать «Web3 API (ранее Ethereum)» и назвать свой проект, как хотите — в моем случае это fluffykitten.< /p>

Теперь нам нужно выбрать сеть GÖRLI из выпадающего списка и скопировать ссылку API:

Как только вы это сделаете, мы готовы к работе.

Подписание сообщений

Одной из важнейших функций каждого кошелька является возможность подписывать сообщения. Это будет очень важно для нас, поскольку мы можем использовать это подписанное сообщение для аутентификации пользователей. Почему? Если пользователь смог подписать сообщение своим кошельком - мы можем предположить, что оно принадлежит ему, и можем выполнять транзакции из него. Это очень распространенный подход в разработке Web3.

Звучит здорово, правда? Но как мы можем использовать это в React? Это просто. Мы должны использовать хук useEthers, предлагаемый useDapp, и извлекать из него библиотечное свойство (строка 6). Это позволит нам взаимодействовать с кошельком пользователя. Теперь давайте определим функцию signMessage. Мы будем использовать вызов библиотеки для получения подписавшего кошелька. Signer позволяет нам запрашивать транзакции и подписывать сообщения из кошелька пользователя. Пользователю нужно будет одобрить эти действия — посмотрите на снимок экрана с модальным окном MetaMask выше. Как только у нас есть подписывающее лицо, мы можем вызвать метод signMessage с текстовым сообщением, которое мы хотим подписать с этим адресом кошелька.

// file: pages/Home.tsx
import { useEthers } from '@usedapp/core'
import type { NextPage } from 'next'

const Home: NextPage = () => {
  const { library } = useEthers()

  const signMessage = async () => {
    const signer = library?.getSigner()
    const signature = await signer?.signMessage("Fluffykitten FTW!")
    alert(signature)
  }

  return (
    <div>
      <button onClick={signMessage}>Claim</button>
    </div>
  )
}

export default Home

Как проверить подписанные сообщения?

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

Разработчики обычно подготавливают конечные точки API для проверки подобных сообщений и записи их в базы данных по юридическим причинам. Предположим, мы хотим проверить подписанное сообщение самостоятельно. Как мы можем это сделать?

Во-первых, нам нужно установить еще один пакет с именем @metamask/eth-sig-util. Вы можете сделать это, выполнив следующую команду в своем терминале:

yarn add @metamask/eth-sig-util 

Теперь нам нужно импортировать recoverPersonalSignature из этого пакета и передать ему сообщение и подпись. Он вернет адрес, фактически подписавший это сообщение. После этого нам просто нужно сравнить возвращенный адрес с адресом, предоставленным пользователем.

import { recoverPersonalSignature } from "@metamask/eth-sig-util"

const address = "0x00000000000000000000000000000000
const message = "Fluffykitten FTW!"
const signature = "0x00000000000000000000000000000000000000000000000000000000000000000000000000000"

const recoveredAddress = recoverPersonalSignature({ data: message, signature})

if (recoveredAddress === address) {
  console.log('OK! SIGNATURE MATCHED!'
}

console.log('STOP! SIGNATURE MISMATCH!'

Как использовать Ethereum в Node.js?

Теперь вы знаете, как взаимодействовать с Ethereum с помощью React и браузерных кошельков, но это становится немного сложнее, когда речь идет о Node.JS. В Node.JS вам нужно будет вызывать блокчейн, используя низкоуровневые библиотеки, такие как эфиры. Сначала это может показаться пугающим, но я дам вам несколько советов, как начать.

Во-первых, нам нужно создать кошелек с использованием эфиров. Это очень просто — нам просто нужно добраться до пространства имен Wallet и вызвать метод createRandom. Он вернет новые учетные данные кошелька.

import { ethers } from "ethers"

const wallet = ethers.Wallet.createRandom()

console.log("Your new Ethereum wallet credentials:")
console.log("Wallet address", wallet.address)
console.log("Private key", wallet.privateKey)

БУДЬТЕ ОСТОРОЖНЫ: Вы должны защитить свой закрытый ключ и никогда никому его не раскрывать! Если кто-то его перехватит, он сможет получить доступ к кошельку и украсть ваши средства.

Где я могу получить бесплатный эфир для тестовой сети?

Теперь ваш кошелек готов, поэтому нам нужно пополнить его эфиром тестовой сети. Вы можете получить немного из моего сборщика Görli ETH. Просто используйте свой браузер, подключите свой кошелек MetaMask и нажмите кнопку Claim. Очевидно, что вам нужно будет сначала подписать сообщение для аутентификации этого кошелька. Реальный вариант использования подписи сообщений, не так ли?

Как только вы получите эфир в тестовой сети, мы отправим его на адрес кошелька, созданный с использованием эфиров. Просто скопируйте адрес в буфер обмена и следуйте инструкциям на скриншотах. Сначала нажмите кнопку "Отправить" (обозначена фиолетовым кружком на скриншоте ниже).

Теперь вам нужно указать адрес кошелька получателя, количество токенов и нажать кнопку «Далее».

Теперь нам нужно проверить нашу транзакцию и нажать «Подтвердить».

Теперь наша транзакция транслируется. Он должен поступить в кошелек получателя в течение 3 минут.

Как отправить транзакцию с помощью эфиров?

Теперь мы проделаем то же упражнение, что и в предыдущем шаге, но с использованием кода. На этот раз фрагмент кода немного длиннее и сложнее, поэтому я оставлю его здесь и объясню все ниже.

const infuraUrl = "https://goerli.infura.io/v3/00000000000000000000000000000000"
const chainId = 5 // Görli network
const provider = new ethers.providers.JsonRpcProvider(infuraUrl, chainId)

const privateKey = "0x0000000000000000000000000000000000000000000000000000000000000000"
const wallet = new ethers.Wallet(privateKey, provider)

// 1 ETH = 1 * 10 ** 18 wei
const amountInWei = BigInt(1 * 10 ** 18)
const receiver = "0x00000000000000000000000000000000"
const trx = {
    to: receiver,
    value: ethers.BigNumber.from(amountInWei.toString())
}
await wallet.sendTransaction(trx)

В первых трех строчках мы настраиваем Ethereum API. Это точно такая же конечная точка API, которую мы использовали ранее для настройки useDapp. Для chainId необходимо установить значение 5, так как мы хотим использовать тестовую сеть Görli. Если вам нужно использовать Mainnet (также известный как производство), измените его на 1, но тогда вы будете работать с реальным эфиром (он же реальными деньгами). Очевидно, что вам нужно иметь немного настоящих эфиров, прежде чем тратить их.

В строке 3 мы устанавливаем соединение с Ethereum API. В строках 4 и 5 мы настраиваем кошелек, используя учетные данные, которые мы создали ранее. Нам нужно передать закрытый ключ и коннектор Ethereum API.

В строке 6 мы определяем количество токенов, которое мы хотим отправить получателю — в нашем случае это 1 эфир. Прежде чем мы отправим эту транзакцию, нам нужно преобразовать эту сумму в наименьшую единицу Ethereum, которая равна Wei. Ethereum имеет 18 десятичных знаков, поэтому вам нужно использовать специальные классы, такие как BigInt и BigNumber, чтобы разместить эти числа в памяти.

Сколько стоит 1 Эфир в Вэй? 1 Эфир = 1000000000000000000 Вэй (18 цифр)

В строке 7 мы определяем адрес кошелька получателя.

В строке 8 мы создаем объект транзакции. Обратите внимание, что нам нужно преобразовать число BigInt в BigNumber, полученное из эфиров. Очень важно конвертировать в тип, понятный Ethereum.

и в строке 9 мы выполняем транзакцию.

Последние слова

Моя главная идея для этой статьи заключалась в том, чтобы дать шпаргалку о том, как начать взаимодействовать с блокчейном Ethereum, не читая длинную документацию и официальные документы. Это все, что я мог сделать менее чем в 2000 слов. Я надеюсь, что вы найдете это полезным. В начале я упомянул, что для этой статьи я создал пример приложения, которое вы можете найти на моем Github. Если вам это нравится, пожалуйста, дайте ему звезду! Спасибо.

В последнее время я стал более активен в Твиттере! Буду признателен, если вы подпишитесь на меня!

Если вы нашли эту статью полезной, поделитесь ею, чтобы больше разработчиков могли извлечь из нее уроки. Время от времени я публикую видео на своем канале YouTube, и было бы здорово, если бы вы подписались, нажали кнопку "Мне нравится" и оставили комментарий под своим любимым видео.

Оставайтесь с нами!

:::информация Также опубликовано здесь.

:::