formatting

app/client/mobile/src/access/Access.tsx

@@ -6,13 +6,20 @@ import {
   View,
   Image,
 } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {useAccess} from './useAccess.hook';
 import {styles} from './Access.styled';
 import left from '../images/login.png';
-import {IconButton, Modal, Surface, Text, TextInput, Button} from 'react-native-paper';
+import {
+  IconButton,
+  Modal,
+  Surface,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native-paper';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import { BlurView } from "@react-native-community/blur";
+import {BlurView} from '@react-native-community/blur';
 import {InputCode} from '../utils/InputCode';
 
 export function Access() {
@@ -64,7 +71,9 @@ export function Access() {
       {state.layout === 'large' && (
         <Image style={styles.left} source={left} resizeMode="contain" />
       )}
-      <KeyboardAwareScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
+      <KeyboardAwareScrollView
+        style={styles.frame}
+        contentContainerStyle={styles.scroll}>
         <SafeAreaView style={styles.right} edges={['top', 'bottom']}>
           <View style={styles.header}>
             <View style={styles.admin} />
@@ -92,9 +101,7 @@ export function Access() {
           </View>
           {state.mode === 'account' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.accountLogin}</Text>
-                {state.strings.accountLogin}
-              </Text>
               <TextInput
                 style={styles.input}
                 mode="flat"
@@ -160,9 +167,7 @@ export function Access() {
           )}
           {state.mode === 'reset' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.accessAccount}</Text>
-                {state.strings.accessAccount}
-              </Text>
               <TextInput
                 style={styles.input}
                 mode="flat"
@@ -202,9 +207,7 @@ export function Access() {
           )}
           {state.mode === 'create' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.createAccount}</Text>
-                {state.strings.createAccount}
-              </Text>
               <View style={styles.spacer}>
                 {!state.available && (
                   <TextInput
@@ -365,7 +368,12 @@ export function Access() {
         </SafeAreaView>
       </KeyboardAwareScrollView>
       {(alert || otp) && (
-        <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+        <BlurView
+          style={styles.blur}
+          blurType="dark"
+          blurAmount={2}
+          reducedTransparencyFallbackColor="dark"
+        />
       )}
       <Modal
         visible={alert}

app/client/mobile/src/access/useAccess.hook.ts

@@ -47,8 +47,7 @@ export function useAccess() {
         if (node) {
           const available = await app.actions.getAvailable(node, secure);
           updateState({available});
-        }
+        } else {
-        else {
           updateState({available: 0});
         }
       } catch (err) {
@@ -76,8 +75,7 @@ export function useAccess() {
             secure,
           );
           updateState({taken: !available});
-        }
+        } else {
-        else {
           updateState({taken: false});
         }
       } catch (err) {

app/client/mobile/src/channels/Channels.tsx

@@ -4,6 +4,8 @@ import { SafeAreaView } from 'react-native';
 
 export function Channels() {
   return (
-    <SafeAreaView><Text>CHANNELS</Text></SafeAreaView>
+    <SafeAreaView>
+      <Text>CHANNELS</Text>
+    </SafeAreaView>
   );
 }

app/client/mobile/src/contacts/Contacts.tsx

@@ -4,6 +4,8 @@ import { SafeAreaView } from 'react-native';
 
 export function Contacts() {
   return (
-    <SafeAreaView><Text>Contacts</Text></SafeAreaView>
+    <SafeAreaView>
+      <Text>Contacts</Text>
+    </SafeAreaView>
   );
 }

app/client/mobile/src/context/useAppContext.hook.ts

@@ -47,7 +47,7 @@ export function useAppContext() {
         appName: 'databag',
       };
 
-console.log("SDK LOGIN:", username, password, node, secure);
+      console.log('SDK LOGIN:', username, password, node, secure);
 
       const login = await sdk.current.login(
         username,

app/client/mobile/src/context/useDisplayContext.hook.ts

@@ -16,7 +16,7 @@ export function useDisplayContext() {
   };
 
   useEffect(() => {
-    const layout = dim.width < SMALL_LARGE ? 'small' : 'large'
+    const layout = dim.width < SMALL_LARGE ? 'small' : 'large';
     updateState({layout});
   }, [dim.width]);
 

app/client/mobile/src/details/Details.tsx

@@ -1,5 +1,5 @@
 import {Text} from 'react-native-paper';
 
 export function Details() {
-  return <Text>DETAILS</Text>
+  return <Text>DETAILS</Text>;
 }

app/client/mobile/src/profile/Profile.tsx

@@ -1,3 +1,3 @@
 export function Profile() {
-  return <></>
+  return <></>;
 }

app/client/mobile/src/registry/Registry.tsx

@@ -1,4 +1,3 @@
 export function Registry() {
-  return <></>
+  return <></>;
 }
-

app/client/mobile/src/session/Session.styled.ts

@@ -21,4 +21,3 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
   },
 });
-

app/client/mobile/src/session/Session.tsx

@@ -27,9 +27,24 @@ export function Session() {
   const display = useContext(DisplayContext);
   const [index, setIndex] = useState(0);
   const [routes] = useState([
-    { key: 'channels', title: 'Channels', focusedIcon: 'comment-multiple', unfocusedIcon: 'comment-multiple-outline' },
+    {
-    { key: 'contacts', title: 'Contacts', focusedIcon: 'contacts', unfocusedIcon: 'contacts-outline' },
+      key: 'channels',
-    { key: 'settings', title: 'Settings', focusedIcon: 'cog', unfocusedIcon: 'cog-outline' },
+      title: 'Channels',
+      focusedIcon: 'comment-multiple',
+      unfocusedIcon: 'comment-multiple-outline',
+    },
+    {
+      key: 'contacts',
+      title: 'Contacts',
+      focusedIcon: 'contacts',
+      unfocusedIcon: 'contacts-outline',
+    },
+    {
+      key: 'settings',
+      title: 'Settings',
+      focusedIcon: 'cog',
+      unfocusedIcon: 'cog-outline',
+    },
   ]);
   const sessionNav = {settings: null};
 
@@ -56,7 +71,7 @@ export function Session() {
       )}
     </View>
   );
-};
+}
 
 function DetailsScreen({nav}) {
   return (
@@ -67,13 +82,14 @@ function DetailsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ProfileDrawer.Screen name="profile">
-        {({ navigation }) => <ProfileScreen nav={{...nav, details: navigation}} />}
+        {({navigation}) => (
+          <ProfileScreen nav={{...nav, details: navigation}} />
+        )}
       </ProfileDrawer.Screen>
     </ProfileDrawer.Navigator>
-  )
+  );
 }
 
 function ProfileScreen({nav}) {
@@ -85,13 +101,14 @@ function ProfileScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ProfileDrawer.Screen name="registry">
-        {({ navigation }) => <RegistryScreen nav={{...nav, profile: navigation}} />}
+        {({navigation}) => (
+          <RegistryScreen nav={{...nav, profile: navigation}} />
+        )}
       </ProfileDrawer.Screen>
     </ProfileDrawer.Navigator>
-  )
+  );
 }
 
 function RegistryScreen({nav}) {
@@ -103,13 +120,14 @@ function RegistryScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <RegistryDrawer.Screen name="contacts">
-        {({ navigation }) => <ContactsScreen nav={{...nav, registry: navigation}} />}
+        {({navigation}) => (
+          <ContactsScreen nav={{...nav, registry: navigation}} />
+        )}
       </RegistryDrawer.Screen>
     </RegistryDrawer.Navigator>
-  )
+  );
 }
 
 function ContactsScreen({nav}) {
@@ -121,13 +139,14 @@ function ContactsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ContactsDrawer.Screen name="settings">
-        {({ navigation }) => <SettingsScreen nav={{...nav, contacts: navigation}} />}
+        {({navigation}) => (
+          <SettingsScreen nav={{...nav, contacts: navigation}} />
+        )}
       </ContactsDrawer.Screen>
     </ContactsDrawer.Navigator>
-  )
+  );
 }
 
 function SettingsScreen({nav}) {
@@ -139,13 +158,12 @@ function SettingsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <SettingsDrawer.Screen name="home">
         {({navigation}) => <HomeScreen nav={{...nav, settings: navigation}} />}
       </SettingsDrawer.Screen>
     </SettingsDrawer.Navigator>
-  )
+  );
 }
 
 function HomeScreen({nav}) {

app/client/mobile/src/settings/Settings.tsx

@@ -8,7 +8,9 @@ export function Settings() {
 
   return (
     <SafeAreaView>
-      <Button mode="contained" onPress={app.actions.accountLogout}>Logout</Button>
+      <Button mode="contained" onPress={app.actions.accountLogout}>
+        Logout
+      </Button>
     </SafeAreaView>
   );
 }

app/client/mobile/src/utils/InputCode.tsx

@@ -2,49 +2,134 @@ import { TextInput, Text, View, TouchableOpacity } from 'react-native';
 import {useState, useRef} from 'react';
 
 export function InputCode({onChangeText, style}) {
-
   const [code, setCode] = useState('');
   const ref = useRef();
 
-  const updateCode = (value) => {
+  const updateCode = value => {
     if (value.length >= 6) {
       onChangeText(value.slice(0, 6));
       if (ref.current) {
         ref.current.blur();
       }
-    }
+    } else {
-    else {
       onChangeText('');
     }
     setCode(value.slice(0, 6));
-  }
+  };
 
   return (
     <View style={style}>
       <View style={{width: '100%', height: 32}}>
-        <View style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+          }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(0)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(1)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(2)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(3)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(4)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
             <Text style={{fontSize: 20}}>{code.charAt(5)}</Text>
           </View>
         </View>
-        <TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} ref={ref} />
+        <TextInput
+          style={{
+            width: '100%',
+            height: '100%',
+            opacity: 0,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          }}
+          keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'}
+          onChangeText={updateCode}
+          autoCorrect={false}
+          autoCapitalize="none"
+          maxLength={6}
+          ref={ref}
+        />
       </View>
     </View>
   );
 }
-