Skip to content

Feat/x402#2402

Open
lwin-kyaw wants to merge 26 commits intomasterfrom
feat/x402
Open

Feat/x402#2402
lwin-kyaw wants to merge 26 commits intomasterfrom
feat/x402

Conversation

@lwin-kyaw
Copy link
Copy Markdown
Contributor

@lwin-kyaw lwin-kyaw commented Mar 18, 2026

Motivation and Context

Jira Link: https://consensyssoftware.atlassian.net/browse/EMBED-143?atlOrigin=eyJpIjoiYzYxN2I1NDE1OTQ4NDY0NjhlOGUzMzA4YTc0ZjUzMDMiLCJwIjoiaiJ9

Description

  • Add shared x402 payment-fetch support to @web3auth/no-modal and expose useX402Fetch from both the no-modal and modal React/Vue entry points.
  • Support both EVM and Solana payment flows, including provider-backed signers, Solana wallet signing, automatic account tracking, and a shim for x402 v2 402 responses that return payment requirements in the response body.
  • Add end-to-end demo coverage with a new x402-test-server, a wagmi React example, and Vue demo updates for Base Sepolia and Solana network switching.

Changes

  • Add shared x402 primitives in packages/no-modal/src/base/x402, including helpers to build EVM/Solana payment-aware fetch clients.
  • Add new useX402Fetch hooks for React and Vue in @web3auth/no-modal, then re-export the hook and related types through @web3auth/modal.
  • Normalize body-based x402 v2 402 responses into the PAYMENT-REQUIRED header so the underlying @x402/fetch client can handle servers that return payment requirements in the JSON body.
  • Add demo/x402-test-server, an Express app with free and paid endpoints like /weather, /premium-data, and /weather-plain for testing x402 flows against EVM and Solana networks.
  • Update demo/wagmi-react-app to include an X402 demo component, Base Sepolia chain config, and an env var for the x402 test content URL.
  • Update demo/vue-app-new to expose x402 actions in the dashboard, add Base Sepolia and Solana network switching helpers, and include the required config, translation, and env updates.
  • Refresh supporting dependencies and lockfiles for the x402 and Solana additions, and include a few small Vue/Solana integration fixes found during the demo work.

Test Plan

  • Start demo/x402-test-server with valid EVM and Solana recipient addresses.
  • Verify useX402Fetch succeeds from demo/wagmi-react-app on Base Sepolia.
  • Verify useX402Fetch succeeds from demo/vue-app-new for both EVM and Solana wallets.
  • Verify /weather-plain returns a body-based 402 response that is still handled correctly by the client shim.
  • Smoke test the new React/Vue exports from @web3auth/no-modal and @web3auth/modal.

Recordings (if appropriate):

React Hook

Screen.Recording.2026-03-20.at.7.52.48.PM.mov

Vue Composable

Screen.Recording.2026-03-20.at.7.51.42.PM.mov

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

  • My code follows the code style of this project. (run lint)
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • My code requires a db migration.

AI Reviews

x402_auth_2.md
x402_auth_1.md


Note

Medium Risk
Adds new x402 payment-flow demo code (including an Express server with paid endpoints) and updates demo chain configuration; risk is mainly around dependency/lockfile churn and correctness of payment/chain-switching demo flows.

Overview
Adds end-to-end x402 payment-fetch demo coverage across the Vue and wagmi React demo apps, including new UI components that call useX402Fetch, allow configuring the test URL via VITE_APP_X402_TEST_CONTENT_URL, and (for EVM) guide switching to Base Sepolia.

Introduces a new demo/x402-test-server Express app with free and paid routes (e.g. /weather, /premium-data, /weather-plain) protected by @x402/express middleware and configurable EVM/Solana recipients/networks via env vars.

Updates demo chain configuration to include Base Sepolia (0x14a34 / 84532) and broadens the Vue demo’s default chain list; also refreshes demo lockfiles to include the new @x402/* dependencies and adjusts .gitignore to ignore .npmrc.

Written by Cursor Bugbot for commit a875599. This will update automatically on new commits. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
web3auth-web Error Error Apr 1, 2026 4:44am

Request Review

@lwin-kyaw lwin-kyaw marked this pull request as ready for review March 20, 2026 01:53
@lwin-kyaw lwin-kyaw changed the base branch from v10 to master March 20, 2026 06:01
import { useEffect, useMemo, useState } from "react";

import { useChain } from "../../hooks";
import { useChain } from "../../hooks/useChain";
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is to eliminate the circular import.

setError(err instanceof Error ? err.message : "Request failed.");
} finally {
setIsLoading(false);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Solana demo missing state reset before fetch

Low Severity

SolanaX402FetchDemo's execute callback is missing setData(null) at the start and in the catch block, unlike the equivalent EvmX402FetchDemo which resets data in both places. This means stale response data from a prior successful request will persist visually alongside a new error message on subsequent failures.

Fix in Cursor Fix in Web

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

updatedAt: new Date().toISOString(),
},
});
});
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

/weather-plain skips payment verification entirely

Medium Severity

The /weather-plain endpoint only checks whether an x-payment or payment-signature header exists — it never validates the payment through resourceServer. Any request with an arbitrary non-empty header value bypasses the 402 gate and receives the protected content for free, making this endpoint unsuitable for verifying the client-side x402 v2 body-based shim actually works end-to-end.

Fix in Cursor Fix in Web

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.

1 participant