Testnet banner (#362)

* Scaffolding for banner

* Layout one

* Hide on homepage.

* Invert conditional

frontend/.env.example

@@ -21,3 +21,6 @@ PROPOSAL_STAKING_AMOUNT=0.025
 
 # Normally production runs with SSL, this disables that
 DISABLE_SSL=true
+
+# Uncomment if running on testnet
+# TESTNET=true

frontend/client/components/Header/index.tsx

@@ -59,6 +59,12 @@ export default class Header extends React.Component<Props, State> {
           </div>
 
           <HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer} />
+
+          {process.env.TESTNET && (
+            <div className="Header-testnet">
+              <span>Testnet</span>
+            </div>
+          )}
         </div>
       </div>
     );

frontend/client/components/Header/style.less

@@ -45,6 +45,7 @@
     flex-grow: 1;
     text-align: center;
     opacity: 0.7;
+    z-index: 222;
 
     &:hover,
     &:focus {
@@ -121,4 +122,34 @@
       }
     }
   }
+
+  &-testnet {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    height: 1.4rem;
+    line-height: 1.4rem;
+    padding: 0 0.5rem;
+    transform: translate(-50%, 50%);
+    text-align: center;
+    border-radius: 1rem;
+    box-shadow: 0 0 0 1px rgba(#000, 0.1);
+    color: rgba(#000, 0.6);
+    background: #FFF;
+    text-transform: uppercase;
+    letter-spacing: 0.9rem;
+    font-size: 0.65rem;
+    font-weight: bold;
+    transition: opacity @header-transition ease;
+    z-index: 111;
+
+    > span {
+      display: inline-block;
+      transform: translateX(0.42rem);
+    }
+
+    .is-transparent & {
+      opacity: 0;
+    }
+  }
 }

frontend/config/env.js

@@ -53,13 +53,14 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
 module.exports = () => {
   const raw = {
     BACKEND_URL: process.env.BACKEND_URL || 'http://localhost:5000',
-    EXPLORER_URL: process.env.EXPLORER_URL || 'https://chain.so/zcash/',
+    EXPLORER_URL: process.env.EXPLORER_URL || 'https://explorer.zcha.in/',
     NODE_ENV: process.env.NODE_ENV || 'development',
     PORT: process.env.PORT || 3000,
     PROPOSAL_STAKING_AMOUNT: process.env.PROPOSAL_STAKING_AMOUNT,
     PUBLIC_HOST_URL: process.env.PUBLIC_HOST_URL,
     SENTRY_DSN: process.env.SENTRY_DSN || null,
     SENTRY_RELEASE: process.env.SENTRY_RELEASE || undefined,
+    TESTNET: process.env.TESTNET || false,
   };
 
   // Stringify all values so we can feed into Webpack DefinePlugin