Кошельки имеют решающее значение для входа в криптовалюту или разработки любого 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 с базовыми возможностями. Отсюда вы можете приступить к созданию уникальных приложений с более динамичным пользовательским интерфейсом.
Также опубликовано здесь