@sodax/dapp-kit 1.5.7-beta → 2.0.0-rc.2

package/src/hooks/dex/useLiquidityAmounts.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { ClService, type PoolData } from '@sodax/sdk';
 
-interface UseLiquidityAmountsResult {
+export type UseLiquidityAmountsResult = {
   liquidityToken0Amount: string;
   liquidityToken1Amount: string;
   lastEditedToken: 'token0' | 'token1' | null;
@@ -9,34 +9,11 @@ interface UseLiquidityAmountsResult {
   setLiquidityToken1Amount: (value: string) => void;
   handleToken0AmountChange: (value: string) => void;
   handleToken1AmountChange: (value: string) => void;
-}
+};
 
 /**
- * Hook for calculating liquidity amounts based on price range.
- *
- * This hook manages the state and calculations for liquidity token amounts.
- * It automatically calculates the corresponding token amount when one is changed,
- * based on the current price range and pool data.
- *
- * @param {string} minPrice - Minimum price for the liquidity range
- * @param {string} maxPrice - Maximum price for the liquidity range
- * @param {PoolData | null} poolData - The pool data containing token information
- * @returns {UseLiquidityAmountsResult} Object containing amounts, state, and handlers
- *
- * @example
- * ```typescript
- * const {
- *   liquidityToken0Amount,
- *   liquidityToken1Amount,
- *   handleToken0AmountChange,
- *   handleToken1AmountChange,
- * } = useLiquidityAmounts(minPrice, maxPrice, poolData);
- *
- * <Input
- *   value={liquidityToken0Amount}
- *   onChange={(e) => handleToken0AmountChange(e.target.value)}
- * />
- * ```
+ * Hook for calculating concentrated-liquidity amounts based on the price range. Pure state +
+ * math; no SDK calls beyond the static {@link ClService} helpers.
  */
 export function useLiquidityAmounts(
   minPrice: string,
@@ -47,68 +24,38 @@ export function useLiquidityAmounts(
   const [liquidityToken1Amount, setLiquidityToken1Amount] = useState<string>('');
   const [lastEditedToken, setLastEditedToken] = useState<'token0' | 'token1' | null>(null);
 
-  // Memoize parsed price values to avoid repeated parsing
   const { minPriceNum, maxPriceNum, isValidPriceRange } = useMemo(() => {
     const parsedMin = Number.parseFloat(minPrice);
     const parsedMax = Number.parseFloat(maxPrice);
     const isValid = parsedMin > 0 && parsedMax > 0 && parsedMin < parsedMax;
-
-    return {
-      minPriceNum: parsedMin,
-      maxPriceNum: parsedMax,
-      isValidPriceRange: isValid,
-    };
+    return { minPriceNum: parsedMin, maxPriceNum: parsedMax, isValidPriceRange: isValid };
   }, [minPrice, maxPrice]);
 
-  // Memoize tick calculations - these only depend on prices and pool data
   const { tickLower, tickUpper, currentTick } = useMemo(() => {
     if (!poolData || !isValidPriceRange) {
-      return {
-        tickLower: null,
-        tickUpper: null,
-        currentTick: null,
-      };
+      return { tickLower: null, tickUpper: null, currentTick: null };
     }
-
     try {
       const lower = ClService.priceToTick(minPriceNum, poolData.token0, poolData.token1, poolData.tickSpacing);
       const upper = ClService.priceToTick(maxPriceNum, poolData.token0, poolData.token1, poolData.tickSpacing);
-
-      return {
-        tickLower: lower,
-        tickUpper: upper,
-        currentTick: BigInt(poolData.currentTick),
-      };
+      return { tickLower: lower, tickUpper: upper, currentTick: BigInt(poolData.currentTick) };
     } catch (err) {
       console.error('Failed to calculate ticks:', err);
-      return {
-        tickLower: null,
-        tickUpper: null,
-        currentTick: null,
-      };
+      return { tickLower: null, tickUpper: null, currentTick: null };
     }
   }, [minPriceNum, maxPriceNum, poolData, isValidPriceRange]);
 
-  // Auto-calculate token1 amount when token0 amount changes
   const handleToken0AmountChange = useCallback(
     (value: string): void => {
       setLiquidityToken0Amount(value);
       setLastEditedToken('token0');
 
-      // Only calculate if we have all required values
-      if (!value || !poolData || !tickLower || !tickUpper || !currentTick) {
-        return;
-      }
-
+      if (!value || !poolData || !tickLower || !tickUpper || !currentTick) return;
       const amount0 = Number.parseFloat(value);
-
-      if (amount0 <= 0 || !isValidPriceRange) {
-        return;
-      }
+      if (amount0 <= 0 || !isValidPriceRange) return;
 
       try {
         const amount0BigInt = BigInt(Math.floor(amount0 * 10 ** poolData.token0.decimals));
-
         const amount1BigInt = ClService.calculateAmount1FromAmount0(
           amount0BigInt,
           tickLower,
@@ -116,7 +63,6 @@ export function useLiquidityAmounts(
           currentTick,
           poolData.sqrtPriceX96,
         );
-
         const amount1 = Number(amount1BigInt) / 10 ** poolData.token1.decimals;
         setLiquidityToken1Amount(amount1.toFixed(6));
       } catch (err) {
@@ -126,26 +72,17 @@ export function useLiquidityAmounts(
     [poolData, tickLower, tickUpper, currentTick, isValidPriceRange],
   );
 
-  // Auto-calculate token0 amount when token1 amount changes
   const handleToken1AmountChange = useCallback(
     (value: string): void => {
       setLiquidityToken1Amount(value);
       setLastEditedToken('token1');
 
-      // Only calculate if we have all required values
-      if (!value || !poolData || !tickLower || !tickUpper || !currentTick) {
-        return;
-      }
-
+      if (!value || !poolData || !tickLower || !tickUpper || !currentTick) return;
       const amount1 = Number.parseFloat(value);
-
-      if (amount1 <= 0 || !isValidPriceRange) {
-        return;
-      }
+      if (amount1 <= 0 || !isValidPriceRange) return;
 
       try {
         const amount1BigInt = BigInt(Math.floor(amount1 * 10 ** poolData.token1.decimals));
-
         const amount0BigInt = ClService.calculateAmount0FromAmount1(
           amount1BigInt,
           tickLower,
@@ -153,7 +90,6 @@ export function useLiquidityAmounts(
           currentTick,
           poolData.sqrtPriceX96,
         );
-
         const amount0 = Number(amount0BigInt) / 10 ** poolData.token0.decimals;
         setLiquidityToken0Amount(amount0.toFixed(6));
       } catch (err) {
@@ -163,13 +99,8 @@ export function useLiquidityAmounts(
     [poolData, tickLower, tickUpper, currentTick, isValidPriceRange],
   );
 
-  // Recalculate amounts when price range changes
   useEffect(() => {
-    if (!poolData || !tickLower || !tickUpper || !lastEditedToken || !isValidPriceRange) {
-      return;
-    }
-
-    // Recalculate based on which token was last edited
+    if (!poolData || !tickLower || !tickUpper || !lastEditedToken || !isValidPriceRange) return;
     if (lastEditedToken === 'token0' && liquidityToken0Amount) {
       handleToken0AmountChange(liquidityToken0Amount);
     } else if (lastEditedToken === 'token1' && liquidityToken1Amount) {

package/src/hooks/dex/usePoolBalances.ts

@@ -1,90 +1,68 @@
-import { type QueryObserverOptions, useQuery, type UseQueryResult } from '@tanstack/react-query';
-import type { PoolData, PoolKey, SpokeProvider } from '@sodax/sdk';
-import { useSodaxContext } from '../shared/useSodaxContext';
+import type { PoolData, PoolKey } from '@sodax/sdk';
+import type { SpokeChainKey } from '@sodax/sdk';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { erc20Abi } from 'viem';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
 
-export interface UsePoolBalancesResponse {
+export type UsePoolBalancesResponse = {
   token0Balance: bigint;
   token1Balance: bigint;
-}
+};
 
-export interface UsePoolBalancesProps {
-  poolData: PoolData | null;
-  poolKey: PoolKey | null;
-  spokeProvider: SpokeProvider | null;
-  enabled?: boolean;
-  queryOptions?: QueryObserverOptions<UsePoolBalancesResponse, Error>;
-}
+export type UsePoolBalancesParams = ReadHookParams<
+  UsePoolBalancesResponse,
+  {
+    poolData: PoolData | null;
+    poolKey: PoolKey | null;
+    spokeChainKey: SpokeChainKey | undefined;
+    userAddress: string | undefined;
+  }
+>;
 
 /**
- * React hook to query a user's token balances for a DEX pool.
- *
- * Given the pool data (with token addresses), the pool's key, and a SpokeProvider,
- * fetches the user's protocol balances for both token0 and token1 for the specified pool.
- * Queries are auto-refreshed; advanced options can be customized via `queryOptions`.
- *
- * @param {UsePoolBalancesProps} props
- *   Object containing:
- *   - `poolData`: {PoolData | null} - Pool info (must include token0 and token1 addresses). Required unless disabling.
- *   - `poolKey`: {PoolKey | null} - Unique key for the DEX pool. Required unless disabling.
- *   - `spokeProvider`: {SpokeProvider | null} - Provider instance for the chain. Required unless disabling.
- *   - `enabled`: {boolean} (optional) - Whether to enable the query. Defaults to `true` if all other arguments are provided.
- *   - `queryOptions`: {QueryObserverOptions<UsePoolBalancesResponse, Error>} (optional) - Advanced react-query options.
- *
- * @returns {UseQueryResult<UsePoolBalancesResponse, Error>}
- *   React Query result object:
- *   - `data`: `{ token0Balance: bigint, token1Balance: bigint }` if loaded, undefined otherwise.
- *   - `isLoading`, `isError`, etc. for status handling.
- *
- * @remarks
- * - Throws an error if any of `poolData`, `poolKey`, or `spokeProvider` is missing when enabled.
- * - Suitable for tracking current protocol/wallet balances for both pool tokens.
- * - The hook is designed for use within a React component tree that provides the Sodax context.
- * - Data are automatically refreshed at the provided or default polling interval (default: refetch every 10s).
- *
- * @example
- * ```typescript
- * const { data, isLoading } = usePoolBalances({ poolData, poolKey, spokeProvider });
- * if (data) {
- *   console.log('Balances:', data.token0Balance, data.token1Balance);
- * }
- * ```
+ * React hook to query the user's hub-side deposit balances for both pool tokens. Derives the hub
+ * wallet once and reads both pool-token balances in parallel via the hub `publicClient`.
  */
 export function usePoolBalances({
-  poolData,
-  poolKey,
-  spokeProvider,
-  enabled = true,
-  queryOptions = {
-    queryKey: [
-      'dex',
-      'poolBalances',
-      poolData?.poolKey,
-      spokeProvider?.chainConfig.chain.id,
-    ],
-    enabled: enabled && poolData !== null && poolKey !== null && spokeProvider !== null,
-    staleTime: 5000, // Consider data stale after 5 seconds
-    refetchInterval: 10000, // Refetch every 10 seconds
-  },
-}: UsePoolBalancesProps): UseQueryResult<UsePoolBalancesResponse, Error> {
+  params,
+  queryOptions,
+}: UsePoolBalancesParams = {}): UseQueryResult<UsePoolBalancesResponse, Error> {
   const { sodax } = useSodaxContext();
+  const poolData = params?.poolData ?? null;
+  const poolKey = params?.poolKey ?? null;
+  const spokeChainKey = params?.spokeChainKey;
+  const userAddress = params?.userAddress;
 
-  return useQuery({
-    ...queryOptions,
+  return useQuery<UsePoolBalancesResponse, Error>({
+    queryKey: ['dex', 'poolBalances', poolData?.poolId, spokeChainKey, userAddress],
     queryFn: async () => {
-      if (!poolData || !spokeProvider || !poolKey) {
-        throw new Error('Pool data, pool key, and spoke provider are required');
+      if (!poolData || !poolKey || !spokeChainKey || !userAddress) {
+        throw new Error('poolData, poolKey, spokeChainKey, and userAddress are required');
       }
 
-      // Get balances from AssetService
-      const [balance0, balance1] = await Promise.all([
-        sodax.dex.assetService.getDeposit(poolData.token0.address, spokeProvider),
-        sodax.dex.assetService.getDeposit(poolData.token1.address, spokeProvider),
+      const hubWallet = await sodax.hubProvider.getUserHubWalletAddress(userAddress, spokeChainKey);
+
+      const [token0Balance, token1Balance] = await Promise.all([
+        sodax.hubProvider.publicClient.readContract({
+          address: poolData.token0.address,
+          abi: erc20Abi,
+          functionName: 'balanceOf',
+          args: [hubWallet],
+        }),
+        sodax.hubProvider.publicClient.readContract({
+          address: poolData.token1.address,
+          abi: erc20Abi,
+          functionName: 'balanceOf',
+          args: [hubWallet],
+        }),
       ]);
 
-      return {
-        token0Balance: balance0,
-        token1Balance: balance1,
-      };
+      return { token0Balance, token1Balance };
     },
+    enabled: !!poolData && !!poolKey && !!spokeChainKey && !!userAddress,
+    staleTime: 5_000,
+    refetchInterval: 10_000,
+    ...queryOptions,
   });
 }

package/src/hooks/dex/usePoolData.ts

@@ -1,57 +1,31 @@
-import { type QueryObserverOptions, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import type { PoolData, PoolKey } from '@sodax/sdk';
-import { useSodaxContext } from '../shared/useSodaxContext';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
 
-export type UsePoolDataProps = {
-  poolKey: PoolKey | null;
-  enabled?: boolean;
-  queryOptions?: QueryObserverOptions<PoolData, Error>;
-};
+export type UsePoolDataParams = ReadHookParams<PoolData, { poolKey: PoolKey | null }>;
 
 /**
- * React hook to fetch on-chain data for a given DEX pool.
- *
- * @param {UsePoolDataProps} props - The props object:
- *   - `poolKey`: PoolKey | null — The unique identifier for the pool to fetch data for. If null, disables the query.
- *   - `enabled`: boolean (optional) — Whether the query is enabled. Defaults to enabled if a poolKey is provided, otherwise false.
- *   - `queryOptions`: QueryObserverOptions<PoolData, Error> (optional) — Additional React Query options (e.g., staleTime, refetchInterval).
- *
- * @returns {UseQueryResult<PoolData, Error>} React Query result containing pool data (`data`), loading state (`isLoading`), error (`error`), and status fields.
- *
- * @example
- * ```typescript
- * const { data: poolData, isLoading, error } = usePoolData({ poolKey });
- * if (isLoading) return <div>Loading…</div>;
- * if (error) return <div>Error!</div>;
- * if (poolData) {
- *   // poolData is available
- * }
- * ```
- *
- * @remarks
- * - Refetches pool data every 30 seconds by default, and may be configured via `queryOptions`.
- * - If `poolKey` is `null`, the query is disabled and no network request is performed.
- * - Throws an error if `poolKey` is missing when the query is enabled.
+ * React hook to fetch on-chain pool data (sqrt price, tick, fees, token info, etc.) for a given
+ * pool key. Reads via the hub `publicClient`. Disabled when `poolKey` is null.
  */
-export function usePoolData({
-  poolKey,
-  queryOptions = {
-    queryKey: ['dex', 'poolData', poolKey],
-    enabled: poolKey !== null,
-    staleTime: 10000,
-    refetchInterval: 30000,
-  },
-}: UsePoolDataProps): UseQueryResult<PoolData, Error> {
+export function usePoolData({ params, queryOptions }: UsePoolDataParams = {}): UseQueryResult<PoolData, Error> {
   const { sodax } = useSodaxContext();
+  const poolKey = params?.poolKey ?? null;
 
-  return useQuery({
-    ...queryOptions,
-    queryFn: async (): Promise<PoolData> => {
+  return useQuery<PoolData, Error>({
+    queryKey: ['dex', 'poolData', poolKey],
+    queryFn: async () => {
       if (!poolKey) {
         throw new Error('Pool key is required');
       }
-      return await sodax.dex.clService.getPoolData(poolKey, sodax.hubProvider.publicClient);
+      const result = await sodax.dex.clService.getPoolData(poolKey, sodax.hubProvider.publicClient);
+      if (!result.ok) throw result.error;
+      return result.value;
     },
     enabled: poolKey !== null,
+    staleTime: 10_000,
+    refetchInterval: 30_000,
+    ...queryOptions,
   });
 }

package/src/hooks/dex/usePools.ts

@@ -1,48 +1,21 @@
-import { type QueryObserverOptions, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import type { PoolKey } from '@sodax/sdk';
-import { useSodaxContext } from '../shared/useSodaxContext';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
 
-export type UsePoolsProps = {
-  /**
-   * Optional react-query QueryObserverOptions for customizing query behavior such as
-   * staleTime, refetchInterval, cacheTime, etc. These are merged with sensible defaults.
-   */
-  queryOptions?: QueryObserverOptions<PoolKey[], Error>;
-};
+export type UsePoolsParams = ReadHookParams<PoolKey[]>;
 
 /**
- * Loads and caches the available list of pools from the DEX service's ConcentratedLiquidityService.
- *
- * By default, the query result is cached indefinitely (with `staleTime` set to Infinity), reflecting the
- * assumption that the pools list is mostly static.
- *
- * @param params
- *   Optional configuration object:
- *   - queryOptions: Partial QueryObserverOptions for react-query (merged with built-in defaults).
- *
- * @returns
- *   A UseQueryResult object from @tanstack/react-query containing:
- *   - `data`: Array of PoolKey objects or undefined if not loaded or errored.
- *   - Status fields: `isLoading`, `isError`, `error`, etc.
- *
- * @example
- *   const { data: pools, isLoading, error } = usePools();
- *   if (isLoading) return <div>Loading pools...</div>;
- *   if (error) return <div>Error: {error.message}</div>;
- *   if (pools) pools.forEach((pool, idx) => console.log(pool.id, pool.fee));
+ * Loads the list of concentrated-liquidity pools known to the SDK config. The SDK's `getPools()`
+ * is synchronous in v2 (no network), so this hook caches indefinitely by default.
  */
-export function usePools(params?: UsePoolsProps): UseQueryResult<PoolKey[], Error> {
+export function usePools({ queryOptions }: UsePoolsParams = {}): UseQueryResult<PoolKey[], Error> {
   const { sodax } = useSodaxContext();
-  const defaultQueryOptions = {
-    queryKey: ['dex', 'pools'],
-    staleTime: Number.POSITIVE_INFINITY, // Pools list is static, cache indefinitely
-  };
-  const queryOptions = { ...defaultQueryOptions, ...params?.queryOptions };
 
-  return useQuery({
+  return useQuery<PoolKey[], Error>({
+    queryKey: ['dex', 'pools'],
+    queryFn: () => sodax.dex.clService.getPools(),
+    staleTime: Number.POSITIVE_INFINITY,
     ...queryOptions,
-    queryFn: async (): Promise<PoolKey[]> => {
-      return sodax.dex.clService.getPools();
-    },
   });
 }

package/src/hooks/dex/usePositionInfo.ts

@@ -1,88 +1,53 @@
-import { type QueryObserverOptions, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import type { ClPositionInfo, PoolKey } from '@sodax/sdk';
-import { useSodaxContext } from '../shared/useSodaxContext';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
 
-export interface UsePositionInfoResponse {
+export type UsePositionInfoResponse = {
   positionInfo: ClPositionInfo;
   isValid: boolean;
-}
+};
 
-export interface UsePositionInfoProps {
-  tokenId: string | null;
-  poolKey: PoolKey | null;
-  queryOptions?: QueryObserverOptions<UsePositionInfoResponse, Error>;
-}
+export type UsePositionInfoParams = ReadHookParams<
+  UsePositionInfoResponse,
+  {
+    tokenId: string | null;
+    poolKey: PoolKey | null;
+  }
+>;
 
 /**
- * React hook to fetch and validate CL position details by position NFT token ID.
- *
- * Fetches position data on-chain for a given tokenId, and checks if it matches the expected PoolKey.
- * This is commonly used in DEX dashboards to show or pre-validate user positions by ID.
- *
- * @param {string | null} tokenId
- *   Position NFT token ID to query, as a string. Pass `null` or empty string to disable.
- * @param {PoolKey | null} poolKey
- *   PoolKey to match against the position's underlying pool. Pass `null` to disable.
- * @param {QueryObserverOptions<UsePositionInfoResponse, Error>} [queryOptions]
- *   Optional react-query options for polling/refresh and config. Merged with sensible defaults.
- *
- * @returns {UseQueryResult<UsePositionInfoResponse, Error>}
- *   Standard React Query result object:
- *   - `data`: { positionInfo, isValid } if loaded, or undefined if not loaded/error
- *   - `isLoading`: boolean (query active)
- *   - `isError`: boolean (query failed)
- *   - ...other react-query helpers (refetch, status, etc)
- *
- * @example
- * ```typescript
- * const { data, isLoading, error } = usePositionInfo({ tokenId, poolKey });
- * if (isLoading) return <div>Loading position...</div>;
- * if (error) return <div>Error: {error.message}</div>;
- * if (data) {
- *   console.log('Valid for pool:', data.isValid);
- *   console.log('Liquidity:', data.positionInfo.liquidity);
- * }
- * ```
- *
- * @remarks
- * - Validates the underlying position's pool definition (currency0, currency1, fee) with the supplied PoolKey.
- * - Returns `isValid: false` if any field mismatches.
- * - Pass `null` as tokenId or poolKey to disable the query.
- * - Defaults: 10s stale, not enabled if missing arguments. Customizable via `queryOptions`.
- * - Throws error if called with invalid/null tokenId or poolKey when enabled.
+ * React hook to fetch a CL position by NFT token id and validate it against an expected pool key.
+ * Reads via the hub `publicClient`. Disabled when `tokenId` or `poolKey` is missing.
  */
 export function usePositionInfo({
-  tokenId,
-  poolKey,
-  queryOptions = {
-    queryKey: ['dex', 'positionInfo', tokenId, poolKey],
-    enabled: tokenId !== null && poolKey !== null && tokenId !== '',
-    staleTime: 10000, // Consider data stale after 10 seconds
-  },
-}: UsePositionInfoProps): UseQueryResult<UsePositionInfoResponse, Error> {
+  params,
+  queryOptions,
+}: UsePositionInfoParams = {}): UseQueryResult<UsePositionInfoResponse, Error> {
   const { sodax } = useSodaxContext();
+  const tokenId = params?.tokenId ?? null;
+  const poolKey = params?.poolKey ?? null;
 
-  return useQuery({
+  return useQuery<UsePositionInfoResponse, Error>({
+    queryKey: ['dex', 'positionInfo', tokenId, poolKey],
     queryFn: async () => {
       if (!tokenId || !poolKey) {
         throw new Error('Token ID and pool key are required');
       }
 
-      const tokenIdBigInt = BigInt(tokenId);
-      const publicClient = sodax.hubProvider.publicClient;
-      const info = await sodax.dex.clService.getPositionInfo(tokenIdBigInt, publicClient);
+      const infoResult = await sodax.dex.clService.getPositionInfo(BigInt(tokenId), sodax.hubProvider.publicClient);
+      if (!infoResult.ok) throw infoResult.error;
+      const info = infoResult.value;
 
-      // Validate that position belongs to current pool
       const isValid =
         info.poolKey.currency0.toLowerCase() === poolKey.currency0.toLowerCase() &&
         info.poolKey.currency1.toLowerCase() === poolKey.currency1.toLowerCase() &&
         info.poolKey.fee === poolKey.fee;
 
-      return {
-        positionInfo: info,
-        isValid,
-      };
+      return { positionInfo: info, isValid };
     },
+    enabled: tokenId !== null && tokenId !== '' && poolKey !== null,
+    staleTime: 10_000,
     ...queryOptions,
   });
 }