add staking page

src/widgets/pools/ui/LpDepositCard.tsx

@@ -1,11 +1,14 @@
 import { PrimaryButton, TokenIcon } from '@shared/ui'
 import { truncateDecimals } from '@shared/lib/utils/truncateDecimals'
-import { coinIcon, formatFeeTier, type Pool, type LpQuote } from '../model/meta'
+import type { Pool, LpQuote } from '@features/pools'
+import { coinIcon, formatFeeTier } from '../model/meta'
 import styles from './LpDepositCard.module.css'
 
 interface Props {
   pool: Pool | null
-  quote: LpQuote
+  quote: LpQuote | undefined
+  quoteFetching?: boolean
+  pending?: boolean
   amount0: string
   amount1: string
   priceLower: string
@@ -87,6 +90,8 @@ function PriceInput({
 export function LpDepositCard({
   pool,
   quote,
+  quoteFetching,
+  pending,
   amount0,
   amount1,
   priceLower,
@@ -120,9 +125,15 @@ export function LpDepositCard({
     )
   }
 
-  const insufficient = quote.balance.sufficient === false
-  const apr = quote.aprPercent != null ? `${quote.aprPercent}%` : DASH
-  const feeUsd = quote.appFeeTotalUsd != null ? `≈ $${quote.appFeeTotalUsd.toFixed(2)}` : DASH
+  const balance = quote?.balance
+  // sufficient ноги может быть null (не проверялось / покрыто нативным ETH) — это не «не хватает».
+  const insufficient = balance?.sufficient === false
+  const apr = quote?.aprPercent != null ? `${quote.aprPercent}%` : DASH
+  const feeUsd = quote?.appFeeTotalUsd != null ? `≈ $${quote.appFeeTotalUsd.toFixed(2)}` : DASH
+  const amount0Out = quote ? truncateDecimals(quote.amount0DesiredHuman, 8) : DASH
+  const amount1Out = quote ? truncateDecimals(quote.amount1DesiredHuman, 8) : DASH
+  const shortLeg = balance && balance.token1.sufficient === false ? balance.token1 : balance?.token0
+  const canSubmit = !!quote && !insufficient && !pending
 
   return (
     <div className={styles.card}>
@@ -174,14 +185,14 @@ export function LpDepositCard({
         </label>
       </div>
 
-      <div className={styles.quote}>
+      <div className={styles.quote} data-loading={quoteFetching ? 'true' : undefined}>
         <div className={styles.quoteRow}>
           <span className={styles.quoteLabel}>Взнос {pool.symbol0}</span>
-          <span className={styles.quoteValue}>{truncateDecimals(quote.amount0DesiredHuman, 8)}</span>
+          <span className={styles.quoteValue}>{amount0Out}</span>
         </div>
         <div className={styles.quoteRow}>
           <span className={styles.quoteLabel}>Взнос {pool.symbol1}</span>
-          <span className={styles.quoteValue}>{truncateDecimals(quote.amount1DesiredHuman, 8)}</span>
+          <span className={styles.quoteValue}>{amount1Out}</span>
         </div>
         <div className={styles.quoteRow}>
           <span className={styles.quoteLabel}>Комиссия сервиса (0.7%)</span>
@@ -195,12 +206,17 @@ export function LpDepositCard({
 
       {insufficient && (
         <p className={styles.warning}>
-          Недостаточно средств: не хватает {quote.balance.token1.symbol}. Пополните баланс.
+          Недостаточно средств{shortLeg ? `: не хватает ${shortLeg.symbol}` : ''}. Пополните баланс.
         </p>
       )}
 
       <div className={styles.submit}>
-        <PrimaryButton label="Внести в пул" type="button" onClick={onSubmit} disabled={insufficient} />
+        <PrimaryButton
+          label={pending ? 'Отправка…' : 'Внести в пул'}
+          type="button"
+          onClick={onSubmit}
+          disabled={!canSubmit}
+        />
       </div>
     </div>
   )