69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { Link } from 'react-router-dom'
|
||
import { Button } from '@shared/ui'
|
||
import { ROUTES } from '@shared/config/routes'
|
||
import { useSeedPhrase } from '../model/useSeedPhrase'
|
||
import styles from './SeedPhraseWidget.module.css'
|
||
|
||
interface Props {
|
||
words: string[]
|
||
/** Show the "Перейти в профиль" link. Hidden when embedded inside the profile. */
|
||
showProfileLink?: boolean
|
||
}
|
||
|
||
export function SeedPhraseWidget({ words, showProfileLink = true }: Props) {
|
||
const { hidden, countdown, copied, handleHide, handleCopy } = useSeedPhrase(words)
|
||
|
||
return (
|
||
<div className={styles.content}>
|
||
<div className={styles.titleRow}>
|
||
<h1 className={styles.title}>СИД ФРАЗА</h1>
|
||
<div className={styles.titleButtons}>
|
||
<div className={styles.btnFixed}>
|
||
<Button variant="outline" onClick={handleHide}>
|
||
{hidden ? 'ПОКАЗАТЬ' : 'СКРЫТЬ'}
|
||
</Button>
|
||
</div>
|
||
<div className={styles.btnFixed}>
|
||
<Button variant="outline" onClick={handleCopy}>
|
||
{copied ? 'СКОПИРОВАНО' : 'КОПИРОВАТЬ'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{!hidden && (
|
||
<div className={styles.subtitle}>
|
||
АВТОМАТИЧЕСКОЕ СКРЫТИЕ ЧЕРЕЗ{' '}
|
||
<span className={styles.countdown}>{countdown}</span>С
|
||
</div>
|
||
)}
|
||
|
||
<div className={styles.seedGrid}>
|
||
{words.map((word, i) => (
|
||
<div key={i} className={styles.seedCard}>
|
||
<span className={styles.seedNum}>{i + 1}.</span>
|
||
<span className={`${styles.seedWord} ${hidden ? styles.seedWordHidden : ''}`}>
|
||
{hidden ? '•••••' : word}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className={styles.warning}>
|
||
<span className={styles.warningIcon}>⚠️</span>
|
||
<p className={styles.warningText}>
|
||
Никогда не передавайте сид-фразу третьим лицам. Тот, кто знает фразу — владеет кошельком.
|
||
</p>
|
||
</div>
|
||
|
||
{showProfileLink && (
|
||
<div className={styles.profileLinkRow}>
|
||
<Link to={ROUTES.PROFILE} className={styles.profileLink}>
|
||
Перейти в профиль
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|