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

feat: create kyc page with api

Browse Source
This commit is contained in:
Артём Рассадин
2026-05-12 17:47:20 +03:00
parent 82d75bd46b
commit f52365c293
30 changed files with 1042 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
CLAUDE.md Normal file
View File

@@ -0,0 +1,54 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Commands
```bash
npm run dev # Start dev server on port 3000
npm run build # Type-check (tsc -b) then Vite build
npm run preview # Preview production build
npm run lint # ESLint check
```
No test runner is configured.
## Architecture
This is a **React 19 + Vite** frontend following **Feature-Sliced Design (FSD)**. Layers are strictly ordered — lower layers must not import from higher ones:
```
app → pages → widgets → features → entities → shared
```
Path aliases map directly to FSD layers (`@app/*`, `@pages/*`, `@widgets/*`, `@features/*`, `@entities/*`, `@shared/*`) via `vite-tsconfig-paths`.
### Layer responsibilities
- **`app/`** — global providers (React Query, router), global CSS (`styles/`). Entry: `App.tsx` wraps `QueryProvider → RouterProvider`.
- **`pages/`** — route-level page components. Each page composes widgets.
- **`widgets/`** — self-contained UI blocks (Hero, CurrencyConverter, NetworksTable, etc.). Contain their own `model/`, `ui/`, and barrel `index.ts`.
- **`features/`** — user-facing capabilities. Currently only `auth/` (hooks + API calls).
- **`shared/`** — cross-cutting utilities, never feature-specific:
- `api/` — fetch wrapper (`base.ts`), CSRF token cache (`csrf.ts`), in-memory access token store (`tokenStore.ts`)
- `config/` — `routes.ts` (ROUTES const), `env.ts` (VITE_API_URL), `constants.ts`
- `ui/` — reusable components (Button, PrimaryButton, FormField, Pill, Title, TokenIcon, Notification) with CSS Modules
- `lib/` — generic hooks (useDebounce, useLocalStorage) and utils (cn)
### Auth flow
Authentication uses **two-step email+code** flows for both registration and login. The access token lives in an in-memory `tokenStore` (not localStorage). It is refreshed against `https://app.auth.elcsa.ru/v1/jwt/refresh` using an HttpOnly cookie. `useAuth()` triggers this refresh on app load via React Query; `useIsAuthenticated()` derives auth state from that query.
Every API request (via `shared/api/base.ts`) attaches a CSRF token fetched from `/csrf/token` (cached in module scope) and the Bearer token if present. On 401 it attempts one silent refresh before throwing.
### Routing
`ProtectedRoute` redirects unauthenticated users to `/login`. `GuestRoute` redirects already-authenticated users away from `/login` and `/register`. The converter page (`/converter`) is public but not a guest-only route.
### Styling
Plain CSS Modules (`.module.css`) — no Tailwind or CSS-in-JS. Global design tokens live in `src/app/styles/variables.css`.
## Environment
`VITE_API_URL` must be set (used in `src/shared/config/env.ts`). Create a `.env.local` for local development.

60
dist/assets/index-DNMSK_QC.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-Gd4LQhAo.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
dist/assets/logo-full-white-DEb7oTyu.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

14
dist/index.html vendored Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЭКСА — Ваш мост в мир цифровых активов</title>
<script type="module" crossorigin src="/assets/index-DNMSK_QC.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Gd4LQhAo.css">
</head>
<body>
<div id="root"></div>
</body>
</html>

5
src/app/providers/RouterProvider.tsx
View File

@@ -5,7 +5,9 @@ import { SwapPage } from '@pages/swap'
import { ProfilePage } from '@pages/profile'
import { LoginPage } from '@pages/login'
import { RegisterPage } from '@pages/register'
import { ConverterPage } from '@pages/converter'
import { SeedPhrasePage } from '@pages/seed-phrase'
import { KycPage } from '@pages/kyc'
import { ROUTES } from '@shared/config/routes'
import { ScrollToTop } from './ScrollToTop'
import { ProtectedRoute } from './ProtectedRoute'
@@ -23,12 +25,15 @@ export function RouterProvider() {
<Route path={ROUTES.REGISTER} element={<RegisterPage />} />
</Route>
<Route path={ROUTES.CONVERTER} element={<ConverterPage />} />
<Route element={<ProtectedRoute />}>
<Route path={ROUTES.WALLET} element={<WalletPage />} />
<Route path={ROUTES.SWAP} element={<SwapPage />} />
<Route path={ROUTES.PROFILE} element={<ProfilePage />} />
<Route path={ROUTES.SEED_PHRASE} element={<SeedPhrasePage />} />
</Route>
<Route path={ROUTES.KYC} element={<KycPage />} />
</Routes>
</BrowserRouter>
)

