add connection toggling

frontend/src/components/App.js

@@ -5,6 +5,7 @@ import {connect} from "react-redux";
 import LoadingBar from "react-redux-loading"; //importing the loading bar given by react-redux-loading
 import Dashboard from "./Dashboard";
 import NewMessage from "./NewMessage";
+import ConnectionToggle from "./ConnectionToggle";
 
 class App extends Component {
 
@@ -16,7 +17,11 @@ class App extends Component {
                 <div className="container">
                   {this.props.loading === true ? null : (
                       <div>
-                          <NewMessage />
+                          <div>
+                              <div style={{float: "left", position: "absolute"}}><ConnectionToggle /></div>
+                              <div style={{float: "center"}}><NewMessage /></div>
+                          </div>
+
                           <Dashboard />
                       </div>
                   )}

frontend/src/components/ConnectionToggle.js

@@ -0,0 +1,44 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+import {toggleConnection} from "../utils/api";
+
+class ConnectionToggle extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            devnetConnect: false,
+            toggleDisabled: false
+        };
+
+        // This binding is necessary to make `this` work in the callback
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick() {
+        let newConnect = !this.state.devnetConnect;
+        this.setState(() => ({
+            toggleDisabled: true,
+            devnetConnect: newConnect
+        }));
+        toggleConnection(newConnect).finally(() => {
+            this.setState(state => ({
+                toggleDisabled: false
+            }));
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <label className="switch">
+                    <input type="checkbox" onClick={this.handleClick} disabled={this.state.toggleDisabled}/>
+                    <span className="slider round"/>
+                </label>
+                <p><b>{this.state.devnetConnect ? 'DevNet' : 'localhost'}</b></p>
+            </div>
+
+        );
+    }
+}
+
+export default connect()(ConnectionToggle);

frontend/src/index.css

@@ -169,3 +169,65 @@ li {
   font-size: 20px;
   color: #c3392a;
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

frontend/src/utils/api.js

@@ -2,6 +2,18 @@ import * as fluence from "fluence";
 
 let session = fluence.directConnect("localhost", 30000, 1);
 
+export async function toggleConnection(devnet, appId = 412) {
+    if (devnet) {
+        fluence.connect("0xeFF91455de6D4CF57C141bD8bF819E5f873c1A01", appId).then((s) => {
+            session = s;
+            return s
+        })
+    } else {
+        session = fluence.directConnect("localhost", 30000, 1);
+        Promise.resolve(session)
+    }
+}
+
 export function getMessages () {
     let request = {
         action: "Fetch"