add staking page

src/widgets/pools/ui/PoolsTable.tsx

@@ -1,11 +1,14 @@
-import { TokenIcon } from '@shared/ui'
-import { coinIcon, formatFeeTier, type Pool } from '../model/meta'
+import { Spinner, TokenIcon } from '@shared/ui'
+import type { Pool } from '@features/pools'
+import { coinIcon, formatFeeTier } from '../model/meta'
 import styles from './PoolsTable.module.css'
 
 interface Props {
   pools: Pool[]
   selected: string | null
   onSelect: (poolAddress: string) => void
+  loading?: boolean
+  error?: string | null
 }
 
 const DASH = '—'
@@ -35,13 +38,20 @@ function PairIcons({ symbol0, symbol1 }: { symbol0: string; symbol1: string }) {
   )
 }
 
-export function PoolsTable({ pools, selected, onSelect }: Props) {
+export function PoolsTable({ pools, selected, onSelect, loading, error }: Props) {
   return (
     <div className={styles.card}>
       <div className={styles.head}>
         <span className={styles.title}>Курируемые пулы</span>
       </div>
 
+      {loading && <Spinner label="Загрузка пулов" />}
+      {!loading && error && <div className={styles.message}>{error}</div>}
+      {!loading && !error && pools.length === 0 && (
+        <div className={styles.message}>Курируемых пулов пока нет.</div>
+      )}
+
+      {!loading && !error && pools.length > 0 && (
       <div className={styles.scroll}>
         <table className={styles.table}>
           <thead>
@@ -94,6 +104,7 @@ export function PoolsTable({ pools, selected, onSelect }: Props) {
           </tbody>
         </table>
       </div>
+      )}
     </div>
   )
 }