profile refactor
This commit is contained in:
161
dist/assets/index-0SPPJZ-S.js
vendored
161
dist/assets/index-0SPPJZ-S.js
vendored
File diff suppressed because one or more lines are too long
1
dist/assets/index-BWwkWEN0.css
vendored
Normal file
1
dist/assets/index-BWwkWEN0.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/index-CsmeBXqB.css
vendored
1
dist/assets/index-CsmeBXqB.css
vendored
File diff suppressed because one or more lines are too long
161
dist/assets/index-D69DAe6P.js
vendored
Normal file
161
dist/assets/index-D69DAe6P.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
@@ -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-0SPPJZ-S.js"></script>
|
<script type="module" crossorigin src="/assets/index-D69DAe6P.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-CsmeBXqB.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-BWwkWEN0.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import styles from './ConverterPage.module.css'
|
|||||||
// Пока покупка валюты для физлиц недоступна — показываем им заглушку вместо
|
// Пока покупка валюты для физлиц недоступна — показываем им заглушку вместо
|
||||||
// конвертера. Для юрлиц всё работает как прежде.
|
// конвертера. Для юрлиц всё работает как прежде.
|
||||||
// Чтобы вернуть конвертер физлицам, поставьте PURCHASE_ENABLED = true.
|
// Чтобы вернуть конвертер физлицам, поставьте PURCHASE_ENABLED = true.
|
||||||
const PURCHASE_ENABLED = false
|
const PURCHASE_ENABLED = true
|
||||||
|
|
||||||
export function ConverterPage() {
|
export function ConverterPage() {
|
||||||
const { data, isLoading } = useMe()
|
const { data, isLoading } = useMe()
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
import styles from './SwapConfirmModal.module.css'
|
import styles from './SwapConfirmModal.module.css'
|
||||||
|
|
||||||
interface SwapData {
|
interface SwapData {
|
||||||
@@ -24,17 +24,28 @@ export function SwapConfirmModal({ data, insufficientBalance, onConfirm, onClose
|
|||||||
const { details, fees } = data
|
const { details, fees } = data
|
||||||
const { currencyIn, currencyOut, totalImpact, rate } = details
|
const { currencyIn, currencyOut, totalImpact, rate } = details
|
||||||
const [closing, setClosing] = useState(false)
|
const [closing, setClosing] = useState(false)
|
||||||
|
// Which action to run once the exit animation finishes.
|
||||||
|
const pendingAction = useRef<'close' | 'confirm'>('close')
|
||||||
|
|
||||||
const impactPercent = parseFloat(totalImpact.percent)
|
const impactPercent = parseFloat(totalImpact.percent)
|
||||||
const rateFormatted = parseFloat(rate).toFixed(4)
|
const rateFormatted = parseFloat(rate).toFixed(4)
|
||||||
|
|
||||||
// Play the exit animation first, then actually unmount once it ends.
|
// Trigger the exit animation; the real action fires on animation end so every
|
||||||
|
// close path (×, backdrop, confirm) plays the same closing transition.
|
||||||
function requestClose() {
|
function requestClose() {
|
||||||
|
pendingAction.current = 'close'
|
||||||
|
setClosing(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestConfirm() {
|
||||||
|
pendingAction.current = 'confirm'
|
||||||
setClosing(true)
|
setClosing(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAnimationEnd() {
|
function handleAnimationEnd() {
|
||||||
if (closing) onClose()
|
if (!closing) return
|
||||||
|
if (pendingAction.current === 'confirm') onConfirm()
|
||||||
|
else onClose()
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -94,7 +105,7 @@ export function SwapConfirmModal({ data, insufficientBalance, onConfirm, onClose
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button className={styles.confirmBtn} onClick={onConfirm}>
|
<button className={styles.confirmBtn} onClick={requestConfirm}>
|
||||||
Подтвердить
|
Подтвердить
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
import type { TrxSwapQuoteData } from '@features/wallet'
|
import type { TrxSwapQuoteData } from '@features/wallet'
|
||||||
import styles from './TrxConfirmModal.module.css'
|
import styles from './TrxConfirmModal.module.css'
|
||||||
|
|
||||||
@@ -15,14 +15,25 @@ interface Props {
|
|||||||
export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, insufficientBalance, onConfirm, onClose }: Props) {
|
export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, insufficientBalance, onConfirm, onClose }: Props) {
|
||||||
const { expectedOutFormatted, minOutFormatted, fees } = quote
|
const { expectedOutFormatted, minOutFormatted, fees } = quote
|
||||||
const [closing, setClosing] = useState(false)
|
const [closing, setClosing] = useState(false)
|
||||||
|
// Which action to run once the exit animation finishes.
|
||||||
|
const pendingAction = useRef<'close' | 'confirm'>('close')
|
||||||
|
|
||||||
// Play the exit animation first, then actually unmount once it ends.
|
// Trigger the exit animation; the real action fires on animation end so every
|
||||||
|
// close path (×, backdrop, confirm) plays the same closing transition.
|
||||||
function requestClose() {
|
function requestClose() {
|
||||||
|
pendingAction.current = 'close'
|
||||||
|
setClosing(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestConfirm() {
|
||||||
|
pendingAction.current = 'confirm'
|
||||||
setClosing(true)
|
setClosing(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleAnimationEnd() {
|
function handleAnimationEnd() {
|
||||||
if (closing) onClose()
|
if (!closing) return
|
||||||
|
if (pendingAction.current === 'confirm') onConfirm()
|
||||||
|
else onClose()
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -67,7 +78,7 @@ export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, insu
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button className={styles.confirmBtn} onClick={onConfirm}>
|
<button className={styles.confirmBtn} onClick={requestConfirm}>
|
||||||
Подтвердить
|
Подтвердить
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user