damanukyan/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert

Browse Source
This commit is contained in:
Артём Рассадин
2026-05-25 20:36:06 +03:00
parent b3831273d6
commit acd30dbb13
14 changed files with 558 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/pages/transactions/ui/TransactionsPage.module.css
View File

@@ -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;
}
}

226
src/pages/transactions/ui/TransactionsPage.tsx
View File

@@ -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<OrderStatus, string> = {
pending: 'Ожидание',
rejected: 'Отклонён',
completed: 'Выполнен',
cancelled: 'Отменён',
error: 'Ошибка',
}
const PAYMENT_STATUS_LABELS: Record<PaymentStatus, string> = {
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<string, string> }) {
return (
<span className={`${styles.statusBadge} ${styles[`status_${status}`] ?? ''}`}>
{labels[status] ?? status}
</span>
)
}
function CopyButton({ value }: { value: string }) {
const [copied, setCopied] = useState(false)
function handleCopy() {
navigator.clipboard.writeText(value).then(() => {
setCopied(true)
setTimeout(() => setCopied(false), 1500)
})
}
return (
<button className={styles.copyBtn} onClick={handleCopy} type="button" title="Скопировать">
{copied ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
)}
</button>
)
}
function OrderAccordion({ item }: { item: OrderWithPayment }) {
const [isOpen, setIsOpen] = useState(false)
const { order, payment } = item
return (
<div className={styles.accordionItem}>
<button
className={styles.summaryRow}
onClick={() => setIsOpen(v => !v)}
type="button"
aria-expanded={isOpen}
>
<div className={styles.summaryLeft}>
<span className={styles.summaryDate}>{formatDate(order.created_at)}</span>
<StatusBadge status={order.status} labels={ORDER_STATUS_LABELS} />
{payment && <StatusBadge status={payment.status} labels={PAYMENT_STATUS_LABELS} />}
</div>
<div className={styles.summaryRight}>
<span className={styles.amount}>{order.usdt_amount} USDT</span>
<span className={styles.totalAmount}>{Number(order.total_price).toLocaleString('ru-RU')} ₽</span>
<svg
className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div className={`${styles.bodyOuter} ${isOpen ? styles.bodyOuterOpen : ''}`}>
<div className={styles.bodyInner}>
<div className={styles.body}>
<div className={styles.col}>
<p className={styles.colTitle}>Заказ</p>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Сумма USDT</span>
<span className={styles.infoValue}>{order.usdt_amount} USDT</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Курс обмена</span>
<span className={styles.infoValue}>1 USDT = {order.usdt_exchange_rate} ₽</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Сервисный сбор</span>
<span className={styles.infoValue}>{order.service_fee} USDT</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Комиссия за газ</span>
<span className={styles.infoValue}>{order.gas_fee} USDT</span>
</div>
<div className={`${styles.infoRow} ${styles.infoRowTotal}`}>
<span className={styles.infoLabel}>Итого к оплате</span>
<span className={styles.infoValue}>{Number(order.total_price).toLocaleString('ru-RU')} ₽</span>
</div>
</div>
<div className={styles.col}>
<p className={styles.colTitle}>Платёж</p>
{payment ? (
<>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Статус</span>
<StatusBadge status={payment.status} labels={PAYMENT_STATUS_LABELS} />
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Оплачено</span>
<span className={styles.infoValue}>{payment.itpay_paid_amount || '—'}</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Истекает</span>
<span className={styles.infoValue}>{formatDate(payment.expired_date)}</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Хэш транзакции</span>
<span className={styles.infoValueRow}>
<span className={styles.infoValue} title={payment.web3_transaction_hash || undefined}>
{truncateHash(payment.web3_transaction_hash)}
</span>
{payment.web3_transaction_hash && (
<CopyButton value={payment.web3_transaction_hash} />
)}
</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Чек</span>
{payment.receipt_cloudekassir_link ? (
<a
href={payment.receipt_cloudekassir_link}
target="_blank"
rel="noopener noreferrer"
className={styles.infoLink}
>
Открыть →
</a>
) : (
<span className={styles.infoValue}>—</span>
)}
</div>
</>
) : (
<div className={styles.infoRow}>
<span className={styles.infoValue}>—</span>
</div>
)}
</div>
</div>
</div>
</div>
</div>
)
}
export function TransactionsPage() {
const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useOrders()
const items: OrderWithPayment[] = data?.pages.flatMap(p => p.orders) ?? []
return (
<div className={styles.page}>
<WalletHeader />
<main className={styles.main}>
<div className={styles.glow} />
<h1 className={styles.title}>Транзакции</h1>
{isLoading && <p className={styles.status}>Загрузка...</p>}
{isError && <p className={styles.statusError}>Не удалось загрузить транзакции. Попробуйте обновить страницу.</p>}
{!isLoading && !isError && items.length === 0 && (
<p className={styles.empty}>У вас пока нет транзакций.</p>
)}
{items.length > 0 && (
<div className={styles.list}>
{items.map((item) => (
<OrderAccordion key={item.order.id} item={item} />
))}
</div>
)}
{hasNextPage && (
<div className={styles.loadMore}>
<button
className={styles.loadMoreBtn}
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
type="button"
>
{isFetchingNextPage ? 'Загрузка...' : 'Загрузить ещё'}
</button>
</div>
)}
<TransactionsList />
</main>
<Footer />
</div>

1
src/widgets/transactions-list/index.ts Normal file
View File

@@ -0,0 +1 @@
export { TransactionsList } from './ui/TransactionsList'

20
src/widgets/transactions-list/model/format.ts Normal file
View File

@@ -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')
}

12
src/widgets/transactions-list/model/paymentStatusLabels.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { PaymentStatus } from '@features/payment'
export const PAYMENT_STATUS_LABELS: Record<PaymentStatus, string> = {
pending: 'Ожидание',
money_accepted: 'Деньги получены',
web3_processing: 'Обработка в сети',
web3_hash_error: 'Ошибка хэша',
web3_balance_problem: 'Проблема с балансом',
receipt_error: 'Ошибка чека',
completed: 'Завершён',
usdt_delivered: 'USDT отправлен',
}

20
src/widgets/transactions-list/ui/CopyButton.module.css Normal file
View File

@@ -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);
}

