Add message about running generator online.

fnando · Feb 21, 2018 · 68bfa91 · 68bfa91
1 parent 2f8f5c0
commit 68bfa91
Showing 5 changed files with 88 additions and 18 deletions.
diff --git a/src/index.html b/src/index.html
@@ -6,18 +6,16 @@
   <title>Stellar Paperwallet: Make paper wallets to keep your Stellar addresses offline.</title>
 </head>
 <body>
-  <div class="container">
-    <div id="root">
-      <div class="loading">
-        <div class="center">
-          <img src="./images/logo.svg" alt="Stellar Paperwallet">
-        </div>
+  <div id="root">
+    <div class="loading">
+      <div class="center">
+        <img src="./images/logo.svg" alt="Stellar Paperwallet">
+      </div>
 
-        <div class="spinner">
-          <div class="bounce1"></div>
-          <div class="bounce2"></div>
-          <div class="bounce3"></div>
-        </div>
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
       </div>
     </div>
   </div>

diff --git a/src/scripts/components/App.jsx b/src/scripts/components/App.jsx
@@ -3,14 +3,18 @@ import React from "react";
 import ActionSelector from "./ActionSelector";
 import AppHeader from "./AppHeader";
 import AppFooter from "./AppFooter";
+import LiveSiteChecker from "./LiveSiteChecker";
 
 export default class App extends React.Component {
   render() {
     return (
       <div>
-        <AppHeader />
-        <ActionSelector />
-        <AppFooter />
+        <LiveSiteChecker />
+        <div className="container">
+          <AppHeader />
+          <ActionSelector />
+          <AppFooter />
+        </div>
       </div>
     );
   }

diff --git a/src/scripts/components/LiveSiteChecker.jsx b/src/scripts/components/LiveSiteChecker.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import pkg from "../../../package.json";
+
+export default class LiveSiteChecker extends React.Component {
+  state = {
+    dismissed: false
+  };
+
+  handleDismiss = () => {
+    this.setState({dismissed: true});
+  };
+
+  render() {
+    const {dismissed} = this.state;
+    const runningLive = !!location.protocol.match(/^https?:/);
+    const url = `https://github.com/fnando/stellar-paperwallet/releases/download/v${pkg.version}/stellar-paperwallet.zip`;
+    const skipRendering = dismissed || !runningLive;
+
+    if (skipRendering) {
+      return null;
+    }
+
+    return (
+      <div className="live-site center">
+        <div>
+          <div>
+            You're running this paper wallet generator off of a live website.
+            Even though all code runs on the client-side, is recommended that
+            you <a href={url}>download the zip file</a> and run it locally from your machine.
+          </div>
+          <p className="mb0">
+            <button onClick={this.handleDismiss}>Dismiss</button>
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/styles/_live_site.scss b/src/styles/_live_site.scss
@@ -0,0 +1,23 @@
+.live-site {
+  background: rgba(#08b5e5, .2);
+  padding: 20px;
+  margin-bottom: 125px;
+}
+
+.live-site > div {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.live-site button {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: inherit;
+  font-size: 12px;
+  padding: 5px 20px;
+  cursor: pointer;
+  border: 2px solid #08b5e5;
+  background: #fff;
+  color: #08b5e5;
+  box-shadow: 4px 4px rgba(#08b5e5, .4);
+}
diff --git a/src/styles/stellar-paperwallet.scss b/src/styles/stellar-paperwallet.scss
@@ -5,6 +5,13 @@
 @import "./button";
 @import "./loading";
 @import "./spinner";
+@import "./live_site";
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
 
 code {
   font-family: Hack, monospace;
@@ -17,13 +24,11 @@ code {
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   line-height: 1.4;
+  color: #666;
 
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
-
-  color: #666;
-  padding: 50px;
 }
 
 a {
@@ -51,6 +56,7 @@ a {
 }
 
 .container {
+  padding: 50px;
   max-width: 600px;
   margin: 0 auto;
 }
@@ -263,7 +269,7 @@ button + button {
   }
 
   h1 {
-    font-size: 25px;
+    font-size: 20px;
   }
 
   body,