@payai/x402-fetch-starter 0.1.3 → 0.1.5

package/NOTICE

@@ -1,2 +1,2 @@
 This package includes portions derived from coinbase/x402 (examples/typescript/clients/fetch), Apache-2.0,
-commit f3d44638965794ff9b550cdbba1f8197ab4a8df5. See LICENSE and upstream LICENSE notices.
+commit 913fa57453809815d3e10d83392dcc60f111b24a. See LICENSE and upstream LICENSE notices.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payai/x402-fetch-starter",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "description": "Create an x402 Fetch client in less than 2 minutes!",
   "type": "module",
@@ -33,6 +33,6 @@
     "url": "https://github.com/PayAINetwork/x402-fetch-starter"
   },
   "config": {
-    "x402FetchVersion": "0.6.6"
+    "x402FetchVersion": "2.2.0"
   }
 }

package/template/.env-local

@@ -1,3 +1,4 @@
+EVM_PRIVATE_KEY=
+SVM_PRIVATE_KEY=
 RESOURCE_SERVER_URL=http://localhost:4021
-ENDPOINT_PATH=/weather
-PRIVATE_KEY=
+ENDPOINT_PATH=/weather

package/template/README.md

@@ -1,75 +1,59 @@
-# x402-fetch Example Client
+# @x402/fetch Example Client
 
