diff --git a/src/features/pools/model/usePools.ts b/src/features/pools/model/usePools.ts index f7380b0..c18a3b0 100644 --- a/src/features/pools/model/usePools.ts +++ b/src/features/pools/model/usePools.ts @@ -60,10 +60,13 @@ export function useAddLp() { const qc = useQueryClient() return useMutation({ mutationFn: (input: LpDepositInput) => addLp(input), - // Депозит отражается в сети не мгновенно: баланс обновляем сразу, позиции — с задержкой, - // иначе ранний рефетч «мигнул» бы (позиции ещё нет). Паттерн из useStake. + // Депозит отражается в сети не мгновенно. Первый рефетч делаем не сразу, а спустя 1.5 с, + // и повторяем для позиций через 6 с — позиция может ещё не появиться на чейне. Паттерн из useStake. onSettled: () => { - qc.invalidateQueries({ queryKey: ['wallet', 'balance', 'ETH'] }) + setTimeout(() => { + qc.invalidateQueries({ queryKey: ['wallet', 'balance', 'ETH'] }) + qc.invalidateQueries({ queryKey: ['pools', 'positions'] }) + }, 1500) setTimeout(() => { qc.invalidateQueries({ queryKey: ['pools', 'positions'] }) qc.invalidateQueries({ queryKey: ['wallet', 'balance', 'ETH'] }) diff --git a/src/widgets/pools/ui/LpDepositCard.module.css b/src/widgets/pools/ui/LpDepositCard.module.css index b3dc394..a725ad6 100644 --- a/src/widgets/pools/ui/LpDepositCard.module.css +++ b/src/widgets/pools/ui/LpDepositCard.module.css @@ -87,13 +87,12 @@ .range { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; } -.priceField, -.slippage { +.priceField { display: flex; flex-direction: column; gap: 6px; @@ -125,66 +124,6 @@ color: rgba(255, 255, 255, 0.3); } -.options { - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 20px; -} - -.slippage { - width: 160px; - flex-shrink: 0; -} - -/* Выбор способа оплаты: ETH / WETH — взаимоисключающие «таблетки». */ -.payment { - display: flex; - flex-direction: column; - gap: 6px; -} - -.segment { - display: flex; - gap: 8px; -} - -.segItem, -.segActive { - padding: 7px 16px; - border-radius: 999px; - border: 1px solid var(--glass-border); - background: transparent; - color: var(--text-secondary); - font-family: var(--font-sans); - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s; -} - -/* Невыбранный вариант «гаснет». */ -.segItem { - opacity: 0.45; -} - -.segItem:hover { - opacity: 0.75; - border-color: rgba(255, 255, 255, 0.18); -} - -.segActive { - background: rgba(74, 109, 255, 0.15); - border-color: var(--interactive); - color: var(--text-primary); -} - -.segItem:focus-visible, -.segActive:focus-visible { - outline: 2px solid var(--highlight); - outline-offset: 2px; -} - .quote { background: var(--glass-bg); border: 1px solid var(--glass-border); @@ -218,6 +157,11 @@ text-align: right; } +.feeValue { + font-size: 20px; + font-weight: 700; +} + .success { color: var(--success); } @@ -267,12 +211,7 @@ padding: 16px; } - .options { - flex-direction: column; - align-items: stretch; - } - - .slippage { - width: 100%; + .range { + grid-template-columns: 1fr; } } diff --git a/src/widgets/pools/ui/LpDepositCard.tsx b/src/widgets/pools/ui/LpDepositCard.tsx index 5decd65..ed47608 100644 --- a/src/widgets/pools/ui/LpDepositCard.tsx +++ b/src/widgets/pools/ui/LpDepositCard.tsx @@ -14,13 +14,11 @@ interface Props { priceLower: string priceUpper: string slippage: string - useNativeEth: boolean onAmount0Change: (v: string) => void onAmount1Change: (v: string) => void onPriceLowerChange: (v: string) => void onPriceUpperChange: (v: string) => void onSlippageChange: (v: string) => void - onUseNativeEthChange: (v: boolean) => void onSubmit: () => void } @@ -94,13 +92,11 @@ export function LpDepositCard({ priceLower, priceUpper, slippage, - useNativeEth, onAmount0Change, onAmount1Change, onPriceLowerChange, onPriceUpperChange, onSlippageChange, - onUseNativeEthChange, onSubmit, }: Props) { if (!pool) { @@ -145,10 +141,7 @@ export function LpDepositCard({