boiler
/
Web3CV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

export fix

This commit is contained in:
boilerrat 2025-01-08 22:43:50 -05:00
parent 0a8d7355e0
commit 1ab64bac1c
1 changed files with 122 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/ReactorStatus/index.tsx
View File

@ -5,7 +5,7 @@ import type { ReactorStatusProps, TooltipProps, PriceStat } from './types';
import { getEthereumData, formatPrice, getHighLowPrices, formatVolume } from '../../utils/api';
const statusMessages = [
'Staking valves open',
'Mining blocks... literally',
'Consensus achieved',
'Smart contracts cooling',
'Tokens well-contained',
@ -31,7 +31,7 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
return null;
};
const ReactorStatus = ({ className = '' }: ReactorStatusProps) => {
export const ReactorStatus = ({ className = '' }: ReactorStatusProps) => {
const [power, setPower] = useState(0);
const [status, setStatus] = useState('Initializing...');
const [isAnimating, setIsAnimating] = useState(false);
@ -112,63 +112,8 @@ const ReactorStatus = ({ className = '' }: ReactorStatusProps) => {
{ label: 'Rad Level', value: '0.12 μSv' }
];
const renderPriceChart = () => {
if (loading) {
return (
<div className="flex items-center justify-center h-full">
<div className="text-blue-500 flex items-center gap-2">
<Atom className="animate-spin" size={20} />
<span>Loading price data...</span>
</div>
</div>
);
}
if (error) {
return (
<div className="flex items-center justify-center h-full">
<div className="text-red-500">{error}</div>
</div>
);
}
if (!priceData.length) {
return (
<div className="flex items-center justify-center h-full">
<div className="text-gray-400">No price data available</div>
</div>
);
}
return (
<ResponsiveContainer width="100%" height="100%">
<LineChart data={priceData}>
<XAxis
dataKey="time"
stroke="#4B5563"
tick={{ fill: '#9CA3AF', fontSize: 12 }}
tickFormatter={(timestamp) => new Date(timestamp).toLocaleTimeString()}
/>
<YAxis
stroke="#4B5563"
tick={{ fill: '#9CA3AF', fontSize: 12 }}
domain={['auto', 'auto']}
tickFormatter={(value) => formatPrice(value)}
/>
<Tooltip content={<CustomTooltip />} />
<Line
type="monotone"
dataKey="price"
stroke="#3B82F6"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ResponsiveContainer>
);
};
return (
<div className="max-w-6xl mx-auto">
<div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${className}`}>
{/* Reactor Status Panel */}
<div className="bg-gray-900 rounded-lg p-6">
@ -252,7 +197,43 @@ const ReactorStatus = ({ className = '' }: ReactorStatusProps) => {
<div className="space-y-6">
{/* Price Chart */}
<div className="bg-gray-800 rounded-lg p-4 h-[300px]">
{renderPriceChart()}
{loading ? (
<div className="flex items-center justify-center h-full">
<div className="text-blue-500 flex items-center gap-2">
<Atom className="animate-spin" size={20} />
<span>Loading price data...</span>
</div>
</div>
) : error ? (
<div className="flex items-center justify-center h-full">
<div className="text-red-500">{error}</div>
</div>
) : (
<ResponsiveContainer width="100%" height="100%">
<LineChart data={priceData}>
<XAxis
dataKey="time"
stroke="#4B5563"
tick={{ fill: '#9CA3AF', fontSize: 12 }}
tickFormatter={(timestamp) => new Date(timestamp).toLocaleTimeString()}
/>
<YAxis
stroke="#4B5563"
tick={{ fill: '#9CA3AF', fontSize: 12 }}
domain={['auto', 'auto']}
tickFormatter={(value) => formatPrice(value)}
/>
<Tooltip content={<CustomTooltip />} />
<Line
type="monotone"
dataKey="price"
stroke="#3B82F6"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ResponsiveContainer>
)}
</div>
{/* Price Stats */}
@ -267,6 +248,7 @@ const ReactorStatus = ({ className = '' }: ReactorStatusProps) => {
</div>
</div>
</div>
</div>
);
};