2
src/features/auth/api/registrationApi.ts
View File

@@ -39,7 +39,7 @@ export function loginStart(payload: LoginStartPayload): Promise<void> {
}
export function loginComplete(payload: LoginCompletePayload): Promise<AuthResponse> {
return api.post<AuthResponse>('/auth/login/compete', payload)
return api.post<AuthResponse>('/auth/login/complete', payload)
}
export async function logout(): Promise<void> {

14
src/features/kyc/api/kycApi.ts Normal file
View File

@@ -0,0 +1,14 @@
import { api } from '@shared/api/base'
export interface KycResponse {
status: boolean
error: string
link: string
user_token: string
client_user_token: string
qr_code: string
}
export function kycCreate(): Promise<KycResponse> {
return api.post<KycResponse>('/kyc/create', {})
}

1
src/pages/converter/index.ts Normal file
View File

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

19
src/pages/converter/ui/ConverterPage.module.css Normal file
View File

@@ -0,0 +1,19 @@
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-deep);
}
.main {
flex: 1;
padding: 28px 32px 40px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 900px) {
.main {
padding: 20px 16px 32px;
}
}

16
src/pages/converter/ui/ConverterPage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { ConverterSection } from '@widgets/converter-page'
import { Footer } from '@widgets/footer'
import { WalletHeader } from '@widgets/wallet-header'
import styles from './ConverterPage.module.css'
export function ConverterPage() {
return (
<div className={styles.page}>
<WalletHeader />
<main className={styles.main}>
<ConverterSection />
</main>
<Footer />
</div>
)
}

1
src/pages/kyc/index.ts Normal file
View File

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

7
src/pages/kyc/ui/KycPage.module.css Normal file
View File

@@ -0,0 +1,7 @@
.page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
}

10
src/pages/kyc/ui/KycPage.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { KycWidget } from '@widgets/kyc-verification'
import styles from './KycPage.module.css'
export function KycPage() {
return (
<div className={styles.page}>
<KycWidget />
</div>
)
}

2
src/shared/config/routes.ts
View File

@@ -6,4 +6,6 @@ export const ROUTES = {
REGISTER: '/register',
PROFILE: '/profile',
SEED_PHRASE: '/seed-phrase',
CONVERTER: '/converter',
KYC: '/kyc',
} as const

1
src/widgets/converter-page/index.ts Normal file
View File

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

54
src/widgets/converter-page/ui/AgreementCheck.module.css Normal file
View File

@@ -0,0 +1,54 @@
.wrap {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
text-align: left;
background: none;
border: none;
padding: 0;
}
.box {
width: 20px;
height: 20px;
border-radius: 6px;
border: 2px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s;
margin-top: 2px;
}
.box svg {
opacity: 0;
transition: opacity 0.2s;
}
.box[data-checked] {
background: var(--grad-center);
border-color: var(--grad-center);
}
.box[data-checked] svg {
opacity: 1;
}
.text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
max-width: 500px;
}
.link {
color: var(--interactive);
text-decoration: underline;
}
.required {
font-size: 11px;
opacity: 0.6;
}

33
src/widgets/converter-page/ui/AgreementCheck.tsx Normal file
View File

@@ -0,0 +1,33 @@
import styles from './AgreementCheck.module.css'
interface Props {
checked: boolean
onToggle: () => void
}
export function AgreementCheck({ checked, onToggle }: Props) {
return (
<button type="button" className={styles.wrap} onClick={onToggle} aria-pressed={checked}>
<span className={styles.box} data-checked={checked || undefined}>
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path
d="M2 6l3 3 5-5"
stroke="#fff"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
<span className={styles.text}>
Я ознакомлен и согласен с{' '}
<a href="#" className={styles.link} onClick={(e) => e.preventDefault()}>
публичной офертой
</a>
. Вся деятельность компании соответствует законодательству Российской Федерации.
<br />
<span className={styles.required}>ОБЯЗАТЕЛЬНОЕ ПОЛЕ</span>
</span>
</button>
)
}

