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}
openethereum · Nov 4, 2016 · c2e85dc · c2e85dc
1 parent f9f37f1
commit c2e85dc
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 29 deletions.
diff --git a/js/src/modals/Transfer/Details/details.js b/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) {

diff --git a/js/src/redux/providers/imagesReducer.js b/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({

diff --git a/js/src/redux/providers/status.js b/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));
   }

diff --git a/js/src/secureApi.js b/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;
   }

diff --git a/js/src/ui/Balance/balance.js b/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

diff --git a/js/src/ui/IdentityIcon/identityIcon.js b/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) {
-      this.setState({ iconsrc });
+    if (images[_address]) {
+      this.setState({ iconsrc: `${api.dappsUrl}${images[_address]}` });
       return;
     }
 

diff --git a/js/src/views/Dapp/dapp.js b/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')
-      ? `${dapphost}/${name}.html`
-      : `http://127.0.0.1:8080/${name}/`;
+    const { dappsUrl } = this.context.api;
+
+    let src = `${dappsUrl}/${name}/`;
+    if (type === 'builtin') {
+      const dapphost = process.env.NODE_ENV === 'production'
+        ? `${dappsUrl}/ui`
+        : '';
+      src = `${dapphost}/${name}.html`;
+    }
 
     return (
       <iframe

diff --git a/js/src/views/Dapps/Summary/summary.js b/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
-      ? <img src={ app.image || `http://127.0.0.1:8080/${app.id}/${app.iconUrl}` } className={ styles.image } />
-      : <div className={ styles.image }>&nbsp;</div>;
+    let 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 }>

diff --git a/js/src/views/Dapps/registry.js b/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(`${parityNode}/api/apps`)
+  return fetch(`${getHost(api)}/api/apps`)
     .then((response) => {
       return response.ok
         ? response.json()
@@ -134,8 +137,8 @@ export function fetchAvailable (api) {
     });
 }
 
-export function fetchManifest (app, contentHash) {
-  return fetch(`${parityNode}/${contentHash}/manifest.json`)
+export function fetchManifest (api, app, contentHash) {
+  return fetch(`${getHost(api)}/${contentHash}/manifest.json`)
     .then((response) => {
       return response.ok
         ? response.json()

diff --git a/js/src/views/Settings/Proxy/proxy.js b/js/src/views/Settings/Proxy/proxy.js
@@ -14,16 +14,21 @@
 // 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';
 
 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>