@one_deploy/sdk 1.0.0

package/src/components/OnePayWidget.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import React from 'react';
+import { PayEmbed, type PayEmbedProps } from 'thirdweb/react';
+import { base, ethereum, polygon, arbitrum } from 'thirdweb/chains';
+import { useThirdwebClient } from '../providers/ThirdwebProvider';
+
+// ===== Types =====
+
+export type PayMode = 'fund_wallet' | 'direct_payment' | 'transaction';
+
+export interface OnePayWidgetProps {
+  // Mode configuration
+  mode?: PayMode;
+
+  // For direct_payment mode
+  recipientAddress?: string;
+  amount?: string;
+  tokenAddress?: string;
+  chainId?: number;
+
+  // For transaction mode
+  transaction?: any; // PreparedTransaction from thirdweb
+
+  // Appearance
+  theme?: 'light' | 'dark';
+  className?: string;
+  style?: React.CSSProperties;
+
+  // Payment options
+  buyWithCrypto?: boolean;
+  buyWithFiat?: boolean;
+
+  // Supported tokens (token addresses per chain)
+  supportedTokens?: {
+    [chainId: number]: string[];
+  };
+
+  // Callbacks
+  onSuccess?: (result: any) => void;
+  onError?: (error: Error) => void;
+  onCancel?: () => void;
+}
+
+// ===== Default Configuration =====
+
+const DEFAULT_SUPPORTED_TOKENS = {
+  [base.id]: [
+    '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // USDC on Base
+  ],
+  [ethereum.id]: [
+    '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC on Ethereum
+    '0xdAC17F958D2ee523a2206206994597C13D831ec7', // USDT on Ethereum
+  ],
+  [polygon.id]: [
+    '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359', // USDC on Polygon
+  ],
+  [arbitrum.id]: [
+    '0xaf88d065e77c8cC2239327C5EDb3A432268e5831', // USDC on Arbitrum
+  ],
+};
+
+// ===== Component =====
+
+export function OnePayWidget({
+  mode = 'fund_wallet',
+  recipientAddress,
+  amount,
+  tokenAddress,
+  chainId,
+  transaction,
+  theme = 'dark',
+  className,
+  style,
+  buyWithCrypto = true,
+  buyWithFiat = true,
+  supportedTokens = DEFAULT_SUPPORTED_TOKENS,
+  onSuccess,
+  onError,
+  onCancel,
+}: OnePayWidgetProps) {
+  const client = useThirdwebClient();
+
+  // Build pay options based on mode
+  let payOptions: PayEmbedProps['payOptions'];
+
+  switch (mode) {
+    case 'direct_payment':
+      if (!recipientAddress) {
+        console.warn('OnePayWidget: recipientAddress required for direct_payment mode');
+      }
+      payOptions = {
+        mode: 'direct_payment',
+        paymentInfo: {
+          sellerAddress: recipientAddress || '',
+          amount: amount || '0',
+          chain: chainId ? { id: chainId } as any : base,
+          token: tokenAddress ? { address: tokenAddress } as any : undefined,
+        },
+        buyWithCrypto: buyWithCrypto ? {} : false,
+        buyWithFiat: buyWithFiat ? {} : false,
+      };
+      break;
+
+    case 'transaction':
+      if (!transaction) {
+        console.warn('OnePayWidget: transaction required for transaction mode');
+      }
+      payOptions = {
+        mode: 'transaction',
+        transaction,
+        buyWithCrypto: buyWithCrypto ? {} : false,
+        buyWithFiat: buyWithFiat ? {} : false,
+      };
+      break;
+
+    case 'fund_wallet':
+    default:
+      payOptions = {
+        mode: 'fund_wallet',
+        buyWithCrypto: buyWithCrypto ? {} : false,
+        buyWithFiat: buyWithFiat ? {} : false,
+      };
+      break;
+  }
+
+  return (
+    <div className={className} style={style}>
+      <PayEmbed
+        client={client}
+        payOptions={payOptions}
+        theme={theme}
+        supportedTokens={supportedTokens as any}
+      />
+    </div>
+  );
+}
+
+// ===== Presets =====
+
+export function OneFundWalletWidget(props: Omit<OnePayWidgetProps, 'mode'>) {
+  return <OnePayWidget {...props} mode="fund_wallet" />;
+}
+
+export function OneDirectPayWidget(
+  props: Omit<OnePayWidgetProps, 'mode'> & {
+    recipientAddress: string;
+    amount: string;
+  }
+) {
+  return <OnePayWidget {...props} mode="direct_payment" />;
+}
+
+export function OneCryptoOnlyPayWidget(props: Omit<OnePayWidgetProps, 'buyWithFiat'>) {
+  return <OnePayWidget {...props} buyWithFiat={false} />;
+}
+
+export function OneFiatOnlyPayWidget(props: Omit<OnePayWidgetProps, 'buyWithCrypto'>) {
+  return <OnePayWidget {...props} buyWithCrypto={false} />;
+}