82
src/widgets/converter-page/ui/CommissionPanel.module.css Normal file
View File

@@ -0,0 +1,82 @@
.title {
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 24px;
}
.table {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
border: 1px solid var(--glass-border);
transition: all 0.3s ease;
}
.row[data-active] {
border-color: var(--grad-center);
background: rgba(91, 61, 184, 0.12);
}
.range {
font-size: 14px;
color: var(--text-secondary);
}
.pct {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--highlight);
}
.progressBar {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
margin-bottom: 32px;
overflow: hidden;
}
.progressFill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--grad-center), var(--highlight));
transition: width 0.5s ease;
}
.summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
border: 1px solid var(--glass-border);
margin-bottom: 16px;
}
.summary:last-child {
margin-bottom: 0;
}
.summaryLabel {
font-size: 13px;
color: var(--text-secondary);
}
.summaryValue {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
}

49
src/widgets/converter-page/ui/CommissionPanel.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { TIERS } from '@widgets/currency-converter'
import styles from './CommissionPanel.module.css'
const ru = (n: number) => n.toLocaleString('ru-RU')
interface Props {
amount: number
progress: number
commission: number
effectiveRate: number
}
export function CommissionPanel({ amount, progress, commission, effectiveRate }: Props) {
return (
<div>
<div className={styles.title}>КОМИССИЯ СЕРВИСА</div>
<div className={styles.table}>
{TIERS.map((tier, i) => (
<div
key={i}
className={styles.row}
data-active={(amount >= tier.min && amount <= tier.max) || undefined}
>
<span className={styles.range}>
{ru(tier.min)} – {ru(tier.max)} ₽
</span>
<span className={styles.pct}>{tier.pct}%</span>
</div>
))}
</div>
<div className={styles.progressBar}>
<div className={styles.progressFill} style={{ width: `${progress}%` }} />
</div>
<div className={styles.summary}>
<span className={styles.summaryLabel}>Комиссия</span>
<span className={styles.summaryValue}>
{commission.toLocaleString('ru-RU', { maximumFractionDigits: 2 })} ₽
</span>
</div>
<div className={styles.summary}>
<span className={styles.summaryLabel}>Курс с комиссией</span>
<span className={styles.summaryValue}>{effectiveRate.toFixed(2)} ₽</span>
</div>
</div>
)
}

222
src/widgets/converter-page/ui/ConverterSection.module.css Normal file
View File

