Display primaryType in signTyped instead of 'Message' string (#17077)

* fix: Display primaryType in signTyped instead of 'Message' string

* fix: added #17077 to changelog

* fix: remove unused signatureRequest1 message to fix test-lint failure

* Update CHANGELOG.md

Co-authored-by: Dan J Miller <danjm.com@gmail.com>

* test: add assertion for the primaryType to signature-request component test

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: Dan J Miller <danjm.com@gmail.com>

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Added displaying the primaryType during Typed data signing ([#17077](https://github.com/MetaMask/metamask-extension/pull/17077))
 
 ## [10.23.3]
 ### Removed

app/_locales/de/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Unterschriftsanfrage"
   },
-  "signatureRequest1": {
-    "message": "Nachricht"
-  },
   "signatureRequestGuidance": {
     "message": "Unterschreiben Sie diese Nachricht nur, wenn Sie den Inhalt vollständig verstehen und der anfragenden Seite vertrauen."
   },

app/_locales/el/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Αίτημα Υπογραφής"
   },
-  "signatureRequest1": {
-    "message": "Μήνυμα"
-  },
   "signatureRequestGuidance": {
     "message": "Υπογράψτε αυτό το μήνυμα μόνο εάν κατανοείτε πλήρως το περιεχόμενο και εμπιστεύεστε τον ιστότοπο που το ζητάει."
   },

app/_locales/en/messages.json

@@ -3358,9 +3358,6 @@
   "signatureRequest": {
     "message": "Signature request"
   },
-  "signatureRequest1": {
-    "message": "Message"
-  },
   "signatureRequestGuidance": {
     "message": "Only sign this message if you fully understand the content and trust the requesting site."
   },

app/_locales/es/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Solicitud de firma"
   },
-  "signatureRequest1": {
-    "message": "Mensaje"
-  },
   "signatureRequestGuidance": {
     "message": "Solo firme este mensaje si comprende completamente el contenido y confía en el sitio solicitante."
   },

app/_locales/es_419/messages.json

@@ -2328,9 +2328,6 @@
   "signatureRequest": {
     "message": "Solicitud de firma"
   },
-  "signatureRequest1": {
-    "message": "Mensaje"
-  },
   "signed": {
     "message": "Firmado"
   },

app/_locales/fr/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Demande de Signature"
   },
-  "signatureRequest1": {
-    "message": "Message"
-  },
   "signatureRequestGuidance": {
     "message": "Ne signez ce message que si vous comprenez parfaitement son contenu et si le site demandeur vous inspire confiance."
   },

app/_locales/hi/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "हस्ताक्षर का अनुरोध"
   },
-  "signatureRequest1": {
-    "message": "संदेश"
-  },
   "signatureRequestGuidance": {
     "message": "यदि आप सामग्री को पूरी तरह से समझते हैं और अनुरोध करने वाली साइट पर भरोसा करते हैं तो ही इस संदेश पर हस्ताक्षर करें।"
   },

app/_locales/id/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Permintaan tanda tangan"
   },
-  "signatureRequest1": {
-    "message": "Pesan"
-  },
   "signatureRequestGuidance": {
     "message": "Tandatangani pesan ini hanya jika Anda benar-benar memahami isinya dan memercayai situs yang memintanya."
   },

app/_locales/ja/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "署名の要求"
   },
-  "signatureRequest1": {
-    "message": "メッセージ"
-  },
   "signatureRequestGuidance": {
     "message": "このメッセージの内容を完全に理解し、リクエストしているサイトを信頼する場合にのみ署名してください。"
   },

app/_locales/ko/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "서명 요청"
   },
-  "signatureRequest1": {
-    "message": "메시지"
-  },
   "signatureRequestGuidance": {
     "message": "요청하는 사이트를 신뢰하고 그 내용을 완전히 이해하는 경우에만 이 메시지에 서명하세요."
   },

app/_locales/ph/messages.json

@@ -1544,9 +1544,6 @@
   "signatureRequest": {
     "message": "Request ng Signature"
   },
-  "signatureRequest1": {
-    "message": "Mensahe"
-  },
   "signed": {
     "message": "Nilagdaan"
   },

app/_locales/pt/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Pedido de assinatura"
   },
-  "signatureRequest1": {
-    "message": "Mensagem"
-  },
   "signatureRequestGuidance": {
     "message": "Assine essa mensagem apenas se entende integralmente o conteúdo e confia no site solicitante."
   },

app/_locales/pt_BR/messages.json

@@ -2328,9 +2328,6 @@
   "signatureRequest": {
     "message": "Solicitação de assinatura"
   },
-  "signatureRequest1": {
-    "message": "Mensagem"
-  },
   "signed": {
     "message": "Assinado"
   },

