arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

SignTx modal refactored

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-30 16:04:15 +02:00
parent c758f13072
commit ac9725613b
6 changed files with 61 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/modals/DuplicateDevice.js
View File

@ -1,111 +0,0 @@
/* @flow */
import React, { Component } from 'react';
import { getDuplicateInstanceNumber } from 'reducers/utils';
import type { Props } from './index';
type State = {
defaultName: string;
instance: number;
instanceName: ?string;
isUsed: boolean;
}
export default class DuplicateDevice extends Component<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
state: State;
input: ?HTMLInputElement;
constructor(props: Props) {
super(props);
const device = props.modal.opened ? props.modal.device : null;
if (!device) return;
const instance = getDuplicateInstanceNumber(props.devices, device);
this.state = {
defaultName: `${device.label} (${instance.toString()})`,
instance,
instanceName: null,
isUsed: false,
};
}
keyboardHandler(event: KeyboardEvent): void {
if (event.keyCode === 13 && !this.state.isUsed) {
event.preventDefault();
this.submit();
}
}
componentDidMount(): void {
// one time autofocus
if (this.input) this.input.focus();
this.keyboardHandler = this.keyboardHandler.bind(this);
window.addEventListener('keydown', this.keyboardHandler, false);
}
componentWillUnmount(): void {
window.removeEventListener('keydown', this.keyboardHandler, false);
}
onNameChange = (value: string): void => {
let isUsed: boolean = false;
if (value.length > 0) {
isUsed = (this.props.devices.find(d => d.instanceName === value) !== undefined);
}
this.setState({
instanceName: value.length > 0 ? value : null,
isUsed,
});
}
submit() {
if (!this.props.modal.opened) return;
const extended: Object = { instanceName: this.state.instanceName, instance: this.state.instance };
this.props.modalActions.onDuplicateDevice({ ...this.props.modal.device, ...extended });
}
render() {
if (!this.props.modal.opened) return null;
const { device } = this.props.modal;
const { onCancel, onDuplicateDevice } = this.props.modalActions;
const {
defaultName,
instanceName,
isUsed,
} = this.state;
return (
<div className="duplicate">
<button className="close-modal transparent" onClick={onCancel} />
<h3>Clone { device.label }?</h3>
<p>This will create new instance of device which can be used with different passphrase</p>
<div className="row">
<label>Instance name</label>
<input
type="text"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
className={isUsed ? 'not-valid' : null}
placeholder={defaultName}
ref={(element) => { this.input = element; }}
onChange={event => this.onNameChange(event.currentTarget.value)}
defaultValue={instanceName}
/>
{ isUsed ? <span className="error">Instance name is already in use</span> : null }
</div>
<button disabled={isUsed} onClick={event => this.submit()}>Create new instance</button>
<button className="white" onClick={onCancel}>Cancel</button>
</div>
);
}
}

45
src/components/modals/confirm/Address/index.js Normal file
View File

@ -0,0 +1,45 @@
/* @flow */
import React, { Component } from 'react';
import { findAccount } from 'reducers/AccountsReducer';
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 ConfirmAddress = (props: Props) => {
const {
account,
network,
} = props.selectedAccount;
if (!account || !network) return null;
return (
<div className="confirm-address">
<div className="header">
<h3>Confirm address on TREZOR</h3>
<p>Please compare your address on device with address shown bellow.</p>
</div>
<div className="content">
<p>{ account.address }</p>
<label>{ network.symbol } account #{ (account.index + 1) }</label>
</div>
</div>
);
};
export default ConfirmAddress;

11
src/components/modals/ConfirmSignTx/index.js → src/components/modals/confirm/SignTx/index.js
View File

