@onairos/react-native 3.0.26 → 3.0.27

package/src/components/UniversalOnboarding.tsx

@@ -15,7 +15,6 @@ import {
   Image,
   Switch,
   Linking,
-  Alert,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
@@ -53,9 +52,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
   const [oauthUrl, setOauthUrl] = useState<string>('');
   const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [userEmail, setUserEmail] = useState<string>('user@example.com'); // Use proper email instead of random username
+  const [username, setUsername] = useState<string>('Avatar');
   const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
-  const [connectingPlatform, setConnectingPlatform] = useState<string | null>(null);
 
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
@@ -158,8 +156,50 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }, [getConnectionStatus]);
 
   const togglePlatform = useCallback(async (platformId: string) => {
-    // Check if already connected or connecting
-    if (connections[platformId]?.connected) {
+    if (!platformToggles[platformId]) {
+      // Attempt to connect platform
+      try {
+        setIsConnectingPlatform(true);
+        console.log(`Initiating connection for ${platformId}`);
+        
+        // Check if platform has a native SDK
+        if (hasNativeSDK(platformId)) {
+          console.log(`Using native SDK for ${platformId}`);
+          // Use native SDK for authentication
+          const success = await initiateNativeAuth(platformId);
+          if (success) {
+            console.log(`Native authentication successful for ${platformId}`);
+            // Update platform toggle state
+            setPlatformToggles(prev => ({
+              ...prev,
+              [platformId]: true
+            }));
+            
+            // Update connections state
+            setConnections(prev => ({
+              ...prev,
+              [platformId]: { userName: username, connected: true }
+            }));
+          }
+        } else {
+          console.log(`Initiating OAuth flow for ${platformId}`);
+          // Use OAuth flow through proxy server
+          const oauthUrl = await initiateOAuth(platformId, username, AppName);
+          if (oauthUrl) {
+            console.log(`Received OAuth URL for ${platformId}: ${oauthUrl}`);
+            setCurrentPlatform(platformId);
+            setOauthUrl(oauthUrl);
+            setStep('oauth');
+          } else {
+            console.error(`No OAuth URL returned for ${platformId}`);
+          }
+        }
+      } catch (error) {
+        console.error(`Error connecting ${platformId}:`, error);
+      } finally {
+        setIsConnectingPlatform(false);
+      }
+    } else {
       // Disconnect platform
       console.log(`Disconnecting ${platformId}`);
       setPlatformToggles(prev => ({
@@ -173,70 +213,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         delete newConnections[platformId];
         return newConnections;
       });
-      return;
-    }
-
-    if (connectingPlatform === platformId) {
-      console.log(`Already connecting to ${platformId}, ignoring...`);
-      return;
     }
-
-    // Attempt to connect platform
-    try {
-      setIsConnectingPlatform(true);
-      setConnectingPlatform(platformId);
-      console.log(`[OAuth] Initiating connection for ${platformId} with email: ${userEmail}`);
-      
-      // Check if platform has a native SDK
-      if (hasNativeSDK(platformId)) {
-        console.log(`[OAuth] Using native SDK for ${platformId}`);
-        // Use native SDK for authentication
-        const success = await initiateNativeAuth(platformId);
-        if (success) {
-          console.log(`[OAuth] Native authentication successful for ${platformId}`);
-          // Update platform toggle state
-          setPlatformToggles(prev => ({
-            ...prev,
-            [platformId]: true
-          }));
-          
-          // Update connections state
-          setConnections(prev => ({
-            ...prev,
-            [platformId]: { userName: userEmail, connected: true }
-          }));
-        }
-      } else {
-        console.log(`[OAuth] Initiating OAuth flow for ${platformId}`);
-        console.log(`[OAuth] Making request to: https://api2.onairos.uk/${platformId}/authorize`);
-        
-        // Use OAuth flow through proxy server
-        const oauthUrl = await initiateOAuth(platformId, userEmail);
-        if (oauthUrl) {
-          console.log(`[OAuth] Received OAuth URL for ${platformId}: ${oauthUrl}`);
-          setCurrentPlatform(platformId);
-          setOauthUrl(oauthUrl);
-          setStep('oauth');
-        } else {
-          console.error(`[OAuth] No OAuth URL returned for ${platformId}`);
-          throw new Error(`No OAuth URL returned for ${platformId}`);
-        }
-      }
-    } catch (error) {
-      console.error(`[OAuth] Error connecting ${platformId}:`, error);
-      // Reset toggle state on error
-      setPlatformToggles(prev => ({
-        ...prev,
-        [platformId]: false
-      }));
-      
-      // Show error to user
-      Alert.alert('Connection Error', `Failed to connect to ${platformId}. Please try again.`);
-    } finally {
-      setIsConnectingPlatform(false);
-      setConnectingPlatform(null);
-    }
-  }, [platformToggles, userEmail, connections, connectingPlatform]);
+  }, [platformToggles, username]);
 
   /**
    * Handles OAuth callback URLs
@@ -252,7 +230,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         // Update connections state
         setConnections(prev => ({
           ...prev,
-          [platform]: { userName: userEmail, connected: true }
+          [platform]: { userName: username, connected: true }
         }));
         
         // Update platform toggles
@@ -267,7 +245,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     } catch (error) {
       console.error('Error handling OAuth callback:', error);
     }
-  }, [currentPlatform, userEmail]);
+  }, [currentPlatform, username]);
   
   /**
    * Handles completion of the OAuth flow
@@ -275,13 +253,13 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const handleOAuthSuccess = useCallback((code: string) => {
     console.log(`OAuth success for ${currentPlatform} with code: ${code}`);
     
-          // Update connections for the current platform
-      if (currentPlatform) {
-        // Update connections state
-        setConnections(prev => ({
-          ...prev,
-          [currentPlatform]: { userName: userEmail, connected: true }
-        }));
+    // Update connections for the current platform
+    if (currentPlatform) {
+      // Update connections state
+      setConnections(prev => ({
+        ...prev,
+        [currentPlatform]: { userName: username, connected: true }
+      }));
       
       // Update platform toggles
       setPlatformToggles(prev => ({
@@ -289,20 +267,14 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         [currentPlatform]: true
       }));
       
-      // In a real implementation, we would send the code to our server
-      // to exchange it for an access token and store it securely
-      console.log(`Simulating token exchange for ${currentPlatform}`);
-      
-      // For demo purposes, we'll just simulate a successful token exchange
-      if (debug || test) {
-        console.log('Debug mode: Simulating successful token exchange');
-      }
+      console.log(`Successfully connected ${currentPlatform} for user ${username}`);
     }
     
     // Close OAuth window and return to connect step
     setOauthUrl('');
+    setCurrentPlatform('');
     setStep('connect');
-  }, [currentPlatform, userEmail, debug, test]);
+  }, [currentPlatform, username]);
 
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
@@ -310,16 +282,23 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     // Simulate training progress over 10 seconds
     let progress = 0;
     const interval = setInterval(() => {
-      progress += 1; // 10% progress every second for 1 seconds total
+      progress += 0.1; // 10% every second for 10 seconds total
       setTraining({
         progress,
         eta: `${Math.round((1 - progress) * 10)} seconds remaining`,
       });
       if (progress >= 1) {
         clearInterval(interval);
-        // Training complete - TrainingModal will handle email input and final completion
+        // Close overlay and call the original onResolved callback
+        onComplete('https://api2.onairos.uk', 'dummy-token', {
+          pin: userPin,
+          connections,
+          platformToggles,
+          selectedTier,
+          tierData: requestData?.[selectedTier],
+        });
       }
-    }, 1000); // 1 second intervals for 10 total seconds
+    }, 1000); // Update every 1 second
   }, [connections, onComplete, selectedTier, requestData, platformToggles]);
 
   const canProceedToPin = useCallback(() => {
@@ -372,20 +351,13 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                           <Text style={styles.onairosIconText}>O</Text>
                         </View>
                       </View>
-                      <Text style={styles.headerDescription}>
-                        Generate insights from your data to send to {AppName}
-                      </Text>
                     </View>
 
-                    <ScrollView 
-                      style={styles.content}
-                      contentContainerStyle={styles.contentContainer}
-                      showsVerticalScrollIndicator={false}
-                    >
+                    <ScrollView style={styles.content}>
                       {/* Main title and description */}
                       <View style={styles.titleContainer}>
                         <Text style={styles.mainTitle}>
