Как обеспечить возможность пожертвований на любом сайте с помощью блокчейна Elrond и токенов EGLD

Блокчейн Elrond — это решение первого уровня, которое отличается производительностью и дешевизной. Это полноценное блокчейн-решение, так что любой может построить на его основе свою систему.

Я хочу показать вам, как просто подготовить виджет для сайта, который позволит получать пожертвования в EGLD, который является родным токеном блокчейна Elrond.

Пожалуйста, обратитесь к официальной документации Elrond, если хотите прочитать больше: https://docs.elrond.com/.

Для демонстрации и примера я буду использовать Astro и одну из его готовых тем, а также сгенерирую статический веб-сайт. Почему именно Astro? Потому что я думаю, что с его помощью можно быстро создать статический блог. Но, конечно, это может быть что угодно. Генератор статических сайтов, Solid.js, что угодно. Для сайтов на основе React, пожалуйста, проверьте: Elrond Nextjs dApp template.

Цель этой статьи — показать вам, как подготовить простой виджет даже на статическом HTML-сайте.

Сначала давайте ответим на вопрос, зачем нам нужен такой инструмент?

Вы наверняка знаете такие сервисы, как «купи мне кофе». Это отличные способы привлечь внимание и заставить вашу пользовательскую базу поддержать вас реальными деньгами. То же самое может работать и с криптовалютами. В данном случае с токеном EGLD.

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

Что мы будем создавать?

Приложение будет представлять собой статичный сайт с фронтендом — просто пример для демонстрации. Это будет блог, одна из страниц которого позволит пользователям пожертвовать несколько токенов EGLD. Пользователи будут отправлять их на заранее определенный адрес кошелька с помощью мобильного кошелька Maiar. Если вы не знаете, что это такое, не волнуйтесь. Подробнее о нем вы можете прочитать на его сайте. Это стандартное мобильное приложение, которое служит в качестве криптокошелька, способного хранить информацию об активах Elrond, Bitcoin, Ethereum и Binance Coin.

Таким образом, функциональность нашего виджета пожертвований будет довольно простой. Мы отобразим QR-код, по которому пользователи смогут войти в систему с помощью своего мобильного приложения Maiar. Затем они смогут подготовить, подписать и отправить транзакцию. Мы заранее определим одну цену, которую пользователи смогут выбрать для этого демо. Я думаю, что это может быть 0,5 EGLD. Вы сможете изменить ее или даже добавить дополнительные опции. Все это — просто статический веб-сайт и JavaScript.

После завершения транзакции пользователь получит «квитанцию» со ссылкой на Elrond blockchain explorer. Помните, что функциональность здесь может быть расширена, и вы можете добавить больше логики, например, какие-то раздачи, бесплатные вещи, подписка на рассылки, и все, что вы только можете придумать.

Как мы будем это создавать?

Экосистема Elrond богата множеством инструментов для разработчиков. Есть Typescript/JavaScript SDK под названием erdjs, или я должен написать набор библиотек, а не только erdjs. Это здорово, но проблема в том, что SDK и все библиотеки имеют много функциональности, которая нам не нужна, и они требуют этапов сборки, чтобы заставить их работать с браузером. Именно поэтому существует инструмент elven.js.

elven.js — это скрипт для использования в браузерах. Это простой скрипт-обертка над библиотеками erdjs. Он предварительно собран, поэтому вам не нужно никаких шагов по сборке. Все в одном, решение plug-n-play. Мы будем использовать его для этой задачи. Подробнее об elven.js читайте в этом введении: Как взаимодействовать с блокчейном Elrond на простом статическом сайте.

Инициализация астро?

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

npm init astro -- --template blog
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Весь демо-сайт с виджетом вы найдете в репозитории GitHub.

Итак, теперь давайте посмотрим, как использовать скрипт elven.js и создать виджет пожертвований.

Инициализация Elven.js

В стандартном статическом сайте вы можете импортировать компоненты из CDN или локального файла. Посмотрите пример здесь: Elven.js (StackBlitz).

Но в Astro мы будем устанавливать elven.js с помощью npm. Вы можете добавить его:

npm install elven.js
Войти в полноэкранный режим Выйти из полноэкранного режима

Не забудьте выполнить команду в только что созданном проекте Astro.

После установки elven.js нам нужно его инициализировать. Я создам отдельный файл JavaScript под названием elven-init.mjs. Я помещу его в папку pages, рядом с нашей индексной страницей. Это будет вся наша логика для виджета пожертвований. Затем в index.astro я импортирую его. Таким образом, файл index будет выглядеть примерно так:

