Textarea added trezor action prop, use textarea higligh while confirm

src/actions/SignVerifyActions.js

@@ -17,6 +17,8 @@ export const sign = (
         state: selected.state,
     };
 
+    dispatch({ type: SIGN_VERIFY.SIGN_PROGRESS, isSignProgress: true });
+
     const response = await TrezorConnect.ethereumSignMessage({
         device,
         path,
@@ -25,6 +27,8 @@ export const sign = (
         useEmptyPassphrase: selected.useEmptyPassphrase,
     });
 
+    dispatch({ type: SIGN_VERIFY.SIGN_PROGRESS, isSignProgress: false });
+
     if (response && response.success) {
         dispatch({
             type: SIGN_VERIFY.SIGN_SUCCESS,

src/actions/constants/signVerify.js

@@ -1,5 +1,6 @@
 /* @flow */
 
 export const SIGN_SUCCESS: 'sign__verify__sign__success' = 'sign__verify__sign__success';
+export const SIGN_PROGRESS: 'sign__verify__sign_progress' = 'sign__verify__sign_progress';
 export const VERIFY_SUCCESS: 'sign__verify__verify__success' = 'sign__verify__verify__success';
 export const CLEAR: 'sign__verify__sign__clear' = 'sign__verify__sign__clear';

src/components/Textarea/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Textarea from 'react-textarea-autosize';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
 
@@ -82,6 +82,14 @@ const StyledTextarea = styled(Textarea)`
             opacity: 1;
         }
     }
+
+    ${props => props.isInTrezorAction && css`
+        z-index: 10001; /* bigger than modal container */
+        border-color: ${colors.WHITE};
+        border-width: 2px;
+        transform: translate(-1px, -1px);
+        background: ${colors.DIVIDER};
+    `}
 `;
 
 const TopLabel = styled.span`
@@ -119,6 +127,7 @@ const TextArea = ({
     topLabel,
     state = '',
     bottomText = '',
+    isInTrezorAction = false,
 }) => (
     <Wrapper
         className={className}
@@ -137,6 +146,7 @@ const TextArea = ({
             placeholder={placeholder}
             onChange={onChange}
             borderColor={getColor(state)}
+            isInTrezorAction={isInTrezorAction}
         />
         {bottomText && (
             <BottomText
@@ -161,6 +171,7 @@ TextArea.propTypes = {
     topLabel: PropTypes.node,
     state: PropTypes.string,
     bottomText: PropTypes.string,
+    isInTrezorAction: PropTypes.bool,
 };
 
 export default TextArea;

src/components/modals/index.js

@@ -17,6 +17,7 @@ import InvalidPin from 'components/modals/pin/Invalid';
 import Passphrase from 'components/modals/passphrase/Passphrase';
 import PassphraseType from 'components/modals/passphrase/Type';
 import ConfirmSignTx from 'components/modals/confirm/SignTx';
+import ConfirmSignMessage from 'components/modals/confirm/SignMessage';
 import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
 import ForgetDevice from 'components/modals/device/Forget';
 import RememberDevice from 'components/modals/device/Remember';
@@ -90,6 +91,9 @@ const getDeviceContextModal = (props: Props) => {
         case 'ButtonRequest_SignTx':
             return <ConfirmSignTx device={modal.device} sendForm={props.sendForm} />;
 
+        case 'ButtonRequest_SignMessage':
+            return <ConfirmSignMessage device={modal.device} />;
+
         case RECEIVE.REQUEST_UNVERIFIED:
             return (
                 <ConfirmUnverifiedAddress

src/reducers/SignVerifyReducer.js

@@ -12,10 +12,17 @@ export type State = {
 
 export const initialState: State = {
     signature: '',
+    isSignProgress: false,
 };
 
 export default (state: State = initialState, action: Action): State => {
     switch (action.type) {
+        case SIGN_VERIFY.SIGN_PROGRESS:
+            return {
+                ...state,
+                isSignProgress: action.isSignProgress,
+            };
+
         case SIGN_VERIFY.SIGN_SUCCESS:
             return {
                 ...state,

src/views/Wallet/views/Account/SignVerify/Container.js

@@ -19,6 +19,7 @@ export type Props = StateProps & DispatchProps;
 const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
     selectedAccount: state.selectedAccount,
     signature: state.signVerifyReducer.signature,
+    isSignProgress: state.signVerifyReducer.isSignProgress,
     isVerifySuccess: state.signVerifyReducer.isVerifySuccess,
 });
 

src/views/Wallet/views/Account/SignVerify/index.js

@@ -121,6 +121,7 @@ class SignVerify extends Component {
                                 onChange={this.handleInputChange}
                                 rows="2"
                                 maxLength="255"
+                                isInTrezorAction={this.props.isSignProgress}
                             />
                         </Row>
                         <Row>