@@ -0,0 +1,222 @@
.wrap {
border-radius: 24px;
padding: 32px;
position: relative;
overflow: hidden;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 40px;
}
.title {
font-size: clamp(36px, 4vw, 52px);
font-weight: 700;
}
.subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-top: 8px;
letter-spacing: 1px;
}
.pills {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.pill {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-secondary);
}
.pillValue {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 6px 14px;
font-family: var(--font-mono);
font-size: 14px;
color: var(--text-primary);
}
.body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.tabs {
display: inline-flex;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--glass-border);
margin-bottom: 32px;
}
.tab {
padding: 12px 32px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
background: transparent;
color: var(--text-secondary);
transition: all 0.3s;
}
.tab[data-active] {
background: var(--grad-center);
color: var(--text-primary);
}
.tab:not([data-active]):hover {
background: rgba(255, 255, 255, 0.04);
}
.field {
margin-bottom: 24px;
}
.fieldLabel {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 8px;
}
.fieldInput {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 0 16px;
transition: border-color 0.3s;
}
.fieldInput:focus-within {
border-color: var(--interactive);
}
.fieldInput input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 18px;
padding: 16px 0;
width: 100%;
}
.currency {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.currencyIcon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
}
.currencyRub {
background: var(--interactive);
}
.currencyUsdt {
background: var(--success);
}
.swapWrap {
display: flex;
justify-content: center;
}
.swapBtn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
color: var(--text-secondary);
}
.swapBtn:hover {
border-color: var(--highlight);
color: var(--highlight);
transform: rotate(180deg);
}
.bottom {
display: flex;
justify-content: center;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--glass-border);
}
@media (max-width: 1024px) {
.body {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.header {
margin-bottom: 1rem;
}
.tabs {
margin-bottom: 1.5rem;
display: flex;
}
.tab {
flex: 0 0 50%;
}
.field {
margin-bottom: 1rem;
}
.bottom {
margin-top: 1.5rem;
padding-top: 1rem;
}
.pills {
display: none;
}
}
@media (max-width: 640px) {
.wrap {
padding: 0;
}
}

109
src/widgets/converter-page/ui/ConverterSection.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { useConverter } from '@widgets/currency-converter'
import { GAS_PRICE, USDT_RATE } from '@shared/config/constants'
import { CommissionPanel } from './CommissionPanel'
import { AgreementCheck } from './AgreementCheck'
import styles from './ConverterSection.module.css'
export function ConverterSection() {
const c = useConverter({ usdtRate: USDT_RATE })
return (
<div className={styles.wrap}>
<div className={styles.header}>
<div>
<h1 className={styles.title}>Конвертация</h1>
<div className={styles.subtitle}>Данные обновляются в реальном времени</div>
</div>
<div className={styles.pills}>
<div className={styles.pill}>
Цена газа в RUB <span className={styles.pillValue}>{GAS_PRICE.toFixed(2)} RUB</span>
</div>
<div className={styles.pill}>
USDT/RUB <span className={styles.pillValue}>{USDT_RATE.toFixed(2)} ₽</span>
</div>
</div>
</div>
<div className={styles.body}>
<div>
<div className={styles.tabs}>
<button
type="button"
className={styles.tab}
data-active={c.mode === 'buy' || undefined}
onClick={() => c.setMode('buy')}
>
КУПИТЬ
</button>
<button
type="button"
className={styles.tab}
data-active={c.mode === 'sell' || undefined}
onClick={() => c.setMode('sell')}
>
ПРОДАТЬ
</button>
</div>
<div className={styles.field}>
<div className={styles.fieldLabel}>Конвертируете</div>
<div className={styles.fieldInput}>
<input
type="text"
value={c.rubVal}
onChange={(e) => c.updateRub(e.target.value)}
placeholder="0"
inputMode="decimal"
/>
<div className={styles.currency}>
<span className={`${styles.currencyIcon} ${styles.currencyRub}`}>₽</span>
RUB
</div>
</div>
</div>
<div className={styles.swapWrap}>
<button
type="button"
className={styles.swapBtn}
onClick={c.toggleMode}
aria-label="Поменять направление"
>
<svg width={16} height={16} viewBox="0 0 16 16" fill="none">
<path
d="M8 2v12M4 10l4 4 4-4"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
<div className={styles.field}>
<div className={styles.fieldLabel}>Получаете</div>
<div className={styles.fieldInput}>
<input type="text" value={c.usdtVal} readOnly />
<div className={styles.currency}>
<span className={`${styles.currencyIcon} ${styles.currencyUsdt}`}>₮</span>
USDT
</div>
</div>
</div>
</div>
<CommissionPanel
amount={c.numRub}
progress={c.progress}
commission={c.commission}
effectiveRate={c.effectiveRate}
/>
</div>
<div className={styles.bottom}>
<AgreementCheck checked={c.agreed} onToggle={() => c.setAgreed(!c.agreed)} />
</div>
</div>
)
}

4
src/widgets/currency-converter/index.ts
View File

@@ -1 +1,5 @@
export { Converter } from './ui/Converter'
export { useConverter } from './model/useConverter'
export type { ConverterMode } from './model/useConverter'
export { TIERS, findTier, progressPercent } from './model/tiers'
export type { Tier } from './model/tiers'

1
src/widgets/kyc-verification/index.ts Normal file
View File

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

12
src/widgets/kyc-verification/model/useKyc.ts Normal file
View File

@@ -0,0 +1,12 @@
import { useMutation } from '@tanstack/react-query'
import { kycCreate, KycResponse } from '@features/kyc/api/kycApi'
export function useKyc() {
const mutation = useMutation<KycResponse, Error>({ mutationFn: kycCreate })
return {
trigger: mutation.mutate,
data: mutation.data,
isLoading: mutation.isPending,
isError: mutation.isError,
}
}

112
src/widgets/kyc-verification/ui/KycModal.module.css Normal file
View File

@@ -0,0 +1,112 @@
.backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: 1rem;
}
.modal {
background: var(--bg-mid);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 40px;
position: relative;
max-width: 680px;
width: 100%;
}
.closeBtn {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 4px 8px;
transition: color 0.2s;
}
.closeBtn:hover {
color: var(--text-primary);
}
.body {
display: flex;
gap: 40px;
align-items: center;
}
.qrBlock {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.qrImage {
width: 200px;
height: 200px;
border-radius: 12px;
display: block;
}
.linkBtn {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 48px;
background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
border-radius: 12px;
color: var(--text-primary);
font-size: 14px;
font-weight: 700;
font-family: var(--font-sans);
text-decoration: none;
transition: filter 0.25s, box-shadow 0.25s;
}
.linkBtn:hover {
filter: brightness(1.15);
box-shadow: 0 0 24px rgba(91, 61, 184, 0.5);
}
.infoText {
color: var(--text-secondary);
font-size: 15px;
line-height: 1.7;
flex: 1;
margin: 0;
}
@media (max-width: 600px) {
.modal {
padding: 32px 20px;
}
.body {
flex-direction: column;
align-items: center;
}
.qrImage {
width: 160px;
height: 160px;
}
.linkBtn {
width: 160px;
}
.infoText {
text-align: center;
}
}

37
src/widgets/kyc-verification/ui/KycModal.tsx Normal file
View File

@@ -0,0 +1,37 @@
import type { KycResponse } from '@features/kyc/api/kycApi'
import styles from './KycModal.module.css'
interface Props {
data: KycResponse
onClose: () => void
}
export function KycModal({ data, onClose }: Props) {
return (
<div className={styles.backdrop} onClick={onClose}>
<div className={styles.modal} onClick={e => e.stopPropagation()}>
<button className={styles.closeBtn} onClick={onClose} type="button">×</button>
<div className={styles.body}>
<div className={styles.qrBlock}>
<img
className={styles.qrImage}
src={`data:image/png;base64,${data.qr_code}`}
alt="QR-код для верификации"
/>
<a
className={styles.linkBtn}
href={data.link}
target="_blank"
rel="noopener noreferrer"
>
Перейти к верификации
</a>
</div>
<p className={styles.infoText}>
Для продолжения верификации перейдите по ссылке
</p>
</div>
</div>
</div>
)
}

61
src/widgets/kyc-verification/ui/KycWidget.module.css Normal file
View File

@@ -0,0 +1,61 @@
.card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 40px 32px;
width: 100%;
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
margin-bottom: 32px;
}
.logo img {
height: 80px;
}
.iconWrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight);
margin-bottom: 24px;
box-shadow: 0 0 32px rgba(0, 212, 255, 0.15);
}
.description {
color: var(--text-secondary);
font-size: 2rem;
text-align: center;
margin: 0;
font-weight: bold;
}
.buttonWrapper {
margin-top: 32px;
width: 100%;
}
.error {
color: var(--error);
font-size: 13px;
text-align: center;
margin-top: 12px;
}
@media (max-width: 560px) {
.card {
padding: 32px 20px;
border-radius: 0;
background: transparent;
border: none;
}
}

