Fixing UI issues after UI server refactor (#5710)

* Self-sufficient secureApi.

* Updating embed.

* Linting issues.

js/src/api/transport/http/http.js

@@ -96,4 +96,8 @@ export default class Http extends JsonRpcBase {
       .then(nextTimeout)
       .catch(nextTimeout);
   }
+
+  set url (url) {
+    this._url = url;
+  }
 }

js/src/api/transport/ws/ws.js

@@ -249,6 +249,10 @@ export default class Ws extends JsonRpcBase {
     });
   }
 
+  set url (url) {
+    this._url = url;
+  }
+
   get token () {
     return this._token;
   }

js/src/embed.js

@@ -64,7 +64,7 @@ class FakeTransport {
 
 class FrameSecureApi extends SecureApi {
   constructor (transport) {
-    super('', null, () => {
+    super(transport.uiUrl, null, () => {
       return transport;
     });
   }
@@ -91,7 +91,11 @@ class FrameSecureApi extends SecureApi {
   }
 }
 
-const api = new FrameSecureApi(window.secureTransport || new FakeTransport());
+const transport = window.secureTransport || new FakeTransport();
+const uiUrl = transport.uiUrl || 'http://127.0.0.1:8180';
+
+transport.uiUrl = uiUrl.replace('http://', '').replace('https://', '');
+const api = new FrameSecureApi(transport);
 
 patchApi(api);
 ContractInstances.create(api);
@@ -104,7 +108,7 @@ store.dispatch(setApi(api));
 window.secureApi = api;
 
 const app = (
-  <ParityBar dapp externalLink={ 'http://127.0.0.1:8180' } />
+  <ParityBar dapp externalLink={ uiUrl } />
 );
 const container = document.querySelector('#container');
 

js/src/index.js

@@ -53,7 +53,6 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 const AUTH_HASH = '#/auth?';
-const parityUrl = process.env.PARITY_URL || '127.0.0.1:8546';
 
 let token = null;
 
@@ -61,7 +60,8 @@ if (window.location.hash && window.location.hash.indexOf(AUTH_HASH) === 0) {
   token = qs.parse(window.location.hash.substr(AUTH_HASH.length)).token;
 }
 
-const api = new SecureApi(parityUrl, token);
+const uiUrl = window.location.host;
+const api = new SecureApi(uiUrl, token);
 
 patchApi(api);
 loadSender(api);

js/src/secureApi.js

@@ -26,14 +26,22 @@ export default class SecureApi extends Api {
   _isConnecting = false;
   _needsToken = false;
   _tokens = [];
+  _uiApi = null;
 
   _dappsUrl = null;
   _wsUrl = null;
+  _url = null;
 
   static getTransport (url, sysuiToken, protocol) {
+    const transportUrl = SecureApi.transportUrl(url, protocol);
+
+    return new Api.Transport.Ws(transportUrl, sysuiToken, false);
+  }
+
+  static transportUrl (url, protocol) {
     const proto = protocol() === 'https:' ? 'wss:' : 'ws:';
 
-    return new Api.Transport.Ws(`${proto}//${url}`, sysuiToken, false);
+    return `${proto}//${url}`;
   }
 
   // Returns a protocol with `:` at the end.
@@ -41,14 +49,16 @@ export default class SecureApi extends Api {
     return window.location.protocol;
   }
 
-  constructor (url, nextToken, getTransport = SecureApi.getTransport, protocol = SecureApi.protocol) {
+  constructor (uiUrl, nextToken, getTransport = SecureApi.getTransport, protocol = SecureApi.protocol) {
     const sysuiToken = store.get('sysuiToken');
-    const transport = getTransport(url, sysuiToken, protocol);
+    const transport = getTransport(uiUrl, sysuiToken, protocol);
 
     super(transport);
 
-    this._wsUrl = url;
     this.protocol = protocol;
+    this._url = uiUrl;
+    this._uiApi = new Api(new Api.Transport.Http(`${this.protocol()}//${this._url}/rpc`, 0), false);
+    this._wsUrl = uiUrl;
     // Try tokens from localStorage, from hash and 'initial'
     this._tokens = uniq([sysuiToken, nextToken, 'initial'])
       .filter((token) => token)
@@ -116,26 +126,6 @@ export default class SecureApi extends Api {
     return this._transport.token;
   }
 
-  /**
-   * Configure the current API with the given values
-   * (`signerPort`, `dappsInterface`, `dappsPort`, ...)
-   */
-  configure (configuration) {
-    const { dappsInterface, dappsPort, signerPort, wsPort } = configuration;
-
-    if (dappsInterface) {
-      this._dappsUrl = `${dappsInterface}:${this._dappsAddress.port}`;
-    }
-
-    if (dappsPort) {
-      this._dappsUrl = `${this.hostname}:${dappsPort}`;
-    }
-
-    if (signerPort || wsPort) {
-      this._wsUrl = `${this.hostname}:${signerPort || wsPort}`;
-    }
-  }
-
   connect () {
     if (this._isConnecting) {
       return;
@@ -189,7 +179,7 @@ export default class SecureApi extends Api {
    * otherwise (HEAD request to the Node)
    */
   isNodeUp () {
-    return fetch(`${this.protocol()}//${this._wsUrl}`, { method: 'HEAD', mode: 'no-cors' })
+    return fetch(`${this.protocol()}//${this._url}/api/ping`, { method: 'HEAD' })
       .then(
         (r) => r.status === 200,
         () => false
@@ -240,7 +230,6 @@ export default class SecureApi extends Api {
         // If correct and valid token, wait until the Node is ready
         // and resolve as connected
         return this._waitUntilNodeReady()
-          .then(() => this._fetchSettings())
           .then(() => true);
       })
       .catch((error) => {
@@ -259,11 +248,16 @@ export default class SecureApi extends Api {
     // Sanitize the token first
     const token = this._sanitiseToken(_token);
 
-    // Update the token in the transport layer
-    this.transport.updateToken(token, false);
-    log.debug('connecting with token', token);
+    const connectPromise = this._fetchSettings()
+      .then(() => {
+        // Update the URL and token in the transport layer
+        this.transport.url = SecureApi.transportUrl(this._wsUrl, this.protocol);
+        this.transport.updateToken(token, false);
 
-    const connectPromise = this.transport.connect()
+        log.debug('connecting with token', token);
+
+        return this.transport.connect();
+      })
       .then(() => {
         log.debug('connected with', token);
 
@@ -318,12 +312,12 @@ export default class SecureApi extends Api {
   _fetchSettings () {
     return Promise
       .all([
-        this.parity.dappsUrl(),
-        this.parity.wsUrl()
+        this._uiApi.parity.dappsUrl(),
+        this._uiApi.parity.wsUrl()
       ])
       .then(([dappsUrl, wsUrl]) => {
         this._dappsUrl = dappsUrl;
-        this._wsUrl = dappsUrl;
+        this._wsUrl = wsUrl;
       });
   }
 

parity/configuration.rs

@@ -762,10 +762,6 @@ impl Configuration {
 	}
 
 	fn ui_hosts(&self) -> Option<Vec<String>> {
-		if self.args.flag_ui_no_validation {
-			return None;
-		}
-
 		self.hosts(&self.args.flag_ui_hosts, &self.ui_interface())
 	}
 
@@ -774,6 +770,10 @@ impl Configuration {
 	}
 
 	fn ws_hosts(&self) -> Option<Vec<String>> {
+		if self.args.flag_ui_no_validation {
+			return None;
+		}
+
 		self.hosts(&self.args.flag_ws_hosts, &self.ws_interface())
 	}
 
@@ -1486,13 +1486,15 @@ mod tests {
 			port: 8180,
 			hosts: Some(vec![]),
 		});
+		assert!(conf0.ws_config().unwrap().hosts.is_some());
 		assert_eq!(conf1.directories().signer, "signer".to_owned());
 		assert_eq!(conf1.ui_config(), UiConfiguration {
 			enabled: true,
 			interface: "127.0.0.1".into(),
 			port: 8180,
-			hosts: None,
+			hosts: Some(vec![]),
 		});
+		assert_eq!(conf1.ws_config().unwrap().hosts, None);
 		assert_eq!(conf2.directories().signer, "signer".to_owned());
 		assert_eq!(conf2.ui_config(), UiConfiguration {
 			enabled: true,
@@ -1500,6 +1502,7 @@ mod tests {
 			port: 3123,
 			hosts: Some(vec![]),
 		});
+		assert!(conf2.ws_config().unwrap().hosts.is_some());
 		assert_eq!(conf3.directories().signer, "signer".to_owned());
 		assert_eq!(conf3.ui_config(), UiConfiguration {
 			enabled: true,
@@ -1507,6 +1510,7 @@ mod tests {
 			port: 8180,
 			hosts: Some(vec![]),
 		});
+		assert!(conf3.ws_config().unwrap().hosts.is_some());
 	}
 
 	#[test]