-This is an example client that demonstrates how to use the `x402-fetch` package to make HTTP requests to endpoints protected by the x402 payment protocol.
+Example client demonstrating how to use `@x402/fetch` to make HTTP requests to endpoints protected by the x402 payment protocol.
+
+```typescript
+import { x402Client, wrapFetchWithPayment } from "@x402/fetch";
+import { registerExactEvmScheme } from "@x402/evm/exact/client";
+import { registerExactSvmScheme } from "@x402/svm/exact/client";
+import { privateKeyToAccount } from "viem/accounts";
+import { createKeyPairSignerFromBytes } from "@solana/kit";
+import { base58 } from "@scure/base";
+
+const client = new x402Client();
+registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
+registerExactSvmScheme(client, { signer: (await createKeyPairSignerFromBytes(base58.decode(process.env.SVM_PRIVATE_KEY))) });
+
+const fetchWithPayment = wrapFetchWithPayment(fetch, client);
+
+const response = await fetchWithPayment("http://localhost:4021/weather");
+console.log(await response.json());
+```
 
 ## Prerequisites
 
 - Node.js v20+ (install via [nvm](https://github.com/nvm-sh/nvm))
 - pnpm v10 (install via [pnpm.io/installation](https://pnpm.io/installation))
-- A running x402 server (you can use the example express server at `examples/typescript/servers/express`)
-- A valid Ethereum private key for making payments
+- A running x402 server (see [express server example](../../servers/express))
+- Valid EVM and/or SVM private keys for making payments
 
 ## Setup
 
 1. Install and build all packages from the typescript examples root:
+
 ```bash
 cd ../../
-pnpm install
-pnpm build
+pnpm install && pnpm build
 cd clients/fetch
 ```
 
-2. Copy `.env-local` to `.env` and add your Ethereum private key:
-```bash
-cp .env-local .env
-```
+2. Copy `.env-local` to `.env` and add your private keys:
 
-3. Start the example client:
 ```bash
-pnpm dev
+cp .env-local .env
 ```
 
-## How It Works
+Required environment variables:
 
-The example demonstrates how to:
-1. Create a wallet client using viem
-2. Wrap the native fetch function with x402 payment handling
-3. Make a request to a paid endpoint
-4. Handle the response or any errors
+- `EVM_PRIVATE_KEY` - Ethereum private key for EVM payments
+- `SVM_PRIVATE_KEY` - Solana private key for SVM payments
 
-## Example Code
+3. Run the client:
 
-```typescript
-import { config } from "dotenv";
-import { createWalletClient, http } from "viem";
-import { privateKeyToAccount } from "viem/accounts";
-import { wrapFetchWithPayment } from "x402-fetch";
-import { baseSepolia } from "viem/chains";
-
-config();
-
-const { RESOURCE_SERVER_URL, PRIVATE_KEY, ENDPOINT_PATH } = process.env;
-
-// Create wallet client
-const account = privateKeyToAccount(PRIVATE_KEY as `0x${string}`);
-const client = createWalletClient({
-  account,
-  transport: http(),
-  chain: baseSepolia,
-});
-
-// Wrap fetch with payment handling
-const fetchWithPay = wrapFetchWithPayment(fetch, client);
-
-// Make request to paid endpoint
-fetchWithPay(`${RESOURCE_SERVER_URL}${ENDPOINT_PATH}`, {
-  method: "GET",
-})
-  .then(async response => {
-    const body = await response.json();
-    console.log(body);
-  })
-  .catch(error => {
-    console.error(error.response?.data?.error);
-  });
+```bash
+pnpm start
 ```
+
+## Next Steps
+
+See [Advanced Examples](../advanced/) for builder pattern registration, payment lifecycle hooks, and network preferences.

package/template/index.ts

@@ -1,37 +1,52 @@
 import { config } from "dotenv";
-import { decodeXPaymentResponse, wrapFetchWithPayment, createSigner, type Hex } from "x402-fetch";
+import { x402Client, wrapFetchWithPayment, x402HTTPClient } from "@x402/fetch";
+import { registerExactEvmScheme } from "@x402/evm/exact/client";
+import { registerExactSvmScheme } from "@x402/svm/exact/client";
+import { privateKeyToAccount } from "viem/accounts";
+import { createKeyPairSignerFromBytes } from "@solana/kit";
+import { base58 } from "@scure/base";
 
 config();
 
-const privateKey = process.env.PRIVATE_KEY as Hex | string;
-const baseURL = process.env.RESOURCE_SERVER_URL as string; // e.g. https://example.com
-const endpointPath = process.env.ENDPOINT_PATH as string; // e.g. /weather
-const url = `${baseURL}${endpointPath}`; // e.g. https://example.com/weather
-
-if (!baseURL || !privateKey || !endpointPath) {
-  console.error("Missing required environment variables");
-  process.exit(1);
-}
+const evmPrivateKey = process.env.EVM_PRIVATE_KEY as `0x${string}`;
+const svmPrivateKey = process.env.SVM_PRIVATE_KEY as string;
+const baseURL = process.env.RESOURCE_SERVER_URL || "http://localhost:4021";
+const endpointPath = process.env.ENDPOINT_PATH || "/weather";
+const url = `${baseURL}${endpointPath}`;
 
 /**
- * This example shows how to use the x402-fetch package to make a request to a resource server that requires a payment.
+ * Example demonstrating how to use @x402/fetch to make requests to x402-protected endpoints.
  *
- * To run this example, you need to set the following environment variables:
- * - PRIVATE_KEY: The private key of the signer
- * - RESOURCE_SERVER_URL: The URL of the resource server
- * - ENDPOINT_PATH: The path of the endpoint to call on the resource server
+ * This uses the helper registration functions from @x402/evm and @x402/svm to register
+ * all supported networks for both v1 and v2 protocols.
+ *
+ * Required environment variables:
+ * - EVM_PRIVATE_KEY: The private key of the EVM signer
+ * - SVM_PRIVATE_KEY: The private key of the SVM signer
  */
 async function main(): Promise<void> {
-  // const signer = await createSigner("solana-devnet", privateKey); // uncomment for solana
-  const signer = await createSigner("base-sepolia", privateKey);
-  const fetchWithPayment = wrapFetchWithPayment(fetch, signer);
+  const evmSigner = privateKeyToAccount(evmPrivateKey);
+  const svmSigner = await createKeyPairSignerFromBytes(base58.decode(svmPrivateKey));
+
+  const client = new x402Client();
+  registerExactEvmScheme(client, { signer: evmSigner });
+  registerExactSvmScheme(client, { signer: svmSigner });
+
+  const fetchWithPayment = wrapFetchWithPayment(fetch, client);
 
+  console.log(`Making request to: ${url}\n`);
   const response = await fetchWithPayment(url, { method: "GET" });
   const body = await response.json();
-  console.log(body);
+  console.log("Response body:", body);
 
-  const paymentResponse = decodeXPaymentResponse(response.headers.get("x-payment-response")!);
-  console.log(paymentResponse);
+  if (response.ok) {
+    const paymentResponse = new x402HTTPClient(client).getPaymentSettleResponse(name =>
+      response.headers.get(name),
+    );
+    console.log("\nPayment response:", JSON.stringify(paymentResponse, null, 2));
+  } else {
+    console.log(`\nNo payment settled (response status: ${response.status})`);
+  }
 }
 
 main().catch(error => {

package/template/package.json

@@ -1,18 +1,25 @@
 {
-  "name": "fetch-client-example",
+  "name": "@x402/fetch-client-example",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "tsx index.ts",
-    "dev:multi-network-signer": "tsx multi-network-signer.ts",
+    "start": "tsx index.ts",
+    "dev": "tsx index.ts builder-pattern",
+    "dev:hooks": "tsx index.ts hooks",
+    "dev:mechanism-helper-registration": "tsx index.ts mechanism-helper-registration",
     "format": "prettier -c .prettierrc --write \"**/*.{ts,js,cjs,json,md}\"",
     "format:check": "prettier -c .prettierrc --check \"**/*.{ts,js,cjs,json,md}\"",
     "lint": "eslint . --ext .ts --fix",
     "lint:check": "eslint . --ext .ts"
   },
   "dependencies": {
+    "@scure/base": "^1.2.6",
+    "@solana/kit": "^2.1.1",
+    "@x402/evm": "^2.2.0",
+    "@x402/fetch": "^2.2.0",
+    "@x402/svm": "^2.2.0",
     "dotenv": "^16.4.7",
-    "x402-fetch": "^0.6.6"
+    "viem": "^2.39.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",

package/template/multi-network-signer.ts

@@ -1,48 +0,0 @@
-import { config } from "dotenv";
-import {
-  decodeXPaymentResponse,
-  wrapFetchWithPayment,
-  createSigner,
-  type Hex,
-  type MultiNetworkSigner,
-} from "x402-fetch";
-
-config();
-
-const evmPrivateKey = process.env.EVM_PRIVATE_KEY as Hex;
-const svmPrivateKey = process.env.SVM_PRIVATE_KEY as string;
-const baseURL = process.env.RESOURCE_SERVER_URL as string; // e.g. https://example.com
-const endpointPath = process.env.ENDPOINT_PATH as string; // e.g. /weather
-const url = `${baseURL}${endpointPath}`; // e.g. https://example.com/weather
-
-if (!baseURL || !evmPrivateKey || !svmPrivateKey || !endpointPath) {
-  console.error("Missing required environment variables");
-  process.exit(1);
-}
-
-/**
- * This example shows how to use the x402-fetch package to make a request to a resource server that requires a payment.
- *
- * To run this example, you need to set the following environment variables:
- * - PRIVATE_KEY: The private key of the signer
- * - RESOURCE_SERVER_URL: The URL of the resource server
- * - ENDPOINT_PATH: The path of the endpoint to call on the resource server
- */
-async function main(): Promise<void> {
-  const evmSigner = await createSigner("base-sepolia", evmPrivateKey);
-  const svmSigner = await createSigner("solana-devnet", svmPrivateKey);
-  const signer = { evm: evmSigner, svm: svmSigner } as MultiNetworkSigner;
-  const fetchWithPayment = wrapFetchWithPayment(fetch, signer);
-
-  const response = await fetchWithPayment(url, { method: "GET" });
-  const body = await response.json();
-  console.log(body);
-
-  const paymentResponse = decodeXPaymentResponse(response.headers.get("x-payment-response")!);
-  console.log(paymentResponse);
-}
-
-main().catch(error => {
-  console.error(error?.response?.data?.error ?? error);
-  process.exit(1);
-});