unsealing channel detail in mobile app

app/mobile/ios/Podfile.lock

@@ -669,7 +669,7 @@ SPEC CHECKSUMS:
   FirebaseInstallations: 99d24bac0243cf8b0e96cf5426340d211f0bcc80
   FirebaseMessaging: 4487bbff9b9b927ba1dd3ea40d1ceb58e4ee3cb5
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
   GoogleDataTransport: 1c8145da7117bd68bbbed00cf304edb6a24de00f
   GoogleUtilities: 1d20a6ad97ef46f67bbdec158ce00563a671ebb7
   nanopb: b552cce312b6c8484180ef47159bc0f65a1f0431

app/mobile/src/context/useChannelContext.hook.js

@@ -57,7 +57,7 @@ export function useChannelContext() {
     let channel = channels.current.get(channelId);
     if (channel) {
       channel.detail = detail;
-      channel.unsealed_detail = null;
+      channel.unsealedDetail = null;
       channel.detailRevision = revision;
       channels.current.set(channelId, channel);
     }
@@ -66,7 +66,7 @@ export function useChannelContext() {
     let channel = channels.current.get(channelId);
     if (channel) {
       channel.summary = summary;
-      channel.unsealed_summary = null;
+      channel.unsealedSummary = null;
       channel.topicRevision = revision;
       channels.current.set(channelId, channel);
     }

app/mobile/src/context/useConversationContext.hook.js

@@ -21,6 +21,9 @@ export function useConversationContext() {
     cardId: null,
     channelId: null,
     pushEnabled: null,
+    locked: false,
+    unlocked: false,
+    seals: null,
   });
   const store = useContext(StoreContext);
   const upload = useContext(UploadContext);
@@ -275,6 +278,9 @@ export function useConversationContext() {
     let logo = null;
     let topic = null;
     let subject = null;
+    let locked = false;
+    let unlocked = false;
+    let seals = null;
 
     let timestamp;
     const date = new Date(item.detail.created * 1000);
@@ -323,15 +329,30 @@ export function useConversationContext() {
       logo = 'appstore';
     }
 
-    if (item?.detail?.data) {
+    if (item?.detail?.dataType === 'sealed') {
+      locked = true;
+      unlocked = item.unsealedDetail != null;
+      if (item.unsealedDetail?.subject) {
+        subject = item.unsealedDetail.subject;
+      }
       try {
-        topic = JSON.parse(item?.detail?.data).subject;
-        subject = topic;
+        seals = JSON.parse(item.detail.data).seals;
       }
       catch (err) {
         console.log(err);
       }
     }
+    else {
+      if (item?.detail?.data) {
+        try {
+          topic = JSON.parse(item?.detail?.data).subject;
+          subject = topic;
+        }
+        catch (err) {
+          console.log(err);
+        }
+      }
+    }
     if (!subject) {
       if (contacts.length) {
         let names = [];
@@ -354,7 +375,7 @@ export function useConversationContext() {
 
     const { enableImage, enableAudio, enableVideo } = item.detail;
     updateState({ topic, subject, logo, contacts, host: item.cardId, created: timestamp,
-      enableImage, enableAudio, enableVideo, pushEnabled });
+      enableImage, enableAudio, enableVideo, pushEnabled, locked, unlocked, seals });
   }
 
   useEffect(() => {

app/mobile/src/session/details/Details.jsx

@@ -2,7 +2,8 @@ import { KeyboardAvoidingView, FlatList, Alert, Modal, View, Text, Switch, Touch
 import { styles } from './Details.styled';
 import { useDetails } from './useDetails.hook';
 import { Logo } from 'utils/Logo';
-import Ionicons from '@expo/vector-icons/AntDesign';
+import AntIcons from '@expo/vector-icons/AntDesign';
+import MatIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { MemberItem } from './memberItem/MemberItem';
 
@@ -127,12 +128,20 @@ export function DetailsBody({ channel, clearConversation }) {
       <View style={styles.details}>
         <Logo src={state.logo} width={72} height={72} radius={8} />
         <View style={styles.info}>
-          <TouchableOpacity style={styles.subject} onPress={actions.showEditSubject}>
+          <View style={styles.subject}>
+            { state.locked && !state.unlocked && (
+              <AntIcons name="lock" style={styles.subjectIcon} size={16} color={Colors.text} />
+            )}
+            { state.locked && state.unlocked && (
+              <MatIcons name="lock-open-variant-outline" style={styles.subjectIcon} size={16} color={Colors.text} />
+            )}
             <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
             { !state.hostId && (
-              <Ionicons name="edit" size={16} color={Colors.text} />
+              <TouchableOpacity onPress={actions.showEditSubject}>
+                <AntIcons name="edit" size={16} color={Colors.text} />
+              </TouchableOpacity>
             )}
-          </TouchableOpacity>
+          </View>
           <Text style={styles.created}>{ state.created }</Text>
           <Text style={styles.mode}>{ state.hostId ? 'guest' : 'host' }</Text>
         </View>  

app/mobile/src/session/details/Details.styled.js

@@ -32,6 +32,9 @@ export const styles = StyleSheet.create({
     minWidth: 0,
     flexShrink: 1,
   },
+  subjectIcon: {
+    paddingRight: 4
+  },
   subjectText: {
     fontSize: 18,
     flexShrink: 1,

app/mobile/src/session/details/useDetails.hook.js

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ConversationContext } from 'context/ConversationContext';
 import { CardContext } from 'context/CardContext';
+import { AccountContext } from 'context/AccountContext';
 
 export function useDetails() {
 
@@ -16,8 +17,13 @@ export function useDetails() {
     editMembers: false,
     subjectUpdate: null,
     pushEnabled: null,
+    locked: false,
+    unlocked: false,
+    sealable: false,
+    
   });
 
+  const account = useContext(AccountContext);
   const card = useContext(CardContext);
   const conversation = useContext(ConversationContext);
   const navigate = useNavigate();
@@ -26,14 +32,26 @@ export function useDetails() {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    let sealable = false;
+    if (account.state.sealKey && conversation.state.seals) {
+      conversation.state.seals.forEach(seal => {
+        if (seal.publicKey === account.state.sealKey.public) {
+          sealabel = true;
+        }
+      });
+    }
+    updateState({ sealable });
+  }, [account, conversation]);
+
   useEffect(() => {
     const contacts = Array.from(card.state.cards.values());
     updateState({ connected: contacts.filter(contact => contact.detail.status === 'connected') });
   }, [card]);
 
   useEffect(() => {
-    const { topic, subject, created, logo, host, contacts, pushEnabled } = conversation.state;
-    updateState({ subject, created, logo, pushEnabled, hostId: host, subjectUpdate: topic,
+    const { topic, subject, created, logo, host, contacts, pushEnabled, locked, unlocked, seals } = conversation.state;
+    updateState({ subject, created, logo, pushEnabled, hostId: host, subjectUpdate: topic, locked, unlocked, seals,
       count: contacts.length, contacts: contacts.filter(card => card != null) });
   }, [conversation]);