Web Based Dapps (#3956)

* Dapps web

Conflicts:
	dapps/src/apps/fetcher.rs
	dapps/src/handlers/fetch.rs

* Rewriting fetch

* Parity-wide fetch service

* Obey the limits and support cancellation.

* Removing temporary files.

* Actually use Fetch for dapps

* Re-implementing file fetching to avoid temporary files.

* Serde to 0.8.19

* Fixing content & dapps fetch

* Serving web content and injecting scripts

* Don't wait for old content, start a new download

* Supporting timeouts and query

* Simple GUI for the browser

* Proxy tokens validation

* Recovering from invalid web-based requests

* Remember last visisted URL

* Removing unused variables

* Addressing review comments

* Setting default account in web3

* Adding WebBrowser dapp to the list

* Actually prune old entries when generating new token

js/src/views/Web/web.js

@@ -0,0 +1,118 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity 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.
+
+// Parity 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 Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import store from 'store';
+
+import AddressBar from './AddressBar';
+
+import styles from './web.css';
+
+const LS_LAST_ADDRESS = '_parity::webLastAddress';
+
+export default class Web extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  state = {
+    displayedUrl: this.lastAddress(),
+    isLoading: true,
+    token: null,
+    url: this.lastAddress()
+  };
+
+  componentDidMount () {
+    this.context.api.signer.generateWebProxyAccessToken().then(token => {
+      this.setState({ token });
+    });
+  }
+
+  address () {
+    const { dappsUrl } = this.context.api;
+    const { url, token } = this.state;
+    const path = url.replace(/:/g, '').replace(/\/\//g, '/');
+
+    return `${dappsUrl}/web/${token}/${path}/`;
+  }
+
+  lastAddress () {
+    return store.get(LS_LAST_ADDRESS) || 'https://mkr.market';
+  }
+
+  render () {
+    const { displayedUrl, isLoading, token } = this.state;
+    const address = this.address();
+
+    if (!token) {
+      return (
+        <div className={ styles.wrapper }>
+          <h1 className={ styles.loading }>
+            Requesting access token...
+          </h1>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.wrapper }>
+        <AddressBar
+          className={ styles.url }
+          isLoading={ isLoading }
+          onChange={ this.handleUpdateUrl }
+          onRefresh={ this.handleOnRefresh }
+          url={ displayedUrl }
+        />
+        <iframe
+          className={ styles.frame }
+          frameBorder={ 0 }
+          name={ name }
+          onLoad={ this.handleIframeLoad }
+          sandbox='allow-forms allow-same-origin allow-scripts'
+          scrolling='auto'
+          src={ address } />
+      </div>
+    );
+  }
+
+  handleUpdateUrl = (url) => {
+    store.set(LS_LAST_ADDRESS, url);
+
+    this.setState({
+      isLoading: true,
+      displayedUrl: url,
+      url: url
+    });
+  };
+
+  handleOnRefresh = (ev) => {
+    const { displayedUrl } = this.state;
+    const hasQuery = displayedUrl.indexOf('?') > 0;
+    const separator = hasQuery ? '&' : '?';
+
+    this.setState({
+      isLoading: true,
+      url: `${displayedUrl}${separator}t=${Date.now()}`
+    });
+  };
+
+  handleIframeLoad = (ev) => {
+    this.setState({
+      isLoading: false
+    });
+  };
+}
+