102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { sendAtomPayment } from '@/services/keplr';
|
|
|
|
interface PaymentModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
url: string;
|
|
onPaymentComplete: (txHash: string) => void;
|
|
}
|
|
|
|
export default function PaymentModal({
|
|
isOpen,
|
|
onClose,
|
|
url,
|
|
onPaymentComplete,
|
|
}: PaymentModalProps) {
|
|
const [amount, setAmount] = useState('1');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
// Get recipient address from environment variables
|
|
const recipientAddress = process.env.NEXT_PUBLIC_RECIPIENT_ADDRESS || 'cosmos1yourrealaddress';
|
|
|
|
const handlePayment = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const result = await sendAtomPayment(recipientAddress, amount);
|
|
|
|
if (result.status === 'success' && result.hash) {
|
|
onPaymentComplete(result.hash);
|
|
} else {
|
|
setError(result.message || 'Payment failed. Please try again.');
|
|
}
|
|
} catch (error) {
|
|
setError(error instanceof Error ? error.message : 'Payment failed. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-lg p-6 max-w-md w-full">
|
|
<h2 className="text-xl font-semibold mb-4">Complete Payment</h2>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-gray-600 mb-2">URL to be deployed:</p>
|
|
<p className="text-sm font-mono bg-gray-100 p-2 rounded">{url}</p>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-gray-600 mb-2">Recipient Address:</p>
|
|
<p className="text-sm font-mono bg-gray-100 p-2 rounded truncate">{recipientAddress}</p>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<label htmlFor="amount" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Amount (ATOM)
|
|
</label>
|
|
<input
|
|
id="amount"
|
|
type="number"
|
|
min="0.1"
|
|
step="0.1"
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className="w-full p-2 border border-gray-300 rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-2 bg-red-100 text-red-700 rounded-md text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end space-x-4">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handlePayment}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400"
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'Processing...' : 'Pay with Keplr'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |