mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 16:38:08 +00:00
Merge branch 'styled-components-refactor' of https://github.com/satoshilabs/trezor-wallet into styled-components-refactor
This commit is contained in:
commit
6d87b2d2b2
@ -1,5 +1,7 @@
|
|||||||
👛 A webwallet using TREZOR as a private key storage https://wallet.trezor.io/trezor-wallet
|
# TREZOR Ethereum Wallet
|
||||||
|
|
||||||
npm install / yarn
|
npm install / yarn
|
||||||
|
|
||||||
npm run dev / yarn run dev
|
npm run dev / yarn run dev
|
||||||
|
|
||||||
npm run build / yarn run build
|
npm run build / yarn run build
|
@ -35,11 +35,15 @@ const CircleWrapper = styled.circle`
|
|||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledParagraph = styled(Paragraph)`
|
||||||
|
color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
|
||||||
|
`;
|
||||||
|
|
||||||
const Loader = ({
|
const Loader = ({
|
||||||
className, text, size = 100,
|
className, text, isWhiteText = false, size = 100,
|
||||||
}) => (
|
}) => (
|
||||||
<Wrapper className={className} size={size}>
|
<Wrapper className={className} size={size}>
|
||||||
<Paragraph>{text}</Paragraph>
|
<StyledParagraph isWhiteText={isWhiteText}>{text}</StyledParagraph>
|
||||||
<SvgWrapper viewBox="25 25 50 50">
|
<SvgWrapper viewBox="25 25 50 50">
|
||||||
<CircleWrapper
|
<CircleWrapper
|
||||||
cx="50"
|
cx="50"
|
||||||
@ -65,6 +69,7 @@ const Loader = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
Loader.propTypes = {
|
Loader.propTypes = {
|
||||||
|
isWhiteText: PropTypes.bool,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
text: PropTypes.string,
|
text: PropTypes.string,
|
||||||
size: PropTypes.number,
|
size: PropTypes.number,
|
||||||
|
@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import NotificationButton from 'components/NotificationButton';
|
import NotificationButton from 'components/buttons/NotificationButton';
|
||||||
import Icon from 'components/Icon';
|
import Icon from 'components/Icon';
|
||||||
import icons from 'config/icons';
|
import icons from 'config/icons';
|
||||||
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
||||||
|
@ -29,14 +29,13 @@ const Wrapper = styled.button`
|
|||||||
background: ${colors.GRAY_LIGHT};
|
background: ${colors.GRAY_LIGHT};
|
||||||
`}
|
`}
|
||||||
|
|
||||||
${props => props.color === 'white' && css`
|
${props => props.isWhite && css`
|
||||||
background: ${colors.WHITE};
|
background: ${colors.WHITE};
|
||||||
color: ${colors.TEXT_SECONDARY};
|
color: ${colors.TEXT_SECONDARY};
|
||||||
border: 1px solid ${colors.DIVIDER};
|
border: 1px solid ${colors.DIVIDER};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${colors.TEXT_PRIMARY};
|
color: ${colors.TEXT_PRIMARY};
|
||||||
border-color: ${colors.TEXT_PRIMARY};
|
|
||||||
background: ${colors.DIVIDER};
|
background: ${colors.DIVIDER};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,14 +112,13 @@ const IconWrapper = styled.span`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const Button = ({
|
const Button = ({
|
||||||
className, text, icon, onClick = () => { }, disabled, color = null, isWhite = false, isWebUsb = false, isTransparent = false,
|
children, className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
|
||||||
}) => (
|
}) => (
|
||||||
<Wrapper
|
<Wrapper
|
||||||
className={className}
|
className={className}
|
||||||
icon={icon}
|
icon={icon}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
color={color}
|
|
||||||
isWhite={isWhite}
|
isWhite={isWhite}
|
||||||
isWebUsb={isWebUsb}
|
isWebUsb={isWebUsb}
|
||||||
isTransparent={isTransparent}
|
isTransparent={isTransparent}
|
||||||
@ -136,15 +134,15 @@ const Button = ({
|
|||||||
/>
|
/>
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
)}
|
)}
|
||||||
{text}
|
{children}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
Button.propTypes = {
|
Button.propTypes = {
|
||||||
|
children: PropTypes.element.isRequired,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
color: PropTypes.string,
|
|
||||||
isWhite: PropTypes.bool,
|
isWhite: PropTypes.bool,
|
||||||
isWebUsb: PropTypes.bool,
|
isWebUsb: PropTypes.bool,
|
||||||
isTransparent: PropTypes.bool,
|
isTransparent: PropTypes.bool,
|
@ -1,37 +0,0 @@
|
|||||||
/* @flow */
|
|
||||||
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import type { Props } from './index';
|
|
||||||
|
|
||||||
const Confirmation = (props: Props) => {
|
|
||||||
if (!props.modal.opened) return null;
|
|
||||||
const { device } = props.modal;
|
|
||||||
|
|
||||||
const {
|
|
||||||
amount,
|
|
||||||
address,
|
|
||||||
currency,
|
|
||||||
total,
|
|
||||||
selectedFeeLevel,
|
|
||||||
} = props.sendForm;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="confirm-tx">
|
|
||||||
<div className="header">
|
|
||||||
<h3>Confirm transaction on { device.label } device</h3>
|
|
||||||
<p>Details are shown on display</p>
|
|
||||||
</div>
|
|
||||||
<div className="content">
|
|
||||||
<label>Send </label>
|
|
||||||
<p>{ `${amount} ${currency}` }</p>
|
|
||||||
<label>To</label>
|
|
||||||
<p>{ address }</p>
|
|
||||||
<label>Fee</label>
|
|
||||||
<p>{ selectedFeeLevel.label }</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Confirmation;
|
|
55
src/components/modal/ConfirmSignTx/index.js
Normal file
55
src/components/modal/ConfirmSignTx/index.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import colors from 'config/colors';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import P from 'components/Paragraph';
|
||||||
|
import { H3 } from 'components/Heading';
|
||||||
|
|
||||||
|
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 ConfirmSignTx = (props) => {
|
||||||
|
if (!props.modal.opened) return null;
|
||||||
|
const { device } = props.modal;
|
||||||
|
|
||||||
|
const {
|
||||||
|
amount,
|
||||||
|
address,
|
||||||
|
currency,
|
||||||
|
total,
|
||||||
|
selectedFeeLevel,
|
||||||
|
} = props.sendForm;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Wrapper>
|
||||||
|
<Header>
|
||||||
|
<H3>Confirm transaction on { device.label } device</H3>
|
||||||
|
<P>Details are shown on display</P>
|
||||||
|
</Header>
|
||||||
|
<Content>
|
||||||
|
<Label>Send </Label>
|
||||||
|
<P>{ `${amount} ${currency}` }</P>
|
||||||
|
<Label>To</Label>
|
||||||
|
<P>{ address }</P>
|
||||||
|
<Label>Fee</Label>
|
||||||
|
<P>{ selectedFeeLevel.label }</P>
|
||||||
|
</Content>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConfirmSignTx;
|
66
src/components/modal/ForgetDevice/index.js
Normal file
66
src/components/modal/ForgetDevice/index.js
Normal file
@ -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 Wrapper = 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 (
|
||||||
|
<Wrapper>
|
||||||
|
<H3>Forget { device.instanceLabel }?</H3>
|
||||||
|
<StyledP isSmaller>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.</StyledP>
|
||||||
|
<Row>
|
||||||
|
<StyledButton onClick={() => this.forget()}>Forget</StyledButton>
|
||||||
|
<StyledButton isWhite onClick={onCancel}>Don't forget</StyledButton>
|
||||||
|
</Row>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ForgetDevice;
|
@ -1,8 +1,10 @@
|
|||||||
/* @flow */
|
/* @flow */
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { H3 } from 'components/Heading';
|
||||||
|
import P from 'components/Paragraph';
|
||||||
import Loader from 'components/Loader';
|
import Loader from 'components/Loader';
|
||||||
|
import Button from 'components/buttons/Button';
|
||||||
|
|
||||||
import type { Props } from './index';
|
import type { Props } from './index';
|
||||||
|
|
||||||
@ -11,6 +13,40 @@ type State = {
|
|||||||
ticker?: number;
|
ticker?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ButtonContent = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledP = styled(P)`
|
||||||
|
padding: 10px 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
width: 360px;
|
||||||
|
padding: 24px 48px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Text = styled.div`
|
||||||
|
padding-right: 10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Column = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledButton = styled(Button)`
|
||||||
|
margin: 5px 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledLoader = styled(Loader)`
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
`;
|
||||||
|
|
||||||
export default class RememberDevice extends Component<Props, State> {
|
export default class RememberDevice extends Component<Props, State> {
|
||||||
keyboardHandler: (event: KeyboardEvent) => void;
|
keyboardHandler: (event: KeyboardEvent) => void;
|
||||||
|
|
||||||
@ -86,52 +122,27 @@ export default class RememberDevice extends Component<Props, State> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="remember">
|
<Wrapper>
|
||||||
<h3>Forget {label}?</h3>
|
<H3>Forget {label}?</H3>
|
||||||
<p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
|
<StyledP isSmaller>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
|
||||||
<button onClick={event => this.forget()}><span>Forget <Loader size={28} text={this.state.countdown.toString()} /></span></button>
|
<Column>
|
||||||
<button className="white" onClick={event => onRememberDevice(device)}>Remember</button>
|
<StyledButton onClick={() => this.forget()}>
|
||||||
</div>
|
<ButtonContent>
|
||||||
|
<Text>Forget</Text>
|
||||||
|
<StyledLoader
|
||||||
|
isWhiteText
|
||||||
|
size={28}
|
||||||
|
text={this.state.countdown.toString()}
|
||||||
|
/>
|
||||||
|
</ButtonContent>
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
isWhite
|
||||||
|
onClick={event => onRememberDevice(device)}
|
||||||
|
>Remember
|
||||||
|
</StyledButton>
|
||||||
|
</Column>
|
||||||
|
</Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ForgetDevice extends Component<Props> {
|
|
||||||
keyboardHandler: (event: KeyboardEvent) => void;
|
|
||||||
|
|
||||||
keyboardHandler(event: KeyboardEvent): void {
|
|
||||||
if (event.keyCode === 13) {
|
|
||||||
event.preventDefault();
|
|
||||||
this.forget();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount(): void {
|
|
||||||
this.keyboardHandler = this.keyboardHandler.bind(this);
|
|
||||||
window.addEventListener('keydown', this.keyboardHandler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount(): void {
|
|
||||||
window.removeEventListener('keydown', this.keyboardHandler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<div className="remember">
|
|
||||||
<h3>Forget { device.instanceLabel } ?</h3>
|
|
||||||
<p>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.</p>
|
|
||||||
<button onClick={event => this.forget()}>Forget</button>
|
|
||||||
<button className="white" onClick={onCancel}>Don't forget</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,10 +1,10 @@
|
|||||||
/* @flow */
|
/* @flow */
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { withRouter } from 'react-router-dom';
|
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, Transition } from 'react-transition-group';
|
||||||
|
|
||||||
@ -18,14 +18,17 @@ import * as MODAL from 'actions/constants/modal';
|
|||||||
import * as CONNECT from 'actions/constants/TrezorConnect';
|
import * as CONNECT from 'actions/constants/TrezorConnect';
|
||||||
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
|
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
|
||||||
import type { State, Dispatch } from 'flowtype';
|
import type { State, Dispatch } from 'flowtype';
|
||||||
import Pin from './Pin';
|
|
||||||
import InvalidPin from './InvalidPin';
|
import ForgetDevice from 'components/modal/ForgetDevice';
|
||||||
import Passphrase from './Passphrase';
|
|
||||||
import PassphraseType from './PassphraseType';
|
import Pin from 'components/modal/Pin';
|
||||||
import ConfirmSignTx from './ConfirmSignTx';
|
import InvalidPin from 'components/modal/InvalidPin';
|
||||||
import ConfirmAddress, { ConfirmUnverifiedAddress } from './ConfirmAddress';
|
import Passphrase from 'components/modal/Passphrase';
|
||||||
import RememberDevice, { ForgetDevice } from './RememberDevice';
|
import PassphraseType from 'components/modal/PassphraseType';
|
||||||
import DuplicateDevice from './DuplicateDevice';
|
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 = { }
|
type OwnProps = { }
|
||||||
@ -62,6 +65,29 @@ const Fade = ({ children, ...props }) => (
|
|||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const ModalContainer = styled.div`
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10000;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ModalWindow = styled.div`
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: ${colors.WHITE};
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
class Modal extends Component<Props> {
|
class Modal extends Component<Props> {
|
||||||
render() {
|
render() {
|
||||||
if (!this.props.modal.opened) return null;
|
if (!this.props.modal.opened) return null;
|
||||||
@ -83,8 +109,6 @@ class Modal extends Component<Props> {
|
|||||||
component = (<ConfirmSignTx {...this.props} />);
|
component = (<ConfirmSignTx {...this.props} />);
|
||||||
break;
|
break;
|
||||||
// case "ButtonRequest_Address" :
|
// case "ButtonRequest_Address" :
|
||||||
// component = (<ConfirmAddress { ...this.props } />)
|
|
||||||
// break;
|
|
||||||
case 'ButtonRequest_PassphraseType':
|
case 'ButtonRequest_PassphraseType':
|
||||||
component = (<PassphraseType {...this.props} />);
|
component = (<PassphraseType {...this.props} />);
|
||||||
break;
|
break;
|
||||||
@ -111,11 +135,11 @@ class Modal extends Component<Props> {
|
|||||||
if (opened) {
|
if (opened) {
|
||||||
ch = (
|
ch = (
|
||||||
<Fade key="1">
|
<Fade key="1">
|
||||||
<div className="modal-container">
|
<ModalContainer className="modal-container">
|
||||||
<div className="modal-window">
|
<ModalWindow>
|
||||||
{ component }
|
{ component }
|
||||||
</div>
|
</ModalWindow>
|
||||||
</div>
|
</ModalContainer>
|
||||||
</Fade>
|
</Fade>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,27 +1,4 @@
|
|||||||
.modal-container {
|
.modal-container {
|
||||||
position: fixed;
|
|
||||||
z-index: 10000;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
background: rgba(0, 0, 0, 0.35);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.modal-window {
|
|
||||||
margin: auto;
|
|
||||||
// padding: 24px 48px;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: @color_white;
|
|
||||||
text-align: center;
|
|
||||||
// overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: @color_text_primary;
|
color: @color_text_primary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import Link from 'components/Link';
|
import Link from 'components/Link';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
|
|
||||||
@ -44,9 +44,7 @@ const BrowserNotSupported = () => (
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
>
|
>
|
||||||
<Button
|
<Button>Get Chrome</Button>
|
||||||
text="Get Chrome"
|
|
||||||
/>
|
|
||||||
</Link>
|
</Link>
|
||||||
</Browser>
|
</Browser>
|
||||||
<Browser>
|
<Browser>
|
||||||
@ -57,9 +55,7 @@ const BrowserNotSupported = () => (
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
>
|
>
|
||||||
<Button
|
<Button>Get Firefox</Button>
|
||||||
text="Get Firefox"
|
|
||||||
/>
|
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
</Browser>
|
</Browser>
|
||||||
|
@ -4,7 +4,7 @@ import React, { Component } from 'react';
|
|||||||
import styled, { keyframes } from 'styled-components';
|
import styled, { keyframes } from 'styled-components';
|
||||||
import TrezorConnect from 'trezor-connect';
|
import TrezorConnect from 'trezor-connect';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import { PULSATE } from 'config/animations';
|
import { PULSATE } from 'config/animations';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
||||||
@ -91,9 +91,9 @@ class ConnectDevice extends Component<Props> {
|
|||||||
<P>and</P>
|
<P>and</P>
|
||||||
<Button
|
<Button
|
||||||
className="trezor-webusb-button"
|
className="trezor-webusb-button"
|
||||||
text="Check for devices"
|
|
||||||
isWebUsb
|
isWebUsb
|
||||||
/>
|
>Check for devices
|
||||||
|
</Button>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
@ -7,7 +7,7 @@ import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
|||||||
import installers from 'constants/bridge';
|
import installers from 'constants/bridge';
|
||||||
import { Select } from 'components/Select';
|
import { Select } from 'components/Select';
|
||||||
import Link from 'components/Link';
|
import Link from 'components/Link';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import Loader from 'components/Loader';
|
import Loader from 'components/Loader';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
@ -127,8 +127,8 @@ export default class InstallBridge extends Component<Props, State> {
|
|||||||
color: colors.WHITE,
|
color: colors.WHITE,
|
||||||
size: 30,
|
size: 30,
|
||||||
}}
|
}}
|
||||||
text={`Download for ${label}`}
|
>Download for {label}
|
||||||
/>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</DownloadBridgeWrapper>
|
</DownloadBridgeWrapper>
|
||||||
<P>
|
<P>
|
||||||
|
@ -4,7 +4,7 @@ import styled from 'styled-components';
|
|||||||
import TrezorConnect from 'trezor-connect';
|
import TrezorConnect from 'trezor-connect';
|
||||||
import type { TrezorDevice } from 'flowtype';
|
import type { TrezorDevice } from 'flowtype';
|
||||||
import DeviceHeader from 'components/DeviceHeader';
|
import DeviceHeader from 'components/DeviceHeader';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import { isWebUSB } from 'utils/device';
|
import { isWebUSB } from 'utils/device';
|
||||||
import MenuItems from './components/MenuItems';
|
import MenuItems from './components/MenuItems';
|
||||||
import DeviceList from './components/DeviceList';
|
import DeviceList from './components/DeviceList';
|
||||||
@ -116,9 +116,9 @@ class DeviceMenu extends Component<Props> {
|
|||||||
{isWebUSB(transport) && (
|
{isWebUSB(transport) && (
|
||||||
<StyledButton
|
<StyledButton
|
||||||
className="trezor-webusb-button"
|
className="trezor-webusb-button"
|
||||||
text="Check for devices"
|
|
||||||
isWebUsb
|
isWebUsb
|
||||||
/>
|
>Check for devices
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</ButtonWrapper>
|
</ButtonWrapper>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
@ -1,17 +1,36 @@
|
|||||||
/* @flow */
|
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import { bindActionCreators } from 'redux';
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Row = styled.div`
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 48px;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const P = styled.p`
|
||||||
|
padding: 10px 0px;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
const Bootloader = () => (
|
const Bootloader = () => (
|
||||||
<section className="device-settings">
|
<Wrapper>
|
||||||
<div className="row">
|
<Row>
|
||||||
<H2>Your device is in firmware update mode</H2>
|
<H2>Your device is in firmware update mode</H2>
|
||||||
<p>Please re-connect it</p>
|
<P>Please re-connect it</P>
|
||||||
</div>
|
</Row>
|
||||||
</section>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default connect(null, null)(Bootloader);
|
export default connect(null, null)(Bootloader);
|
||||||
|
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import Icon from 'components/Icon';
|
import Icon from 'components/Icon';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
@ -40,7 +40,7 @@ const DeviceSettings = () => (
|
|||||||
<StyledH2>Device settings is under construction</StyledH2>
|
<StyledH2>Device settings is under construction</StyledH2>
|
||||||
<P>Please use Bitcoin wallet interface to change your device settings</P>
|
<P>Please use Bitcoin wallet interface to change your device settings</P>
|
||||||
<a href="https://wallet.trezor.io/">
|
<a href="https://wallet.trezor.io/">
|
||||||
<Button text="Take me to the Bitcoin wallet" />
|
<Button>Take me to the Bitcoin wallet</Button>
|
||||||
</a>
|
</a>
|
||||||
</Row>
|
</Row>
|
||||||
</Section>
|
</Section>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/buttons/Button';
|
||||||
import Paragraph from 'components/Paragraph';
|
import Paragraph from 'components/Paragraph';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
@ -33,7 +33,7 @@ const Initialize = () => (
|
|||||||
<H2>Your device is in not initialized</H2>
|
<H2>Your device is in not initialized</H2>
|
||||||
<StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
|
<StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
|
||||||
<A href="https://wallet.trezor.io/">
|
<A href="https://wallet.trezor.io/">
|
||||||
<Button text="Take me to the Bitcoin wallet" />
|
<Button>Take me to the Bitcoin wallet</Button>
|
||||||
</A>
|
</A>
|
||||||
</Row>
|
</Row>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
Loading…
Reference in New Issue
Block a user