app/_locales/ru/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Запрос подписи"
   },
-  "signatureRequest1": {
-    "message": "Сообщение"
-  },
   "signatureRequestGuidance": {
     "message": "Подписывайте это сообщение только в том случае, если вы полностью понимаете его содержание и доверяете запрашивающему сайту."
   },

app/_locales/tl/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Request na Paglagda"
   },
-  "signatureRequest1": {
-    "message": "Mensahe"
-  },
   "signatureRequestGuidance": {
     "message": "Pirmahan lamang ang mensaheng ito kung ganap mong nauunawaan ang nilalaman at nagtitiwala sa site na humihiling."
   },

app/_locales/tr/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "İmza talebi"
   },
-  "signatureRequest1": {
-    "message": "Mesaj"
-  },
   "signatureRequestGuidance": {
     "message": "Bumesajı sadece içeriği tam olarak anlıyorsanız ve talepte bulunan siteye güveniyorsanız imzalayın."
   },

app/_locales/vi/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "Yêu cầu chữ ký"
   },
-  "signatureRequest1": {
-    "message": "Thông báo"
-  },
   "signatureRequestGuidance": {
     "message": "Chỉ ký vào thông báo này nếu bạn hoàn toàn hiểu nội dung và tin tưởng trang web yêu cầu."
   },

app/_locales/zh_CN/messages.json

@@ -3349,9 +3349,6 @@
   "signatureRequest": {
     "message": "签名请求"
   },
-  "signatureRequest1": {
-    "message": "消息"
-  },
   "signatureRequestGuidance": {
     "message": "只有在您完全理解内容并信任请求网站的情况下，才能签署此消息。"
   },

app/_locales/zh_TW/messages.json

@@ -1436,9 +1436,6 @@
   "signatureRequest": {
     "message": "請求簽署"
   },
-  "signatureRequest1": {
-    "message": "訊息"
-  },
   "signed": {
     "message": "已簽署"
   },

ui/components/app/signature-request/signature-request-message/signature-request-message.js

@@ -21,6 +21,7 @@ export default function SignatureRequestMessage({
   setMessageRootRef,
   messageRootRef,
   messageIsScrollable,
+  primaryType,
 }) {
   const t = useContext(I18nContext);
   const [messageIsScrolled, setMessageIsScrolled] = useState(false);
@@ -81,7 +82,7 @@ export default function SignatureRequestMessage({
           marginLeft={4}
           className="signature-request-message__title"
         >
-          {t('signatureRequest1')}
+          {primaryType}
         </Typography>
         <SignatureRequestData data={data} />
       </Box>
@@ -95,4 +96,5 @@ SignatureRequestMessage.propTypes = {
   setMessageRootRef: PropTypes.func,
   messageRootRef: PropTypes.object,
   messageIsScrollable: PropTypes.bool,
+  primaryType: PropTypes.string,
 };

ui/components/app/signature-request/signature-request.component.js

@@ -111,7 +111,7 @@ export default class SignatureRequest extends PureComponent {
   memoizedParseMessage = memoize((data) => {
     const { message, domain = {}, primaryType, types } = JSON.parse(data);
     const sanitizedMessage = sanitizeMessage(message, primaryType, types);
-    return { sanitizedMessage, domain };
+    return { sanitizedMessage, domain, primaryType };
   });
 
   render() {
@@ -134,7 +134,8 @@ export default class SignatureRequest extends PureComponent {
       nativeCurrency,
     } = this.props;
     const { trackEvent } = this.context;
-    const { sanitizedMessage, domain } = this.memoizedParseMessage(data);
+    const { sanitizedMessage, domain, primaryType } =
+      this.memoizedParseMessage(data);
 
     const currentNetwork = this.getNetworkName();
 
@@ -248,6 +249,7 @@ export default class SignatureRequest extends PureComponent {
           setMessageRootRef={this.setMessageRootRef.bind(this)}
           messageRootRef={this.messageRootRef}
           messageIsScrollable={messageIsScrollable}
+          primaryType={primaryType}
         />
         <Footer
           cancelAction={onCancel}

ui/components/app/signature-request/signature-request.component.test.js

@@ -83,7 +83,8 @@ describe('Signature Request Component', () => {
       expect(wrapper.hasClass('signature-request')).toStrictEqual(true);
       const messageWrapper = wrapper.find(Message);
       expect(messageWrapper).toHaveLength(1);
-      const { data } = messageWrapper.props();
+      const { data, primaryType } = messageWrapper.props();
+      expect(primaryType).toStrictEqual('Mail');
       expect(data.contents).toStrictEqual('Hello, Bob!');
       expect(data.from.name).toStrictEqual('Cow');
       expect(data.from.wallets).toBeDefined();