Кошельки имеют решающее значение для входа в криптовалюту или разработки любого dAPP (децентрализованного приложения), поскольку они обеспечивают различные важные функции в экосистеме Web3. В результате в этой статье мы углубимся в экосистему Solana, которая является первым в мире блокчейн-протоколом с открытым исходным кодом, позволяющим разработчикам по всему миру создавать децентрализованные приложения (dApps) на своей платформе. Solana теперь способна выполнять 50 000 TPS (транзакций в секунду), что делает ее самым быстрым блокчейном в мире.

Предпосылки

Базовые знания JavaScript Некоторый опыт работы с React JS Expo CLI Watchman (требуется только для пользователей macOS или Linux) Git

Введение

В этом практическом руководстве вы создадите базовое приложение Wallet с React и Web3, которое будет взаимодействовать с Solana Network.

Среда установки:

Давайте сначала настроим и установим Node.js и Npm.

Скачать узел здесь. Если он у вас уже установлен, пропустите этот шаг.

  • Подтвердите, если у вас установлен Node
node -v

Node.js поставляется с Npm, поэтому вы можете использовать приведенный ниже код, чтобы подтвердить его установку.

npm -v

Теперь, когда мы настроили нашу среду, давайте инициализируем наш проект и начнем сборку.

Настройка шаблона

Я создал шаблонный репозиторий, чтобы упростить создание этого приложения кошелька.

Это содержит:

Мы реализуем базовый скелет с пустыми методами по ходу руководства. Макет для отображения данных, которые мы получим из сети Solana. Пакет @solana/web3.js для связи с сетью Solana.

Для начала мы установим Watchman, чтобы иметь возможность установить Expo (требуется только для пользователей macOS или Linux):

$ brew update
$ brew install watchman

Далее устанавливаем Экспо или проверяем, установлено ли уже

npm install -g expo-cli

Теперь мы готовы настроить Boilerplate, для продолжения вам потребуется клонировать репозиторий:

git clone https://github.com/LucidSamuel/solana-wallet.git

После клонирования репозитория установите необходимые зависимости в каталоге:

cd solana-wallet    // the folder directory
yarn install

Затем, наконец, запустите Expo

expo web

Вы должны увидеть что-то вроде этого на своем терминале:

Чтобы завершить процесс, нажмите w, как указано в терминале, чтобы открыть сервер в веб-браузере. В браузере должен появиться такой экран:

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

Следуя этому руководству, не закрывайте терминал и всегда держите Expo запущенным.

Подключение к сети Солана

В отличие от других блокчейнов, где вам может потребоваться подключиться к RPC или запросить ключи API от сторонних сервисов, подключение к сети Solana является простым и может быть выполнено в несколько шагов.

Если вы откроете App.js из клонированного репозитория, вы заметите, что импорт и пустые функции, которые вам нужно реализовать, уже включены:

import {
  Connection, // connection receives an endpoint argument containing the full node's URL.
  clusterApiUrl,
  Keypair,
  LAMPORTS_PER_SOL,
} from "@solana/web3.js";

Мы будем использовать devnet, который предназначен для использования в качестве песочницы для всех, кто заинтересован в построении тестовой среды сети Solana, где токены ненастоящие.

Я уже определил необходимые функции; так что все, что вам остается, это реализовать их.

Для этого вам потребуется найти в коде функцию createConnection и отредактировать закомментированный код следующим кодом:

const createConnection = () => {
  return new Connection(clusterApiUrl("devnet"));
};

Наконец, мы вызовем эту функцию и напечатаем в консоли следующее, чтобы проверить, подключена ли она к сети:

console.log(createConnection());

Если все работает гладко, вы должны увидеть что-то вроде этого в консоли вашего браузера:

Object{
   "_commitment":"undefined",
   "_confirmTransactionInitialTimeout":"undefined",
   "_rpcEndpoint":"https://api.devnet.solana.com",
   "_rpcWsEndpoint":"wss://api.devnet.solana.com/",
   "_rpcClient":{
      "…"
   },
   "_rpcRequest":"createRpcRequest(method",
   "args)",
   "_rpcBatchRequest":"createRpcBatchRequest(requests)",
   "_rpcWebSocket":{
      "…"
   },
   "_rpcWebSocketConnected":false,
   "_rpcWebSocketHeartbeat":null,
   "…"
}

Создание учетной записи

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

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

import {
  Connection,
  clusterApiUrl,
  Keypair,      // the keypair import
  LAMPORTS_PER_SOL,
} from "@solana/web3.js";

Далее, строка 1: определение функции.

Строка 2: Определите переменную пары ключей с результатом вызова функции для создания случайной пары ключей.

Строка 3: Определите переменную initialBalance и установите ее в 0.

Строка 4: Установите переменную состояния с двумя ключами: ключевой парой и балансом.

найдите в нашем коде функцию createAccount и реализуйте следующий код:

const createAccount = () => {
   const keypair = Keypair.generate();
   const initialBalance = 0;
   setAccount({ keypair: keypair, balance: 0 });
 };

Приложение должно перезагрузиться, и вы сможете создавать новые случайные учетные записи каждый раз, когда нажимаете кнопку «Создать новую учетную запись».

Получить баланс счета

Чтобы получить баланс счета, вам нужно будет найти в коде функцию getBalance и реализовать ее следующим образом:

const getBalance = async (publicKey) => {
 const connection = createConnection();
 const lamports = await connection.getBalance(publicKey).catch((err) => {
   console.error(`Error: ${err}`);
 });
   return lamports / LAMPORTS_PER_SOL; // In the Solana Network, a lamport is the smallest unit: 1 SOL = 1 billion lamports.
 };

Запросить аирдроп

Токены Devnet не являются фактическими токенами. Solana Network позволила нам запрашивать токены для проведения тестирования при разработке наших приложений.

Функция Solana Web3 requestAirdrop принимает два параметра:

to: PublicKey учетной записи
lamports: количество lampports

Для этого нам нужно будет реализовать пустую функцию requestAirdrop в нашем коде следующим образом:

const requestAirdrop = async (publicKey) => {
    setRequestAirdropButton({ text: BUTTON_TEXT_LOADING, loading: true });
    const connection = createConnection();
    const airdropSignature = await connection.requestAirdrop(
      publicKey,
      LAMPORTS_PER_SOL
    );
    const signature = await connection.confirmTransaction(airdropSignature);
    const newBalance = await getBalance(publicKey);
    setAccount({ ...account, balance: newBalance });
    setRequestAirdropButton({ text: BUTTON_TEXT, loading: false });
  };

Окончательный код

Вот как должен выглядеть наш окончательный код App.js:

https://gist.github.com/LucidSamuel/ce8e391a841b2c2c22d318c85a9e1fdd

Заключение

Нам удалось успешно разработать веб-приложение для создания кошелька Solana с базовыми возможностями. Отсюда вы можете приступить к созданию уникальных приложений с более динамичным пользовательским интерфейсом.

Также опубликовано здесь