Приложение для интеграции кошелька и формы доната в Tilda

Запуск

Для управления зависимостями используется pnpm.

Перед билдом нужно установить PUBLIC_URL в настройках netlify (/settings/env#environment-variables) на URL куда будет задеплоено приложение.

pnpm install
# картинки подключаются автоматически
pnpm build

Подключение к Tilda

Добавление скрипта к всему сайту

В настройках сайта в разделе "HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD" добавить следующее:

<script type="module" crossorigin defer src="https://public-url.netlify.app/static/js/main.js"></script>

Отображение кнопки Connect wallet

Без этого блока скрипт не начинает работу (отображение балансов/формы донатов)

Кнопка рендериться в блок с id walletConnectBlock

Отображение блока доната

Рендериться в блок с id donationForm

Отображение количества токенов

Приложение ожидает две переменных на глобальном объекте window

declare global {
  interface Window {
    TOKENS_AMOUNT?: number;
    renderTokensBalances?: (tokensBalances: readonly number[]) => void;
  }
}

TOKENS_AMOUNT - количество токенов балансы, которых нужно запросить, начиная с 0го id в контракте.

В функцию renderTokensBalances прокидывается массив балансов (размер равен TOKENS_AMOUNT) из контракта для текущего кошелька. 0й токен умножен на 1e-18, так как считается fungible.

Покупка SFT

Приложение слушает событие hashchange.

Для вызова покупкии необходимо нажать на якорную ссылку вида #buy123, где 123 - это id токена из контракта. Т.е. для подключения нового SFT достаточно добавить кнопку с href="#buy1" + добавить кнопку connect wallet на страницу.

Отображение виджета обмена

Рендериться в блок с id swapWidget

Подключение виджета uniswap с изменениями

Можно опубликовать виджет в npm или github packages

В данный момент сделано второе с именем пакета @ilmpc/charity-widget. После публикации нужно будет заменить этот пакет на имя опубликованного.