profile refactor

src/widgets/bridge-form/ui/BridgeConfirmModal.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { JumperQuote } from '@features/wallet'
 import { fromBaseUnits } from '@shared/lib/utils/baseUnits'
 import { truncateDecimals } from '@shared/lib/utils/truncateDecimals'
@@ -17,6 +18,18 @@ export function BridgeConfirmModal({ quote, fromAmountHuman, insufficientBalance
   const toSymbol = action.toToken.symbol
   const fromSymbol = action.fromToken.symbol
 
+  const [closing, setClosing] = useState(false)
+
+  // Trigger the exit animation; the real close fires on animation end so the ×
+  // and backdrop paths play the same closing transition.
+  function requestClose() {
+    setClosing(true)
+  }
+
+  function handleAnimationEnd() {
+    if (closing) onClose()
+  }
+
   const toAmount = truncateDecimals(fromBaseUnits(estimate.toAmount, action.toToken.decimals), 8)
   const toMin = truncateDecimals(fromBaseUnits(estimate.toAmountMin, action.toToken.decimals), 8)
 
@@ -25,11 +38,15 @@ export function BridgeConfirmModal({ quote, fromAmountHuman, insufficientBalance
     .toFixed(2)
 
   return (
-    <div className={styles.overlay} onClick={onClose}>
-      <div className={styles.card} onClick={e => e.stopPropagation()}>
+    <div className={`${styles.overlay} ${closing ? styles.closing : ''}`} onClick={requestClose}>
+      <div
+        className={`${styles.card} ${closing ? styles.closing : ''}`}
+        onClick={e => e.stopPropagation()}
+        onAnimationEnd={handleAnimationEnd}
+      >
         <div className={styles.header}>
           <span className={styles.title}>Подтвердить бридж</span>
-          <button className={styles.closeBtn} onClick={onClose}>×</button>
+          <button className={styles.closeBtn} onClick={requestClose}>×</button>
         </div>
 
         <div className={styles.flow}>