mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Pin modal partly refactored
This commit is contained in:
parent
221f988fef
commit
80ac6bcee5
@ -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;
|
@ -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;
|
@ -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) {
|
||||
|
@ -1,6 +1,4 @@
|
||||
/* @flow */
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import raf from 'raf';
|
||||
|
29
src/components/modals/passphrase/Type/index.js
Normal file
29
src/components/modals/passphrase/Type/index.js
Normal 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;
|
24
src/components/modals/pin/Invalid/index.js
Normal file
24
src/components/modals/pin/Invalid/index.js
Normal 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;
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user