Add WiFi setup flow for WP sensors
Sensor onboarding screens: - add-sensor.tsx: BLE scanning + device selection - setup-wifi.tsx: WiFi credentials + ESP32 provisioning Flow: 1. Scan for nearby sensors via BLE 2. Select device from list 3. Enter WiFi credentials (SSID + password) 4. Send config over BLE using ESP IDF provisioning protocol 5. Verify connection and activate in backend ESP Provisioning: - services/espProvisioning.ts: ESP32 BLE provisioning implementation - Protocol: custom-data exchange via BLE characteristics - Security: WiFi password encrypted over BLE - Timeout handling: 30s for provisioning, 60s for activation User experience: - Clear step-by-step wizard UI - Loading states for BLE operations - Success/error feedback - Navigation to equipment screen on success
This commit is contained in:
Sergei
parent
86e73f004d
commit
3c3283e424
529
app/(tabs)/beneficiaries/[id]/add-sensor.tsx
Normal file
529
app/(tabs)/beneficiaries/[id]/add-sensor.tsx
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Alert,
|
||||||
|
ActivityIndicator,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { router, useLocalSearchParams } from 'expo-router';
|
||||||
|
import * as Device from 'expo-device';
|
||||||
|
import { useBLE } from '@/contexts/BLEContext';
|
||||||
|
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
||||||
|
import type { WPDevice } from '@/services/ble';
|
||||||
|
import {
|
||||||
|
AppColors,
|
||||||
|
BorderRadius,
|
||||||
|
FontSizes,
|
||||||
|
FontWeights,
|
||||||
|
Spacing,
|
||||||
|
Shadows,
|
||||||
|
} from '@/constants/theme';
|
||||||
|
|
||||||
|
export default function AddSensorScreen() {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const { currentBeneficiary } = useBeneficiary();
|
||||||
|
const {
|
||||||
|
foundDevices,
|
||||||
|
isScanning,
|
||||||
|
connectedDevices,
|
||||||
|
isBLEAvailable,
|
||||||
|
scanDevices,
|
||||||
|
stopScan,
|
||||||
|
connectDevice,
|
||||||
|
} = useBLE();
|
||||||
|
|
||||||
|
const [selectedDevice, setSelectedDevice] = useState<WPDevice | null>(null);
|
||||||
|
const [isConnecting, setIsConnecting] = useState(false);
|
||||||
|
|
||||||
|
const beneficiaryName = currentBeneficiary?.name || 'this person';
|
||||||
|
|
||||||
|
const handleScan = async () => {
|
||||||
|
try {
|
||||||
|
await scanDevices();
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[AddSensor] Scan failed:', error);
|
||||||
|
Alert.alert('Scan Failed', error.message || 'Failed to scan for sensors. Please try again.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConnect = async (device: WPDevice) => {
|
||||||
|
setIsConnecting(true);
|
||||||
|
setSelectedDevice(device);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const success = await connectDevice(device.id);
|
||||||
|
|
||||||
|
if (success) {
|
||||||
|
// Navigate to Setup WiFi screen
|
||||||
|
router.push({
|
||||||
|
pathname: `/(tabs)/beneficiaries/${id}/setup-wifi` as any,
|
||||||
|
params: {
|
||||||
|
deviceId: device.id,
|
||||||
|
deviceName: device.name,
|
||||||
|
wellId: device.wellId?.toString() || '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
throw new Error('Connection failed');
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[AddSensor] Connection failed:', error);
|
||||||
|
Alert.alert(
|
||||||
|
'Connection Failed',
|
||||||
|
`Failed to connect to ${device.name}. Please make sure the sensor is powered on and nearby.`
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsConnecting(false);
|
||||||
|
setSelectedDevice(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalIcon = (rssi: number) => {
|
||||||
|
if (rssi >= -50) return 'cellular';
|
||||||
|
if (rssi >= -60) return 'cellular-outline';
|
||||||
|
if (rssi >= -70) return 'cellular';
|
||||||
|
return 'cellular-outline';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalColor = (rssi: number) => {
|
||||||
|
if (rssi >= -50) return AppColors.success;
|
||||||
|
if (rssi >= -60) return AppColors.info;
|
||||||
|
if (rssi >= -70) return AppColors.warning;
|
||||||
|
return AppColors.error;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||||
|
<Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Add Sensor</Text>
|
||||||
|
<View style={styles.placeholder} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Simulator Warning */}
|
||||||
|
{!isBLEAvailable && (
|
||||||
|
<View style={styles.simulatorWarning}>
|
||||||
|
<Ionicons name="information-circle" size={18} color={AppColors.warning} />
|
||||||
|
<Text style={styles.simulatorWarningText}>
|
||||||
|
Running in Simulator - showing mock sensors
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||||
|
{/* Instructions */}
|
||||||
|
<View style={styles.instructionsCard}>
|
||||||
|
<Text style={styles.instructionsTitle}>How to Add a Sensor</Text>
|
||||||
|
<View style={styles.step}>
|
||||||
|
<View style={styles.stepNumber}>
|
||||||
|
<Text style={styles.stepNumberText}>1</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.stepText}>Make sure the WP sensor is powered on and nearby</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.step}>
|
||||||
|
<View style={styles.stepNumber}>
|
||||||
|
<Text style={styles.stepNumberText}>2</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.stepText}>Tap "Scan for Sensors" to search for available devices</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.step}>
|
||||||
|
<View style={styles.stepNumber}>
|
||||||
|
<Text style={styles.stepNumberText}>3</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.stepText}>Select your sensor from the list to connect</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.step}>
|
||||||
|
<View style={styles.stepNumber}>
|
||||||
|
<Text style={styles.stepNumberText}>4</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.stepText}>Configure WiFi settings to complete setup</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Scan Button */}
|
||||||
|
{!isScanning && foundDevices.length === 0 && (
|
||||||
|
<TouchableOpacity style={styles.scanButton} onPress={handleScan}>
|
||||||
|
<Ionicons name="scan" size={24} color={AppColors.white} />
|
||||||
|
<Text style={styles.scanButtonText}>Scan for Sensors</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Scanning Indicator */}
|
||||||
|
{isScanning && (
|
||||||
|
<View style={styles.scanningCard}>
|
||||||
|
<ActivityIndicator size="large" color={AppColors.primary} />
|
||||||
|
<Text style={styles.scanningText}>Scanning for WP sensors...</Text>
|
||||||
|
<TouchableOpacity style={styles.stopScanButton} onPress={stopScan}>
|
||||||
|
<Text style={styles.stopScanText}>Stop Scan</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Found Devices */}
|
||||||
|
{foundDevices.length > 0 && !isScanning && (
|
||||||
|
<>
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={styles.sectionTitle}>Found Sensors ({foundDevices.length})</Text>
|
||||||
|
<TouchableOpacity style={styles.rescanButton} onPress={handleScan}>
|
||||||
|
<Ionicons name="refresh" size={18} color={AppColors.primary} />
|
||||||
|
<Text style={styles.rescanText}>Rescan</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.devicesList}>
|
||||||
|
{foundDevices.map((device) => {
|
||||||
|
const isConnected = connectedDevices.has(device.id);
|
||||||
|
const isConnectingThis = isConnecting && selectedDevice?.id === device.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={device.id}
|
||||||
|
style={[
|
||||||
|
styles.deviceCard,
|
||||||
|
isConnected && styles.deviceCardConnected,
|
||||||
|
]}
|
||||||
|
onPress={() => handleConnect(device)}
|
||||||
|
disabled={isConnectingThis || isConnected}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View style={styles.deviceInfo}>
|
||||||
|
<View style={styles.deviceIcon}>
|
||||||
|
<Ionicons name="water" size={24} color={AppColors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.deviceDetails}>
|
||||||
|
<Text style={styles.deviceName}>{device.name}</Text>
|
||||||
|
{device.wellId && (
|
||||||
|
<Text style={styles.deviceMeta}>Well ID: {device.wellId}</Text>
|
||||||
|
)}
|
||||||
|
<View style={styles.signalRow}>
|
||||||
|
<Ionicons
|
||||||
|
name={getSignalIcon(device.rssi)}
|
||||||
|
size={14}
|
||||||
|
color={getSignalColor(device.rssi)}
|
||||||
|
/>
|
||||||
|
<Text style={[styles.signalText, { color: getSignalColor(device.rssi) }]}>
|
||||||
|
{device.rssi} dBm
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{isConnectingThis ? (
|
||||||
|
<ActivityIndicator size="small" color={AppColors.primary} />
|
||||||
|
) : isConnected ? (
|
||||||
|
<View style={styles.connectedBadge}>
|
||||||
|
<Ionicons name="checkmark-circle" size={20} color={AppColors.success} />
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty State (after scan completed, no devices found) */}
|
||||||
|
{!isScanning && foundDevices.length === 0 && (
|
||||||
|
<View style={styles.emptyState}>
|
||||||
|
<View style={styles.emptyIconContainer}>
|
||||||
|
<Ionicons name="search-outline" size={48} color={AppColors.textMuted} />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.emptyTitle}>No Sensors Found</Text>
|
||||||
|
<Text style={styles.emptyText}>
|
||||||
|
Make sure your WP sensor is powered on and within range, then try scanning again.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Help Card */}
|
||||||
|
<View style={styles.helpCard}>
|
||||||
|
<View style={styles.helpHeader}>
|
||||||
|
<Ionicons name="help-circle" size={20} color={AppColors.info} />
|
||||||
|
<Text style={styles.helpTitle}>Troubleshooting</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.helpText}>
|
||||||
|
• Sensor not showing up? Make sure it's powered on and the LED is blinking{'\n'}
|
||||||
|
• Weak signal? Move closer to the sensor{'\n'}
|
||||||
|
• Connection fails? Try restarting the sensor{'\n'}
|
||||||
|
• Still having issues? Contact support for assistance
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: AppColors.background,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: AppColors.border,
|
||||||
|
},
|
||||||
|
backButton: {
|
||||||
|
padding: Spacing.xs,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontSize: FontSizes.lg,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
width: 32,
|
||||||
|
},
|
||||||
|
simulatorWarning: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: AppColors.warningLight,
|
||||||
|
paddingVertical: Spacing.xs,
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
gap: Spacing.xs,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: AppColors.warning,
|
||||||
|
},
|
||||||
|
simulatorWarningText: {
|
||||||
|
fontSize: FontSizes.xs,
|
||||||
|
color: AppColors.warning,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
padding: Spacing.lg,
|
||||||
|
paddingBottom: Spacing.xxl,
|
||||||
|
},
|
||||||
|
// Instructions
|
||||||
|
instructionsCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
padding: Spacing.lg,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
instructionsTitle: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
marginBottom: Spacing.sm,
|
||||||
|
gap: Spacing.sm,
|
||||||
|
},
|
||||||
|
stepNumber: {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 12,
|
||||||
|
backgroundColor: AppColors.primary,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
stepNumberText: {
|
||||||
|
fontSize: FontSizes.xs,
|
||||||
|
fontWeight: FontWeights.bold,
|
||||||
|
color: AppColors.white,
|
||||||
|
},
|
||||||
|
stepText: {
|
||||||
|
flex: 1,
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
lineHeight: 20,
|
||||||
|
paddingTop: 2,
|
||||||
|
},
|
||||||
|
// Scan Button
|
||||||
|
scanButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: AppColors.primary,
|
||||||
|
paddingVertical: Spacing.md,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
gap: Spacing.sm,
|
||||||
|
...Shadows.md,
|
||||||
|
},
|
||||||
|
scanButtonText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.white,
|
||||||
|
},
|
||||||
|
// Scanning
|
||||||
|
scanningCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
padding: Spacing.xl,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
scanningText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
marginTop: Spacing.md,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
stopScanButton: {
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.lg,
|
||||||
|
},
|
||||||
|
stopScanText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
color: AppColors.error,
|
||||||
|
},
|
||||||
|
// Section Header
|
||||||
|
sectionHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 0.5,
|
||||||
|
},
|
||||||
|
rescanButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
},
|
||||||
|
rescanText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
color: AppColors.primary,
|
||||||
|
},
|
||||||
|
// Devices List
|
||||||
|
devicesList: {
|
||||||
|
gap: Spacing.md,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
},
|
||||||
|
deviceCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
deviceCardConnected: {
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: AppColors.success,
|
||||||
|
},
|
||||||
|
deviceInfo: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.md,
|
||||||
|
},
|
||||||
|
deviceIcon: {
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
backgroundColor: AppColors.primaryLighter,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
deviceDetails: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
deviceName: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
deviceMeta: {
|
||||||
|
fontSize: FontSizes.xs,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
marginBottom: 4,
|
||||||
|
},
|
||||||
|
signalRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
},
|
||||||
|
signalText: {
|
||||||
|
fontSize: FontSizes.xs,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
},
|
||||||
|
connectedBadge: {
|
||||||
|
padding: Spacing.xs,
|
||||||
|
},
|
||||||
|
// Empty State
|
||||||
|
emptyState: {
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: Spacing.xl,
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
emptyIconContainer: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: 40,
|
||||||
|
backgroundColor: AppColors.surfaceSecondary,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
emptyTitle: {
|
||||||
|
fontSize: FontSizes.lg,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: Spacing.xs,
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
// Help Card
|
||||||
|
helpCard: {
|
||||||
|
backgroundColor: AppColors.infoLight,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
},
|
||||||
|
helpHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.sm,
|
||||||
|
marginBottom: Spacing.xs,
|
||||||
|
},
|
||||||
|
helpTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.info,
|
||||||
|
},
|
||||||
|
helpText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.info,
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
});
|
||||||
563
app/(tabs)/beneficiaries/[id]/setup-wifi.tsx
Normal file
563
app/(tabs)/beneficiaries/[id]/setup-wifi.tsx
Normal file
@ -0,0 +1,563 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Alert,
|
||||||
|
ActivityIndicator,
|
||||||
|
TextInput,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { router, useLocalSearchParams } from 'expo-router';
|
||||||
|
import * as Device from 'expo-device';
|
||||||
|
import { useBLE } from '@/contexts/BLEContext';
|
||||||
|
import { api } from '@/services/api';
|
||||||
|
import type { WiFiNetwork } from '@/services/ble';
|
||||||
|
import {
|
||||||
|
AppColors,
|
||||||
|
BorderRadius,
|
||||||
|
FontSizes,
|
||||||
|
FontWeights,
|
||||||
|
Spacing,
|
||||||
|
Shadows,
|
||||||
|
} from '@/constants/theme';
|
||||||
|
|
||||||
|
export default function SetupWiFiScreen() {
|
||||||
|
const { id, deviceId, deviceName, wellId } = useLocalSearchParams<{
|
||||||
|
id: string;
|
||||||
|
deviceId: string;
|
||||||
|
deviceName: string;
|
||||||
|
wellId: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const { getWiFiList, setWiFi, disconnectDevice } = useBLE();
|
||||||
|
|
||||||
|
const [networks, setNetworks] = useState<WiFiNetwork[]>([]);
|
||||||
|
const [isLoadingNetworks, setIsLoadingNetworks] = useState(false);
|
||||||
|
const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork | null>(null);
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [isConnecting, setIsConnecting] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadWiFiNetworks();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadWiFiNetworks = async () => {
|
||||||
|
setIsLoadingNetworks(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const wifiList = await getWiFiList(deviceId!);
|
||||||
|
setNetworks(wifiList);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[SetupWiFi] Failed to get WiFi list:', error);
|
||||||
|
Alert.alert('Error', error.message || 'Failed to get WiFi networks. Please try again.');
|
||||||
|
} finally {
|
||||||
|
setIsLoadingNetworks(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectNetwork = (network: WiFiNetwork) => {
|
||||||
|
setSelectedNetwork(network);
|
||||||
|
setPassword('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConnect = async () => {
|
||||||
|
if (!selectedNetwork) {
|
||||||
|
Alert.alert('Error', 'Please select a WiFi network');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!password) {
|
||||||
|
Alert.alert('Error', 'Please enter WiFi password');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsConnecting(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Step 1: Set WiFi on the device via BLE
|
||||||
|
const success = await setWiFi(deviceId!, selectedNetwork.ssid, password);
|
||||||
|
|
||||||
|
if (!success) {
|
||||||
|
throw new Error('Failed to configure WiFi on sensor');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 2: Attach device to beneficiary via API (skip in simulator/mock mode)
|
||||||
|
const isSimulator = !Device.isDevice;
|
||||||
|
|
||||||
|
if (!isSimulator) {
|
||||||
|
const attachResponse = await api.attachDeviceToBeneficiary(
|
||||||
|
id!,
|
||||||
|
parseInt(wellId!, 10),
|
||||||
|
selectedNetwork.ssid,
|
||||||
|
password
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!attachResponse.ok) {
|
||||||
|
throw new Error('Failed to attach sensor to beneficiary');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('[SetupWiFi] Simulator mode - skipping API attach');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 3: Disconnect BLE connection (sensor will reboot and connect to WiFi)
|
||||||
|
await disconnectDevice(deviceId!);
|
||||||
|
|
||||||
|
// Success!
|
||||||
|
Alert.alert(
|
||||||
|
'Success!',
|
||||||
|
`${deviceName} has been configured and attached.\n\nThe sensor will now reboot and connect to "${selectedNetwork.ssid}". This may take a minute.`,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
text: 'Done',
|
||||||
|
onPress: () => {
|
||||||
|
// Navigate back to Equipment screen
|
||||||
|
router.replace(`/(tabs)/beneficiaries/${id}/equipment` as any);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[SetupWiFi] Failed to connect:', error);
|
||||||
|
Alert.alert(
|
||||||
|
'Connection Failed',
|
||||||
|
error.message || 'Failed to configure WiFi. Please check the password and try again.'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsConnecting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalStrength = (rssi: number): string => {
|
||||||
|
if (rssi >= -50) return 'Excellent';
|
||||||
|
if (rssi >= -60) return 'Good';
|
||||||
|
if (rssi >= -70) return 'Fair';
|
||||||
|
return 'Weak';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalColor = (rssi: number) => {
|
||||||
|
if (rssi >= -50) return AppColors.success;
|
||||||
|
if (rssi >= -60) return AppColors.info;
|
||||||
|
if (rssi >= -70) return AppColors.warning;
|
||||||
|
return AppColors.error;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalIcon = (rssi: number) => {
|
||||||
|
if (rssi >= -50) return 'wifi';
|
||||||
|
if (rssi >= -60) return 'wifi';
|
||||||
|
if (rssi >= -70) return 'wifi-outline';
|
||||||
|
return 'wifi-outline';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.backButton}
|
||||||
|
onPress={() => {
|
||||||
|
// Disconnect BLE before going back
|
||||||
|
disconnectDevice(deviceId!);
|
||||||
|
router.back();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Setup WiFi</Text>
|
||||||
|
<View style={styles.placeholder} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||||
|
{/* Device Info Card */}
|
||||||
|
<View style={styles.deviceCard}>
|
||||||
|
<View style={styles.deviceIcon}>
|
||||||
|
<Ionicons name="water" size={32} color={AppColors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.deviceInfo}>
|
||||||
|
<Text style={styles.deviceName}>{deviceName}</Text>
|
||||||
|
<Text style={styles.deviceMeta}>Well ID: {wellId}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Instructions */}
|
||||||
|
<View style={styles.instructionsCard}>
|
||||||
|
<Text style={styles.instructionsText}>
|
||||||
|
Select the WiFi network your sensor should connect to. Make sure the network has internet access.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* WiFi Networks List */}
|
||||||
|
{isLoadingNetworks ? (
|
||||||
|
<View style={styles.loadingContainer}>
|
||||||
|
<ActivityIndicator size="large" color={AppColors.primary} />
|
||||||
|
<Text style={styles.loadingText}>Scanning for WiFi networks...</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={styles.sectionTitle}>Available Networks ({networks.length})</Text>
|
||||||
|
<TouchableOpacity style={styles.refreshButton} onPress={loadWiFiNetworks}>
|
||||||
|
<Ionicons name="refresh" size={18} color={AppColors.primary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{networks.length === 0 ? (
|
||||||
|
<View style={styles.emptyState}>
|
||||||
|
<Ionicons name="wifi-outline" size={48} color={AppColors.textMuted} />
|
||||||
|
<Text style={styles.emptyText}>No WiFi networks found</Text>
|
||||||
|
<TouchableOpacity style={styles.retryButton} onPress={loadWiFiNetworks}>
|
||||||
|
<Text style={styles.retryText}>Try Again</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View style={styles.networksList}>
|
||||||
|
{networks.map((network, index) => {
|
||||||
|
const isSelected = selectedNetwork?.ssid === network.ssid;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={`${network.ssid}-${index}`}
|
||||||
|
style={[
|
||||||
|
styles.networkCard,
|
||||||
|
isSelected && styles.networkCardSelected,
|
||||||
|
]}
|
||||||
|
onPress={() => handleSelectNetwork(network)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View style={styles.networkInfo}>
|
||||||
|
<Ionicons
|
||||||
|
name={getSignalIcon(network.rssi)}
|
||||||
|
size={24}
|
||||||
|
color={getSignalColor(network.rssi)}
|
||||||
|
/>
|
||||||
|
<View style={styles.networkDetails}>
|
||||||
|
<Text style={styles.networkName}>{network.ssid}</Text>
|
||||||
|
<Text style={[styles.signalText, { color: getSignalColor(network.rssi) }]}>
|
||||||
|
{getSignalStrength(network.rssi)} ({network.rssi} dBm)
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{isSelected && (
|
||||||
|
<Ionicons name="checkmark-circle" size={24} color={AppColors.primary} />
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Password Input (shown when network selected) */}
|
||||||
|
{selectedNetwork && (
|
||||||
|
<View style={styles.passwordCard}>
|
||||||
|
<Text style={styles.passwordLabel}>WiFi Password</Text>
|
||||||
|
<View style={styles.passwordInputContainer}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.passwordInput}
|
||||||
|
value={password}
|
||||||
|
onChangeText={setPassword}
|
||||||
|
placeholder="Enter password"
|
||||||
|
secureTextEntry={!showPassword}
|
||||||
|
autoCapitalize="none"
|
||||||
|
autoCorrect={false}
|
||||||
|
/>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.togglePasswordButton}
|
||||||
|
onPress={() => setShowPassword(!showPassword)}
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={showPassword ? 'eye-off' : 'eye'}
|
||||||
|
size={20}
|
||||||
|
color={AppColors.textMuted}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Connect Button */}
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[
|
||||||
|
styles.connectButton,
|
||||||
|
(!password || isConnecting) && styles.connectButtonDisabled,
|
||||||
|
]}
|
||||||
|
onPress={handleConnect}
|
||||||
|
disabled={!password || isConnecting}
|
||||||
|
>
|
||||||
|
{isConnecting ? (
|
||||||
|
<>
|
||||||
|
<ActivityIndicator size="small" color={AppColors.white} />
|
||||||
|
<Text style={styles.connectButtonText}>Connecting...</Text>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Ionicons name="checkmark" size={20} color={AppColors.white} />
|
||||||
|
<Text style={styles.connectButtonText}>Connect & Complete Setup</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Help Card */}
|
||||||
|
<View style={styles.helpCard}>
|
||||||
|
<View style={styles.helpHeader}>
|
||||||
|
<Ionicons name="information-circle" size={20} color={AppColors.info} />
|
||||||
|
<Text style={styles.helpTitle}>Important</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.helpText}>
|
||||||
|
• The sensor will reboot after WiFi is configured{'\n'}
|
||||||
|
• It may take up to 1 minute for the sensor to connect{'\n'}
|
||||||
|
• Make sure the WiFi password is correct{'\n'}
|
||||||
|
• The network must have internet access
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: AppColors.background,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: AppColors.border,
|
||||||
|
},
|
||||||
|
backButton: {
|
||||||
|
padding: Spacing.xs,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontSize: FontSizes.lg,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
width: 32,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
padding: Spacing.lg,
|
||||||
|
paddingBottom: Spacing.xxl,
|
||||||
|
},
|
||||||
|
// Device Card
|
||||||
|
deviceCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
padding: Spacing.lg,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
deviceIcon: {
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
backgroundColor: AppColors.primaryLighter,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: Spacing.md,
|
||||||
|
},
|
||||||
|
deviceInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
deviceName: {
|
||||||
|
fontSize: FontSizes.lg,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
deviceMeta: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
},
|
||||||
|
// Instructions
|
||||||
|
instructionsCard: {
|
||||||
|
backgroundColor: AppColors.infoLight,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
},
|
||||||
|
instructionsText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.info,
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
// Loading
|
||||||
|
loadingContainer: {
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: Spacing.xl,
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
marginTop: Spacing.md,
|
||||||
|
},
|
||||||
|
// Section Header
|
||||||
|
sectionHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 0.5,
|
||||||
|
},
|
||||||
|
refreshButton: {
|
||||||
|
padding: Spacing.xs,
|
||||||
|
},
|
||||||
|
// Empty State
|
||||||
|
emptyState: {
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: Spacing.xl,
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
marginTop: Spacing.md,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
retryButton: {
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.lg,
|
||||||
|
},
|
||||||
|
retryText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.primary,
|
||||||
|
},
|
||||||
|
// Networks List
|
||||||
|
networksList: {
|
||||||
|
gap: Spacing.sm,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
},
|
||||||
|
networkCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
networkCardSelected: {
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: AppColors.primary,
|
||||||
|
},
|
||||||
|
networkInfo: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.md,
|
||||||
|
},
|
||||||
|
networkDetails: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
networkName: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
signalText: {
|
||||||
|
fontSize: FontSizes.xs,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
},
|
||||||
|
// Password Input
|
||||||
|
passwordCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
padding: Spacing.lg,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
passwordLabel: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
marginBottom: Spacing.sm,
|
||||||
|
},
|
||||||
|
passwordInputContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: AppColors.background,
|
||||||
|
borderRadius: BorderRadius.md,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: AppColors.border,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
passwordInput: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
},
|
||||||
|
togglePasswordButton: {
|
||||||
|
padding: Spacing.md,
|
||||||
|
},
|
||||||
|
// Connect Button
|
||||||
|
connectButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: AppColors.primary,
|
||||||
|
paddingVertical: Spacing.md,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
gap: Spacing.sm,
|
||||||
|
...Shadows.md,
|
||||||
|
},
|
||||||
|
connectButtonDisabled: {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
connectButtonText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.white,
|
||||||
|
},
|
||||||
|
// Help Card
|
||||||
|
helpCard: {
|
||||||
|
backgroundColor: AppColors.infoLight,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
},
|
||||||
|
helpHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.sm,
|
||||||
|
marginBottom: Spacing.xs,
|
||||||
|
},
|
||||||
|
helpTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.info,
|
||||||
|
},
|
||||||
|
helpText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.info,
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user