render placeholder for unknown contacts

net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx

@@ -20,6 +20,13 @@ export function MemberItem({ readonly, item }) {
         onClick={() => actions.setMembership()} />
   }
 
+  const Unknown = () => {
+    if (state.handle) {
+      return <></>;
+    }
+    return <div class="unknown">unknown contact</div>;
+  }
+
   return (
     <MemberItemWrapper>
       <div class="avatar">
@@ -28,6 +35,7 @@ export function MemberItem({ readonly, item }) {
       <div class="label">
         <div class="name">{state.name}</div>
         <div class="handle">{state.handle}</div>
+        <Unknown />
       </div>
       <SetMembership />
     </MemberItemWrapper>

net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js

@@ -33,6 +33,11 @@ export const MemberItemWrapper = styled.div`
       font-weight: bold;
     }
 
+    .unknown {
+      font-style: italic;
+      color: #AAAAAA;
+    }
+
     .name {
     }
   }

net/web/src/User/Conversation/TopicItem/TopicItem.jsx

@@ -16,6 +16,11 @@ export function TopicItem({ topic }) {
   let nameClass = state.name ? 'set' : 'unset';
   let d = new Date();
   let offset = d.getTime() / 1000 - state.created;
+  
+  if (name == null) {
+    name = "unknown contact"
+    nameClass = "unknown"
+  }
 
   const renderAsset = (asset) => {
     if (asset.image) {

net/web/src/User/Conversation/TopicItem/TopicItem.styled.js

@@ -38,6 +38,11 @@ export const TopicItemWrapper = styled.div`
         color: #888888;
         padding-right: 8px;
       }
+      .unknown {
+        font-style: italic;
+        color: #aaaaaa;
+        padding-right: 8px;
+      }
     }
 
     .message {