1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00

address verification different UI

This commit is contained in:
Szymon Lesisz 2018-05-22 16:33:25 +02:00
parent b5a78be39b
commit 5282c22bc0
4 changed files with 47 additions and 4 deletions

View File

@ -82,9 +82,9 @@ class Modal extends Component<Props> {
case "ButtonRequest_SignTx" :
component = (<ConfirmSignTx { ...this.props } />)
break;
case "ButtonRequest_Address" :
component = (<ConfirmAddress { ...this.props } />)
break;
// case "ButtonRequest_Address" :
// component = (<ConfirmAddress { ...this.props } />)
// break;
case "ButtonRequest_PassphraseType" :
component = (<PassphraseType { ...this.props } />)
break;

View File

@ -74,12 +74,21 @@ const _render = (props: Props, state: ComponentState): React$Element<string> =>
);
}
let ver = null;
if (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address') {
className = 'address verifying';
address = account.address;
// ver = (<div className="confirm">Confirm address on TREZOR</div>)
button = (<div className="confirm">{ account.network } account #{ (account.index + 1) }</div>);
}
return (
<section className="receive">
{ deviceStatusNotification }
<h2>Receive Ethereum or tokens</h2>
<div className={ className }>
{ ver }
<div className="value">
{ address }
</div>

View File

@ -21,6 +21,7 @@ type OwnProps = { }
type StateProps = BaseStateProps & {
receive: $ElementType<State, 'receive'>,
modal: $ElementType<State, 'modal'>,
}
type DispatchProps = BaseDispatchProps & {
@ -35,7 +36,8 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
devices: state.connect.devices,
accounts: state.accounts,
discovery: state.discovery,
receive: state.receive
receive: state.receive,
modal: state.modal,
};
}

View File

@ -6,6 +6,17 @@
display: flex;
flex-wrap: wrap;
.verify {
position: absolute;
background: @color_white;
border: 2px solid @color_green_primary;
left: 0;
right: 0;
top: 0;
margin: 0px 48px;
z-index: 10001; // bigger than modal container
}
.value {
// same as input (inputs.less)
font-size: 14px;
@ -85,6 +96,27 @@
}
}
&.verifying {
.value {
background: @color_white;
z-index: 10001; // bigger than modal container
border-color: @color_green_primary;
border-width: 2px;
transform: translate(-1px, -1px);
}
.confirm {
display: block;
position: relative;
background: @color_white;
z-index: 10001;
width: 100%;
padding: 6px 12px;
transform: translate(-1px, -1px);
margin: 0px 2px;
}
}
}