f
This commit is contained in:
@@ -113,6 +113,18 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 70, 70, 0.1);
|
||||
border: 1px solid var(--error);
|
||||
color: var(--error);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.confirmBtn {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
|
||||
@@ -6,12 +6,13 @@ import styles from './BridgeConfirmModal.module.css'
|
||||
interface Props {
|
||||
quote: JumperQuote
|
||||
fromAmountHuman: string
|
||||
insufficientBalance?: boolean
|
||||
isExecuting?: boolean
|
||||
onConfirm: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function BridgeConfirmModal({ quote, fromAmountHuman, isExecuting, onConfirm, onClose }: Props) {
|
||||
export function BridgeConfirmModal({ quote, fromAmountHuman, insufficientBalance, isExecuting, onConfirm, onClose }: Props) {
|
||||
const { action, estimate, toolDetails } = quote
|
||||
const toSymbol = action.toToken.symbol
|
||||
const fromSymbol = action.fromToken.symbol
|
||||
@@ -57,6 +58,12 @@ export function BridgeConfirmModal({ quote, fromAmountHuman, isExecuting, onConf
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{insufficientBalance && (
|
||||
<p className={styles.warning}>
|
||||
Введённое количество превышает баланс кошелька — бридж будет отклонён.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className={styles.confirmBtn} onClick={onConfirm} disabled={isExecuting}>
|
||||
{isExecuting ? 'Обработка...' : 'Подтвердить бридж'}
|
||||
</button>
|
||||
|
||||
@@ -108,6 +108,8 @@ export function BridgeForm() {
|
||||
|
||||
const parsedAmount = parseFloat(fromAmount)
|
||||
|
||||
const insufficientBalance = (parsedAmount || 0) > fromToken.balance
|
||||
|
||||
const fromJumper = jumperData?.[CHAIN_ID_BY_NET[fromNetwork]]?.find(t => t.symbol === fromToken.symbol)
|
||||
const toJumper = jumperData?.[CHAIN_ID_BY_NET[toNetwork]]?.find(t => t.symbol === toToken.symbol)
|
||||
const fromAddress = addresses?.find(a => a.chain === fromNetwork)?.address
|
||||
@@ -246,6 +248,7 @@ export function BridgeForm() {
|
||||
<BridgeConfirmModal
|
||||
quote={quote}
|
||||
fromAmountHuman={fromAmount}
|
||||
insufficientBalance={insufficientBalance}
|
||||
isExecuting={isExecuting}
|
||||
onConfirm={handleExecute}
|
||||
onClose={() => setQuote(null)}
|
||||
|
||||
@@ -117,6 +117,18 @@
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 70, 70, 0.1);
|
||||
border: 1px solid var(--error);
|
||||
color: var(--error);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.confirmBtn {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
|
||||
@@ -14,11 +14,12 @@ interface SwapData {
|
||||
|
||||
interface Props {
|
||||
data: SwapData
|
||||
insufficientBalance?: boolean
|
||||
onConfirm: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function SwapConfirmModal({ data, onConfirm, onClose }: Props) {
|
||||
export function SwapConfirmModal({ data, insufficientBalance, onConfirm, onClose }: Props) {
|
||||
const { details, fees } = data
|
||||
const { currencyIn, currencyOut, totalImpact, rate } = details
|
||||
|
||||
@@ -72,6 +73,12 @@ export function SwapConfirmModal({ data, onConfirm, onClose }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{insufficientBalance && (
|
||||
<p className={styles.warning}>
|
||||
Введённое количество превышает баланс кошелька — своп будет отклонён.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className={styles.confirmBtn} onClick={onConfirm}>
|
||||
Подтвердить
|
||||
</button>
|
||||
|
||||
@@ -94,6 +94,8 @@ export function SwapForm() {
|
||||
|
||||
const isProcessing = isSigning || isExecutingTrxSwap
|
||||
|
||||
const insufficientBalance = (parseFloat(fromAmount) || 0) > fromToken.balance
|
||||
|
||||
// ── Display values ───────────────────────────────────────────────────────
|
||||
const displayToAmount = isTrxNetwork
|
||||
? (trxQuoteData?.expectedOutFormatted ?? '0')
|
||||
@@ -162,6 +164,7 @@ export function SwapForm() {
|
||||
{modalData && (
|
||||
<SwapConfirmModal
|
||||
data={modalData}
|
||||
insufficientBalance={insufficientBalance}
|
||||
onClose={() => setModalData(null)}
|
||||
onConfirm={() => {
|
||||
const txData = modalData.steps[0]?.items[0]?.data
|
||||
@@ -192,6 +195,7 @@ export function SwapForm() {
|
||||
fromSymbol={fromToken.symbol}
|
||||
toSymbol={toToken.symbol}
|
||||
amountHuman={fromAmount}
|
||||
insufficientBalance={insufficientBalance}
|
||||
onClose={() => setTrxModalQuote(null)}
|
||||
onConfirm={() => {
|
||||
setErrorMessage(null)
|
||||
|
||||
@@ -113,6 +113,18 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 70, 70, 0.1);
|
||||
border: 1px solid var(--error);
|
||||
color: var(--error);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.confirmBtn {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
|
||||
@@ -6,11 +6,12 @@ interface Props {
|
||||
fromSymbol: string
|
||||
toSymbol: string
|
||||
amountHuman: string
|
||||
insufficientBalance?: boolean
|
||||
onConfirm: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, onConfirm, onClose }: Props) {
|
||||
export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, insufficientBalance, onConfirm, onClose }: Props) {
|
||||
const { expectedOutFormatted, minOutFormatted, fees } = quote
|
||||
|
||||
return (
|
||||
@@ -45,6 +46,12 @@ export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, onCo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{insufficientBalance && (
|
||||
<p className={styles.warning}>
|
||||
Введённое количество превышает баланс кошелька — своп будет отклонён.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className={styles.confirmBtn} onClick={onConfirm}>
|
||||
Подтвердить
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user