diff --git a/src/actions/ModalActions.js b/src/actions/ModalActions.js index dce67072..5c2f5eea 100644 --- a/src/actions/ModalActions.js +++ b/src/actions/ModalActions.js @@ -33,14 +33,14 @@ export const onPinSubmit = (value: string): Action => { }; }; -export const onPassphraseSubmit = (passphrase: string): AsyncAction => async ( - dispatch: Dispatch, - getState: GetState -): Promise => { +export const onPassphraseSubmit = ( + passphrase: string, + passphraseOnDevice: boolean = false +): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { 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, }, }); diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 955fc467..522b2607 100644 --- a/src/components/modals/index.js +++ b/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 ; + case 'ButtonRequest_ProtectCall': return ; diff --git a/src/components/modals/passphrase/OnDevice/index.js b/src/components/modals/passphrase/OnDevice/index.js new file mode 100644 index 00000000..23e9df77 --- /dev/null +++ b/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) => ( + +
+ +
Enter passphrase on {props.device.label} device
+

+ If you enter a wrong passphrase, you will not unlock the desired hidden wallet. +

+
+
+); + +PassphraseType.propTypes = { + device: PropTypes.object.isRequired, +}; + +export default PassphraseType; diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 4377ce47..116a4f8c 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/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 { constructor(props: Props) { super(props); @@ -169,7 +173,10 @@ class Passphrase extends PureComponent { })); } - 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 { isPassphraseHidden: true, }); - onPassphraseSubmit(shouldLeavePassphraseBlank ? '' : passphrase); + onPassphraseSubmit(shouldLeavePassphraseBlank ? '' : passphrase, passphraseOnDevice); } handleKeyPress(event: KeyboardEvent) { @@ -209,6 +216,13 @@ class Passphrase extends PureComponent { ); } + const { device } = this.props; + const onDeviceOffer = !!( + device.features && + device.features.capabilities && + device.features.capabilities.includes('Capability_PassphraseEntry') + ); + return (
@@ -270,6 +284,11 @@ class Passphrase extends PureComponent { + {onDeviceOffer && ( + this.submitPassphrase(false, true)}> + Enter passphrase on device + + )}