Remove code for ATOM token payments
This commit is contained in:
Shreerang Kale
@@ -1,74 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { connectKeplr } from '@/services/keplr';
|
||||
|
||||
interface KeplrConnectProps {
|
||||
onConnect: (address: string) => void;
|
||||
}
|
||||
|
||||
export default function KeplrConnect({ onConnect }: KeplrConnectProps) {
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [address, setAddress] = useState<string | null>(null);
|
||||
|
||||
const handleConnect = async () => {
|
||||
setConnecting(true);
|
||||
try {
|
||||
const userAddress = await connectKeplr();
|
||||
if (userAddress) {
|
||||
setAddress(userAddress);
|
||||
onConnect(userAddress);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to connect to Keplr:', error);
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Check if Keplr is available
|
||||
if (typeof window !== 'undefined' && window.keplr) {
|
||||
// Auto-connect on page load
|
||||
handleConnect();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center p-4 rounded-lg">
|
||||
{address ? (
|
||||
<div className="flex flex-col items-center w-full">
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'var(--success)' }}></span>
|
||||
<p className="font-medium" style={{ color: 'var(--success)' }}>Connected</p>
|
||||
</div>
|
||||
<div className="w-full p-3 rounded-md" style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)' }}>
|
||||
<p className="text-sm font-mono break-all text-center">{address}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connecting}
|
||||
className="px-6 py-3 rounded-md w-full sm:w-auto transition-colors"
|
||||
style={{
|
||||
backgroundColor: connecting ? 'var(--muted)' : 'var(--primary)',
|
||||
color: 'var(--primary-foreground)',
|
||||
opacity: connecting ? '0.8' : '1',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
{connecting && (
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5" 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>
|
||||
)}
|
||||
{connecting ? 'Connecting...' : 'Connect Keplr Wallet'}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,76 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { sendAtomPayment } from '@/services/keplr';
|
||||
import { sendGorPayment } from '@/services/solana';
|
||||
|
||||
import { sendSolanaTokenPayment } from '@/services/solana';
|
||||
import { PaymentModalProps } from '@/types';
|
||||
import { getSolanaConfig, GOR_PAYMENT_AMOUNT } from '@/config';
|
||||
import { getSolanaConfig } from '@/config';
|
||||
|
||||
export default function PaymentModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
url,
|
||||
paymentType,
|
||||
onPaymentComplete,
|
||||
}: PaymentModalProps) {
|
||||
const [amount, setAmount] = useState(paymentType === 'ATOM' ? '0.01' : GOR_PAYMENT_AMOUNT.toString());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Get recipient addresses from environment variables
|
||||
const atomRecipientAddress = process.env.NEXT_PUBLIC_RECIPIENT_ADDRESS || 'cosmos1yourrealaddress';
|
||||
const gorRecipientAddress = paymentType === 'GOR' ?
|
||||
(process.env.NEXT_PUBLIC_GOR_RECIPIENT_ADDRESS || 'solana_recipient_address') : '';
|
||||
|
||||
const recipientAddress = paymentType === 'ATOM' ? atomRecipientAddress : gorRecipientAddress;
|
||||
|
||||
// Validate amount on change
|
||||
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setAmount(value);
|
||||
|
||||
// Clear error when user types
|
||||
if (error) {
|
||||
setError('');
|
||||
}
|
||||
};
|
||||
// Get configuration
|
||||
const solanaConfig = getSolanaConfig();
|
||||
const amount = solanaConfig.paymentAmount;
|
||||
const recipientAddress = solanaConfig.tokenRecipientAddress;
|
||||
|
||||
const handlePayment = async () => {
|
||||
// Validate amount before sending
|
||||
const parsedAmount = parseFloat(amount);
|
||||
if (isNaN(parsedAmount) || parsedAmount <= 0) {
|
||||
setError('Please enter a valid positive amount');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
|
||||
try {
|
||||
if (paymentType === 'ATOM') {
|
||||
const result = await sendAtomPayment(recipientAddress, amount);
|
||||
|
||||
if (result.status === 'success' && result.hash) {
|
||||
onPaymentComplete(result.hash);
|
||||
} else {
|
||||
setError(result.message || 'ATOM payment failed. Please try again.');
|
||||
}
|
||||
} else if (paymentType === 'GOR') {
|
||||
// For GOR payments, we need wallet info from parent component
|
||||
// This is a simplified approach - in a real implementation, you'd pass wallet state
|
||||
const walletInfo = (window as any).solanaWalletInfo;
|
||||
if (!walletInfo || !walletInfo.publicKey || !walletInfo.walletType) {
|
||||
setError('Solana wallet not connected. Please connect your wallet first.');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await sendGorPayment(walletInfo.publicKey, walletInfo.walletType);
|
||||
|
||||
if (result.success && result.transactionSignature) {
|
||||
onPaymentComplete(result.transactionSignature);
|
||||
} else {
|
||||
setError(result.error || 'GOR payment failed. Please try again.');
|
||||
}
|
||||
// For Solana payments, we need wallet info from parent component
|
||||
// This is a simplified approach - in a real implementation, you'd pass wallet state
|
||||
const walletInfo = (window as any).solanaWalletInfo;
|
||||
if (!walletInfo || !walletInfo.publicKey || !walletInfo.walletType) {
|
||||
setError('Solana wallet not connected. Please connect your wallet first.');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await sendSolanaTokenPayment(walletInfo.publicKey, walletInfo.walletType);
|
||||
|
||||
if (result.success && result.transactionSignature) {
|
||||
onPaymentComplete(result.transactionSignature);
|
||||
} else {
|
||||
setError(result.error || 'GOR payment failed. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'Payment failed. Please try again.');
|
||||
@@ -83,14 +51,14 @@ export default function PaymentModal({
|
||||
|
||||
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"
|
||||
<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 {paymentType} Payment
|
||||
Complete GOR 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>
|
||||
@@ -98,58 +66,54 @@ export default function PaymentModal({
|
||||
<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 ({paymentType})
|
||||
Amount (GOR)
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="amount"
|
||||
type="number"
|
||||
min={paymentType === 'ATOM' ? "0.01" : "1"}
|
||||
step={paymentType === 'ATOM' ? "0.01" : "1"}
|
||||
value={amount}
|
||||
onChange={handleAmountChange}
|
||||
disabled={paymentType === 'GOR'} // Fixed amount for GOR
|
||||
disabled={true} // Fixed amount for Solana tokens
|
||||
className="w-full p-3 pr-12 rounded-md"
|
||||
style={{
|
||||
style={{
|
||||
background: 'var(--card-bg)',
|
||||
border: '1px solid var(--input-border)',
|
||||
color: 'var(--foreground)',
|
||||
opacity: paymentType === 'GOR' ? '0.7' : '1'
|
||||
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)' }}>{paymentType}</span>
|
||||
<span className="text-sm font-medium" style={{ color: 'var(--muted)' }}>GOR</span>
|
||||
</div>
|
||||
</div>
|
||||
{paymentType === 'GOR' && (
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--muted)' }}>
|
||||
Fixed amount required for deployment
|
||||
</p>
|
||||
)}
|
||||
<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={{
|
||||
style={{
|
||||
border: '1px solid var(--input-border)',
|
||||
color: 'var(--foreground)',
|
||||
opacity: loading ? '0.5' : '1'
|
||||
@@ -174,7 +138,7 @@ export default function PaymentModal({
|
||||
<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 ${paymentType === 'ATOM' ? 'Keplr' : 'Solana Wallet'}`}
|
||||
{loading ? 'Processing...' : 'Pay with Solana Wallet'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -125,7 +125,7 @@ export default function StatusDisplay({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{txHash && <InfoItem label="ATOM Payment Transaction Hash" value={txHash} />}
|
||||
{txHash && <InfoItem label="GOR Payment Transaction Hash" value={txHash} />}
|
||||
{appRecordId && <InfoItem label="Laconic Application Record ID" value={appRecordId} />}
|
||||
{recordId && <InfoItem label="Laconic Deployment Request Record ID" value={recordId} />}
|
||||
{lrn && <InfoItem label="Laconic Resource Name (LRN)" value={lrn} />}
|
||||
|
||||
Reference in New Issue
Block a user