About Popup

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Configs for the gaia-6002 testnet @faboweb
 * Introduced addressbook to store found peers and to select nodes round robin @faboweb
 * Tutorial how to start a local node @faboweb
+* Added versions to Preference Page @okwme
 
 ### Changes
 

app/src/renderer/components/common/PagePreferences.vue

@@ -2,6 +2,13 @@
 tm-page(title="Preferences")
   div(slot="menu"): tool-bar
 
+  tm-modal(:close="setAbout", v-if="showAbout")
+    div(slot="title") About Cosmos Voyager
+    .about-popup
+      img( src="~@/assets/images/onboarding/step-0.png")
+      div Voyager v{{versionVoyager}}
+      div Cosmos SDK v{{versionSDK}}
+
   tm-part(title='Settings')
     tm-list-item(type="field" title="Select network to connect to")
       tm-field#select-network(
@@ -41,12 +48,20 @@ tm-page(title="Preferences")
         type='button'
         @click.native="signOut"
         value='Sign Out')
+  tm-part(title="About")
+    tm-list-item(type="field"
+      title="Version Information")
+      tm-btn#toggle-onboarding(
+        @click.native="setAbout"
+        value="Show Versions"
+        icon="info")
 </template>
 
 <script>
-import { mapGetters } from "vuex"
+import { mapGetters, mapMutations } from "vuex"
 import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
 import ToolBar from "common/TmToolBar"
+import TmModal from "common/TmModal"
 
 export default {
   name: "page-preferences",
@@ -56,12 +71,25 @@ export default {
     TmListItem,
     TmPage,
     TmPart,
-    ToolBar
+    ToolBar,
+    TmModal
   },
   computed: {
-    ...mapGetters(["user", "themes", "onboarding", "mockedConnector"])
+    ...mapGetters([
+      "user",
+      "themes",
+      "onboarding",
+      "mockedConnector",
+      "config"
+    ]),
+    showAbout() {
+      return this.config.showAbout
+    }
   },
+
   data: () => ({
+    versionVoyager: null,
+    versionSDK: null,
     themeSelectActive: null,
     themeSelectOptions: [
       {
@@ -88,8 +116,11 @@ export default {
   mounted() {
     this.networkSelectActive = this.mockedConnector ? "mock" : "live"
     this.themeSelectActive = this.themes.active
+    this.versionSDK = process.env.GAIA_VERSION.split("-").shift()
+    this.versionVoyager = process.env.VOYAGER_VERSION
   },
   methods: {
+    ...mapMutations(["setAbout"]),
     signOut() {
       this.$store.dispatch("signOut")
       this.$store.commit("notifySignOut")
@@ -121,3 +152,9 @@ export default {
   }
 }
 </script>
+<style lang="stylus">
+  .about-popup
+    text-align center
+    img
+      max-width 150px
+</style>

app/src/renderer/components/common/TmModal.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div(:class='cssClass' @click="close()")
+div(:class='cssClass' @click.self="close()")
   .tm-modal-container
     header.tm-modal-header
       .tm-modal-icon(v-if='icon')

app/src/renderer/vuex/modules/config.js

@@ -5,6 +5,7 @@ export default ({ commit }) => {
     maxValidators: 100,
     activeMenu: "",
     desktop: false,
+    showAbout: false,
     devMode:
       process.env.PREVIEW !== undefined
         ? JSON.parse(process.env.PREVIEW)
@@ -24,6 +25,14 @@ export default ({ commit }) => {
     }
   }
   const mutations = {
+    setAbout(state, value) {
+      // when triggered from a button the click event is value, when triggered from the modal the value is undefined
+      // value is present so it can also be explicit as a replacement from the electron menu
+      state.showAbout =
+        typeof value === "object" || typeof value === "undefined"
+          ? !state.showAbout
+          : value
+    },
     setDevMode(state, value) {
       state.devMode = value
     },

tasks/runner.js

@@ -1,5 +1,5 @@
 "use strict"
-
+const fs = require("fs")
 const config = require("../app/src/config")
 const spawn = require("child_process").spawn
 const path = require("path")
@@ -66,11 +66,18 @@ module.exports = async function(networkPath) {
   console.log(
     `${BLUE}Starting electron...\n  (network path: ${networkPath})\n${END}`
   )
+  const packageJSON = require("../package.json")
+  const voyagerVersion = packageJSON.version
+  const gaiaVersion = fs
+    .readFileSync(networkPath + "basecoindversion.txt")
+    .toString()
   let env = Object.assign(
     {},
     {
       NODE_ENV: "development",
-      COSMOS_NETWORK: networkPath
+      COSMOS_NETWORK: networkPath,
+      GAIA_VERSION: gaiaVersion,
+      VOYAGER_VERSION: voyagerVersion
     },
     process.env
   )

test/unit/helpers/genesis_mock.js

@@ -3,6 +3,9 @@ import fs from "fs-extra"
 let testRoot = "./test/unit/tmp/test_root/"
 
 function mockGenesis() {
+  process.env.COSMOS_NETWORK = "./networks/gaiaiaiaiaiaia/"
+  process.env.GAIA_VERSION = "1.2.3-asdf"
+  process.env.VOYAGER_VERSION = "3.6.9"
   process.env.COSMOS_HOME = testRoot
   fs.ensureFileSync(testRoot + "genesis.json")
   fs.writeFileSync(

test/unit/specs/components/common/PagePreferences.spec.js

@@ -70,6 +70,49 @@ describe("PagePreferences", () => {
   it("switches mocked mode", () => {
     wrapper.vm.networkSelectActive = "mock"
     wrapper.vm.setMockedConnector()
+    expect(wrapper.vm.mockedConnector).toBe(true)
     expect(store.dispatch).toHaveBeenCalledWith("setMockedConnector", true)
+
+    wrapper.vm.networkSelectActive = "live"
+    wrapper.vm.setMockedConnector()
+    expect(wrapper.vm.mockedConnector).toBe(false)
+    expect(store.dispatch).toHaveBeenCalledWith("setMockedConnector", true)
+
+    // dont update without switch
+    wrapper.vm.setMockedConnector()
+    expect(wrapper.vm.mockedConnector).toBe(false)
+  })
+
+  it("switches mocked mode again", async () => {
+    let test = instance.mount(PagePreferences, {
+      getters: {
+        mockedConnector: () => true
+      }
+    })
+    wrapper = test.wrapper
+    store = test.store
+    await store.dispatch("signIn", {
+      account: "default",
+      password: "1234567890"
+    })
+    wrapper.vm.networkSelectActive = "live"
+    wrapper.vm.setMockedConnector()
+    expect(store.dispatch).toHaveBeenCalledWith("setMockedConnector", false)
+  })
+
+  it("shows versions", () => {
+    expect(wrapper.vm.$el).toMatchSnapshot()
+    wrapper.vm.setAbout()
+    wrapper.update()
+    expect(store.state.config.showAbout).toBe(true)
+    expect(wrapper.vm.$el.outerHTML).toContain(
+      "Voyager v" + wrapper.vm.versionVoyager
+    )
+    expect(wrapper.vm.$el.outerHTML).toContain(
+      "Cosmos SDK v" + wrapper.vm.versionSDK.split("-").shift()
+    )
+    expect(wrapper.vm.$el).toMatchSnapshot()
+    wrapper.vm.setAbout(false)
+    expect(store.state.config.showAbout).toBe(false)
   })
 })