address verification different UI

src/js/components/modal/index.js

@@ -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;

src/js/components/wallet/account/receive/Receive.js

@@ -73,6 +73,14 @@ const _render = (props: Props, state: ComponentState): React$Element<string> =>
             </Tooltip>
         );
     }
+
+    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">
@@ -80,6 +88,7 @@ const _render = (props: Props, state: ComponentState): React$Element<string> =>
             <h2>Receive Ethereum or tokens</h2>
             
             <div className={ className }>
+                { ver }
                 <div className="value">
                     { address }
                 </div>

src/js/components/wallet/account/receive/index.js

@@ -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,
     };
 }
 

src/styles/receive.less

@@ -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;
+            }
+        }
+
         
     }