adding contact buttons

app/mobile/src/session/contact/Contact.jsx

@@ -11,6 +11,22 @@ export function Contact({ contact, closeContact }) {
 
   const { state, actions } = useContact(contact);
 
+  const getStatusText = (status) => {
+    if (status === 'confirmed') {
+      return 'Saved';
+    }
+    if (status === 'pending') {
+      return 'Request Reveived';
+    }
+    if (status === 'connecting') {
+      return 'Request Sent';
+    }
+    if (status === 'connected') {
+      return 'Connected';
+    }
+    return 'Unsaved';
+  }
+
   return (
     <ScrollView>
       <SafeAreaView style={styles.container} edges={['top', 'bottom', 'right']}>
@@ -24,6 +40,7 @@ export function Contact({ contact, closeContact }) {
         <View style={styles.header}>
           <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
         </View>
+        <Text style={styles.status}>{ getStatusText(state.status) }</Text> 
         <View style={{ width: 128 }}>
           <Logo src={state.logo} width={128} height={128} radius={8} />
         </View>
@@ -40,6 +57,41 @@ export function Contact({ contact, closeContact }) {
             <Text style={styles.descriptiontext}>{ state.description }</Text>
           </View>
         </View>
+        <View style={styles.controls}>
+          { state.status === 'connected' && (
+            <>
+              <TouchableOpacity style={styles.button}>
+                <Text style={styles.buttonText}>Disconnect</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.button}>
+                <Text style={styles.buttonText}>Delete Contact</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.button}>
+                <Text style={styles.buttonText}>Block Contact</Text>
+              </TouchableOpacity>
+            </>
+          )}
+          { state.status === 'connecting' && (
+            <TouchableOpacity style={styles.button}>
+              <Text style={styles.buttonText}>Block</Text>
+            </TouchableOpacity>
+          )}
+          { state.status === 'confirmed' && (
+            <TouchableOpacity style={styles.button}>
+              <Text style={styles.buttonText}>Block</Text>
+            </TouchableOpacity>
+          )}
+          { state.status === 'pending' && (
+            <TouchableOpacity style={styles.button}>
+              <Text style={styles.buttonText}>Block</Text>
+            </TouchableOpacity>
+          )}
+          { state.status === 'requested' && (
+            <TouchableOpacity style={styles.button}>
+              <Text style={styles.buttonText}>Block</Text>
+            </TouchableOpacity>
+          )}
+        </View>
       </SafeAreaView>
     </ScrollView>
   )

app/mobile/src/session/contact/Contact.styled.js

@@ -18,13 +18,15 @@ export const styles = StyleSheet.create({
     paddingRight: 32,
   },
   header: {
-    paddingBottom: 32,
-    paddingTop: 16,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
+  status: {
+    color: Colors.grey,
+    paddingBottom: 24,
+  },
   headerText: {
     fontSize: 16,
     paddingRight: 4,
@@ -73,5 +75,18 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     paddingLeft: 8
   },
+  button: {
+    width: 192,
+    padding: 6,
+    backgroundColor: Colors.primary,
+    borderRadius: 4,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 16,
+  },
+  buttonText: {
+    color: Colors.white,
+  },
 })
 

app/mobile/src/session/contact/useContact.hook.js

@@ -41,7 +41,7 @@ export function useContact(contact) {
         const { profile, detail, cardId } = selected;
         const { name, handle, node, location, description, imageSet, revision } = profile;
         const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
-        updateState({ name, handle, node, location, description, logo, status: detail.state });
+        updateState({ name, handle, node, location, description, logo, status: detail.status });
         stateSet = true;
       }
     }
@@ -52,7 +52,7 @@ export function useContact(contact) {
         const { cardId, profile, detail } = selected;
         const { name, handle, node, location, description, imageSet, revision } = profile;
         const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
-        updateState({ name, handle, node, location, description, logo, status: detail.state });
+        updateState({ name, handle, node, location, description, logo, status: detail.status });
         stateSet = true;
       }
       else {

app/mobile/src/session/profile/Profile.styled.js

@@ -13,7 +13,7 @@ export const styles = StyleSheet.create({
   },
   header: {
     paddingBottom: 32,
-    paddingTop: 16,
+    paddingTop: 24,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-end',