From ac9725613bd8d13599da9ac36bc03bb00ad5a602 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 30 Aug 2018 16:04:15 +0200 Subject: [PATCH] SignTx modal refactored --- src/components/modals/DuplicateDevice.js | 111 ------------------ .../modals/confirm/Address/index.js | 45 +++++++ .../SignTx}/index.js | 11 +- .../UnverifiedAddress/index.js} | 26 +--- src/components/modals/index.js | 13 +- src/styles/modal.less | 32 ----- 6 files changed, 61 insertions(+), 177 deletions(-) delete mode 100644 src/components/modals/DuplicateDevice.js create mode 100644 src/components/modals/confirm/Address/index.js rename src/components/modals/{ConfirmSignTx => confirm/SignTx}/index.js (79%) rename src/components/modals/{ConfirmAddress.js => confirm/UnverifiedAddress/index.js} (78%) diff --git a/src/components/modals/DuplicateDevice.js b/src/components/modals/DuplicateDevice.js deleted file mode 100644 index d707eb84..00000000 --- a/src/components/modals/DuplicateDevice.js +++ /dev/null @@ -1,111 +0,0 @@ -/* @flow */ - - -import React, { Component } from 'react'; -import { getDuplicateInstanceNumber } from 'reducers/utils'; -import type { Props } from './index'; - -type State = { - defaultName: string; - instance: number; - instanceName: ?string; - isUsed: boolean; -} - -export default class DuplicateDevice extends Component { - keyboardHandler: (event: KeyboardEvent) => void; - - state: State; - - input: ?HTMLInputElement; - - constructor(props: Props) { - super(props); - - const device = props.modal.opened ? props.modal.device : null; - if (!device) return; - - const instance = getDuplicateInstanceNumber(props.devices, device); - - this.state = { - defaultName: `${device.label} (${instance.toString()})`, - instance, - instanceName: null, - isUsed: false, - }; - } - - keyboardHandler(event: KeyboardEvent): void { - if (event.keyCode === 13 && !this.state.isUsed) { - event.preventDefault(); - this.submit(); - } - } - - componentDidMount(): void { - // one time autofocus - if (this.input) this.input.focus(); - this.keyboardHandler = this.keyboardHandler.bind(this); - window.addEventListener('keydown', this.keyboardHandler, false); - } - - componentWillUnmount(): void { - window.removeEventListener('keydown', this.keyboardHandler, false); - } - - onNameChange = (value: string): void => { - let isUsed: boolean = false; - if (value.length > 0) { - isUsed = (this.props.devices.find(d => d.instanceName === value) !== undefined); - } - - this.setState({ - instanceName: value.length > 0 ? value : null, - isUsed, - }); - } - - submit() { - if (!this.props.modal.opened) return; - const extended: Object = { instanceName: this.state.instanceName, instance: this.state.instance }; - this.props.modalActions.onDuplicateDevice({ ...this.props.modal.device, ...extended }); - } - - render() { - if (!this.props.modal.opened) return null; - - const { device } = this.props.modal; - const { onCancel, onDuplicateDevice } = this.props.modalActions; - const { - defaultName, - instanceName, - isUsed, - } = this.state; - - return ( -
- - -
- ); - } -} \ No newline at end of file diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js new file mode 100644 index 00000000..42904c22 --- /dev/null +++ b/src/components/modals/confirm/Address/index.js @@ -0,0 +1,45 @@ +/* @flow */ + +import React, { Component } from 'react'; +import { findAccount } from 'reducers/AccountsReducer'; + +const Wrapper = styled.div` + width: 390px; +`; + +const Header = styled.div` +`; + +const Content = styled.div` + border-top: 1px solid ${colors.DIVIDER}; + background: ${colors.MAIN}; + padding: 24px 48px; +`; + +const Label = styled.div` + font-size: 10px; + color: ${colors.TEXT_SECONDARY}; +`; + +const ConfirmAddress = (props: Props) => { + const { + account, + network, + } = props.selectedAccount; + if (!account || !network) return null; + + return ( +
+
+

Confirm address on TREZOR

+

Please compare your address on device with address shown bellow.

+
+
+

{ account.address }

+ +
+
+ ); +}; + +export default ConfirmAddress; \ No newline at end of file diff --git a/src/components/modals/ConfirmSignTx/index.js b/src/components/modals/confirm/SignTx/index.js similarity index 79% rename from src/components/modals/ConfirmSignTx/index.js rename to src/components/modals/confirm/SignTx/index.js index 94588b3a..ba550845 100644 --- a/src/components/modals/ConfirmSignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -2,13 +2,17 @@ import React from 'react'; import colors from 'config/colors'; import styled from 'styled-components'; import P from 'components/Paragraph'; +import Icon from 'components/Icon'; +import icons from 'config/icons'; import { H3 } from 'components/Heading'; const Wrapper = styled.div` width: 390px; + padding: 12px 10px; `; const Header = styled.div` + padding: 24px 48px; `; const Content = styled.div` @@ -18,6 +22,7 @@ const Content = styled.div` `; const Label = styled.div` + padding-top: 5px; font-size: 10px; color: ${colors.TEXT_SECONDARY}; `; @@ -30,19 +35,19 @@ const ConfirmSignTx = (props) => { amount, address, currency, - total, selectedFeeLevel, } = props.sendForm; return (
+

Confirm transaction on { device.label } device

Details are shown on display

- -

{ `${amount} ${currency}` }

+ +

{`${amount} ${currency}` }

{ address }

diff --git a/src/components/modals/ConfirmAddress.js b/src/components/modals/confirm/UnverifiedAddress/index.js similarity index 78% rename from src/components/modals/ConfirmAddress.js rename to src/components/modals/confirm/UnverifiedAddress/index.js index a87a6af0..862dd42d 100644 --- a/src/components/modals/ConfirmAddress.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -6,29 +6,7 @@ import { findAccount } from 'reducers/AccountsReducer'; import type { Props } from './index'; -const ConfirmAddress = (props: Props) => { - const { - account, - network, - } = props.selectedAccount; - if (!account || !network) return null; - - return ( -
-
-

Confirm address on TREZOR

-

Please compare your address on device with address shown bellow.

-
-
-

{ account.address }

- -
-
- ); -}; -export default ConfirmAddress; - -export class ConfirmUnverifiedAddress extends Component { +class ConfirmUnverifiedAddress extends Component { keyboardHandler: (event: KeyboardEvent) => void; keyboardHandler(event: KeyboardEvent): void { @@ -99,3 +77,5 @@ export class ConfirmUnverifiedAddress extends Component { ); } } + +export default ConfirmUnverifiedAddress; \ No newline at end of file diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 72360183..197f2c32 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -5,8 +5,7 @@ import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; import styled from 'styled-components'; import colors from 'config/colors'; - -import { CSSTransition, Transition } from 'react-transition-group'; +import { CSSTransition } from 'react-transition-group'; import { UI } from 'trezor-connect'; @@ -14,18 +13,17 @@ import { default as ModalActions } from 'actions/ModalActions'; import { default as ReceiveActions } from 'actions/ReceiveActions'; import * as RECEIVE from 'actions/constants/receive'; -import * as MODAL from 'actions/constants/modal'; import * as CONNECT from 'actions/constants/TrezorConnect'; import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; - import Pin from 'components/modals/Pin'; import InvalidPin from 'components/modals/InvalidPin'; import Passphrase from 'components/modals/Passphrase'; import PassphraseType from 'components/modals/PassphraseType'; -import ConfirmSignTx from 'components/modals/ConfirmSignTx'; -import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modals/ConfirmAddress'; + +import ConfirmSignTx from 'components/modals/confirm/SignTx'; +import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress'; import ForgetDevice from 'components/modals/device/Forget'; import RememberDevice from 'components/modals/device/Remember'; @@ -93,7 +91,7 @@ class Modal extends Component { if (!this.props.modal.opened) return null; const { opened } = this.props.modal; - const windowType = CONNECT.TRY_TO_DUPLICATE; + const windowType = RECEIVE.REQUEST_UNVERIFIED; let component = null; switch (windowType) { @@ -109,7 +107,6 @@ class Modal extends Component { case 'ButtonRequest_SignTx': component = (); break; - // case "ButtonRequest_Address" : case 'ButtonRequest_PassphraseType': component = (); break; diff --git a/src/styles/modal.less b/src/styles/modal.less index dd45a8c7..7d19a3b5 100644 --- a/src/styles/modal.less +++ b/src/styles/modal.less @@ -12,38 +12,6 @@ font-size: 12px; } - .confirm-tx { - width: 390px; // address overflow - - .header { - padding: 24px 48px; - &:before { - .icomoon-T1; - font-size: 52px; - color: @color_text_secondary; - } - h3 { - margin: 0; - } - } - .content { - border-top: 1px solid @color_divider; - background: @color_main; - padding: 24px 48px; - - label { - font-size: 10px; - color: @color_text_secondary; - } - - p { - font-size: 12px; - font-weight: 400; - color: @color_text_primary; - } - } - } - .confirm-address { width: 390px; // address overflow