feat: create kyc page with api
This commit is contained in:
1
src/widgets/converter-page/index.ts
Normal file
1
src/widgets/converter-page/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { ConverterSection } from './ui/ConverterSection'
|
||||
54
src/widgets/converter-page/ui/AgreementCheck.module.css
Normal file
54
src/widgets/converter-page/ui/AgreementCheck.module.css
Normal 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
33
src/widgets/converter-page/ui/AgreementCheck.tsx
Normal 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
82
src/widgets/converter-page/ui/CommissionPanel.module.css
Normal 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
49
src/widgets/converter-page/ui/CommissionPanel.tsx
Normal 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
222
src/widgets/converter-page/ui/ConverterSection.module.css
Normal 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
109
src/widgets/converter-page/ui/ConverterSection.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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
1
src/widgets/kyc-verification/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { KycWidget } from './ui/KycWidget'
|
||||
12
src/widgets/kyc-verification/model/useKyc.ts
Normal file
12
src/widgets/kyc-verification/model/useKyc.ts
Normal 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
112
src/widgets/kyc-verification/ui/KycModal.module.css
Normal 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
37
src/widgets/kyc-verification/ui/KycModal.tsx
Normal 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
61
src/widgets/kyc-verification/ui/KycWidget.module.css
Normal 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
59
src/widgets/kyc-verification/ui/KycWidget.tsx
Normal 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()} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user