Компоненты/Обмен токенов

Обмен токенов

29 сентября 2026

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

Установка

npm install clsx lucide-react motion tailwind-merge
pnpm add clsx lucide-react motion tailwind-merge
yarn add clsx lucide-react motion tailwind-merge
bun add clsx lucide-react motion tailwind-merge

Файлы

token-swap.tsx
НазадТостДалееМеню тура

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

Кнопка «Взять всё» подставляет весь баланс, а если ввести больше, чем есть, вместо эквивалента появляется красное предупреждение с лёгкой тряской. «Очистить» сбрасывает сумму.

Вручную

Скопируйте эти файлы в components/token-swap/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { TokenSwap } from "@/components/token-swap/token-swap";

export function Swap() {
return (
  <div className="h-[640px]">
    <TokenSwap
      balance={111.82}
      symbol="ETH"
      from={{ name: "Эфириум", subtitle: " 111.82 ETH", icon: <span className="size-10 rounded-full bg-neutral-800" /> }}
      to={{ name: "Astra", subtitle: " Получите AST", icon: <span className="size-10 rounded-full bg-cyan-300" /> }}
    />
  </div>
);
}

Пропсы

Пропс
Описание
from?

Отдаваемая монета: name, subtitle, icon

Тип SwapToken

to?

Получаемая монета: name, subtitle, icon

Тип SwapToken

balance?

Доступный баланс

Тип number·По умолчанию 111.82

usdRate?

Курс монеты к доллару

Тип number·По умолчанию 3445.86

receiveRate?

Сколько получаемых монет даётся за одну отдаваемую

Тип number·По умолчанию 10.87

maxInput?

Максимальная сумма ввода

Тип number·По умолчанию 11111

symbol?

Тикер отдаваемой монеты

Тип string·По умолчанию "ETH"

useLabel?

Подпись кнопки до выбора всего баланса

Тип string·По умолчанию "Взять"

usingLabel?

Подпись кнопки после выбора всего баланса

Тип string·По умолчанию "Взято"

maxLabel?

Вторая часть подписи кнопки

Тип string·По умолчанию "всё"

notEnoughLabel?

Текст предупреждения о нехватке

Тип string·По умолчанию "Недостаточно ETH"

clearLabel?

Текст кнопки сброса

Тип string·По умолчанию "Очистить"