rendering lock icon based on key state

net/web/src/context/useCardContext.hook.js

@@ -311,6 +311,22 @@ export function useCardContext() {
         console.log(err);
       }
     },
+    isUnsealed: (cardId, channelId, sealKey) => {
+      try {
+        const card = cards.current.get(cardId);
+        const channel = card.channels.get(channelId);
+        const { seals } = JSON.parse(channel.data.channelDetail.data);
+        for (let i = 0; i < seals.length; i++) {
+          if (seals[i].publicKey === sealKey.public) {
+            return sealKey.private != null;
+          }
+        }
+      }
+      catch(err) {
+        console.log(err);
+      }
+      return false;
+    },
     unsealChannelSummary: (cardId, channelId, sealKey) => {
       try {
         const card = cards.current.get(cardId);

net/web/src/context/useChannelContext.hook.js

@@ -164,6 +164,21 @@ export function useChannelContext() {
         console.log(err);
       }
     },
+    isUnsealed: (channelId, sealKey) => {
+      try {
+        const channel = channels.current.get(channelId);
+        const { seals } = JSON.parse(channel.data.channelDetail.data);
+        for (let i = 0; i < seals.length; i++) {
+          if (seals[i].publicKey === sealKey.public) {
+            return sealKey.private != null;
+          }
+        }
+      }
+      catch(err) {
+        console.log(err);
+      }
+      return false;
+    },
     unsealChannelSummary: (channelId, sealKey) => {
       try {
         const channel = channels.current.get(channelId);

net/web/src/session/channels/channelItem/ChannelItem.jsx

@@ -21,7 +21,15 @@ export function ChannelItem({ item, openChannel, active }) {
               <SolutionOutlined />
             </div>
             <div class="details">
-              <div class="subject">{ item.subject }</div>
+              <div class="subject">
+                { item.locked && !item.unlocked && (
+                  <LockFilled style={{ paddingRight: 8 }}/>
+                )}
+                { item.locked && item.unlocked && (
+                  <UnlockOutlined style={{ paddingRight: 8 }}/>
+                )}
+                <span>{ item.subject }</span>
+              </div>
               <div class="message">{ item.message }</div>
             </div>
           </div>

net/web/src/session/channels/useChannels.hook.js

@@ -166,7 +166,12 @@ export function useChannels() {
             }
           }
           else {
-            chan.unlocked = true;
+            if (chan.cardId) {
+              chan.unlocked = card.actions.isUnsealed(chan.cardId, chan.id, account.state.sealKey);
+            }
+            else {
+              chan.unlocked = channel.actions.isUnsealed(chan.id, account.state.sealKey);
+            }
             subject = chan.data.unsealedChannel.subject;
           }
         }
@@ -200,7 +205,7 @@ export function useChannels() {
   }
 
   const setMessage = (chan) => {
-    let message;
+    let message = '';
     if (chan.data.channelSummary?.lastTopic?.dataType === 'superbasictopic') {
       try {
         message = JSON.parse(chan.data.channelSummary.lastTopic.data).text;
@@ -211,6 +216,8 @@ export function useChannels() {
     }
     if (chan.data.channelSummary?.lastTopic?.dataType === 'sealedtopic') {
       try {
+        if (chan.unlocked) {
+          message = "...";
           if (chan.data.unsealedSummary == null) {
             if (chan.cardId) {
               card.actions.unsealChannelSummary(chan.cardId, chan.id, account.state.sealKey);
@@ -221,7 +228,8 @@ export function useChannels() {
           }
           else {
             if (typeof chan.data.unsealedSummary.message.text === 'string') {
-            chan.message = chan.data.unsealedSummary.message.text;
+              message = chan.data.unsealedSummary.message.text;
+            }
           }
         }
       }
@@ -269,7 +277,7 @@ export function useChannels() {
     updateState({ channels: filtered });
 
     // eslint-disable-next-line
-  }, [channel, card, store, filter, state.sealable]);
+  }, [account, channel, card, store, filter, state.sealable]);
 
   useEffect(() => {
     updateState({ display: viewport.state.display });