Show user badges on message details screen

ts/components/conversation/MessageDetail.stories.tsx

@@ -62,6 +62,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   receivedAt: number('receivedAt', overrideProps.receivedAt || Date.now()),
   sentAt: number('sentAt', overrideProps.sentAt || Date.now()),
 
+  getPreferredBadge: () => getFakeBadge(),
   i18n,
   interactionMode: 'keyboard',
   theme: ThemeType.light,

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}

ts/state/smart/MessageDetail.tsx

@@ -8,6 +8,7 @@ import { MessageDetail } from '../../components/conversation/MessageDetail';
 
 import { mapDispatchToProps } from '../actions';
 import type { StateType } from '../reducer';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getIntl, getInteractionMode, getTheme } from '../selectors/user';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
@@ -17,6 +18,7 @@ import { getContactNameColorSelector } from '../selectors/conversations';
 export { Contact } from '../../components/conversation/MessageDetail';
 export type OwnProps = Omit<
   MessageDetailProps,
+  | 'getPreferredBadge'
   | 'i18n'
   | 'interactionMode'
   | 'renderAudioAttachment'
@@ -63,6 +65,8 @@ const mapStateToProps = (
         )
       : undefined;
 
+  const getPreferredBadge = getPreferredBadgeSelector(state);
+
   return {
     contacts,
     contactNameColor,
@@ -71,6 +75,7 @@ const mapStateToProps = (
     receivedAt,
     sentAt,
 
+    getPreferredBadge,
     i18n: getIntl(state),
     interactionMode: getInteractionMode(state),
     theme: getTheme(state),