Update and fix wasm code again, add cli check to .gitlab-ci.yml (#917)

* Add cli to wasm tests, update and bring closer to the substrate browser code

* Remove ws.js

* Update cli/src/browser.rs

Co-Authored-By: Pierre Krieger <pierre.krieger1708@gmail.com>

* Update browser.rs

Co-authored-by: Gavin Wood <gavin@parity.io>
Co-authored-by: Pierre Krieger <pierre.krieger1708@gmail.com>

polkadot/.gitlab-ci.yml

@@ -159,6 +159,7 @@ check-web-wasm:                    &test
     - time cargo build --locked --target=wasm32-unknown-unknown --manifest-path primitives/Cargo.toml
     - time cargo build --locked --target=wasm32-unknown-unknown --manifest-path rpc/Cargo.toml
     - time cargo build --locked --target=wasm32-unknown-unknown --manifest-path statement-table/Cargo.toml
+    - time cargo build --locked --target=wasm32-unknown-unknown --manifest-path cli/Cargo.toml --no-default-features --features browser
     - sccache -s
 
 

polkadot/cli/browser-demo/index.html

@@ -6,7 +6,6 @@
 	<link rel="shortcut icon" href="/favicon.png" />
 	<script type="module">
 import { start_client, default as init } from './pkg/polkadot_cli.js';
-import ws from './ws.js';
 
 function log(msg) {
 	document.getElementsByTagName('body')[0].innerHTML += msg + '\n';
@@ -16,10 +15,13 @@ async function start() {
 	log('Loading WASM');
 	await init('./pkg/polkadot_cli_bg.wasm');
 	log('Successfully loaded WASM');
+	log('Fetching chain spec');
+	const chain_spec_response = await fetch("https://raw.githubusercontent.com/paritytech/polkadot/master/service/res/westend.json");
+	const chain_spec_text = await chain_spec_response.text();
 
 	// Build our client.
 	log('Starting client');
-	let client = await start_client('westend', ws());
+	let client = await start_client(chain_spec_text, 'info');
 	log('Client started');
 
 	client.rpcSubscribe('{"method":"chain_subscribeNewHead","params":[],"id":1,"jsonrpc":"2.0"}',

polkadot/cli/browser-demo/ws.js

@@ -1,148 +0,0 @@
-// Copyright 2019-2020 Parity Technologies (UK) Ltd.
-// This file is part of Substrate.
-
-// Substrate is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Substrate is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Substrate.  If not, see <http://www.gnu.org/licenses/>.
-
-export default () => {
-	return {
-		dial: dial,
-		listen_on: (addr) => {
-			let err = new Error("Listening on WebSockets is not possible from within a browser");
-			err.name = "NotSupportedError";
-			throw err;
-		},
-	};
-}
-
-/// Turns a string multiaddress into a WebSockets string URL.
-// TODO: support dns addresses as well
-const multiaddr_to_ws = (addr) => {
-	let parsed = addr.match(/^\/(ip4|ip6|dns4|dns6)\/(.*?)\/tcp\/(.*?)\/(ws|wss|x-parity-ws\/(.*)|x-parity-wss\/(.*))$/);
-	let proto = 'wss';
-	if (parsed[4] == 'ws' || parsed[4] == 'x-parity-ws') {
-		proto = 'ws';
-	}
-	let url = decodeURIComponent(parsed[5] || parsed[6] || '');
-	if (parsed != null) {
-		if (parsed[1] == 'ip6') {
-			return proto + "://[" + parsed[2] + "]:" + parsed[3] + url;
-		} else {
-			return proto + "://" + parsed[2] + ":" + parsed[3] + url;
-		}
-	}
-
-	let err = new Error("Address not supported: " + addr);
-	err.name = "NotSupportedError";
-	throw err;
-}
-
-// Attempt to dial a multiaddress.
-const dial = (addr) => {
-	let ws = new WebSocket(multiaddr_to_ws(addr));
-	let reader = read_queue();
-
-	return new Promise((resolve, reject) => {
-		// TODO: handle ws.onerror properly after dialing has happened
-		ws.onerror = (ev) => reject(ev);
-		ws.onmessage = (ev) => reader.inject_blob(ev.data);
-		ws.onclose = () => reader.inject_eof();
-		ws.onopen = () => resolve({
-			read: (function*() { while(ws.readyState == 1) { yield reader.next(); } })(),
-			write: (data) => {
-				if (ws.readyState == 1) {
-					ws.send(data);
-					return promise_when_ws_finished(ws);
-				} else {
-					return Promise.reject("WebSocket is closed");
-				}
-			},
-			shutdown: () => {},
-			close: () => ws.close()
-		});
-	});
-}
-
-// Takes a WebSocket object and returns a Promise that resolves when bufferedAmount is 0.
-const promise_when_ws_finished = (ws) => {
-	if (ws.bufferedAmount == 0) {
-		return Promise.resolve();
-	}
-
-	return new Promise((resolve, reject) => {
-		setTimeout(function check() {
-			if (ws.bufferedAmount == 0) {
-				resolve();
-			} else {
-				setTimeout(check, 100);
-			}
-		}, 2);
-	})
-}
-
-// Creates a queue reading system.
-const read_queue = () => {
-	// State of the queue.
-	let state = {
-		// Array of promises resolving to `ArrayBuffer`s, that haven't been transmitted back with
-		// `next` yet.
-		queue: new Array(),
-		// If `resolve` isn't null, it is a "resolve" function of a promise that has already been
-		// returned by `next`. It should be called with some data.
-		resolve: null,
-	};
-
-	return {
-		// Inserts a new Blob in the queue.
-		inject_blob: (blob) => {
-			if (state.resolve != null) {
-				var resolve = state.resolve;
-				state.resolve = null;
-
-				var reader = new FileReader();
-				reader.addEventListener("loadend", () => resolve(reader.result));
-				reader.readAsArrayBuffer(blob);
-			} else {
-				state.queue.push(new Promise((resolve, reject) => {
-					var reader = new FileReader();
-					reader.addEventListener("loadend", () => resolve(reader.result));
-					reader.readAsArrayBuffer(blob);
-				}));
-			}
-		},
-
-		// Inserts an EOF message in the queue.
-		inject_eof: () => {
-			if (state.resolve != null) {
-				var resolve = state.resolve;
-				state.resolve = null;
-				resolve(null);
-			} else {
-				state.queue.push(Promise.resolve(null));
-			}
-		},
-
-		// Returns a Promise that yields the next entry as an ArrayBuffer.
-		next: () => {
-			if (state.queue.length != 0) {
-				return state.queue.shift(0);
-			} else {
-				if (state.resolve !== null)
-					throw "Internal error: already have a pending promise";
-				return new Promise((resolve, reject) => {
-					state.resolve = resolve;
-				});
-			}
-		}
-	};
-};

polkadot/cli/src/browser.rs

@@ -14,50 +14,40 @@
 // You should have received a copy of the GNU General Public License
 // along with Substrate.  If not, see <http://www.gnu.org/licenses/>.
 
-use crate::ChainSpec;
 use log::info;
 use wasm_bindgen::prelude::*;
-use service::IsKusama;
+use browser_utils::{
+	Client,
+	browser_configuration, set_console_error_panic_hook, init_console_log,
+};
+use std::str::FromStr;
 
 /// Starts the client.
-///
-/// You must pass a libp2p transport that supports .
 #[wasm_bindgen]
-pub async fn start_client(chain_spec: String, wasm_ext: browser_utils::Transport) -> Result<browser_utils::Client, JsValue> {
+pub async fn start_client(chain_spec: String, log_level: String) -> Result<Client, JsValue> {
-	start_inner(chain_spec, wasm_ext)
+	start_inner(chain_spec, log_level)
 		.await
 		.map_err(|err| JsValue::from_str(&err.to_string()))
 }
 
-async fn start_inner(chain_spec: String, wasm_ext: browser_utils::Transport) -> Result<browser_utils::Client, Box<dyn std::error::Error>> {
+async fn start_inner(chain_spec: String, log_level: String) -> Result<Client, Box<dyn std::error::Error>> {
-	browser_utils::set_console_error_panic_hook();
+	set_console_error_panic_hook();
-	browser_utils::init_console_log(log::Level::Info)?;
+	init_console_log(log_level.parse()?)?;
 
-	let chain_spec = ChainSpec::from(&chain_spec)
+	let chain_spec = service::PolkadotChainSpec::from_json_bytes(chain_spec.as_bytes().to_vec())
-		.ok_or_else(|| format!("Chain spec: {:?} doesn't exist.", chain_spec))?
-		.load()
 		.map_err(|e| format!("{:?}", e))?;
-	let config = browser_utils::browser_configuration(wasm_ext, chain_spec)
+	let config = browser_configuration(chain_spec).await?;
-		.await?;
 
 	info!("Polkadot browser node");
 	info!("  version {}", config.full_version());
-	info!("  by Parity Technologies, 2017-2019");
+	info!("  by Parity Technologies, 2017-2020");
-	if let Some(chain_spec) = &config.chain_spec {
+	info!("Chain specification: {}", config.expect_chain_spec().name());
-		info!("Chain specification: {}", chain_spec.name());
-		if chain_spec.is_kusama() {
-			info!("----------------------------");
-			info!("This chain is not in any way");
-			info!("      endorsed by the       ");
-			info!("     KUSAMA FOUNDATION      ");
-			info!("----------------------------");
-		}
-	}
 	info!("Node name: {}", config.name);
 	info!("Roles: {:?}", config.roles);
 
 	// Create the service. This is the most heavy initialization step.
-	let service = service::kusama_new_light(config).map_err(|e| format!("{:?}", e))?;
+	let service = service::kusama_new_light(config)
+		.map_err(|e| format!("{:?}", e))?;
 
 	Ok(browser_utils::start_client(service))
 }