diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f44348e2b3..958891fe1a 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -835,7 +835,7 @@
"description": "A title of an education modal in Key Transparency section of SafetyNumberViewer when verification was unsuccessful"
},
"icu:SafetyNumberViewer__KeyTransparency__popup--fail__body": {
- "messageformat": "Signal can no longer automatically verify the encryption for this chat. This is likely because Katie Hall changed their phone number. Verify end-to-end encryption manually by comparing the numbers on the previous screen or scanning the code on their device.",
+ "messageformat": "Signal can no longer automatically verify the encryption for this chat. This is likely because {name} changed their phone number. Verify end-to-end encryption manually by comparing the numbers on the previous screen or scanning the code on their device.",
"description": "A body of an education modal in Key Transparency section of SafetyNumberViewer when verification was unsuccessful"
},
"icu:SafetyNumberViewer__KeyTransparency__popup--unavailable__body": {
diff --git a/ts/components/SafetyNumberViewer.dom.tsx b/ts/components/SafetyNumberViewer.dom.tsx
index 462d9c09e4..49c351814b 100644
--- a/ts/components/SafetyNumberViewer.dom.tsx
+++ b/ts/components/SafetyNumberViewer.dom.tsx
@@ -107,6 +107,7 @@ export function SafetyNumberViewer({
);
@@ -140,6 +141,7 @@ export function SafetyNumberViewer({
type KeyTransparencyPropsType = Readonly<{
i18n: LocalizerType;
+ contact: ConversationType;
status: KeyTransparencyStatusType;
checkKeyTransparency: () => unknown;
}>;
@@ -147,6 +149,7 @@ type KeyTransparencyPropsType = Readonly<{
function KeyTransparency({
i18n,
status,
+ contact,
checkKeyTransparency,
}: KeyTransparencyPropsType): JSX.Element {
const [popup, setPopup] = useState();
@@ -298,18 +301,26 @@ function KeyTransparency({
- {popup && }
+ {popup && (
+
+ )}
);
}
type PopupPropsType = Readonly<{
i18n: LocalizerType;
+ contact: ConversationType;
type: 'ok' | 'fail' | 'unavailable';
onClose: () => void;
}>;
-function Popup({ i18n, type, onClose }: PopupPropsType): JSX.Element {
+function Popup({ i18n, contact, type, onClose }: PopupPropsType): JSX.Element {
let icon: 'check-circle' | 'info';
let title: string;
let body: string;
@@ -325,7 +336,12 @@ function Popup({ i18n, type, onClose }: PopupPropsType): JSX.Element {
title = i18n(
'icu:SafetyNumberViewer__KeyTransparency__popup--fail__title'
);
- body = i18n('icu:SafetyNumberViewer__KeyTransparency__popup--fail__body');
+ body = i18n(
+ 'icu:SafetyNumberViewer__KeyTransparency__popup--fail__body',
+ {
+ name: contact.title,
+ }
+ );
break;
case 'unavailable':
icon = 'info';