Merge branch 'release/2.2.0' into 3954-add-hw-multisig-support

i18n/locales/en/common.json

@@ -278,7 +278,6 @@
   "Members": "Members",
   "Message": "Message",
   "Message (optional)": "Message (optional)",
-  "Message signature aborted on device": "Message signature aborted on device",
   "Min": "Min",
   "Minimize": "Minimize",
   "Missed slot": "Missed slot",
@@ -346,7 +345,7 @@
   "Please carefully write down these 12 words and store them in a safe place.": "Please carefully write down these 12 words and store them in a safe place.",
   "Please check the address": "Please check the address",
   "Please check the highlighted word and make sure it’s correct.": "Please check the highlighted word and make sure it’s correct.",
-  "Please confirm the message on your {{model}}": "Please confirm the message on your {{model}}",
+  "Please confirm the message on your {{deviceModel}}": "Please confirm the message on your {{deviceModel}}",
   "Please confirm the transaction on your {{deviceModel}}": "Please confirm the transaction on your {{deviceModel}}",
   "Please enter a valid public key for each member.": "Please enter a valid public key for each member.",
   "Please enter vote amounts for the delegates you wish to vote for": "Please enter vote amounts for the delegates you wish to vote for",

src/components/screens/signMessage/signMessageInput.js → src/components/screens/signMessage/form/index.js

@@ -8,11 +8,10 @@ import Box from '@toolbox/box';
 import Tooltip from '@toolbox/tooltip/tooltip';
 import BoxContent from '@toolbox/box/content';
 import BoxFooter from '@toolbox/box/footer';
-import BoxHeader from '@toolbox/box/header';
 import BoxInfoText from '@toolbox/box/infoText';
-import styles from './signMessage.css';
+import styles from '../signMessage.css';
 
-const SignMessageInput = ({ nextStep, t, history }) => {
+const Form = ({ nextStep, t, history }) => {
   const [message, setMessage] = useState('');
   useEffect(() => {
     const params = parseSearchParams(history.location.search);
@@ -32,9 +31,6 @@ const SignMessageInput = ({ nextStep, t, history }) => {
 
   return (
     <Box>
-      <BoxHeader>
-        <h1>{t('Sign message')}</h1>
-      </BoxHeader>
       <BoxContent className={styles.noPadding}>
         <BoxInfoText>
           <span>{t('Sign a message to prove its integrity')}</span>
@@ -61,4 +57,4 @@ const SignMessageInput = ({ nextStep, t, history }) => {
   );
 };
 
-export default SignMessageInput;
+export default Form;

src/components/screens/signMessage/signMessageInput.test.js → src/components/screens/signMessage/form/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import SignMessageInput from './signMessageInput';
+import SignMessageInput from '.';
 
 describe('Sign Message Input Component', () => {
   const props = {

src/components/screens/signMessage/messageSignature/index.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { cryptography } from '@liskhq/lisk-client'; // eslint-disable-line
+
+import { loginTypes } from '@constants';
+import { signMessageByHW, getDeviceType } from '@utils/hwManager';
+import Illustration from '@toolbox/illustration';
+import BoxContent from '@toolbox/box/content';
+import styles from '../signMessage.css';
+
+const MessageSignature = ({
+  nextStep,
+  message,
+  account,
+  t,
+}) => {
+  const [signature, setSignature] = useState();
+  const [error, setError] = useState();
+  const deviceType = getDeviceType(account.hwInfo?.deviceModel);
+
+  const signUsingPrivateKey = () => {
+    const msgBytes = cryptography.digestMessage(message);
+    const signedMessage = cryptography.signDataWithPrivateKey(msgBytes, Buffer.from(account.summary.privateKey, 'hex'));
+    const result = cryptography.printSignedMessage({
+      message,
+      publicKey: account.summary.publicKey,
+      signature: signedMessage,
+    });
+    return result;
+  };
+
+  const signUsingHW = async () => {
+    let signedMessage = await signMessageByHW({
+      account,
+      message,
+    });
+    if (signedMessage instanceof Uint8Array) {
+      signedMessage = Buffer.from(signedMessage);
+    }
+    const result = cryptography.printSignedMessage({
+      message,
+      publicKey: account.summary.publicKey,
+      signature: signedMessage,
+    });
+    return result;
+  };
+
+  useEffect(() => {
+    if (!signature && !error) {
+      if (account.loginType === loginTypes.passphrase.code) {
+        setSignature(signUsingPrivateKey());
+      } else {
+        signUsingHW()
+          .then(setSignature)
+          .catch(setError);
+      }
+    } else {
+      nextStep({ signature, error });
+    }
+  }, [signature, error]);
+
+  if (!deviceType) {
+    return (<div />);
+  }
+
+  return (
+    <BoxContent className={styles.pendingWrapper}>
+      <Illustration name={deviceType} />
+      <h5>
+        {t('Please confirm the message on your {{deviceModel}}', { deviceModel: account.hwInfo.deviceModel })}
+      </h5>
+    </BoxContent>
+  );
+};
+
+export default MessageSignature;