coinley-test 0.0.0

package/src/CoinleyPayment.jsx

@@ -0,0 +1,787 @@
+//src/CoinleyPayment.jsx
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Wallet, 
+  QrCode, 
+  ChevronDown, 
+  Copy, 
+  Check, 
+  X, 
+  ArrowLeft,
+  Loader2,
+  ExternalLink,
+  AlertCircle,
+  CheckCircle2,
+  Zap,
+  Sparkles
+} from 'lucide-react';
+import QRCodeLib from 'qrcode';
+import { 
+  createCoinleyWalletConfig,
+  CoinleyWalletProvider,
+  ConnectButton,
+  WalletModal,
+  useWallet,
+  useWalletConnect,
+  useWalletTransaction,
+  useWalletModal
+} from '@coinley/wallet-connect-core';
+import { PaymentAPI } from './PaymentAPI';
+
+// Wallet Integration Component
+const WalletIntegration = ({ 
+  selectedNetwork, 
+  selectedToken, 
+  paymentData, 
+  onTransactionSent, 
+  onError,
+  isConnecting,
+  setIsConnecting
+}) => {
+  const { isConnected, address } = useWallet();
+  const { connectWallet } = useWalletConnect();
+  const { sendTransaction } = useWalletTransaction();
+  const { openModal } = useWalletModal();
+
+  useEffect(() => {
+    if (isConnected && paymentData && selectedNetwork && selectedToken) {
+      handleSendTransaction();
+    }
+  }, [isConnected, paymentData]);
+
+  const handleConnectWallet = async () => {
+    try {
+      setIsConnecting(true);
+      openModal();
+    } catch (error) {
+      console.error('Wallet connection failed:', error);
+      onError(error.message || 'Failed to connect wallet');
+      setIsConnecting(false);
+    }
+  };
+
+  const handleSendTransaction = async () => {
+    if (!isConnected || !paymentData || !selectedToken) return;
+
+    try {
+      setIsConnecting(true);
+      
+      const recipientAddress = paymentData.metadata?.recipientWallet;
+      if (!recipientAddress) {
+        throw new Error('Recipient wallet address not found');
+      }
+
+      let txHash;
+
+      if (selectedToken.contractAddress) {
+        // ERC-20 Token Transaction
+        const amount = (paymentData.totalAmount * Math.pow(10, selectedToken.decimals)).toString();
+        const transferData = `0xa9059cbb${recipientAddress.slice(2).padStart(64, '0')}${parseInt(amount).toString(16).padStart(64, '0')}`;
+        
+        txHash = await sendTransaction({
+          to: selectedToken.contractAddress,
+          data: transferData,
+          value: '0x0'
+        });
+      } else {
+        // Native Token Transaction
+        const value = (paymentData.totalAmount * Math.pow(10, 18)).toString(16);
+        
+        txHash = await sendTransaction({
+          to: recipientAddress,
+          value: `0x${value}`
+        });
+      }
+
+      if (txHash) {
+        onTransactionSent(txHash);
+      }
+    } catch (error) {
+      console.error('Transaction failed:', error);
+      onError(error.message || 'Transaction failed');
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  return (
+    <div className="text-center space-y-6">
+      <div className="space-y-4">
+        <div className="w-16 h-16 bg-[#7042D2] bg-opacity-20 rounded-full flex items-center justify-center mx-auto">
+          <Wallet className="w-8 h-8 text-[#7042D2]" />
+        </div>
+        <h3 className="text-lg font-semibold">
+          {isConnected ? 'Send Payment' : 'Connect Your Wallet'}
+        </h3>
+        
+        {!isConnected ? (
+          <div className="space-y-4">
+            <p className="text-gray-600 dark:text-gray-400">
+              Connect your wallet to complete the payment
+            </p>
+            <ConnectButton 
+              theme="gradient" 
+              size="large"
+              customText="Connect Wallet"
+            />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <p className="text-green-600 dark:text-green-400">
+              ✅ Wallet Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
+            </p>
+            
+            {paymentData && (
+              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">Amount:</span>
+                  <span className="font-medium">{paymentData.totalAmount} {selectedToken?.symbol}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">Network:</span>
+                  <span className="font-medium">{selectedNetwork?.name}</span>
+                </div>
+              </div>
+            )}
+
+            {isConnecting && (
+              <div className="flex items-center justify-center space-x-2">
+                <Loader2 className="w-5 h-5 animate-spin text-[#7042D2]" />
+                <span>Processing transaction...</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const CoinleyPayment = ({
+  apiKey,
+  apiSecret,
+  apiUrl = 'http://localhost:9000',
+  onSuccess,
+  onError,
+  onClose,
+  isOpen,
+  config,
+  theme = 'light',
+  merchantName,
+  debug = false
+}) => {
+  // State management
+  const [currentStep, setCurrentStep] = useState('select-method');
+  const [networks, setNetworks] = useState([]);
+  const [tokens, setTokens] = useState([]);
+  const [selectedNetwork, setSelectedNetwork] = useState(null);
+  const [selectedToken, setSelectedToken] = useState(null);
+  const [paymentMethod, setPaymentMethod] = useState(null);
+  const [qrCode, setQrCode] = useState('');
+  const [paymentData, setPaymentData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [txHash, setTxHash] = useState('');
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Services
+  const paymentAPI = useRef(new PaymentAPI(apiUrl, apiKey, apiSecret));
+
+  // Wallet configuration
+  const walletConfig = createCoinleyWalletConfig({
+    appName: merchantName || 'Coinley Payment',
+    appDescription: 'Crypto payment processing',
+    chains: ['ethereum', 'polygon', 'bsc', 'arbitrum']
+  });
+
+  // Initialize
+  useEffect(() => {
+    if (isOpen) {
+      initializePayment();
+    }
+  }, [isOpen]);
+
+  const initializePayment = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      
+      const [networksRes, tokensRes] = await Promise.all([
+        paymentAPI.current.getNetworks(),
+        paymentAPI.current.getStablecoins()
+      ]);
+
+      setNetworks(networksRes.networks || []);
+      setTokens(tokensRes.stablecoins || []);
+
+      if (debug) {
+        console.log('Initialized networks:', networksRes.networks);
+        console.log('Initialized tokens:', tokensRes.stablecoins);
+      }
+    } catch (err) {
+      console.error('Failed to initialize payment:', err);
+      setError('Failed to load payment options. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleMethodSelect = (method) => {
+    setPaymentMethod(method);
+    setCurrentStep('select-network');
+  };
+
+  const handleNetworkSelect = async (network) => {
+    setSelectedNetwork(network);
+    
+    const networkTokens = tokens.filter(token => 
+      token.Network?.shortName === network.shortName || token.networkId === network.id
+    );
+    
+    if (networkTokens.length > 0) {
+      const preferredToken = networkTokens.find(t => t.symbol === 'USDT') || networkTokens[0];
+      setSelectedToken(preferredToken);
+      await initiatePayment(network, preferredToken);
+    }
+  };
+
+  const initiatePayment = async (network, token) => {
+    try {
+      setLoading(true);
+      
+      const paymentPayload = {
+        amount: config.amount,
+        currency: token.symbol,
+        network: network.shortName,
+        customerEmail: config.customerEmail,
+        callbackUrl: config.callbackUrl,
+        metadata: {
+          ...config.metadata,
+          paymentMethod,
+          selectedNetwork: network.shortName,
+          selectedToken: token.symbol
+        }
+      };
+
+      const payment = await paymentAPI.current.createPayment(paymentPayload);
+      setPaymentData(payment.payment);
+
+      if (paymentMethod === 'wallet') {
+        setCurrentStep('wallet-connect');
+      } else {
+        await generateQRCode(payment.payment);
+        setCurrentStep('qr-code');
+      }
+    } catch (err) {
+      console.error('Payment initiation failed:', err);
+      setError(err.message || 'Failed to create payment');
+      setCurrentStep('error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const generateQRCode = async (payment) => {
+    try {
+      const recipientAddress = payment.metadata?.recipientWallet || 
+                             config.merchantWalletAddresses?.[selectedNetwork?.shortName || ''];
+      
+      if (!recipientAddress) {
+        throw new Error('Recipient wallet address not found');
+      }
+
+      let qrData = '';
+      
+      if (selectedNetwork?.type === 'ethereum' || selectedNetwork?.type === 'bsc') {
+        qrData = selectedToken?.contractAddress 
+          ? `ethereum:${selectedToken.contractAddress}/transfer?address=${recipientAddress}&uint256=${payment.totalAmount * Math.pow(10, selectedToken.decimals)}`
+          : `ethereum:${recipientAddress}?value=${payment.totalAmount}e18`;
+      } else if (selectedNetwork?.type === 'tron') {
+        qrData = `tron:${recipientAddress}?amount=${payment.totalAmount}`;
+      } else {
+        qrData = `${selectedToken?.symbol}:${recipientAddress}?amount=${payment.totalAmount}`;
+      }
+
+      const qrCodeDataURL = await QRCodeLib.toDataURL(qrData, {
+        width: 256,
+        margin: 2,
+        color: {
+          dark: theme === 'dark' ? '#FFFFFF' : '#000000',
+          light: theme === 'dark' ? '#000000' : '#FFFFFF'
+        }
+      });
+
+      setQrCode(qrCodeDataURL);
+      startPaymentVerification(payment.id);
+      
+    } catch (err) {
+      console.error('QR code generation failed:', err);
+      setError('Failed to generate QR code');
+      setCurrentStep('error');
+    }
+  };
+
+  const startPaymentVerification = async (paymentId) => {
+    const maxAttempts = 60;
+    let attempts = 0;
+
+    const checkPayment = async () => {
+      try {
+        const result = await paymentAPI.current.verifyQRPayment(paymentId);
+        
+        if (result.verified && result.payment?.transactionHash) {
+          setTxHash(result.payment.transactionHash);
+          await handlePaymentSuccess(paymentId, result.payment.transactionHash);
+          return true;
+        }
+        
+        attempts++;
+        if (attempts < maxAttempts) {
+          setTimeout(checkPayment, 5000);
+        } else {
+          setError('Payment verification timeout. Please check your transaction.');
+          setCurrentStep('error');
+        }
+        
+        return false;
+      } catch (err) {
+        console.error('Payment verification error:', err);
+        attempts++;
+        if (attempts < maxAttempts) {
+          setTimeout(checkPayment, 5000);
+        } else {
+          setError('Payment verification failed');
+          setCurrentStep('error');
+        }
+        return false;
+      }
+    };
+
+    setTimeout(checkPayment, 2000);
+  };
+
+  const handleTransactionSent = async (transactionHash) => {
+    setTxHash(transactionHash);
+    setCurrentStep('processing');
+    
+    try {
+      await paymentAPI.current.processPayment(
+        paymentData.id,
+        transactionHash,
+        selectedNetwork?.shortName || '',
+        ''
+      );
+      
+      await handlePaymentSuccess(paymentData.id, transactionHash);
+    } catch (error) {
+      console.error('Payment processing failed:', error);
+      await handlePaymentSuccess(paymentData.id, transactionHash);
+    }
+  };
+
+  const handlePaymentSuccess = async (paymentId, transactionHash) => {
+    setCurrentStep('success');
+    
+    if (onSuccess) {
+      onSuccess(paymentId, transactionHash, {
+        network: selectedNetwork?.name,
+        token: selectedToken?.symbol,
+        amount: paymentData?.totalAmount,
+        method: paymentMethod
+      });
+    }
+  };
+
+  const copyToClipboard = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleClose = () => {
+    setCurrentStep('select-method');
+    setPaymentMethod(null);
+    setSelectedNetwork(null);
+    setSelectedToken(null);
+    setQrCode('');
+    setPaymentData(null);
+    setError('');
+    setTxHash('');
+    
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const goBack = () => {
+    if (currentStep === 'select-network') {
+      setCurrentStep('select-method');
+    } else if (currentStep === 'wallet-connect' || currentStep === 'qr-code') {
+      setCurrentStep('select-network');
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <CoinleyWalletProvider config={walletConfig} walletConfig={{ appName: merchantName || 'Coinley Payment' }}>
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
+        <motion.div
+          initial={{ scale: 0.9, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0.9, opacity: 0 }}
+          className={`relative w-full max-w-md mx-4 rounded-2xl shadow-2xl overflow-hidden ${
+            theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'
+          }`}
+        >
+          {/* Header */}
+          <div className="relative p-6 border-b border-gray-200 dark:border-gray-700">
+            {(currentStep !== 'select-method' && currentStep !== 'success' && currentStep !== 'error') && (
+              <button
+                onClick={goBack}
+                className="absolute left-4 top-6 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+            )}
+            
+            <button
+              onClick={handleClose}
+              className="absolute right-4 top-6 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+            
+            <div className="text-center">
+              <div className="flex items-center justify-center space-x-2 mb-2">
+                <Sparkles className="w-5 h-5 text-[#7042D2]" />
+                <h2 className="text-xl font-bold">Pay with Crypto</h2>
+                <Sparkles className="w-5 h-5 text-[#7042D2]" />
+              </div>
+              {merchantName && (
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  {merchantName}
+                </p>
+              )}
+              <div className="mt-2">
+                <span className="text-2xl font-bold text-[#7042D2]">
+                  ${config.amount.toFixed(2)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 min-h-[400px]">
+            <AnimatePresence mode="wait">
+              {/* Step 1: Select Payment Method */}
+              {currentStep === 'select-method' && (
+                <motion.div
+                  key="select-method"
+                  initial={{ x: 20, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -20, opacity: 0 }}
+                  className="space-y-4"
+                >
+                  <h3 className="text-lg font-semibold text-center mb-6">
+                    Choose Payment Method
+                  </h3>
+                  
+                  <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => handleMethodSelect('wallet')}
+                    className="w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-[#7042D2] transition-colors group"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className="p-3 bg-[#7042D2] bg-opacity-10 rounded-lg group-hover:bg-opacity-20 transition-colors">
+                        <Wallet className="w-6 h-6 text-[#7042D2]" />
+                      </div>
+                      <div className="text-left">
+                        <div className="font-semibold">Connect Wallet</div>
+                        <div className="text-sm text-gray-600 dark:text-gray-400">
+                          MetaMask, WalletConnect & more
+                        </div>
+                      </div>
+                      <Zap className="w-5 h-5 text-[#7042D2] ml-auto" />
+                    </div>
+                  </motion.button>
+
+                  <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => handleMethodSelect('qr')}
+                    className="w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-[#7042D2] transition-colors group"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className="p-3 bg-[#7042D2] bg-opacity-10 rounded-lg group-hover:bg-opacity-20 transition-colors">
+                        <QrCode className="w-6 h-6 text-[#7042D2]" />
+                      </div>
+                      <div className="text-left">
+                        <div className="font-semibold">QR Code</div>
+                        <div className="text-sm text-gray-600 dark:text-gray-400">
+                          Scan with mobile wallet
+                        </div>
+                      </div>
+                    </div>
+                  </motion.button>
+                </motion.div>
+              )}
+
+              {/* Step 2: Select Network */}
+              {currentStep === 'select-network' && (
+                <motion.div
+                  key="select-network"
+                  initial={{ x: 20, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -20, opacity: 0 }}
+                  className="space-y-4"
+                >
+                  <h3 className="text-lg font-semibold text-center mb-6">
+                    Select Network
+                  </h3>
+                  
+                  {loading ? (
+                    <div className="flex justify-center py-8">
+                      <Loader2 className="w-8 h-8 animate-spin text-[#7042D2]" />
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {networks.map((network) => (
+                        <motion.button
+                          key={network.id}
+                          whileHover={{ scale: 1.02 }}
+                          whileTap={{ scale: 0.98 }}
+                          onClick={() => handleNetworkSelect(network)}
+                          className="w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-[#7042D2] transition-colors group"
+                        >
+                          <div className="flex items-center space-x-4">
+                            {network.logo ? (
+                              <img 
+                                src={network.logo} 
+                                alt={network.name}
+                                className="w-8 h-8 rounded-full"
+                              />
+                            ) : (
+                              <div className="w-8 h-8 bg-[#7042D2] bg-opacity-20 rounded-full flex items-center justify-center">
+                                <span className="text-sm font-bold text-[#7042D2]">
+                                  {network.shortName.charAt(0).toUpperCase()}
+                                </span>
+                              </div>
+                            )}
+                            <div className="text-left flex-1">
+                              <div className="font-semibold">{network.name}</div>
+                              <div className="text-sm text-gray-600 dark:text-gray-400">
+                                {network.shortName.toUpperCase()}
+                              </div>
+                            </div>
+                            <ChevronDown className="w-5 h-5 text-gray-400 transform -rotate-90" />
+                          </div>
+                        </motion.button>
+                      ))}
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
+              {/* Wallet Connect */}
+              {currentStep === 'wallet-connect' && (
+                <motion.div
+                  key="wallet-connect"
+                  initial={{ x: 20, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -20, opacity: 0 }}
+                >
+                  <WalletIntegration
+                    selectedNetwork={selectedNetwork}
+                    selectedToken={selectedToken}
+                    paymentData={paymentData}
+                    onTransactionSent={handleTransactionSent}
+                    onError={setError}
+                    isConnecting={isConnecting}
+                    setIsConnecting={setIsConnecting}
+                  />
+                </motion.div>
+              )}
+
+              {/* QR Code */}
+              {currentStep === 'qr-code' && (
+                <motion.div
+                  key="qr-code"
+                  initial={{ x: 20, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -20, opacity: 0 }}
+                  className="text-center space-y-6"
+                >
+                  <div className="space-y-4">
+                    <h3 className="text-lg font-semibold">Scan QR Code</h3>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      Use your mobile wallet to scan and pay
+                    </p>
+                  </div>
+
+                  {qrCode && (
+                    <div className="bg-white p-4 rounded-xl mx-auto inline-block">
+                      <img src={qrCode} alt="Payment QR Code" className="w-48 h-48" />
+                    </div>
+                  )}
+
+                  {paymentData && (
+                    <div className="space-y-3">
+                      <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-2">
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600 dark:text-gray-400">Network:</span>
+                          <span className="font-medium">{selectedNetwork?.name}</span>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600 dark:text-gray-400">Amount:</span>
+                          <span className="font-medium">{paymentData.totalAmount} {selectedToken?.symbol}</span>
+                        </div>
+                      </div>
+                      
+                      <div className="flex items-center justify-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span>Waiting for payment...</span>
+                      </div>
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
+              {/* Processing */}
+              {currentStep === 'processing' && (
+                <motion.div
+                  key="processing"
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  className="text-center space-y-6"
+                >
+                  <div className="w-16 h-16 bg-[#7042D2] bg-opacity-20 rounded-full flex items-center justify-center mx-auto">
+                    <Loader2 className="w-8 h-8 animate-spin text-[#7042D2]" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-[#7042D2]">Processing Payment...</h3>
+                    <p className="text-gray-600 dark:text-gray-400 mt-2">
+                      Your transaction is being processed
+                    </p>
+                  </div>
+                </motion.div>
+              )}
+
+              {/* Success */}
+              {currentStep === 'success' && (
+                <motion.div
+                  key="success"
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  className="text-center space-y-6"
+                >
+                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
+                    <CheckCircle2 className="w-8 h-8 text-green-500" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-green-600">Payment Successful!</h3>
+                    <p className="text-gray-600 dark:text-gray-400 mt-2">
+                      Your payment has been processed successfully
+                    </p>
+                  </div>
+
+                  {txHash && (
+                    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm text-gray-600 dark:text-gray-400">Transaction:</span>
+                        <div className="flex items-center space-x-2">
+                          <span className="font-mono text-sm">
+                            {txHash.slice(0, 6)}...{txHash.slice(-4)}
+                          </span>
+                          <button
+                            onClick={() => copyToClipboard(txHash)}
+                            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
+                          >
+                            <Copy className="w-4 h-4" />
+                          </button>
+                          {selectedNetwork?.explorerUrl && (
+                            <a
+                              href={`${selectedNetwork.explorerUrl}/tx/${txHash}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
+                            >
+                              <ExternalLink className="w-4 h-4" />
+                            </a>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <button
+                    onClick={handleClose}
+                    className="w-full bg-[#7042D2] text-white py-3 rounded-lg font-semibold hover:bg-[#7042D2]/90 transition-colors"
+                  >
+                    Close
+                  </button>
+                </motion.div>
+              )}
+
+              {/* Error */}
+              {currentStep === 'error' && (
+                <motion.div
+                  key="error"
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  className="text-center space-y-6"
+                >
+                  <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto">
+                    <AlertCircle className="w-8 h-8 text-red-500" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-red-600">Payment Failed</h3>
+                    <p className="text-gray-600 dark:text-gray-400 mt-2">
+                      {error || 'Something went wrong. Please try again.'}
+                    </p>
+                  </div>
+
+                  <div className="space-y-3">
+                    <button
+                      onClick={() => {
+                        setCurrentStep('select-method');
+                        setError('');
+                      }}
+                      className="w-full bg-[#7042D2] text-white py-3 rounded-lg font-semibold hover:bg-[#7042D2]/90 transition-colors"
+                    >
+                      Try Again
+                    </button>
+                    <button
+                      onClick={handleClose}
+                      className="w-full border border-gray-300 dark:border-gray-600 py-3 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      Close
+                    </button>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 text-center">
+            <p className="text-xs text-gray-500">
+              Powered by <span className="font-semibold text-[#7042D2]">Coinley</span>
+            </p>
+          </div>
+        </motion.div>
+      </div>
+
+      <WalletModal />
+    </CoinleyWalletProvider>
+  );
+};
+
+export default CoinleyPayment;