Smart Buycoin Widget

Smart Buycoin Widget — это интеллектуальный терминал для кросс-чейн обменов, объединяющий ликвидность всего DeFi-рынка в едином интерфейсе. Мы предоставляем готовое решение для бесшовного обмена активов внутри и между блокчейнами, используя передовые алгоритмы маршрутизации для поиска лучших курсов и минимальных комиссий. Виджет не ограничивается одним мостом или DEX. Он анализирует предложения от десятков ведущих протоколов (включая Sushiswap, Thorswap, Relay, Allbridge и др.), чтобы предоставить пользователю наилучший возможный курс в моменте.

Основные возможности (Core Features)

🌐 Глобальная агрегация ликвидности

Виджет не ограничивается одним мостом или DEX. Он анализирует предложения от десятков ведущих протоколов (включая Uniswap, 1inch, Stargate, Across и др.), чтобы предоставить пользователю наилучший возможный курс в моменте.

🛣 Интеллектуальная маршрутизация (Smart Routing)

Наш алгоритм строит сложные маршруты обмена ("Multi-hop"), которые могут включать несколько промежуточных шагов (Swap → Bridge → Swap), оставаясь при этом невидимыми для пользователя. Вы просто выбираете, что отдать и что получить — виджет сам найдет кратчайший и дешевый путь.

🔗 Бесшовная совместимость экосистем

Стираем границы между разными архитектурами. Виджет поддерживает нативные обмены между EVM-сетями (Ethereum, Arbitrum, Base, Polygon, BSC) и Solana, обеспечивая единый UX без необходимости использовать разные кошельки или интерфейсы.

🛡 Абстракция сложности

Сложные процессы, такие как одобрение токенов (approvals), переключение сетей и подписание транзакций, оптимизированы и упрощены. Пользователь защищен от ошибок, таких как отправка средств на неверный чейн или использование неликвидного моста.

🚀 Оптимизация производительности

В отличие от стандартных решений, Smart Buycoin Widget оснащен собственным слоем кэширования. Мы минимизируем количество запросов к API, сохраняя данные о токенах и сетях локально, что обеспечивает мгновенную загрузку интерфейса даже при медленном интернете.

Installation

npm install smart-buycoin-widget
# or
yarn add smart-buycoin-widget

Peer Dependencies

Ensure you have the following dependencies installed in your project:

npm install react react-dom wagmi @tanstack/react-query viem
# or
yarn add react react-dom wagmi @tanstack/react-query viem

⚙️ Конфигурация (PublicConfig)

Компонент SmartBuycoinWidget принимает основной объект конфигурации, описывающий поведение, доступные сети и внешний вид виджета.

Свойства PublicConfig

⚙️ Конфигурация (PublicConfig)

Компонент SmartBuycoinWidget принимает основной объект конфигурации, описывающий поведение, доступные сети и внешний вид виджета.

Свойства PublicConfig

| Свойство | Тип | Обязательно | Описание | | :--- | :--- | :---: |:-------------------------------------------------------------------------------------------------------------------------------------------------| | integrator | string | ✅ | Уникальный идентификатор интегратора. Необходим для аналитики и сбора комиссий. | | chains | number[] | ✅ | Массив ID сетей, которые будут доступны пользователю. Используйте NetworkId для удобства. | | appearance | 'light' \| 'dark' \| 'system' | ❌ | Цветовая схема виджета. По умолчанию: 'dark'. | | theme | BuycoinWidgetTheme | ❌ | Объект для детальной настройки стилей (MUI Theme). | | disableDefaultTheme| boolean | ❌ | Если true, отключает встроенную тему Buycoin. Ваша theme полностью заменит стили, вместо того чтобы сливаться с ними. По умолчанию: false. |

🎨 Темизация и Логика слияния

🎨 Темизация (BuycoinWidgetTheme)

Объект theme позволяет полностью переопределить внешний вид виджета, используя спецификацию Material UI.

| Поле | Тип | Описание | | :--- | :--- | :--- | | palette | PaletteOptions | Глобальная цветовая палитра (primary, secondary, background, text). | | colorSchemes | { light: ..., dark: ... } | Специфичные палитры для светлой и темной тем. | | shape | Shape | Настройка скругления углов (borderRadius). | | typography | TypographyVariantsOptions | Настройки шрифтов (font family, weight, size). | | container | CSSProperties | CSS-стили для внешнего контейнера виджета. | | header | CSSProperties | CSS-стили для шапки виджета. | | components | WidgetThemeComponents | Переопределение стилей конкретных UI-компонентов. | | navigation | { edge?: boolean } | Настройки навигации (скругления углов). |

Кастомизация компонентов

В поле components можно переопределить стили следующих элементов MUI:

• MuiAppBar (Шапка)
• MuiButton (Кнопки)
• MuiCard / MuiInputCard (Карточки)
• MuiAvatar (Иконки)
• MuiTabs / MuiNavigationTabs (Навигация)
• MuiCheckbox (Чекбоксы)

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

import { SmartBuycoinWidget, NetworkId, type PublicConfig } from 'smart-buycoin-widget';

const config: PublicConfig = {
  // 1. Обязательные параметры
  integrator: 'your-dapp-name',
  chains: [
    NetworkId.ETH,
    NetworkId.BSC,
    NetworkId.ARB,
    NetworkId.SOL
  ],

  // 2. Режим темы
  appearance: 'dark',

  // 3. Кастомизация стилей
  theme: {
    palette: {
      primary: { main: '#306CDD' },
      secondary: { main: '#F5B544' },
      background: {
        default: '#1F1F1F', // Фон виджета
        paper: '#2A2A2A',   // Фон карточек
      },
      text: { primary: '#FFFFFF' }
    },
    shape: {
      borderRadius: 16,
    },
    typography: {
      fontFamily: 'Inter, sans-serif',
    },
    container: {
      border: '1px solid #333',
      boxShadow: '0px 4px 20px rgba(0,0,0,0.5)',
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontWeight: 700,
            textTransform: 'none',
          },
        },
      },
    },
  },
};

export const SwapPage = () => {
  return <SmartBuycoinWidget {...config} />;
};

Виджет поддерживает два режима работы с темами:

1. Частичное изменение (Deep Merge) — По умолчанию Если disableDefaultTheme не передан (или false), ваша тема сливается с фирменной темой Buycoin (синие цвета, скругления 16px).

   • Удобно для: Изменения только одного параметра (например, сделать кнопки красными), сохранив остальной стиль красивым.

2. Полная замена (Override) Если передать disableDefaultTheme: true, фирменная тема Buycoin отключается полностью. Поверх применяются только ваши настройки.

   • Удобно для: Создания дизайна с нуля, когда вам мешают наши дефолтные отступы или цвета.

Пример 1: Изменить только цвет

const config: PublicConfig = {
  integrator: 'my-app',
  chains: [1, 56],
  // Мы меняем только цвет кнопок. 
  // Скругления и остальные стили Buycoin останутся.
  theme: {
    palette: {
      primary: { main: '#FF0000' } 
    }
  }
};

Пример 2: Полный редизайн

const config: PublicConfig = {
  integrator: 'my-app',
  chains: [1, 56],
  disableDefaultTheme: true, // Отключаем стили Buycoin
  theme: {
    // Теперь виджет "голый", применяются только эти стили
    shape: { borderRadius: 0 },
    container: { border: 'none' }
  }
};