learning_ai_invt_trdg/mobile/components/dashboard/StatusBanner.tsx

81 lines
2.3 KiB
TypeScript

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
import PulsingDot from '@/components/PulsingDot';
import { useTradingData } from '@/providers/TradingDataProvider';
export default function StatusBanner() {
const { botState, connected } = useTradingData();
const controlMode = botState?.health?.tradingControl?.mode ?? 'RUNNING';
const executionMode = botState?.settings.executionMode || 'Paper';
const uptimeSeconds = botState?.uptime || 0;
const uptimeHours = Math.floor(uptimeSeconds / 3600);
const uptimeMinutes = Math.floor((uptimeSeconds % 3600) / 60);
const isPaused = controlMode === 'PAUSED';
return (
<View style={styles.container}>
<View style={[styles.badge, isPaused && styles.pausedBadge]}>
{!isPaused ? <PulsingDot size={6} /> : null}
<Text style={[styles.runningText, isPaused && styles.pausedText]}>
{connected ? controlMode : 'OFFLINE'}
</Text>
</View>
<View style={[styles.badge, styles.paperBadge]}>
<Text style={styles.paperText}>{executionMode.toUpperCase()}</Text>
</View>
<Text style={styles.uptime}>{uptimeHours}h {uptimeMinutes}m</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: Colors.background.card,
borderRadius: BorderRadius.small,
padding: 12,
paddingHorizontal: 16,
gap: 10,
borderWidth: 1,
borderColor: Colors.border.default,
},
badge: {
flexDirection: 'row',
alignItems: 'center',
gap: 6,
backgroundColor: 'rgba(0,255,136,0.15)',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 6,
},
runningText: {
fontFamily: Fonts.inter.black,
fontSize: FontSize.micro,
color: Colors.accent.green,
letterSpacing: 1,
},
paperBadge: {
backgroundColor: 'rgba(52,152,219,0.15)',
},
paperText: {
fontFamily: Fonts.inter.black,
fontSize: FontSize.micro,
color: Colors.accent.blue,
letterSpacing: 1,
},
pausedBadge: {
backgroundColor: 'rgba(255,149,0,0.15)',
},
pausedText: {
color: Colors.accent.amber,
},
uptime: {
fontFamily: Fonts.mono.regular,
fontSize: FontSize.bodySmall,
color: Colors.text.secondary,
marginLeft: 'auto',
},
});