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

profile refactor

Browse Source
This commit is contained in:
Артём Рассадин
2026-06-29 18:13:56 +03:00
parent 237112c302
commit d247e41d25
12 changed files with 272 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
dist/assets/index-19UfAL9p.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

161
dist/assets/index-B1RucWiR.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-B3CuZijI.css → dist/assets/index-DsuaJlzX.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЭКСА — Ваш мост в мир цифровых активов</title> <title>ЭКСА — Ваш мост в мир цифровых активов</title>
<script type="module" crossorigin src="/assets/index-B1RucWiR.js"></script> <script type="module" crossorigin src="/assets/index-19UfAL9p.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B3CuZijI.css"> <link rel="stylesheet" crossorigin href="/assets/index-DsuaJlzX.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

6
src/features/wallet/model/useWalletData.ts
View File

@@ -104,12 +104,16 @@ export function useCreateWallet() {
return useMutation({ mutationFn: createWallet }) return useMutation({ mutationFn: createWallet })
} }
export function useRevealMnemonic() { // `enabled` gates the request so callers can require an explicit user action
// (e.g. a "Показать" button) before the mnemonic is fetched. Defaults to true
// to preserve the standalone /seed-phrase page behavior.
export function useRevealMnemonic(enabled = true) {
return useQuery({ return useQuery({
queryKey: ['wallet', 'mnemonic'], queryKey: ['wallet', 'mnemonic'],
queryFn: revealMnemonic, queryFn: revealMnemonic,
staleTime: Infinity, staleTime: Infinity,
retry: false, retry: false,
enabled,
}) })
} }

6
src/pages/profile/ui/items/MnemonicItem.module.css Normal file
View File

@@ -0,0 +1,6 @@
.hint {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
}

36
src/pages/profile/ui/items/MnemonicItem.tsx
View File

@@ -1,10 +1,32 @@
import { useMe } from '@features/auth' import { useState } from 'react'
import { MnemonicSection } from '@widgets/profile' import { useRevealMnemonic } from '@features/wallet'
import { Spinner } from '@shared/ui' import { SeedPhraseWidget } from '@widgets/seed-phrase'
import { ProfileSection } from '@widgets/profile'
import { Button, Spinner } from '@shared/ui'
import styles from './MnemonicItem.module.css'
// «Мнемоническая фраза» dashboard item. // «Мнемоническая фраза» dashboard item. The mnemonic is fetched only after the
// user explicitly clicks "Показать мнемонику" (the query stays disabled until
// then), then the seed-phrase content is shown inline.
export function MnemonicItem() { export function MnemonicItem() {
const { isLoading } = useMe() const [revealed, setRevealed] = useState(false)
if (isLoading) return <Spinner fullscreen label="Загрузка" /> const { data: mnemonic, isLoading } = useRevealMnemonic(revealed)
return <MnemonicSection />
if (!revealed) {
return (
<ProfileSection
title="Мнемоническая фраза"
actions={<Button variant="danger" onClick={() => setRevealed(true)}>Показать мнемонику</Button>}
>
<p className={styles.hint}>
Сид-фраза из 12 слов для восстановления кошелька. Никогда не передавайте её третьим лицам.
</p>
</ProfileSection>
)
}
if (isLoading) return <Spinner fullscreen label="Загрузка" />
const words = mnemonic ? mnemonic.split(' ') : []
return <SeedPhraseWidget words={words} showProfileLink={false} />
} }

18
src/widgets/profile/ui/ProfileAvatar.module.css
View File

@@ -1,5 +1,5 @@
.col { .col {
width: 200px; width: 100%;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -8,8 +8,9 @@
} }
.avatar { .avatar {
width: 150px; width: 100%;
height: 150px; height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, var(--grad-edge), var(--grad-center)); background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
border: 2px solid rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1);
@@ -73,6 +74,17 @@
.addPhoto { .addPhoto {
display: none; display: none;
} }
/* On mobile the avatar sits in a row next to the user info — keep it compact */
.col {
width: auto;
}
.avatar {
width: 150px;
height: 150px;
aspect-ratio: auto;
}
} }
@media (max-width: 549px) { @media (max-width: 549px) {

31
src/widgets/profile/ui/ProfileMenu.module.css
View File

@@ -38,16 +38,29 @@
color: var(--interactive, #4a6dff); color: var(--interactive, #4a6dff);
} }
/* < 1024px: menu becomes a horizontal, scrollable row above the content */ /* Mobile-only section selector — hidden on desktop. */
@media (max-width: 1023px) { .select {
.nav { display: none;
flex-direction: row; width: 100%;
flex-wrap: wrap; height: 44px;
gap: 8px; padding: 0 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--bg-deep);
color: var(--text-primary);
font-size: 15px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
} }
.item { /* < 1024px: replace the list with the select. */
padding: 8px 14px; @media (max-width: 1023px) {
font-size: 14px; .nav {
display: none;
}
.select {
display: block;
} }
} }

