313 lines
13 KiB
TypeScript
313 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState, useEffect } from 'react';
|
|
import assert from 'assert';
|
|
|
|
import { Connection } from '@solana/web3.js';
|
|
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
|
|
|
|
import { sendSolanaPayment } from '@/services/solana';
|
|
import { getRequiredTokenInfo, RequiredTokenInfo } from '@/services/jupiter-price';
|
|
import { PaymentMethod, PaymentModalProps, PaymentRequest } from '@/types';
|
|
import { PAYMENT_METHOD_LABELS, SOLANA_GOR_MINT_ADDRESS } from '@/constants/payments';
|
|
import { usePaymentMethod } from '@/contexts/PaymentMethodContext';
|
|
import { getCostOfDeployment } from '@/services/registry';
|
|
import { IS_NAT_GOR_TRANSFER_ENABLED } from '@/utils/gorbagana';
|
|
|
|
assert(!IS_NAT_GOR_TRANSFER_ENABLED || process.env.NEXT_PUBLIC_GORBAGANA_RPC_URL, 'GORBAGANA_RPC_URL is required when NAT GOR transfer is enabled');
|
|
|
|
const GORBAGANA_RPC_URL = process.env.NEXT_PUBLIC_GORBAGANA_RPC_URL;
|
|
|
|
export default function PaymentModal({
|
|
isOpen,
|
|
onClose,
|
|
url,
|
|
onPaymentComplete,
|
|
}: PaymentModalProps) {
|
|
const { selectedPaymentMethod: paymentMethod } = usePaymentMethod();
|
|
const { connection: solanaConnection } = useConnection();
|
|
const { wallet, publicKey } = useWallet();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [tokenAmount, setTokenAmount] = useState<number>(0);
|
|
const [tokenDecimals, setTokenDecimals] = useState<number>(6); // Default fallback
|
|
const [loadingPrice, setLoadingPrice] = useState(true);
|
|
const [deploymentCost, setDeploymentCost] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
const getDeploymentCostInfo = async () => {
|
|
const cost = await getCostOfDeployment();
|
|
|
|
setDeploymentCost(cost);
|
|
}
|
|
|
|
getDeploymentCostInfo();
|
|
}, []);
|
|
|
|
const mintAddress = process.env.NEXT_PUBLIC_SOLANA_TOKEN_MINT_ADDRESS!;
|
|
const tokenSymbol = process.env.NEXT_PUBLIC_SOLANA_TOKEN_SYMBOL;
|
|
|
|
// Fetch payment amount based on USD price for both payment methods
|
|
useEffect(() => {
|
|
if (!isOpen || !deploymentCost || !paymentMethod) return;
|
|
|
|
const fetchPaymentAmount = async () => {
|
|
setLoadingPrice(true);
|
|
setError('');
|
|
|
|
try {
|
|
let requiredTokenInfo: RequiredTokenInfo
|
|
if (paymentMethod === PaymentMethod.NAT_GOR) {
|
|
// Fetch native GOR amount using solana GOR token price
|
|
requiredTokenInfo = await getRequiredTokenInfo(deploymentCost, SOLANA_GOR_MINT_ADDRESS);
|
|
} else if (paymentMethod === PaymentMethod.SPL_TOKEN) {
|
|
// Fetch SPL token amount using token mint price
|
|
requiredTokenInfo = await getRequiredTokenInfo(deploymentCost, mintAddress);
|
|
} else {
|
|
setError('Invalid payment method');
|
|
return;
|
|
}
|
|
|
|
setTokenAmount(requiredTokenInfo.requiredAmountInBaseUnits);
|
|
setTokenDecimals(requiredTokenInfo.decimals);
|
|
} catch (error) {
|
|
console.error('Error fetching payment amount:', error);
|
|
setError('Unable to fetch current payment amount. Please try again.');
|
|
} finally {
|
|
setLoadingPrice(false);
|
|
}
|
|
};
|
|
|
|
fetchPaymentAmount();
|
|
}, [isOpen, paymentMethod, deploymentCost, mintAddress]);
|
|
|
|
// Initialize state when modal opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setError('');
|
|
setTokenAmount(0);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handlePayment = useCallback(async () => {
|
|
if (!paymentMethod) {
|
|
return;
|
|
}
|
|
|
|
if (tokenAmount === 0 || loadingPrice) {
|
|
setError('Payment amount not ready. Please wait.');
|
|
return;
|
|
}
|
|
|
|
if (!wallet || !wallet.adapter) {
|
|
setError('Wallet not connected.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const paymentRequest: PaymentRequest = {
|
|
paymentMethod: paymentMethod,
|
|
amount: tokenAmount,
|
|
};
|
|
|
|
// Use different RPC connection based on payment method
|
|
const connectionToUse = paymentMethod === PaymentMethod.NAT_GOR ? new Connection(GORBAGANA_RPC_URL!) : solanaConnection;
|
|
|
|
const result = await sendSolanaPayment(
|
|
wallet.adapter,
|
|
connectionToUse,
|
|
publicKey!.toBase58(),
|
|
paymentRequest
|
|
);
|
|
|
|
if (result.success && result.transactionSignature) {
|
|
onPaymentComplete(result.transactionSignature, paymentMethod);
|
|
} else {
|
|
setError(result.error || 'Payment failed. Please try again.');
|
|
}
|
|
} catch (error) {
|
|
setError(error instanceof Error ? error.message : 'Payment failed. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [paymentMethod, tokenAmount, loadingPrice, wallet, solanaConnection, publicKey, onPaymentComplete]);
|
|
|
|
const getPaymentAmountDisplay = () => {
|
|
if (loadingPrice) {
|
|
return 'Loading...'
|
|
};
|
|
|
|
return tokenAmount > 0 ? `${(tokenAmount / Math.pow(10, tokenDecimals)).toFixed(6)}` : '0';
|
|
};
|
|
|
|
if (!isOpen || !paymentMethod) 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 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>
|
|
|
|
{/* Payment Method Display */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-3" style={{ color: 'var(--foreground)' }}>
|
|
Payment Method
|
|
</label>
|
|
<div className="p-3 rounded-md" style={{ background: 'var(--muted-light)', color: 'var(--foreground)' }}>
|
|
<p className="text-sm font-semibold">
|
|
{PAYMENT_METHOD_LABELS[paymentMethod]}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Details */}
|
|
<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">{process.env.NEXT_PUBLIC_SOLANA_TOKEN_RECIPIENT_ADDRESS}</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--foreground)' }}>
|
|
Payment Amount
|
|
</label>
|
|
<div className="space-y-3">
|
|
<div className="relative">
|
|
{loadingPrice ? (
|
|
<div className="w-full p-3 rounded-md flex items-center" style={{
|
|
background: 'var(--muted-light)',
|
|
border: '1px solid var(--input-border)',
|
|
color: 'var(--muted)'
|
|
}}>
|
|
<svg className="animate-spin h-4 w-4 mr-2" 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>
|
|
</div>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={`$${deploymentCost ? deploymentCost.toPrecision(2) : null}`}
|
|
disabled={true}
|
|
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)' }}>USD</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
{loadingPrice ? (
|
|
<div className="w-full p-3 rounded-md flex items-center" style={{
|
|
background: 'var(--muted-light)',
|
|
border: '1px solid var(--input-border)',
|
|
color: 'var(--muted)'
|
|
}}>
|
|
<svg className="animate-spin h-4 w-4 mr-2" 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>
|
|
Fetching token amount...
|
|
</div>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={getPaymentAmountDisplay()}
|
|
disabled={true}
|
|
className="w-full p-3 pr-20 rounded-md"
|
|
style={{
|
|
background: 'var(--card-bg)',
|
|
border: '1px solid var(--input-border)',
|
|
color: 'var(--foreground)',
|
|
opacity: '0.7'
|
|
}}
|
|
readOnly
|
|
/>
|
|
)}
|
|
{!(paymentMethod === PaymentMethod.SPL_TOKEN && loadingPrice) && (
|
|
<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)' }}>
|
|
{paymentMethod === PaymentMethod.NAT_GOR ? 'GOR (native)' : tokenSymbol}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{paymentMethod === PaymentMethod.SPL_TOKEN && (
|
|
<p className="text-xs mt-1" style={{ color: 'var(--muted)' }}>
|
|
Token information fetched from <a className='text-blue-400 underline' href={`https://jup.ag/tokens/${mintAddress}`} target="_blank" rel="noopener noreferrer">Jupiter</a>
|
|
</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 || loadingPrice) ? 'var(--muted)' : 'var(--primary)',
|
|
color: 'var(--primary-foreground)',
|
|
opacity: (loading || loadingPrice) ? '0.8' : '1'
|
|
}}
|
|
disabled={loading || loadingPrice}
|
|
>
|
|
{(loading || loadingPrice) && (
|
|
<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>
|
|
)}
|
|
{loadingPrice ? 'Loading Price...' :
|
|
loading ? 'Processing...' :
|
|
'Pay with Solana Wallet'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|