Add badges to safety number change dialog

ts/components/SafetyNumberChangeDialog.tsx

@@ -10,7 +10,8 @@ import { InContactsIcon } from './InContactsIcon';
 import { Modal } from './Modal';
 
 import type { ConversationType } from '../state/ducks/conversations';
-import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { LocalizerType, ThemeType } from '../types/Util';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 
 export type SafetyNumberProps = {
@@ -21,19 +22,23 @@ export type SafetyNumberProps = {
 export type Props = {
   readonly confirmText?: string;
   readonly contacts: Array<ConversationType>;
+  readonly getPreferredBadge: PreferredBadgeSelectorType;
   readonly i18n: LocalizerType;
   readonly onCancel: () => void;
   readonly onConfirm: () => void;
   readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
+  readonly theme: ThemeType;
 };
 
 export const SafetyNumberChangeDialog = ({
   confirmText,
   contacts,
+  getPreferredBadge,
   i18n,
   onCancel,
   onConfirm,
   renderSafetyNumber,
+  theme,
 }: Props): JSX.Element => {
   const [selectedContact, setSelectedContact] = React.useState<
     ConversationType | undefined
@@ -89,6 +94,7 @@ export const SafetyNumberChangeDialog = ({
               <Avatar
                 acceptedMessageRequest={contact.acceptedMessageRequest}
                 avatarPath={contact.avatarPath}
+                badge={getPreferredBadge(contact.badges)}
                 color={contact.color}
                 conversationType="direct"
                 i18n={i18n}
@@ -96,6 +102,7 @@ export const SafetyNumberChangeDialog = ({
                 name={contact.name}
                 phoneNumber={contact.phoneNumber}
                 profileName={contact.profileName}
+                theme={theme}
                 title={contact.title}
                 sharedGroupNames={contact.sharedGroupNames}
                 size={52}