package/src/components/OneReceiveWidget.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useActiveAccount } from 'thirdweb/react';
+import type { Chain } from 'thirdweb/chains';
+import { base, ethereum, polygon, arbitrum } from 'thirdweb/chains';
+
+// ===== Types =====
+
+export interface OneReceiveWidgetProps {
+  // Display options
+  chains?: Chain[];
+  defaultChain?: Chain;
+  showChainSelector?: boolean;
+  showCopyButton?: boolean;
+  showQRCode?: boolean;
+
+  // Appearance
+  theme?: 'light' | 'dark';
+  className?: string;
+  style?: React.CSSProperties;
+  qrSize?: number;
+
+  // Callbacks
+  onCopy?: (address: string) => void;
+  onChainChange?: (chain: Chain) => void;
+}
+
+// ===== QR Code Generator (Simple SVG-based) =====
+
+function generateQRMatrix(data: string): boolean[][] {
+  // Simple QR-like pattern generator (for demo - in production use a proper QR library)
+  const size = 21;
+  const matrix: boolean[][] = Array(size).fill(null).map(() => Array(size).fill(false));
+
+  // Add finder patterns
+  const addFinderPattern = (x: number, y: number) => {
+    for (let i = 0; i < 7; i++) {
+      for (let j = 0; j < 7; j++) {
+        if (i === 0 || i === 6 || j === 0 || j === 6 || (i >= 2 && i <= 4 && j >= 2 && j <= 4)) {
+          matrix[y + i][x + j] = true;
+        }
+      }
+    }
+  };
+
+  addFinderPattern(0, 0);
+  addFinderPattern(14, 0);
+  addFinderPattern(0, 14);
+
+  // Add data pattern based on address hash
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    hash = ((hash << 5) - hash) + data.charCodeAt(i);
+    hash = hash & hash;
+  }
+
+  for (let i = 8; i < 13; i++) {
+    for (let j = 8; j < 13; j++) {
+      matrix[i][j] = ((hash >> ((i * 21 + j) % 32)) & 1) === 1;
+    }
+  }
+
+  return matrix;
+}
+
+function QRCode({ data, size = 200, isDark = true }: { data: string; size?: number; isDark?: boolean }) {
+  const matrix = generateQRMatrix(data);
+  const cellSize = size / matrix.length;
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <rect width={size} height={size} fill={isDark ? '#ffffff' : '#ffffff'} rx="8" />
+      {matrix.map((row, y) =>
+        row.map((cell, x) =>
+          cell ? (
+            <rect
+              key={`${x}-${y}`}
+              x={x * cellSize}
+              y={y * cellSize}
+              width={cellSize}
+              height={cellSize}
+              fill={isDark ? '#111827' : '#111827'}
+            />
+          ) : null
+        )
+      )}
+    </svg>
+  );
+}
+
+// ===== Styles =====
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '20px',
+  padding: '24px',
+  backgroundColor: '#1f2937',
+  borderRadius: '16px',
+  border: '1px solid #374151',
+};
+
+const addressStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '12px 16px',
+  backgroundColor: '#374151',
+  borderRadius: '12px',
+  maxWidth: '100%',
+};
+
+const buttonStyle: React.CSSProperties = {
+  padding: '8px 16px',
+  backgroundColor: '#10b981',
+  color: '#ffffff',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  fontSize: '14px',
+  fontWeight: 500,
+};
+
+// ===== Chain Info =====
+
+const CHAIN_INFO: Record<number, { name: string; icon: string }> = {
+  1: { name: 'Ethereum', icon: '⟠' },
+  8453: { name: 'Base', icon: '🔵' },
+  137: { name: 'Polygon', icon: '🟣' },
+  42161: { name: 'Arbitrum', icon: '🔷' },
+  10: { name: 'Optimism', icon: '🔴' },
+};
+
+// ===== Component =====
+
+export function OneReceiveWidget({
+  chains = [base, ethereum, polygon, arbitrum],
+  defaultChain = base,
+  showChainSelector = true,
+  showCopyButton = true,
+  showQRCode = true,
+  theme = 'dark',
+  className,
+  style,
+  qrSize = 200,
+  onCopy,
+  onChainChange,
+}: OneReceiveWidgetProps) {
+  const account = useActiveAccount();
+  const [selectedChain, setSelectedChain] = useState<Chain>(defaultChain);
+  const [copied, setCopied] = useState(false);
+
+  const address = account?.address || '';
+  const isDark = theme === 'dark';
+
+  const handleCopy = async () => {
+    if (!address) return;
+
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      onCopy?.(address);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleChainChange = (chain: Chain) => {
+    setSelectedChain(chain);
+    onChainChange?.(chain);
+  };
+
+  const shortenAddress = (addr: string) => {
+    if (!addr) return '';
+    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+  };
+
+  if (!account) {
+    return (
+      <div className={className} style={{ ...style, textAlign: 'center', padding: '24px', color: isDark ? '#9ca3af' : '#6b7280' }}>
+        Connect your wallet to receive funds
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...containerStyle,
+        backgroundColor: isDark ? '#1f2937' : '#ffffff',
+        border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+        ...style,
+      }}
+    >
+      <h3 style={{ margin: 0, color: isDark ? '#ffffff' : '#111827', fontSize: '18px', fontWeight: 600 }}>
+        Receive
+      </h3>
+
+      {/* Chain Selector */}
+      {showChainSelector && chains.length > 1 && (
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
+          {chains.map(chain => (
+            <button
+              key={chain.id}
+              onClick={() => handleChainChange(chain)}
+              style={{
+                padding: '8px 12px',
+                backgroundColor: selectedChain.id === chain.id ? '#10b981' : (isDark ? '#374151' : '#e5e7eb'),
+                border: 'none',
+                borderRadius: '8px',
+                color: selectedChain.id === chain.id ? '#ffffff' : (isDark ? '#9ca3af' : '#6b7280'),
+                cursor: 'pointer',
+                fontSize: '12px',
+              }}
+            >
+              {CHAIN_INFO[chain.id]?.icon} {CHAIN_INFO[chain.id]?.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* QR Code */}
+      {showQRCode && (
+        <div style={{ padding: '16px', backgroundColor: '#ffffff', borderRadius: '12px' }}>
+          <QRCode data={address} size={qrSize} isDark={isDark} />
+        </div>
+      )}
+
+      {/* Address Display */}
+      <div style={{ ...addressStyle, backgroundColor: isDark ? '#374151' : '#f3f4f6', width: '100%' }}>
+        <span style={{
+          color: isDark ? '#ffffff' : '#111827',
+          fontSize: '14px',
+          fontFamily: 'monospace',
+          flex: 1,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}>
+          {address}
+        </span>
+      </div>
+
+      {/* Copy Button */}
+      {showCopyButton && (
+        <button
+          onClick={handleCopy}
+          style={{
+            ...buttonStyle,
+            backgroundColor: copied ? '#059669' : '#10b981',
+            width: '100%',
+          }}
+        >
+          {copied ? '✓ Copied!' : 'Copy Address'}
+        </button>
+      )}
+
+      {/* Warning */}
+      <p style={{
+        margin: 0,
+        color: isDark ? '#9ca3af' : '#6b7280',
+        fontSize: '12px',
+        textAlign: 'center',
+      }}>
+        Only send {CHAIN_INFO[selectedChain.id]?.name || 'compatible'} assets to this address
+      </p>
+    </div>
+  );
+}

package/src/components/OneSendWidget.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import React, { useState, useCallback } from 'react';
+import { useSendTransaction, useActiveAccount } from 'thirdweb/react';
+import { prepareTransaction, toWei } from 'thirdweb';
+import type { Chain } from 'thirdweb/chains';
+import { base } from 'thirdweb/chains';
+import { useThirdwebClient } from '../providers/ThirdwebProvider';
+
+// ===== Types =====
+
+export interface OneSendWidgetProps {
+  // Default values
+  defaultRecipient?: string;
+  defaultAmount?: string;
+  defaultChain?: Chain;
+
+  // Token config (if sending ERC20)
+  tokenAddress?: string;
+  tokenSymbol?: string;
+  tokenDecimals?: number;
+
+  // Appearance
+  theme?: 'light' | 'dark';
+  className?: string;
+  style?: React.CSSProperties;
+
+  // Callbacks
+  onSuccess?: (txHash: string) => void;
+  onError?: (error: Error) => void;
+  onCancel?: () => void;
+}
+
+// ===== Styles =====
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  padding: '24px',
+  backgroundColor: '#1f2937',
+  borderRadius: '16px',
+  border: '1px solid #374151',
+};
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '12px 16px',
+  backgroundColor: '#374151',
+  border: '1px solid #4b5563',
+  borderRadius: '12px',
+  color: '#ffffff',
+  fontSize: '16px',
+  outline: 'none',
+};
+
+const labelStyle: React.CSSProperties = {
+  color: '#9ca3af',
+  fontSize: '14px',
+  marginBottom: '4px',
+};
+
+const buttonStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '14px',
+  backgroundColor: '#10b981',
+  color: '#ffffff',
+  border: 'none',
+  borderRadius: '12px',
+  fontSize: '16px',
+  fontWeight: 600,
+  cursor: 'pointer',
+};
+
+const buttonDisabledStyle: React.CSSProperties = {
+  ...buttonStyle,
+  backgroundColor: '#6b7280',
+  cursor: 'not-allowed',
+};
+
+// ===== Component =====
+
+export function OneSendWidget({
+  defaultRecipient = '',
+  defaultAmount = '',
+  defaultChain = base,
+  tokenAddress,
+  tokenSymbol = 'ETH',
+  tokenDecimals = 18,
+  theme = 'dark',
+  className,
+  style,
+  onSuccess,
+  onError,
+  onCancel,
+}: OneSendWidgetProps) {
+  const client = useThirdwebClient();
+  const account = useActiveAccount();
+  const { mutate: sendTransaction, isPending } = useSendTransaction();
+
+  const [recipient, setRecipient] = useState(defaultRecipient);
+  const [amount, setAmount] = useState(defaultAmount);
+  const [error, setError] = useState<string | null>(null);
+
+  const isValidAddress = (address: string) => /^0x[a-fA-F0-9]{40}$/.test(address);
+  const isValidAmount = (amt: string) => !isNaN(parseFloat(amt)) && parseFloat(amt) > 0;
+
+  const canSend = isValidAddress(recipient) && isValidAmount(amount) && !isPending;
+
+  const handleSend = useCallback(async () => {
+    if (!account || !canSend) return;
+
+    setError(null);
+
+    try {
+      let tx;
+
+      if (tokenAddress) {
+        // ERC20 transfer
+        const amountInWei = BigInt(Math.floor(parseFloat(amount) * Math.pow(10, tokenDecimals)));
+        const transferData = `0xa9059cbb${recipient.slice(2).padStart(64, '0')}${amountInWei.toString(16).padStart(64, '0')}` as `0x${string}`;
+
+        tx = prepareTransaction({
+          to: tokenAddress,
+          data: transferData,
+          chain: defaultChain,
+          client,
+        });
+      } else {
+        // Native token transfer
+        tx = prepareTransaction({
+          to: recipient as `0x${string}`,
+          value: toWei(amount),
+          chain: defaultChain,
+          client,
+        });
+      }
+
+      sendTransaction(tx, {
+        onSuccess: (result) => {
+          onSuccess?.(result.transactionHash);
+          setRecipient('');
+          setAmount('');
+        },
+        onError: (err) => {
+          setError(err.message);
+          onError?.(err);
+        },
+      });
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Transaction failed');
+      setError(error.message);
+      onError?.(error);
+    }
+  }, [account, canSend, recipient, amount, tokenAddress, tokenDecimals, defaultChain, client, sendTransaction, onSuccess, onError]);
+
+  const isDark = theme === 'dark';
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...containerStyle,
+        backgroundColor: isDark ? '#1f2937' : '#ffffff',
+        border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+        ...style,
+      }}
+    >
+      <h3 style={{ color: isDark ? '#ffffff' : '#111827', margin: 0, fontSize: '18px', fontWeight: 600 }}>
+        Send {tokenSymbol}
+      </h3>
+
+      <div>
+        <label style={{ ...labelStyle, color: isDark ? '#9ca3af' : '#6b7280' }}>Recipient Address</label>
+        <input
+          type="text"
+          value={recipient}
+          onChange={(e) => setRecipient(e.target.value)}
+          placeholder="0x..."
+          style={{
+            ...inputStyle,
+            backgroundColor: isDark ? '#374151' : '#f3f4f6',
+            color: isDark ? '#ffffff' : '#111827',
+            border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+          }}
+        />
+      </div>
+
+      <div>
+        <label style={{ ...labelStyle, color: isDark ? '#9ca3af' : '#6b7280' }}>Amount ({tokenSymbol})</label>
+        <input
+          type="number"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          placeholder="0.0"
+          min="0"
+          step="any"
+          style={{
+            ...inputStyle,
+            backgroundColor: isDark ? '#374151' : '#f3f4f6',
+            color: isDark ? '#ffffff' : '#111827',
+            border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+          }}
+        />
+      </div>
+
+      {error && (
+        <div style={{ color: '#ef4444', fontSize: '14px', padding: '8px 12px', backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: '8px' }}>
+          {error}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: '12px' }}>
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            style={{
+              ...buttonStyle,
+              flex: 1,
+              backgroundColor: 'transparent',
+              border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+              color: isDark ? '#9ca3af' : '#6b7280',
+            }}
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          onClick={handleSend}
+          disabled={!canSend}
+          style={canSend ? { ...buttonStyle, flex: 1 } : { ...buttonDisabledStyle, flex: 1 }}
+        >
+          {isPending ? 'Sending...' : `Send ${tokenSymbol}`}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ===== Presets =====
+
+export function OneSendETHWidget(props: Omit<OneSendWidgetProps, 'tokenAddress' | 'tokenSymbol' | 'tokenDecimals'>) {
+  return <OneSendWidget {...props} tokenSymbol="ETH" tokenDecimals={18} />;
+}
+
+export function OneSendUSDCWidget(props: Omit<OneSendWidgetProps, 'tokenSymbol' | 'tokenDecimals'> & { tokenAddress: string }) {
+  return <OneSendWidget {...props} tokenSymbol="USDC" tokenDecimals={6} />;
+}