32
src/widgets/transactions-list/ui/CopyButton.tsx Normal file
View File

@@ -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 (
<button className={styles.button} onClick={handleCopy} type="button" title="Скопировать">
{copied ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
)}
</button>
)
}

189
src/widgets/transactions-list/ui/OrderAccordion.module.css Normal file
View File

@@ -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;
}
}

120
src/widgets/transactions-list/ui/OrderAccordion.tsx Normal file
View File

@@ -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 (
<div className={styles.item}>
<button
className={styles.summary}
onClick={() => setIsOpen(v => !v)}
type="button"
aria-expanded={isOpen}
>
<div className={styles.summaryLeft}>
<span className={styles.summaryDate}>{formatDate(order.created_at)}</span>
{payment && <StatusBadge status={payment.status} />}
</div>
<div className={styles.summaryRight}>
<span className={styles.amount}>{order.usdt_amount} USDT</span>
<span className={styles.totalAmount}>{formatRub(order.total_price)} ₽</span>
<svg
className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div className={`${styles.bodyOuter} ${isOpen ? styles.bodyOuterOpen : ''}`}>
<div className={styles.bodyInner}>
<div className={styles.body}>
<div className={styles.col}>
<p className={styles.colTitle}>Заказ</p>
<InfoRow label="Сумма USDT" value={`${order.usdt_amount} USDT`} />
<InfoRow label="Курс обмена" value={`1 USDT = ${order.usdt_exchange_rate} ₽`} />
<InfoRow label="Сервисный сбор" value={`${order.service_fee} USDT`} />
<InfoRow label="Комиссия за газ" value={`${order.gas_fee} USDT`} />
<InfoRow
label="Итого к оплате"
value={`${formatRub(order.total_price)} ₽`}
emphasised
/>
</div>
<div className={styles.col}>
<p className={styles.colTitle}>Платёж</p>
{payment ? (
<>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Статус</span>
<StatusBadge status={payment.status} />
</div>
<InfoRow label="Оплачено" value={payment.itpay_paid_amount || '—'} />
<InfoRow label="Истекает" value={formatDate(payment.expired_date)} />
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Хэш транзакции</span>
<span className={styles.infoValueRow}>
<span className={styles.infoValue} title={payment.web3_transaction_hash || undefined}>
{truncateHash(payment.web3_transaction_hash)}
</span>
{payment.web3_transaction_hash && (
<CopyButton value={payment.web3_transaction_hash} />
)}
</span>
</div>
<div className={styles.infoRow}>
<span className={styles.infoLabel}>Чек</span>
{payment.receipt_cloudekassir_link ? (
<a
href={payment.receipt_cloudekassir_link}
target="_blank"
rel="noopener noreferrer"
className={styles.infoLink}
>
Открыть →
</a>
) : (
<span className={styles.infoValue}>—</span>
)}
</div>
</>
) : (
<div className={styles.infoRow}>
<span className={styles.infoValue}>—</span>
</div>
)}
</div>
</div>
</div>
</div>
</div>
)
}
function InfoRow({ label, value, emphasised }: { label: string; value: string; emphasised?: boolean }) {
return (
<div className={`${styles.infoRow} ${emphasised ? styles.infoRowTotal : ''}`}>
<span className={styles.infoLabel}>{label}</span>
<span className={styles.infoValue}>{value}</span>
</div>
)
}

48
src/widgets/transactions-list/ui/StatusBadge.module.css Normal file
View File

@@ -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);
}

15
src/widgets/transactions-list/ui/StatusBadge.tsx Normal file
View File

@@ -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 (
<span className={`${styles.badge} ${styles[`status_${status}`] ?? ''}`}>
{PAYMENT_STATUS_LABELS[status] ?? status}
</span>
)
}

62
src/widgets/transactions-list/ui/TransactionsList.module.css Normal file
View File

@@ -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;
}

36
src/widgets/transactions-list/ui/TransactionsList.tsx Normal file
View File

@@ -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 <p className={styles.status}>Загрузка...</p>
if (isError) return <p className={styles.statusError}>Не удалось загрузить транзакции. Попробуйте обновить страницу.</p>
if (items.length === 0) return <p className={styles.empty}>У вас пока нет транзакций.</p>
return (
<>
<div className={styles.list}>
{items.map(item => (
<OrderAccordion key={item.order.id} item={item} />
))}
</div>
{hasNextPage && (
<div className={styles.loadMore}>
<button
className={styles.loadMoreBtn}
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
type="button"
>
{isFetchingNextPage ? 'Загрузка...' : 'Загрузить ещё'}
</button>
</div>
)}
</>
)
}