Add warning to web browser and fix links. (#6232)

js/src/views/Home/Urls/urls.css

@@ -47,6 +47,7 @@
         color: rgb(0, 151, 167);
         overflow: hidden;
         text-overflow: ellipsis;
+        cursor: pointer;
       }
 
       .timestamp {

js/src/views/Home/Urls/urls.js

@@ -127,7 +127,7 @@ export default class Urls extends Component {
     this.props.store.gotoUrl(url);
 
     if (extensionStore.hasExtension) {
-      window.open(this.props.store.currentUrl, '_blank');
+      window.open(url, '_blank');
     } else {
       router.push('/web');
     }

js/src/views/Web/store.js

@@ -64,12 +64,9 @@ export default class Store {
     if (!hasProtocol.test(url)) {
       url = `https://${url}`;
     }
-
+    this.setNextUrl(url);
     return this.generateToken(url).then(() => {
-      transaction(() => {
-        this.setNextUrl(url);
-        this.setCurrentUrl(this.nextUrl);
-      });
+      this.setCurrentUrl(this.nextUrl);
     });
   }
 

js/src/views/Web/web.css

@@ -21,10 +21,39 @@
   width: 100%;
 }
 
+:root .warningClose {
+  text-align: right;
+  a {
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
+.warning {
+  color: #fff;
+  background: #f80;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 50%;
+  padding: 1.5em;
+  z-index: 100;
+  animation: fadein 0.3s;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .loading {
   text-align: center;
   margin-top: 5em;
-  color: #999;
+  color: #444;
   font-size: 2em;
 }
 

js/src/views/Web/web.js

@@ -35,6 +35,10 @@ export default class Web extends Component {
 
   store = Store.get(this.context.api);
 
+  state = {
+    isWarningDismissed: false
+  }
+
   componentDidMount () {
     this.store.gotoUrl(this.props.params.url);
   }
@@ -83,10 +87,36 @@ export default class Web extends Component {
           scrolling='auto'
           src={ encodedPath }
         />
+        { this.renderWarning() }
+      </div>
+    );
+  }
+
+  renderWarning () {
+    if (this.state.isWarningDismissed) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.warning }>
+        <p>
+          WARNING: The web browser dapp is not safe as a general purpose browser.
+          Make sure to only visit web3-enabled sites that you trust.
+          Do not use it to browse web2.0 and never log in to any service - web3 dapps should not require that.
+        </p>
+        <div className={ styles.warningClose }>
+          <a onClick={ this.dismissWarning }>Okay!</a>
+        </div>
       </div>
     );
   }
 
+  dismissWarning = () => {
+    this.setState({
+      isWarningDismissed: true
+    });
+  };
+
   iframeOnLoad = () => {
     this.store.setLoading(false);
   };