implement PassphraseOnDevice button

src/actions/ModalActions.js

@@ -33,14 +33,14 @@ export const onPinSubmit = (value: string): Action => {
     };
 };
 
-export const onPassphraseSubmit = (passphrase: string): AsyncAction => async (
+export const onPassphraseSubmit = (
-    dispatch: Dispatch,
+    passphrase: string,
-    getState: GetState
+    passphraseOnDevice: boolean = false
-): Promise<void> => {
+): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
     const { modal } = getState();
     if (modal.context !== MODAL.CONTEXT_DEVICE) return;
 
-    if (passphrase === '') {
+    if (passphrase === '' && !passphraseOnDevice) {
         // set standard wallet type if passphrase is blank
         dispatch({
             type: CONNECT.UPDATE_WALLET_TYPE,
@@ -54,6 +54,7 @@ export const onPassphraseSubmit = (passphrase: string): AsyncAction => async (
         payload: {
             value: passphrase,
             save: true,
+            passphraseOnDevice,
         },
     });
 

src/components/modals/index.js

@@ -16,6 +16,7 @@ import Pin from 'components/modals/pin/Pin';
 import InvalidPin from 'components/modals/pin/Invalid';
 import Passphrase from 'components/modals/passphrase/Passphrase';
 import PassphraseType from 'components/modals/passphrase/Type';
+import PassphraseOnDevice from 'components/modals/passphrase/OnDevice';
 import ConfirmSignTx from 'components/modals/confirm/SignTx';
 import ConfirmAction from 'components/modals/confirm/Action';
 import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
@@ -97,6 +98,10 @@ const getDeviceContextModal = (props: Props) => {
             }
         }
 
+        case UI.REQUEST_PASSPHRASE_ON_DEVICE:
+        case 'ButtonRequest_PassphraseEntry':
+            return <PassphraseOnDevice device={modal.device} />;
+
         case 'ButtonRequest_ProtectCall':
             return <ConfirmAction device={modal.device} />;
 

src/components/modals/passphrase/OnDevice/index.js

@@ -0,0 +1,43 @@
+/* @flow */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { H5, P, colors } from 'trezor-ui-components';
+import DeviceIcon from 'components/images/DeviceIcon';
+
+import type { TrezorDevice } from 'flowtype';
+
+type Props = {
+    device: TrezorDevice,
+};
+
+const Wrapper = styled.div`
+    max-width: 360px;
+    padding: 30px 48px;
+`;
+
+const StyledDeviceIcon = styled(DeviceIcon)`
+    margin-bottom: 10px;
+`;
+
+const Header = styled.div``;
+
+const PassphraseType = (props: Props) => (
+    <Wrapper>
+        <Header>
+            <StyledDeviceIcon device={props.device} size={32} color={colors.TEXT_SECONDARY} />
+            <H5>Enter passphrase on {props.device.label} device</H5>
+            <P size="small">
+                If you enter a wrong passphrase, you will not unlock the desired hidden wallet.
+            </P>
+        </Header>
+    </Wrapper>
+);
+
+PassphraseType.propTypes = {
+    device: PropTypes.object.isRequired,
+};
+
+export default PassphraseType;

src/components/modals/passphrase/Passphrase/index.js

@@ -73,6 +73,10 @@ const LinkButton = styled(Button)`
     }
 `;
 
+const OnDeviceButton = styled(Button)`
+    margin: 10px 0 10px 0;
+`;
+
 class Passphrase extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
@@ -169,7 +173,10 @@ class Passphrase extends PureComponent<Props, State> {
         }));
     }
 
-    submitPassphrase(shouldLeavePassphraseBlank: boolean = false) {
+    submitPassphrase(
+        shouldLeavePassphraseBlank: boolean = false,
+        passphraseOnDevice: boolean = false
+    ) {
         const { onPassphraseSubmit } = this.props;
         const passphrase = this.state.passphraseInputValue;
 
@@ -181,7 +188,7 @@ class Passphrase extends PureComponent<Props, State> {
             isPassphraseHidden: true,
         });
 
-        onPassphraseSubmit(shouldLeavePassphraseBlank ? '' : passphrase);
+        onPassphraseSubmit(shouldLeavePassphraseBlank ? '' : passphrase, passphraseOnDevice);
     }
 
     handleKeyPress(event: KeyboardEvent) {
@@ -209,6 +216,13 @@ class Passphrase extends PureComponent<Props, State> {
             );
         }
 
+        const { device } = this.props;
+        const onDeviceOffer = !!(
+            device.features &&
+            device.features.capabilities &&
+            device.features.capabilities.includes('Capability_PassphraseEntry')
+        );
+
         return (
             <Wrapper>
                 <H5>
@@ -270,6 +284,11 @@ class Passphrase extends PureComponent<Props, State> {
                     <Button isDisabled={!!error} onClick={() => this.submitPassphrase()}>
                         <FormattedMessage {...l10nMessages.TR_ENTER} />
                     </Button>
+                    {onDeviceOffer && (
+                        <OnDeviceButton isWhite onClick={() => this.submitPassphrase(false, true)}>
+                            Enter passphrase on device
+                        </OnDeviceButton>
+                    )}
                 </Row>
                 <Footer>
                     <P size="small">

src/reducers/ModalReducer.js

@@ -76,6 +76,7 @@ export default function modal(state: State = initialState, action: Action): Stat
         case UI.REQUEST_PIN:
         case UI.INVALID_PIN:
         case UI.REQUEST_PASSPHRASE:
+        case UI.REQUEST_PASSPHRASE_ON_DEVICE:
             return {
                 context: MODAL.CONTEXT_DEVICE,
                 device: (action.payload.device: any), // should be TrezorDevice, but ath this point it doesn't matter, Device is enough