-                          Connect your data to create a Persona of you
+                          Connect your data to create a Persona of you, to connect to Cosmos
                         </Text>
                         <Text style={styles.privacyMessage}>
                           None of your app data is shared with ANYONE
@@ -395,41 +367,23 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                       {/* Platform connection options */}
                       <View style={styles.platformsContainer}>
                         {platforms.map((platform) => (
-                          <View key={platform.id} style={[
-                            styles.platformItem,
-                            connections[platform.id]?.connected && styles.platformItemConnected
-                          ]}>
+                          <View key={platform.id} style={styles.platformItem}>
                             <View style={styles.platformInfo}>
                               <Image 
                                 source={platform.icon} 
                                 style={styles.platformIcon} 
                                 resizeMode="contain"
                               />
-                              <View style={styles.platformTextContainer}>
-                                <Text style={styles.platformName}>
-                                  {platform.name}
-                                </Text>
-                                {connections[platform.id]?.connected && (
-                                  <Text style={styles.connectedText}>Connected</Text>
-                                )}
-                                {connectingPlatform === platform.id && (
-                                  <Text style={styles.connectingText}>Connecting...</Text>
-                                )}
-                              </View>
-                            </View>
-                            <View style={styles.platformActions}>
-                              {connectingPlatform === platform.id ? (
-                                <ActivityIndicator size="small" color={COLORS.primary} />
-                              ) : (
-                                <Switch
-                                  value={platformToggles[platform.id] || connections[platform.id]?.connected || false}
-                                  onValueChange={() => togglePlatform(platform.id)}
-                                  trackColor={{ false: '#767577', true: '#4CAF50' }}
-                                  thumbColor={platformToggles[platform.id] || connections[platform.id]?.connected ? '#4CAF50' : '#f4f3f4'}
-                                  disabled={connectingPlatform !== null}
-                                />
-                              )}
+                              <Text style={styles.platformName}>
+                                {platform.name}
+                              </Text>
                             </View>
+                            <Switch
+                              value={platformToggles[platform.id]}
+                              onValueChange={() => togglePlatform(platform.id)}
+                              trackColor={{ false: '#767577', true: '#81b0ff' }}
+                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
+                            />
                           </View>
                         ))}
                       </View>
