@voyage_ai/v402-web-ts 0.1.1 → 0.1.3

package/dist/react/styles.css

@@ -1,168 +1 @@
-/**
- * x402 React Components - Default Styles
- * 
- * ⚠️ DEPRECATED: This CSS file is no longer needed!
- * 
- * All styles are now inline within the components.
- * You can safely remove any imports of this file:
- * - import '@voyage_ai/v402-web-ts/react/styles.css' ❌
- * - import '@voyage_ai/v402-web-ts/styles.css' ❌
- * 
- * Just use the components directly - styles are built-in! ✅
- */
-
-.x402-wallet-connect {
-  width: 100%;
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-.x402-wallet-section,
-.x402-wallet-info {
-  padding: 2rem;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #ffffff;
-}
-
-.x402-section-title {
-  margin: 0 0 1.5rem 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  text-align: center;
-}
-
-.x402-wallet-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.x402-wallet-option {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.x402-connect-button,
-.x402-disconnect-button,
-.x402-pay-button {
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
-  font-weight: 500;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.x402-connect-button {
-  background: #0070f3;
-  color: white;
-}
-
-.x402-connect-button:hover:not(:disabled) {
-  background: #0051cc;
-}
-
-.x402-connect-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
-
-.x402-disconnect-button {
-  background: #ff4444;
-  color: white;
-}
-
-.x402-disconnect-button:hover {
-  background: #cc0000;
-}
-
-.x402-pay-button {
-  background: #00d084;
-  color: white;
-  width: 100%;
-}
-
-.x402-pay-button:hover:not(:disabled) {
-  background: #00a869;
-}
-
-.x402-pay-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
-
-.x402-install-link {
-  display: inline-block;
-  padding: 0.5rem;
-  font-size: 0.875rem;
-  color: #0070f3;
-  text-decoration: none;
-  text-align: center;
-}
-
-.x402-install-link:hover {
-  text-decoration: underline;
-}
-
-.x402-wallet-address {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.x402-wallet-label {
-  font-size: 0.875rem;
-  color: #666;
-}
-
-.x402-address {
-  font-family: monospace;
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.x402-wallet-actions {
-  margin: 1rem 0;
-}
-
-.x402-hint {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  color: #666;
-  text-align: center;
-}
-
-.x402-error {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background: #ffe0e0;
-  color: #cc0000;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .x402-wallet-section,
-  .x402-wallet-info {
-    background: #1a1a1a;
-    border-color: #333;
-  }
-
-  .x402-section-title {
-    color: #fff;
-  }
-
-  .x402-wallet-label {
-    color: #aaa;
-  }
-
-  .x402-hint {
-    color: #aaa;
-  }
-}
-
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-screen{height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.break-all{word-break:break-all}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.bg-black{background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black,.bg-gray-50{--tw-bg-opacity:1}.bg-gray-50{background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-blue-600{color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-600,.text-white{--tw-text-opacity:1}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-40{opacity:.4}.outline{outline-style:solid}.blur-xl{--tw-blur:blur(24px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}

package/package.json

@@ -1,28 +1,38 @@
 {
   "name": "@voyage_ai/v402-web-ts",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "v402pay platform frontend SDK for seamless Web3 payment integration with Solana and Ethereum support",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./react": {
+      "types": "./dist/react/index.d.ts",
+      "style": "./dist/react/styles.css",
       "import": "./dist/react/index.mjs",
-      "require": "./dist/react/index.js",
-      "types": "./dist/react/index.d.ts"
-    }
+      "require": "./dist/react/index.js"
+    },
+    "./react/styles.css": "./dist/react/styles.css"
   },
+  "sideEffects": [
+    "*.css",
+    "dist/react/styles.css",
+    "dist/react/index.js",
+    "dist/react/index.mjs"
+  ],
   "files": [
     "dist",
     "README.md"
   ],
   "scripts": {
-    "build": "tsup",
+    "build:css": "tailwindcss -i ./src/react/styles.css -o ./dist/react/styles.css --minify",
+    "build:js": "tsup",
+    "build": "npm run build:js && npm run build:css",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "prepublishOnly": "npm run build",
@@ -44,14 +54,22 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "@solana/web3.js": "^1.95.0",
+    "@ant-design/icons": "^5.0.0",
     "@solana/spl-token": "^0.4.0",
-    "ethers": "^6.0.0"
+    "@solana/web3.js": "^1.95.0",
+    "antd": "^5.0.0",
+    "ethers": "^6.0.0",
+    "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "antd": {
+      "optional": true
+    },
+    "@ant-design/icons": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -59,8 +77,13 @@
     "zod": "^3.22.0"
   },
   "devDependencies": {
+    "@ant-design/icons": "^5.0.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
+    "antd": "^5.0.0",
+    "autoprefixer": "^10.4.22",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   }

package/dist/react/components/PaymentButton.tsx

@@ -1,119 +0,0 @@
-/**
- * PaymentButton Component
- *
- * Pre-built payment button component with inline styles
- * Note: This is a simple wrapper. For complex payment flows,
- * use the SDK directly with usePayment hook for full control.
- */
-
-'use client';
-
-import React, {useState} from 'react';
-import {useWallet} from '../hooks/useWalletStore';
-import {usePayment} from '../hooks/usePayment';
-import {handlePayment} from '../../utils';
-import {getErrorStyle, getPayButtonStyle} from '../styles/inline-styles';
-
-export interface PaymentButtonProps {
-  endpoint: string;
-  className?: string;
-  disabled?: boolean;
-  onSuccess?: (result: any) => void;
-  onError?: (error: string) => void;
-  onStart?: () => void;
-  onFinish?: () => void;
-  children?: React.ReactNode;
-}
-
-/**
- * Simple pre-built payment button
- *
- * For complex payment flows, use the SDK directly:
- *
- * @example
- * ```tsx
- * import { useWallet, usePayment } from '../react';
- * import { handleSvmPayment } from '@/app/sdk';
- *
- * function CustomPayment() {
- *   const { networkType } = useWallet();
- *   const { isProcessing, setIsProcessing, setResult, setError } = usePayment();
- *
- *   const handlePay = async () => {
- *     setIsProcessing(true);
- *     try {
- *       // Your custom logic before payment
- *       const response = await handleSvmPayment(...);
- *       const data = await response.json();
- *
- *       // Your custom logic after payment
- *       setResult(data);
- *     } catch (err) {
- *       setError(err.message);
- *     } finally {
- *       setIsProcessing(false);
- *     }
- *   };
- * }
- * ```
- */
-export function PaymentButton({
-                                endpoint,
-                                className = '',
-                                disabled = false,
-                                onSuccess,
-                                onError,
-                                onStart,
-                                onFinish,
-                                children = 'Pay Now',
-                              }: PaymentButtonProps) {
-  const {networkType} = useWallet();
-  const {isProcessing, setIsProcessing, setResult, setError, error} = usePayment();
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleClick = async () => {
-    if (!networkType) {
-      const errorMsg = 'Please connect wallet first';
-      setError(errorMsg);
-      onError?.(errorMsg);
-      return;
-    }
-
-    try {
-      onStart?.();
-      setIsProcessing(true);
-      setError(null);
-
-      const result = await handlePayment(endpoint, networkType);
-
-      setResult(result);
-      onSuccess?.(result);
-    } catch (err: any) {
-      const errorMsg = err.message || 'Payment failed';
-      setError(errorMsg);
-      onError?.(errorMsg);
-    } finally {
-      setIsProcessing(false);
-      onFinish?.();
-    }
-  };
-
-  const isDisabled = disabled || isProcessing || !networkType;
-
-  return (
-      <>
-        <button
-            style={getPayButtonStyle(isDisabled, isHovered)}
-            className={className}
-            onClick={handleClick}
-            disabled={isDisabled}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-        >
-          {isProcessing ? 'Processing...' : children}
-        </button>
-        {error && <p style={getErrorStyle()}>{error}</p>}
-      </>
-  );
-}
-

package/dist/react/components/WalletConnect.tsx

@@ -1,152 +0,0 @@
-/**
- * WalletConnect Component
- *
- * Pre-built wallet connection UI component with inline styles
- */
-
-'use client';
-
-import React, {useState} from 'react';
-import {NetworkType} from '../../types';
-import {formatAddress, getNetworkDisplayName, getWalletInstallUrl, isWalletInstalled,} from '../../utils';
-import {useWallet} from '../hooks/useWalletStore';
-import {
-    buttonsContainerStyle,
-    containerStyle,
-    getAddressStyle,
-    getConnectButtonStyle,
-    getDisconnectButtonStyle,
-    getErrorStyle,
-    getHintStyle,
-    getInstallLinkStyle,
-    getLabelStyle,
-    getSectionStyle,
-    getTitleStyle,
-    walletActionsStyle,
-    walletAddressStyle,
-    walletOptionStyle,
-} from '../styles/inline-styles';
-
-export interface WalletConnectProps {
-  supportedNetworks?: NetworkType[];
-  className?: string;
-  onConnect?: (address: string, networkType: NetworkType) => void;
-  onDisconnect?: () => void;
-}
-
-/**
- * Pre-built wallet connection component
- *
- * @example
- * ```tsx
- * import { WalletConnect } from '../react';
- *
- * function App() {
- *   return (
- *     <WalletConnect
- *       supportedNetworks={[NetworkType.SOLANA, NetworkType.EVM]}
- *       onConnect={(address, network) => console.log('Connected:', address)}
- *     />
- *   );
- * }
- * ```
- */
-export function WalletConnect({
-                                supportedNetworks = [NetworkType.SOLANA, NetworkType.EVM],
-                                className = '',
-                                onConnect,
-                                onDisconnect,
-                              }: WalletConnectProps) {
-  const {address, networkType, isConnecting, error, connect, disconnect} = useWallet();
-  const [hoveredButton, setHoveredButton] = useState<string | null>(null);
-  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
-
-  const handleConnect = async (network: NetworkType) => {
-    try {
-      await connect(network);
-      // Note: address state won't be updated yet due to async setState
-      // The parent component will re-render when address updates
-    } catch (err) {
-      // Error is already set in hook
-    }
-  };
-
-  const handleDisconnect = () => {
-    disconnect();
-    onDisconnect?.();
-  };
-
-  return (
-      <div style={{ ...containerStyle, ...(className ? {} : {}) }} className={className}>
-        {!address ? (
-            <div style={getSectionStyle()}>
-              <h3 style={getTitleStyle()}>Connect Wallet</h3>
-
-              {supportedNetworks.length === 0 ? (
-                  <p style={getHintStyle()}>No payment required</p>
-              ) : (
-                  <div style={buttonsContainerStyle}>
-                    {supportedNetworks.map((network) => {
-                      const installed = isWalletInstalled(network);
-                      return (
-                          <div key={network} style={walletOptionStyle}>
-                            <button
-                                style={getConnectButtonStyle(isConnecting || !installed, hoveredButton === network)}
-                                onClick={() => handleConnect(network)}
-                                disabled={isConnecting || !installed}
-                                onMouseEnter={() => setHoveredButton(network)}
-                                onMouseLeave={() => setHoveredButton(null)}
-                            >
-                              {isConnecting ? 'Connecting...' : getNetworkDisplayName(network)}
-                            </button>
-                            {!installed && (
-                                <a
-                                    href={getWalletInstallUrl(network)}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    style={getInstallLinkStyle(hoveredLink === network)}
-                                    onMouseEnter={() => setHoveredLink(network)}
-                                    onMouseLeave={() => setHoveredLink(null)}
-                                >
-                                  Install Wallet
-                                </a>
-                            )}
-                          </div>
-                      );
-                    })}
-                  </div>
-              )}
-
-              {error && <p style={getErrorStyle()}>{error}</p>}
-
-              <p style={getHintStyle()}>
-                To switch accounts, please change it in your wallet extension
-              </p>
-            </div>
-        ) : (
-            <div style={getSectionStyle()}>
-              <div style={walletAddressStyle}>
-            <span style={getLabelStyle()}>
-              Connected {networkType && `(${getNetworkDisplayName(networkType)})`}
-            </span>
-                <span style={getAddressStyle()}>{formatAddress(address)}</span>
-              </div>
-              <div style={walletActionsStyle}>
-                <button
-                    style={getDisconnectButtonStyle(hoveredButton === 'disconnect')}
-                    onClick={handleDisconnect}
-                    onMouseEnter={() => setHoveredButton('disconnect')}
-                    onMouseLeave={() => setHoveredButton(null)}
-                >
-                  Disconnect
-                </button>
-              </div>
-              <p style={getHintStyle()}>
-                Switch account in your wallet to change address
-              </p>
-            </div>
-        )}
-      </div>
-  );
-}
-

package/dist/react/hooks/usePayment.ts

@@ -1,109 +0,0 @@
-/**
- * usePayment Hook
- *
- * React hook for payment state management
- * Provides state only - you control the payment flow
- */
-
-import {useCallback, useState} from 'react';
-
-export interface UsePaymentReturn {
-  // State
-  isProcessing: boolean;
-  result: any;
-  error: string | null;
-
-  // State setters
-  setIsProcessing: (value: boolean) => void;
-  setResult: (value: any) => void;
-  setError: (value: string | null) => void;
-
-  // Helpers
-  clearResult: () => void;
-  clearError: () => void;
-  reset: () => void;
-}
-
-/**
- * Hook for managing payment state
- *
- * This hook only manages state - you control the payment logic.
- * Use SDK's handleSvmPayment/handleEvmPayment directly for full control.
- *
- * @example
- * ```tsx
- * import { usePayment, useWallet } from '../react';
- * import { handleSvmPayment } from '@/app/sdk';
- *
- * function PaymentButton() {
- *   const { networkType } = useWallet();
- *   const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
- *
- *   const handlePay = async () => {
- *     if (!networkType) return;
- *
- *     setIsProcessing(true);
- *     setError(null);
- *
- *     try {
- *       const response = await handleSvmPayment('/api/endpoint', {
- *         wallet: window.solana,
- *         network: 'solana-devnet',
- *       });
- *
- *       const data = await response.json();
- *       setResult(data);
- *
- *       // Your custom logic here
- *       console.log('Payment success!');
- *     } catch (err: any) {
- *       setError(err.message);
- *     } finally {
- *       setIsProcessing(false);
- *     }
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handlePay} disabled={isProcessing}>
- *         {isProcessing ? 'Processing...' : 'Pay'}
- *       </button>
- *       {error && <p>Error: {error}</p>}
- *       {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
- *     </div>
- *   );
- * }
- * ```
- */
-export function usePayment(): UsePaymentReturn {
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [result, setResult] = useState<any>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const clearResult = useCallback(() => {
-    setResult(null);
-  }, []);
-
-  const clearError = useCallback(() => {
-    setError(null);
-  }, []);
-
-  const reset = useCallback(() => {
-    setIsProcessing(false);
-    setResult(null);
-    setError(null);
-  }, []);
-
-  return {
-    isProcessing,
-    result,
-    error,
-    setIsProcessing,
-    setResult,
-    setError,
-    clearResult,
-    clearError,
-    reset,
-  };
-}
-