25
src/widgets/profile/ui/ProfileMenu.tsx
View File

@@ -1,4 +1,4 @@
import { NavLink } from 'react-router-dom' import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes' import { ROUTES } from '@shared/config/routes'
import { ProfileSummary } from './ProfileSummary' import { ProfileSummary } from './ProfileSummary'
import styles from './ProfileMenu.module.css' import styles from './ProfileMenu.module.css'
@@ -6,18 +6,37 @@ import styles from './ProfileMenu.module.css'
const ITEMS = [ const ITEMS = [
{ to: ROUTES.PROFILE_DETAILS, label: 'Данные профиля' }, { to: ROUTES.PROFILE_DETAILS, label: 'Данные профиля' },
{ to: ROUTES.PROFILE_SECURITY, label: 'Безопасность' }, { to: ROUTES.PROFILE_SECURITY, label: 'Безопасность' },
{ to: ROUTES.PROFILE_MNEMONIC, label: 'Мнемоническая фраза' },
{ to: ROUTES.PROFILE_TRANSACTIONS, label: 'Транзакции' }, { to: ROUTES.PROFILE_TRANSACTIONS, label: 'Транзакции' },
{ to: ROUTES.PROFILE_MNEMONIC, label: 'Мнемоническая фраза' },
] ]
// Left column of the profile dashboard: pinned profile summary on top, then // Left column of the profile dashboard: pinned profile summary on top, then
// the navigable list of sections. Active item is highlighted via NavLink. // the section navigation. On desktop the navigation is a vertical list; on
// mobile it collapses into a <select> so only the chosen section is shown.
export function ProfileMenu() { export function ProfileMenu() {
const navigate = useNavigate()
const { pathname } = useLocation()
const current = ITEMS.find((i) => pathname.startsWith(i.to))?.to ?? ITEMS[0].to
return ( return (
<aside className={styles.menu}> <aside className={styles.menu}>
<div className={styles.summary}> <div className={styles.summary}>
<ProfileSummary /> <ProfileSummary />
</div> </div>
<select
className={styles.select}
value={current}
onChange={(e) => navigate(e.target.value)}
aria-label="Раздел профиля"
>
{ITEMS.map(({ to, label }) => (
<option key={to} value={to}>
{label}
</option>
))}
</select>
<nav className={styles.nav}> <nav className={styles.nav}>
{ITEMS.map(({ to, label }) => ( {ITEMS.map(({ to, label }) => (
<NavLink <NavLink

12
src/widgets/profile/ui/SecuritySection.tsx
View File

@@ -1,5 +1,5 @@
import { useWalletAddresses } from '@features/wallet' import { useWalletAddresses } from '@features/wallet'
import { Button, FormField } from '@shared/ui' import { FormField } from '@shared/ui'
import { ProfileSection } from './ProfileSection' import { ProfileSection } from './ProfileSection'
import styles from './fieldsGrid.module.css' import styles from './fieldsGrid.module.css'
@@ -7,15 +7,7 @@ export function SecuritySection() {
const { data: walletAddresses } = useWalletAddresses() const { data: walletAddresses } = useWalletAddresses()
return ( return (
<ProfileSection <ProfileSection title="Безопасность">
title="Безопасность"
actions={
<>
<Button variant="danger">⚠️ Посмотреть приватный ключ</Button>
<Button variant="primary">СОХРАНИТЬ</Button>
</>
}
>
<div className={styles.grid1}> <div className={styles.grid1}>
{walletAddresses?.map(({ chain, address }) => ( {walletAddresses?.map(({ chain, address }) => (
<FormField <FormField

6
src/widgets/seed-phrase/ui/SeedPhraseWidget.tsx
View File

@@ -6,9 +6,11 @@ import styles from './SeedPhraseWidget.module.css'
interface Props { interface Props {
words: string[] words: string[]
/** Show the "Перейти в профиль" link. Hidden when embedded inside the profile. */
showProfileLink?: boolean
} }
export function SeedPhraseWidget({ words }: Props) { export function SeedPhraseWidget({ words, showProfileLink = true }: Props) {
const { hidden, countdown, copied, handleHide, handleCopy } = useSeedPhrase(words) const { hidden, countdown, copied, handleHide, handleCopy } = useSeedPhrase(words)
return ( return (
@@ -54,11 +56,13 @@ export function SeedPhraseWidget({ words }: Props) {
</p> </p>
</div> </div>
{showProfileLink && (
<div className={styles.profileLinkRow}> <div className={styles.profileLinkRow}>
<Link to={ROUTES.PROFILE} className={styles.profileLink}> <Link to={ROUTES.PROFILE} className={styles.profileLink}>
Перейти в профиль Перейти в профиль
</Link> </Link>
</div> </div>
)}
</div> </div>
) )
} }