Skip to content

Add x402 facilitator display#338

Draft
MatiasOS wants to merge 3 commits intoopenscan-explorer:devfrom
MatiasOS:add-x402-facilitator-display
Draft

Add x402 facilitator display#338
MatiasOS wants to merge 3 commits intoopenscan-explorer:devfrom
MatiasOS:add-x402-facilitator-display

Conversation

@MatiasOS
Copy link
Member

Description

Adds x402 payment facilitator detection and display to the address page. When viewing an address that matches a known x402 facilitator (e.g., PayAI, Bitrefill, Kobaru), OpenScan now shows a dedicated display with facilitator metadata including name, description, website, supported schemes, assets, and capabilities.

Related Issue

Type of Change

  • New feature

Changes Made

  • Type & detection (2b4dda6): Added x402Facilitator address type to src/types/index.ts and detection logic in src/utils/addressTypeDetection.ts that matches addresses against a static registry
  • Static registry (src/config/x402Facilitators.ts): Created a chain ID → address lookup map of known x402 facilitators across Base, Ethereum, Arbitrum, Optimism, BSC, Polygon, Avalanche, and Sepolia — includes facilitators like PayAI, Bitrefill, Coinbase Developer Platform, Kobaru, and others
  • Display components (21eb9b5):
    • X402FacilitatorDisplay — full address page display with contract verification, proxy detection, AI analysis, and transaction history
    • FacilitatorInfoCard — card showing facilitator name/logo, description, website, base URL, schemes, assets, and capability badges (verify/settle/supported/list)
  • i18n: Added translation keys for facilitator fields in en and es locales
  • Styles: Added CSS for facilitator info card, logo, capability badges in src/styles/components.css
  • E2E tests (5201935): Playwright tests verifying facilitator detection, info card display, capability badges, and contract details for PayAI and Kobaru on Base

Screenshots (if applicable)

image

Checklist

  • I have run npm run format:fix and npm run lint:fix
  • I have run npm run typecheck with no errors
  • I have run tests with npm run test:run
  • I have tested my changes locally
  • I have updated documentation if needed
  • My code follows the project's architecture patterns

Additional Notes

The facilitator registry is a static config file. As new x402 facilitators emerge, entries can be added to src/config/x402Facilitators.ts without code changes beyond the config. The display component follows the same pattern as other address type displays (ERC20, ERC721, etc.).

Add static registry of known x402 payment facilitators keyed by chain ID
and address. Extend AddressType union with "x402Facilitator" and detect
facilitator addresses before contract type checks for instant lookup.
Add FacilitatorInfoCard showing facilitator metadata (name, logo,
description, website, base URL, schemes, assets, capability badges)
and X402FacilitatorDisplay with contract info conditional on code
presence. Wire into address page routing with i18n support (en/es).
Add 11 e2e tests covering facilitator type detection, info card
rendering (name, logo, description, website, base URL, schemes, assets,
capability badges), balance, transaction history, and conditional
contract details display. Add PayAI and Kobaru to Base test fixtures.
@github-actions
Copy link

🚀 Preview: https://pr-338--openscan.netlify.app
📝 Commit: 52019355c7c6ff35dc2ae48bb2f8302071b38c22

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can move this to our metadata repo, its ok for me if you want to do it after this PR or if you want to do it now. But if we dont do it now lets create an issue for it later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants