From acd30dbb1392f0bc083ad348d87ebb40732c501c Mon Sep 17 00:00:00 2001 From: rassadin11 Date: Mon, 25 May 2026 20:36:06 +0300 Subject: [PATCH] convert --- .../ui/TransactionsPage.module.css | 345 ------------------ .../transactions/ui/TransactionsPage.tsx | 226 +----------- src/widgets/transactions-list/index.ts | 1 + src/widgets/transactions-list/model/format.ts | 20 + .../model/paymentStatusLabels.ts | 12 + .../ui/CopyButton.module.css | 20 + .../transactions-list/ui/CopyButton.tsx | 32 ++ .../ui/OrderAccordion.module.css | 189 ++++++++++ .../transactions-list/ui/OrderAccordion.tsx | 120 ++++++ .../ui/StatusBadge.module.css | 48 +++ .../transactions-list/ui/StatusBadge.tsx | 15 + .../ui/TransactionsList.module.css | 62 ++++ .../transactions-list/ui/TransactionsList.tsx | 36 ++ tsconfig.tsbuildinfo | 2 +- 14 files changed, 558 insertions(+), 570 deletions(-) create mode 100644 src/widgets/transactions-list/index.ts create mode 100644 src/widgets/transactions-list/model/format.ts create mode 100644 src/widgets/transactions-list/model/paymentStatusLabels.ts create mode 100644 src/widgets/transactions-list/ui/CopyButton.module.css create mode 100644 src/widgets/transactions-list/ui/CopyButton.tsx create mode 100644 src/widgets/transactions-list/ui/OrderAccordion.module.css create mode 100644 src/widgets/transactions-list/ui/OrderAccordion.tsx create mode 100644 src/widgets/transactions-list/ui/StatusBadge.module.css create mode 100644 src/widgets/transactions-list/ui/StatusBadge.tsx create mode 100644 src/widgets/transactions-list/ui/TransactionsList.module.css create mode 100644 src/widgets/transactions-list/ui/TransactionsList.tsx diff --git a/src/pages/transactions/ui/TransactionsPage.module.css b/src/pages/transactions/ui/TransactionsPage.module.css index b831700..0aafbba 100644 --- a/src/pages/transactions/ui/TransactionsPage.module.css +++ b/src/pages/transactions/ui/TransactionsPage.module.css @@ -35,327 +35,6 @@ z-index: 1; } -.list { - display: flex; - flex-direction: column; - gap: 12px; - position: relative; - z-index: 1; -} - -.empty { - color: var(--text-secondary); - font-size: 15px; - position: relative; - z-index: 1; -} - -.status { - color: var(--text-secondary); - font-size: 14px; - position: relative; - z-index: 1; -} - -.statusError { - color: var(--error, #ff4466); - font-size: 14px; - position: relative; - z-index: 1; -} - -/* ── Load more ── */ -.loadMore { - display: flex; - justify-content: center; - padding: 24px 0 0; - position: relative; - z-index: 1; -} - -.loadMoreBtn { - display: inline-flex; - align-items: center; - height: 44px; - padding: 0 28px; - background: rgba(74, 109, 255, 0.08); - border: 1px solid rgba(74, 109, 255, 0.3); - border-radius: 12px; - color: var(--interactive, #4a6dff); - font-size: 14px; - font-weight: 600; - font-family: inherit; - cursor: pointer; - transition: background 0.15s, border-color 0.15s; -} - -.loadMoreBtn:hover:not(:disabled) { - background: rgba(74, 109, 255, 0.18); - border-color: var(--interactive, #4a6dff); -} - -.loadMoreBtn:disabled { - opacity: 0.5; - cursor: default; -} - -/* ── Status badge ── */ -.statusBadge { - font-size: 12px; - font-weight: 600; - padding: 3px 10px; - border-radius: 999px; - white-space: nowrap; - flex-shrink: 0; -} - -.status_pending { - background: rgba(243, 186, 47, 0.15); - color: #f3ba2f; -} - -.status_completed { - background: rgba(0, 196, 140, 0.15); - color: var(--success, #00c48c); -} - -.status_cancelled { - background: rgba(138, 138, 154, 0.18); - color: #a0a0b0; -} - -.status_rejected { - background: rgba(255, 77, 77, 0.15); - color: #ff4d4d; -} - -.status_error { - background: rgba(255, 140, 66, 0.15); - color: #ff8c42; -} - -/* payment statuses */ -.status_money_accepted { - background: rgba(74, 109, 255, 0.15); - color: #4a6dff; -} - -.status_web3_processing { - background: rgba(155, 109, 255, 0.15); - color: #9b6dff; -} - -.status_web3_hash_error { - background: rgba(255, 77, 77, 0.15); - color: #ff4d4d; -} - -.status_web3_balance_problem { - background: rgba(255, 140, 66, 0.15); - color: #ff8c42; -} - -.status_receipt_error { - background: rgba(255, 77, 77, 0.15); - color: #ff4d4d; -} - -.status_usdt_delivered { - background: rgba(0, 196, 140, 0.15); - color: var(--success, #00c48c); -} - -/* ── Accordion item ── */ -.accordionItem { - background: rgba(255, 255, 255, 0.04); - border: 1px solid var(--glass-border); - border-radius: 16px; - overflow: hidden; -} - -/* ── Summary row ── */ -.summaryRow { - display: flex; - align-items: center; - gap: 12px; - padding: 16px 20px; - width: 100%; - background: none; - border: none; - cursor: pointer; - text-align: left; - transition: background 0.15s; -} - -.summaryRow:hover { - background: rgba(255, 255, 255, 0.04); -} - -.summaryLeft { - display: flex; - align-items: center; - gap: 10px; - flex: 1; - min-width: 0; - flex-wrap: wrap; -} - -.summaryDate { - font-size: 13px; - color: var(--text-secondary); - font-family: var(--font-mono); - white-space: nowrap; -} - -.summaryRight { - display: flex; - align-items: center; - gap: 16px; - flex-shrink: 0; -} - -.amount { - font-family: var(--font-mono); - font-size: 14px; - font-weight: 500; - color: var(--text-primary); - white-space: nowrap; -} - -.totalAmount { - font-family: var(--font-mono); - font-size: 14px; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; -} - -.chevron { - color: var(--text-secondary); - transition: transform 0.2s ease; - flex-shrink: 0; -} - -.chevronOpen { - transform: rotate(180deg); -} - -/* ── Accordion body — grid-rows animation ── */ -.bodyOuter { - display: grid; - grid-template-rows: 0fr; - transition: grid-template-rows 0.25s ease; -} - -.bodyOuterOpen { - grid-template-rows: 1fr; -} - -.bodyInner { - overflow: hidden; -} - -/* ── Body content ── */ -.body { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0 32px; - padding: 4px 20px 8px; - border-top: 1px solid rgba(255, 255, 255, 0.06); -} - -.col { - display: flex; - flex-direction: column; -} - -.colTitle { - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1.2px; - color: var(--text-secondary); - margin: 14px 0 4px; -} - -.infoRow { - display: flex; - align-items: center; - justify-content: space-between; - padding: 9px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - gap: 12px; -} - -.infoRow:last-child { - border-bottom: none; -} - -.infoRowTotal { - border-bottom: none; - margin-top: 4px; -} - -.infoRowTotal .infoLabel, -.infoRowTotal .infoValue { - font-weight: 700; - color: var(--text-primary); - font-size: 14px; -} - -.infoLabel { - font-size: 13px; - color: var(--text-secondary); - white-space: nowrap; -} - -.infoValue { - font-family: var(--font-mono); - font-size: 13px; - color: var(--text-primary); - text-align: right; -} - -.infoValueRow { - display: flex; - align-items: center; - gap: 6px; -} - -.infoLink { - font-size: 13px; - color: var(--interactive, #4a6dff); - text-decoration: none; - font-family: var(--font-mono); -} - -.infoLink:hover { - text-decoration: underline; -} - -/* ── Copy button ── */ -.copyBtn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid var(--glass-border); - border-radius: 6px; - cursor: pointer; - color: var(--text-secondary); - padding: 0; - transition: background 0.15s, color 0.15s; - flex-shrink: 0; -} - -.copyBtn:hover { - background: rgba(255, 255, 255, 0.12); - color: var(--text-primary); -} - -/* ── Responsive ── */ @media (max-width: 900px) { .main { padding: 20px 16px 32px; @@ -365,28 +44,4 @@ width: auto; height: auto; } - - .summaryRight { - gap: 10px; - } - - .totalAmount { - display: none; - } } - -@media (max-width: 640px) { - .body { - grid-template-columns: 1fr; - gap: 0; - } - - .col+.col { - border-top: 1px solid rgba(255, 255, 255, 0.06); - margin-top: 4px; - } - - .summaryDate { - display: none; - } -} \ No newline at end of file diff --git a/src/pages/transactions/ui/TransactionsPage.tsx b/src/pages/transactions/ui/TransactionsPage.tsx index 9385e93..ac326ec 100644 --- a/src/pages/transactions/ui/TransactionsPage.tsx +++ b/src/pages/transactions/ui/TransactionsPage.tsx @@ -1,238 +1,16 @@ -import { useState } from 'react' import { WalletHeader } from '@widgets/wallet-header' import { Footer } from '@widgets/footer' -import { useOrders } from '@features/payment' -import type { OrderWithPayment, OrderStatus, PaymentStatus } from '@features/payment' +import { TransactionsList } from '@widgets/transactions-list' import styles from './TransactionsPage.module.css' -const ORDER_STATUS_LABELS: Record = { - pending: 'Ожидание', - rejected: 'Отклонён', - completed: 'Выполнен', - cancelled: 'Отменён', - error: 'Ошибка', -} - -const PAYMENT_STATUS_LABELS: Record = { - pending: 'Ожидание', - money_accepted: 'Деньги получены', - web3_processing: 'Обработка в сети', - web3_hash_error: 'Ошибка хэша', - web3_balance_problem: 'Проблема с балансом', - receipt_error: 'Ошибка чека', - completed: 'Завершён', - usdt_delivered: 'USDT отправлен', -} - -function formatDate(iso: string) { - if (!iso) return '—' - return new Date(iso).toLocaleString('ru-RU', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) -} - -function truncateHash(hash: string) { - if (!hash) return '—' - if (hash.length <= 16) return hash - return `${hash.slice(0, 8)}…${hash.slice(-6)}` -} - -function StatusBadge({ status, labels }: { status: string; labels: Record }) { - return ( - - {labels[status] ?? status} - - ) -} - -function CopyButton({ value }: { value: string }) { - const [copied, setCopied] = useState(false) - - function handleCopy() { - navigator.clipboard.writeText(value).then(() => { - setCopied(true) - setTimeout(() => setCopied(false), 1500) - }) - } - - return ( - - ) -} - -function OrderAccordion({ item }: { item: OrderWithPayment }) { - const [isOpen, setIsOpen] = useState(false) - const { order, payment } = item - - return ( -
- - -
-
-
-
-

Заказ

-
- Сумма USDT - {order.usdt_amount} USDT -
-
- Курс обмена - 1 USDT = {order.usdt_exchange_rate} ₽ -
-
- Сервисный сбор - {order.service_fee} USDT -
-
- Комиссия за газ - {order.gas_fee} USDT -
-
- Итого к оплате - {Number(order.total_price).toLocaleString('ru-RU')} ₽ -
-
- -
-

Платёж

- {payment ? ( - <> -
- Статус - -
-
- Оплачено - {payment.itpay_paid_amount || '—'} -
-
- Истекает - {formatDate(payment.expired_date)} -
-
- Хэш транзакции - - - {truncateHash(payment.web3_transaction_hash)} - - {payment.web3_transaction_hash && ( - - )} - -
-
- Чек - {payment.receipt_cloudekassir_link ? ( - - Открыть → - - ) : ( - — - )} -
- - ) : ( -
- — -
- )} -
-
-
-
-
- ) -} - export function TransactionsPage() { - const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useOrders() - - const items: OrderWithPayment[] = data?.pages.flatMap(p => p.orders) ?? [] - return (

Транзакции

- - {isLoading &&

Загрузка...

} - {isError &&

Не удалось загрузить транзакции. Попробуйте обновить страницу.

} - - {!isLoading && !isError && items.length === 0 && ( -

У вас пока нет транзакций.

- )} - - {items.length > 0 && ( -
- {items.map((item) => ( - - ))} -
- )} - - {hasNextPage && ( -
- -
- )} +
diff --git a/src/widgets/transactions-list/index.ts b/src/widgets/transactions-list/index.ts new file mode 100644 index 0000000..b033675 --- /dev/null +++ b/src/widgets/transactions-list/index.ts @@ -0,0 +1 @@ +export { TransactionsList } from './ui/TransactionsList' diff --git a/src/widgets/transactions-list/model/format.ts b/src/widgets/transactions-list/model/format.ts new file mode 100644 index 0000000..b72fbb8 --- /dev/null +++ b/src/widgets/transactions-list/model/format.ts @@ -0,0 +1,20 @@ +export function formatDate(iso: string) { + if (!iso) return '—' + return new Date(iso).toLocaleString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) +} + +export function truncateHash(hash: string) { + if (!hash) return '—' + if (hash.length <= 16) return hash + return `${hash.slice(0, 8)}…${hash.slice(-6)}` +} + +export function formatRub(value: string | number) { + return Number(value).toLocaleString('ru-RU') +} diff --git a/src/widgets/transactions-list/model/paymentStatusLabels.ts b/src/widgets/transactions-list/model/paymentStatusLabels.ts new file mode 100644 index 0000000..ee1ca89 --- /dev/null +++ b/src/widgets/transactions-list/model/paymentStatusLabels.ts @@ -0,0 +1,12 @@ +import type { PaymentStatus } from '@features/payment' + +export const PAYMENT_STATUS_LABELS: Record = { + pending: 'Ожидание', + money_accepted: 'Деньги получены', + web3_processing: 'Обработка в сети', + web3_hash_error: 'Ошибка хэша', + web3_balance_problem: 'Проблема с балансом', + receipt_error: 'Ошибка чека', + completed: 'Завершён', + usdt_delivered: 'USDT отправлен', +} diff --git a/src/widgets/transactions-list/ui/CopyButton.module.css b/src/widgets/transactions-list/ui/CopyButton.module.css new file mode 100644 index 0000000..1a66e30 --- /dev/null +++ b/src/widgets/transactions-list/ui/CopyButton.module.css @@ -0,0 +1,20 @@ +.button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid var(--glass-border); + border-radius: 6px; + cursor: pointer; + color: var(--text-secondary); + padding: 0; + transition: background 0.15s, color 0.15s; + flex-shrink: 0; +} + +.button:hover { + background: rgba(255, 255, 255, 0.12); + color: var(--text-primary); +} diff --git a/src/widgets/transactions-list/ui/CopyButton.tsx b/src/widgets/transactions-list/ui/CopyButton.tsx new file mode 100644 index 0000000..7925ff2 --- /dev/null +++ b/src/widgets/transactions-list/ui/CopyButton.tsx @@ -0,0 +1,32 @@ +import { useState } from 'react' +import styles from './CopyButton.module.css' + +interface Props { + value: string +} + +export function CopyButton({ value }: Props) { + const [copied, setCopied] = useState(false) + + function handleCopy() { + navigator.clipboard.writeText(value).then(() => { + setCopied(true) + setTimeout(() => setCopied(false), 1500) + }) + } + + return ( + + ) +} diff --git a/src/widgets/transactions-list/ui/OrderAccordion.module.css b/src/widgets/transactions-list/ui/OrderAccordion.module.css new file mode 100644 index 0000000..035d307 --- /dev/null +++ b/src/widgets/transactions-list/ui/OrderAccordion.module.css @@ -0,0 +1,189 @@ +.item { + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--glass-border); + border-radius: 16px; + overflow: hidden; +} + +.summary { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 20px; + width: 100%; + background: none; + border: none; + cursor: pointer; + text-align: left; + transition: background 0.15s; +} + +.summary:hover { + background: rgba(255, 255, 255, 0.04); +} + +.summaryLeft { + display: flex; + align-items: center; + gap: 10px; + flex: 1; + min-width: 0; + flex-wrap: wrap; +} + +.summaryDate { + font-size: 13px; + color: var(--text-secondary); + font-family: var(--font-mono); + white-space: nowrap; +} + +.summaryRight { + display: flex; + align-items: center; + gap: 16px; + flex-shrink: 0; +} + +.amount { + font-family: var(--font-mono); + font-size: 14px; + font-weight: 500; + color: var(--text-primary); + white-space: nowrap; +} + +.totalAmount { + font-family: var(--font-mono); + font-size: 14px; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; +} + +.chevron { + color: var(--text-secondary); + transition: transform 0.2s ease; + flex-shrink: 0; +} + +.chevronOpen { + transform: rotate(180deg); +} + +.bodyOuter { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.25s ease; +} + +.bodyOuterOpen { + grid-template-rows: 1fr; +} + +.bodyInner { + overflow: hidden; +} + +.body { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 32px; + padding: 4px 20px 8px; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.col { + display: flex; + flex-direction: column; +} + +.colTitle { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1.2px; + color: var(--text-secondary); + margin: 14px 0 4px; +} + +.infoRow { + display: flex; + align-items: center; + justify-content: space-between; + padding: 9px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + gap: 12px; +} + +.infoRow:last-child { + border-bottom: none; +} + +.infoRowTotal { + border-bottom: none; + margin-top: 4px; +} + +.infoRowTotal .infoLabel, +.infoRowTotal .infoValue { + font-weight: 700; + color: var(--text-primary); + font-size: 14px; +} + +.infoLabel { + font-size: 13px; + color: var(--text-secondary); + white-space: nowrap; +} + +.infoValue { + font-family: var(--font-mono); + font-size: 13px; + color: var(--text-primary); + text-align: right; +} + +.infoValueRow { + display: flex; + align-items: center; + gap: 6px; +} + +.infoLink { + font-size: 13px; + color: var(--interactive, #4a6dff); + text-decoration: none; + font-family: var(--font-mono); +} + +.infoLink:hover { + text-decoration: underline; +} + +@media (max-width: 900px) { + .summaryRight { + gap: 10px; + } + + .totalAmount { + display: none; + } +} + +@media (max-width: 640px) { + .body { + grid-template-columns: 1fr; + gap: 0; + } + + .col+.col { + border-top: 1px solid rgba(255, 255, 255, 0.06); + margin-top: 4px; + } + + .summaryDate { + display: none; + } +} diff --git a/src/widgets/transactions-list/ui/OrderAccordion.tsx b/src/widgets/transactions-list/ui/OrderAccordion.tsx new file mode 100644 index 0000000..8b770ee --- /dev/null +++ b/src/widgets/transactions-list/ui/OrderAccordion.tsx @@ -0,0 +1,120 @@ +import { useState } from 'react' +import type { OrderWithPayment } from '@features/payment' +import { formatDate, formatRub, truncateHash } from '../model/format' +import { StatusBadge } from './StatusBadge' +import { CopyButton } from './CopyButton' +import styles from './OrderAccordion.module.css' + +interface Props { + item: OrderWithPayment +} + +export function OrderAccordion({ item }: Props) { + const [isOpen, setIsOpen] = useState(false) + const { order, payment } = item + + return ( +
+ + +
+
+
+
+

Заказ

+ + + + + +
+ +
+

Платёж

+ {payment ? ( + <> +
+ Статус + +
+ + +
+ Хэш транзакции + + + {truncateHash(payment.web3_transaction_hash)} + + {payment.web3_transaction_hash && ( + + )} + +
+
+ Чек + {payment.receipt_cloudekassir_link ? ( + + Открыть → + + ) : ( + — + )} +
+ + ) : ( +
+ — +
+ )} +
+
+
+
+
+ ) +} + +function InfoRow({ label, value, emphasised }: { label: string; value: string; emphasised?: boolean }) { + return ( +
+ {label} + {value} +
+ ) +} diff --git a/src/widgets/transactions-list/ui/StatusBadge.module.css b/src/widgets/transactions-list/ui/StatusBadge.module.css new file mode 100644 index 0000000..d5d8624 --- /dev/null +++ b/src/widgets/transactions-list/ui/StatusBadge.module.css @@ -0,0 +1,48 @@ +.badge { + font-size: 12px; + font-weight: 600; + padding: 3px 10px; + border-radius: 999px; + white-space: nowrap; + flex-shrink: 0; +} + +.status_pending { + background: rgba(243, 186, 47, 0.15); + color: #f3ba2f; +} + +.status_completed { + background: rgba(0, 196, 140, 0.15); + color: var(--success, #00c48c); +} + +.status_money_accepted { + background: rgba(74, 109, 255, 0.15); + color: #4a6dff; +} + +.status_web3_processing { + background: rgba(155, 109, 255, 0.15); + color: #9b6dff; +} + +.status_web3_hash_error { + background: rgba(255, 77, 77, 0.15); + color: #ff4d4d; +} + +.status_web3_balance_problem { + background: rgba(255, 140, 66, 0.15); + color: #ff8c42; +} + +.status_receipt_error { + background: rgba(255, 77, 77, 0.15); + color: #ff4d4d; +} + +.status_usdt_delivered { + background: rgba(0, 196, 140, 0.15); + color: var(--success, #00c48c); +} diff --git a/src/widgets/transactions-list/ui/StatusBadge.tsx b/src/widgets/transactions-list/ui/StatusBadge.tsx new file mode 100644 index 0000000..aeda1e9 --- /dev/null +++ b/src/widgets/transactions-list/ui/StatusBadge.tsx @@ -0,0 +1,15 @@ +import type { PaymentStatus } from '@features/payment' +import { PAYMENT_STATUS_LABELS } from '../model/paymentStatusLabels' +import styles from './StatusBadge.module.css' + +interface Props { + status: PaymentStatus +} + +export function StatusBadge({ status }: Props) { + return ( + + {PAYMENT_STATUS_LABELS[status] ?? status} + + ) +} diff --git a/src/widgets/transactions-list/ui/TransactionsList.module.css b/src/widgets/transactions-list/ui/TransactionsList.module.css new file mode 100644 index 0000000..e56cfb1 --- /dev/null +++ b/src/widgets/transactions-list/ui/TransactionsList.module.css @@ -0,0 +1,62 @@ +.list { + display: flex; + flex-direction: column; + gap: 12px; + position: relative; + z-index: 1; +} + +.empty { + color: var(--text-secondary); + font-size: 15px; + position: relative; + z-index: 1; +} + +.status { + color: var(--text-secondary); + font-size: 14px; + position: relative; + z-index: 1; +} + +.statusError { + color: var(--error, #ff4466); + font-size: 14px; + position: relative; + z-index: 1; +} + +.loadMore { + display: flex; + justify-content: center; + padding: 24px 0 0; + position: relative; + z-index: 1; +} + +.loadMoreBtn { + display: inline-flex; + align-items: center; + height: 44px; + padding: 0 28px; + background: rgba(74, 109, 255, 0.08); + border: 1px solid rgba(74, 109, 255, 0.3); + border-radius: 12px; + color: var(--interactive, #4a6dff); + font-size: 14px; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: background 0.15s, border-color 0.15s; +} + +.loadMoreBtn:hover:not(:disabled) { + background: rgba(74, 109, 255, 0.18); + border-color: var(--interactive, #4a6dff); +} + +.loadMoreBtn:disabled { + opacity: 0.5; + cursor: default; +} diff --git a/src/widgets/transactions-list/ui/TransactionsList.tsx b/src/widgets/transactions-list/ui/TransactionsList.tsx new file mode 100644 index 0000000..d911107 --- /dev/null +++ b/src/widgets/transactions-list/ui/TransactionsList.tsx @@ -0,0 +1,36 @@ +import { useOrders } from '@features/payment' +import { OrderAccordion } from './OrderAccordion' +import styles from './TransactionsList.module.css' + +export function TransactionsList() { + const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useOrders() + + const items = data?.pages.flatMap(p => p.orders) ?? [] + + if (isLoading) return

Загрузка...

+ if (isError) return

Не удалось загрузить транзакции. Попробуйте обновить страницу.

+ if (items.length === 0) return

У вас пока нет транзакций.

+ + return ( + <> +
+ {items.map(item => ( + + ))} +
+ + {hasNextPage && ( +
+ +
+ )} + + ) +} diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 724f1e2..83a0a38 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/auth/hooks/useupdatephone.ts","./src/features/auth/hooks/useuploadavatar.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/useorders.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/features/payment/hooks/usepaymentquotebyrub.ts","./src/features/wallet/index.ts","./src/features/wallet/api/walletapi.ts","./src/features/wallet/model/usewalletdata.ts","./src/pages/bridge/index.ts","./src/pages/bridge/ui/bridgepage.tsx","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/politika-cookie/index.ts","./src/pages/politika-cookie/ui/politikacookiepage.tsx","./src/pages/politika-personalnyh-dannyh/index.ts","./src/pages/politika-personalnyh-dannyh/ui/politikapage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/publichnaya-oferta/index.ts","./src/pages/publichnaya-oferta/ui/publichnayaofertapage.tsx","./src/pages/reestr-pd-rkn/index.ts","./src/pages/reestr-pd-rkn/ui/reestrypage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/restore-password/index.ts","./src/pages/restore-password/ui/restorepasswordpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/soglasie-personalnyh-dannyh/index.ts","./src/pages/soglasie-personalnyh-dannyh/ui/soglasiepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/transactions/index.ts","./src/pages/transactions/ui/transactionspage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/assets/coins/index.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/lib/utils/truncatedecimals.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/bridge-form/index.ts","./src/widgets/bridge-form/ui/bridgeform.tsx","./src/widgets/bridge-form/ui/networkselect.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/avatarcropmodal.tsx","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/profile/ui/getcroppedimg.ts","./src/widgets/receive-modal/index.ts","./src/widgets/receive-modal/ui/receivemodal.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/restore-password-form/index.ts","./src/widgets/restore-password-form/ui/restorepasswordform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/send-modal/index.ts","./src/widgets/send-modal/model/sendtypes.ts","./src/widgets/send-modal/ui/sendmodal.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapconfirmmodal.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/swap-form/ui/trxconfirmmodal.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/model/usechaintokenrows.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-chain-tabs/index.ts","./src/widgets/wallet-chain-tabs/ui/walletchaintabs.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/auth/hooks/useupdatephone.ts","./src/features/auth/hooks/useuploadavatar.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/useorders.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/features/payment/hooks/usepaymentquotebyrub.ts","./src/features/wallet/index.ts","./src/features/wallet/api/walletapi.ts","./src/features/wallet/model/usewalletdata.ts","./src/pages/bridge/index.ts","./src/pages/bridge/ui/bridgepage.tsx","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/politika-cookie/index.ts","./src/pages/politika-cookie/ui/politikacookiepage.tsx","./src/pages/politika-personalnyh-dannyh/index.ts","./src/pages/politika-personalnyh-dannyh/ui/politikapage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/publichnaya-oferta/index.ts","./src/pages/publichnaya-oferta/ui/publichnayaofertapage.tsx","./src/pages/reestr-pd-rkn/index.ts","./src/pages/reestr-pd-rkn/ui/reestrypage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/restore-password/index.ts","./src/pages/restore-password/ui/restorepasswordpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/soglasie-personalnyh-dannyh/index.ts","./src/pages/soglasie-personalnyh-dannyh/ui/soglasiepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/transactions/index.ts","./src/pages/transactions/ui/transactionspage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/assets/coins/index.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/lib/utils/truncatedecimals.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/bridge-form/index.ts","./src/widgets/bridge-form/ui/bridgeform.tsx","./src/widgets/bridge-form/ui/networkselect.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/avatarcropmodal.tsx","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/profile/ui/getcroppedimg.ts","./src/widgets/receive-modal/index.ts","./src/widgets/receive-modal/ui/receivemodal.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/restore-password-form/index.ts","./src/widgets/restore-password-form/ui/restorepasswordform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/send-modal/index.ts","./src/widgets/send-modal/model/sendtypes.ts","./src/widgets/send-modal/ui/sendmodal.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapconfirmmodal.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/swap-form/ui/trxconfirmmodal.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/model/usechaintokenrows.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/transactions-list/index.ts","./src/widgets/transactions-list/model/format.ts","./src/widgets/transactions-list/model/paymentstatuslabels.ts","./src/widgets/transactions-list/ui/copybutton.tsx","./src/widgets/transactions-list/ui/orderaccordion.tsx","./src/widgets/transactions-list/ui/statusbadge.tsx","./src/widgets/transactions-list/ui/transactionslist.tsx","./src/widgets/wallet-chain-tabs/index.ts","./src/widgets/wallet-chain-tabs/ui/walletchaintabs.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"} \ No newline at end of file