Add trezor action to textarea

src/actions/SignVerifyActions.js

@@ -123,7 +123,6 @@ export const verify = (
     }
 };
 
-
 export const clear = (): ThunkAction => (dispatch: Dispatch): void => {
     dispatch({
         type: SIGN_VERIFY.CLEAR,

src/components/Textarea/index.js

@@ -7,6 +7,7 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
 
 const Wrapper = styled.div`
     width: 100%;
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -83,7 +84,7 @@ const StyledTextarea = styled(Textarea)`
         }
     }
 
-    ${props => props.isInTrezorAction && css`
+    ${props => props.trezorAction && css`
         z-index: 10001; /* bigger than modal container */
         border-color: ${colors.WHITE};
         border-width: 2px;
@@ -115,6 +116,32 @@ const getColor = (inputState) => {
     return color;
 };
 
+const TrezorAction = styled.div`
+    align-items: center;
+    margin: 0px 10px;
+    padding: 0 14px 0 5px;
+    position: absolute;
+    background: black;
+    bottom: -25px;
+    color: ${colors.WHITE};
+    border-radius: 5px;
+    line-height: 37px;
+    z-index: 10001;
+    transform: translate(-1px, -1px);
+`;
+
+const ArrowUp = styled.div`
+    position: absolute;
+    top: -9px;
+    left: 12px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid black;
+    z-index: 10001;
+`;
+
 const TextArea = ({
     className,
     placeholder = '',
@@ -130,11 +157,9 @@ const TextArea = ({
     maxRows,
     state = '',
     bottomText = '',
-    isInTrezorAction = false,
+    trezorAction = null,
 }) => (
-    <Wrapper
-        className={className}
-    >
+    <Wrapper className={className}>
         {topLabel && (
             <TopLabel>{topLabel}</TopLabel>
         )}
@@ -151,8 +176,13 @@ const TextArea = ({
             placeholder={placeholder}
             onChange={onChange}
             borderColor={getColor(state)}
-            isInTrezorAction={isInTrezorAction}
+            trezorAction={trezorAction}
         />
+        {trezorAction && (
+            <TrezorAction>
+                <ArrowUp />{trezorAction}
+            </TrezorAction>
+        )}
         {bottomText && (
             <BottomText
                 color={getColor(state)}
@@ -178,7 +208,7 @@ TextArea.propTypes = {
     topLabel: PropTypes.node,
     state: PropTypes.string,
     bottomText: PropTypes.string,
-    isInTrezorAction: PropTypes.bool,
+    trezorAction: PropTypes.node,
 };
 
 export default TextArea;

src/components/trezorActions/Confirm/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import colors from 'config/colors';
-import ICONS from 'config/icons';
-import Icon from 'components/Icon';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-    display: flex;
-`;
-
-const Tooltip = () => (
-    <Wrapper>
-        <Icon
-            icon={ICONS.T1}
-            color={colors.WHITE}
-        />
-        Check address on your Trezor
-    </Wrapper>
-);
-
-export default Tooltip;

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

@@ -53,40 +53,13 @@ const Label = styled.div`
     padding: 5px 0px 10px 0;
 `;
 
-const ConfirmTooltip = styled.div`
-    position: absolute;
-    z-index: 10001;
-    padding: 3px 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 250px;
-    background: black;
-    border: 0;
-    color: ${colors.WHITE};
-    border-radius: 5px;
-    transform: translate(-1px, -1px);
-`;
-
-const ArrowUp = styled.div`
-    position: absolute;
-    top: -9px;
-    left: 20px;
-    width: 0;
-    height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid black;
-    z-index: 10001;
-`;
-
 const StyledIcon = styled(Icon)`
     position: relative;
     left: 0;
 `;
 
-const ConfirmText = styled.div`
-    color: white;
+const ActionWrapper = styled.div`
+    white-space: nowrap
 `;
 
 type State = {
@@ -169,18 +142,16 @@ class SignVerify extends Component<Props, State> {
                                 rows={4}
                                 maxRows={4}
                                 maxLength="255"
-                                isInTrezorAction={this.props.isSignProgress}
+                                trezorAction={this.props.isSignProgress ? (
+                                    <ActionWrapper>
+                                        <StyledIcon
+                                            icon={ICONS.T1}
+                                            color={colors.WHITE}
+                                        />
+                                        Check address on your Trezor
+                                    </ActionWrapper>
+                                ) : null}
                             />
-                            {this.props.isSignProgress && (
-                                <ConfirmTooltip>
-                                    <ArrowUp />
-                                    <StyledIcon
-                                        icon={ICONS.T1}
-                                        color={colors.WHITE}
-                                    />
-                                    <ConfirmText>Check address on your Trezor</ConfirmText>
-                                </ConfirmTooltip>
-                            )}
                         </Row>
                         <Row>
                             <Label>Signature</Label>