@ -2,13 +2,17 @@ import React from 'react';
import colors from 'config/colors';
import styled from 'styled-components';
import P from 'components/Paragraph';
import Icon from 'components/Icon';
import icons from 'config/icons';
import { H3 } from 'components/Heading';
const Wrapper = styled.div`
width: 390px;
padding: 12px 10px;
`;
const Header = styled.div`
padding: 24px 48px;
`;
const Content = styled.div`
@ -18,6 +22,7 @@ const Content = styled.div`
`;
const Label = styled.div`
padding-top: 5px;
font-size: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -30,19 +35,19 @@ const ConfirmSignTx = (props) => {
amount,
address,
currency,
total,
selectedFeeLevel,
} = props.sendForm;
return (
<Wrapper>
<Header>
<Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
<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>Send</Label>
<P>{`${amount} ${currency}` }</P>
<Label>To</Label>
<P>{ address }</P>
<Label>Fee</Label>

26
src/components/modals/ConfirmAddress.js → src/components/modals/confirm/UnverifiedAddress/index.js
View File

@ -6,29 +6,7 @@ import { findAccount } from 'reducers/AccountsReducer';
import type { Props } from './index';
const ConfirmAddress = (props: Props) => {
const {
account,
network,
} = props.selectedAccount;
if (!account || !network) return null;
return (
<div className="confirm-address">
<div className="header">
<h3>Confirm address on TREZOR</h3>
<p>Please compare your address on device with address shown bellow.</p>
</div>
<div className="content">
<p>{ account.address }</p>
<label>{ network.symbol } account #{ (account.index + 1) }</label>
</div>
</div>
);
};
export default ConfirmAddress;
export class ConfirmUnverifiedAddress extends Component<Props> {
class ConfirmUnverifiedAddress extends Component<Props> {
keyboardHandler: (event: KeyboardEvent) => void;
keyboardHandler(event: KeyboardEvent): void {
@ -99,3 +77,5 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
);
}
}
export default ConfirmUnverifiedAddress;

13
src/components/modals/index.js
View File

@ -5,8 +5,7 @@ import { connect } from 'react-redux';
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 } from 'react-transition-group';
import { UI } from 'trezor-connect';
@ -14,18 +13,17 @@ import { default as ModalActions } from 'actions/ModalActions';
import { default as ReceiveActions } from 'actions/ReceiveActions';
import * as RECEIVE from 'actions/constants/receive';
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 'components/modals/Pin';
import InvalidPin from 'components/modals/InvalidPin';
import Passphrase from 'components/modals/Passphrase';
import PassphraseType from 'components/modals/PassphraseType';
import ConfirmSignTx from 'components/modals/ConfirmSignTx';
import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modals/ConfirmAddress';
import ConfirmSignTx from 'components/modals/confirm/SignTx';
import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
import ForgetDevice from 'components/modals/device/Forget';
import RememberDevice from 'components/modals/device/Remember';
@ -93,7 +91,7 @@ class Modal extends Component<Props> {
if (!this.props.modal.opened) return null;
const { opened } = this.props.modal;
const windowType = CONNECT.TRY_TO_DUPLICATE;
const windowType = RECEIVE.REQUEST_UNVERIFIED;
let component = null;
switch (windowType) {
@ -109,7 +107,6 @@ class Modal extends Component<Props> {
case 'ButtonRequest_SignTx':
component = (<ConfirmSignTx {...this.props} />);
break;
// case "ButtonRequest_Address" :
case 'ButtonRequest_PassphraseType':
component = (<PassphraseType {...this.props} />);
break;

32
src/styles/modal.less
View File

@ -12,38 +12,6 @@
font-size: 12px;
}
.confirm-tx {
width: 390px; // address overflow
.header {
padding: 24px 48px;
&:before {
.icomoon-T1;
font-size: 52px;
color: @color_text_secondary;
}
h3 {
margin: 0;
}
}
.content {
border-top: 1px solid @color_divider;
background: @color_main;
padding: 24px 48px;
label {
font-size: 10px;
color: @color_text_secondary;
}
p {
font-size: 12px;
font-weight: 400;
color: @color_text_primary;
}
}
}
.confirm-address {
width: 390px; // address overflow