---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
---

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    </head>
    <body>
        <Header />
        <main>
            <p><strong>Elrond donate widget with <a href="https://github.com/juliancwirko/elven.js">Elven.js</a></strong></p>
            <p><strong>No real money here!</strong></p>
            <p>All works on the devnet, but it is ready for mainnet usage!</p>
            <div id="elrond-donate-widget-container">
            </div>
        </main>
        <Footer />
        <script>
            import './elven-init.mjs'
        </script>
    </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, здесь у нас есть два важнейших участка кода. Пустой div с id elrond-donate-widget-container и затем импорт скрипта. Мы импортируем ранее созданный файл elven-init.mjs.

Давайте посмотрим, что должно попасть в пользовательский файл elven-init.mjs.

Прежде всего, нам нужно импортировать необходимые компоненты из elven.js:

import {
  ElvenJS,
  Transaction,
  Address,
  TransactionPayload,
  TokenPayment,
} from "elven.js";
Вход в полноэкранный режим Выход из полноэкранного режима

Затем, ниже, нам нужно инициализировать elven.js. Мы можем сделать это следующим образом:

const initElven = async () => {
  const isInitialized = await ElvenJS.init({
    apiUrl: "https://devnet-api.elrond.com",
    chainType: "devnet",
    apiTimeout: 10000,
    onLoggedIn: () => { uiLoggedInState(true); uiSpinnerState(false); },
    onLoginPending: () => { uiSpinnerState(true); },
    onLogout: () => { uiLoggedInState(false); uiSpinnerState(false); },
  });
  uiLoggedInState(isInitialized);
};
initElven();
Войти в полноэкранный режим Выйти из полноэкранного режима

Функция ElvenJS.init является асинхронной, поэтому нам нужно обернуть ее и вызвать функцию-обертку ниже. Функция ElvenJS.init принимает конфигурацию сети — конечную точку API, тип цепи и таймаут API. Функция uiLoggedInState — это вспомогательная функция, отвечающая за изменение состояния пользовательского интерфейса. Для простоты она также будет добавлена в elven-init.mjs, но вы можете держать ее в отдельном файле. Это простая функция манипуляции DOM, и выглядит она следующим образом:

const uiLoggedInState = (loggedIn) => {
  const loginMaiarButton = window.document.getElementById(
    "button-login-mobile"
  );
  const logoutButton = document.getElementById("button-logout");
  const txButton = document.getElementById("button-tx");
  if (loggedIn) {
    loginMaiarButton.style.setProperty('display',"none");
    logoutButton.style.setProperty('display', 'block');
    txButton.style.setProperty('display', 'block');
  } else {
    loginMaiarButton.style.setProperty('display',"block");
    logoutButton.style.setProperty('display', 'none');
    txButton.style.setProperty('display', 'none');
  }
};
Вход в полноэкранный режим Выход из полноэкранного режима

Вход в систему с помощью elven.js

После инициализации мы можем приступить к созданию функциональности входа в систему. Нам нужна пара кнопок в файле страницы index.astro. Как вы, вероятно, уже знаете, посмотрев на uiLoggedInState.

Мы можем добавить их ниже div elrond-donate-widget-container. Это будет выглядеть следующим образом:

<button class="button" id="button-tx" style="display: none;">Donate!</button>
<button class="button" id="button-login-mobile" style="display: none;">Connect!</button>
<button class="button" id="button-logout" style="display: none;">Disconnect</button>
Войти в полноэкранный режим Выйти из полноэкранного режима

Итак, у нас есть три кнопки, все они изначально скрыты. В функции init мы устанавливаем состояние пользовательского интерфейса, поэтому все будет отображаться так, как должно быть. Нам также понадобится немного CSS для кнопок и контейнеров, но давайте оставим это сейчас. Вы можете проверить это в репозитории.

Итак, теперь, когда у нас есть кнопка для запуска входа в мобильное приложение Maiar, давайте добавим слушателя клика. Он инициализирует вход в мобильное приложение Maiar, показывая QR-код, а затем вам нужно будет отсканировать его с помощью кошелька Maiar. Не волнуйтесь. Вы также можете сделать это в devnet. Вам понадобится только EGLD из крана Элронда. Вы найдете его в веб-кошельке Элронда. При необходимости выберите кошелек devnet или кошелек mainnet. Конечно, в mainnet вам нужно будет купить немного EGLD. Вы можете войти туда, используя мобильное приложение Maiar, так же, как мы будем использовать его для виджета пожертвований. В кошельке devnet вы найдете опцию крана, чтобы получить 30 фальшивых токенов EGLD.

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

document
  .getElementById("button-login-mobile")
  .addEventListener("click", async () => {
    try {
      await ElvenJS.login("maiar-mobile", {
        qrCodeContainerId: "elrond-donate-widget-container"
      });
    } catch (e) {
      console.log("Login: Something went wrong, try again!", e?.message);
    }
  });
