Custom Hooks with React Query

Since useCofferApp provides access to the core SDK instance, you can create custom hooks using @tanstack/react-query for better data management:

import { useQuery } from '@tanstack/react-query';
import { useCofferApp } from '@coffer-network/apps-react-sdk';
 
// Custom balance hook
export function useWalletBalance() {
  const { coffer, isConnected } = useCofferApp();
 
  return useQuery({
    queryKey: ['wallet-balance'],
    queryFn: async () => {
      if (!coffer || !isConnected) return null;
      return await coffer.getBalance();
    },
    enabled: !!coffer && isConnected,
  });
}
 
// Custom transactions hook
export function useTransactions() {
  const { coffer, isConnected } = useCofferApp();
  const queryClient = useQueryClient();
 
  return useQuery({
    queryKey: ['transactions'],
    queryFn: async () => {
      if (!coffer || !isConnected) return [];
      return await coffer.fetchAllTransaction();
    },
    enabled: !!coffer && isConnected,
  });
}

useCofferApp Overview