Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion biome.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"organizeImports": {
"enabled": true
},
Expand Down
5 changes: 5 additions & 0 deletions examples/playground/x402-demo/.astro/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1767807090317
}
}
1 change: 1 addition & 0 deletions examples/playground/x402-demo/.astro/types.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="astro/client" />
1 change: 1 addition & 0 deletions examples/playground/x402-demo/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
PINATA_JWT=your_pinata_jwt_token_here
127 changes: 127 additions & 0 deletions examples/playground/x402-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# X402 Monetization Demo

A comprehensive Astro demo application showcasing the complete Pinata X402 Monetization API functionality with file upload, management, and payment instruction workflows.

## Features

### File Management
- Upload files to IPFS via Pinata
- View uploaded files with metadata (CID, size, type, creation date)
- Delete files from Pinata
- Direct links to view files via IPFS gateway

### Payment Instructions
- Create payment instructions with multiple payment requirements
- USDC payments on Base and Base Sepolia networks
- View and manage existing payment instructions
- Update and delete payment instructions

### CID-Payment Association
- Associate uploaded file CIDs with payment instructions
- Attach multiple CIDs to a single payment instruction
- Each CID can only have one payment instruction at a time
- View and remove CID associations

### Auto-Run Demo
- **🚀 One-click complete workflow demonstration**
- Automatically generates unique timestamped test files
- Uploads files and creates payment instructions
- Associates CIDs with payment instructions
- Provides detailed step-by-step results
- Perfect for testing and demonstrating the entire API flow

## Setup

1. Copy `.env.example` to `.env` and add your Pinata JWT:
```bash
cp .env.example .env
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Open your browser to `http://localhost:4321`

## Environment Variables

- `PINATA_JWT` - Your Pinata API JWT token (required)

## API Endpoints

The demo includes the following API routes:

### File Management
- `GET /api/files` - List uploaded files
- `POST /api/files` - Upload new file
- `GET /api/files/[id]` - Get file information
- `PATCH /api/files/[id]` - Update file metadata
- `DELETE /api/files/[id]` - Delete file

### Payment Instructions
- `GET /api/payment-instructions` - List payment instructions
- `POST /api/payment-instructions` - Create payment instruction
- `GET /api/payment-instructions/[id]` - Get payment instruction
- `PATCH /api/payment-instructions/[id]` - Update payment instruction
- `DELETE /api/payment-instructions/[id]` - Delete payment instruction

### CID Management
- `GET /api/payment-instructions/[id]/cids` - List CIDs for payment instruction
- `PUT /api/payment-instructions/[id]/cids/[cid]` - Add CID to payment instruction
- `DELETE /api/payment-instructions/[id]/cids/[cid]` - Remove CID from payment instruction

### Auto-Run Demo
- `POST /api/auto-run` - Execute complete demo workflow

## Usage

### Quick Start - Auto-Run Demo
1. **🚀 Click "Run Complete Demo"** - This will automatically execute the entire workflow:
- Generate a unique test file with timestamp
- Upload it to IPFS
- Create a payment instruction with USDC on Base Sepolia
- Associate the CID with the payment instruction
- Display detailed results

### Manual Workflow
1. **Upload Files**: Use the file upload form to upload content to IPFS and get CIDs.

2. **Create Payment Instructions**: Fill out the form with payment details:
- **Asset**: Contract address (e.g., `0x036CbD53842c5426634e7929541eC2318f3dCF7e`)
- **Pay To Address**: Recipient wallet address
- **Network**: `base`, `base-sepolia`, `eip155:8453`, or `eip155:84532`
- **Amount**: Amount in smallest unit (e.g., `1000000` for token amounts)

3. **Associate Files with Payments**: Click "Attach Payment" on any file to associate it with existing payment instructions.

4. **View and Manage**:
- View all files with their metadata and gateway links
- View payment instructions with their requirements
- Manage CID associations through modals

5. **Delete and Clean Up**: Remove files, payment instructions, or associations as needed.

## Project Structure

```
src/
├── components/ # Reusable Astro components
├── layouts/ # Page layouts
├── pages/ # Pages and API routes
│ ├── api/ # API endpoints
│ └── index.astro # Main page
└── public/ # Static assets
```

## Technologies Used

- [Astro](https://astro.build/) - Web framework
- [Pinata SDK](https://docs.pinata.cloud/) - X402 Monetization API
- Vanilla JavaScript - Frontend interactions
- CSS - Styling
12 changes: 12 additions & 0 deletions examples/playground/x402-demo/astro.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone'
}),
server: {
port: 4321
}
});
Loading