59
src/widgets/kyc-verification/ui/KycWidget.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { PrimaryButton } from '@shared/ui'
import logo from '@shared/assets/logo-full-white.png'
import { useKyc } from '../model/useKyc'
import { KycModal } from './KycModal'
import styles from './KycWidget.module.css'
export function KycWidget() {
const { trigger, data, isLoading, isError } = useKyc()
return (
<>
<div className={styles.card}>
<div className={styles.logo}>
<img src={logo} alt="ЭКСА" />
</div>
<div className={styles.iconWrapper}>
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2L3 6v6c0 5.25 3.75 10.15 9 11.35C17.25 22.15 21 17.25 21 12V6l-9-4z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 12l2 2 4-4"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<p className={styles.description}>
Для продолжения работы необходимо пройти KYC верификацию.
</p>
<div className={styles.buttonWrapper}>
<PrimaryButton
label={isLoading ? 'Загрузка...' : 'Подтвердить личность'}
type="button"
onClick={() => trigger()}
disabled={isLoading}
/>
</div>
{isError && (
<p className={styles.error}>
Произошла ошибка. Попробуй перезагрузить страницу и попробовать снова.
</p>
)}
</div>
{data && <KycModal data={data} onClose={() => window.location.reload()} />}
</>
)
}

2
tsconfig.tsbuildinfo
View File

@@ -1 +1 @@
{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/index.ts","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/types.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/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/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/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/login-form/index.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/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.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/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/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"}
{"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/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/kyc/api/kycapi.ts","./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/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.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/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/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/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/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.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/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/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"}