The Frontend

Stack: React, Vite, Tailwind CSS, Wagmi, TanStack Query.

The frontend serves two purposes: A Directory for humans and a Debugger for the protocol.

1. Hybrid Data Architecture

• Reading: The DiscoveryPanel fetches from http://localhost:3000/services (The Indexer). This ensures the page loads instantly, regardless of blockchain congestion.
• Writing: The RegisterPanel writes directly to the blockchain via Wagmi. It handles the complex "Approve -> Wait -> Register" flow.

2. The TestAgentModal (The x402 Console)

This component is the heart of the demo. It handles the state machine of a crypto-payment.

The Logic Flow:

1. Handshake: It sends a GET request to the target URL.
2. Detection:
   • If it receives 402 Payment Required, it parses the JSON body to find the recipient_address and price.
   • If the URL is the "Dummy Agent" (api.myagent.com), it simulates a 402 error to demonstrate the UI flow.
3. Settlement: It triggers writeContractAsync to transfer 1 ASAP token.
4. Verification:
   • It waits for useWaitForTransactionReceipt.
   • Once confirmed, it sends the request again, this time adding the header Authorization: Bearer <TX_HASH>.
5. Result: It displays the secret data returned by the server.

3. UX Polish

• Scroll Locking: We use a useEffect to set document.body.style.overflow = 'hidden' when the modal is open, preventing background scrolling.
• Reactive Balance: We use refetchInterval: 1000 in the Navbar to poll the blockchain for token balance changes, ensuring the UI updates immediately after a payment.