17.05.2026 funny

src/features/auth/api/profileApi.ts

@@ -1,4 +1,5 @@
 import { getCsrfToken } from '@shared/api/csrf'
+import { tokenStore } from '@shared/api/tokenStore'
 
 const USERS_API_URL = 'https://app.users.elcsa.ru'
 
@@ -9,26 +10,58 @@ export interface MeResponse {
   middle_name: string
   last_name: string
   birth_date: string
-  crypto_wallet: string | null
+  encrypted_mnemonic: string | null
   phone: string
   passport_data: string | null
   inn: string | null
   erc20: string | null
+  avatar_link: string | null
   kyc_verified: boolean
   is_deleted: boolean
   created_at: string
   updated_at: string
   kyc_verified_at: string | null
+  webp_size_bytes: number
+}
+
+export interface UploadAvatarPayload {
+  photo_base64: string
+  decoded_bytes: string
+}
+
+async function authedHeaders(): Promise<HeadersInit> {
+  const csrf = await getCsrfToken()
+  const bearer = tokenStore.get()
+  return {
+    'X-CSRF-Token': csrf,
+    ...(bearer ? { Authorization: `Bearer ${bearer}` } : {}),
+  }
 }
 
 export async function getMe(): Promise<MeResponse> {
-  const csrf = await getCsrfToken()
+  const headers = await authedHeaders()
 
   const res = await fetch(`${USERS_API_URL}/me/`, {
     credentials: 'include',
-    headers: {
-      'X-CSRF-Token': csrf,
-    },
+    headers,
+  })
+
+  const data = await res.json()
+  if (!res.ok) throw data
+  return data
+}
+
+export async function uploadAvatar(payload: UploadAvatarPayload): Promise<MeResponse> {
+  const headers = await authedHeaders()
+
+  const res = await fetch(`${USERS_API_URL}/me/settings/avatar`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+    body: JSON.stringify(payload),
   })
 
   const data = await res.json()

src/features/auth/hooks/useUploadAvatar.ts

@@ -0,0 +1,13 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { uploadAvatar } from '../api/profileApi'
+import type { MeResponse, UploadAvatarPayload } from '../api/profileApi'
+
+export function useUploadAvatar() {
+  const queryClient = useQueryClient()
+  return useMutation<MeResponse, unknown, UploadAvatarPayload>({
+    mutationFn: uploadAvatar,
+    onSuccess: (data) => {
+      queryClient.setQueryData(['me'], data)
+    },
+  })
+}

src/features/auth/index.ts

@@ -1,7 +1,8 @@
 export { registrationStart, registrationComplete, loginStart, loginComplete } from './api/registrationApi'
-export { getMe } from './api/profileApi'
-export type { MeResponse } from './api/profileApi'
+export { getMe, uploadAvatar } from './api/profileApi'
+export type { MeResponse, UploadAvatarPayload } from './api/profileApi'
 export { useMe } from './hooks/useMe'
+export { useUploadAvatar } from './hooks/useUploadAvatar'
 export type { RegistrationStartPayload, RegistrationCompletePayload, LoginStartPayload, LoginCompletePayload, AuthResponse } from './api/registrationApi'
 export { useIsAuthenticated } from './hooks/useIsAuthenticated'
 export { useAuth, AUTH_QUERY_KEY } from './hooks/useAuth'

src/widgets/converter-page/ui/ConverterSection.module.css

