Small UI fixes (#3966)

* Load dapp visibility from localStorage

* Align MethodDecoding address svg properly

* Consolidate svg & img classes overrides

* improve isNullAddress check

* readOnly for null display

* disabled || readOnly

js/src/ui/Form/InputAddress/inputAddress.js

@@ -14,13 +14,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import util from '~/api/util';
 import { nodeOrStringProptype } from '~/util/proptypes';
+import { isNullAddress } from '~/util/validation';
 
 import IdentityIcon from '../../IdentityIcon';
 import Input from '../Input';
@@ -69,7 +69,7 @@ class InputAddress extends Component {
     classes.push(!icon ? styles.inputEmpty : styles.input);
 
     const containerClasses = [ styles.container ];
-    const nullName = value && new BigNumber(value).eq(0) ? 'null' : null;
+    const nullName = (disabled || readOnly) && isNullAddress(value) ? 'null' : null;
 
     if (small) {
       containerClasses.push(styles.small);

js/src/ui/IdentityIcon/identityIcon.js

@@ -14,13 +14,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '~/api/util/identity';
-import { ContractIcon } from '../Icons';
+import { isNullAddress } from '~/util/validation';
+import { CancelIcon, ContractIcon } from '../Icons';
 
 import styles from './identityIcon.css';
 
@@ -108,19 +108,20 @@ class IdentityIcon extends Component {
       return (
         <ContractIcon
           className={ classes }
+          data-address-img
           style={ {
             background: '#eee',
             height: size,
             width: size
           } } />
       );
-    } else if (new BigNumber(address).eq(0)) {
+    } else if (isNullAddress(address)) {
       return (
-        <div
+        <CancelIcon
           className={ classes }
+          data-address-img
           style={ {
             background: '#333',
-            display: 'inline-block',
             height: size,
             width: size
           } } />
@@ -130,6 +131,7 @@ class IdentityIcon extends Component {
     return (
       <img
         className={ classes }
+        data-address-img
         height={ size }
         width={ size }
         src={ iconsrc } />

js/src/ui/IdentityName/identityName.js

@@ -14,11 +14,11 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import { isNullAddress } from '~/util/validation';
 import ShortenedHash from '../ShortenedHash';
 
 const defaultName = 'UNNAMED';
@@ -43,7 +43,7 @@ class IdentityName extends Component {
       return null;
     }
 
-    const nullName = new BigNumber(address || 0).eq(0) ? 'null' : null;
+    const nullName = isNullAddress(address) ? 'null' : null;
     const addressFallback = nullName || (shorten ? (<ShortenedHash data={ address } />) : address);
     const fallback = unknown ? defaultName : addressFallback;
     const isUuid = account && account.name === account.uuid;

js/src/ui/MethodDecoding/methodDecoding.css

@@ -75,7 +75,7 @@
   font-family: inherit !important;
 }
 
-.inputs img {
+.inputs [data-address-img] {
   position: absolute;
   top: -16px;
 }

js/src/util/constants.js

@@ -19,8 +19,11 @@ const DEFAULT_GASPRICE = '20000000000';
 
 const MAX_GAS_ESTIMATION = '50000000';
 
+const NULL_ADDRESS = '0000000000000000000000000000000000000000';
+
 export {
   DEFAULT_GAS,
   DEFAULT_GASPRICE,
-  MAX_GAS_ESTIMATION
+  MAX_GAS_ESTIMATION,
+  NULL_ADDRESS
 };

js/src/util/validation.js

@@ -18,6 +18,8 @@ import BigNumber from 'bignumber.js';
 
 import util from '~/api/util';
 
+import { NULL_ADDRESS } from './constants';
+
 export const ERRORS = {
   invalidAddress: 'address is an invalid network address',
   invalidAmount: 'the supplied amount should be a valid positive number',
@@ -174,3 +176,11 @@ export function validateUint (value) {
     valueError
   };
 }
+
+export function isNullAddress (address) {
+  if (address && address.substr(0, 2) === '0x') {
+    return isNullAddress(address.substr(2));
+  }
+
+  return address === NULL_ADDRESS;
+}

js/src/views/Dapps/dappsStore.js

@@ -46,6 +46,7 @@ export default class DappsStore {
   constructor (api) {
     this._api = api;
 
+    this.readDisplayApps();
     this.loadExternalOverlay();
     this.loadApps();
     this.subscribeToChanges();