@@ -480,11 +434,10 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         platformToggles,
                         selectedTier,
                         tierData: requestData?.[selectedTier],
-                        userEmail,
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username={userEmail}
+                    username={username}
                   />
                 )}
                 
@@ -519,7 +472,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.85,
+    height: height * 0.6,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
@@ -541,12 +494,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#E0E0E0',
   },
   header: {
-    paddingHorizontal: 24,
-    paddingTop: 16,
-    paddingBottom: 8,
+    padding: 24,
     alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
   },
   headerContent: {
     flexDirection: 'row',
@@ -581,13 +530,6 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: '#000',
   },
-  headerDescription: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginTop: 12,
-    paddingHorizontal: 16,
-  },
   titleContainer: {
     marginBottom: 30,
   },
@@ -606,10 +548,7 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
-  },
-  contentContainer: {
     paddingHorizontal: 24,
-    paddingBottom: 20,
   },
   platformsContainer: {
     marginTop: 16,
@@ -620,18 +559,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 16,
     backgroundColor: '#fff',
-    borderRadius: 12,
-    marginBottom: 12,
+    borderRadius: 16,
+    marginBottom: 16,
     borderWidth: 1,
-    borderColor: '#E0E0E0',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
+    borderColor: '#eee',
   },
   platformInfo: {
     flexDirection: 'row',
@@ -647,30 +578,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#000',
   },
-  platformTextContainer: {
-    flex: 1,
-  },
-  connectedText: {
-    fontSize: 12,
-    color: '#4CAF50',
-    fontWeight: '500',
-    marginTop: 2,
-  },
-  connectingText: {
-    fontSize: 12,
-    color: '#FF9800',
-    fontWeight: '500',
-    marginTop: 2,
-  },
-  platformActions: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  platformItemConnected: {
-    backgroundColor: '#F8F9FA',
-    borderColor: '#4CAF50',
-    borderWidth: 1,
-  },
   footer: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity, Text } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
 import { WebView, WebViewNavigation } from 'react-native-webview';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../../constants';
