gor-deploy/src/components/PaymentModal.tsx

'use client';

import { useCallback, useMemo, useState } from 'react';
import BN from 'bn.js';
import assert from 'assert';

import { Connection } from '@solana/web3.js';

import { sendSolanaTokenPayment } from '@/services/solana';
import { PaymentModalProps } from '@/types';

assert(process.env.NEXT_PUBLIC_SOLANA_RPC_URL, 'SOLANA_RPC_URL is required');
const SOLANA_RPC_URL = process.env.NEXT_PUBLIC_SOLANA_RPC_URL;

export default function PaymentModal({
  isOpen,
  onClose,
  url,
  onPaymentComplete,
  walletState,
}: PaymentModalProps) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const connection = useMemo(() => new Connection(SOLANA_RPC_URL), [])

  // Get configuration from environment variables directly
  const amount = parseInt(process.env.NEXT_PUBLIC_MIN_SOLANA_PAYMENT_AMOUNT || '400000000');

  const recipientAddress = process.env.NEXT_PUBLIC_SOLANA_TOKEN_RECIPIENT_ADDRESS;

  const handlePayment = useCallback(async () => {
    setLoading(true);
    setError('');

    try {
      const tokenAmount = new BN(amount);
      const result = await sendSolanaTokenPayment(connection, walletState.publicKey!, tokenAmount, walletState.walletType!);

      if (result.success && result.transactionSignature) {
        onPaymentComplete(result.transactionSignature);
      } else {
        setError(result.error || `${process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL} payment failed. Please try again.`);
      }
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Payment failed. Please try again.');
    } finally {
      setLoading(false);
    }
  }, [connection, walletState, amount, onPaymentComplete]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center p-4 z-50" style={{ background: 'rgba(15, 23, 42, 0.75)' }}>
      <div className="max-w-md w-full rounded-xl shadow-xl animate-appear"
          style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)' }}>
        <div className="p-6 border-b" style={{ borderColor: 'var(--card-border)' }}>
          <h2 className="text-xl font-semibold" style={{ color: 'var(--foreground)' }}>
            Complete {process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL} Payment
          </h2>
        </div>

        <div className="p-6 space-y-6">
          <div>
            <p className="text-sm mb-2 font-medium" style={{ color: 'var(--muted)' }}>URL to be deployed:</p>
            <div className="p-3 rounded-md break-all" style={{ background: 'var(--muted-light)', color: 'var(--foreground)' }}>
              <code className="text-sm font-mono">{url}</code>
            </div>
          </div>

          <div>
            <p className="text-sm mb-2 font-medium" style={{ color: 'var(--muted)' }}>Recipient Address:</p>
            <div className="p-3 rounded-md overflow-hidden" style={{ background: 'var(--muted-light)', color: 'var(--foreground)' }}>
              <code className="text-sm font-mono break-all block">{recipientAddress}</code>
            </div>
          </div>

          <div>
            <label htmlFor="amount" className="block text-sm font-medium mb-2" style={{ color: 'var(--foreground)' }}>
              Amount ({process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL})
            </label>
            <div className="relative">
              <input
                id="amount"
                type="number"
                value={amount / 1e6} // Token decimals for GOR token
                disabled={true} // Fixed amount for Solana tokens
                className="w-full p-3 pr-12 rounded-md"
                style={{
                  background: 'var(--card-bg)',
                  border: '1px solid var(--input-border)',
                  color: 'var(--foreground)',
                  opacity: '0.7'
                }}
                readOnly
              />
              <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <span className="text-sm font-medium" style={{ color: 'var(--muted)' }}>{process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL}</span>
              </div>
            </div>
            <p className="text-xs mt-1" style={{ color: 'var(--muted)' }}>
              Fixed amount required for deployment
            </p>
          </div>

          {error && (
            <div className="p-3 rounded-md text-sm" style={{ backgroundColor: 'var(--error-light)', color: 'var(--error)' }}>
              {error}
            </div>
          )}
        </div>

        <div className="p-6 flex justify-end space-x-4 border-t" style={{ borderColor: 'var(--card-border)' }}>
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-md transition-colors"
            style={{
              border: '1px solid var(--input-border)',
              color: 'var(--foreground)',
              opacity: loading ? '0.5' : '1'
            }}
            disabled={loading}
          >
            Cancel
          </button>
          <button
            onClick={handlePayment}
            className="px-5 py-2 rounded-md flex items-center transition-colors"
            style={{
              backgroundColor: loading ? 'var(--muted)' : 'var(--primary)',
              color: 'var(--primary-foreground)',
              opacity: loading ? '0.8' : '1'
            }}
            disabled={loading}
          >
            {loading && (
              <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            )}
            {loading ? 'Processing...' : 'Pay with Solana Wallet'}
          </button>
        </div>
      </div>
    </div>
  );
}