diff --git a/src/js/views/Landing/components/ConnectDevice/components/ConnectHIDDevice.js b/src/js/views/Landing/components/ConnectDevice/components/ConnectHIDDevice.js deleted file mode 100644 index c4abe2da..00000000 --- a/src/js/views/Landing/components/ConnectDevice/components/ConnectHIDDevice.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { H2 } from 'components/Heading'; - -const ConnectHIDDevice = () => ( -
-

The private bank in your hands.

-

TREZOR Wallet is an easy-to-use interface for your TREZOR.

-

TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.

-
-

- - - - - - - - - - Connect TREZOR to continue - -

-
-
-

- Don't have TREZOR? Get one -

-
-
-); - -export default ConnectHIDDevice; \ No newline at end of file diff --git a/src/js/views/Landing/components/ConnectDevice/components/ConnectWebUsbDevice.js b/src/js/views/Landing/components/ConnectDevice/components/ConnectWebUsbDevice.js deleted file mode 100644 index 0e075ba2..00000000 --- a/src/js/views/Landing/components/ConnectDevice/components/ConnectWebUsbDevice.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, { Component } from 'react'; -import { H2 } from 'components/Heading'; -import TrezorConnect from 'trezor-connect'; - -class ConnectWebUsbDevice extends Component { - componentDidMount() { - TrezorConnect.renderWebUSBButton(); - } - - componentDidUpdate() { - TrezorConnect.renderWebUSBButton(); - } - - render() { - return ( -
-

The private bank in your hands.

-

TREZOR Wallet is an easy-to-use interface for your TREZOR.

-

TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.

-
-

- - - - - - - - - - Connect TREZOR - -

-

and

- -
-
-

- Device not recognized? Try installing the TREZOR Bridge. - Don't have TREZOR? Get one -

-
-
- ); - } -} - -export default ConnectWebUsbDevice; \ No newline at end of file diff --git a/src/js/views/Landing/components/ConnectDevice/components/DisconnectDevice.js b/src/js/views/Landing/components/ConnectDevice/components/DisconnectDevice.js deleted file mode 100644 index 2d3c01ef..00000000 --- a/src/js/views/Landing/components/ConnectDevice/components/DisconnectDevice.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { H2 } from 'components/Heading'; - -const DisconnectDevice = ({ label }) => ( -
-

The private bank in your hands.

-

TREZOR Wallet is an easy-to-use interface for your TREZOR.

-

TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.

-
-

- - Unplug { label } device. - -

-
-
-
-); - -DisconnectDevice.propTypes = { - label: PropTypes.string.isRequired, -}; - -export default DisconnectDevice; \ No newline at end of file diff --git a/src/js/views/Landing/components/ConnectDevice/index.js b/src/js/views/Landing/components/ConnectDevice/index.js index f108be1b..9f4be3d2 100644 --- a/src/js/views/Landing/components/ConnectDevice/index.js +++ b/src/js/views/Landing/components/ConnectDevice/index.js @@ -1,28 +1,113 @@ /* @flow */ import React, { Component } from 'react'; +import styled, { keyframes } from 'styled-components'; import TrezorConnect from 'trezor-connect'; -import { H2 } from 'components/Heading'; +import P from 'components/Paragraph'; +import colors from 'config/colors'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; -import type { State, TrezorDevice } from 'flowtype'; +type Props = { + deviceLabel: string, + showWebUsb: boolean, + showDisconnect: boolean, +}; +class ConnectDevice extends Component { + componentDidMount() { + if (this.props.showWebUsb) { + TrezorConnect.renderWebUSBButton(); + } + } -import DisconnectDevice from './components/DisconnectDevice'; -import ConnectHIDDevice from './components/ConnectHIDDevice'; -import ConnectWebUsbDevice from './components/ConnectWebUsbDevice'; + componentDidUpdate() { + if (this.props.showWebUsb) { + TrezorConnect.renderWebUSBButton(); + } + } -type Props = { - transport: $PropertyType<$ElementType, 'transport'>; - disconnectRequest: ?TrezorDevice; -} + getTrezorDeviceImage() { + const animationConnect = keyframes` + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-4px) + } + `; + const ImageWrapper = styled.svg` + position: absolute; + top: -8px; + left: -24px; + `; + const DeviceRect = styled.rect` + animation: ${animationConnect} 1.3s ease-out infinite; + `; + return ( + + + + + + + + + ); + } -const ConnectDevice = (props: Props) => { - const { transport, disconnectRequest } = props; - if (disconnectRequest) { - return ; - } if (transport && transport.version.indexOf('webusb') >= 0) { - return ; + render() { + const Wrapper = styled.div` + display: flex; + justify-content: space-around; + align-items: center; + width: 400px; + margin: 0 auto; + padding: 36px 0; + `; + + const animationPulsate = keyframes` + 0%, 100% { + opacity: 0.5; + } + 50% { + opacity: 1.0; + } + `; + + const ConnectTrezorWrapper = styled.div` + position: relative; + top: 1px; + animation: ${animationPulsate} 1.3s ease-out infinite; + + color: ${colors.GREEN_PRIMARY}; + font-size: ${FONT_SIZE.BASE}; + font-weight: ${FONT_WEIGHT.BASE}; + `; + + return ( + + + {this.props.showDisconnect && `Unplug "${this.props.deviceLabel}" device`} + {!this.props.showDisconnect && ( + + {this.getTrezorDeviceImage()} + Connect TREZOR + + )} + + {this.props.showWebUsb && ( + +

and

+ + + )} + + ); } - return ; -}; +} -export default ConnectDevice; \ No newline at end of file +export default ConnectDevice;