86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface Detail {
|
|
token: string;
|
|
gains: number;
|
|
price_at_creation: number;
|
|
price_now: number;
|
|
}
|
|
|
|
const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number } }> = ({ isOpen, onClose, item }) => {
|
|
const [details, setDetails] = useState<Detail[] | null>(null); // Specify null as the initial type
|
|
|
|
useEffect(() => {
|
|
if (isOpen && item) {
|
|
const fetchDetails = async () => {
|
|
try {
|
|
const response = await fetch(`https://api.callfi.io/get_user_callouts.php?tag=${item.username}`);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
setDetails(data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch user details:', error);
|
|
}
|
|
};
|
|
|
|
fetchDetails();
|
|
}
|
|
}, [isOpen, item]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg"
|
|
onClick={onClose}
|
|
>
|
|
<div className="relative w-auto max-w-3xl mx-auto my-6 modal">
|
|
<div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
|
<div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
|
|
<h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
|
|
</div>
|
|
<div className="relative p-6 flex-auto">
|
|
<p
|
|
className={`my-4 text-blueGray-500 text-2xl font-bold leading-relaxed ${
|
|
item.points > 0 ? 'text-green-500' : 'text-red-500'
|
|
}`}
|
|
>
|
|
Total Gains : {item.points.toFixed(2)} x
|
|
</p>
|
|
</div>
|
|
<div className="relative p-6 flex-auto">
|
|
{details !== null ? (
|
|
<div>
|
|
{details.map((detail) => (
|
|
<p
|
|
key={detail.token}
|
|
className={`my-4 text-lg leading-relaxed ${
|
|
detail.gains > 0 ? 'text-green-500' : 'text-red-400'
|
|
}`}
|
|
>
|
|
{detail.token}: {detail.gains.toFixed(2)}x [
|
|
{detail.price_at_creation.toFixed(8) +
|
|
' => ' +
|
|
detail.price_now.toFixed(8)}
|
|
]
|
|
</p>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p>Loading...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|