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

fix select bridge

Browse Source
This commit is contained in:
Артём Рассадин
2026-07-01 16:59:00 +03:00
parent 3f9f8db72c
commit 7535845a86
7 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/index-CxvesZpU.css → dist/assets/index-COhiLP2_.css vendored
View File

File diff suppressed because one or more lines are too long

26
dist/assets/index-Dr-hNfiH.js → dist/assets/index-j51OSC_x.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЭКСА — Ваш мост в мир цифровых активов</title> <title>ЭКСА — Ваш мост в мир цифровых активов</title>
<script type="module" crossorigin src="/assets/index-Dr-hNfiH.js"></script> <script type="module" crossorigin src="/assets/index-j51OSC_x.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CxvesZpU.css"> <link rel="stylesheet" crossorigin href="/assets/index-COhiLP2_.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

21
src/widgets/bridge-form/ui/NetworkSelect.module.css Normal file
View File

@@ -0,0 +1,21 @@
.wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 0 4px;
margin-bottom: 8px;
}
.label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 700;
min-width: 20px;
}
/* Ограничиваем ширину селекта, чтобы он не растягивался на весь блок. */
.select {
width: 130px;
}

17
src/widgets/bridge-form/ui/NetworkSelect.tsx
View File

@@ -1,4 +1,5 @@
import { Select } from '@shared/ui' import { Select } from '@shared/ui'
import styles from './NetworkSelect.module.css'
interface Props { interface Props {
label: string label: string
@@ -9,11 +10,15 @@ interface Props {
export function NetworkSelect({ label, value, onChange, options }: Props) { export function NetworkSelect({ label, value, onChange, options }: Props) {
return ( return (
<Select <div className={styles.wrap}>
label={label} <span className={styles.label}>{label}</span>
value={value} <div className={styles.select}>
onChange={onChange} <Select
options={options.map(o => ({ value: o, label: o }))} value={value}
/> onChange={onChange}
options={options.map(o => ({ value: o, label: o }))}
/>
</div>
</div>
) )
} }

8
src/widgets/networks-table/ui/NetworksTable.module.css
View File

@@ -109,7 +109,15 @@
.speedFill { .speedFill {
height: 100%; height: 100%;
width: 0;
border-radius: 999px; border-radius: 999px;
transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.speedFill {
transition: none;
}
} }
.fee { .fee {

26
src/widgets/networks-table/ui/NetworksTable.tsx
View File

@@ -1,9 +1,31 @@
import { useEffect, useRef, useState } from 'react'
import { NETWORKS } from '../model/networks' import { NETWORKS } from '../model/networks'
import styles from './NetworksTable.module.css' import styles from './NetworksTable.module.css'
export function NetworksTable() { export function NetworksTable() {
const sectionRef = useRef<HTMLElement>(null)
const [animated, setAnimated] = useState(false)
useEffect(() => {
const el = sectionRef.current
if (!el) return
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
setAnimated(true)
observer.disconnect()
}
},
{ threshold: 0.3 },
)
observer.observe(el)
return () => observer.disconnect()
}, [])
return ( return (
<section className={styles.section}> <section ref={sectionRef} className={styles.section}>
<div className={styles.wrap}> <div className={styles.wrap}>
<h2 className={styles.title}>Поддерживаемые сети</h2> <h2 className={styles.title}>Поддерживаемые сети</h2>
<div className={styles.tableWrap}> <div className={styles.tableWrap}>
@@ -30,7 +52,7 @@ export function NetworksTable() {
<div className={styles.speedBar}> <div className={styles.speedBar}>
<div <div
className={styles.speedFill} className={styles.speedFill}
style={{ width: `${n.speed}%`, background: n.color }} style={{ width: animated ? `${n.speed}%` : '0%', background: n.color }}
/> />
</div> </div>
</td> </td>