Sealed Sender support

https://signal.org/blog/sealed-sender/

ts/components/conversation/MessageDetail.md

@@ -126,3 +126,41 @@
   i18n={util.i18n}
 />
 ```
+
+### Unidentified Delivery
+
+```jsx
+<MessageDetail
+  message={{
+    disableMenu: true,
+    direction: 'outgoing',
+    timestamp: Date.now(),
+    conversationColor: 'pink',
+    text:
+      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
+    status: 'read',
+    onDelete: () => console.log('onDelete'),
+  }}
+  contacts={[
+    {
+      phoneNumber: '(202) 555-1001',
+      avatarPath: util.gifObjectUrl,
+      status: 'read',
+      isUnidentifiedDelivery: true,
+    },
+    {
+      phoneNumber: '(202) 555-1002',
+      avatarPath: util.pngObjectUrl,
+      status: 'delivered',
+      isUnidentifiedDelivery: true,
+    },
+    {
+      phoneNumber: '(202) 555-1003',
+      color: 'teal',
+      status: 'read',
+    },
+  ]}
+  sentAt={Date.now()}
+  i18n={util.i18n}
+/>
+```

ts/components/conversation/MessageDetail.tsx

@@ -15,8 +15,10 @@ interface Contact {
   avatarPath?: string;
   color: string;
   isOutgoingKeyError: boolean;
+  isUnidentifiedDelivery: boolean;
 
   errors?: Array<Error>;
+
   onSendAnyway: () => void;
   onShowSafetyNumber: () => void;
 }
@@ -94,6 +96,9 @@ export class MessageDetail extends React.Component<Props> {
         )}
       />
     ) : null;
+    const unidentifiedDeliveryComponent = contact.isUnidentifiedDelivery ? (
+      <div className="module-message-detail__contact__unidentified-delivery-icon" />
+    ) : null;
 
     return (
       <div key={contact.phoneNumber} className="module-message-detail__contact">
@@ -114,6 +119,7 @@ export class MessageDetail extends React.Component<Props> {
           ))}
         </div>
         {errorComponent}
+        {unidentifiedDeliveryComponent}
         {statusComponent}
       </div>
     );