feat: create kyc page with api

src/widgets/kyc-verification/index.ts

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

src/widgets/kyc-verification/model/useKyc.ts

@@ -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,
+  }
+}

src/widgets/kyc-verification/ui/KycModal.module.css

@@ -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;
+  }
+}

src/widgets/kyc-verification/ui/KycModal.tsx

@@ -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>
+  )
+}

src/widgets/kyc-verification/ui/KycWidget.module.css

@@ -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;
+  }
+}

src/widgets/kyc-verification/ui/KycWidget.tsx

@@ -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()} />}
+    </>
+  )
+}