add pull page

src/widgets/pools/ui/PoolsWidget.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { Notification } from '@shared/ui'
+import { PoolsTable } from './PoolsTable'
+import { LpDepositCard } from './LpDepositCard'
+import { LpPositionsPanel } from './LpPositionsPanel'
+import { MOCK_POOLS, MOCK_POSITIONS, MOCK_QUOTE } from '../model/meta'
+import styles from './PoolsWidget.module.css'
+
+type Toast = { status: 'success' | 'error' | 'info'; message: string } | null
+
+export function PoolsWidget() {
+  const [selected, setSelected] = useState<string | null>(MOCK_POOLS[0]?.poolAddress ?? null)
+  const [amount0, setAmount0] = useState('')
+  const [amount1, setAmount1] = useState('')
+  const [priceLower, setPriceLower] = useState('')
+  const [priceUpper, setPriceUpper] = useState('')
+  const [slippage, setSlippage] = useState('1')
+  const [useNativeEth, setUseNativeEth] = useState(true)
+  const [toast, setToast] = useState<Toast>(null)
+
+  const pool = MOCK_POOLS.find((p) => p.poolAddress === selected) ?? null
+
+  // Заглушки: логика endpoint появится позже, пока только тосты.
+  function handleSubmit() {
+    setToast({ status: 'info', message: 'Депозит в пул будет доступен после подключения API' })
+  }
+
+  function handleRemove() {
+    setToast({ status: 'info', message: 'Вывод позиции будет доступен после подключения API' })
+  }
+
+  return (
+    <div className={styles.widget}>
+      <PoolsTable pools={MOCK_POOLS} selected={selected} onSelect={setSelected} />
+
+      <div className={styles.grid}>
+        <LpDepositCard
+          pool={pool}
+          quote={MOCK_QUOTE}
+          amount0={amount0}
+          amount1={amount1}
+          priceLower={priceLower}
+          priceUpper={priceUpper}
+          slippage={slippage}
+          useNativeEth={useNativeEth}
+          onAmount0Change={setAmount0}
+          onAmount1Change={setAmount1}
+          onPriceLowerChange={setPriceLower}
+          onPriceUpperChange={setPriceUpper}
+          onSlippageChange={setSlippage}
+          onUseNativeEthChange={setUseNativeEth}
+          onSubmit={handleSubmit}
+        />
+        <LpPositionsPanel positions={MOCK_POSITIONS} onRemove={handleRemove} removePending={false} />
+      </div>
+
+      {toast && <Notification status={toast.status} message={toast.message} onClose={() => setToast(null)} />}
+    </div>
+  )
+}