pepay-streams-sdk 0.1.0

package/dist/react/index.d.mts

@@ -0,0 +1,185 @@
+import { Address } from 'viem';
+import { P as PepayStreamsConfig } from '../index-BTG0TRJt.mjs';
+import { PepayStreamsClient, PepayStreamsClientWithSigner } from '../index.mjs';
+import '../campaigns/index.mjs';
+import '../claims/index.mjs';
+import '../staking/index.mjs';
+import '../marketplace/index.mjs';
+import '../automation/index.mjs';
+import '../api/index.mjs';
+import '@pepay-streams/shared';
+
+/**
+ * React Integration Helpers
+ *
+ * Provides React-friendly patterns for using the SDK:
+ * - Context provider
+ * - Hooks for common operations
+ * - Type-safe query helpers
+ */
+
+/**
+ * SDK context value type for React context
+ */
+interface PepayStreamsContextValue {
+    /** SDK client instance */
+    client: PepayStreamsClient | PepayStreamsClientWithSigner | null;
+    /** Whether the client has a signer */
+    isConnected: boolean;
+    /** Connected wallet address */
+    address: Address | null;
+    /** Chain ID */
+    chainId: number;
+    /** Diamond contract address */
+    diamondAddress: Address;
+}
+/**
+ * Configuration for creating SDK context
+ */
+interface CreateContextConfig extends PepayStreamsConfig {
+    /** Auto-connect on mount */
+    autoConnect?: boolean;
+}
+/**
+ * Helper to create SDK client configuration from environment
+ */
+declare function getConfigFromEnv(): Partial<PepayStreamsConfig>;
+/**
+ * Example React context creation pattern
+ *
+ * @example
+ * ```tsx
+ * // contexts/PepayStreams.tsx
+ * import { createContext, useContext, useState, useEffect } from 'react';
+ * import { PepayStreamsClient, PepayStreamsClientWithSigner } from '@pepay-streams/sdk';
+ * import { useWalletClient, usePublicClient, useAccount } from 'wagmi';
+ *
+ * const PepayStreamsContext = createContext<PepayStreamsContextValue | null>(null);
+ *
+ * export function PepayStreamsProvider({ children, config }) {
+ *   const { address, isConnected } = useAccount();
+ *   const publicClient = usePublicClient();
+ *   const { data: walletClient } = useWalletClient();
+ *   const [client, setClient] = useState<PepayStreamsClient | null>(null);
+ *
+ *   useEffect(() => {
+ *     if (!publicClient) return;
+ *
+ *     if (walletClient && isConnected) {
+ *       setClient(new PepayStreamsClient(config).withSigner(walletClient));
+ *     } else {
+ *       setClient(new PepayStreamsClient(config));
+ *     }
+ *   }, [publicClient, walletClient, isConnected]);
+ *
+ *   return (
+ *     <PepayStreamsContext.Provider value={{ client, isConnected, address, ... }}>
+ *       {children}
+ *     </PepayStreamsContext.Provider>
+ *   );
+ * }
+ *
+ * export function usePepayStreams() {
+ *   const context = useContext(PepayStreamsContext);
+ *   if (!context) throw new Error('Must be used within PepayStreamsProvider');
+ *   return context;
+ * }
+ * ```
+ */
+declare const CONTEXT_EXAMPLE = "\n// Example usage with wagmi and React\n\nimport { createContext, useContext, useState, useEffect, ReactNode } from 'react';\nimport { PepayStreamsClient, PepayStreamsClientWithSigner, PepayStreamsConfig } from '@pepay-streams/sdk';\nimport { useWalletClient, usePublicClient, useAccount, useChainId } from 'wagmi';\n\ninterface PepayStreamsContextValue {\n  client: PepayStreamsClient | PepayStreamsClientWithSigner | null;\n  isConnected: boolean;\n  isLoading: boolean;\n}\n\nconst PepayStreamsContext = createContext<PepayStreamsContextValue>({\n  client: null,\n  isConnected: false,\n  isLoading: true,\n});\n\nexport function PepayStreamsProvider({\n  children,\n  config,\n}: {\n  children: ReactNode;\n  config: PepayStreamsConfig;\n}) {\n  const { isConnected } = useAccount();\n  const chainId = useChainId();\n  const { data: walletClient, isLoading: walletLoading } = useWalletClient();\n  const [client, setClient] = useState<PepayStreamsClient | null>(null);\n\n  useEffect(() => {\n    const newClient = new PepayStreamsClient({\n      ...config,\n      chainId,\n    });\n\n    if (walletClient && isConnected) {\n      setClient(newClient.withSigner(walletClient));\n    } else {\n      setClient(newClient);\n    }\n  }, [walletClient, isConnected, chainId, config]);\n\n  return (\n    <PepayStreamsContext.Provider\n      value={{\n        client,\n        isConnected,\n        isLoading: walletLoading,\n      }}\n    >\n      {children}\n    </PepayStreamsContext.Provider>\n  );\n}\n\nexport function usePepayStreams() {\n  return useContext(PepayStreamsContext);\n}\n\n// Usage in components:\nfunction ClaimButton({ campaignId }: { campaignId: bigint }) {\n  const { client, isConnected } = usePepayStreams();\n  const [loading, setLoading] = useState(false);\n\n  const handleClaim = async () => {\n    if (!client || !isConnected) return;\n\n    setLoading(true);\n    try {\n      const result = await client.claims.claim({ campaignId });\n      await result.wait();\n      console.log('Claimed!');\n    } catch (error) {\n      console.error('Claim failed:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <button onClick={handleClaim} disabled={!isConnected || loading}>\n      {loading ? 'Claiming...' : 'Claim'}\n    </button>\n  );\n}\n";
+/**
+ * Query key factories for react-query integration
+ *
+ * @example
+ * ```tsx
+ * import { useQuery } from '@tanstack/react-query';
+ * import { queryKeys, usePepayStreams } from '@pepay-streams/sdk/react';
+ *
+ * function CampaignDetails({ id }) {
+ *   const { client } = usePepayStreams();
+ *
+ *   const { data: campaign, isLoading } = useQuery({
+ *     queryKey: queryKeys.campaign(id),
+ *     queryFn: () => client.campaigns.getCampaign(BigInt(id)),
+ *     enabled: !!client,
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   return <div>{campaign?.name}</div>;
+ * }
+ * ```
+ */
+declare const queryKeys: {
+    campaigns: (params?: Record<string, unknown>) => readonly ["pepay", "campaigns", Record<string, unknown> | undefined];
+    campaign: (id: string | bigint) => readonly ["pepay", "campaign", string];
+    campaignRecipients: (id: string | bigint, page?: number) => readonly ["pepay", "campaign", string, "recipients", number | undefined];
+    campaignActivity: (id: string | bigint, page?: number) => readonly ["pepay", "campaign", string, "activity", number | undefined];
+    dueAmount: (campaignId: bigint, address: Address) => readonly ["pepay", "dueAmount", string, `0x${string}`];
+    recipientStatus: (campaignId: bigint, address: Address) => readonly ["pepay", "recipientStatus", string, `0x${string}`];
+    stakingPools: (params?: Record<string, unknown>) => readonly ["pepay", "staking", "pools", Record<string, unknown> | undefined];
+    stakingPool: (id: string | bigint) => readonly ["pepay", "staking", "pool", string];
+    userStake: (poolId: bigint, address: Address) => readonly ["pepay", "staking", "userStake", string, `0x${string}`];
+    pendingRewards: (poolId: bigint, address: Address) => readonly ["pepay", "staking", "pendingRewards", string, `0x${string}`];
+    orders: (params?: Record<string, unknown>) => readonly ["pepay", "marketplace", "orders", Record<string, unknown> | undefined];
+    order: (id: string | bigint) => readonly ["pepay", "marketplace", "order", string];
+    orderQuote: (id: string | bigint) => readonly ["pepay", "marketplace", "order", string, "quote"];
+    walletActivity: (address: Address) => readonly ["pepay", "wallet", `0x${string}`, "activity"];
+    walletPositions: (address: Address) => readonly ["pepay", "wallet", `0x${string}`, "positions"];
+    walletClaims: (address: Address, page?: number) => readonly ["pepay", "wallet", `0x${string}`, "claims", number | undefined];
+    tokenBalance: (token: Address, address: Address) => readonly ["pepay", "token", `0x${string}`, "balance", `0x${string}`];
+    tokenAllowance: (token: Address, owner: Address, spender: Address) => readonly ["pepay", "token", `0x${string}`, "allowance", `0x${string}`, `0x${string}`];
+    tokenInfo: (token: Address) => readonly ["pepay", "token", `0x${string}`, "info"];
+    autoWithdrawStatus: (campaignId: bigint) => readonly ["pepay", "automation", "autoWithdraw", string];
+    autoReleaseStatus: (campaignId: bigint) => readonly ["pepay", "automation", "autoRelease", string];
+};
+/**
+ * Mutation key factories for react-query
+ */
+declare const mutationKeys: {
+    claim: (campaignId: bigint) => readonly ["pepay", "mutation", "claim", string];
+    claimBatch: () => readonly ["pepay", "mutation", "claimBatch"];
+    stake: (poolId: bigint) => readonly ["pepay", "mutation", "stake", string];
+    unstake: (poolId: bigint) => readonly ["pepay", "mutation", "unstake", string];
+    fillOrder: (orderId: bigint) => readonly ["pepay", "mutation", "fillOrder", string];
+    cancelOrder: (orderId: bigint) => readonly ["pepay", "mutation", "cancelOrder", string];
+    approve: (token: Address) => readonly ["pepay", "mutation", "approve", `0x${string}`];
+};
+/**
+ * Example hook patterns for common operations
+ */
+declare const HOOK_EXAMPLES = "\n// Custom hooks for common operations\n\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { usePepayStreams, queryKeys, mutationKeys } from '@pepay-streams/sdk/react';\nimport { parseEther } from 'viem';\n\n// Hook: Get campaign with due amount\nexport function useCampaignWithDue(campaignId: bigint, recipientAddress: Address) {\n  const { client } = usePepayStreams();\n\n  const campaign = useQuery({\n    queryKey: queryKeys.campaign(campaignId),\n    queryFn: () => client!.campaigns.getCampaign(campaignId),\n    enabled: !!client,\n  });\n\n  const dueAmount = useQuery({\n    queryKey: queryKeys.dueAmount(campaignId, recipientAddress),\n    queryFn: () => client!.claims.getDueAmount(campaignId, recipientAddress),\n    enabled: !!client && !!recipientAddress,\n    refetchInterval: 30000, // Refresh every 30s\n  });\n\n  return {\n    campaign: campaign.data,\n    dueAmount: dueAmount.data,\n    isLoading: campaign.isLoading || dueAmount.isLoading,\n  };\n}\n\n// Hook: Claim mutation with optimistic updates\nexport function useClaim() {\n  const { client } = usePepayStreams();\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: async ({ campaignId }: { campaignId: bigint }) => {\n      const result = await client!.claims.claim({ campaignId });\n      return result.wait();\n    },\n    onSuccess: (_, { campaignId }) => {\n      // Invalidate related queries\n      queryClient.invalidateQueries({ queryKey: queryKeys.campaign(campaignId) });\n      queryClient.invalidateQueries({ queryKey: ['pepay', 'dueAmount', String(campaignId)] });\n    },\n  });\n}\n\n// Hook: Stake with approval check\nexport function useStake() {\n  const { client } = usePepayStreams();\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: async ({\n      poolId,\n      amount,\n      stakeToken,\n    }: {\n      poolId: bigint;\n      amount: bigint;\n      stakeToken: Address;\n    }) => {\n      // Check and approve if needed\n      const approval = await (client as PepayStreamsClientWithSigner).ensureAllowance(stakeToken, amount);\n      if (approval) {\n        await approval.wait();\n      }\n\n      // Stake\n      const result = await client!.staking.stake(poolId, amount);\n      return result.wait();\n    },\n    onSuccess: (_, { poolId }) => {\n      queryClient.invalidateQueries({ queryKey: queryKeys.stakingPool(poolId) });\n      queryClient.invalidateQueries({ queryKey: ['pepay', 'staking', 'userStake', String(poolId)] });\n    },\n  });\n}\n\n// Hook: Fill order with price display\nexport function useOrderWithQuote(orderId: bigint) {\n  const { client } = usePepayStreams();\n\n  const order = useQuery({\n    queryKey: queryKeys.order(orderId),\n    queryFn: () => client!.marketplace.getOrder(orderId),\n    enabled: !!client,\n  });\n\n  const quote = useQuery({\n    queryKey: queryKeys.orderQuote(orderId),\n    queryFn: () => client!.marketplace.getQuote(orderId),\n    enabled: !!client && order.data?.status === 'open',\n    refetchInterval: 10000, // Refresh quote every 10s\n  });\n\n  return {\n    order: order.data,\n    quote: quote.data,\n    isLoading: order.isLoading || quote.isLoading,\n    canFill: quote.data?.isValid ?? false,\n  };\n}\n";
+/**
+ * Format helpers for display
+ */
+declare const formatters: {
+    /**
+     * Format token amount with decimals
+     */
+    formatTokenAmount(amount: bigint, decimals?: number, maxDecimals?: number): string;
+    /**
+     * Format USD amount
+     */
+    formatUsd(amount: number | string): string;
+    /**
+     * Format percentage
+     */
+    formatPercent(value: number, decimals?: number): string;
+    /**
+     * Format timestamp to date string
+     */
+    formatDate(timestamp: number): string;
+    /**
+     * Format timestamp to relative time
+     */
+    formatRelativeTime(timestamp: number): string;
+    /**
+     * Format vesting progress
+     */
+    formatVestingProgress(claimed: bigint, allocated: bigint): string;
+    /**
+     * Shorten address for display
+     */
+    shortenAddress(address: Address, chars?: number): string;
+};
+
+export { CONTEXT_EXAMPLE, type CreateContextConfig, HOOK_EXAMPLES, type PepayStreamsContextValue, formatters, getConfigFromEnv, mutationKeys, queryKeys };

