Show user badges on message details screen

ts/components/conversation/MessageDetail.tsx

@@ -16,6 +16,7 @@ import type {
 import { Message } from './Message';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import { groupBy } from '../../util/mapUtil';
 import type { ContactNameColorType } from '../../types/Colors';
 import { SendStatus } from '../../messages/MessageSendState';
@@ -27,6 +28,7 @@ export type Contact = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
   | 'avatarPath'
+  | 'badges'
   | 'color'
   | 'id'
   | 'isMe'
@@ -61,6 +63,7 @@ export type PropsData = {
   showSafetyNumber: (contactId: string) => void;
   i18n: LocalizerType;
   theme: ThemeType;
+  getPreferredBadge: PreferredBadgeSelectorType;
 } & Pick<MessagePropsType, 'interactionMode'>;
 
 export type PropsBackboneActions = Pick<
@@ -117,10 +120,11 @@ export class MessageDetail extends React.Component<Props> {
   }
 
   public renderAvatar(contact: Contact): JSX.Element {
-    const { i18n } = this.props;
+    const { getPreferredBadge, i18n, theme } = this.props;
     const {
       acceptedMessageRequest,
       avatarPath,
+      badges,
       color,
       isMe,
       name,
@@ -135,6 +139,7 @@ export class MessageDetail extends React.Component<Props> {
       <Avatar
         acceptedMessageRequest={acceptedMessageRequest}
         avatarPath={avatarPath}
+        badge={getPreferredBadge(badges)}
         color={color}
         conversationType="direct"
         i18n={i18n}
@@ -142,6 +147,7 @@ export class MessageDetail extends React.Component<Props> {
         name={name}
         phoneNumber={phoneNumber}
         profileName={profileName}
+        theme={theme}
         title={title}
         sharedGroupNames={sharedGroupNames}
         size={AvatarSize.THIRTY_SIX}