-import { isOAuthSuccess, handleOAuthCallback } from '../../services/platformAuthService';
 import type { OAuthWebViewProps } from '../../types';
 
 export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
@@ -14,56 +13,47 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   onSuccess,
 }) => {
   const [loading, setLoading] = useState(true);
-  const [currentUrl, setCurrentUrl] = useState(url);
 
   const handleNavigationStateChange = useCallback(
     (navState: WebViewNavigation) => {
-      console.log(`[OAuthWebView] Navigation state changed for ${platform}:`, navState.url);
-      setCurrentUrl(navState.url);
+      console.log('Navigation state changed:', navState.url);
       
-      // Check for final redirect to onairos.uk/Home (indicates proxy has processed the callback)
-      if (navState.url.includes('onairos.uk/Home')) {
-        console.log(`[OAuthWebView] Detected final redirect to onairos.uk/Home for ${platform}`);
-        
-        // Add a small delay to ensure the redirect is fully processed
-        setTimeout(() => {
-          onSuccess('success');
-          if (onComplete) {
-            onComplete();
-          }
-        }, 500);
-        return;
-      }
+      // Check for the final redirect to onairos.uk/Home
+      const isFinalRedirect = navState.url.includes('onairos.uk/Home');
       
-      // Check for platform-specific success patterns using the service
-      if (platform && isOAuthSuccess(navState.url, platform)) {
-        console.log(`[OAuthWebView] Detected platform-specific success pattern for ${platform}`);
-        
-        // For YouTube/Google, wait for the final redirect
-        if (platform === 'youtube') {
-          console.log(`[OAuthWebView] YouTube success detected, waiting for final redirect...`);
-          // Don't close immediately for YouTube, wait for the onairos.uk/Home redirect
-          return;
-        }
-        
-        // For other platforms, close immediately
-        setTimeout(() => {
-          onSuccess('success');
-          if (onComplete) {
-            onComplete();
-          }
-        }, 300);
-        return;
-      }
+      // Check for Instagram-specific success patterns
+      const isInstagramSuccess = (
+        platform === 'instagram' && 
+        (navState.url.includes('instagram.com/oauth/authorize') || 
+         navState.url.includes('instagram.com/accounts/login') ||
+         navState.url.includes('code='))
+      );
+      
+      // Check for platform-specific success patterns
+      const isYouTubeSuccess = (
+        platform === 'youtube' && 
+        navState.url.includes('accounts.google.com/o/oauth2/approval')
+      );
+      
+      const isLinkedInSuccess = (
+        platform === 'linkedin' && 
+        navState.url.includes('linkedin.com/oauth/v2/authorization/success')
+      );
       
       // Check for callback URLs with authorization codes
-      if (navState.url.includes('/callback') || navState.url.includes('code=')) {
-        console.log(`[OAuthWebView] Detected callback URL for ${platform}:`, navState.url);
-        
+      const isCallbackUrl = navState.url.includes('/callback') || navState.url.includes('code=');
+      
+      // If we detect success, close the window and update connection status
+      if (isFinalRedirect || isInstagramSuccess || isYouTubeSuccess || isLinkedInSuccess) {
+        onSuccess('success');
+        if (onComplete) {
+          onComplete();
+        }
+        return;
+      } else if (isCallbackUrl) {
         // Extract the authorization code
-        const authCode = handleOAuthCallback(navState.url);
+        const authCode = extractAuthCode(navState.url);
         if (authCode) {
-          console.log(`[OAuthWebView] Extracted auth code for ${platform}:`, authCode);
           onSuccess(authCode);
           if (onComplete) {
             onComplete();
@@ -75,22 +65,27 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
     [platform, onComplete, onSuccess]
   );
 
-  const handleLoadStart = useCallback(() => {
-    setLoading(true);
-  }, []);
-
   const handleLoadEnd = useCallback(() => {
     setLoading(false);
   }, []);
 
-  const handleError = useCallback((syntheticEvent: any) => {
-    const { nativeEvent } = syntheticEvent;
-    console.error(`[OAuthWebView] WebView error for ${platform}:`, nativeEvent);
-    setLoading(false);
-  }, [platform]);
-
-  // Get iOS Safari user agent for better compatibility
-  const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1';
+  // Extract auth code from redirect URL
+  const extractAuthCode = (redirectUrl: string): string => {
+    try {
+      // First try to extract code from URL parameters
+      const codeMatch = redirectUrl.match(/code=([^&]+)/);
+      if (codeMatch && codeMatch[1]) {
+        return codeMatch[1];
+      }
+      
+      // If that fails, try parsing as URL
+      const url = new URL(redirectUrl);
+      return url.searchParams.get('code') || '';
+    } catch (error) {
+      console.error('Error extracting auth code:', error);
+      return '';
+    }
+  };
 
   return (
     <SafeAreaView style={styles.container}>
@@ -104,56 +99,31 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
             size={20} 
             color={getPlatformColor(platform || 'default')} 
           />
-          <Text style={styles.platformTitle}>
-            Connect {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'Account'}
-          </Text>
         </View>
-        <View style={styles.placeholder} />
       </View>
 
       <WebView
         source={{ uri: url }}
         onNavigationStateChange={handleNavigationStateChange}
-        onLoadStart={handleLoadStart}
         onLoadEnd={handleLoadEnd}
-        onError={handleError}
         startInLoadingState={true}
         renderLoading={() => <View />}
         style={styles.webView}
-        // Essential WebView configuration for OAuth
         javaScriptEnabled={true}
         domStorageEnabled={true}
-        cacheEnabled={true}
-        incognito={false} // Allow session persistence
-        sharedCookiesEnabled={true} // Critical for Google/YouTube OAuth
-        thirdPartyCookiesEnabled={true} // Required for OAuth flows
-        userAgent={userAgent} // iOS Safari for better compatibility
-        // Additional settings for better OAuth support
+        cacheEnabled={false}
+        incognito={false}
+        sharedCookiesEnabled={true}
+        thirdPartyCookiesEnabled={true}
         allowsInlineMediaPlayback={true}
         mediaPlaybackRequiresUserAction={false}
         allowsBackForwardNavigationGestures={true}
-        // Security settings
-        allowsLinkPreview={false}
-        allowFileAccess={false}
-        allowUniversalAccessFromFileURLs={false}
-        mixedContentMode="compatibility"
+        userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"
       />
 
       {loading && (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={COLORS.primary} />
-          <Text style={styles.loadingText}>
-            Connecting to {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'platform'}...
-          </Text>
-        </View>
-      )}
-      
-      {/* Debug info in development */}
-      {__DEV__ && (
-        <View style={styles.debugContainer}>
-          <Text style={styles.debugText} numberOfLines={1}>
-            {currentUrl}
-          </Text>
         </View>
       )}
     </SafeAreaView>
@@ -173,8 +143,6 @@ const getPlatformIcon = (platform: string): string => {
       return 'push-pin';
     case 'reddit':
       return 'forum';
-    case 'email':
-      return 'email';
     default:
       return 'link';
   }
@@ -193,8 +161,6 @@ const getPlatformColor = (platform: string): string => {
       return '#E60023';
     case 'reddit':
       return '#FF4500';
-    case 'email':
-      return '#4285F4';
     default:
       return COLORS.primary;
   }
@@ -216,49 +182,21 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
-    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-  platformTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginLeft: 8,
   },
   closeButton: {
     padding: 8,
-    width: 40,
-  },
-  placeholder: {
-    width: 40,
+    position: 'absolute',
+    left: 16,
+    zIndex: 10,
   },
   webView: {
     flex: 1,
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  loadingText: {
-    fontSize: 16,
-    color: '#666',
-    marginTop: 16,
-    textAlign: 'center',
-  },
-  debugContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    padding: 8,
-  },
-  debugText: {
-    color: '#fff',
-    fontSize: 12,
-    fontFamily: 'monospace',
-  },
 });