first commit

src/widgets/balance-card/index.ts

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

src/widgets/balance-card/ui/BalanceCard.module.css

@@ -0,0 +1,102 @@
+.card {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  padding: 32px 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 28px;
+}
+
+@media (max-width: 768px) {
+  .card {
+    padding: 1rem 1.25rem;
+  }
+}
+
+.label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.amount {
+  font-size: 48px;
+  font-weight: 800;
+  line-height: 1.1;
+  font-family: var(--font-mono);
+}
+
+.rub {
+  font-size: 18px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+  font-family: var(--font-mono);
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 14px;
+  padding: 14px 22px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+  font-family: inherit;
+}
+
+.btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.btn img {
+  height: 28px;
+}
+
+@media (max-width: 900px) {
+  .card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+
+  .actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .actions>* {
+    width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .amount {
+    font-size: 36px;
+  }
+
+  .actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .btn {
+    padding: 8px 1rem;
+    justify-content: center;
+  }
+}

src/widgets/balance-card/ui/BalanceCard.tsx

@@ -0,0 +1,27 @@
+import styles from './BalanceCard.module.css'
+import topup from '@shared/assets/topup.svg'
+import swap from '@shared/assets/swap.svg'
+import { Link } from 'react-router-dom'
+import { ROUTES } from '@shared/config/routes'
+
+export function BalanceCard() {
+  return (
+    <div className={styles.card}>
+      <div className={styles.left}>
+        <div className={styles.label}>Общий баланс</div>
+        <div className={styles.amount}>$245.00</div>
+        <div className={styles.rub}>≈ 22 340,50 ₽</div>
+      </div>
+      <div className={styles.actions}>
+        <button className={styles.btn} type="button">
+          <img src={swap} alt="swap" />
+          Пополнить кошелёк
+        </button>
+        <Link to={ROUTES.SWAP} className={styles.btn} type="button">
+          <img src={topup} alt="topup" />
+          Своп / Бридж
+        </Link>
+      </div>
+    </div>
+  )
+}