DEV Community

Cover image for MPP TestKit VSCode Extension - Inline HTTP 402 Payment Flow Hints
MPP TestKit
MPP TestKit

Posted on

MPP TestKit VSCode Extension - Inline HTTP 402 Payment Flow Hints

#showdev #tooling #vscode #web3

The problem it solves

When you're building or testing a pay-per-request API with MPP TestKit, you're juggling a few moving parts at once:

  • mppFetch auto-creates a wallet, airdrops SOL, intercepts the 402, pays, and retries
  • createTestServer auto-generates a recipient keypair
  • mpp.charge({ amount: "0.001" }) gates a route and charges that amount per verified request

All of that is invisible in the code itself. You have to keep the mental model in your head, or scroll to the docs. The extension makes it visible inline — the same way TypeScript shows inferred types.

Installation

From the VS Marketplace

Search MPP Payment Flow Hints in the Extensions panel (Ctrl+Shift+X), or:

ext install mpptestkit.mpp-payment-hints
Enter fullscreen mode Exit fullscreen mode

From source 

git clone https://github.com/mpptestkit/mpptestkit
cd packages/vscode-extension
npm install
npm run compile

# Package and install locally
npm install -g @vscode/vsce
vsce package --no-dependencies
code --install-extension mpp-payment-hints-0.1.0.vsix
Enter fullscreen mode Exit fullscreen mode

Requires VS Code 1.75+ and editor inlay hints enabled (editor.inlayHints.enabled).

What you see

Every MPP SDK call gets a small inline label right after the opening (. Here's what each one shows:

mppFetch 

const res = await mppFetch( ⬡ 402 flow: wallet → pay → retry  "http://localhost:3001/api/data");
Enter fullscreen mode Exit fullscreen mode

This call does a lot: creates a wallet, requests an airdrop (devnet/testnet), hits the URL, intercepts the 402, sends a SOL transfer, and retries with the Payment-Receipt header. The hint makes that whole flow visible at the call site.

createTestClient 

const client = await createTestClient( ⬡ auto-wallet · airdrop  {
  network: "devnet",
  onStep: (step) => console.log(step.type, step.message),
});
Enter fullscreen mode Exit fullscreen mode

Reminds you that this call generates an ephemeral Solana keypair and funds it via airdrop — no wallet setup needed on devnet/testnet.

client.fetch 

const res = await client.fetch( ⬡ handles 402 automatically  "http://localhost:3001/api/data");
Enter fullscreen mode Exit fullscreen mode

Same flow as mppFetch, but on a pre-created client with a reused wallet.

mpp.charge — extracts the SOL amount 

app.get("/api/data",
  mpp.charge( ⬡ 0.001 SOL per request  { amount: "0.001" }),
  (req, res) => res.json({ data: "premium content" })
);
Enter fullscreen mode Exit fullscreen mode

The extension reads ahead in the document to find amount: "X" and shows the actual value in the hint. If no amount is found (e.g., the argument is a variable), it falls back to ⬡ SOL payment required.

createTestServer 

const mpp = createTestServer( ⬡ auto-recipient wallet  );
Enter fullscreen mode Exit fullscreen mode

Confirms that the server auto-generates a recipient keypair. Useful when you're debugging which address is receiving payments.

How it works

The extension registers a vscode.InlayHintsProvider for TypeScript, JavaScript, TSX, and JSX files. On each document change, it scans the document text for the five patterns above and places hints at the offset immediately after the opening ( of each call.

class MppInlayHintsProvider implements vscode.InlayHintsProvider {
  provideInlayHints(document: vscode.TextDocument, range: vscode.Range) {
    const text = document.getText();

    // Only activate in files that use mpp-test-sdk
    if (!text.includes("mpp-test-sdk")) return [];

    const hints: vscode.InlayHint[] = [];

    for (const pattern of PATTERNS) {
      pattern.regex.lastIndex = 0;
      let match: RegExpExecArray | null;

      while ((match = pattern.regex.exec(text)) !== null) {
        const pos = document.positionAt(match.index + match[0].length);
        if (pos.isBefore(range.start) || pos.isAfter(range.end)) continue;

        const label = pattern.getLabel(match, text);
        const hint = new vscode.InlayHint(pos, " " + label + " ", vscode.InlayHintKind.Type);
        hint.paddingLeft = true;
        hints.push(hint);
      }
    }

    return hints;
  }
}
Enter fullscreen mode Exit fullscreen mode

The extractChargeAmount helper looks ahead up to 200 characters from the ( to find amount: "X":

function extractChargeAmount(text: string, offset: number): string {
  const snippet = text.slice(offset, offset + 200);
  const m = /amount\s*:\s*["']([0-9.]+)["']/.exec(snippet);
  return m ? m[1] : "";
}
Enter fullscreen mode Exit fullscreen mode

This handles same-line and next-line argument layouts without needing a full AST.

Activation

The extension activates lazily — only when you open a TypeScript or JavaScript file. If the file doesn't import from mpp-test-sdk, no hints are computed at all (controlled by the showOnAllFiles setting).

"activationEvents": [
  "onLanguage:typescript",
  "onLanguage:javascript",
  "onLanguage:typescriptreact",
  "onLanguage:javascriptreact"
]
Enter fullscreen mode Exit fullscreen mode

Settings

Open VS Code settings (Ctrl+,) and search MPP:

Setting Default Description
mpp.hints.enabled true Toggle all hints on/off
mpp.hints.showOnAllFiles false Show hints in every JS/TS file, not just mpp-test-sdk files

Or set them directly in settings.json:

{
  "mpp.hints.enabled": true,
  "mpp.hints.showOnAllFiles": false,
  "editor.inlayHints.enabled": "on"
}
Enter fullscreen mode Exit fullscreen mode

The broader picture

The extension fits into the MPP TestKit toolchain alongside the CLI:

# Test a live endpoint from the terminal
npx mpp-test-cli https://api.example.com/data

# See the payment flow in your editor as you write the code
# → extension shows hints inline
Enter fullscreen mode Exit fullscreen mode
  • CLI (mpp-test-cli) — fire-and-forget endpoint testing from the terminal
  • VSCode extension — ambient context in your editor as you write integration tests or server code

Both activate only when you're working with mpp-test-sdk so they stay out of the way otherwise.

Links

Top comments (0)