diff --git a/src/components/buttons/Button/index.js b/src/components/buttons/Button/index.js index 876fe893..a38dc59c 100644 --- a/src/components/buttons/Button/index.js +++ b/src/components/buttons/Button/index.js @@ -29,7 +29,7 @@ const Wrapper = styled.button` background: ${colors.GRAY_LIGHT}; `} - ${props => props.color === 'white' && css` + ${props => props.isWhite && css` background: ${colors.WHITE}; color: ${colors.TEXT_SECONDARY}; border: 1px solid ${colors.DIVIDER}; @@ -113,14 +113,13 @@ const IconWrapper = styled.span` `; const Button = ({ - className, text, icon, onClick = () => { }, disabled, color = null, isWhite = false, isWebUsb = false, isTransparent = false, + className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false, }) => ( { - if (!props.modal.opened) return null; - const { device } = props.modal; - - const { - amount, - address, - currency, - total, - selectedFeeLevel, - } = props.sendForm; - - return ( -
-
-

Confirm transaction on { device.label } device

-

Details are shown on display

-
-
- -

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

- -

{ address }

- -

{ selectedFeeLevel.label }

-
-
- ); -}; - -export default Confirmation; \ No newline at end of file diff --git a/src/components/modal/ForgetDevice/index.js b/src/components/modal/ForgetDevice/index.js new file mode 100644 index 00000000..2484985d --- /dev/null +++ b/src/components/modal/ForgetDevice/index.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import styled from 'styled-components'; +import { H3 } from 'components/Heading'; +import P from 'components/Paragraph'; +import Button from 'components/buttons/Button'; + +const Remember = styled.div` + width: 360px; + padding: 24px 48px; +`; + +const StyledP = styled(P)` + padding: 14px 0px; +`; + +const StyledButton = styled(Button)` + margin: 0 0 10px 0; +`; + +const Row = styled.div` + display: flex; + flex-direction: column; + padding: 10px 0; +`; + +class ForgetDevice extends Component { + componentDidMount() { + this.keyboardHandler = this.keyboardHandler.bind(this); + window.addEventListener('keydown', this.keyboardHandler, false); + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.keyboardHandler, false); + } + + keyboardHandler(event) { + if (event.keyCode === 13) { + event.preventDefault(); + this.forget(); + } + } + + forget() { + if (this.props.modal.opened) { + this.props.modalActions.onForgetSingleDevice(this.props.modal.device); + } + } + + render() { + if (!this.props.modal.opened) return null; + const { device } = this.props.modal; + const { onCancel } = this.props.modalActions; + return ( + +

Forget { device.instanceLabel } ?

+ Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again. + + this.forget()} text="Forget" /> + + +
+ ); + } +} + +export default ForgetDevice; \ No newline at end of file diff --git a/src/components/modal/index.js b/src/components/modal/index.js index 47984166..dbd01584 100644 --- a/src/components/modal/index.js +++ b/src/components/modal/index.js @@ -18,14 +18,17 @@ 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 './Pin'; -import InvalidPin from './InvalidPin'; -import Passphrase from './Passphrase'; -import PassphraseType from './PassphraseType'; -import ConfirmSignTx from './ConfirmSignTx'; -import ConfirmAddress, { ConfirmUnverifiedAddress } from './ConfirmAddress'; -import RememberDevice, { ForgetDevice } from './RememberDevice'; -import DuplicateDevice from './DuplicateDevice'; + +import ForgetDevice from 'components/modal/ForgetDevice'; + +import Pin from 'components/modal/Pin'; +import InvalidPin from 'components/modal/InvalidPin'; +import Passphrase from 'components/modal/Passphrase'; +import PassphraseType from 'components/modal/PassphraseType'; +import ConfirmSignTx from 'components/modal/ConfirmSignTx'; +import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modal/ConfirmAddress'; +import RememberDevice from 'components/modal/RememberDevice'; +import DuplicateDevice from 'components/modal/DuplicateDevice'; type OwnProps = { }