1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +00:00

Pin modal partly refactored

This commit is contained in:
Vladimir Volek 2018-08-30 18:01:17 +02:00
parent 221f988fef
commit 80ac6bcee5
7 changed files with 68 additions and 50 deletions

View File

@ -1,19 +0,0 @@
/* @flow */
import React from 'react';
import type { Props } from './index';
const InvalidPin = (props: Props) => {
if (!props.modal.opened) return null;
const { device } = props.modal;
return (
<div className="pin">
<h3>Entered PIN for { device.label } is not correct</h3>
<p>Retrying...</p>
</div>
);
};
export default InvalidPin;

View File

@ -1,20 +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;
return (
<div className="confirm-tx">
<div className="header">
<h3>Complete the action on { device.label } device</h3>
</div>
</div>
);
};
export default Confirmation;

View File

@ -17,10 +17,11 @@ 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 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 ConfirmSignTx from 'components/modals/confirm/SignTx';
import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
@ -52,7 +53,6 @@ export type Props = StateProps & DispatchProps;
const duration = 300;
const Fade = ({ children, ...props }) => (
<CSSTransition
{...props}
@ -90,7 +90,9 @@ class Modal extends Component<Props> {
render() {
if (!this.props.modal.opened) return null;
const { opened, windowType } = this.props.modal;
const { opened } = this.props.modal;
const windowType = UI.REQUEST_PIN;
let component = null;
switch (windowType) {

View File

@ -1,6 +1,4 @@
/* @flow */
import React, { Component } from 'react';
import raf from 'raf';

View File

@ -0,0 +1,29 @@
import React from 'react';
import Icon from 'components/Icon';
import colors from 'config/colors';
import icons from 'config/icons';
import styled from 'styled-components';
import { H3 } from 'components/Heading';
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
`;
const Header = styled.div``;
const Confirmation = (props) => {
if (!props.modal.opened) return null;
const { device } = props.modal;
return (
<Wrapper>
<Header>
<Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
<H3>Complete the action on { device.label } device</H3>
</Header>
</Wrapper>
);
};
export default Confirmation;

View File

@ -0,0 +1,24 @@
import React from 'react';
import styled from 'styled-components';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import type { Props } from './index';
const Wrapper = styled.div`
padding: 24px 48px;
`;
const InvalidPin = (props: Props) => {
if (!props.modal.opened) return null;
const { device } = props.modal;
return (
<Wrapper>
<H3>Entered PIN for { device.label } is not correct</H3>
<P isSmaller>Retrying...</P>
</Wrapper>
);
};
export default InvalidPin;

View File

@ -2,13 +2,17 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import colors from 'config/colors';
import type { Props } from './index';
type State = {
pin: string;
}
const Wrapper = styled.div``;
const InputRow = styled.div``;
export default class Pin extends Component<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
@ -111,7 +115,7 @@ export default class Pin extends Component<Props, State> {
const { pin } = this.state;
return (
<div className="pin">
<Wrapper className="pin">
{/* <button className="close-modal transparent"></button> */}
<h3>Enter { device.label } PIN</h3>
<p>The PIN layout is displayed on your TREZOR.</p>
@ -139,7 +143,7 @@ export default class Pin extends Component<Props, State> {
<div><button className="submit" type="button" onClick={event => onPinSubmit(pin)}>Enter PIN</button></div>
<p>Not sure how PIN works? <a className="green" href="http://doc.satoshilabs.com/trezor-user/enteringyourpin.html" target="_blank" rel="noreferrer noopener">Learn more</a></p>
</div>
</Wrapper>
);
}
}