Use ethcore_dappsPort when constructing URLs (#3139)

* Upon connect, retrieve the available api ports

* Update dapps to load from dappsPort

* Update dapps summary with dappsPort

* Allow proxy to use dappsPort

* Replace /api/ping with HEAD /

* Dynamic port for available apps

* Retrieve content images with dappsPort

* Fix /

* Transfer token dropdown image fix

* IdentityIcon loads images via contentHash

* Update apps fetch to cater for dev & prod

* DRY up 127.0.0.1:${dappsPort} with ${dappsUrl}

js/src/modals/Transfer/Details/details.js

@@ -123,7 +123,13 @@ export default class Details extends Component {
       .map((balance, index) => {
         const token = balance.token;
         const isEth = index === 0;
-        const imagesrc = token.image || images[token.address] || imageUnknown;
+        let imagesrc = token.image;
+        if (!imagesrc) {
+          imagesrc =
+            images[token.address]
+              ? `${api.dappsUrl}${images[token.address]}`
+              : imageUnknown;
+        }
         let value = 0;
 
         if (isEth) {

js/src/redux/providers/imagesReducer.js

@@ -17,8 +17,6 @@
 import { handleActions } from 'redux-actions';
 import { bytesToHex } from '../../api/util/format';
 
-import { parityNode } from '../../environment';
-
 const ZERO = '0x0000000000000000000000000000000000000000000000000000000000000000';
 
 const initialState = {
@@ -28,7 +26,7 @@ const initialState = {
 export function hashToImageUrl (hashArray) {
   const hash = hashArray ? bytesToHex(hashArray) : ZERO;
 
-  return hash === ZERO ? null : `${parityNode}/api/content/${hash.substr(2)}`;
+  return hash === ZERO ? null : `/api/content/${hash.substr(2)}`;
 }
 
 export default handleActions({

js/src/redux/providers/status.js

@@ -16,8 +16,6 @@
 
 import { statusBlockNumber, statusCollection, statusLogs } from './statusActions';
 
-import { parityNode } from '../../environment';
-
 export default class Status {
   constructor (store, api) {
     this._api = api;
@@ -65,7 +63,7 @@ export default class Status {
       setTimeout(this._pollPing, timeout);
     };
 
-    fetch(`${parityNode}/api/ping`, { method: 'GET' })
+    fetch('/', { method: 'HEAD' })
       .then((response) => dispatch(!!response.ok))
       .catch(() => dispatch(false));
   }

js/src/secureApi.js

@@ -25,6 +25,8 @@ export default class SecureApi extends Api {
     this._isConnecting = true;
     this._connectState = 0;
     this._needsToken = false;
+    this._dappsPort = 8080;
+    this._signerPort = 8180;
 
     this._followConnection();
   }
@@ -50,7 +52,7 @@ export default class SecureApi extends Api {
       case 0:
         if (isConnected) {
           this._isConnecting = false;
-          return this.setToken();
+          return this.connectSuccess();
         } else if (lastError) {
           this.updateToken('initial', 1);
         }
@@ -79,7 +81,7 @@ export default class SecureApi extends Api {
       case 2:
         if (isConnected) {
           this._isConnecting = false;
-          return this.setToken();
+          return this.connectSuccess();
         } else if (lastError) {
           return setManual();
         }
@@ -89,12 +91,38 @@ export default class SecureApi extends Api {
     nextTick();
   }
 
+  connectSuccess () {
+    this.setToken();
+
+    Promise
+      .all([
+        this.ethcore.dappsPort(),
+        this.ethcore.signerPort()
+      ])
+      .then(([dappsPort, signerPort]) => {
+        this._dappsPort = dappsPort.toNumber();
+        this._signerPort = signerPort.toNumber();
+      });
+  }
+
   updateToken (token, connectedState = 0) {
     this._connectState = connectedState;
     this._transport.updateToken(token.replace(/[^a-zA-Z0-9]/g, ''));
     this._followConnection();
   }
 
+  get dappsPort () {
+    return this._dappsPort;
+  }
+
+  get dappsUrl () {
+    return `http://127.0.0.1:${this._dappsPort}`;
+  }
+
+  get signerPort () {
+    return this._signerPort;
+  }
+
   get isConnecting () {
     return this._isConnecting;
   }

js/src/ui/Balance/balance.js

@@ -47,7 +47,13 @@ class Balance extends Component {
         const value = token.format
           ? new BigNumber(balance.value).div(new BigNumber(token.format)).toFormat(3)
           : api.util.fromWei(balance.value).toFormat(3);
-        const imagesrc = token.image || images[token.address] || unknownImage;
+        let imagesrc = token.image;
+        if (!imagesrc) {
+          imagesrc =
+            images[token.address]
+              ? `${api.dappsUrl}${images[token.address]}`
+              : unknownImage;
+        }
 
         return (
           <div

js/src/ui/IdentityIcon/identityIcon.js

@@ -59,10 +59,9 @@ class IdentityIcon extends Component {
   updateIcon (_address, images) {
     const { api } = this.context;
     const { button, inline, tiny } = this.props;
-    const iconsrc = images[_address];
 
-    if (iconsrc) {
+    if (images[_address]) {
-      this.setState({ iconsrc });
+      this.setState({ iconsrc: `${api.dappsUrl}${images[_address]}` });
       return;
     }
 

js/src/views/Dapp/dapp.js

@@ -18,18 +18,26 @@ import React, { Component, PropTypes } from 'react';
 
 import styles from './dapp.css';
 
-const dapphost = process.env.NODE_ENV === 'production' ? 'http://127.0.0.1:8080/ui' : '';
-
 export default class Dapp extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
   static propTypes = {
     params: PropTypes.object
   };
 
   render () {
     const { name, type } = this.props.params;
-    const src = (type === 'builtin')
+    const { dappsUrl } = this.context.api;
-      ? `${dapphost}/${name}.html`
+
-      : `http://127.0.0.1:8080/${name}/`;
+    let src = `${dappsUrl}/${name}/`;
+    if (type === 'builtin') {
+      const dapphost = process.env.NODE_ENV === 'production'
+        ? `${dappsUrl}/ui`
+        : '';
+      src = `${dapphost}/${name}.html`;
+    }
 
     return (
       <iframe

js/src/views/Dapps/Summary/summary.js

@@ -32,6 +32,7 @@ export default class Summary extends Component {
   }
 
   render () {
+    const { dappsPort } = this.context.api;
     const { app } = this.props;
 
     if (!app) {
@@ -46,9 +47,13 @@ export default class Summary extends Component {
     }
 
     const url = `/app/${type}/${app.url || app.contentHash || app.id}`;
-    const image = app.image || app.iconUrl
+    let image = <div className={ styles.image }>&nbsp;</div>;
-      ? <img src={ app.image || `http://127.0.0.1:8080/${app.id}/${app.iconUrl}` } className={ styles.image } />
+
-      : <div className={ styles.image }>&nbsp;</div>;
+    if (app.image) {
+      image = <img src={ `http://127.0.0.1:${dappsPort}${app.image}` } className={ styles.image } />;
+    } else if (app.iconUrl) {
+      image = <img src={ `http://127.0.0.1:${dappsPort}/${app.id}/${app.iconUrl}` } className={ styles.image } />;
+    }
 
     return (
       <Container className={ styles.container }>

js/src/views/Dapps/registry.js

@@ -16,8 +16,6 @@
 
 import BigNumber from 'bignumber.js';
 
-import { parityNode } from '../../environment';
-
 const builtinApps = [
   {
     id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
@@ -76,6 +74,12 @@ const networkApps = [
   }
 ];
 
+function getHost (api) {
+  return process.env.NODE_ENV === 'production'
+    ? api.dappsUrl
+    : '';
+}
+
 export function fetchAvailable (api) {
   // TODO: Since we don't have an extensive GithubHint app, get the value somehow
   // RESULT: 0x22cd66e1b05882c0fa17a16d252d3b3ee2238ccbac8153f69a35c83f02ca76ee
@@ -84,8 +88,7 @@ export function fetchAvailable (api) {
   //   .then((sha3) => {
   //     console.log('archive', sha3);
   //   });
-
+  return fetch(`${getHost(api)}/api/apps`)
-  return fetch(`${parityNode}/api/apps`)
     .then((response) => {
       return response.ok
         ? response.json()
@@ -134,8 +137,8 @@ export function fetchAvailable (api) {
     });
 }
 
-export function fetchManifest (app, contentHash) {
+export function fetchManifest (api, app, contentHash) {
-  return fetch(`${parityNode}/${contentHash}/manifest.json`)
+  return fetch(`${getHost(api)}/${contentHash}/manifest.json`)
     .then((response) => {
       return response.ok
         ? response.json()

js/src/views/Settings/Proxy/proxy.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 
 import { Container, ContainerTitle } from '../../../ui';
 
@@ -22,8 +22,13 @@ import layout from '../layout.css';
 import styles from './proxy.css';
 
 export default class Proxy extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
   render () {
-    const proxyurl = 'http://127.0.0.1:8080/proxy/proxy.pac';
+    const { dappsUrl } = this.context.api;
+    const proxyurl = `${dappsUrl}/proxy/proxy.pac`;
 
     return (
       <Container>