package/dist/react/index.d.ts

@@ -0,0 +1,185 @@
+import { Address } from 'viem';
+import { P as PepayStreamsConfig } from '../index-BTG0TRJt.js';
+import { PepayStreamsClient, PepayStreamsClientWithSigner } from '../index.js';
+import '../campaigns/index.js';
+import '../claims/index.js';
+import '../staking/index.js';
+import '../marketplace/index.js';
+import '../automation/index.js';
+import '../api/index.js';
+import '@pepay-streams/shared';
+
+/**
+ * React Integration Helpers
+ *
+ * Provides React-friendly patterns for using the SDK:
+ * - Context provider
+ * - Hooks for common operations
+ * - Type-safe query helpers
+ */
+
+/**
+ * SDK context value type for React context
+ */
+interface PepayStreamsContextValue {
+    /** SDK client instance */
+    client: PepayStreamsClient | PepayStreamsClientWithSigner | null;
+    /** Whether the client has a signer */
+    isConnected: boolean;
+    /** Connected wallet address */
+    address: Address | null;
+    /** Chain ID */
+    chainId: number;
+    /** Diamond contract address */
+    diamondAddress: Address;
+}
+/**
+ * Configuration for creating SDK context
+ */
+interface CreateContextConfig extends PepayStreamsConfig {
+    /** Auto-connect on mount */
+    autoConnect?: boolean;
+}
+/**
+ * Helper to create SDK client configuration from environment
+ */
+declare function getConfigFromEnv(): Partial<PepayStreamsConfig>;
+/**
+ * Example React context creation pattern
+ *
+ * @example
+ * ```tsx
+ * // contexts/PepayStreams.tsx
+ * import { createContext, useContext, useState, useEffect } from 'react';
+ * import { PepayStreamsClient, PepayStreamsClientWithSigner } from '@pepay-streams/sdk';
+ * import { useWalletClient, usePublicClient, useAccount } from 'wagmi';
+ *
+ * const PepayStreamsContext = createContext<PepayStreamsContextValue | null>(null);
+ *
+ * export function PepayStreamsProvider({ children, config }) {
+ *   const { address, isConnected } = useAccount();
+ *   const publicClient = usePublicClient();
+ *   const { data: walletClient } = useWalletClient();
+ *   const [client, setClient] = useState<PepayStreamsClient | null>(null);
+ *
+ *   useEffect(() => {
+ *     if (!publicClient) return;
+ *
+ *     if (walletClient && isConnected) {
+ *       setClient(new PepayStreamsClient(config).withSigner(walletClient));
+ *     } else {
+ *       setClient(new PepayStreamsClient(config));
+ *     }
+ *   }, [publicClient, walletClient, isConnected]);
+ *
+ *   return (
+ *     <PepayStreamsContext.Provider value={{ client, isConnected, address, ... }}>
+ *       {children}
+ *     </PepayStreamsContext.Provider>
+ *   );
+ * }
+ *
+ * export function usePepayStreams() {
+ *   const context = useContext(PepayStreamsContext);
+ *   if (!context) throw new Error('Must be used within PepayStreamsProvider');
+ *   return context;
+ * }
+ * ```
+ */
+declare const CONTEXT_EXAMPLE = "\n// Example usage with wagmi and React\n\nimport { createContext, useContext, useState, useEffect, ReactNode } from 'react';\nimport { PepayStreamsClient, PepayStreamsClientWithSigner, PepayStreamsConfig } from '@pepay-streams/sdk';\nimport { useWalletClient, usePublicClient, useAccount, useChainId } from 'wagmi';\n\ninterface PepayStreamsContextValue {\n  client: PepayStreamsClient | PepayStreamsClientWithSigner | null;\n  isConnected: boolean;\n  isLoading: boolean;\n}\n\nconst PepayStreamsContext = createContext<PepayStreamsContextValue>({\n  client: null,\n  isConnected: false,\n  isLoading: true,\n});\n\nexport function PepayStreamsProvider({\n  children,\n  config,\n}: {\n  children: ReactNode;\n  config: PepayStreamsConfig;\n}) {\n  const { isConnected } = useAccount();\n  const chainId = useChainId();\n  const { data: walletClient, isLoading: walletLoading } = useWalletClient();\n  const [client, setClient] = useState<PepayStreamsClient | null>(null);\n\n  useEffect(() => {\n    const newClient = new PepayStreamsClient({\n      ...config,\n      chainId,\n    });\n\n    if (walletClient && isConnected) {\n      setClient(newClient.withSigner(walletClient));\n    } else {\n      setClient(newClient);\n    }\n  }, [walletClient, isConnected, chainId, config]);\n\n  return (\n    <PepayStreamsContext.Provider\n      value={{\n        client,\n        isConnected,\n        isLoading: walletLoading,\n      }}\n    >\n      {children}\n    </PepayStreamsContext.Provider>\n  );\n}\n\nexport function usePepayStreams() {\n  return useContext(PepayStreamsContext);\n}\n\n// Usage in components:\nfunction ClaimButton({ campaignId }: { campaignId: bigint }) {\n  const { client, isConnected } = usePepayStreams();\n  const [loading, setLoading] = useState(false);\n\n  const handleClaim = async () => {\n    if (!client || !isConnected) return;\n\n    setLoading(true);\n    try {\n      const result = await client.claims.claim({ campaignId });\n      await result.wait();\n      console.log('Claimed!');\n    } catch (error) {\n      console.error('Claim failed:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <button onClick={handleClaim} disabled={!isConnected || loading}>\n      {loading ? 'Claiming...' : 'Claim'}\n    </button>\n  );\n}\n";
+/**
+ * Query key factories for react-query integration
+ *
+ * @example
+ * ```tsx
+ * import { useQuery } from '@tanstack/react-query';
+ * import { queryKeys, usePepayStreams } from '@pepay-streams/sdk/react';
+ *
+ * function CampaignDetails({ id }) {
+ *   const { client } = usePepayStreams();
+ *
+ *   const { data: campaign, isLoading } = useQuery({
+ *     queryKey: queryKeys.campaign(id),
+ *     queryFn: () => client.campaigns.getCampaign(BigInt(id)),
+ *     enabled: !!client,
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   return <div>{campaign?.name}</div>;
+ * }
+ * ```
+ */
+declare const queryKeys: {
+    campaigns: (params?: Record<string, unknown>) => readonly ["pepay", "campaigns", Record<string, unknown> | undefined];
+    campaign: (id: string | bigint) => readonly ["pepay", "campaign", string];
+    campaignRecipients: (id: string | bigint, page?: number) => readonly ["pepay", "campaign", string, "recipients", number | undefined];
+    campaignActivity: (id: string | bigint, page?: number) => readonly ["pepay", "campaign", string, "activity", number | undefined];
+    dueAmount: (campaignId: bigint, address: Address) => readonly ["pepay", "dueAmount", string, `0x${string}`];
+    recipientStatus: (campaignId: bigint, address: Address) => readonly ["pepay", "recipientStatus", string, `0x${string}`];
+    stakingPools: (params?: Record<string, unknown>) => readonly ["pepay", "staking", "pools", Record<string, unknown> | undefined];
+    stakingPool: (id: string | bigint) => readonly ["pepay", "staking", "pool", string];
+    userStake: (poolId: bigint, address: Address) => readonly ["pepay", "staking", "userStake", string, `0x${string}`];
+    pendingRewards: (poolId: bigint, address: Address) => readonly ["pepay", "staking", "pendingRewards", string, `0x${string}`];
+    orders: (params?: Record<string, unknown>) => readonly ["pepay", "marketplace", "orders", Record<string, unknown> | undefined];
+    order: (id: string | bigint) => readonly ["pepay", "marketplace", "order", string];
+    orderQuote: (id: string | bigint) => readonly ["pepay", "marketplace", "order", string, "quote"];
+    walletActivity: (address: Address) => readonly ["pepay", "wallet", `0x${string}`, "activity"];
+    walletPositions: (address: Address) => readonly ["pepay", "wallet", `0x${string}`, "positions"];
+    walletClaims: (address: Address, page?: number) => readonly ["pepay", "wallet", `0x${string}`, "claims", number | undefined];
+    tokenBalance: (token: Address, address: Address) => readonly ["pepay", "token", `0x${string}`, "balance", `0x${string}`];
+    tokenAllowance: (token: Address, owner: Address, spender: Address) => readonly ["pepay", "token", `0x${string}`, "allowance", `0x${string}`, `0x${string}`];
+    tokenInfo: (token: Address) => readonly ["pepay", "token", `0x${string}`, "info"];
+    autoWithdrawStatus: (campaignId: bigint) => readonly ["pepay", "automation", "autoWithdraw", string];
+    autoReleaseStatus: (campaignId: bigint) => readonly ["pepay", "automation", "autoRelease", string];
+};
+/**
+ * Mutation key factories for react-query
+ */
+declare const mutationKeys: {
+    claim: (campaignId: bigint) => readonly ["pepay", "mutation", "claim", string];
+    claimBatch: () => readonly ["pepay", "mutation", "claimBatch"];
+    stake: (poolId: bigint) => readonly ["pepay", "mutation", "stake", string];
+    unstake: (poolId: bigint) => readonly ["pepay", "mutation", "unstake", string];
+    fillOrder: (orderId: bigint) => readonly ["pepay", "mutation", "fillOrder", string];
+    cancelOrder: (orderId: bigint) => readonly ["pepay", "mutation", "cancelOrder", string];
+    approve: (token: Address) => readonly ["pepay", "mutation", "approve", `0x${string}`];
+};
+/**
+ * Example hook patterns for common operations
+ */
+declare const HOOK_EXAMPLES = "\n// Custom hooks for common operations\n\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { usePepayStreams, queryKeys, mutationKeys } from '@pepay-streams/sdk/react';\nimport { parseEther } from 'viem';\n\n// Hook: Get campaign with due amount\nexport function useCampaignWithDue(campaignId: bigint, recipientAddress: Address) {\n  const { client } = usePepayStreams();\n\n  const campaign = useQuery({\n    queryKey: queryKeys.campaign(campaignId),\n    queryFn: () => client!.campaigns.getCampaign(campaignId),\n    enabled: !!client,\n  });\n\n  const dueAmount = useQuery({\n    queryKey: queryKeys.dueAmount(campaignId, recipientAddress),\n    queryFn: () => client!.claims.getDueAmount(campaignId, recipientAddress),\n    enabled: !!client && !!recipientAddress,\n    refetchInterval: 30000, // Refresh every 30s\n  });\n\n  return {\n    campaign: campaign.data,\n    dueAmount: dueAmount.data,\n    isLoading: campaign.isLoading || dueAmount.isLoading,\n  };\n}\n\n// Hook: Claim mutation with optimistic updates\nexport function useClaim() {\n  const { client } = usePepayStreams();\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: async ({ campaignId }: { campaignId: bigint }) => {\n      const result = await client!.claims.claim({ campaignId });\n      return result.wait();\n    },\n    onSuccess: (_, { campaignId }) => {\n      // Invalidate related queries\n      queryClient.invalidateQueries({ queryKey: queryKeys.campaign(campaignId) });\n      queryClient.invalidateQueries({ queryKey: ['pepay', 'dueAmount', String(campaignId)] });\n    },\n  });\n}\n\n// Hook: Stake with approval check\nexport function useStake() {\n  const { client } = usePepayStreams();\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: async ({\n      poolId,\n      amount,\n      stakeToken,\n    }: {\n      poolId: bigint;\n      amount: bigint;\n      stakeToken: Address;\n    }) => {\n      // Check and approve if needed\n      const approval = await (client as PepayStreamsClientWithSigner).ensureAllowance(stakeToken, amount);\n      if (approval) {\n        await approval.wait();\n      }\n\n      // Stake\n      const result = await client!.staking.stake(poolId, amount);\n      return result.wait();\n    },\n    onSuccess: (_, { poolId }) => {\n      queryClient.invalidateQueries({ queryKey: queryKeys.stakingPool(poolId) });\n      queryClient.invalidateQueries({ queryKey: ['pepay', 'staking', 'userStake', String(poolId)] });\n    },\n  });\n}\n\n// Hook: Fill order with price display\nexport function useOrderWithQuote(orderId: bigint) {\n  const { client } = usePepayStreams();\n\n  const order = useQuery({\n    queryKey: queryKeys.order(orderId),\n    queryFn: () => client!.marketplace.getOrder(orderId),\n    enabled: !!client,\n  });\n\n  const quote = useQuery({\n    queryKey: queryKeys.orderQuote(orderId),\n    queryFn: () => client!.marketplace.getQuote(orderId),\n    enabled: !!client && order.data?.status === 'open',\n    refetchInterval: 10000, // Refresh quote every 10s\n  });\n\n  return {\n    order: order.data,\n    quote: quote.data,\n    isLoading: order.isLoading || quote.isLoading,\n    canFill: quote.data?.isValid ?? false,\n  };\n}\n";
+/**
+ * Format helpers for display
+ */
+declare const formatters: {
+    /**
+     * Format token amount with decimals
+     */
+    formatTokenAmount(amount: bigint, decimals?: number, maxDecimals?: number): string;
+    /**
+     * Format USD amount
+     */
+    formatUsd(amount: number | string): string;
+    /**
+     * Format percentage
+     */
+    formatPercent(value: number, decimals?: number): string;
+    /**
+     * Format timestamp to date string
+     */
+    formatDate(timestamp: number): string;
+    /**
+     * Format timestamp to relative time
+     */
+    formatRelativeTime(timestamp: number): string;
+    /**
+     * Format vesting progress
+     */
+    formatVestingProgress(claimed: bigint, allocated: bigint): string;
+    /**
+     * Shorten address for display
+     */
+    shortenAddress(address: Address, chars?: number): string;
+};
+
+export { CONTEXT_EXAMPLE, type CreateContextConfig, HOOK_EXAMPLES, type PepayStreamsContextValue, formatters, getConfigFromEnv, mutationKeys, queryKeys };