@@ -221,7 +221,7 @@
   }
 
   .tab {
-    flex: 0 0 50%;
+    flex: 1 1 0;
   }
 
   .field {

src/widgets/converter-page/ui/ConverterSection.tsx

@@ -61,15 +61,6 @@ export function ConverterSection() {
             >
               КУПИТЬ
             </button>
-            {/* <button
-              type="button"
-              disabled
-              className={styles.tab}
-              data-active={c.mode === 'sell' || undefined}
-              onClick={() => c.setMode('sell')}
-            >
-              ПРОДАТЬ
-            </button> */}
           </div>
 
           <div className={styles.field}>

src/widgets/currency-converter/ui/Converter.module.css

@@ -197,6 +197,27 @@
   border-top: 1px solid var(--glass-border);
 }
 
+.payBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 32px;
+  padding: 18px;
+  border-radius: 12px;
+  background: var(--grad-center);
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+
+.payBtn:hover {
+  opacity: 0.9;
+}
+
 @media (max-width: 1024px) {
   .body {
     grid-template-columns: 1fr;
@@ -217,7 +238,7 @@
   }
 
   .tab {
-    flex: 0 0 50%;
+    flex: 1 1 0;
   }
 
   .field {

src/widgets/currency-converter/ui/Converter.tsx

@@ -3,10 +3,11 @@ import { useConverter } from '../model/useConverter'
 import { progressPercent } from '../model/tiers'
 import { usePaymentConfig, usePaymentQuote } from '@features/payment'
 import { useDebounce } from '@shared/lib/hooks/useDebounce'
-import { AgreementCheckbox } from './AgreementCheckbox'
 import { CommissionTable } from './CommissionTable'
 import styles from './Converter.module.css'
 import { Title } from '@shared/ui/Title/Title'
+import { Link } from 'react-router-dom'
+import { ROUTES } from '@shared/config/routes'
 
 export function Converter() {
   const { data: config } = usePaymentConfig()
@@ -54,15 +55,6 @@ export function Converter() {
               >
                 КУПИТЬ
               </button>
-              <button
-                type="button"
-                className={styles.tab}
-                data-active={c.mode === 'sell' || undefined}
-                onClick={() => c.setMode('sell')}
-                disabled
-              >
-                ПРОДАТЬ
-              </button>
             </div>
 
             <div className={styles.field}>
@@ -116,9 +108,9 @@ export function Converter() {
           />
         </div>
 
-        <div className={styles.bottom}>
-          <AgreementCheckbox checked={c.agreed} onToggle={() => c.setAgreed(!c.agreed)} />
-        </div>
+        <Link to={ROUTES.CONVERTER} className={styles.payBtn}>
+          Перейти к оплате
+        </Link>
       </div>
     </section>
   )

src/widgets/profile/ui/ProfileAvatar.module.css

@@ -27,6 +27,19 @@
   height: 54px;
 }
 
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.error {
+  color: var(--danger, #ff5252);
+  font-size: 12px;
+  text-align: center;
+}
+
 .overlay {
   position: absolute;
   inset: 0;

src/widgets/profile/ui/ProfileAvatar.tsx

@@ -1,14 +1,59 @@
+import { useRef, useState } from 'react'
 import { Button } from '@shared/ui'
+import { useMe, useUploadAvatar } from '@features/auth'
 import styles from './ProfileAvatar.module.css'
 
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      const comma = result.indexOf(',')
+      resolve(comma >= 0 ? result.slice(comma + 1) : result)
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
+
 export function ProfileAvatar() {
+  const { data } = useMe()
+  const { mutateAsync: upload, isPending } = useUploadAvatar()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const avatarLink = data?.avatar_link ?? null
+
+  const openPicker = () => {
+    if (isPending) return
+    inputRef.current?.click()
+  }
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file) return
+
+    setError(null)
+    try {
+      const photo_base64 = await fileToBase64(file)
+      await upload({ photo_base64, decoded_bytes: String(file.size) })
+    } catch {
+      setError('Не удалось загрузить фото')
+    }
+  }
+
   return (
     <div className={styles.col}>
-      <div className={styles.avatar}>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <circle cx="12" cy="8" r="4" />
-          <path d="M4 20c0-4 4-7 8-7s8 3 8 7" />
-        </svg>
+      <div className={styles.avatar} onClick={openPicker}>
+        {avatarLink ? (
+          <img src={avatarLink} alt="avatar" className={styles.avatarImg} />
+        ) : (
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="8" r="4" />
+            <path d="M4 20c0-4 4-7 8-7s8 3 8 7" />
+          </svg>
+        )}
         <div className={styles.overlay}>
           <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" />
@@ -16,10 +61,19 @@ export function ProfileAvatar() {
           </svg>
         </div>
       </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        hidden
+      />
       <div className={styles.addPhoto}>
-        <Button variant="ghost">ДОБАВИТЬ ФОТО</Button>
+        <Button variant="ghost" onClick={openPicker} disabled={isPending}>
+          {isPending ? 'ЗАГРУЗКА...' : 'ДОБАВИТЬ ФОТО'}
+        </Button>
       </div>
-      <Button variant="danger">УДАЛИТЬ ФОТО</Button>
+      {error && <span className={styles.error}>{error}</span>}
     </div>
   )
 }