Вход в полноэкранный режим Выход из полноэкранного режима

Основной функцией здесь является ElvenJS.login('maiar-mobile', {...}). Здесь важно то, что мы передадим id для контейнера QR-кода. В нашем случае это elrond-donate-widget-container. Мы также использовали еще один помощник UI здесь с текстом загрузочного волчка. Не беспокойтесь об этом. Он также будет находиться в файле elven-init.mjs. Он отвечает за состояния загрузки UI, индикацию и ничего более.

Maiar mobile auth использует WalletConnect под капотом. Поэтому здесь нужны обратные вызовы при входе и выходе (возможно, в будущем это будет перенесено в функцию init).

Проведите транзакцию с помощью elven.js

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

const egldTransferAddress = 'erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f';
const donatePrice = 0.5;

document.getElementById('button-tx').addEventListener('click', async () => {
  updateTxHashContainer(false);
  const demoMessage = 'Elrond donate demo!';

  const tx = new Transaction({
    nonce: ElvenJS.storage.get('nonce'),
    receiver: new Address(egldTransferAddress),
    gasLimit: 50000 + 1500 * demoMessage.length,
    chainID: 'D',
    data: new TransactionPayload(demoMessage),
    value: TokenPayment.egldFromAmount(donatePrice),
    sender: new Address(ElvenJS.storage.get('address')),
  });

  try {
    uiSpinnerState(true);
    const transaction = await ElvenJS.signAndSendTransaction(tx);
    uiSpinnerState(false);
    updateTxHashContainer(transaction.hash);
  } catch (e) {
    uiSpinnerState(false);
    throw new Error(e?.message);
  }
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь есть пара моментов. Во-первых, у нас есть две переменные: адрес кошелька, на который будут отправлены токены EGLD, и значение, которое будет отправлено. Здесь мы подготавливаем транзакцию, используя класс Transaction. Здесь нам нужно передать несколько вещей. Адрес, значение, лимит газа, nonce и т.д. Все это обернуто хелперами, которые экспортируются из erdjs SDK. Более подробную информацию о них вы найдете в поваренной книге erdjs. О, и мы также используем ElvenJS.storage для получения некоторых данных из localStorage. Он предоставляется elven.js.

Затем достаточно использовать ElvenJS.signAndSendTransaction(tx) для подписания и отправки транзакции. Вам нужно будет одобрить транзакцию в кошельке мобильного приложения Maiar.

После того, как транзакция будет готова, вы получите хэш транзакции, а в данном демо-ролике — ссылку на проводник Elrond. Мы используем UI-помощник updateTxHashContainer для создания и обновления UI. Вы также найдете его в elven-init.mjs.

Выход из системы

Конечно, существует возможность выйти из системы и очистить все данные в браузере. Чтобы сделать это, вам нужно использовать:

document.getElementById('button-logout').addEventListener('click', async () => {
  try {
    await ElvenJS.logout();
  } catch (e) {
    console.error(e.message);
  }
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Итак, мы используем ElvenJS.logout(), а затем запускаем все помощники пользовательского интерфейса.

Это все, что вам нужно для подготовки виджета. Пожалуйста, проверьте его вживую по адресу: elrond-donate-widget-demo.netlify.app.

Как использовать его в сети?

Чтобы использовать его в основной сети Elrond с реальным EGLD, вам нужно сделать несколько вещей. Прежде всего, не забудьте изменить адрес своего кошелька. Конечно, вы можете иметь тот же адрес в основной сети, но убедитесь, что вы использовали правильный адрес.

Затем вам нужно будет настроить функцию ElvenJS.init следующим образом:

await ElvenJS.init({
  apiUrl: 'https://api.elrond.com',
  chainType: 'mainnet',
  apiTimeout: 10000,
  onLoggedIn: () => { uiLoggedInState(true); uiSpinnerState(false); },
  onLoginPending: () => { uiSpinnerState(true); },
  onLogout: () => { uiLoggedInState(false); uiSpinnerState(false); },
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все. Вы готовы к работе с основной сетью.

Резюме

Простой виджет donate показывает, насколько полезен скрипт elven.js. Он может гораздо больше, вы можете не только переводить токены EGLD, но и совершать транзакции для ваших пользовательских смарт-контрактов. И будет еще больше, все упрощено.

Ознакомьтесь с этими ссылками:

  • elven.js — документация, примеры и репозиторий
  • Elrond donate widget — репозиторий с описанным здесь демо, с живой ссылкой на сайт

Дайте мне знать, что вы думаете об elven.js и этом примере. Вы можете найти меня в Twitter. Также загляните на мой сайт: julian.io.

Оцените статью
devanswers.ru
Добавить комментарий