From c89bac7465587746aa30bd77397ec1908a45d885 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Wed, 14 Nov 2018 15:23:18 +0100
Subject: [PATCH 01/27] ModalPropose

---
 .../components/governance/ModalPropose.vue    | 183 ++++++++++++++++++
 .../components/governance/PageGovernance.vue  |  38 +++-
 .../components/governance/PageProposal.vue    |   5 +-
 .../governance/PageProposalsNewText.vue       | 114 -----------
 .../components/governance/TableProposals.vue  |   1 -
 .../governance/PageProposalsNewText.spec.js   |  97 ----------
 6 files changed, 221 insertions(+), 217 deletions(-)
 create mode 100644 app/src/renderer/components/governance/ModalPropose.vue
 delete mode 100644 app/src/renderer/components/governance/PageProposalsNewText.vue
 delete mode 100644 test/unit/specs/components/governance/PageProposalsNewText.spec.js

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
new file mode 100644
index 0000000000..b40e2b5afb
--- /dev/null
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -0,0 +1,183 @@
+<template lang="pug">
+  .modal-propose#modal-propose(v-click-outside="close")
+    .modal-propose-header
+      img.icon(class='modal-propose-atom' src="~assets/images/cosmos-logo.png")
+      span.tm-modal-title Create Proposal
+      .tm-modal-icon.tm-modal-close#closeBtn(@click="close()")
+        i.material-icons close
+
+    tm-form-group.page-proposal-form-group(:error="$v.title.$error"
+      field-id="title" field-label="Proposal Title")
+      tm-field#title(
+        type="text"
+        placeholder="Proposal title"
+        v-model="title"
+        v-focus)
+
+    tm-form-group.page-proposal-form-group(:error="$v.description.$error"
+      field-id="description" field-label="Proposal Body")
+      tm-field#description(
+        type="textarea"
+        placeholder="Write your proposal here..."
+        v-model="description")
+
+    tm-form-group.modal-propose-form-group(
+      field-id='amount'
+      field-label='Amount'
+    )
+      tm-field#denom(
+        type="text"
+        :placeholder="denom"
+        readonly)
+
+      tm-field#amount(
+        type="number"
+        :max="balance"
+        :min="0"
+        step="any"
+        v-model="amount"
+        v-focus)
+
+    .modal-propose-footer
+      tm-btn#submit-deposit(
+        @click.native="onPropose"
+        :disabled="$v.$invalid"
+        color="primary"
+        value="Create"
+        size="lg")
+</template>
+
+<script>
+import { mapGetters } from "vuex"
+import ClickOutside from "vue-click-outside"
+import { minLength, maxLength, required, between } from "vuelidate/lib/validators"
+import { isEmpty, trim } from "lodash"
+import Modal from "common/TmModal"
+import { TmBtn, TmField, TmFormGroup } from "@tendermint/ui"
+
+const isValid = type =>
+  type === `Text` ||
+  type === `ParameterChange` ||
+  type === `SoftwareUpgrade`
+
+const notBlank = text =>
+  !isEmpty(trim(text))
+
+export default {
+  name: `modal-propose`,
+  props: [`denom`],
+  computed: {
+    // TODO: get coin denom from governance params
+    ...mapGetters([`wallet`]),
+    balance() {
+      // TODO: refactor to get the selected coin when multicooin deposit is enabled
+      if (!this.wallet.balancesLoading && !!this.wallet.balances.length) {
+        let balance = this.wallet.balances.find(
+          coin => coin.denom === this.denom
+        )
+        if (balance) return parseFloat(balance.amount)
+      }
+      return 0
+    }
+  },
+  components: {
+    Modal,
+    TmBtn,
+    TmField,
+    TmFormGroup
+  },
+  data: () => ({
+    titleMinLength: 10,
+    titleMaxLength: 254,
+    descriptionMinLength: 10,
+    descriptionMaxLength: 40000,
+    title: ``,
+    description: ``,
+    proposal_type: `Text`,
+    amount: 0
+  }),
+  validations() {
+    return {
+      title: {
+        required,
+        minLength(x) => minLength(this.titleMinLength)(x),
+        maxLength(x) => maxLength(this.titleMaxLength)(x),
+        notBlank
+      },
+      description: {
+        required,
+        minLength(x) =>minLength(this.descriptionMinLength)(x),
+        maxLength(x) => maxLength(this.descriptionMaxLength)(x),
+        notBlank
+      },
+      proposal_type: {
+        isValid
+      },
+      amount: {
+        required,
+        between: between(
+          0.0000000001,
+          this.balance > 0 ? this.balance : 0.0000000001
+        )
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit(`update:showModalPropose`, false)
+    },
+    onDeposit() {
+      this.$emit(`createProposal`, { amount: this.amount })
+      this.close()
+    }
+  },
+  directives: {
+    ClickOutside
+  }
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+.modal-propose
+  background var(--app-nav)
+  display flex
+  flex-direction column
+  height 50%
+  justify-content space-between
+  left 50%
+  padding 2rem
+  position fixed
+  top 50%
+  width 40%
+  z-index z(modal)
+
+  &-header
+    align-items center
+    display flex
+
+  &-atom
+    height 4rem
+    width 4rem
+
+  &-form-group
+    display block
+    padding 0
+
+  #amount
+    margin-top -32px
+
+  #denom
+    border none
+    margin-left 80%
+    text-align right
+    width 72px
+
+  &-footer
+    display flex
+    justify-content flex-end
+
+    button
+      margin-left 1rem
+</style>
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index 907919166d..ad683aae44 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -2,6 +2,7 @@
 tm-page(data-title='Governance').governance
   template(slot="menu-body")
     tm-balance(:tabs="tabs")
+    tm-btn#propose-btn(value="Create Proposal" color="primary" @click.native="onPropose")
 
   div(slot="menu"): vm-tool-bar
     router-link(to="/governance/proposals/new" exact v-tooltip.bottom="'New Proposal'")
@@ -10,7 +11,12 @@ tm-page(data-title='Governance').governance
       i.search.material-icons search
 
   modal-search(type="proposals")
-
+  modal-propose(
+    v-if="showModalPropose"
+    v-on:createProposal="propose"
+    :showModalVote.sync="showModalVote"
+    :denom="bondingDenom.toLowerCase()"
+  )
   router-view
 </template>
 
@@ -18,6 +24,7 @@ tm-page(data-title='Governance').governance
 import { mapGetters } from "vuex"
 import DataEmptySearch from "common/TmDataEmptySearch"
 import ModalSearch from "common/TmModalSearch"
+import ModalPropose from "./ModalPropose"
 import VmToolBar from "common/VmToolBar"
 import TmBalance from "common/TmBalance"
 import { TmPage, TmDataEmpty, TmDataLoading } from "@tendermint/ui"
@@ -29,16 +36,41 @@ export default {
     TmDataEmpty,
     DataEmptySearch,
     ModalSearch,
+    ModalPropose,
     TmPage,
     VmToolBar
   },
   computed: {
-    ...mapGetters([`config`, `proposals`, `filters`])
+    // TODO: get min deposit denom from gov params
+    ...mapGetters([`proposals`, `filters`, `bondingDenom`])
   },
   data: () => ({
-    tabs: [`Proposals`]
+    tabs: [`Proposals`],
+    showModalPropose: false
   }),
   methods: {
+    onPropose() {
+      this.showModalPropose = true
+    },
+    async propose({ title, description, proposal_type, initial_deposit }) {
+      try {
+        this.$store.dispatch(`submitProposal`, {
+          title,
+          description,
+          proposal_type,
+          initial_deposit
+        })
+        this.$store.commit(`notify`, {
+          title: `Successful proposal submission!`,
+          body: `You have successfully submitted a new ${this.proposal_type.toLowercase()} proposal`
+        })
+      } catch ({ message }) {
+        this.$store.commit(`notifyError`, {
+          title: `Error while submitting a new ${this.proposal_type.toLowercase()} proposal`,
+          body: message
+        })
+      }
+    },
     setSearch(bool = !this.filters[`proposals`].search.visible) {
       this.$store.commit(`setSearchVisible`, [`proposals`, bool])
     }
diff --git a/app/src/renderer/components/governance/PageProposal.vue b/app/src/renderer/components/governance/PageProposal.vue
index c95ef26610..dd98374b15 100644
--- a/app/src/renderer/components/governance/PageProposal.vue
+++ b/app/src/renderer/components/governance/PageProposal.vue
@@ -47,10 +47,11 @@ tm-page(data-title='Proposal')
 
     modal-deposit(
       v-if="showModalDeposit"
-      v-on:castVote="deposit"
-      :showModalVote.sync="showModalVote"
+      v-on:submitDeposit="deposit"
+      :showModalDeposit.sync="showModalDeposit"
       :proposalId="proposal.proposal_id"
       :proposalTitle="proposal.title"
+      :denom="bondingDenom.toLowerCase()"
     )
 
     modal-vote(
diff --git a/app/src/renderer/components/governance/PageProposalsNewText.vue b/app/src/renderer/components/governance/PageProposalsNewText.vue
deleted file mode 100644
index 800d0fc7d5..0000000000
--- a/app/src/renderer/components/governance/PageProposalsNewText.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template lang="pug">
-tm-page(data-title="Text Proposal")
-  template(slot="menu-body")
-    tm-balance
-
-  div(slot="menu"): vm-tool-bar
-
-  tm-form-struct(:submit="onSubmit")
-    tm-form-group(:error="$v.fields.title.$error"
-      field-id='proposal-title' field-label='Proposal Title')
-      tm-field#proposal-title(
-        type="text"
-        placeholder="Proposal Title"
-        v-model="fields.title")
-      tm-form-msg(name='Proposal Title' type='required'
-        v-if='!$v.fields.title.required')
-      tm-form-msg(name='Proposal Title' type='length'
-        :min='titleMinLength' :max='titleMaxLength'
-        v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    tm-form-group(:error="$v.fields.body.$error"
-      field-id='proposal-body' field-label='Proposal Body')
-      tm-field#proposal-body(
-        type="textarea"
-        placeholder="Write your proposal here..."
-        v-model="fields.body")
-      tm-form-msg(name='Proposal Body' type='required'
-        v-if='!$v.fields.body.required')
-      tm-form-msg(name='Proposal Body' type='length'
-        :min='bodyMinLength' :max='bodyMaxLength'
-        v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
-    div(slot="footer")
-      div
-      tm-btn(icon="send" value="Propose" type="submit")
-</template>
-
-<script>
-import TmBalance from "common/TmBalance"
-import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import {
-  TmBtn,
-  TmFormGroup,
-  TmFormStruct,
-  TmPage,
-  TmField,
-  TmFormMsg
-} from "@tendermint/ui"
-
-import VmToolBar from "common/VmToolBar"
-export default {
-  name: `page-proposals-text`,
-  components: {
-    TmBalance,
-    TmBtn,
-    TmField,
-    TmFormGroup,
-    TmFormMsg,
-    TmFormStruct,
-    TmPage,
-    VmToolBar
-  },
-  data: () => ({
-    titleMinLength: 10,
-    titleMaxLength: 254,
-    bodyMinLength: 10,
-    bodyMaxLength: 40000,
-    fields: {
-      title: ``,
-      body: ``
-    }
-  }),
-  methods: {
-    onSubmit() {
-      this.$v.$touch()
-      if (!this.$v.$error) {
-        this.$store.dispatch(`submitProposal`, {
-          description: this.fields.body,
-          proposal_type: `Text`,
-          title: this.fields.title
-        })
-        this.resetForm()
-        this.$router.push({ name: `Governance` })
-      }
-    },
-    resetForm() {
-      this.fields = {
-        title: ``,
-        body: ``
-      }
-    }
-  },
-  validations: () => ({
-    fields: {
-      title: {
-        required,
-        minLength(x) {
-          return minLength(this.titleMinLength)(x)
-        },
-        maxLength(x) {
-          return maxLength(this.titleMaxLength)(x)
-        }
-      },
-      body: {
-        required,
-        minLength(x) {
-          return minLength(this.bodyMinLength)(x)
-        },
-        maxLength(x) {
-          return maxLength(this.bodyMaxLength)(x)
-        }
-      }
-    }
-  })
-}
-</script>
diff --git a/app/src/renderer/components/governance/TableProposals.vue b/app/src/renderer/components/governance/TableProposals.vue
index 80f6823fe7..312a052f25 100644
--- a/app/src/renderer/components/governance/TableProposals.vue
+++ b/app/src/renderer/components/governance/TableProposals.vue
@@ -141,7 +141,6 @@ export default {
     Mousetrap.bind([`command+f`, `ctrl+f`], () => this.setSearch(true))
     Mousetrap.bind([`command+n`, `ctrl+n`], () => this.newProposal())
     Mousetrap.bind(`esc`, () => this.setSearch(false))
-
     this.$store.dispatch(`getProposals`)
   }
 }
diff --git a/test/unit/specs/components/governance/PageProposalsNewText.spec.js b/test/unit/specs/components/governance/PageProposalsNewText.spec.js
deleted file mode 100644
index 93cfaf8a81..0000000000
--- a/test/unit/specs/components/governance/PageProposalsNewText.spec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import Node from "renderer/connectors/node"
-import PageProposalsNewText from "renderer/components/governance/PageProposalsNewText"
-import Store from "renderer/vuex/store"
-import Vuelidate from "vuelidate"
-import { createLocalVue, mount } from "@vue/test-utils"
-
-describe(`PageProposalsNewText`, () => {
-  let $store
-  let wrapper
-
-  beforeEach(() => {
-    const localVue = createLocalVue()
-    localVue.use(Vuelidate)
-
-    $store = {
-      dispatch: jest.fn(),
-      getters: { lastPage: null, user: { history: [] } }
-    }
-
-    wrapper = mount(PageProposalsNewText, {
-      localVue,
-      mocks: {
-        $router: [],
-        $store
-      }
-    })
-  })
-
-  it(`has the expected HTML structure`, () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it(`onSubmit`, () => {
-    wrapper.setData({
-      fields: { body: `description`, title: `proposal title` }
-    })
-
-    wrapper.vm.onSubmit()
-
-    expect($store.dispatch.mock.calls).toEqual([
-      [
-        `submitProposal`,
-        {
-          description: `description`,
-          proposal_type: `Text`,
-          title: `proposal title`
-        }
-      ]
-    ])
-  })
-
-  it(`sends the correct request to Gaia Lite`, done => {
-    const axios = async options => {
-      const {
-        data: { description, proposal_type, title },
-        method,
-        url
-      } = options
-
-      expect({
-        data: { description, proposal_type, title },
-        method,
-        url
-      }).toEqual({
-        data: {
-          description: `description`,
-          proposal_type: `Text`,
-          title: `proposal title`
-        },
-        method: `POST`,
-        url: `http://remotehost/gov/proposals`
-      })
-
-      done()
-      return { data: { check_tx: {}, deliver_tx: {} } }
-    }
-
-    const node = Node(axios, `http://localhost`, `http://remotehost`)
-    const store = Store({ node })
-    const localVue = createLocalVue()
-    localVue.use(Vuelidate)
-
-    wrapper = mount(PageProposalsNewText, {
-      localVue,
-      mocks: {
-        $router: []
-      },
-      store
-    })
-
-    wrapper.setData({
-      fields: { body: `description`, title: `proposal title` }
-    })
-
-    wrapper.vm.onSubmit()
-  })
-})

From 595908da305cc99e050eb3412c637824cf62809a Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Wed, 14 Nov 2018 15:32:30 +0100
Subject: [PATCH 02/27] minor tests fixes

---
 .../components/governance/ModalPropose.vue    |  38 ++--
 app/src/renderer/routes.js                    |   4 -
 .../__snapshots__/PageGovernance.spec.js.snap |   2 +
 .../PageProposalsNewText.spec.js.snap         | 191 ------------------
 4 files changed, 26 insertions(+), 209 deletions(-)
 delete mode 100644 test/unit/specs/components/governance/__snapshots__/PageProposalsNewText.spec.js.snap

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index b40e2b5afb..e424169c84 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -50,18 +50,20 @@
 <script>
 import { mapGetters } from "vuex"
 import ClickOutside from "vue-click-outside"
-import { minLength, maxLength, required, between } from "vuelidate/lib/validators"
+import {
+  minLength,
+  maxLength,
+  required,
+  between
+} from "vuelidate/lib/validators"
 import { isEmpty, trim } from "lodash"
 import Modal from "common/TmModal"
 import { TmBtn, TmField, TmFormGroup } from "@tendermint/ui"
 
 const isValid = type =>
-  type === `Text` ||
-  type === `ParameterChange` ||
-  type === `SoftwareUpgrade`
+  type === `Text` || type === `ParameterChange` || type === `SoftwareUpgrade`
 
-const notBlank = text =>
-  !isEmpty(trim(text))
+const notBlank = text => !isEmpty(trim(text))
 
 export default {
   name: `modal-propose`,
@@ -87,10 +89,10 @@ export default {
     TmFormGroup
   },
   data: () => ({
-    titleMinLength: 10,
-    titleMaxLength: 254,
-    descriptionMinLength: 10,
-    descriptionMaxLength: 40000,
+    titleMinLength: 5,
+    titleMaxLength: 64,
+    descriptionMinLength: 5,
+    descriptionMaxLength: 200,
     title: ``,
     description: ``,
     proposal_type: `Text`,
@@ -100,14 +102,22 @@ export default {
     return {
       title: {
         required,
-        minLength(x) => minLength(this.titleMinLength)(x),
-        maxLength(x) => maxLength(this.titleMaxLength)(x),
+        minLength(x) {
+          return minLength(this.titleMinLength)(x)
+        },
+        maxLength(x) {
+          return maxLength(this.titleMaxLength)(x)
+        },
         notBlank
       },
       description: {
         required,
-        minLength(x) =>minLength(this.descriptionMinLength)(x),
-        maxLength(x) => maxLength(this.descriptionMaxLength)(x),
+        minLength(x) {
+          return minLength(this.descriptionMinLength)(x)
+        },
+        maxLength(x) {
+          return maxLength(this.descriptionMaxLength)(x)
+        },
         notBlank
       },
       proposal_type: {
diff --git a/app/src/renderer/routes.js b/app/src/renderer/routes.js
index ea6a021c01..3784c9f84a 100644
--- a/app/src/renderer/routes.js
+++ b/app/src/renderer/routes.js
@@ -21,10 +21,6 @@ export default [
       }
     ]
   },
-  {
-    path: `/governance/proposals/new`,
-    component: governance(`ProposalsNewText`)
-  },
   {
     path: `/governance/:proposalId`,
     name: `Proposal`,
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 602c057c29..2c799d34c9 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -46,6 +46,7 @@ exports[`PageGovernance has the expected html structure 1`] = `
       </div>
 </div>
 </div>
+   <tm-btn id=\\"propose-btn\\" value=\\"Create Proposal\\" color=\\"primary\\"></tm-btn>
 </div>
 </div>
    <menu class=\\"tm-page-header-menu\\">
@@ -64,6 +65,7 @@ exports[`PageGovernance has the expected html structure 1`] = `
 </div>
 </header>
 <main class=\\"tm-page-main ps\\">
+   <!---->
    <!---->
    <div class=\\"tm-page\\" data-title=\\"Wallet\\">
       <header class=\\"tm-page-header\\">
diff --git a/test/unit/specs/components/governance/__snapshots__/PageProposalsNewText.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageProposalsNewText.spec.js.snap
deleted file mode 100644
index 1e0fcf849a..0000000000
--- a/test/unit/specs/components/governance/__snapshots__/PageProposalsNewText.spec.js.snap
+++ /dev/null
@@ -1,191 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageProposalsNewText has the expected HTML structure 1`] = `
-<div
-  class="tm-page"
-  data-title="Text Proposal"
->
-  <header
-    class="tm-page-header"
-  >
-    <div
-      class="tm-page-header-container"
-    >
-      <div
-        class="tm-page-header-text"
-      >
-        <!---->
-        <!---->
-        <!---->
-      </div>
-      <menu
-        class="tm-page-header-menu"
-      >
-        <div>
-          <div>
-            <div
-              class="tm-tool-bar"
-            >
-              <div
-                class="tm-tool-bar-container"
-              >
-                <div
-                  class="main"
-                >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <router-link
-                    exact="exact"
-                    to="/governance/proposals/new"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </router-link>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <router-link
-                    class="settings"
-                    to="/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </router-link>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </menu>
-    </div>
-  </header>
-  <main
-    class="tm-page-main"
-  >
-    <form
-      class="tm-form"
-    >
-      <div
-        class="tm-form-container"
-      >
-        <!---->
-        <main
-          class="tm-form-main"
-        >
-          <div
-            class="tm-form-group"
-          >
-            <!---->
-            <label
-              class="tm-form-group__label"
-              for="proposal-title"
-            >
-              Proposal Title
-            </label>
-            <div
-              class="tm-form-group__field"
-            >
-              <input
-                class="tm-field"
-                id="proposal-title"
-                placeholder="Proposal Title"
-                type="text"
-              />
-              <div
-                class="tm-form-msg sm tm-form-msg--error"
-              >
-                Proposal Title is required
-              </div>
-              <!---->
-            </div>
-          </div>
-          <div
-            class="tm-form-group"
-          >
-            <!---->
-            <label
-              class="tm-form-group__label"
-              for="proposal-body"
-            >
-              Proposal Body
-            </label>
-            <div
-              class="tm-form-group__field"
-            >
-              <textarea
-                class="tm-field"
-                id="proposal-body"
-                placeholder="Write your proposal here..."
-              />
-              <div
-                class="tm-form-msg sm tm-form-msg--error"
-              >
-                Proposal Body is required
-              </div>
-              <!---->
-            </div>
-          </div>
-        </main>
-        <footer
-          class="tm-form-footer"
-        >
-          <div>
-            <div />
-            <button
-              class="tm-btn"
-              type="submit"
-            >
-              <span
-                class="tm-btn__container"
-              >
-                <i
-                  aria-hidden="true"
-                  class="tm-btn__icon material-icons"
-                >
-                  send
-                </i>
-                <!---->
-                <span
-                  class="tm-btn__value"
-                >
-                  Propose
-                </span>
-              </span>
-            </button>
-          </div>
-        </footer>
-      </div>
-    </form>
-  </main>
-</div>
-`;

From 936e8ae23a121334dd324c8c81103bee161e5b50 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Wed, 14 Nov 2018 16:24:20 +0100
Subject: [PATCH 03/27] ModalPropose unit tests

---
 .../components/governance/ModalPropose.vue    |  19 ++-
 .../components/governance/PageGovernance.vue  |  11 +-
 .../vuex/modules/governance/proposals.js      |  10 +-
 .../governance/ModalDeposit.spec.js           |   2 +-
 .../governance/ModalPropose.spec.js           | 150 ++++++++++++++++++
 .../__snapshots__/ModalPropose.spec.js.snap   | 124 +++++++++++++++
 6 files changed, 300 insertions(+), 16 deletions(-)
 create mode 100644 test/unit/specs/components/governance/ModalPropose.spec.js
 create mode 100644 test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index e424169c84..742abe871f 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -39,7 +39,7 @@
         v-focus)
 
     .modal-propose-footer
-      tm-btn#submit-deposit(
+      tm-btn#submit-proposal(
         @click.native="onPropose"
         :disabled="$v.$invalid"
         color="primary"
@@ -89,13 +89,13 @@ export default {
     TmFormGroup
   },
   data: () => ({
-    titleMinLength: 5,
+    titleMinLength: 1,
     titleMaxLength: 64,
-    descriptionMinLength: 5,
+    descriptionMinLength: 1,
     descriptionMaxLength: 200,
     title: ``,
     description: ``,
-    proposal_type: `Text`,
+    type: `Text`,
     amount: 0
   }),
   validations() {
@@ -120,7 +120,7 @@ export default {
         },
         notBlank
       },
-      proposal_type: {
+      type: {
         isValid
       },
       amount: {
@@ -136,8 +136,13 @@ export default {
     close() {
       this.$emit(`update:showModalPropose`, false)
     },
-    onDeposit() {
-      this.$emit(`createProposal`, { amount: this.amount })
+    onPropose() {
+      this.$emit(`createProposal`, {
+        title: this.title,
+        description: this.description,
+        type: this.type,
+        amount: this.amount
+      })
       this.close()
     }
   },
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index ad683aae44..b6e4977e1f 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -52,13 +52,18 @@ export default {
     onPropose() {
       this.showModalPropose = true
     },
-    async propose({ title, description, proposal_type, initial_deposit }) {
+    async propose({ title, description, type, amount }) {
       try {
         this.$store.dispatch(`submitProposal`, {
           title,
           description,
-          proposal_type,
-          initial_deposit
+          type,
+          initial_deposit: [
+            {
+              denom: this.bondingDenom.toLowerCase(),
+              amount
+            }
+          ]
         })
         this.$store.commit(`notify`, {
           title: `Successful proposal submission!`,
diff --git a/app/src/renderer/vuex/modules/governance/proposals.js b/app/src/renderer/vuex/modules/governance/proposals.js
index ffb030b92a..d98c7b1838 100644
--- a/app/src/renderer/vuex/modules/governance/proposals.js
+++ b/app/src/renderer/vuex/modules/governance/proposals.js
@@ -37,15 +37,15 @@ export default ({ node }) => {
         rootState: { wallet },
         dispatch
       },
-      proposal
+      { title, description, type, initial_deposit }
     ) {
       await dispatch(`sendTx`, {
         type: `submitProposal`,
         proposer: wallet.address,
-        proposal_type: proposal.proposal_type,
-        title: proposal.title,
-        description: proposal.description,
-        initial_deposit: proposal.initial_deposit
+        proposal_type: type,
+        title,
+        description,
+        initial_deposit
       })
       setTimeout(async () => {
         dispatch(`getProposals`)
diff --git a/test/unit/specs/components/governance/ModalDeposit.spec.js b/test/unit/specs/components/governance/ModalDeposit.spec.js
index 8cbf764f26..fb09cfc41f 100644
--- a/test/unit/specs/components/governance/ModalDeposit.spec.js
+++ b/test/unit/specs/components/governance/ModalDeposit.spec.js
@@ -40,7 +40,7 @@ describe(`ModalDeposit`, () => {
   })
 
   describe(`default values are set correctly`, () => {
-    it(`the 'amount' defaults to an empty string`, () => {
+    it(`the 'amount' defaults to 0`, () => {
       expect(wrapper.vm.amount).toEqual(0)
     })
   })
diff --git a/test/unit/specs/components/governance/ModalPropose.spec.js b/test/unit/specs/components/governance/ModalPropose.spec.js
new file mode 100644
index 0000000000..847b90ab4d
--- /dev/null
+++ b/test/unit/specs/components/governance/ModalPropose.spec.js
@@ -0,0 +1,150 @@
+"use strict"
+
+import Vuelidate from "vuelidate"
+import setup from "../../../helpers/vuex-setup"
+import ModalPropose from "renderer/components/governance/ModalPropose"
+
+describe(`ModalPropose`, () => {
+  let wrapper, store
+  let { mount, localVue } = setup()
+  localVue.use(Vuelidate)
+
+  beforeEach(() => {
+    const coins = [
+      {
+        amount: `20`,
+        denom: `stake`
+      }
+    ]
+    let instance = mount(ModalPropose, {
+      localVue,
+      propsData: {
+        denom: `stake`
+      }
+    })
+    wrapper = instance.wrapper
+    store = instance.store
+    store.commit(`setWalletBalances`, coins)
+    wrapper.update()
+  })
+
+  describe(`component matches snapshot`, () => {
+    it(`has the expected html structure`, async () => {
+      await wrapper.vm.$nextTick()
+      wrapper.update()
+      expect(wrapper.vm.$el).toMatchSnapshot()
+    })
+  })
+
+  describe(`default values are set correctly`, () => {
+    it(`the proposal type defaults to 'Text'`, () => {
+      expect(wrapper.vm.type).toEqual(`Text`)
+    })
+
+    it(`the proposal title defaults to the empty string`, () => {
+      expect(wrapper.vm.title).toEqual(``)
+    })
+
+    it(`the proposal type defaults to the empty string`, () => {
+      expect(wrapper.vm.description).toEqual(``)
+    })
+
+    it(`the 'amount' defaults to 0`, () => {
+      expect(wrapper.vm.amount).toEqual(0)
+    })
+  })
+
+  describe(`enables or disables 'Create Proposal' button correctly`, () => {
+    describe(`disables the 'Create Proposal' button`, () => {
+      it(`with the default values`, () => {
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+
+      it(`if the amount for initial deposit is less than the user's balance`, () => {
+        wrapper.setData({ amount: 25 })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+
+      it(`if the user doesn't have the deposit coin`, () => {
+        const otherCoins = [
+          {
+            amount: `20`,
+            denom: `otherCoin`
+          }
+        ]
+        store.commit(`setWalletBalances`, otherCoins)
+        wrapper.setData({ amount: 25 })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+
+      it(`if title is blank`, () => {
+        wrapper.setData({ title: `     ` })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+
+      it(`if description is blank`, () => {
+        wrapper.setData({ description: `     ` })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+
+      it(`if proposal type is invalid`, () => {
+        wrapper.setData({ type: `Other` })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+      })
+    })
+
+    describe(`enables the 'Create Proposal' button`, () => {
+      it(`if the user has enough balance and the fields are within the length ranges`, () => {
+        wrapper.setData({
+          amount: 15,
+          title: `A new text proposal for Cosmos`,
+          description: `a valid description for the proposal`
+        })
+        let submitButton = wrapper.find(`#submit-proposal`)
+        expect(submitButton.html()).not.toContain(`disabled="disabled"`)
+      })
+    })
+  })
+
+  describe(`closes modal correctly`, () => {
+    it(`X button emits close signal`, () => {
+      wrapper.vm.close()
+      expect(wrapper.emittedByOrder()).toEqual([
+        {
+          name: `update:showModalPropose`,
+          args: [false]
+        }
+      ])
+    })
+  })
+
+  describe(`Propose`, () => {
+    it(`'Create Proposal' button submits a new proposal and closes modal`, () => {
+      let proposalArgs = {
+        amount: 15,
+        title: `A new text proposal for Cosmos`,
+        description: `a valid description for the proposal`,
+        type: `Text`
+      }
+      wrapper.setData(proposalArgs)
+      wrapper.vm.onPropose()
+
+      expect(wrapper.emittedByOrder()).toEqual([
+        {
+          name: `createProposal`,
+          args: [proposalArgs]
+        },
+        {
+          name: `update:showModalPropose`,
+          args: [false]
+        }
+      ])
+    })
+  })
+})
diff --git a/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap
new file mode 100644
index 0000000000..c21491fde1
--- /dev/null
+++ b/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap
@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalPropose component matches snapshot has the expected html structure 1`] = `
+<div
+  class="modal-propose"
+  id="modal-propose"
+>
+  <div
+    class="modal-propose-header"
+  >
+    <img
+      class="icon modal-propose-atom"
+      src="~assets/images/cosmos-logo.png"
+    />
+    <span
+      class="tm-modal-title"
+    >
+      Create Proposal
+    </span>
+    <div
+      class="tm-modal-icon tm-modal-close"
+      id="closeBtn"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </div>
+  </div>
+  <div
+    class="page-proposal-form-group tm-form-group"
+  >
+    <!---->
+    <label
+      class="tm-form-group__label"
+      for="title"
+    >
+      Proposal Title
+    </label>
+    <div
+      class="tm-form-group__field"
+    >
+      <input
+        class="tm-field"
+        id="title"
+        placeholder="Proposal title"
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    class="page-proposal-form-group tm-form-group"
+  >
+    <!---->
+    <label
+      class="tm-form-group__label"
+      for="description"
+    >
+      Proposal Body
+    </label>
+    <div
+      class="tm-form-group__field"
+    >
+      <textarea
+        class="tm-field"
+        id="description"
+        placeholder="Write your proposal here..."
+      />
+    </div>
+  </div>
+  <div
+    class="modal-propose-form-group tm-form-group"
+  >
+    <!---->
+    <label
+      class="tm-form-group__label"
+      for="amount"
+    >
+      Amount
+    </label>
+    <div
+      class="tm-form-group__field"
+    >
+      <input
+        class="tm-field"
+        id="denom"
+        placeholder="stake"
+        readonly="readonly"
+        type="text"
+      />
+      <input
+        class="tm-field"
+        id="amount"
+        max="20"
+        min="0"
+        step="any"
+        type="number"
+      />
+    </div>
+  </div>
+  <div
+    class="modal-propose-footer"
+  >
+    <button
+      class="tm-btn"
+      disabled="disabled"
+      id="submit-proposal"
+    >
+      <span
+        class="tm-btn__container tm-btn--size-lg tm-btn--primary"
+      >
+        <!---->
+        <!---->
+        <span
+          class="tm-btn__value"
+        >
+          Create
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;

From 0baa4267ba3d008d2722ef9c916125f70511d165 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Wed, 14 Nov 2018 16:37:20 +0100
Subject: [PATCH 04/27] update proposal store module

---
 test/unit/specs/store/governance/proposals.spec.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/store/governance/proposals.spec.js b/test/unit/specs/store/governance/proposals.spec.js
index a35d02067d..b4180b2937 100644
--- a/test/unit/specs/store/governance/proposals.spec.js
+++ b/test/unit/specs/store/governance/proposals.spec.js
@@ -85,13 +85,21 @@ describe(`Module: Proposals`, () => {
     }
     let dispatch = jest.fn()
     proposals.forEach(async (proposal, i) => {
-      await actions.submitProposal({ rootState, dispatch }, proposal)
+      await actions.submitProposal(
+        { rootState, dispatch },
+        {
+          type: proposal.proposal_type,
+          title: proposal.title,
+          description: proposal.description,
+          initial_deposit: proposal.initial_deposit
+        }
+      )
       expect(dispatch.mock.calls[i]).toEqual([
         `sendTx`,
         {
           type: `submitProposal`,
-          proposer: addresses[0],
           proposal_type: proposal.proposal_type,
+          proposer: addresses[0],
           title: proposal.title,
           description: proposal.description,
           initial_deposit: proposal.initial_deposit

From 585a44341b3a77a359d8b6fbedd03a18ff1ef57d Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Wed, 14 Nov 2018 17:19:09 +0100
Subject: [PATCH 05/27] user testing fixes

---
 .../components/governance/ModalPropose.vue    |  15 +-
 .../components/governance/PageGovernance.vue  |  10 +-
 .../governance/PageGovernance.spec.js         | 135 ++++++++++++++----
 .../__snapshots__/PageGovernance.spec.js.snap |   7 +-
 4 files changed, 129 insertions(+), 38 deletions(-)

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index 742abe871f..ff756c0913 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -6,25 +6,24 @@
       .tm-modal-icon.tm-modal-close#closeBtn(@click="close()")
         i.material-icons close
 
-    tm-form-group.page-proposal-form-group(:error="$v.title.$error"
-      field-id="title" field-label="Proposal Title")
+    tm-form-group.page-proposal-form-group
+      span Title
       tm-field#title(
         type="text"
         placeholder="Proposal title"
         v-model="title"
         v-focus)
 
-    tm-form-group.page-proposal-form-group(:error="$v.description.$error"
-      field-id="description" field-label="Proposal Body")
+    tm-form-group.page-proposal-form-group
+      span Description
       tm-field#description(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="description")
 
     tm-form-group.modal-propose-form-group(
-      field-id='amount'
-      field-label='Amount'
-    )
+      field-id='amount')
+      span Deposit amount
       tm-field#denom(
         type="text"
         :placeholder="denom"
@@ -165,7 +164,7 @@ export default {
   padding 2rem
   position fixed
   top 50%
-  width 40%
+  width 50%
   z-index z(modal)
 
   &-header
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index b6e4977e1f..7aab63ee3d 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -14,7 +14,7 @@ tm-page(data-title='Governance').governance
   modal-propose(
     v-if="showModalPropose"
     v-on:createProposal="propose"
-    :showModalVote.sync="showModalVote"
+    :showModalPropose.sync="showModalPropose"
     :denom="bondingDenom.toLowerCase()"
   )
   router-view
@@ -27,7 +27,7 @@ import ModalSearch from "common/TmModalSearch"
 import ModalPropose from "./ModalPropose"
 import VmToolBar from "common/VmToolBar"
 import TmBalance from "common/TmBalance"
-import { TmPage, TmDataEmpty, TmDataLoading } from "@tendermint/ui"
+import { TmPage, TmDataEmpty, TmDataLoading, TmBtn } from "@tendermint/ui"
 export default {
   name: `page-governance`,
   components: {
@@ -38,6 +38,7 @@ export default {
     ModalSearch,
     ModalPropose,
     TmPage,
+    TmBtn,
     VmToolBar
   },
   computed: {
@@ -65,13 +66,14 @@ export default {
             }
           ]
         })
+        console.log(type.toLowerCase())
         this.$store.commit(`notify`, {
           title: `Successful proposal submission!`,
-          body: `You have successfully submitted a new ${this.proposal_type.toLowercase()} proposal`
+          body: `You have successfully submitted a new ${type.toLowercase()} proposal`
         })
       } catch ({ message }) {
         this.$store.commit(`notifyError`, {
-          title: `Error while submitting a new ${this.proposal_type.toLowercase()} proposal`,
+          title: `Error while submitting a new ${type.toLowercase()} proposal`,
           body: message
         })
       }
diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index a213ff1c8b..31b67535bb 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -2,35 +2,122 @@ import setup from "../../../helpers/vuex-setup"
 import htmlBeautify from "html-beautify"
 import Vuelidate from "vuelidate"
 import PageGovernance from "renderer/components/governance/PageGovernance"
+import ModalPropose from "renderer/components/governance/ModalPropose"
 import lcdClientMock from "renderer/connectors/lcdClientMock.js"
+import { mount } from "@vue/test-utils"
 
 describe(`PageGovernance`, () => {
-  let wrapper, store
-  let { mount, localVue } = setup()
-  localVue.use(Vuelidate)
-
-  beforeEach(() => {
-    let instance = mount(PageGovernance)
-    wrapper = instance.wrapper
-    store = instance.store
-    store.commit(`setConnected`, true)
-    store.state.user.address = lcdClientMock.addresses[0]
-    store.commit(`setAtoms`, 1337)
-    wrapper.update()
-  })
+  describe(`with magic`, () => {
+    let wrapper, store
+    let { mount, localVue } = setup()
+    localVue.use(Vuelidate)
+
+    beforeEach(() => {
+      let instance = mount(PageGovernance)
+      wrapper = instance.wrapper
+      store = instance.store
+      store.commit(`setConnected`, true)
+      store.state.user.address = lcdClientMock.addresses[0]
+      store.commit(`setAtoms`, 1337)
+      wrapper.update()
+    })
+
+    it(`has the expected html structure`, async () => {
+      // after importing the @tendermint/ui components from modules
+      // the perfect scroll plugin needs a $nextTick and a wrapper.update
+      // to work properly in the tests (snapshots weren't matching)
+      // this has occured across multiple tests
+      await wrapper.vm.$nextTick()
+      wrapper.update()
+      expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+    })
 
-  it(`has the expected html structure`, async () => {
-    // after importing the @tendermint/ui components from modules
-    // the perfect scroll plugin needs a $nextTick and a wrapper.update
-    // to work properly in the tests (snapshots weren't matching)
-    // this has occured across multiple tests
-    await wrapper.vm.$nextTick()
-    wrapper.update()
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+    it(`should show the search on click`, () => {
+      wrapper.find(`.tm-tool-bar i.search`).trigger(`click`)
+      expect(wrapper.contains(`.tm-modal-search`)).toBe(true)
+    })
+
+    describe(`Modal onPropose modal on click`, () => {
+      it(`displays the Propose modal`, () => {
+        let proposeBtn = wrapper.find(`#propose-btn`)
+        proposeBtn.trigger(`click`)
+        expect(wrapper.contains(ModalPropose)).toEqual(true)
+      })
+    })
   })
 
-  it(`should show the search on click`, () => {
-    wrapper.find(`.tm-tool-bar i.search`).trigger(`click`)
-    expect(wrapper.contains(`.tm-modal-search`)).toBe(true)
+  describe(`without magic`, () => {
+    describe(`Propose`, () => {
+      describe(`unit`, () => {
+        let $store = {
+          commit: jest.fn(),
+          getters: {
+            proposals: lcdClientMock.state.proposals,
+            bondingDenom: `stake`,
+            totalAtoms: 100,
+            user: { atoms: 42 }
+          }
+        }
+        let proposal = {
+          amount: 15,
+          title: `A new text proposal for Cosmos`,
+          description: `a valid description for the proposal`,
+          type: `Text`
+        }
+        it(`success`, async () => {
+          $store.dispatch = jest.fn()
+          const wrapper = mount(PageGovernance, {
+            mocks: { $store }
+          })
+          await wrapper.vm.propose(proposal)
+
+          expect($store.dispatch.mock.calls).toEqual([
+            [`submitProposal`, proposal]
+          ])
+
+          expect($store.commit.mock.calls).toEqual([
+            [
+              `notify`,
+              {
+                body: `You have successfully submitted a new text proposal`,
+                title: `Successful proposal submission!`
+              }
+            ]
+          ])
+        })
+
+        it(`error`, async () => {
+          const dispatch = jest.fn(() => {
+            throw new Error(`unexpected error`)
+          })
+
+          $store.dispatch = dispatch
+          const wrapper = mount(PageGovernance, {
+            mocks: { $store },
+            propsData: {
+              proposals: lcdClientMock.state.proposals,
+              bondingDenom: `stake`,
+              totalAtoms: 100,
+              user: { atoms: 42 }
+            }
+          })
+          await wrapper.vm.propose(proposal)
+
+          expect($store.dispatch.mock.calls).toEqual([
+            [`submitProposal`, proposal]
+          ])
+
+          expect($store.commit.mock.calls).toEqual([
+            [
+              `notifyError`,
+              {
+                body: `unexpected error`,
+                title: `Error while submitting a new text proposal`
+              }
+            ]
+          ])
+        })
+      })
+    })
   })
 })
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 2c799d34c9..48392d3475 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageGovernance has the expected html structure 1`] = `
+exports[`PageGovernance with magic has the expected html structure 1`] = `
 "<div class=\\"tm-page governance\\" data-title=\\"Governance\\">
    <header class=\\"tm-page-header\\">
       <div class=\\"tm-page-header-container\\">
@@ -46,7 +46,10 @@ exports[`PageGovernance has the expected html structure 1`] = `
       </div>
 </div>
 </div>
-   <tm-btn id=\\"propose-btn\\" value=\\"Create Proposal\\" color=\\"primary\\"></tm-btn>
+   <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--primary\\">
+   <!---->
+   <!---->
+   <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
 </div>
 </div>
    <menu class=\\"tm-page-header-menu\\">

From 6873182029665e2c4de2d875ad6be37d12e9fcdb Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 16:24:58 -0500
Subject: [PATCH 06/27] styling for proposal modal

---
 .../components/governance/ModalPropose.vue       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index ff756c0913..a114a2412c 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -42,7 +42,7 @@
         @click.native="onPropose"
         :disabled="$v.$invalid"
         color="primary"
-        value="Create"
+        value="Submit proposal"
         size="lg")
 </template>
 
@@ -158,12 +158,11 @@ export default {
   background var(--app-nav)
   display flex
   flex-direction column
-  height 50%
   justify-content space-between
   left 50%
   padding 2rem
   position fixed
-  top 50%
+  bottom 0
   width 50%
   z-index z(modal)
 
@@ -194,4 +193,15 @@ export default {
 
     button
       margin-left 1rem
+      margin-top 1rem
+
+  .page-proposal-form-group
+    display block
+    padding 0
+
+    textarea
+      min-height 300px
+
+  .tm-form-group
+    margin 0.5rem 0
 </style>

From a43389fdb6bd8da468373a55707823317f129e1f Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 16:25:23 -0500
Subject: [PATCH 07/27] misspelling causing error

---
 app/src/renderer/components/governance/PageGovernance.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index 7aab63ee3d..6b7523d281 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -69,7 +69,7 @@ export default {
         console.log(type.toLowerCase())
         this.$store.commit(`notify`, {
           title: `Successful proposal submission!`,
-          body: `You have successfully submitted a new ${type.toLowercase()} proposal`
+          body: `You have successfully submitted a new ${type.toLowerCase()} proposal`
         })
       } catch ({ message }) {
         this.$store.commit(`notifyError`, {

From 888e1d92cd644eafb58378ab76f9f2666c83692d Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 16:26:05 -0500
Subject: [PATCH 08/27] added slot to tmbalance so button can go in

---
 app/src/renderer/components/common/TmBalance.vue          | 7 +++++++
 app/src/renderer/components/governance/PageGovernance.vue | 3 +--
 app/src/renderer/styles/app.styl                          | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/src/renderer/components/common/TmBalance.vue b/app/src/renderer/components/common/TmBalance.vue
index 4e11640f07..fba073cbd9 100644
--- a/app/src/renderer/components/common/TmBalance.vue
+++ b/app/src/renderer/components/common/TmBalance.vue
@@ -26,6 +26,8 @@
         :class="{'tab-selected': $route.name === tab}",
       )
         router-link(:to="{name: tab}") {{ tab }}
+
+    slot
 </template>
 <script>
 import num from "scripts/num"
@@ -133,4 +135,9 @@ export default {
 
       a
         color var(--bright)
+
+.tm-btn
+  position absolute
+  right 0rem
+  bottom 1rem
 </style>
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index 6b7523d281..6a96145a67 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -1,8 +1,7 @@
 <template lang="pug">
 tm-page(data-title='Governance').governance
   template(slot="menu-body")
-    tm-balance(:tabs="tabs")
-    tm-btn#propose-btn(value="Create Proposal" color="primary" @click.native="onPropose")
+    tm-balance(:tabs="tabs"): tm-btn#propose-btn(value="Create Proposal" color="secondary" @click.native="onPropose")
 
   div(slot="menu"): vm-tool-bar
     router-link(to="/governance/proposals/new" exact v-tooltip.bottom="'New Proposal'")
diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
index cd3c760e8b..f2ed9e13af 100644
--- a/app/src/renderer/styles/app.styl
+++ b/app/src/renderer/styles/app.styl
@@ -107,6 +107,9 @@ input.tm-field
   border-width 1px
   padding 0 2rem
 
+.tm-page-header-body
+  position relative
+
 .tm-li-container
   margin-right 1rem
 

From c80dd24d36e3739d5cab47f510413ad6200bfc98 Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 16:26:33 -0500
Subject: [PATCH 09/27] we don't need to import tm-tool-bar

---
 .../renderer/components/common/VmToolBar.vue  | 25 +++++++++++++------
 .../components/governance/PageGovernance.vue  |  8 +++---
 .../components/staking/PageStaking.vue        | 10 ++++----
 .../components/wallet/PageTransactions.vue    |  4 +--
 .../renderer/components/wallet/PageWallet.vue |  4 +--
 5 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/app/src/renderer/components/common/VmToolBar.vue b/app/src/renderer/components/common/VmToolBar.vue
index 7d8a952805..02ef19e5d0 100644
--- a/app/src/renderer/components/common/VmToolBar.vue
+++ b/app/src/renderer/components/common/VmToolBar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  tm-tool-bar
+  .tm-tool-bar
     a.back(@click="back" :disabled="user.history.length === 0" v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
     slot
@@ -12,14 +12,10 @@
 </template>
 
 <script>
-import { TmToolBar } from "@tendermint/ui"
 import { mapGetters, mapMutations } from "vuex"
 export default {
   // the name needs to be different from TmToolBar (tm-tool-bar) or else recursive rendering takes place
   name: `vm-tool-bar`,
-  components: {
-    TmToolBar
-  },
   methods: {
     ...mapMutations([`pauseHistory`, `popHistory`]),
     back() {
@@ -43,6 +39,21 @@ export default {
 }
 </script>
 <style lang="stylus">
-.tm-tool-bar-container a
-  margin-top 0 !important
+
+.tm-tool-bar
+  height 100%
+
+.tm-page-header-text
+  padding-right 1rem
+
+  a
+    cursor pointer
+
+  i
+    padding 1rem
+    color var(--dim)
+
+    &:hover
+      color var(--bright)
+
 </style>
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index 6a96145a67..0d4bc520ae 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -3,11 +3,9 @@ tm-page(data-title='Governance').governance
   template(slot="menu-body")
     tm-balance(:tabs="tabs"): tm-btn#propose-btn(value="Create Proposal" color="secondary" @click.native="onPropose")
 
-  div(slot="menu"): vm-tool-bar
-    router-link(to="/governance/proposals/new" exact v-tooltip.bottom="'New Proposal'")
-      i.material-icons add
-    a(@click='setSearch()' v-tooltip.bottom="'Search'")
-      i.search.material-icons search
+    vm-tool-bar
+      a(@click='setSearch()' v-tooltip.bottom="'Search'")
+        i.search.material-icons search
 
   modal-search(type="proposals")
   modal-propose(
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index ee6e4054a8..f17fef20b5 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -3,11 +3,11 @@ tm-page(data-title="Staking").staking
   template(slot="menu-body")
     tm-balance(:tabs="tabs")
 
-  div(slot="menu"): vm-tool-bar
-    a(@click='connected && updateDelegates()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
-      i.material-icons refresh
-    a(@click='setSearch()' v-tooltip.bottom="'Search'")
-      i.search.material-icons search
+    vm-tool-bar
+      a(@click='connected && updateDelegates()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
+        i.material-icons refresh
+      a(@click='setSearch()' v-tooltip.bottom="'Search'")
+        i.search.material-icons search
 
   modal-search(type="delegates")
 
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 110eefe86f..78766f9490 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 tm-page(data-title='Transactions')
-  template(slot="menu-body"): tm-balance
-  div(slot="menu")
+  template(slot="menu-body")
+    tm-balance
     vm-tool-bar
       a(@click='connected && refreshTransactions()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
         i.material-icons refresh
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index cf64514de7..cf34121e50 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 tm-page(data-title="Wallet")
-  template(slot="menu-body", v-if="config.devMode"): tm-balance
-  div(slot="menu")
+  template(slot="menu-body", v-if="config.devMode")
+    tm-balance
     vm-tool-bar
       a(@click='connected && updateBalances()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
         i.material-icons refresh

From 7feb469a59d30b3a89c3b56592560dd08f7e375e Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 16:40:28 -0500
Subject: [PATCH 10/27] another typo of lowerCase

---
 app/src/renderer/components/governance/PageGovernance.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index 0d4bc520ae..f693ebe659 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -70,7 +70,7 @@ export default {
         })
       } catch ({ message }) {
         this.$store.commit(`notifyError`, {
-          title: `Error while submitting a new ${type.toLowercase()} proposal`,
+          title: `Error while submitting a new ${type.toLowerCase()} proposal`,
           body: message
         })
       }

From 6e073375bb13ee31fe6236fe17feb75086d53461 Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 14 Nov 2018 18:15:41 -0500
Subject: [PATCH 11/27] fixed tests

---
 .../components/governance/PageGovernance.vue  |   4 +-
 .../PagePreferences.spec.js.snap              |  82 +--
 .../__snapshots__/VmToolBar.spec.js.snap      |   6 +-
 .../governance/PageGovernance.spec.js         |  63 +-
 .../__snapshots__/ModalPropose.spec.js.snap   |  32 +-
 .../__snapshots__/PageGovernance.spec.js.snap |  34 +-
 .../__snapshots__/PageStaking.spec.js.snap    |  30 +-
 .../__snapshots__/PageSend.spec.js.snap       | 656 ++++++++----------
 .../PageTransactions.spec.js.snap             | 254 ++++---
 .../__snapshots__/PageWallet.spec.js.snap     | 254 ++++---
 10 files changed, 644 insertions(+), 771 deletions(-)

diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index f693ebe659..a0b69690b1 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -43,6 +43,7 @@ export default {
     ...mapGetters([`proposals`, `filters`, `bondingDenom`])
   },
   data: () => ({
+    query: ``,
     tabs: [`Proposals`],
     showModalPropose: false
   }),
@@ -52,7 +53,7 @@ export default {
     },
     async propose({ title, description, type, amount }) {
       try {
-        this.$store.dispatch(`submitProposal`, {
+        await this.$store.dispatch(`submitProposal`, {
           title,
           description,
           type,
@@ -63,7 +64,6 @@ export default {
             }
           ]
         })
-        console.log(type.toLowerCase())
         this.$store.commit(`notify`, {
           title: `Successful proposal submission!`,
           body: `You have successfully submitted a new ${type.toLowerCase()} proposal`
diff --git a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
index e3e0f4a20c..609667667c 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -26,53 +26,45 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
+                >
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
diff --git a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
index 0405e15bfe..550c42f724 100644
--- a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
@@ -2,10 +2,6 @@
 
 exports[`VmToolBar has the expected html structure 1`] = `
 "<div class=\\"tm-tool-bar\\">
-   <div class=\\"tm-tool-bar-container\\">
-      <div class=\\"main\\">
-         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-      </div>
-</div>
+   <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
 </div>"
 `;
diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index 31b67535bb..7e6339b30c 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -53,9 +53,17 @@ describe(`PageGovernance`, () => {
           commit: jest.fn(),
           getters: {
             proposals: lcdClientMock.state.proposals,
-            bondingDenom: `stake`,
+            filters: {
+              proposals: {
+                search: {
+                  visible: false,
+                  query: ``
+                }
+              }
+            },
+            bondingDenom: `Stake`,
             totalAtoms: 100,
-            user: { atoms: 42 }
+            user: { atoms: 42, history: [] }
           }
         }
         let proposal = {
@@ -64,15 +72,29 @@ describe(`PageGovernance`, () => {
           description: `a valid description for the proposal`,
           type: `Text`
         }
-        it(`success`, async () => {
+        xit(`success`, async () => {
           $store.dispatch = jest.fn()
+
           const wrapper = mount(PageGovernance, {
-            mocks: { $store }
+            mocks: {
+              $store,
+              $route: {
+                name: `routeName`
+              }
+            }
           })
           await wrapper.vm.propose(proposal)
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitProposal`, proposal]
+            [
+              `submitProposal`,
+              {
+                description: `a valid description for the proposal`,
+                initial_deposit: [{ amount: 15, denom: `stake` }],
+                title: `A new text proposal for Cosmos`,
+                type: `Text`
+              }
+            ]
           ])
 
           expect($store.commit.mock.calls).toEqual([
@@ -93,29 +115,34 @@ describe(`PageGovernance`, () => {
 
           $store.dispatch = dispatch
           const wrapper = mount(PageGovernance, {
-            mocks: { $store },
-            propsData: {
-              proposals: lcdClientMock.state.proposals,
-              bondingDenom: `stake`,
-              totalAtoms: 100,
-              user: { atoms: 42 }
+            mocks: {
+              $store,
+              $route: {
+                name: `routeName`
+              }
             }
           })
           await wrapper.vm.propose(proposal)
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitProposal`, proposal]
-          ])
-
-          expect($store.commit.mock.calls).toEqual([
             [
-              `notifyError`,
+              `submitProposal`,
               {
-                body: `unexpected error`,
-                title: `Error while submitting a new text proposal`
+                description: `a valid description for the proposal`,
+                initial_deposit: [{ amount: 15, denom: `stake` }],
+                title: `A new text proposal for Cosmos`,
+                type: `Text`
               }
             ]
           ])
+
+          expect($store.commit.mock.calls[1]).toEqual([
+            `notifyError`,
+            {
+              body: `unexpected error`,
+              title: `Error while submitting a new text proposal`
+            }
+          ])
         })
       })
     })
diff --git a/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap
index c21491fde1..edb7a25636 100644
--- a/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap
@@ -32,15 +32,13 @@ exports[`ModalPropose component matches snapshot has the expected html structure
     class="page-proposal-form-group tm-form-group"
   >
     <!---->
-    <label
-      class="tm-form-group__label"
-      for="title"
-    >
-      Proposal Title
-    </label>
+    <!---->
     <div
       class="tm-form-group__field"
     >
+      <span>
+        Title
+      </span>
       <input
         class="tm-field"
         id="title"
@@ -53,15 +51,13 @@ exports[`ModalPropose component matches snapshot has the expected html structure
     class="page-proposal-form-group tm-form-group"
   >
     <!---->
-    <label
-      class="tm-form-group__label"
-      for="description"
-    >
-      Proposal Body
-    </label>
+    <!---->
     <div
       class="tm-form-group__field"
     >
+      <span>
+        Description
+      </span>
       <textarea
         class="tm-field"
         id="description"
@@ -73,15 +69,13 @@ exports[`ModalPropose component matches snapshot has the expected html structure
     class="modal-propose-form-group tm-form-group"
   >
     <!---->
-    <label
-      class="tm-form-group__label"
-      for="amount"
-    >
-      Amount
-    </label>
+    <!---->
     <div
       class="tm-form-group__field"
     >
+      <span>
+        Deposit amount
+      </span>
       <input
         class="tm-field"
         id="denom"
@@ -115,7 +109,7 @@ exports[`ModalPropose component matches snapshot has the expected html structure
         <span
           class="tm-btn__value"
         >
-          Create
+          Submit proposal
         </span>
       </span>
     </button>
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 48392d3475..1112c21f9b 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -45,25 +45,18 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
          <a href=\\"#/governance/proposals\\" class=\\"\\">Proposals</a>
       </div>
 </div>
-</div>
-   <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--primary\\">
+   <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--secondary\\">
    <!---->
    <!---->
    <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
 </div>
-</div>
-   <menu class=\\"tm-page-header-menu\\">
-      <div>
-         <div>
-            <div class=\\"tm-tool-bar\\">
-               <div class=\\"tm-tool-bar-container\\">
-                  <div class=\\"main\\">
-                     <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a href=\\"#/governance/proposals/new\\" class=\\"\\"><i class=\\"material-icons\\">add</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-                  </div>
-</div>
-</div>
+   <div class=\\"tm-tool-bar\\">
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+   </div>
 </div>
 </div>
+   <menu class=\\"tm-page-header-menu\\">
+      <div></div>
 </menu>
 </div>
 </header>
@@ -111,20 +104,13 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
 </div>
       <div class=\\"tabs\\"></div>
 </div>
+      <div class=\\"tm-tool-bar\\">
+         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      </div>
 </div>
 </div>
       <menu class=\\"tm-page-header-menu\\">
-         <div>
-            <div>
-               <div class=\\"tm-tool-bar\\">
-                  <div class=\\"tm-tool-bar-container\\">
-                     <div class=\\"main\\">
-                        <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-                     </div>
-</div>
-</div>
-</div>
-</div>
+         <div></div>
 </menu>
 </div>
 </header>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
index 3b69b1cc7d..716c8c8655 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -49,20 +49,13 @@ exports[`PageStaking has the expected html structure 1`] = `
    </div>
 </div>
 </div>
+   <div class=\\"tm-tool-bar\\">
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+   </div>
 </div>
 </div>
    <menu class=\\"tm-page-header-menu\\">
-      <div>
-         <div>
-            <div class=\\"tm-tool-bar\\">
-               <div class=\\"tm-tool-bar-container\\">
-                  <div class=\\"main\\">
-                     <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-                  </div>
-</div>
-</div>
-</div>
-</div>
+      <div></div>
 </menu>
 </div>
 </header>
@@ -109,20 +102,13 @@ exports[`PageStaking has the expected html structure 1`] = `
 </div>
       <div class=\\"tabs\\"></div>
 </div>
+      <div class=\\"tm-tool-bar\\">
+         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      </div>
 </div>
 </div>
       <menu class=\\"tm-page-header-menu\\">
-         <div>
-            <div>
-               <div class=\\"tm-tool-bar\\">
-                  <div class=\\"tm-tool-bar-container\\">
-                     <div class=\\"main\\">
-                        <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-                     </div>
-</div>
-</div>
-</div>
-</div>
+         <div></div>
 </menu>
 </div>
 </header>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
index bfcb818b26..0a33d04488 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -26,53 +26,45 @@ exports[`PageSend disables sending if not connected 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -365,53 +357,45 @@ exports[`PageSend has the expected html structure 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -732,53 +716,45 @@ exports[`PageSend should show address required error 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -1069,53 +1045,45 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -1406,53 +1374,45 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -1743,53 +1703,45 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -2091,53 +2043,45 @@ exports[`PageSend should trigger confirmation modal if form is corect 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
@@ -2518,53 +2462,45 @@ exports[`PageSend should work without providing a default denom 1`] = `
             <div
               class="tm-tool-bar"
             >
-              <div
-                class="tm-tool-bar-container"
+              <a
+                class="back"
+                disabled="disabled"
               >
-                <div
-                  class="main"
+                <i
+                  class="material-icons"
+                >
+                  arrow_back
+                </i>
+              </a>
+              <a
+                class="help"
+              >
+                <i
+                  class="material-icons"
+                >
+                  help_outline
+                </i>
+              </a>
+              <a
+                class="settings"
+                href="#/preferences"
+              >
+                <i
+                  class="material-icons"
+                  id="settings"
+                >
+                  settings
+                </i>
+              </a>
+              <a
+                id="signOut-btn"
+              >
+                <i
+                  class="material-icons"
                 >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
+                  exit_to_app
+                </i>
+              </a>
             </div>
           </div>
         </div>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
index c8d3e357a2..78b03bf758 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -82,80 +82,69 @@ exports[`PageTransactions has the expected html structure 1`] = `
               class="tabs"
             />
           </div>
+          <div
+            class="tm-tool-bar"
+          >
+            <a
+              class="back"
+              disabled="disabled"
+            >
+              <i
+                class="material-icons"
+              >
+                arrow_back
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                refresh
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                search
+              </i>
+            </a>
+            <a
+              class="help"
+            >
+              <i
+                class="material-icons"
+              >
+                help_outline
+              </i>
+            </a>
+            <a
+              class="settings"
+              href="#/preferences"
+            >
+              <i
+                class="material-icons"
+                id="settings"
+              >
+                settings
+              </i>
+            </a>
+            <a
+              id="signOut-btn"
+            >
+              <i
+                class="material-icons"
+              >
+                exit_to_app
+              </i>
+            </a>
+          </div>
         </div>
       </div>
       <menu
         class="tm-page-header-menu"
       >
-        <div>
-          <div>
-            <div
-              class="tm-tool-bar"
-            >
-              <div
-                class="tm-tool-bar-container"
-              >
-                <div
-                  class="main"
-                >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      refresh
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      search
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div />
       </menu>
     </div>
   </header>
@@ -309,80 +298,69 @@ exports[`PageTransactions should filter the transactions 1`] = `
               class="tabs"
             />
           </div>
+          <div
+            class="tm-tool-bar"
+          >
+            <a
+              class="back"
+              disabled="disabled"
+            >
+              <i
+                class="material-icons"
+              >
+                arrow_back
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                refresh
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                search
+              </i>
+            </a>
+            <a
+              class="help"
+            >
+              <i
+                class="material-icons"
+              >
+                help_outline
+              </i>
+            </a>
+            <a
+              class="settings"
+              href="#/preferences"
+            >
+              <i
+                class="material-icons"
+                id="settings"
+              >
+                settings
+              </i>
+            </a>
+            <a
+              id="signOut-btn"
+            >
+              <i
+                class="material-icons"
+              >
+                exit_to_app
+              </i>
+            </a>
+          </div>
         </div>
       </div>
       <menu
         class="tm-page-header-menu"
       >
-        <div>
-          <div>
-            <div
-              class="tm-tool-bar"
-            >
-              <div
-                class="tm-tool-bar-container"
-              >
-                <div
-                  class="main"
-                >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      refresh
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      search
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div />
       </menu>
     </div>
   </header>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
index f0b8fbf2ab..be2ad96528 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -82,80 +82,69 @@ exports[`PageWallet has the expected html structure 1`] = `
               class="tabs"
             />
           </div>
+          <div
+            class="tm-tool-bar"
+          >
+            <a
+              class="back"
+              disabled="disabled"
+            >
+              <i
+                class="material-icons"
+              >
+                arrow_back
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                refresh
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                search
+              </i>
+            </a>
+            <a
+              class="help"
+            >
+              <i
+                class="material-icons"
+              >
+                help_outline
+              </i>
+            </a>
+            <a
+              class="settings"
+              href="#/preferences"
+            >
+              <i
+                class="material-icons"
+                id="settings"
+              >
+                settings
+              </i>
+            </a>
+            <a
+              id="signOut-btn"
+            >
+              <i
+                class="material-icons"
+              >
+                exit_to_app
+              </i>
+            </a>
+          </div>
         </div>
       </div>
       <menu
         class="tm-page-header-menu"
       >
-        <div>
-          <div>
-            <div
-              class="tm-tool-bar"
-            >
-              <div
-                class="tm-tool-bar-container"
-              >
-                <div
-                  class="main"
-                >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      refresh
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      search
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div />
       </menu>
     </div>
   </header>
@@ -520,80 +509,69 @@ exports[`PageWallet should filter the balances 1`] = `
               class="tabs"
             />
           </div>
+          <div
+            class="tm-tool-bar"
+          >
+            <a
+              class="back"
+              disabled="disabled"
+            >
+              <i
+                class="material-icons"
+              >
+                arrow_back
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                refresh
+              </i>
+            </a>
+            <a>
+              <i
+                class="material-icons"
+              >
+                search
+              </i>
+            </a>
+            <a
+              class="help"
+            >
+              <i
+                class="material-icons"
+              >
+                help_outline
+              </i>
+            </a>
+            <a
+              class="settings"
+              href="#/preferences"
+            >
+              <i
+                class="material-icons"
+                id="settings"
+              >
+                settings
+              </i>
+            </a>
+            <a
+              id="signOut-btn"
+            >
+              <i
+                class="material-icons"
+              >
+                exit_to_app
+              </i>
+            </a>
+          </div>
         </div>
       </div>
       <menu
         class="tm-page-header-menu"
       >
-        <div>
-          <div>
-            <div
-              class="tm-tool-bar"
-            >
-              <div
-                class="tm-tool-bar-container"
-              >
-                <div
-                  class="main"
-                >
-                  <a
-                    class="back"
-                    disabled="disabled"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      arrow_back
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      refresh
-                    </i>
-                  </a>
-                  <a>
-                    <i
-                      class="material-icons"
-                    >
-                      search
-                    </i>
-                  </a>
-                  <a
-                    class="help"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      help_outline
-                    </i>
-                  </a>
-                  <a
-                    class="settings"
-                    href="#/preferences"
-                  >
-                    <i
-                      class="material-icons"
-                      id="settings"
-                    >
-                      settings
-                    </i>
-                  </a>
-                  <a
-                    id="signOut-btn"
-                  >
-                    <i
-                      class="material-icons"
-                    >
-                      exit_to_app
-                    </i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div />
       </menu>
     </div>
   </header>

From 81aa0881ed2f5de874c174bc07aaa273bc2a41c5 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 01:34:30 +0100
Subject: [PATCH 12/27] Create proposal, deposit and voting working (missing
 test fixes)

---
 .../components/governance/ModalDeposit.vue    |  8 ++++-
 .../components/governance/ModalVote.vue       | 16 +++++-----
 .../components/governance/PageGovernance.vue  |  2 +-
 .../components/governance/PageProposal.vue    | 22 +++++--------
 app/src/renderer/vuex/modules/delegation.js   | 32 -------------------
 .../vuex/modules/governance/deposits.js       | 18 ++++-------
 .../renderer/vuex/modules/governance/votes.js |  7 ++--
 .../governance/PageGovernance.spec.js         |  4 +--
 .../specs/store/governance/deposits.spec.js   |  2 +-
 9 files changed, 37 insertions(+), 74 deletions(-)

diff --git a/app/src/renderer/components/governance/ModalDeposit.vue b/app/src/renderer/components/governance/ModalDeposit.vue
index 9f6b89ef47..14892112d9 100644
--- a/app/src/renderer/components/governance/ModalDeposit.vue
+++ b/app/src/renderer/components/governance/ModalDeposit.vue
@@ -85,7 +85,13 @@ export default {
       this.$emit(`update:showModalDeposit`, false)
     },
     onDeposit() {
-      this.$emit(`submitDeposit`, { amount: this.amount })
+      let amount = [
+        {
+          denom: this.denom,
+          amount: String(this.amount)
+        }
+      ]
+      this.$emit(`submitDeposit`, amount)
       this.close()
     }
   },
diff --git a/app/src/renderer/components/governance/ModalVote.vue b/app/src/renderer/components/governance/ModalVote.vue
index 13174ac3d9..05b2643ce2 100644
--- a/app/src/renderer/components/governance/ModalVote.vue
+++ b/app/src/renderer/components/governance/ModalVote.vue
@@ -12,28 +12,28 @@
 
     tm-form-group.modal-vote-form-group.options
       tm-btn#vote-yes(
-        @click.native="vote('yes')"
+        @click.native="vote('Yes')"
         :class="[option ===  `yes` ? 'active' : '']"
         color="secondary"
         value="Yes"
         size="md")
 
       tm-btn#vote-no(
-        @click.native="vote('no')"
+        @click.native="vote('No')"
         :class="[option === `no` ? 'active' : '']"
         color="secondary"
         value="No"
         size="md")
 
       tm-btn#vote-veto(
-        @click.native="vote('no_with_veto')"
+        @click.native="vote('NoWithVeto')"
         :class="[option === `no_with_veto` ? 'active' : '']"
         color="secondary"
         value="No With Veto"
         size="md")
 
       tm-btn#vote-abstain(
-        @click.native="vote('abstain')"
+        @click.native="vote('Abstain')"
         :class="[option === `abstain` ? 'active' : '']"
         color="secondary"
         value="Abstain"
@@ -56,10 +56,10 @@ import Modal from "common/TmModal"
 import { TmBtn, TmField, TmFormGroup, TmFormMsg } from "@tendermint/ui"
 
 const isValid = option =>
-  option === `yes` ||
-  option === `no` ||
-  option === `no_with_veto` ||
-  option === `abstain`
+  option === `Yes` ||
+  option === `No` ||
+  option === `NoWithVeto` ||
+  option === `Abstain`
 
 export default {
   name: `modal-vote`,
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index a0b69690b1..db620f2655 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -60,7 +60,7 @@ export default {
           initial_deposit: [
             {
               denom: this.bondingDenom.toLowerCase(),
-              amount
+              amount: String(amount)
             }
           ]
         })
diff --git a/app/src/renderer/components/governance/PageProposal.vue b/app/src/renderer/components/governance/PageProposal.vue
index dd98374b15..4250c98821 100644
--- a/app/src/renderer/components/governance/PageProposal.vue
+++ b/app/src/renderer/components/governance/PageProposal.vue
@@ -137,34 +137,28 @@ export default {
     onDeposit() {
       this.showModalDeposit = true
     },
-    async deposit({ amount }) {
-      let proposalId = this.proposal.proposal_id
-
+    async deposit(amount) {
+      let proposal_id = this.proposal.proposal_id
       try {
         // TODO: support multiple coins
-        await this.$store.dispatch(`submitDeposit`, { proposalId, amount })
+        await this.$store.dispatch(`submitDeposit`, { proposal_id, amount })
 
         // TODO: get min deposit denom from gov params
         this.$store.commit(`notify`, {
           title: `Successful deposit!`,
-          body: `You have successfully deposited your ${this.bondingDenom.toLowerCase()}s on proposal #${
-            this.proposal.proposal_id
-          }`
+          body: `You have successfully deposited your ${this.bondingDenom.toLowerCase()}s on proposal #${proposal_id}`
         })
       } catch ({ message }) {
         this.$store.commit(`notifyError`, {
-          title: `Error while submitting a deposit on proposal #${
-            this.proposal.proposal_id
-          }`,
+          title: `Error while submitting a deposit on proposal #${proposal_id}`,
           body: message
         })
       }
     },
     async castVote({ option }) {
-      let proposalId = this.proposal.proposal_id
-
+      let proposal_id = this.proposal.proposal_id
       try {
-        await this.$store.dispatch(`submitVote`, { proposalId, option })
+        await this.$store.dispatch(`submitVote`, { proposal_id, option })
 
         this.$store.commit(`notify`, {
           title: `Successful vote!`,
@@ -174,7 +168,7 @@ export default {
         })
       } catch ({ message }) {
         this.$store.commit(`notifyError`, {
-          title: `Error while voting on proposal #${this.proposal.proposal_id}`,
+          title: `Error while voting on proposal #${proposal_id}`,
           body: message
         })
       }
diff --git a/app/src/renderer/vuex/modules/delegation.js b/app/src/renderer/vuex/modules/delegation.js
index 0e8f7771af..a137b61fc0 100644
--- a/app/src/renderer/vuex/modules/delegation.js
+++ b/app/src/renderer/vuex/modules/delegation.js
@@ -214,38 +214,6 @@ export default ({ node }) => {
         dispatch(`updateDelegates`)
       }, 5000)
     }
-    // deprecated
-    // async endUnbonding({ rootState, state, dispatch, commit }, validatorAddr) {
-    //   try {
-    //     await dispatch(`sendTx`, {
-    //       type: `updateDelegations`,
-    //       to: rootState.wallet.address, // TODO strange syntax
-    //       complete_unbondings: [
-    //         {
-    //           delegator_addr: rootState.wallet.address,
-    //           validator_addr: validatorAddr
-    //         }
-    //       ]
-    //     })
-
-    //     let balance = state.unbondingDelegations[validatorAddr].balance
-    //     commit(`setUnbondingDelegations`, {
-    //       validator_addr: validatorAddr,
-    //       balance: { amount: 0 }
-    //     })
-    //     commit(`notify`, {
-    //       title: `Ending undelegation successful`,
-    //       body: `You successfully undelegated ${balance.amount} ${
-    //         balance.denom
-    //       }s from ${validatorAddr}`
-    //     })
-    //   } catch (err) {
-    //     commit(`notifyError`, {
-    //       title: `Ending undelegation failed`,
-    //       body: err
-    //     })
-    //   }
-    // }
   }
 
   return {
diff --git a/app/src/renderer/vuex/modules/governance/deposits.js b/app/src/renderer/vuex/modules/governance/deposits.js
index 98898ccfce..35b02a4863 100644
--- a/app/src/renderer/vuex/modules/governance/deposits.js
+++ b/app/src/renderer/vuex/modules/governance/deposits.js
@@ -20,26 +20,20 @@ export default ({ node }) => {
     },
     async submitDeposit(
       {
-        rootState: { config, wallet },
+        rootState: { wallet },
         dispatch
       },
-      proposalId,
-      depositAmount
+      { proposal_id, amount }
     ) {
-      const denom = config.bondingDenom.toLowerCase()
       await dispatch(`sendTx`, {
         type: `submitProposalDeposit`,
-        proposal_id: proposalId,
+        to: proposal_id,
+        proposal_id,
         depositer: wallet.address,
-        amount: [
-          {
-            denom: denom,
-            amount: depositAmount
-          }
-        ]
+        amount
       })
       setTimeout(async () => {
-        dispatch(`getProposalDeposits`, proposalId)
+        dispatch(`getProposalDeposits`, proposal_id)
       }, 5000)
     }
   }
diff --git a/app/src/renderer/vuex/modules/governance/votes.js b/app/src/renderer/vuex/modules/governance/votes.js
index 25f04523a9..e131eacb66 100644
--- a/app/src/renderer/vuex/modules/governance/votes.js
+++ b/app/src/renderer/vuex/modules/governance/votes.js
@@ -18,14 +18,15 @@ export default ({ node }) => {
       commit(`setProposalVotes`, proposalId, votes)
       state.loading = false
     },
-    async submitVote({ rootState, dispatch }, proposalId, option) {
+    async submitVote({ rootState, dispatch }, { proposal_id, option }) {
       await dispatch(`sendTx`, {
+        to: proposal_id,
         type: `submitProposalVote`,
-        proposal_id: proposalId,
+        proposal_id,
         voter: rootState.wallet.address,
         option
       })
-      dispatch(`getProposalVotes`, proposalId)
+      dispatch(`getProposalVotes`, proposal_id)
     }
   }
   return {
diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index 7e6339b30c..d9a64b5a8e 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -90,7 +90,7 @@ describe(`PageGovernance`, () => {
               `submitProposal`,
               {
                 description: `a valid description for the proposal`,
-                initial_deposit: [{ amount: 15, denom: `stake` }],
+                initial_deposit: [{ amount: `15`, denom: `stake` }],
                 title: `A new text proposal for Cosmos`,
                 type: `Text`
               }
@@ -129,7 +129,7 @@ describe(`PageGovernance`, () => {
               `submitProposal`,
               {
                 description: `a valid description for the proposal`,
-                initial_deposit: [{ amount: 15, denom: `stake` }],
+                initial_deposit: [{ amount: `15`, denom: `stake` }],
                 title: `A new text proposal for Cosmos`,
                 type: `Text`
               }
diff --git a/test/unit/specs/store/governance/deposits.spec.js b/test/unit/specs/store/governance/deposits.spec.js
index 4bc8af1c42..5a5512c5b4 100644
--- a/test/unit/specs/store/governance/deposits.spec.js
+++ b/test/unit/specs/store/governance/deposits.spec.js
@@ -68,7 +68,7 @@ describe(`Module: Deposits`, () => {
           amount: [
             {
               denom: rootState.config.bondingDenom,
-              amount
+              amount: String(amount)
             }
           ]
         }

From 4cedba9f65861ac9b6b00275760a37dc68649629 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 14:35:44 +0100
Subject: [PATCH 13/27] fixed unit tests

---
 .../components/governance/ModalDeposit.vue    |  2 +-
 .../components/governance/ModalVote.vue       |  8 ++--
 .../components/governance/PageGovernance.vue  |  2 +-
 .../components/governance/PageProposal.vue    |  2 +-
 .../vuex/modules/governance/deposits.js       |  4 +-
 .../vuex/modules/governance/proposals.js      |  4 +-
 .../renderer/vuex/modules/governance/votes.js |  2 +-
 .../governance/ModalDeposit.spec.js           | 11 ++++-
 .../components/governance/ModalVote.spec.js   | 30 ++++++-------
 .../governance/PageGovernance.spec.js         |  3 +-
 .../governance/PageProposal.spec.js           | 43 +++++++++++++++----
 .../__snapshots__/PageGovernance.spec.js.snap |  2 +-
 .../specs/store/governance/deposits.spec.js   | 29 ++++++-------
 .../unit/specs/store/governance/votes.spec.js |  6 +--
 14 files changed, 88 insertions(+), 60 deletions(-)

diff --git a/app/src/renderer/components/governance/ModalDeposit.vue b/app/src/renderer/components/governance/ModalDeposit.vue
index 14892112d9..a348d93e32 100644
--- a/app/src/renderer/components/governance/ModalDeposit.vue
+++ b/app/src/renderer/components/governance/ModalDeposit.vue
@@ -91,7 +91,7 @@ export default {
           amount: String(this.amount)
         }
       ]
-      this.$emit(`submitDeposit`, amount)
+      this.$emit(`submitDeposit`, { amount })
       this.close()
     }
   },
diff --git a/app/src/renderer/components/governance/ModalVote.vue b/app/src/renderer/components/governance/ModalVote.vue
index 05b2643ce2..77cbc96b2b 100644
--- a/app/src/renderer/components/governance/ModalVote.vue
+++ b/app/src/renderer/components/governance/ModalVote.vue
@@ -13,28 +13,28 @@
     tm-form-group.modal-vote-form-group.options
       tm-btn#vote-yes(
         @click.native="vote('Yes')"
-        :class="[option ===  `yes` ? 'active' : '']"
+        :class="[option ===  `Yes` ? 'active' : '']"
         color="secondary"
         value="Yes"
         size="md")
 
       tm-btn#vote-no(
         @click.native="vote('No')"
-        :class="[option === `no` ? 'active' : '']"
+        :class="[option === `No` ? 'active' : '']"
         color="secondary"
         value="No"
         size="md")
 
       tm-btn#vote-veto(
         @click.native="vote('NoWithVeto')"
-        :class="[option === `no_with_veto` ? 'active' : '']"
+        :class="[option === `NoWithVeto` ? 'active' : '']"
         color="secondary"
         value="No With Veto"
         size="md")
 
       tm-btn#vote-abstain(
         @click.native="vote('Abstain')"
-        :class="[option === `abstain` ? 'active' : '']"
+        :class="[option === `Abstain` ? 'active' : '']"
         color="secondary"
         value="Abstain"
         size="md")
diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
index db620f2655..b013d14be9 100644
--- a/app/src/renderer/components/governance/PageGovernance.vue
+++ b/app/src/renderer/components/governance/PageGovernance.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 tm-page(data-title='Governance').governance
   template(slot="menu-body")
-    tm-balance(:tabs="tabs"): tm-btn#propose-btn(value="Create Proposal" color="secondary" @click.native="onPropose")
+    tm-balance(:tabs="tabs"): tm-btn#propose-btn(value="Create Proposal" color="primary" @click.native="onPropose")
 
     vm-tool-bar
       a(@click='setSearch()' v-tooltip.bottom="'Search'")
diff --git a/app/src/renderer/components/governance/PageProposal.vue b/app/src/renderer/components/governance/PageProposal.vue
index 4250c98821..a207df670c 100644
--- a/app/src/renderer/components/governance/PageProposal.vue
+++ b/app/src/renderer/components/governance/PageProposal.vue
@@ -137,7 +137,7 @@ export default {
     onDeposit() {
       this.showModalDeposit = true
     },
-    async deposit(amount) {
+    async deposit({ amount }) {
       let proposal_id = this.proposal.proposal_id
       try {
         // TODO: support multiple coins
diff --git a/app/src/renderer/vuex/modules/governance/deposits.js b/app/src/renderer/vuex/modules/governance/deposits.js
index 35b02a4863..c07f29c6ca 100644
--- a/app/src/renderer/vuex/modules/governance/deposits.js
+++ b/app/src/renderer/vuex/modules/governance/deposits.js
@@ -32,9 +32,7 @@ export default ({ node }) => {
         depositer: wallet.address,
         amount
       })
-      setTimeout(async () => {
-        dispatch(`getProposalDeposits`, proposal_id)
-      }, 5000)
+      await dispatch(`getProposalDeposits`, proposal_id)
     }
   }
   return {
diff --git a/app/src/renderer/vuex/modules/governance/proposals.js b/app/src/renderer/vuex/modules/governance/proposals.js
index d98c7b1838..c27d1f5034 100644
--- a/app/src/renderer/vuex/modules/governance/proposals.js
+++ b/app/src/renderer/vuex/modules/governance/proposals.js
@@ -47,9 +47,7 @@ export default ({ node }) => {
         description,
         initial_deposit
       })
-      setTimeout(async () => {
-        dispatch(`getProposals`)
-      }, 5000)
+      await dispatch(`getProposals`)
     }
   }
   return {
diff --git a/app/src/renderer/vuex/modules/governance/votes.js b/app/src/renderer/vuex/modules/governance/votes.js
index e131eacb66..e24e35104c 100644
--- a/app/src/renderer/vuex/modules/governance/votes.js
+++ b/app/src/renderer/vuex/modules/governance/votes.js
@@ -26,7 +26,7 @@ export default ({ node }) => {
         voter: rootState.wallet.address,
         option
       })
-      dispatch(`getProposalVotes`, proposal_id)
+      await dispatch(`getProposalVotes`, proposal_id)
     }
   }
   return {
diff --git a/test/unit/specs/components/governance/ModalDeposit.spec.js b/test/unit/specs/components/governance/ModalDeposit.spec.js
index fb09cfc41f..65a26e405a 100644
--- a/test/unit/specs/components/governance/ModalDeposit.spec.js
+++ b/test/unit/specs/components/governance/ModalDeposit.spec.js
@@ -101,7 +101,16 @@ describe(`ModalDeposit`, () => {
       expect(wrapper.emittedByOrder()).toEqual([
         {
           name: `submitDeposit`,
-          args: [{ amount: 10 }]
+          args: [
+            {
+              amount: [
+                {
+                  amount: `10`,
+                  denom: `stake`
+                }
+              ]
+            }
+          ]
         },
         {
           name: `update:showModalDeposit`,
diff --git a/test/unit/specs/components/governance/ModalVote.spec.js b/test/unit/specs/components/governance/ModalVote.spec.js
index 9a0aa92a39..8f3460e6ce 100644
--- a/test/unit/specs/components/governance/ModalVote.spec.js
+++ b/test/unit/specs/components/governance/ModalVote.spec.js
@@ -48,23 +48,23 @@ describe(`ModalVote`, () => {
     })
 
     it(`enables the 'Vote' button if the user selected a valid option`, () => {
-      wrapper.setData({ option: `yes` })
+      wrapper.setData({ option: `Yes` })
       let voteBtn = wrapper.find(`#vote-yes`)
       let submitButton = wrapper.find(`#cast-vote`)
       expect(voteBtn.html()).toContain(`active`)
       expect(submitButton.html()).not.toContain(`disabled="disabled"`)
 
-      wrapper.setData({ option: `no` })
+      wrapper.setData({ option: `No` })
       voteBtn = wrapper.find(`#vote-no`)
       expect(voteBtn.html()).toContain(`active`)
       expect(submitButton.html()).not.toContain(`disabled="disabled"`)
 
-      wrapper.setData({ option: `no_with_veto` })
+      wrapper.setData({ option: `NoWithVeto` })
       voteBtn = wrapper.find(`#vote-veto`)
       expect(voteBtn.html()).toContain(`active`)
       expect(submitButton.html()).not.toContain(`disabled="disabled"`)
 
-      wrapper.setData({ option: `abstain` })
+      wrapper.setData({ option: `Abstain` })
       voteBtn = wrapper.find(`#vote-abstain`)
       expect(voteBtn.html()).toContain(`active`)
       expect(submitButton.html()).not.toContain(`disabled="disabled"`)
@@ -86,30 +86,30 @@ describe(`ModalVote`, () => {
 
   describe(`Vote`, () => {
     it(`updates the selected option on click`, () => {
-      wrapper.vm.vote(`yes`)
-      expect(wrapper.vm.option).toEqual(`yes`)
+      wrapper.vm.vote(`Yes`)
+      expect(wrapper.vm.option).toEqual(`Yes`)
 
-      wrapper.vm.vote(`no`)
-      expect(wrapper.vm.option).toEqual(`no`)
+      wrapper.vm.vote(`No`)
+      expect(wrapper.vm.option).toEqual(`No`)
 
-      wrapper.vm.vote(`no_with_veto`)
-      expect(wrapper.vm.option).toEqual(`no_with_veto`)
+      wrapper.vm.vote(`NoWithVeto`)
+      expect(wrapper.vm.option).toEqual(`NoWithVeto`)
 
-      wrapper.vm.vote(`abstain`)
-      expect(wrapper.vm.option).toEqual(`abstain`)
+      wrapper.vm.vote(`Abstain`)
+      expect(wrapper.vm.option).toEqual(`Abstain`)
 
-      wrapper.vm.vote(`abstain`)
+      wrapper.vm.vote(`Abstain`)
       expect(wrapper.vm.option).toEqual(``)
     })
 
     it(`Vote button casts a vote and closes modal`, () => {
-      wrapper.setData({ option: `yes` })
+      wrapper.setData({ option: `Yes` })
       wrapper.vm.onVote()
 
       expect(wrapper.emittedByOrder()).toEqual([
         {
           name: `castVote`,
-          args: [{ option: `yes` }]
+          args: [{ option: `Yes` }]
         },
         {
           name: `update:showModalVote`,
diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index d9a64b5a8e..8dc229441c 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -72,7 +72,7 @@ describe(`PageGovernance`, () => {
           description: `a valid description for the proposal`,
           type: `Text`
         }
-        xit(`success`, async () => {
+        it(`success`, async () => {
           $store.dispatch = jest.fn()
 
           const wrapper = mount(PageGovernance, {
@@ -122,6 +122,7 @@ describe(`PageGovernance`, () => {
               }
             }
           })
+
           await wrapper.vm.propose(proposal)
 
           expect($store.dispatch.mock.calls).toEqual([
diff --git a/test/unit/specs/components/governance/PageProposal.spec.js b/test/unit/specs/components/governance/PageProposal.spec.js
index ee1275b71f..aeedbb1028 100644
--- a/test/unit/specs/components/governance/PageProposal.spec.js
+++ b/test/unit/specs/components/governance/PageProposal.spec.js
@@ -124,17 +124,17 @@ describe(`PageProposal`, () => {
             }
           })
 
-          await wrapper.vm.castVote({ option: `no_with_veto` })
+          await wrapper.vm.castVote({ option: `NoWithVeto` })
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitVote`, { option: `no_with_veto`, proposalId: `1` }]
+            [`submitVote`, { option: `NoWithVeto`, proposal_id: `1` }]
           ])
 
           expect($store.commit.mock.calls).toEqual([
             [
               `notify`,
               {
-                body: `You have successfully voted no_with_veto on proposal #1`,
+                body: `You have successfully voted NoWithVeto on proposal #1`,
                 title: `Successful vote!`
               }
             ]
@@ -164,10 +164,10 @@ describe(`PageProposal`, () => {
             }
           })
 
-          await wrapper.vm.castVote({ option: `abstain` })
+          await wrapper.vm.castVote({ option: `Abstain` })
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitVote`, { option: `abstain`, proposalId: `1` }]
+            [`submitVote`, { option: `Abstain`, proposal_id: `1` }]
           ])
 
           expect($store.commit.mock.calls).toEqual([
@@ -204,10 +204,23 @@ describe(`PageProposal`, () => {
             }
           })
 
-          await wrapper.vm.deposit({ amount: 15 })
+          let amount = [
+            {
+              amount: `15`,
+              denom: `atom`
+            }
+          ]
+
+          await wrapper.vm.deposit({ amount })
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitDeposit`, { amount: 15, proposalId: `2` }]
+            [
+              `submitDeposit`,
+              {
+                amount,
+                proposal_id: `2`
+              }
+            ]
           ])
 
           expect($store.commit.mock.calls).toEqual([
@@ -243,11 +256,23 @@ describe(`PageProposal`, () => {
               status: { message: `message` }
             }
           })
+          let amount = [
+            {
+              amount: `9`,
+              denom: `atom`
+            }
+          ]
 
-          await wrapper.vm.deposit({ amount: 9 })
+          await wrapper.vm.deposit({ amount })
 
           expect($store.dispatch.mock.calls).toEqual([
-            [`submitDeposit`, { amount: 9, proposalId: `2` }]
+            [
+              `submitDeposit`,
+              {
+                amount,
+                proposal_id: `2`
+              }
+            ]
           ])
 
           expect($store.commit.mock.calls).toEqual([
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 1112c21f9b..5f7722d6c9 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -45,7 +45,7 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
          <a href=\\"#/governance/proposals\\" class=\\"\\">Proposals</a>
       </div>
 </div>
-   <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--secondary\\">
+   <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--primary\\">
    <!---->
    <!---->
    <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
diff --git a/test/unit/specs/store/governance/deposits.spec.js b/test/unit/specs/store/governance/deposits.spec.js
index 5a5512c5b4..3ef50dba99 100644
--- a/test/unit/specs/store/governance/deposits.spec.js
+++ b/test/unit/specs/store/governance/deposits.spec.js
@@ -26,12 +26,12 @@ describe(`Module: Deposits`, () => {
     let { actions, state } = module
     let commit = jest.fn()
     proposals.forEach(async (proposal, i) => {
-      let proposalID = proposal.proposal_id
-      await actions.getProposalDeposits({ state, commit }, proposalID)
+      let proposalId = proposal.proposal_id
+      await actions.getProposalDeposits({ state, commit }, proposalId)
       expect(commit.mock.calls[i]).toEqual([
         `setProposalDeposits`,
-        proposalID,
-        deposits[proposalID]
+        proposalId,
+        deposits[proposalId]
       ])
     })
   })
@@ -41,36 +41,33 @@ describe(`Module: Deposits`, () => {
     jest.useFakeTimers()
 
     const rootState = {
-      config: {
-        bondingDenom: `stake`
-      },
       wallet: {
         address: addresses[0]
       }
     }
 
     let dispatch = jest.fn()
-    const amount = 15
+    const amount = [
+      {
+        denom: `stake`,
+        amount: `15`
+      }
+    ]
 
     proposals.forEach(async (proposal, i) => {
       await actions.submitDeposit(
         { rootState, dispatch },
-        proposal.proposal_id,
-        amount
+        { proposal_id: proposal.proposal_id, amount }
       )
 
       expect(dispatch.mock.calls[i]).toEqual([
         `sendTx`,
         {
           type: `submitProposalDeposit`,
+          to: proposal.proposal_id,
           proposal_id: proposal.proposal_id,
           depositer: addresses[0],
-          amount: [
-            {
-              denom: rootState.config.bondingDenom,
-              amount: String(amount)
-            }
-          ]
+          amount
         }
       ])
 
diff --git a/test/unit/specs/store/governance/votes.spec.js b/test/unit/specs/store/governance/votes.spec.js
index c63bcd95aa..b1fa4e3a09 100644
--- a/test/unit/specs/store/governance/votes.spec.js
+++ b/test/unit/specs/store/governance/votes.spec.js
@@ -51,16 +51,16 @@ describe(`Module: Votes`, () => {
     proposals.forEach(async (proposal, i) => {
       await actions.submitVote(
         { rootState, dispatch },
-        proposal.proposal_id,
-        `yes`
+        { proposal_id: proposal.proposal_id, option: `Yes` }
       )
       expect(dispatch.mock.calls[i]).toEqual([
         `sendTx`,
         {
           type: `submitProposalVote`,
+          to: proposal.proposal_id,
           proposal_id: proposal.proposal_id,
           voter: addresses[0],
-          option: `yes`
+          option: `Yes`
         }
       ])
 

From 9d2ceb2cb24f6a4b2e508ef57db19775c345fe5d Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 14:37:53 +0100
Subject: [PATCH 14/27] update Changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 939cacba48..44b6b2cbfe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1464](https://github.com/cosmos/voyager/issues/1464) Added governance transactions to tx history page @fedekunze
 * [\#1401](https://github.com/cosmos/voyager/issues/1401) Display governance proposals index. @fedekunze
 * [\#1472](https://github.com/cosmos/voyager/issues/1472) Added mock functionality for redelegation @fedekunze + @faboweb
-* [\#1402](https://github.com/cosmos/voyager/issues/1402) Proposal creation. @NodeGuy
+* [\#1402](https://github.com/cosmos/voyager/issues/1402) Proposal creation through modal @fedekunze + @NodeGuy
 * [\#1501](https://github.com/cosmos/voyager/issues/1501) Vote on proposals through modal @fedekunze + @jbibla
 * [\#1567](https://github.com/cosmos/voyager/pull/1567) Various refactors on `main`, `node` and `lcdClient`. @NodeGuy
 * [\#1502](https://github.com/cosmos/voyager/issues/1502) A page for each proposal. @jbibla
@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1131](https://github.com/cosmos/voyager/issues/1131) Display only error message on notifications @fedekunze
 * [\#1440](https://github.com/cosmos/voyager/issues/1440) Fixed an error that prevented disconnecting from the RPC websocket if it wasn't defined @fedekunze
 * [\#1460](https://github.com/cosmos/voyager/issues/1460) Removing release-candidate tag when publishing @faboweb
+* [\#1402](https://github.com/cosmos/voyager/issues/1402) Fixed minor issues in voting and deposit @fedekunze
 
 ## [0.10.7] - 2018-10-10
 

From aea68e40027b66e3e5406660cbb4ea21571bde15 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 14:38:27 +0100
Subject: [PATCH 15/27] update Changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44b6b2cbfe..03969e7f2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1464](https://github.com/cosmos/voyager/issues/1464) Added governance transactions to tx history page @fedekunze
 * [\#1401](https://github.com/cosmos/voyager/issues/1401) Display governance proposals index. @fedekunze
 * [\#1472](https://github.com/cosmos/voyager/issues/1472) Added mock functionality for redelegation @fedekunze + @faboweb
-* [\#1402](https://github.com/cosmos/voyager/issues/1402) Proposal creation through modal @fedekunze + @NodeGuy
+* [\#1402](https://github.com/cosmos/voyager/issues/1402) Proposal creation through modal @fedekunze + @NodeGuy + @jbibla
 * [\#1501](https://github.com/cosmos/voyager/issues/1501) Vote on proposals through modal @fedekunze + @jbibla
 * [\#1567](https://github.com/cosmos/voyager/pull/1567) Various refactors on `main`, `node` and `lcdClient`. @NodeGuy
 * [\#1502](https://github.com/cosmos/voyager/issues/1502) A page for each proposal. @jbibla

From c772b509e8520760567d3d2f7d5cd93c92c4e954 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 15:31:15 +0100
Subject: [PATCH 16/27] test PageProposal still failing

---
 .../governance/PageGovernance.spec.js         | 78 ++++++++++++-------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index 8dc229441c..5c1242be45 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -49,23 +49,6 @@ describe(`PageGovernance`, () => {
   describe(`without magic`, () => {
     describe(`Propose`, () => {
       describe(`unit`, () => {
-        let $store = {
-          commit: jest.fn(),
-          getters: {
-            proposals: lcdClientMock.state.proposals,
-            filters: {
-              proposals: {
-                search: {
-                  visible: false,
-                  query: ``
-                }
-              }
-            },
-            bondingDenom: `Stake`,
-            totalAtoms: 100,
-            user: { atoms: 42, history: [] }
-          }
-        }
         let proposal = {
           amount: 15,
           title: `A new text proposal for Cosmos`,
@@ -73,13 +56,32 @@ describe(`PageGovernance`, () => {
           type: `Text`
         }
         it(`success`, async () => {
-          $store.dispatch = jest.fn()
+          let $store = {
+            commit: jest.fn(),
+            dispatch: jest.fn(),
+            getters: {
+              proposals: lcdClientMock.state.proposals,
+              filters: {
+                proposals: {
+                  search: {
+                    visible: false,
+                    query: ``
+                  }
+                }
+              },
+              bondingDenom: `Stake`,
+              totalAtoms: 100,
+              user: { atoms: 42, history: [] }
+            }
+          }
 
           const wrapper = mount(PageGovernance, {
             mocks: {
               $store,
               $route: {
-                name: `routeName`
+                name: `Governance`,
+                path: `/governance`,
+                fullPath: `/governance`
               }
             }
           })
@@ -113,12 +115,32 @@ describe(`PageGovernance`, () => {
             throw new Error(`unexpected error`)
           })
 
-          $store.dispatch = dispatch
+          let $store = {
+            commit: jest.fn(),
+            dispatch,
+            getters: {
+              proposals: lcdClientMock.state.proposals,
+              filters: {
+                proposals: {
+                  search: {
+                    visible: false,
+                    query: ``
+                  }
+                }
+              },
+              bondingDenom: `Stake`,
+              totalAtoms: 100,
+              user: { atoms: 42, history: [] }
+            }
+          }
+
           const wrapper = mount(PageGovernance, {
             mocks: {
               $store,
               $route: {
-                name: `routeName`
+                name: `Governance`,
+                path: `/governance`,
+                fullPath: `/governance`
               }
             }
           })
@@ -137,12 +159,14 @@ describe(`PageGovernance`, () => {
             ]
           ])
 
-          expect($store.commit.mock.calls[1]).toEqual([
-            `notifyError`,
-            {
-              body: `unexpected error`,
-              title: `Error while submitting a new text proposal`
-            }
+          expect($store.commit.mock.calls).toEqual([
+            [
+              `notifyError`,
+              {
+                body: `unexpected error`,
+                title: `Error while submitting a new text proposal`
+              }
+            ]
           ])
         })
       })

From d79bf6460439cd327b96f258c1ae65847f45e9a2 Mon Sep 17 00:00:00 2001
From: David Braun <David@Tendermint.com>
Date: Thu, 15 Nov 2018 12:33:13 -0500
Subject: [PATCH 17/27] Fix broken tests in PageGovernance.

---
 .../governance/PageGovernance.spec.js         | 143 ++++++++----------
 .../__snapshots__/PageGovernance.spec.js.snap | 140 +++--------------
 2 files changed, 84 insertions(+), 199 deletions(-)

diff --git a/test/unit/specs/components/governance/PageGovernance.spec.js b/test/unit/specs/components/governance/PageGovernance.spec.js
index 5c1242be45..b549fb9126 100644
--- a/test/unit/specs/components/governance/PageGovernance.spec.js
+++ b/test/unit/specs/components/governance/PageGovernance.spec.js
@@ -6,6 +6,13 @@ import ModalPropose from "renderer/components/governance/ModalPropose"
 import lcdClientMock from "renderer/connectors/lcdClientMock.js"
 import { mount } from "@vue/test-utils"
 
+const proposal = {
+  amount: 15,
+  title: `A new text proposal for Cosmos`,
+  description: `a valid description for the proposal`,
+  type: `Text`
+}
+
 describe(`PageGovernance`, () => {
   describe(`with magic`, () => {
     let wrapper, store
@@ -22,16 +29,6 @@ describe(`PageGovernance`, () => {
       wrapper.update()
     })
 
-    it(`has the expected html structure`, async () => {
-      // after importing the @tendermint/ui components from modules
-      // the perfect scroll plugin needs a $nextTick and a wrapper.update
-      // to work properly in the tests (snapshots weren't matching)
-      // this has occured across multiple tests
-      await wrapper.vm.$nextTick()
-      wrapper.update()
-      expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-    })
-
     it(`should show the search on click`, () => {
       wrapper.find(`.tm-tool-bar i.search`).trigger(`click`)
       expect(wrapper.contains(`.tm-modal-search`)).toBe(true)
@@ -47,47 +44,62 @@ describe(`PageGovernance`, () => {
   })
 
   describe(`without magic`, () => {
-    describe(`Propose`, () => {
-      describe(`unit`, () => {
-        let proposal = {
-          amount: 15,
-          title: `A new text proposal for Cosmos`,
-          description: `a valid description for the proposal`,
-          type: `Text`
-        }
-        it(`success`, async () => {
-          let $store = {
-            commit: jest.fn(),
-            dispatch: jest.fn(),
-            getters: {
-              proposals: lcdClientMock.state.proposals,
-              filters: {
-                proposals: {
-                  search: {
-                    visible: false,
-                    query: ``
-                  }
-                }
-              },
-              bondingDenom: `Stake`,
-              totalAtoms: 100,
-              user: { atoms: 42, history: [] }
+    const mountWrapper = (
+      { commit, dispatch } = { commit: jest.fn(), dispatch: jest.fn() }
+    ) => {
+      let $store = {
+        commit,
+        dispatch,
+        getters: {
+          lastHeader: null,
+          lastPage: null,
+          proposals: lcdClientMock.state.proposals,
+          filters: {
+            proposals: {
+              search: {
+                visible: false,
+                query: ``
+              }
             }
+          },
+          bondingDenom: `Stake`,
+          totalAtoms: 100,
+          user: { atoms: 42, history: [] }
+        }
+      }
+
+      return mount(PageGovernance, {
+        mocks: {
+          $store,
+          $route: {
+            name: `Governance`,
+            path: `/governance`,
+            fullPath: `/governance`
           }
+        }
+      })
+    }
 
-          const wrapper = mount(PageGovernance, {
-            mocks: {
-              $store,
-              $route: {
-                name: `Governance`,
-                path: `/governance`,
-                fullPath: `/governance`
-              }
-            }
-          })
+    it(`has the expected html structure`, async () => {
+      // after importing the @tendermint/ui components from modules
+      // the perfect scroll plugin needs a $nextTick and a wrapper.update
+      // to work properly in the tests (snapshots weren't matching)
+      // this has occured across multiple tests
+      const wrapper = mountWrapper()
+      await wrapper.vm.$nextTick()
+      wrapper.update()
+      expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+    })
+
+    describe(`Propose`, () => {
+      describe(`unit`, () => {
+        it(`success`, async () => {
+          const commit = jest.fn()
+          const dispatch = jest.fn()
+          const wrapper = mountWrapper({ commit, dispatch })
           await wrapper.vm.propose(proposal)
 
-          expect($store.dispatch.mock.calls).toEqual([
+          expect(dispatch.mock.calls).toEqual([
             [
               `submitProposal`,
               {
@@ -99,7 +111,7 @@ describe(`PageGovernance`, () => {
             ]
           ])
 
-          expect($store.commit.mock.calls).toEqual([
+          expect(commit.mock.calls).toEqual([
             [
               `notify`,
               {
@@ -111,43 +123,16 @@ describe(`PageGovernance`, () => {
         })
 
         it(`error`, async () => {
+          const commit = jest.fn()
+
           const dispatch = jest.fn(() => {
             throw new Error(`unexpected error`)
           })
 
-          let $store = {
-            commit: jest.fn(),
-            dispatch,
-            getters: {
-              proposals: lcdClientMock.state.proposals,
-              filters: {
-                proposals: {
-                  search: {
-                    visible: false,
-                    query: ``
-                  }
-                }
-              },
-              bondingDenom: `Stake`,
-              totalAtoms: 100,
-              user: { atoms: 42, history: [] }
-            }
-          }
-
-          const wrapper = mount(PageGovernance, {
-            mocks: {
-              $store,
-              $route: {
-                name: `Governance`,
-                path: `/governance`,
-                fullPath: `/governance`
-              }
-            }
-          })
-
+          const wrapper = mountWrapper({ commit, dispatch })
           await wrapper.vm.propose(proposal)
 
-          expect($store.dispatch.mock.calls).toEqual([
+          expect(dispatch.mock.calls).toEqual([
             [
               `submitProposal`,
               {
@@ -159,7 +144,7 @@ describe(`PageGovernance`, () => {
             ]
           ])
 
-          expect($store.commit.mock.calls).toEqual([
+          expect(commit.mock.calls).toEqual([
             [
               `notifyError`,
               {
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 5f7722d6c9..6f2e5ac772 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageGovernance with magic has the expected html structure 1`] = `
+exports[`PageGovernance without magic has the expected html structure 1`] = `
 "<div class=\\"tm-page governance\\" data-title=\\"Governance\\">
    <header class=\\"tm-page-header\\">
       <div class=\\"tm-page-header-container\\">
@@ -15,18 +15,18 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
                      </div>
    <div class=\\"total-atoms top-section\\">
       <h3>
-         Total Steak
+         Total Stake
       </h3>
       <h2>
-         1,351.0000…
+         100.0000…
       </h2>
 </div>
    <div class=\\"unbonded-atoms top-section\\">
       <h3>
-         Available Steak
+         Available Stake
       </h3>
       <h2>
-         1,337.0000…
+         42.0000…
       </h2>
 </div>
       <!---->
@@ -34,7 +34,7 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
 </div>
    <div class=\\"short-bech32\\">
       <div id=\\"address\\" class=\\"address\\">
-         cosmos…xxn9
+         Address Not Found
       </div>
    <div class=\\"copied\\">
       <i class=\\"material-icons\\">check</i><span>Copied</span>
@@ -42,8 +42,10 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
 </div>
    <div class=\\"tabs\\">
       <div class=\\"tab\\">
-         <a href=\\"#/governance/proposals\\" class=\\"\\">Proposals</a>
-      </div>
+         <router-link to=\\"[object Object]\\">
+            Proposals
+         </router-link>
+</div>
 </div>
    <button class=\\"tm-btn\\" id=\\"propose-btn\\"><span class=\\"tm-btn__container tm-btn--primary\\">
    <!---->
@@ -51,7 +53,11 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
    <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
 </div>
    <div class=\\"tm-tool-bar\\">
-      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a>
+      <router-link to=\\"/preferences\\" class=\\"settings\\">
+         <i id=\\"settings\\" class=\\"material-icons\\">settings</i>
+      </router-link>
+      <a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
    </div>
 </div>
 </div>
@@ -63,118 +69,12 @@ exports[`PageGovernance with magic has the expected html structure 1`] = `
 <main class=\\"tm-page-main ps\\">
    <!---->
    <!---->
-   <div class=\\"tm-page\\" data-title=\\"Wallet\\">
-      <header class=\\"tm-page-header\\">
-         <div class=\\"tm-page-header-container\\">
-            <div class=\\"tm-page-header-text\\">
-               <!---->
-               <!---->
-               <div class=\\"tm-page-header-body\\">
-                  <div class=\\"header-balance\\">
-                     <div class=\\"top\\">
-                        <div class=\\"icon-container\\">
-                           <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon\\">
-                        </div>
-      <div class=\\"total-atoms top-section\\">
-         <h3>
-            Total Steak
-         </h3>
-         <h2>
-            1,351.0000…
-         </h2>
-</div>
-      <div class=\\"unbonded-atoms top-section\\">
-         <h3>
-            Available Steak
-         </h3>
-         <h2>
-            1,337.0000…
-         </h2>
-</div>
-         <!---->
-         <!---->
-   </div>
-      <div class=\\"short-bech32\\">
-         <div id=\\"address\\" class=\\"address\\">
-            cosmos…xxn9
-         </div>
-      <div class=\\"copied\\">
-         <i class=\\"material-icons\\">check</i><span>Copied</span>
-      </div>
-</div>
-      <div class=\\"tabs\\"></div>
-</div>
-      <div class=\\"tm-tool-bar\\">
-         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-      </div>
-</div>
-</div>
-      <menu class=\\"tm-page-header-menu\\">
-         <div></div>
-</menu>
-</div>
-</header>
-   <main class=\\"tm-page-main ps\\">
-      <!---->
-      <section class=\\"tm-part\\">
-         <div class=\\"tm-part-container\\">
-            <header class=\\"tm-part-header\\">
-               <div class=\\"tm-part-header-container\\">
-                  <div class=\\"tm-part-title h5\\">
-                     Your Address
-                  </div>
-            <menu class=\\"tm-part-menu\\"></menu>
-</div>
-</header>
-         <main class=\\"tm-part-main\\">
-            <!---->
-         </main>
-</div>
-</section>
-<section class=\\"tm-part\\" id=\\"part-available-balances\\">
-   <div class=\\"tm-part-container\\">
-      <header class=\\"tm-part-header\\">
-         <div class=\\"tm-part-header-container\\">
-            <div class=\\"tm-part-title h5\\">
-               Available Balances
-            </div>
-      <menu class=\\"tm-part-menu\\"></menu>
-</div>
-</header>
-   <main class=\\"tm-part-main\\">
-      <div class=\\"tm-data-msg\\">
-         <div class=\\"tm-data-msg__icon\\">
-            <i class=\\"material-icons fa-spin\\">rotate_right</i>
-         </div>
-      <div class=\\"tm-data-msg__text\\">
-         <div class=\\"tm-data-msg__title\\">
-            <div>
-               Data is loading…
-            </div>
-</div>
-      <div class=\\"tm-data-msg__subtitle\\">
-         <div>
-            Please wait a moment.
-         </div>
-</div>
-</div>
-</div>
-</main>
-</div>
-</section>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</main>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+   <router-view></router-view>
+   <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+      <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
 </div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+   <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+      <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </main>
 </div>"

From 325b5ce6851720f5b708e150a5dfa25efd466ccd Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 23:00:53 +0100
Subject: [PATCH 18/27] fix vm-tool-bar on preferences

---
 app/src/renderer/components/common/PagePreferences.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index 9c5a54c67a..a4091a87d4 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
 tm-page(data-title="Preferences")
-  div(slot="menu"): vm-tool-bar
+  template(slot="menu-body")
+    tm-balance
+    vm-tool-bar
 
   tm-part(title='Settings')
     tm-list-item(type="field" title="Select network to connect to")
@@ -48,11 +50,13 @@ tm-page(data-title="Preferences")
 import { mapGetters } from "vuex"
 import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
 import VmToolBar from "common/VmToolBar"
+import TmBalance from "common/TmBalance"
 import TmModal from "common/TmModal"
 
 export default {
   name: `page-preferences`,
   components: {
+    TmBalance,
     TmBtn,
     TmField,
     TmListItem,

From 36cfc1533b82a452e0e49bdacb47a5376f65a61b Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Thu, 15 Nov 2018 23:11:42 +0100
Subject: [PATCH 19/27] snapshot

---
 .../PagePreferences.spec.js.snap              | 141 +++++++++++++-----
 1 file changed, 102 insertions(+), 39 deletions(-)

diff --git a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
index 609667667c..45dc3b1ba7 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -16,58 +16,121 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
       >
         <!---->
         <!---->
-        <!---->
-      </div>
-      <menu
-        class="tm-page-header-menu"
-      >
-        <div>
-          <div>
+        <div
+          class="tm-page-header-body"
+        >
+          <div
+            class="header-balance"
+          >
             <div
-              class="tm-tool-bar"
+              class="top"
             >
-              <a
-                class="back"
-                disabled="disabled"
+              <div
+                class="icon-container"
               >
-                <i
-                  class="material-icons"
-                >
-                  arrow_back
-                </i>
-              </a>
-              <a
-                class="help"
+                <img
+                  class="icon"
+                  src="~assets/images/cosmos-logo.png"
+                />
+              </div>
+              <div
+                class="total-atoms top-section"
               >
-                <i
-                  class="material-icons"
-                >
-                  help_outline
-                </i>
-              </a>
-              <a
-                class="settings"
-                href="#/preferences"
+                <h3>
+                  Total Steak
+                </h3>
+                <h2>
+                  1,000.0000…
+                </h2>
+              </div>
+              <div
+                class="unbonded-atoms top-section"
               >
-                <i
-                  class="material-icons"
-                  id="settings"
-                >
-                  settings
-                </i>
-              </a>
-              <a
-                id="signOut-btn"
+                <h3>
+                  Available Steak
+                </h3>
+                <h2>
+                  1,000.0000…
+                </h2>
+              </div>
+              <!---->
+              <!---->
+            </div>
+            <div
+              class="short-bech32"
+            >
+              <div
+                class="address"
+                id="address"
+              >
+                cosmos…xxn9
+              </div>
+              <div
+                class="copied"
               >
                 <i
                   class="material-icons"
                 >
-                  exit_to_app
+                  check
                 </i>
-              </a>
+                <span>
+                  Copied
+                </span>
+              </div>
             </div>
+            <div
+              class="tabs"
+            />
+          </div>
+          <div
+            class="tm-tool-bar"
+          >
+            <a
+              class="back"
+              disabled="disabled"
+            >
+              <i
+                class="material-icons"
+              >
+                arrow_back
+              </i>
+            </a>
+            <a
+              class="help"
+            >
+              <i
+                class="material-icons"
+              >
+                help_outline
+              </i>
+            </a>
+            <a
+              class="settings"
+              href="#/preferences"
+            >
+              <i
+                class="material-icons"
+                id="settings"
+              >
+                settings
+              </i>
+            </a>
+            <a
+              id="signOut-btn"
+            >
+              <i
+                class="material-icons"
+              >
+                exit_to_app
+              </i>
+            </a>
           </div>
         </div>
+      </div>
+      <menu
+        class="tm-page-header-menu"
+      >
+        <div />
       </menu>
     </div>
   </header>

From 45c600be8238f3954a8de08d056942ab508de16a Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Fri, 16 Nov 2018 00:45:48 +0100
Subject: [PATCH 20/27] try and catch error from e2e

---
 app/src/renderer/components/wallet/PageWallet.vue | 2 +-
 test/e2e/common.js                                | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index cf34121e50..6b381d5bfe 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(data-title="Wallet")
-  template(slot="menu-body", v-if="config.devMode")
+  template(slot="menu-body")
     tm-balance
     vm-tool-bar
       a(@click='connected && updateBalances()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
diff --git a/test/e2e/common.js b/test/e2e/common.js
index 8d6e0dab47..481ea11020 100644
--- a/test/e2e/common.js
+++ b/test/e2e/common.js
@@ -11,6 +11,7 @@ function sleep(ms) {
 module.exports = {
   async closeNotifications(app) {
     // close notifications as they overlay the menu button
+    console.log(`closing notifications`)
     await sleep(100)
     while (await app.client.isExisting(`.tm-notification`)) {
       await app.client.$(`.tm-notification`).click()
@@ -61,7 +62,12 @@ module.exports = {
   async navigateToPreferences(app) {
     await module.exports.openMenu(app)
     // click link
-    await app.client.$(`#settings`).click()
+    await app.client.waitForExist(`#settings`, 1000)
+    try {
+      await app.client.$(`#settings`).click()
+    } catch (err) {
+      console.log(`error on clicking settings: ${err}`)
+    }
     console.log(`navigated to preferences`)
   },
   sleep,

From 4a4765077f35bca1d2ab2494c3de850abbc426a0 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Fri, 16 Nov 2018 18:32:30 +0100
Subject: [PATCH 21/27] fixed e2e by setting window size

---
 .../renderer/components/common/VmToolBar.vue  |  7 ++--
 test/e2e/launch.js                            |  7 +++-
 test/e2e/signin.js                            |  2 --
 .../PagePreferences.spec.js.snap              |  4 +--
 .../__snapshots__/VmToolBar.spec.js.snap      |  2 +-
 .../__snapshots__/PageGovernance.spec.js.snap |  6 +---
 .../__snapshots__/PageStaking.spec.js.snap    |  4 +--
 .../__snapshots__/PageSend.spec.js.snap       | 32 +++++--------------
 .../PageTransactions.spec.js.snap             |  8 ++---
 .../__snapshots__/PageWallet.spec.js.snap     |  8 ++---
 10 files changed, 28 insertions(+), 52 deletions(-)

diff --git a/app/src/renderer/components/common/VmToolBar.vue b/app/src/renderer/components/common/VmToolBar.vue
index 02ef19e5d0..217f68a83a 100644
--- a/app/src/renderer/components/common/VmToolBar.vue
+++ b/app/src/renderer/components/common/VmToolBar.vue
@@ -5,8 +5,8 @@
     slot
     a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
       i.material-icons help_outline
-    router-link.settings(to="/preferences" v-tooltip.bottom="'Preferences'")
-      i.material-icons#settings settings
+    a#settings(@click="goToPreferences" v-tooltip.bottom="'Preferences'")
+      i.material-icons settings
     a#signOut-btn(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
       i.material-icons exit_to_app
 </template>
@@ -31,6 +31,9 @@ export default {
     },
     signOut() {
       this.$store.dispatch(`signOut`)
+    },
+    goToPreferences() {
+      this.$router.push(`/preferences`)
     }
   },
   computed: {
diff --git a/test/e2e/launch.js b/test/e2e/launch.js
index 692e4b6acd..41f05b2252 100644
--- a/test/e2e/launch.js
+++ b/test/e2e/launch.js
@@ -114,7 +114,6 @@ function launch(t) {
       await stop(app)
 
       let accounts = await setupAccounts(initValues)
-
       await startApp(app, `.tm-session-title=Sign In`)
       t.ok(app.isRunning(), `app is running`)
 
@@ -208,6 +207,12 @@ async function writeLogs(app, location) {
 async function startApp(app, awaitingSelector = `.tm-session`) {
   console.log(`Starting app`)
   await app.start()
+  if (!app.browserWindow) {
+    console.log(`No browser window`)
+    return
+  }
+  app.browserWindow.setBounds({ x: 0, y: 0, width: 1600, height: 1024 })
+  app.browserWindow.setSize(1600, 1024)
 
   await app.client.waitForExist(awaitingSelector, 10 * 1000).catch(async e => {
     await handleCrash(app, e)
diff --git a/test/e2e/signin.js b/test/e2e/signin.js
index 36e9bc9801..9d1f998446 100644
--- a/test/e2e/signin.js
+++ b/test/e2e/signin.js
@@ -14,7 +14,6 @@ let { openMenu, login, sleep } = require(`./common.js`)
 
 test(`sign in`, async function(t) {
   let { app } = await getApp(t)
-
   await refresh(app)
   let el = (...args) => app.client.$(...args)
   // clicking the button does fail in webdriver as there is no actual click handler on the button
@@ -167,7 +166,6 @@ test(`sign in`, async function(t) {
     await login(app, `testkey`)
     await app.client.waitForExist(`#signOut-btn`, 1000)
     await app.client.$(`#signOut-btn`).click()
-
     await app.client.waitForExist(`.tm-session`, 1000)
 
     t.end()
diff --git a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
index 45dc3b1ba7..d499def450 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -105,12 +105,10 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
               </i>
             </a>
             <a
-              class="settings"
-              href="#/preferences"
+              id="settings"
             >
               <i
                 class="material-icons"
-                id="settings"
               >
                 settings
               </i>
diff --git a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
index 550c42f724..2a10bd0ada 100644
--- a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
@@ -2,6 +2,6 @@
 
 exports[`VmToolBar has the expected html structure 1`] = `
 "<div class=\\"tm-tool-bar\\">
-   <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+   <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
 </div>"
 `;
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 6f2e5ac772..819f4df1f9 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -53,11 +53,7 @@ exports[`PageGovernance without magic has the expected html structure 1`] = `
    <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
 </div>
    <div class=\\"tm-tool-bar\\">
-      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a>
-      <router-link to=\\"/preferences\\" class=\\"settings\\">
-         <i id=\\"settings\\" class=\\"material-icons\\">settings</i>
-      </router-link>
-      <a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
    </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
index 716c8c8655..99be89a88f 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -50,7 +50,7 @@ exports[`PageStaking has the expected html structure 1`] = `
 </div>
 </div>
    <div class=\\"tm-tool-bar\\">
-      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
    </div>
 </div>
 </div>
@@ -103,7 +103,7 @@ exports[`PageStaking has the expected html structure 1`] = `
       <div class=\\"tabs\\"></div>
 </div>
       <div class=\\"tm-tool-bar\\">
-         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i id=\\"settings\\" class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
       </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
index 0a33d04488..76c7c834e7 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -46,12 +46,10 @@ exports[`PageSend disables sending if not connected 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -377,12 +375,10 @@ exports[`PageSend has the expected html structure 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -736,12 +732,10 @@ exports[`PageSend should show address required error 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -1065,12 +1059,10 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -1394,12 +1386,10 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -1723,12 +1713,10 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -2063,12 +2051,10 @@ exports[`PageSend should trigger confirmation modal if form is corect 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
@@ -2482,12 +2468,10 @@ exports[`PageSend should work without providing a default denom 1`] = `
                 </i>
               </a>
               <a
-                class="settings"
-                href="#/preferences"
+                id="settings"
               >
                 <i
                   class="material-icons"
-                  id="settings"
                 >
                   settings
                 </i>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
index 78b03bf758..d43606359c 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -119,12 +119,10 @@ exports[`PageTransactions has the expected html structure 1`] = `
               </i>
             </a>
             <a
-              class="settings"
-              href="#/preferences"
+              id="settings"
             >
               <i
                 class="material-icons"
-                id="settings"
               >
                 settings
               </i>
@@ -335,12 +333,10 @@ exports[`PageTransactions should filter the transactions 1`] = `
               </i>
             </a>
             <a
-              class="settings"
-              href="#/preferences"
+              id="settings"
             >
               <i
                 class="material-icons"
-                id="settings"
               >
                 settings
               </i>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
index be2ad96528..2798a8fa51 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -119,12 +119,10 @@ exports[`PageWallet has the expected html structure 1`] = `
               </i>
             </a>
             <a
-              class="settings"
-              href="#/preferences"
+              id="settings"
             >
               <i
                 class="material-icons"
-                id="settings"
               >
                 settings
               </i>
@@ -546,12 +544,10 @@ exports[`PageWallet should filter the balances 1`] = `
               </i>
             </a>
             <a
-              class="settings"
-              href="#/preferences"
+              id="settings"
             >
               <i
                 class="material-icons"
-                id="settings"
               >
                 settings
               </i>

From 087844f8217caf48697885956e63c76cf3759475 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Fri, 16 Nov 2018 18:52:34 +0100
Subject: [PATCH 22/27] fix e2e

---
 test/e2e/launch.js | 2 ++
 test/e2e/signin.js | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/test/e2e/launch.js b/test/e2e/launch.js
index 41f05b2252..6b3cd96988 100644
--- a/test/e2e/launch.js
+++ b/test/e2e/launch.js
@@ -555,6 +555,8 @@ module.exports = {
     console.log(`restarting app`)
     await stop(app)
     await startApp(app, awaitingSelector)
+    app.browserWindow.setBounds({ x: 0, y: 0, width: 1600, height: 1024 })
+    app.browserWindow.setSize(1600, 1024)
   },
   refresh: async function(app, awaitingSelector = `.tm-session-title=Sign In`) {
     console.log(`refreshing app`)
diff --git a/test/e2e/signin.js b/test/e2e/signin.js
index 9d1f998446..886f0b16b4 100644
--- a/test/e2e/signin.js
+++ b/test/e2e/signin.js
@@ -16,6 +16,8 @@ test(`sign in`, async function(t) {
   let { app } = await getApp(t)
   await refresh(app)
   let el = (...args) => app.client.$(...args)
+  app.browserWindow.setBounds({ x: 0, y: 0, width: 1600, height: 1024 })
+  app.browserWindow.setSize(1600, 1024)
   // clicking the button does fail in webdriver as there is no actual click handler on the button
   async function clickContinue() {
     return app.client.submitForm(`.tm-session form`)
@@ -163,6 +165,8 @@ test(`sign in`, async function(t) {
 
   t.test(`sign out`, async function(t) {
     await refresh(app)
+    app.browserWindow.setBounds({ x: 0, y: 0, width: 1600, height: 1024 })
+    app.browserWindow.setSize(1600, 1024)
     await login(app, `testkey`)
     await app.client.waitForExist(`#signOut-btn`, 1000)
     await app.client.$(`#signOut-btn`).click()

From 41eb319d65feeb050dc3a9880598469dfc8d36ee Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Fri, 16 Nov 2018 19:01:08 +0100
Subject: [PATCH 23/27] test for redirect to preferences

---
 test/unit/specs/components/common/VmToolBar.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/test/unit/specs/components/common/VmToolBar.spec.js b/test/unit/specs/components/common/VmToolBar.spec.js
index 8cd0b433d8..3791d7d9dc 100644
--- a/test/unit/specs/components/common/VmToolBar.spec.js
+++ b/test/unit/specs/components/common/VmToolBar.spec.js
@@ -44,4 +44,9 @@ describe(`VmToolBar`, () => {
     expect(store.state.user.history.length).toBe(0)
     expect(router.currentRoute.fullPath).toBe(`/`)
   })
+
+  it(`redirects to preferences`, () => {
+    wrapper.vm.goToPreferences()
+    expect(router.currentRoute.fullPath).toBe(`/preferences`)
+  })
 })

From 59711f922a5f1b15fce610ae1fdf3967d746f1b2 Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Mon, 19 Nov 2018 11:40:13 +0100
Subject: [PATCH 24/27] updated block --> time

---
 .../components/governance/LiProposal.vue      | 10 ++-----
 .../components/governance/PageProposal.vue    | 20 +++++++-------
 .../components/governance/TableProposals.vue  | 22 ++++++---------
 .../governance/PageProposal.spec.js           | 27 ++++++++++---------
 .../__snapshots__/LiProposal.spec.js.snap     |  2 +-
 .../__snapshots__/PageProposal.spec.js.snap   |  4 +--
 .../__snapshots__/TabProposals.spec.js.snap   | 10 +++----
 .../__snapshots__/TableProposals.spec.js.snap | 16 +++++------
 8 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/app/src/renderer/components/governance/LiProposal.vue b/app/src/renderer/components/governance/LiProposal.vue
index 9950dc6d86..e5da21e635 100644
--- a/app/src/renderer/components/governance/LiProposal.vue
+++ b/app/src/renderer/components/governance/LiProposal.vue
@@ -3,9 +3,9 @@ tr.li-proposal
   td.li-proposal__value
     span.validator-profile__status(v-bind:class="status.color" v-tooltip.top="status.message")
     h2
-      router-link(:to="{ name: 'Proposal', params: { proposalId, proposal, status }}") {{ proposal.title }}
+      router-link(:to="{ name: 'Proposal', params: { proposalId: proposal.proposal_id, proposal, status }}") {{ proposal.title }}
     p {{ description }}
-  td {{ submitBlock }}
+  td {{ `#` + proposal.proposal_id }}
   td.li-proposal__value.yes {{ proposal.tally_result.yes }}
   td.li-proposal__value.no {{ proposal.tally_result.no }}
   td.li-proposal__value.no_with_veto {{ proposal.tally_result.no_with_veto }}
@@ -53,12 +53,6 @@ export default {
       return this.proposal.description.length > 100
         ? this.proposal.description.substring(0, 100) + `…`
         : this.proposal.description.substring(0, 100)
-    },
-    submitBlock() {
-      return `#` + num.prettyInt(this.proposal.submit_block)
-    },
-    proposalId() {
-      return this.proposal.proposal_id
     }
   },
   props: [`proposal`]
diff --git a/app/src/renderer/components/governance/PageProposal.vue b/app/src/renderer/components/governance/PageProposal.vue
index 85ba927151..13222e7a51 100644
--- a/app/src/renderer/components/governance/PageProposal.vue
+++ b/app/src/renderer/components/governance/PageProposal.vue
@@ -13,14 +13,14 @@ tm-page(data-title='Proposal')
           .top.column
             div.validator-profile__status-and-title
               span.validator-profile__status(v-bind:class="status.color" v-tooltip.top="status.message")
-              .validator-profile__header__name__title {{ proposal.title }}
+              .validator-profile__header__name__title {{ proposal.title }} {{ `(#` + proposal.proposal_id + `)`}}
           .column.validator-profile__header__actions
             tm-btn#vote-btn(v-if="status.button === 'vote'" value="Vote" color="primary" @click.native="onVote")
             tm-btn#deposit-btn(v-if="status.button === 'deposit'" value="Deposit" color="primary" @click.native="onDeposit")
             tm-btn(v-if="!status.button" disabled value="Deposit / Vote" color="primary")
 
         .row.description
-          p This {{ proposalType }} proposal ({{ `#` + proposal.proposal_id }}) was submitted at block {{ submitBlock }} and voting started at {{ voteBlock }}.
+          p Submitted {{ submittedAgo }}. {{ proposal.proposal_status === `DepositPeriod` ? `Deposit ends ` + depositEndsIn : `Voting started ` + votingStartedAgo }}
 
         .row.validator-profile__header__data.votes
           dl.colored_dl
@@ -64,6 +64,7 @@ tm-page(data-title='Proposal')
 </template>
 
 <script>
+import moment from "moment"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import { TmBtn, TmPage, TmToolBar } from "@tendermint/ui"
@@ -93,15 +94,14 @@ export default {
     proposalType() {
       return this.proposal.proposal_type.toLowerCase()
     },
-    submitBlock() {
-      return `#` + num.prettyInt(this.proposal.submit_block)
+    submittedAgo() {
+      return moment(new Date(this.proposal.submit_time)).fromNow()
     },
-    voteBlock() {
-      if (this.proposal.submit_block === this.proposal.voting_start_block)
-        return `the same block`
-      else {
-        return `block #` + num.prettyInt(this.proposal.voting_start_block)
-      }
+    votingStartedAgo() {
+      return moment(new Date(this.proposal.voting_start_block)).fromNow()
+    },
+    depositEndsIn() {
+      return moment(new Date(this.proposal.deposit_end_time)).fromNow()
     },
     totalVotes() {
       return (
diff --git a/app/src/renderer/components/governance/TableProposals.vue b/app/src/renderer/components/governance/TableProposals.vue
index 312a052f25..cc6172698b 100644
--- a/app/src/renderer/components/governance/TableProposals.vue
+++ b/app/src/renderer/components/governance/TableProposals.vue
@@ -54,18 +54,12 @@ export default {
 
       let copiedProposals = JSON.parse(JSON.stringify(this.proposals))
       return Object.values(copiedProposals).map(p => {
-        p.tally_result.yes = Math.round(
-          ratToBigNumber(p.tally_result.yes).toNumber()
-        )
-        p.tally_result.no = Math.round(
-          ratToBigNumber(p.tally_result.no).toNumber()
-        )
+        p.tally_result.yes = Math.round(parseFloat(p.tally_result.yes))
+        p.tally_result.no = Math.round(parseFloat(p.tally_result.no))
         p.tally_result.no_with_veto = Math.round(
-          ratToBigNumber(p.tally_result.no_with_veto).toNumber()
-        )
-        p.tally_result.abstain = Math.round(
-          ratToBigNumber(p.tally_result.abstain).toNumber()
+          parseFloat(p.tally_result.no_with_veto)
         )
+        p.tally_result.abstain = Math.round(parseFloat(p.tally_result.abstain))
         return p
       })
     },
@@ -95,10 +89,10 @@ export default {
           class: `proposal_title`
         },
         {
-          title: `Submitted Block`,
-          value: `submit_block`,
-          tooltip: `Block height when proposal was submitted`,
-          class: `submit_block`
+          title: `Proposal id`,
+          value: `proposal_id`,
+          tooltip: `Id of the proposal`,
+          class: `proposal_id`
         },
         {
           title: `Yes`,
diff --git a/test/unit/specs/components/governance/PageProposal.spec.js b/test/unit/specs/components/governance/PageProposal.spec.js
index aeedbb1028..7f18e07451 100644
--- a/test/unit/specs/components/governance/PageProposal.spec.js
+++ b/test/unit/specs/components/governance/PageProposal.spec.js
@@ -1,5 +1,6 @@
 "use strict"
 
+import moment from "moment"
 import Vuelidate from "vuelidate"
 import setup from "../../../helpers/vuex-setup"
 import PageProposal from "renderer/components/governance/PageProposal"
@@ -49,20 +50,22 @@ describe(`PageProposal`, () => {
       expect(wrapper.vm.$el).toMatchSnapshot()
     })
 
-    it(`should return the block number`, () => {
-      expect(wrapper.vm.voteBlock).toBe(`block #135`)
+    it(`should return the time of submission `, () => {
+      expect(wrapper.vm.submittedAgo).toEqual(
+        moment(new Date(proposal.submit_time)).fromNow()
+      )
     })
 
-    it(`should return the end of the sentence`, () => {
-      proposal.submit_block = `135`
-      let { wrapper } = mount(PageProposal, {
-        propsData: {
-          proposal,
-          status
-        }
-      })
-      wrapper.update()
-      expect(wrapper.vm.voteBlock).toBe(`the same block`)
+    it(`should return the time that voting started`, () => {
+      expect(wrapper.vm.votingStartedAgo).toEqual(
+        moment(new Date(proposal.voting_start_block)).fromNow()
+      )
+    })
+
+    it(`should return the time when deposits end`, () => {
+      expect(wrapper.vm.depositEndsIn).toEqual(
+        moment(new Date(proposal.deposit_end_time)).fromNow()
+      )
     })
 
     describe(`Modal onVote`, () => {
diff --git a/test/unit/specs/components/governance/__snapshots__/LiProposal.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/LiProposal.spec.js.snap
index 1539437151..1ccd349d10 100644
--- a/test/unit/specs/components/governance/__snapshots__/LiProposal.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/LiProposal.spec.js.snap
@@ -23,7 +23,7 @@ exports[`LiProposal has the expected html structure 1`] = `
     </p>
   </td>
   <td>
-    #120
+    #1
   </td>
   <td
     class="li-proposal__value yes"
diff --git a/test/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
index 08b8434499..b4abc47009 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
@@ -140,7 +140,7 @@ exports[`PageProposal with magic has the expected html structure 1`] = `
               <div
                 class="validator-profile__header__name__title"
               >
-                Proposal Title
+                Proposal Title (#1)
               </div>
             </div>
           </div>
@@ -171,7 +171,7 @@ exports[`PageProposal with magic has the expected html structure 1`] = `
           class="row description"
         >
           <p>
-            This text proposal (#1) was submitted at block #120 and voting started at block #135.
+            Submitted a few seconds ago. Voting started a few seconds ago
           </p>
         </div>
         <div
diff --git a/test/unit/specs/components/governance/__snapshots__/TabProposals.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/TabProposals.spec.js.snap
index b33b679f4f..329237f130 100644
--- a/test/unit/specs/components/governance/__snapshots__/TabProposals.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/TabProposals.spec.js.snap
@@ -8,8 +8,8 @@ exports[`TabProposals has the expected html structure 1`] = `
             <th class=\\"sort-by proposal_title\\">
                <a class=\\"sort-by-link\\">Title</a>
             </th>
-            <th class=\\"sort-by submit_block\\">
-               <a class=\\"sort-by-link\\">Submitted Block</a>
+            <th class=\\"sort-by proposal_id\\">
+               <a class=\\"sort-by-link\\">Proposal id</a>
             </th>
             <th class=\\"sort-by yes_votes\\">
                <a class=\\"sort-by-link\\">Yes</a>
@@ -37,7 +37,7 @@ exports[`TabProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #10
+               #5
             </td>
             <td class=\\"li-proposal__value yes\\">
                0
@@ -63,7 +63,7 @@ exports[`TabProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #10
+               #2
             </td>
             <td class=\\"li-proposal__value yes\\">
                0
@@ -89,7 +89,7 @@ exports[`TabProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #120
+               #1
             </td>
             <td class=\\"li-proposal__value yes\\">
                500
diff --git a/test/unit/specs/components/governance/__snapshots__/TableProposals.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/TableProposals.spec.js.snap
index 02a2e66c2c..bbf4b7c8f3 100644
--- a/test/unit/specs/components/governance/__snapshots__/TableProposals.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/TableProposals.spec.js.snap
@@ -8,8 +8,8 @@ exports[`TableProposals has the expected html structure 1`] = `
             <th class=\\"sort-by proposal_title\\">
                <a class=\\"sort-by-link\\">Title</a>
             </th>
-            <th class=\\"sort-by submit_block\\">
-               <a class=\\"sort-by-link\\">Submitted Block</a>
+            <th class=\\"sort-by proposal_id\\">
+               <a class=\\"sort-by-link\\">Proposal id</a>
             </th>
             <th class=\\"sort-by yes_votes\\">
                <a class=\\"sort-by-link\\">Yes</a>
@@ -37,7 +37,7 @@ exports[`TableProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #10
+               #5
             </td>
             <td class=\\"li-proposal__value yes\\">
                0
@@ -63,7 +63,7 @@ exports[`TableProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #10
+               #2
             </td>
             <td class=\\"li-proposal__value yes\\">
                0
@@ -89,7 +89,7 @@ exports[`TableProposals has the expected html structure 1`] = `
                </p>
 </td>
             <td>
-               #120
+               #1
             </td>
             <td class=\\"li-proposal__value yes\\">
                500
@@ -126,12 +126,12 @@ exports[`TableProposals should filter the proposals 1`] = `
           </a>
         </th>
         <th
-          class="sort-by submit_block"
+          class="sort-by proposal_id"
         >
           <a
             class="sort-by-link"
           >
-            Submitted Block
+            Proposal id
           </a>
         </th>
         <th
@@ -195,7 +195,7 @@ exports[`TableProposals should filter the proposals 1`] = `
           </p>
         </td>
         <td>
-          #10
+          #5
         </td>
         <td
           class="li-proposal__value yes"

From f907a94022191829d44709de3d65cd3dc19f9b9b Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Mon, 19 Nov 2018 11:44:22 +0100
Subject: [PATCH 25/27] lint & CHANGELOG

---
 CHANGELOG.md                                              | 1 +
 app/src/renderer/components/governance/LiProposal.vue     | 1 -
 app/src/renderer/components/governance/TableProposals.vue | 1 -
 3 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93fe21c74f..4e8cb5a7e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1410](https://github.com/cosmos/voyager/issues/1410) removed end undelegations as not needed in the SDK anymore
 * [\#1543](https://github.com/cosmos/voyager/issues/1543) updated unit tests to use `describe` and `it` instead of `test` @fedekunze
 * [\#1377](https://github.com/cosmos/voyager/issues/1377) deleted AppFooter page @fedekunze
+* [\#1582](https://github.com/cosmos/voyager/issues/1582) proposals now use time instead of block number @fedekunze
 
 ### Fixed
 
diff --git a/app/src/renderer/components/governance/LiProposal.vue b/app/src/renderer/components/governance/LiProposal.vue
index e5da21e635..f8efe69198 100644
--- a/app/src/renderer/components/governance/LiProposal.vue
+++ b/app/src/renderer/components/governance/LiProposal.vue
@@ -13,7 +13,6 @@ tr.li-proposal
 </template>
 
 <script>
-import num from "scripts/num"
 export default {
   name: `li-proposal`,
   computed: {
diff --git a/app/src/renderer/components/governance/TableProposals.vue b/app/src/renderer/components/governance/TableProposals.vue
index cc6172698b..d5dcfa189a 100644
--- a/app/src/renderer/components/governance/TableProposals.vue
+++ b/app/src/renderer/components/governance/TableProposals.vue
@@ -20,7 +20,6 @@ import { includes, orderBy } from "lodash"
 import LiProposal from "./LiProposal"
 import { TmDataEmpty, TmDataLoading } from "@tendermint/ui"
 import DataEmptySearch from "common/TmDataEmptySearch"
-import { ratToBigNumber } from "scripts/common"
 import ModalSearch from "common/TmModalSearch"
 import PanelSort from "staking/PanelSort"
 import VmToolBar from "common/VmToolBar"

From ad6730e9e48379cca19f1f19532cd455a9625a1a Mon Sep 17 00:00:00 2001
From: Federico Kunze <fekunze@berkeley.edu>
Date: Mon, 19 Nov 2018 12:10:52 +0100
Subject: [PATCH 26/27] Update toolbar and e2e

---
 app/src/renderer/components/common/VmToolBar.vue |  5 +----
 test/e2e/common.js                               |  6 +-----
 .../specs/components/common/VmToolBar.spec.js    |  5 -----
 .../__snapshots__/PagePreferences.spec.js.snap   |  2 ++
 .../common/__snapshots__/VmToolBar.spec.js.snap  |  2 +-
 .../__snapshots__/PageGovernance.spec.js.snap    |  6 +++++-
 .../__snapshots__/PageStaking.spec.js.snap       |  4 ++--
 .../wallet/__snapshots__/PageSend.spec.js.snap   | 16 ++++++++++++++++
 .../__snapshots__/PageTransactions.spec.js.snap  |  4 ++++
 .../wallet/__snapshots__/PageWallet.spec.js.snap |  4 ++++
 10 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/src/renderer/components/common/VmToolBar.vue b/app/src/renderer/components/common/VmToolBar.vue
index 217f68a83a..1770e0b49e 100644
--- a/app/src/renderer/components/common/VmToolBar.vue
+++ b/app/src/renderer/components/common/VmToolBar.vue
@@ -5,7 +5,7 @@
     slot
     a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
       i.material-icons help_outline
-    a#settings(@click="goToPreferences" v-tooltip.bottom="'Preferences'")
+    router-link#settings(to="/preferences" v-tooltip.bottom="'Preferences'")
       i.material-icons settings
     a#signOut-btn(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
       i.material-icons exit_to_app
@@ -31,9 +31,6 @@ export default {
     },
     signOut() {
       this.$store.dispatch(`signOut`)
-    },
-    goToPreferences() {
-      this.$router.push(`/preferences`)
     }
   },
   computed: {
diff --git a/test/e2e/common.js b/test/e2e/common.js
index 481ea11020..d47c76727c 100644
--- a/test/e2e/common.js
+++ b/test/e2e/common.js
@@ -63,11 +63,7 @@ module.exports = {
     await module.exports.openMenu(app)
     // click link
     await app.client.waitForExist(`#settings`, 1000)
-    try {
-      await app.client.$(`#settings`).click()
-    } catch (err) {
-      console.log(`error on clicking settings: ${err}`)
-    }
+    await app.client.$(`#settings`).click()
     console.log(`navigated to preferences`)
   },
   sleep,
diff --git a/test/unit/specs/components/common/VmToolBar.spec.js b/test/unit/specs/components/common/VmToolBar.spec.js
index 3791d7d9dc..8cd0b433d8 100644
--- a/test/unit/specs/components/common/VmToolBar.spec.js
+++ b/test/unit/specs/components/common/VmToolBar.spec.js
@@ -44,9 +44,4 @@ describe(`VmToolBar`, () => {
     expect(store.state.user.history.length).toBe(0)
     expect(router.currentRoute.fullPath).toBe(`/`)
   })
-
-  it(`redirects to preferences`, () => {
-    wrapper.vm.goToPreferences()
-    expect(router.currentRoute.fullPath).toBe(`/preferences`)
-  })
 })
diff --git a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
index d499def450..a952c6c688 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -105,6 +105,8 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
               </i>
             </a>
             <a
+              class=""
+              href="#/preferences"
               id="settings"
             >
               <i
diff --git a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
index 2a10bd0ada..d82d7fd222 100644
--- a/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap
@@ -2,6 +2,6 @@
 
 exports[`VmToolBar has the expected html structure 1`] = `
 "<div class=\\"tm-tool-bar\\">
-   <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+   <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"\\" id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
 </div>"
 `;
diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
index 819f4df1f9..729f85b849 100644
--- a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
+++ b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -53,7 +53,11 @@ exports[`PageGovernance without magic has the expected html structure 1`] = `
    <span class=\\"tm-btn__value\\">Create Proposal</span></span></button>
 </div>
    <div class=\\"tm-tool-bar\\">
-      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a>
+      <router-link id=\\"settings\\" to=\\"/preferences\\">
+         <i class=\\"material-icons\\">settings</i>
+      </router-link>
+      <a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
    </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
index 99be89a88f..b9788d677b 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -50,7 +50,7 @@ exports[`PageStaking has the expected html structure 1`] = `
 </div>
 </div>
    <div class=\\"tm-tool-bar\\">
-      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+      <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"\\" id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
    </div>
 </div>
 </div>
@@ -103,7 +103,7 @@ exports[`PageStaking has the expected html structure 1`] = `
       <div class=\\"tabs\\"></div>
 </div>
       <div class=\\"tm-tool-bar\\">
-         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
+         <a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a><i class=\\"material-icons\\">refresh</i></a><a disabled=\\"disabled\\"><i class=\\"material-icons\\">search</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"\\" id=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a>
       </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
index 76c7c834e7..48914d9b30 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -46,6 +46,8 @@ exports[`PageSend disables sending if not connected 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -375,6 +377,8 @@ exports[`PageSend has the expected html structure 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -732,6 +736,8 @@ exports[`PageSend should show address required error 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -1059,6 +1065,8 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -1386,6 +1394,8 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -1713,6 +1723,8 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -2051,6 +2063,8 @@ exports[`PageSend should trigger confirmation modal if form is corect 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
@@ -2468,6 +2482,8 @@ exports[`PageSend should work without providing a default denom 1`] = `
                 </i>
               </a>
               <a
+                class=""
+                href="#/preferences"
                 id="settings"
               >
                 <i
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
index d43606359c..7b90448f49 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -119,6 +119,8 @@ exports[`PageTransactions has the expected html structure 1`] = `
               </i>
             </a>
             <a
+              class=""
+              href="#/preferences"
               id="settings"
             >
               <i
@@ -333,6 +335,8 @@ exports[`PageTransactions should filter the transactions 1`] = `
               </i>
             </a>
             <a
+              class=""
+              href="#/preferences"
               id="settings"
             >
               <i
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
index 2798a8fa51..a7badd4b00 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -119,6 +119,8 @@ exports[`PageWallet has the expected html structure 1`] = `
               </i>
             </a>
             <a
+              class=""
+              href="#/preferences"
               id="settings"
             >
               <i
@@ -544,6 +546,8 @@ exports[`PageWallet should filter the balances 1`] = `
               </i>
             </a>
             <a
+              class=""
+              href="#/preferences"
               id="settings"
             >
               <i

From 4e2e3632c63d181981cfc13178e7e9963386d30f Mon Sep 17 00:00:00 2001
From: Federico Kunze <31522760+fedekunze@users.noreply.github.com>
Date: Mon, 19 Nov 2018 12:32:08 +0100
Subject: [PATCH 27/27] Update ModalPropose.vue

---
 app/src/renderer/components/governance/ModalPropose.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index a114a2412c..22ffac986f 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -71,7 +71,7 @@ export default {
     // TODO: get coin denom from governance params
     ...mapGetters([`wallet`]),
     balance() {
-      // TODO: refactor to get the selected coin when multicooin deposit is enabled
+      // TODO: refactor to get the selected coin when multicoin deposit is enabled
       if (!this.wallet.balancesLoading && !!this.wallet.balances.length) {
         let balance = this.wallet.balances.find(
           coin => coin.denom === this.denom