opencard 1.0.0

package/admin/src/pages/Transactions.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect } from "react";
+
+interface Transaction {
+  id: string;
+  walletAddress: string;
+  cardId: string | null;
+  type: string;
+  amountUsd: string;
+  cardAmountUsd: string;
+  feeUsd: string;
+  kripiCardFeeUsd: string;
+  txHash: string | null;
+  status: string;
+  errorMessage: string | null;
+  createdAt: string;
+}
+
+export default function Transactions({ token }: { token: string }) {
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [filter, setFilter] = useState<string>("all");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchTransactions();
+  }, [filter]);
+
+  async function fetchTransactions() {
+    setLoading(true);
+    try {
+      const params = filter !== "all" ? `?status=${filter}` : "";
+      const res = await fetch(`/admin/api/transactions${params}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setTransactions(data.transactions);
+      }
+    } catch {
+      // ignore
+    }
+    setLoading(false);
+  }
+
+  const statusColors: Record<string, string> = {
+    completed: "var(--success)",
+    failed: "var(--danger)",
+    pending: "var(--warning)",
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2
+          className="text-2xl font-bold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          Transactions
+        </h2>
+        <div className="flex gap-1">
+          {["all", "completed", "failed", "pending"].map((f) => (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition-all"
+              style={{
+                background: filter === f ? "var(--accent-glow)" : "transparent",
+                color: filter === f ? "var(--accent)" : "var(--text-muted)",
+              }}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <div
+            className="w-8 h-8 rounded-full border-2 border-t-transparent animate-spin"
+            style={{
+              borderColor: "var(--accent)",
+              borderTopColor: "transparent",
+            }}
+          />
+        </div>
+      ) : (
+        <div
+          className="overflow-x-auto rounded-xl"
+          style={{ border: "1px solid var(--border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bg-secondary)" }}>
+                <th
+                  className="text-left px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Type
+                </th>
+                <th
+                  className="text-left px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Wallet
+                </th>
+                <th
+                  className="text-right px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Charged
+                </th>
+                <th
+                  className="text-right px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Card Load
+                </th>
+                <th
+                  className="text-right px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Our Fee
+                </th>
+                <th
+                  className="text-center px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Status
+                </th>
+                <th
+                  className="text-left px-4 py-3 font-medium"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Date
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((tx) => (
+                <tr
+                  key={tx.id}
+                  className="transition-colors"
+                  style={{ borderTop: "1px solid var(--border)" }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.background = "var(--bg-card-hover)")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.background = "transparent")
+                  }
+                >
+                  <td className="px-4 py-3">
+                    <span
+                      className="text-xs px-2 py-1 rounded-md font-medium"
+                      style={{
+                        background: "var(--accent-glow)",
+                        color: "var(--accent)",
+                      }}
+                    >
+                      {tx.type.replace("card_", "")}
+                    </span>
+                  </td>
+                  <td
+                    className="px-4 py-3 font-mono text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    {tx.walletAddress.slice(0, 6)}...
+                    {tx.walletAddress.slice(-4)}
+                  </td>
+                  <td
+                    className="px-4 py-3 text-right font-medium"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    ${parseFloat(tx.amountUsd).toFixed(2)}
+                  </td>
+                  <td
+                    className="px-4 py-3 text-right"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    ${parseFloat(tx.cardAmountUsd).toFixed(2)}
+                  </td>
+                  <td
+                    className="px-4 py-3 text-right"
+                    style={{ color: "var(--success)" }}
+                  >
+                    ${parseFloat(tx.feeUsd).toFixed(2)}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <span
+                      className="text-xs px-2 py-1 rounded-full font-medium"
+                      style={{
+                        background: `${statusColors[tx.status]}15`,
+                        color: statusColors[tx.status] || "var(--text-muted)",
+                      }}
+                    >
+                      {tx.status}
+                    </span>
+                  </td>
+                  <td
+                    className="px-4 py-3 text-xs"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    {new Date(tx.createdAt).toLocaleString()}
+                  </td>
+                </tr>
+              ))}
+              {transactions.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={7}
+                    className="px-4 py-12 text-center"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    No transactions found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/admin/tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+      },
+      colors: {
+        brand: {
+          50: "#eef2ff",
+          100: "#e0e7ff",
+          200: "#c7d2fe",
+          300: "#a5b4fc",
+          400: "#818cf8",
+          500: "#6366f1",
+          600: "#4f46e5",
+          700: "#4338ca",
+          800: "#3730a3",
+          900: "#312e81",
+          950: "#1e1b4b",
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/admin/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/admin/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/pages/cards.tsx","./src/pages/dashboard.tsx","./src/pages/transactions.tsx"],"version":"5.9.3"}

package/admin/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "/admin/app/",
+  build: {
+    outDir: "dist",
+  },
+  server: {
+    proxy: {
+      "/admin/api": "http://localhost:3000",
+      "/health": "http://localhost:3000",
+      "/pricing": "http://localhost:3000",
+    },
+  },
+});

package/drizzle.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "drizzle-kit";
+import "dotenv/config";
+
+export default defineConfig({
+  schema: "./src/db/schema.ts",
+  out: "./drizzle/migrations",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/examples/agent-client-sdk.ts

@@ -0,0 +1,36 @@
+/**
+ * AI Agent using @opencard/sdk
+ *
+ * Compare with agent-client.ts (raw x402 protocol) — same result, 5 lines.
+ */
+import { OpenCardClient } from "@opencardsdk/sdk";
+import "dotenv/config";
+
+const client = new OpenCardClient({
+  privateKey: process.env.WALLET_KEY as `0x${string}`,
+  baseUrl: process.env.OPENCARD_API_URL || "http://localhost:3000",
+});
+
+console.log(`Wallet: ${client.address}`);
+
+// One line — SDK handles 402 → USDC payment → retry automatically
+const result = await client.createCard({
+  amount: 10,
+  nameOnCard: "AI AGENT",
+  email: "agent@example.com",
+});
+
+console.log("Card created:", {
+  cardId: result.card.cardId,
+  status: result.card.status,
+  balance: result.card.balance,
+  lastFour: result.card.lastFour,
+});
+
+if (result.cardDetails) {
+  console.log("Card details:", {
+    number: result.cardDetails.cardNumber,
+    expiry: `${result.cardDetails.expiryMonth}/${result.cardDetails.expiryYear}`,
+    cvv: result.cardDetails.cvv,
+  });
+}

package/examples/agent-client.ts

@@ -0,0 +1,111 @@
+import { createWalletClient, http, parseEther, encodeFunctionData } from "viem";
+import { privateKeyToAccount } from "viem/accounts";
+import { base } from "viem/chains";
+import "dotenv/config";
+
+// Mock AI Agent Wallet
+// In reality, this would be the agent's actual wallet
+const account = privateKeyToAccount(
+  (process.env.TEST_WALLET_KEY as `0x${string}`) ||
+    "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80",
+);
+
+const client = createWalletClient({
+  account,
+  chain: base,
+  transport: http(),
+});
+
+const USDC_ABI = [
+  {
+    inputs: [
+      { name: "to", type: "address" },
+      { name: "amount", type: "uint256" },
+    ],
+    name: "transfer",
+    outputs: [{ name: "", type: "bool" }],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+] as const;
+
+async function purchaseCard() {
+  const endpoint = "http://localhost:3000/cards/create/tier/10";
+  const body = JSON.stringify({
+    nameOnCard: "AI AGENT",
+    email: "agent@example.com",
+  });
+
+  console.log("🤖 Agent: Requesting card...");
+
+  // 1. Initial Request (Expect 402)
+  const res = await fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body,
+  });
+
+  if (res.status === 402) {
+    const challenge = await res.json();
+    console.log("🔴 Server: 402 Payment Required");
+    console.log("   Details:", JSON.stringify(challenge, null, 2));
+
+    // 2. Parse Payment Requirements
+    const paymentReq = challenge.accepts[0];
+    const amount = BigInt(paymentReq.maxAmountRequired);
+    const to = paymentReq.payTo as `0x${string}`;
+    const token = paymentReq.asset as `0x${string}`;
+
+    console.log(
+      `🤖 Agent: Detected payment requirement: ${amount} units of ${token} on Base`,
+    );
+
+    // 3. Execute Transaction (Mocked for this example, or real if keys provided)
+    // In production, the agent signs and broadcasts the USDC transfer
+    // const hash = await client.writeContract({...});
+    const mockTxHash =
+      "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef";
+
+    console.log(`🤖 Agent: Payment sent! Tx Hash: ${mockTxHash}`);
+
+    // 4. Construct x402 Payment Proof
+    const paymentProof = {
+      scheme: "exact",
+      network: paymentReq.network,
+      payload: {
+        authorization: {
+          from: account.address,
+          to,
+          value: amount.toString(),
+          validAfter: "0",
+          validBefore: "9999999999",
+          nonce: "0",
+        },
+        signature: "0x...", // Signature of the authorization
+        txHash: mockTxHash, // The transaction hash
+      },
+    };
+
+    const encodedProof = Buffer.from(JSON.stringify(paymentProof)).toString(
+      "base64",
+    );
+
+    // 5. Retry Request with Payment Header
+    console.log("🤖 Agent: Retrying request with payment proof...");
+    const paidRes = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Payment": encodedProof,
+      },
+      body,
+    });
+
+    const result = await paidRes.json();
+    console.log("🟢 Server Response:", paidRes.status, result);
+  } else {
+    console.log("Response:", res.status, await res.json());
+  }
+}
+
+purchaseCard().catch(console.error);

package/examples/agent-fund-sdk.ts

@@ -0,0 +1,35 @@
+/**
+ * Fund an existing card using @opencard/sdk
+ */
+import { OpenCardClient, InsufficientBalanceError, ApiError } from "@opencardsdk/sdk";
+import "dotenv/config";
+
+const client = new OpenCardClient({
+  privateKey: process.env.WALLET_KEY as `0x${string}`,
+  baseUrl: process.env.OPENCARD_API_URL || "http://localhost:3000",
+});
+
+try {
+  // Check available tiers first
+  const tiers = await client.getTiers();
+  console.log(
+    "Funding tiers:",
+    tiers.funding.map((t) => `$${t.fundAmount} (cost: $${t.totalCost})`),
+  );
+
+  // Fund a card
+  const result = await client.fundCard({
+    amount: 25,
+    cardId: "your-card-id-here",
+  });
+
+  console.log("Card funded:", result);
+} catch (error) {
+  if (error instanceof InsufficientBalanceError) {
+    console.error("Not enough USDC:", error.message);
+  } else if (error instanceof ApiError) {
+    console.error(`API error ${error.status}:`, error.body);
+  } else {
+    throw error;
+  }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "opencard",
+  "version": "1.0.0",
+  "description": "x402-Powered Virtual Card Issuance API for AI Agents",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "db:generate": "drizzle-kit generate",
+    "db:push": "drizzle-kit push",
+    "db:migrate": "tsx src/db/migrate.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "express": "^4.21.0",
+    "@x402/express": "latest",
+    "@x402/evm": "latest",
+    "@x402/core": "latest",
+    "@coinbase/x402": "latest",
+    "viem": "^2.0.0",
+    "drizzle-orm": "^0.36.0",
+    "@neondatabase/serverless": "^0.10.0",
+    "zod": "^3.23.0",
+    "pino": "^9.0.0",
+    "pino-pretty": "^11.0.0",
+    "dotenv": "^16.4.0",
+    "express-rate-limit": "^7.0.0",
+    "helmet": "^8.0.0",
+    "cors": "^2.8.5"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0",
+    "tsx": "^4.0.0",
+    "drizzle-kit": "^0.28.0",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/cors": "^2.8.0"
+  }
+}

package/sdk/README.md

@@ -0,0 +1,139 @@
+# @opencardsdk/sdk
+
+Client SDK for OpenCard — create virtual cards with USDC payments via the x402 protocol.
+
+Wraps the raw x402 flow (402 → parse challenge → pay USDC → retry with proof) into one-liner methods.
+
+## Install
+
+```bash
+npm install @opencardsdk/sdk viem
+```
+
+## Quick Start
+
+```typescript
+import { OpenCardClient } from '@opencardsdk/sdk';
+
+const client = new OpenCardClient({
+  privateKey: '0x...',       // or pass a viem WalletClient
+  baseUrl: 'https://api.opencard.dev',
+});
+
+// One line — SDK handles payment automatically
+const card = await client.createCard({
+  amount: 10,               // $10 tier
+  nameOnCard: 'AI AGENT',
+  email: 'agent@example.com',
+});
+
+console.log(card.cardDetails); // { cardNumber, cvv, expiry, ... }
+```
+
+## API
+
+### `new OpenCardClient(config)`
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `privateKey` | `0x${string}` | One of | Hex private key — SDK creates wallet internally |
+| `walletClient` | `WalletClient` | One of | Your own viem WalletClient (takes precedence) |
+| `baseUrl` | `string` | No | API URL (default: `https://api.opencard.dev`) |
+| `rpcUrl` | `string` | No | Base RPC URL (default: public RPC) |
+| `timeout` | `number` | No | Request timeout in ms (default: 60000) |
+
+### `client.createCard(params): Promise<CardResult>`
+
+Create a virtual card. Pays USDC automatically.
+
+```typescript
+const result = await client.createCard({
+  amount: 50,               // 10 | 25 | 50 | 100 | 200 | 500
+  nameOnCard: 'AI AGENT',
+  email: 'agent@example.com',
+});
+```
+
+### `client.fundCard(params): Promise<FundResult>`
+
+Fund an existing card.
+
+```typescript
+const result = await client.fundCard({
+  amount: 25,
+  cardId: 'card-uuid',
+});
+```
+
+### `client.getTiers(): Promise<TiersResponse>`
+
+Get pricing tiers and fee breakdown (no payment required).
+
+### `client.health(): Promise<{ status: string }>`
+
+Check if the OpenCard API is reachable.
+
+### `client.address: 0x${string}`
+
+The wallet address being used for payments.
+
+## Error Handling
+
+```typescript
+import {
+  OpenCardClient,
+  InsufficientBalanceError,
+  PaymentError,
+  ApiError,
+  TimeoutError,
+} from '@opencardsdk/sdk';
+
+try {
+  const card = await client.createCard({ ... });
+} catch (error) {
+  if (error instanceof InsufficientBalanceError) {
+    console.log(`Need ${error.required}, have ${error.available}`);
+  } else if (error instanceof PaymentError) {
+    console.log(`Payment failed: ${error.message}, tx: ${error.txHash}`);
+  } else if (error instanceof ApiError) {
+    console.log(`Server error ${error.status}:`, error.body);
+  } else if (error instanceof TimeoutError) {
+    console.log('Request timed out');
+  }
+}
+```
+
+## Advanced: Low-Level x402 Utilities
+
+For custom integrations, the x402 protocol helpers are exported directly:
+
+```typescript
+import {
+  parseChallenge,
+  checkBalance,
+  executePayment,
+  buildPaymentProof,
+  handleX402Payment,
+} from '@opencardsdk/sdk';
+```
+
+## How It Works
+
+```
+Your Code          SDK                    OpenCard API          Base Chain
+   |                |                         |                    |
+   |-- createCard ->|                         |                    |
+   |                |--- POST /create/tier -->|                    |
+   |                |<-- 402 + challenge -----|                    |
+   |                |                         |                    |
+   |                |--- USDC.transfer() -----|-------- tx ------->|
+   |                |<-- txHash --------------|-------- receipt ---|
+   |                |                         |                    |
+   |                |--- POST + X-Payment --->|                    |
+   |                |<-- 201 + card details --|                    |
+   |<- CardResult --|                         |                    |
+```
+
+## License
+
+MIT