fix: display public key in Sign Message result component (#1579)

The result of a CIP-8 operation requires the public key to verify the signature
that's currently shown. This change displays the key in the result component, as
a starting point to at least display the value, prior to a potential rework now
there's two values to copy.

Author: rhyslbw

apps/browser-extension-wallet/src/views/browser-view/features/sign-message/SignMessageDrawer.tsx

@@ -125,17 +125,29 @@ export const SignMessageDrawer: React.FC = () => {
 
   const renderSignature = () => (
     <div className={styles.inputGroup}>
-      <ResultMessage
-        customBgImg={CheckSuccessImg}
-        title={t('core.signMessage.successTitle')}
-        description={t('core.signMessage.successDescription')}
-      />
-      <TextArea
-        value={signatureObject.signature}
-        dataTestId="sign-message-signature"
-        rows={4}
-        className={styles.customTextArea}
-      />
+      <ResultMessage customBgImg={CheckSuccessImg} title={t('core.signMessage.successTitle')} />
+      <div className={styles.inputGroup}>
+        <Text.Body.Normal weight="$medium" data-testid={'result-message-signature-label'}>
+          {t('core.signMessage.signature')}
+        </Text.Body.Normal>
+        <TextArea
+          value={signatureObject.signature}
+          dataTestId="sign-message-signature"
+          rows={4}
+          className={styles.customTextArea}
+        />
+      </div>
+      <div className={styles.inputGroup}>
+        <Text.Body.Normal weight="$medium" data-testid={'result-message-key-label'}>
+          {t('core.signMessage.key')}
+        </Text.Body.Normal>
+        <TextArea
+          value={signatureObject.key}
+          dataTestId="sign-message-key"
+          rows={4}
+          className={styles.customTextArea}
+        />
+      </div>
     </div>
   );
 

packages/e2e-tests/src/assert/settings/MessageSigningAllDoneDrawerAssert.ts

@@ -21,6 +21,15 @@ class MessageSigningAllDoneDrawerAssert {
     await MessageSigningAllDoneDrawer.signature.waitForDisplayed();
     expect(await MessageSigningAllDoneDrawer.signature.getText()).to.not.be.empty;
 
+    await MessageSigningAllDoneDrawer.signatureLabel.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.signatureLabel.getText()).to.not.be.empty;
+
+    await MessageSigningAllDoneDrawer.key.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.key.getText()).to.not.be.empty;
+
+    await MessageSigningAllDoneDrawer.keyLabel.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.keyLabel.getText()).to.not.be.empty;
+
     await MessageSigningAllDoneDrawer.copyButton.waitForClickable();
     expect(await MessageSigningAllDoneDrawer.copyButton.getText()).to.equal(
       await t('core.signMessage.copyToClipboard')

packages/e2e-tests/src/elements/settings/MessageSigningAllDoneDrawer.ts

@@ -7,6 +7,9 @@ class MessageSigningAllDoneDrawer extends CommonDrawerElements {
   private TITLE = '[data-testid="result-message-title"]';
   private DESCRIPTION = '[data-testid="result-message-description"]';
   private SIGNATURE = '[data-testid="sign-message-signature"]';
+  private SIGNATURE_LABEL = '[data-testid="result-message-signature-label"]';
+  private KEY = '[data-testid="sign-message-key"]';
+  private KEY_LABEL = '[data-testid="result-message-key-label"]';
   private COPY_BUTTON = '[data-testid="copy-button"]';
   private CLOSE_BUTTON = '[data-testid="close-button"]';
 
@@ -26,6 +29,18 @@ class MessageSigningAllDoneDrawer extends CommonDrawerElements {
     return $(this.SIGNATURE);
   }
 
+  get signatureLabel(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.SIGNATURE_LABEL);
+  }
+
+  get key(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.KEY);
+  }
+
+  get keyLabel(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.KEY_LABEL);
+  }
+
   get copyButton(): ChainablePromiseElement<WebdriverIO.Element> {
     return $(this.COPY_BUTTON);
   }

packages/translation/src/lib/translations/core/en.json

@@ -222,7 +222,8 @@
   "core.signMessage.pleaseConfirmOnDevice": "Please confirm the signing operation on your hardware wallet device.",
   "core.signMessage.copyToClipboard": "Copy signature to clipboard",
   "core.signMessage.successTitle": "All done!",
-  "core.signMessage.successDescription": "This is the signature of your signed message",
+  "core.signMessage.signature": "Signature",
+  "core.signMessage.key": "Public Key",
   "core.signMessage.nextButton": "Next",
   "core.signMessage.closeButton": "Close",
   "core.signMessage.signButton": "Sign message",