mirror of https://github.com/trezor/trezor-wallet
Vladimir Volek
6 years ago
parent
c758f13072
commit
ac9725613b
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
Loading…
Reference in new issue