@qhristen/paygrid 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhristen/paygrid",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Self-hosted Web3 payments infrastructure for Solana",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/auth/login-screen.jsx

@@ -1,49 +0,0 @@
-'use client';
-import React, { useActionState } from 'react';
-import { login } from './actions';
-import { Loader2 } from 'lucide-react';
-export function LoginScreen() {
-    const [state, formAction, isPending] = useActionState(login, null);
-    return (<div className="min-h-screen flex items-center justify-center bg-[#050505] text-white overflow-hidden relative">
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900/20 via-[#050505] to-[#050505] z-0 pointer-events-none"/>
-
-            <div className="w-full max-w-md p-8 rounded-2xl border border-white/10 bg-[#111]/80 backdrop-blur-xl shadow-2xl z-10">
-                <div className="mb-8 text-center">
-                    <div className="mx-auto w-12 h-12 bg-indigo-500 rounded-xl flex items-center justify-center mb-4 shadow-lg shadow-indigo-500/20">
-                        <span className="text-xl font-bold text-white">P</span>
-                    </div>
-                    <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">Welcome Back</h1>
-                    <p className="text-gray-500 text-sm mt-2">Sign in to your PayGrid dashboard</p>
-                </div>
-
-                <form action={formAction} className="space-y-4">
-                    <div className="space-y-2">
-                        <label htmlFor="email" className="text-sm font-medium text-gray-300">Email</label>
-                        <input id="email" name="email" type="email" required placeholder="admin@paygrid.com" className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all placeholder:text-gray-600 hover:border-white/20"/>
-                    </div>
-
-                    <div className="space-y-2">
-                        <label htmlFor="password" className="text-sm font-medium text-gray-300">Password</label>
-                        <input id="password" name="password" type="password" required placeholder="••••••••" className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all placeholder:text-gray-600 hover:border-white/20"/>
-                    </div>
-
-                    {state?.error && (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
-                            {state.error}
-                        </div>)}
-
-                    <button type="submit" disabled={isPending} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-lg transition-all shadow-lg shadow-indigo-600/20 flex items-center justify-center gap-2 mt-6 disabled:opacity-50 disabled:cursor-not-allowed">
-                        {isPending ? (<>
-                                <Loader2 className="w-4 h-4 animate-spin"/>
-                                Signing in...
-                            </>) : ("Sign In")}
-                    </button>
-
-                    <div className="mt-6 text-center">
-                        <p className="text-xs text-gray-600">
-                            Secure admin access only
-                        </p>
-                    </div>
-                </form>
-            </div>
-        </div>);
-}

package/dist/checkout/index.jsx

@@ -1,235 +0,0 @@
-"use client";
-import { initWASM, isWASMSupported, ShadowWireClient, } from "@radr/shadowwire";
-import { useEffect, useState } from "react";
-import { SUPPORTED_TOKENS } from "../config";
-import { PaymentMethod } from "../types";
-export function CheckoutModal({ amount: propsAmount, method: propsMethod, tokenSymbol: propsTokenSymbol, sender: propsSender, onPaymentResponse, }) {
-    const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
-    const [step, setStep] = useState("config");
-    const [selectedToken, setSelectedToken] = useState(propsTokenSymbol);
-    const [selectedMethod, setSelectedMethod] = useState(propsMethod === "manual-transfer"
-        ? PaymentMethod.MANUAL_TRANSFER
-        : PaymentMethod.WALLET_SIGNING);
-    const [client] = useState(() => new ShadowWireClient());
-    const [amount, setAmount] = useState(propsAmount);
-    const [activeIntent, setActiveIntent] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const apiKey = process.env.NEXT_PUBLIC_PAYGRID_API_SECRET;
-    const [wasmInitialized, setWasmInitialized] = useState(false);
-    const [balance, setBalance] = useState(null);
-    useEffect(() => {
-        async function init() {
-            if (!isWASMSupported()) {
-                setError("WebAssembly not supported");
-                return;
-            }
-            try {
-                await initWASM("/wasm/settler_wasm_bg.wasm");
-                setWasmInitialized(true);
-                await loadBalance();
-            }
-            catch (err) {
-                setError("Initialization failed: " + err.message);
-            }
-        }
-        init();
-    }, []);
-    const loadBalance = async () => {
-        try {
-            const data = await client.getBalance(propsSender, selectedToken);
-            setBalance(data.available / 1e9);
-        }
-        catch (err) {
-            console.error("Balance load failed:", err);
-        }
-    };
-    const handleStartPayment = async () => {
-        try {
-            setIsLoading(true);
-            setError(null);
-            const headers = {};
-            if (apiKey)
-                headers["x-api-key"] = apiKey;
-            const response = await fetch("/api/paygrid/payment-intents", {
-                method: "POST",
-                headers: {
-                    ...headers,
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    amount,
-                    method: propsMethod,
-                    tokenSymbol: selectedToken,
-                    sender: propsSender,
-                }),
-            });
-            // setStep("paying");
-            if (!response.ok) {
-                throw new Error(`Payment intent creation failed: ${response.statusText}`);
-            }
-            const data = (await response.json());
-            if (onPaymentResponse) {
-                onPaymentResponse(data);
-            }
-            setActiveIntent(data);
-            setStep("paying");
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : "An error occurred";
-            setError(errorMessage);
-            console.error("Payment error:", err);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    return (<div>
-      <button onClick={() => setIsCheckoutOpen(true)} className="bg-white/5 hover:bg-white/10 cursor-pointer border border-white/10 text-white px-8 py-4 rounded-2xl font-bold text-lg transition-all">
-        Pay now
-      </button>
-
-      {isCheckoutOpen && (<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setIsCheckoutOpen(false)}></div>
-
-          <div className="relative w-full max-w-md bg-[#111] border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
-            <div className="p-6">
-              <div className="flex justify-between items-center mb-6">
-                <div className="flex items-center gap-2">
-                  <div className="w-6 h-6 bg-indigo-600 rounded flex items-center justify-center text-[10px] font-bold">
-                    P
-                  </div>
-                  <span className="font-bold">PayGrid checkout</span>
-                </div>
-                <button onClick={() => setIsCheckoutOpen(false)} className="text-gray-500 cursor-pointer hover:text-white">
-                  &times;
-                </button>
-              </div>
-
-              {step === "config" && (<div className="space-y-6">
-                  <div>
-                    <label className="text-xs text-gray-500 font-bold uppercase block mb-2">
-                      Select Token
-                    </label>
-                    <div className="grid grid-cols-3 gap-2">
-                      {SUPPORTED_TOKENS.map((token) => (<button key={token.symbol} disabled={token.disabled} onClick={() => setSelectedToken(token.symbol)} className={`p-3 rounded-xl  cursor-pointer border transition-all flex flex-col items-center gap-1 ${selectedToken === token.symbol ? "border-indigo-500 bg-indigo-500/10" : "border-white/5 bg-white/5 hover:border-white/20"}`}>
-                          <div className="w-6 h-6 rounded-full" style={{ backgroundColor: token.color }}></div>
-                          <span className="text-sm font-medium">
-                            {token.symbol}
-                          </span>
-                        </button>))}
-                    </div>
-                  </div>
-
-                  <div>
-                    <label className="text-xs text-gray-500 font-bold uppercase block mb-2">
-                      Payment Method
-                    </label>
-                    <div className="space-y-2">
-                      <button onClick={() => setSelectedMethod(PaymentMethod.WALLET_SIGNING)} className={`w-full p-4  cursor-pointer rounded-xl border text-left flex items-center gap-3 transition-all ${selectedMethod === PaymentMethod.WALLET_SIGNING ? "border-indigo-500 bg-indigo-500/10" : "border-white/5 bg-white/5"}`}>
-                        <div className="p-2 bg-white/5 rounded-lg">⚡</div>
-                        <div>
-                          <p className="text-sm font-semibold">
-                            Wallet Signing
-                          </p>
-                          <p className="text-xs text-gray-500">
-                            Sign with Phantom, Solflare or Backpack
-                          </p>
-                        </div>
-                      </button>
-                      <button onClick={() => setSelectedMethod(PaymentMethod.MANUAL_TRANSFER)} disabled className={`w-full p-4  cursor-pointer rounded-xl border text-left flex items-center gap-3 transition-all ${selectedMethod === PaymentMethod.MANUAL_TRANSFER ? "border-indigo-500 bg-indigo-500/10" : "border-white/5 bg-white/5"}`}>
-                        <div className="p-2 bg-white/5 rounded-lg">📋</div>
-                        <div>
-                          <p className="text-sm font-semibold">
-                            Manual Transfer
-                          </p>
-                          <p className="text-xs text-gray-500">
-                            Send tokens to a unique address
-                          </p>
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="pt-4 border-t border-white/10">
-                    <div className="flex justify-between items-end mb-4">
-                      <span className="text-gray-400 text-sm">Total Due</span>
-                      <div className="text-right">
-                        <span className="text-2xl font-bold">
-                          {amount} {selectedToken}
-                        </span>
-                        <p className="text-xs text-gray-500">{`~${amount} ${selectedToken}`}</p>
-                      </div>
-                    </div>
-                    {error && (<div className="bg-red-500/10 border border-red-500/20 p-3 rounded-lg mb-4">
-                        <p className="text-xs text-red-400">{error}</p>
-                      </div>)}
-                    <button onClick={handleStartPayment} disabled={isLoading} className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                      {isLoading ? "Processing..." : "Confirm & Pay"}
-                    </button>
-                  </div>
-                </div>)}
-
-              {step === "paying" && (<div className="text-center py-8">
-                  <div className="relative w-24 h-24 mx-auto mb-6">
-                    <div className="absolute inset-0 border-4 border-indigo-500/20 rounded-full"></div>
-                    <div className="absolute inset-0 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
-                    <div className="absolute inset-0 flex items-center justify-center font-bold text-lg">
-                      {selectedToken}
-                    </div>
-                  </div>
-                  <h3 className="text-xl font-bold mb-2">
-                    Awaiting Transaction
-                  </h3>
-                  <p className="text-gray-500 text-sm mb-6 max-w-[280px] mx-auto">
-                    Please complete the transaction in your wallet. We are
-                    monitoring the Solana network.
-                  </p>
-                  <div className="bg-white/5 border border-white/10 p-4 rounded-2xl font-mono text-xs text-left">
-                    <div className="flex justify-between mb-1">
-                      <span className="text-gray-500">Network</span>
-                      <span>Solana Mainnet</span>
-                    </div>
-                    <div className="flex justify-between mb-1">
-                      <span className="text-gray-500">Status</span>
-                      <span className="text-amber-400">Monitoring...</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-500">Intent ID</span>
-                      <span>{activeIntent?.id}</span>
-                    </div>
-                  </div>
-                </div>)}
-
-              {step === "success" && (<div className="text-center py-8">
-                  <div className="w-20 h-20 bg-emerald-500/20 text-emerald-500 rounded-full mx-auto flex items-center justify-center text-4xl mb-6">
-                    ✓
-                  </div>
-                  <h3 className="text-2xl font-bold mb-2">Payment Settled!</h3>
-                  <p className="text-gray-400 text-sm mb-6">
-                    Your transaction has been confirmed on the blockchain.
-                  </p>
-
-                  {/* <div className="space-y-3 text-left">
-                  <div className="bg-white/5 p-4 rounded-2xl border border-white/5">
-                    <p className="text-[10px] text-gray-500 uppercase font-bold mb-1">
-                      Transaction Hash
-                    </p>
-                    <p className="text-xs font-mono text-indigo-400 truncate">
-                      {activeIntent?.transactionSignature}
-                    </p>
-                  </div>
-                </div> */}
-                </div>)}
-            </div>
-
-            <div className="bg-white/5 p-4 text-center">
-              <p className="text-[10px] text-gray-500 font-medium">
-                Powering the decentralized privacy economy with PayGrid
-              </p>
-            </div>
-          </div>
-        </div>)}
-    </div>);
-}
-export default CheckoutModal;

package/dist/dashboard/api-section.jsx

@@ -1,146 +0,0 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-const ApiKeysSection = ({ apiKey, baseUrl }) => {
-    const [keys, setKeys] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [newKeyData, setNewKeyData] = useState(null);
-    const fetchKeys = async () => {
-        setIsLoading(true);
-        try {
-            const headers = {};
-            if (apiKey)
-                headers['x-api-key'] = apiKey;
-            const res = await fetch(`${baseUrl}/api-keys`, { headers });
-            if (res.ok) {
-                const data = await res.json();
-                setKeys(data);
-            }
-        }
-        catch (error) {
-            console.error('Failed to fetch API keys:', error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const createKey = async () => {
-        const name = prompt('Enter a name for the new API key:');
-        if (!name)
-            return;
-        setIsLoading(true);
-        try {
-            const headers = {
-                'Content-Type': 'application/json',
-            };
-            if (apiKey)
-                headers['x-api-key'] = apiKey;
-            const res = await fetch(`${baseUrl}/api-keys`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({ name }),
-            });
-            if (res.ok) {
-                const result = await res.json();
-                setNewKeyData({ key: result.key, name: result.apiKey.name });
-                fetchKeys();
-            }
-        }
-        catch (error) {
-            console.error('Failed to create API key:', error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const revokeKey = async (id, name) => {
-        if (!confirm(`Are you sure you want to revoke the key "${name}"? This action cannot be undone.`))
-            return;
-        setIsLoading(true);
-        try {
-            const headers = {};
-            if (apiKey)
-                headers['x-api-key'] = apiKey;
-            const res = await fetch(`${baseUrl}/api-keys/${id}`, {
-                method: 'DELETE',
-                headers
-            });
-            if (res.ok) {
-                fetchKeys();
-            }
-        }
-        catch (error) {
-            console.error('Failed to revoke API key:', error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    useEffect(() => {
-        fetchKeys();
-    }, [apiKey, baseUrl]);
-    return (<div className="space-y-6">
-      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-        <div>
-          <h3 className="text-xl font-bold">API Access Tokens</h3>
-          <p className="text-gray-500 text-sm">Generate keys to integrate PayGrid into your applications.</p>
-        </div>
-        <button onClick={createKey} disabled={isLoading} className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50">
-          {isLoading ? 'Creating...' : '+ Create New Key'}
-        </button>
-      </div>
-
-      {newKeyData && (<div className="bg-emerald-500/10 border border-emerald-500/20 p-6 rounded-2xl relative">
-          <button onClick={() => setNewKeyData(null)} className="absolute top-4 right-4 text-gray-400 hover:text-white">
-            ✕
-          </button>
-          <h4 className="text-emerald-400 font-semibold mb-2">New API Key Created!</h4>
-          <p className="text-sm text-gray-400 mb-4">Make sure to copy your API key now. You won't be able to see it again.</p>
-          <div className="flex items-center gap-2">
-            <pre className="bg-black/50 p-4 rounded-xl font-mono text-sm text-emerald-300 flex-1 overflow-x-auto">
-              {newKeyData.key}
-            </pre>
-            <button onClick={() => navigator.clipboard.writeText(newKeyData.key)} className="bg-white/5 hover:bg-white/10 p-4 rounded-xl transition-colors" title="Copy to clipboard">
-              📋
-            </button>
-          </div>
-        </div>)}
-
-      <div className="grid gap-4">
-        {isLoading && keys.length === 0 ? (<div className="text-center py-12 text-gray-500">Loading keys...</div>) : keys.length === 0 ? (<div className="text-center py-12 text-gray-500 font-medium bg-[#111] border border-white/10 rounded-2xl">
-            No API keys found. Create one to get started.
-          </div>) : (keys.map(key => (<div key={key.id} className="bg-[#111] border border-white/10 p-4 md:p-6 rounded-2xl flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-              <div className="flex items-center gap-4">
-                <div className="w-10 h-10 bg-white/5 rounded-full flex-shrink-0 flex items-center justify-center">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#888" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 2-2 2.23"/><path d="M7 22 22.77 6.23a2 2 0 0 0 0-2.83l-.77-.77a2 2 0 0 0-2.83 0L3.41 18.41A2 2 0 0 0 3 19.83V22h2.17a2 2 0 0 0 1.42-.59Z"/><path d="m15 5 4 4"/></svg>
-                </div>
-                <div className="min-w-0">
-                  <h4 className="font-semibold truncate">{key.name}</h4>
-                  <p className="text-xs font-mono text-gray-500 mt-1">{key.keyHint}••••••••••••••••</p>
-                </div>
-              </div>
-              <div className="flex items-center justify-between md:justify-end gap-6 border-t md:border-t-0 border-white/5 pt-4 md:pt-0">
-                <div className="text-left md:text-right">
-                  <p className="text-[10px] text-gray-500 uppercase font-bold">Created</p>
-                  <p className="text-sm">{new Date(key.createdAt).toLocaleDateString()}</p>
-                </div>
-                <button onClick={() => revokeKey(key.id, key.name)} className="text-red-400 hover:text-red-300 text-xs font-semibold p-2">
-                  Revoke
-                </button>
-              </div>
-            </div>)))}
-      </div>
-
-      <div className="bg-indigo-500/5 border border-indigo-500/20 p-6 rounded-2xl">
-        <h4 className="text-indigo-400 font-semibold mb-2">Integration Guide</h4>
-        <p className="text-sm text-gray-400 mb-4">Initialize the SDK in your Next.js application using your API secret key.</p>
-        <pre className="bg-black/50 p-4 rounded-xl font-mono text-xs text-indigo-300 overflow-x-auto">
-          {`const paygrid = initPayGrid({
-  apiKey: process.env.PAYGRID_API_KEY,
-  rpcUrl: 'https://api.devnet.solana.com',
-  network: 'devnet'
-});`}
-        </pre>
-      </div>
-    </div>);
-};
-export default ApiKeysSection;

package/dist/dashboard/constant.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-export const SUPPORTED_TOKENS = [
-    { symbol: 'SOL', mint: '11111111111111111111111111111111', color: '#14F195' },
-    { symbol: 'USDC', mint: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', color: '#2775CA' },
-    { symbol: 'BONK', mint: 'DezXAZ8z7PnrnRJjz3wXBoRgixJ6WoPBw5DRF6S49t38', color: '#FFA500' }
-];
-export const Icons = {
-    Dashboard: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>),
-    Payments: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>),
-    Key: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m21 2-2 2.23"/><path d="M7 22 22.77 6.23a2 2 0 0 0 0-2.83l-.77-.77a2 2 0 0 0-2.83 0L3.41 18.41A2 2 0 0 0 3 19.83V22h2.17a2 2 0 0 0 1.42-.59Z"/><path d="m15 5 4 4"/></svg>),
-    Search: () => (<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>),
-    External: () => (<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>)
-};