Разработка UI для миграции токенов
Типичная ситуация: пользователь получает уведомление «мигрируйте ваши токены», переходит по ссылке — и видит единственную кнопку «Migrate». Нажимает, подписывает апрув на uint256.max, не понимая, что контракт может списать все его балансы. Результат — потеря средств или фишинг. Наша задача: построить интерфейс, который раскрывает каждую деталь транзакции и не даёт действовать вслепую. UI с предпросмотром баланса в 3 раза снижает риск ошибок по сравнению с интерфейсом без предпросмотра.
Почему миграция токенов требует отдельного UI?
В отличие от обычной передачи токенов, миграция требует подписания апрува на контракт, которому пользователь может не доверять полностью. Если UI не показывает явно allowance и курс, риск фишинга и ошибок растёт. Мы гарантируем, что ваш интерфейс раскрывает все детали транзакции, а клиент всегда может сверить данные с контрактом. Прозрачность — залог доверия: вы видите exact сумму апрува, курс конвертации и комиссию сети ещё до подписания.
Как мы строим интерфейс миграции?
Стандартная схема: старый токен (v1) → новый токен (v2) через контракт-мигратор. Контракт принимает v1, сжигает или блокирует его, минтит v2 в соотношении 1:1 (или другом).
UI должен покрыть три транзакции:
-
approve(migratorContract, amount)на v1 токене -
migrate(amount)на контракте-мигратор - (опционально) добавить v2 в MetaMask через
wallet_watchAsset
async function migrateTokens(amount: bigint) { // Шаг 1: проверяем текущий allowance const currentAllowance = await v1Token.allowance(userAddress, MIGRATOR_ADDRESS); if (currentAllowance < amount) { const approveTx = await v1Token.approve(MIGRATOR_ADDRESS, amount); await approveTx.wait(); } // Шаг 2: миграция const migrateTx = await migrator.migrate(amount); const receipt = await migrateTx.wait(); return receipt; } Что показывает баланс-дисплей до/после?
Показываем пользователю явно, что произойдёт: сколько v1 спишется, сколько v2 получится. Если курс не 1:1 — особенно важно. Дисплей динамически обновляется при вводе суммы, чтобы пользователь видел точные цифры до подписания.
function MigrationPreview({ amount, exchangeRate }: Props) { const v2Amount = (BigInt(amount) * BigInt(exchangeRate * 100)) / 100n; return ( <div className="migration-preview"> <div className="from"> <span>Отдаёте: {formatEther(amount)} {V1_SYMBOL}</span> </div> <ArrowIcon /> <div className="to"> <span>Получаете: {formatEther(v2Amount)} {V2_SYMBOL}</span> </div> </div> ); } Stepper с состояниями транзакций
Каждый шаг — approve, migrate, done — отображается с явным статусом: ожидание, pending, confirmed, error. Пользователь никогда не гадает, на каком этапе процесс.
type MigrationStep = 'idle' | 'approving' | 'approved' | 'migrating' | 'done' | 'error'; const stepConfig = { idle: { label: 'Готов к миграции', icon: 'clock' }, approving: { label: 'Подтверждаем апрув...', icon: 'spinner' }, approved: { label: 'Апрув подтверждён', icon: 'check' }, migrating: { label: 'Мигрируем токены...', icon: 'spinner' }, done: { label: 'Миграция завершена', icon: 'check-circle' }, error: { label: 'Ошибка', icon: 'x-circle' }, }; Ссылка на Etherscan для каждой транзакции, как только получен txHash — не ждём подтверждения. Это позволяет пользователю самостоятельно отслеживать статус.
Как защитить пользователя от infinite approve?
Если контракт запрашивает type(uint256).max approve — явно сообщить пользователю. Предложить выбор: exact amount или unlimited. Для миграции правильнее exact amount — пользователь мигрирует конкретное количество. Выбор не должен быть скрыт в настройках: мы выводим предупреждение с пояснением рисков прямо перед подписанием.
| Параметр | Exact amount | Unlimited (max) |
|---|---|---|
| Безопасность | Высокая — только запрошенная сумма | Низкая — контракт может списать всё |
| Удобство | Требуется повторный апрув для второй миграции | Один апрув навсегда |
| Рекомендация | ✅ Для миграции | ❌ Избегать |
Как обрабатываются ошибки и крайние случаи?
Частичная миграция: пользователь мигрировал часть токенов, вернулся позже. Показываем текущие балансы v1 и v2, остаток для миграции. UI автоматически определяет, сколько уже мигрировано, и не предлагает повторно апрувить.
Дедлайн миграции: контракты-мигратор часто имеют deadline после которого миграция невозможна. Если дедлайн задан — показываем countdown, предупреждаем заранее (за 7 дней, 24 часа). После дедлайна кнопка миграции блокируется, выводится пояснение.
Revert причины: если транзакция reverted — пытаемся декодировать причину через parseRevertReason и показать человекочитаемое сообщение вместо «Transaction failed». Мы обрабатываем более 10 типов ошибок, включая 'Migration ended', 'Insufficient balance', 'user rejected'. Это снижает количество обращений в поддержку и ускоряет решение проблем.
function parseRevertReason(error: any): string { const message = error?.info?.error?.message || error?.message || ''; if (message.includes('Migration ended')) return 'Период миграции завершён'; if (message.includes('Insufficient balance')) return 'Недостаточно токенов'; if (message.includes('user rejected')) return 'Транзакция отменена пользователем'; return 'Неизвестная ошибка. Попробуйте позже.'; } Что делать, если пользователь ошибся в апруве?
Если пользователь подписал апрув на сумму больше необходимой, UI должен немедленно отобразить предупреждение и предложить отозвать лишний allowance через approve(0). Мы реализуем кнопку «Reset allowance» прямо в интерфейсе, чтобы минимизировать риск.
Пошаговая инструкция для пользователя
- Подключите кошелёк (MetaMask, WalletConnect).
- Введите количество токенов для миграции.
- Подтвердите апрув на нужную сумму.
- Подтвердите миграцию.
- Добавьте новый токен в кошелёк (автоматически).
Этапы разработки и сроки
| Этап | Длительность | Результат |
|---|---|---|
| Аналитика | 0.5–1 день | Документ с логикой контракта и сценариями |
| Проектирование | 0.5–1 день | Wireframe stepper, поведение ошибок, тексты |
| Реализация | 1–2 дня | Код на React/Next.js, ethers.js или viem |
| Тестирование | 0.5–1 день | Симуляция всех сценариев на testnet |
| Деплой | 0.5 дня | Production, мониторинг транзакций |
Полный UI миграции с stepper, балансами, транзакциями и обработкой ошибок — от 2 до 5 дней. Срок зависит от сложности контракта и необходимости кастомной логики. Стоимость рассчитывается индивидуально.
Что входит в работу под ключ
- Интеграция контракта-мигратора (ERC-20, ERC-1155, любые кастомные) с использованием ERC-20 стандарта.
- Компоненты approve/migrate с предпросмотром балансов.
- Stepper транзакций с Etherscan-ссылками.
- Обработка edge cases: частичная миграция, дедлайн, реверты.
- Добавление нового токена в кошелёк (
wallet_watchAsset). - Тестирование на testnet (Goerli, Sepolia).
- Документация по запуску и поддержке.
Закажите консультацию — мы оценим ваш проект за один рабочий день. Наша команда имеет 5+ лет опыта в разработке смарт-контрактов и Web3-интерфейсов. Получите консультацию инженера прямо сейчас, чтобы обсудить интеграцию.