first commit
This commit is contained in:
1
src/widgets/networks-table/index.ts
Normal file
1
src/widgets/networks-table/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { NetworksTable } from './ui/NetworksTable'
|
||||
63
src/widgets/networks-table/model/networks.ts
Normal file
63
src/widgets/networks-table/model/networks.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
export interface Network {
|
||||
name: string
|
||||
ticker: string
|
||||
cls: 'btc' | 'eth' | 'trx' | 'sol' | 'bnb'
|
||||
icon: string
|
||||
speed: number
|
||||
color: string
|
||||
fee: string
|
||||
confirm: string
|
||||
}
|
||||
|
||||
export const NETWORKS: readonly Network[] = [
|
||||
{
|
||||
name: 'Bitcoin',
|
||||
ticker: 'BTC',
|
||||
cls: 'btc',
|
||||
icon: '₿',
|
||||
speed: 30,
|
||||
color: 'rgba(247,147,26,0.8)',
|
||||
fee: '~0.0001 BTC',
|
||||
confirm: '~10 мин',
|
||||
},
|
||||
{
|
||||
name: 'Ethereum',
|
||||
ticker: 'ETH',
|
||||
cls: 'eth',
|
||||
icon: 'Ξ',
|
||||
speed: 60,
|
||||
color: 'rgba(98,126,234,0.8)',
|
||||
fee: '~2–15 Gwei',
|
||||
confirm: '~15 сек',
|
||||
},
|
||||
{
|
||||
name: 'Tron',
|
||||
ticker: 'TRX',
|
||||
cls: 'trx',
|
||||
icon: '◈',
|
||||
speed: 90,
|
||||
color: 'rgba(255,6,10,0.8)',
|
||||
fee: '~1 TRX',
|
||||
confirm: '~3 сек',
|
||||
},
|
||||
{
|
||||
name: 'Solana',
|
||||
ticker: 'SOL',
|
||||
cls: 'sol',
|
||||
icon: '◎',
|
||||
speed: 98,
|
||||
color: 'rgba(153,69,255,0.8)',
|
||||
fee: '~0.000005 SOL',
|
||||
confirm: '~1 сек',
|
||||
},
|
||||
{
|
||||
name: 'BNB Chain',
|
||||
ticker: 'BNB',
|
||||
cls: 'bnb',
|
||||
icon: '◆',
|
||||
speed: 88,
|
||||
color: 'rgba(243,186,47,0.8)',
|
||||
fee: '~0.0005 BNB',
|
||||
confirm: '~3 сек',
|
||||
},
|
||||
] as const
|
||||
156
src/widgets/networks-table/ui/NetworksTable.module.css
Normal file
156
src/widgets/networks-table/ui/NetworksTable.module.css
Normal file
@@ -0,0 +1,156 @@
|
||||
.section {
|
||||
padding: 100px 48px;
|
||||
background: var(--bg-deep);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(32px, 3.5vw, 48px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 56px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tableWrap {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th {
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
padding: 0 16px 20px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 18px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
vertical-align: middle;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.table tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon_btc {
|
||||
background: linear-gradient(135deg, #f7931a, #e8850f);
|
||||
}
|
||||
|
||||
.icon_eth {
|
||||
background: linear-gradient(135deg, #627eea, #4965d0);
|
||||
}
|
||||
|
||||
.icon_trx {
|
||||
background: linear-gradient(135deg, #ff0013, #cc000f);
|
||||
}
|
||||
|
||||
.icon_sol {
|
||||
background: linear-gradient(135deg, #9945ff, #14f195);
|
||||
}
|
||||
|
||||
.icon_bnb {
|
||||
background: linear-gradient(135deg, #f3ba2f, #d4a229);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ticker {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.speedBar {
|
||||
width: 120px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.speedFill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.fee {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.confirm {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin-top: 20px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.section {
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tableWrap {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.section {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
54
src/widgets/networks-table/ui/NetworksTable.tsx
Normal file
54
src/widgets/networks-table/ui/NetworksTable.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NETWORKS } from '../model/networks'
|
||||
import styles from './NetworksTable.module.css'
|
||||
|
||||
export function NetworksTable() {
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<div className={styles.wrap}>
|
||||
<h2 className={styles.title}>Поддерживаемые сети</h2>
|
||||
<div className={styles.tableWrap}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Сеть</th>
|
||||
<th>Скорость</th>
|
||||
<th>Комиссия</th>
|
||||
<th>Подтверждение</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{NETWORKS.map((n) => (
|
||||
<tr key={n.ticker}>
|
||||
<td>
|
||||
<div className={styles.name}>
|
||||
<div className={`${styles.icon} ${styles[`icon_${n.cls}`]}`}>{n.icon}</div>
|
||||
<span className={styles.label}>{n.name}</span>
|
||||
<span className={styles.ticker}>{n.ticker}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className={styles.speedBar}>
|
||||
<div
|
||||
className={styles.speedFill}
|
||||
style={{ width: `${n.speed}%`, background: n.color }}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={styles.fee}>{n.fee}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={styles.confirm}>{n.confirm}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={styles.footnote}>
|
||||
* Комиссии и время подтверждения указаны приблизительно и зависят от загруженности сети
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user