Web view with web3.site support (#4313)

* Web-domain based routing

* Support base32-encoded urls

* Proper support for non-domain based routing

* Handling long domain names

* Switching to web3.site

* Encoding for *.web3.site urls

* Add DappUrlInput component

* Update Web views with store

* Update spec description

* Update spec description

* edited url does not allow in-place store edits

* Fixing dapps access on 127.0.0.1:8180

* Use /web/<hash> urls for iframe

* Redirecting to parity.web3.site

* Disabling the redirection

js/src/ui/Form/DappUrlInput/dappUrlInput.js

@@ -0,0 +1,61 @@
+// Copyright 2015-2017 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 keycode from 'keycode';
+import React, { Component, PropTypes } from 'react';
+
+export default class DappUrlInput extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onGoto: PropTypes.func.isRequired,
+    onRestore: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { className, url } = this.props;
+
+    return (
+      <input
+        className={ className }
+        onChange={ this.onChange }
+        onKeyDown={ this.onKeyDown }
+        type='text'
+        value={ url }
+      />
+    );
+  }
+
+  onChange = (event) => {
+    this.props.onChange(event.target.value);
+  };
+
+  onKeyDown = (event) => {
+    switch (keycode(event)) {
+      case 'esc':
+        this.props.onRestore();
+        break;
+
+      case 'enter':
+        this.props.onGoto();
+        break;
+
+      default:
+        break;
+    }
+  };
+}

js/src/ui/Form/DappUrlInput/dappUrlInput.spec.js

@@ -0,0 +1,70 @@
+// Copyright 2015-2017 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 { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import DappUrlInput from './';
+
+let component;
+let onChange;
+let onGoto;
+let onRestore;
+
+function render (props = { url: 'http://some.url' }) {
+  onChange = sinon.stub();
+  onGoto = sinon.stub();
+  onRestore = sinon.stub();
+
+  component = shallow(
+    <DappUrlInput
+      onChange={ onChange }
+      onGoto={ onGoto }
+      onRestore={ onRestore }
+      { ...props }
+    />
+  );
+
+  return component;
+}
+
+describe('ui/Form/DappUrlInput', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  describe('events', () => {
+    describe('onChange', () => {
+      it('calls the onChange callback as provided', () => {
+        component.simulate('change', { target: { value: 'testing' } });
+        expect(onChange).to.have.been.calledWith('testing');
+      });
+    });
+
+    describe('onKeyDown', () => {
+      it('calls the onGoto callback on enter', () => {
+        component.simulate('keyDown', { keyCode: 13 });
+        expect(onGoto).to.have.been.called;
+      });
+
+      it('calls the onRestor callback on esc', () => {
+        component.simulate('keyDown', { keyCode: 27 });
+        expect(onRestore).to.have.been.called;
+      });
+    });
+  });
+});

js/src/ui/Form/DappUrlInput/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 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/>.
+
+export default from './dappUrlInput';

js/src/ui/Form/index.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import AddressSelect from './AddressSelect';
+import DappUrlInput from './DappUrlInput';
 import FormWrap from './FormWrap';
 import Input from './Input';
 import InputAddress from './InputAddress';
@@ -31,6 +32,7 @@ import TypedInput from './TypedInput';
 export default from './form';
 export {
   AddressSelect,
+  DappUrlInput,
   FormWrap,
   Input,
   InputAddress,

js/src/ui/index.js

@@ -35,7 +35,7 @@ import DappIcon from './DappIcon';
 import Editor from './Editor';
 import Errors from './Errors';
 import Features, { FEATURES, FeaturesStore } from './Features';
-import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
+import Form, { AddressSelect, DappUrlInput, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
 import GasPriceEditor from './GasPriceEditor';
 import GasPriceSelector from './GasPriceSelector';
 import Icons from './Icons';
@@ -80,8 +80,9 @@ export {
   ContextProvider,
   CopyToClipboard,
   CurrencySymbol,
-  DappIcon,
   DappCard,
+  DappIcon,
+  DappUrlInput,
   Editor,
   Errors,
   FEATURES,