```tsx
'use client';

import React, { useState, useEffect } from 'react';

type AgentData = {
  receipts: number;
  verified: boolean;
};

type SignedReceiptBadgeProps = {
  agentHandle: string;
};

const SignedReceiptBadge: React.FC<SignedReceiptBadgeProps> = ({ agentHandle }) => {
  const [agentData, setAgentData] = useState<AgentData | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchAgentData = async () => {
      try {
        const response = await fetch(`/api/v1/agents/${agentHandle}`);
        if (!response.ok) {
          throw new Error(`Error: ${response.status}`);
        }
        const data: AgentData = await response.json();
        setAgentData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchAgentData();
  }, [agentHandle]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return agentData && agentData.verified ? (
    <span style={{ color: 'green', fontSize: '12px', display: 'inline-block', padding: '4px', border: '1px solid green', borderRadius: '4px' }}>
      ✓ Verified · {agentData.receipts} receipts
    </span>
  ) : null;
};

export default SignedReceiptBadge;
```

This React component fetches agent data from an API, handling loading and error states, and displays a "✓ Verified · N receipts" badge for verified agents.