From d4a8b91e06178be0b27f6fdba025d4dcfef350f1 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 13 Jun 2018 16:45:30 +0200
Subject: [PATCH 01/31] replace TmBarDiscrete

---
 .../components/common/NiBarDiscrete.vue       | 80 -------------------
 .../components/common/NiOnboarding.vue        |  6 +-
 package.json                                  |  1 +
 .../components/common/NiBarDiscrete.spec.js   | 14 ----
 yarn.lock                                     |  8 +-
 5 files changed, 11 insertions(+), 98 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiBarDiscrete.vue
 delete mode 100644 test/unit/specs/components/common/NiBarDiscrete.spec.js

diff --git a/app/src/renderer/components/common/NiBarDiscrete.vue b/app/src/renderer/components/common/NiBarDiscrete.vue
deleted file mode 100644
index d6a509e5e5..0000000000
--- a/app/src/renderer/components/common/NiBarDiscrete.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template lang='pug'>
-.ni-bar-discrete: .ni-bar-discrete__container
-  .ni-bar-discrete__edge
-  .ni-bar-discrete__node(
-    v-for="(node, key) in nodes"
-    :key="key"
-    @click="clickFn(key)"
-    v-bind:class="classObject(key)")
-</template>
-
-<script>
-export default {
-  name: "ni-bar-discrete",
-  methods: {
-    classObject(key) {
-      return {
-        "ni-bar-discrete__node--active": key === this.active
-      }
-    }
-  },
-  props: ["nodes", "active", "click-fn"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-bar-discrete
-  padding 0 3rem
-  width 100%
-  max-width 24rem
-  margin 0 auto
-
-.ni-bar-discrete__container
-  height 2rem
-  display flex
-  align-items center
-  justify-content space-between
-  position relative
-
-.ni-bar-discrete__edge
-  position absolute
-  top 50%
-  left 0
-  right 0
-  content ''
-  height 2px
-  background var(--bc)
-
-.ni-bar-discrete__node
-  position relative
-  z-index 2
-  width 1rem
-  height 1rem
-  border 0.125rem solid var(--dim)
-  border-radius 0.5rem
-  background var(--app-bg)
-
-  &:hover
-    cursor pointer
-    border-color var(--hover)
-
-  &:before
-    content ''
-    position absolute
-    top 0.125rem
-    left 0.125rem
-    width 0.5rem
-    height 0.5rem
-    border-radius 0.5rem
-    background transparent
-
-  &:hover:before
-    background var(--hover)
-
-  &.ni-bar-discrete__node--active
-    border-color var(--mc)
-  &.ni-bar-discrete__node--active:before
-    background var(--mc)
-</style>
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/NiOnboarding.vue
index 23513ce6e8..0672e5640a 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/NiOnboarding.vue
@@ -6,7 +6,7 @@
     .ni-session-main
       .ni-session-label {{ activeValue }}
       img(:src="activeImg")
-      bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
+      tm-bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
     .ni-session-footer(v-if="activeKey === nodes.length - 1")
       btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
       btn(value="Finish" @click.native="finish" color="primary"
@@ -21,10 +21,10 @@
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import Btn from "@nylira/vue-button"
-import BarDiscrete from "common/NiBarDiscrete"
+import { TmBarDiscrete } from "@tendermint/ui"
 export default {
   name: "ni-onboarding",
-  components: { Btn, BarDiscrete },
+  components: { Btn, TmBarDiscrete },
   computed: {
     ...mapGetters(["onboarding"]),
     activeKey() {
diff --git a/package.json b/package.json
index 1f89a13b7d..21659a3b19 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "@nylira/vue-button": "4.4.3",
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
+    "@tendermint/ui": "tendermint/ui",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/test/unit/specs/components/common/NiBarDiscrete.spec.js b/test/unit/specs/components/common/NiBarDiscrete.spec.js
deleted file mode 100644
index 0176eac58f..0000000000
--- a/test/unit/specs/components/common/NiBarDiscrete.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiBarDiscrete from "common/NiBarDiscrete"
-
-describe("NiBarDiscrete", () => {
-  let wrapper
-  beforeEach(() => {
-    wrapper = mount(NiBarDiscrete)
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-})
diff --git a/yarn.lock b/yarn.lock
index 6e3fc18bd3..fd7f6ba90e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28,6 +28,12 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
+"@tendermint/ui@tendermint/ui":
+  version "0.1.0"
+  resolved "https://codeload.github.com/tendermint/ui/tar.gz/767e67b1497a009c819f4a5a74c6c0405f2359f3"
+  dependencies:
+    vue "^2.5.16"
+
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.1.tgz#1405e5396968c4302994b0161ce405b72b874257"
@@ -8894,7 +8900,7 @@ vue-template-es2015-compiler@1.6.0, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@2.5.16:
+vue@2.5.16, vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 

From 92ee58ea040e96b400ee7b58c6b41e28bacb5886 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 13 Jun 2018 19:34:03 +0200
Subject: [PATCH 02/31] replace vue-button and list-item

---
 .../renderer/components/common/AppMenu.vue    |  14 +-
 .../renderer/components/common/NiBtnCopy.vue  |   6 +-
 .../components/common/NiBtnReceive.vue        |   4 +-
 .../components/common/NiConnectedNetwork.vue  |   2 -
 .../renderer/components/common/NiListItem.vue | 287 ------------------
 .../components/common/NiModalError.vue        |   8 +-
 .../components/common/NiModalHelp.vue         |  10 +-
 .../components/common/NiModalLCDApproval.vue  |   8 +-
 .../components/common/NiModalReceive.vue      |   4 -
 .../components/common/NiModalSearch.vue       |  10 +-
 .../components/common/NiOnboarding.vue        |  13 +-
 .../common/NiSessionAccountDelete.vue         |   6 +-
 .../components/common/NiSessionImport.vue     |   6 +-
 .../components/common/NiSessionSignIn.vue     |   6 +-
 .../components/common/NiSessionSignUp.vue     |   6 +-
 .../components/common/NiSessionWelcome.vue    |   2 -
 .../renderer/components/common/NiUserPane.vue |   6 +-
 .../renderer/components/common/Page404.vue    |   8 +-
 .../components/common/PagePreferences.vue     |  21 +-
 .../components/govern/PageProposal.vue        |   8 +-
 .../components/govern/PageProposalsNew.vue    |  14 +-
 .../govern/PageProposalsNewAdjust.vue         |   6 +-
 .../govern/PageProposalsNewAmend.vue          |   6 +-
 .../govern/PageProposalsNewCreate.vue         |   6 +-
 .../govern/PageProposalsNewText.vue           |   6 +-
 .../govern/PageProposalsNewUpgrade.vue        |   6 +-
 .../renderer/components/monitor/PageBlock.vue |  32 +-
 .../components/monitor/PageBlocks.vue         |  14 +-
 .../components/staking/LiDelegate.vue         |   2 -
 .../renderer/components/staking/PageBond.vue  |   8 +-
 .../components/staking/PageDelegate.vue       |  16 +-
 .../components/staking/PageStaking.vue        |   8 +-
 .../renderer/components/wallet/PageSend.vue   |   8 +-
 .../renderer/components/wallet/PageWallet.vue |   1 -
 package.json                                  |   1 -
 .../components/common/NiListItem.spec.js      | 115 -------
 yarn.lock                                     |   4 -
 37 files changed, 131 insertions(+), 557 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiListItem.vue
 delete mode 100644 test/unit/specs/components/common/NiListItem.spec.js

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index bdd836f212..aa74a7e622 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -1,29 +1,29 @@
 <template lang="pug">
 menu.app-menu
   .app-menu-main
-    list-item#app-menu__wallet(
+    tm-list-item#app-menu__wallet(
       to="/"
       exact
       @click.native="close"
       title="Wallet")
-    list-item#app-menu__transactions(
+    tm-list-item#app-menu__transactions(
       to="/wallet/transactions"
       exact
       @click.native="close"
       title="Transactions"
       v-if="config.devMode || mockedConnector")
-    list-item#app-menu__staking(
+    tm-list-item#app-menu__staking(
       to="/staking"
       exact
       @click.native="close" title="Staking"
       v-bind:class="{ 'active': isValidatorPage }"
       v-if="config.devMode || mockedConnector")
-    list-item#app-menu__proposals(
+    tm-list-item#app-menu__proposals(
       to="/proposals"
       exact @click.native="close"
       title="Proposals"
       v-if="config.devMode")
-    list-item#app-menu__blocks(
+    tm-list-item#app-menu__blocks(
       to="/blocks"
       exact
       @click.native="close"
@@ -36,15 +36,13 @@ menu.app-menu
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
-import Btn from "@nylira/vue-button"
 import ConnectedNetwork from "common/NiConnectedNetwork"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import UserPane from "common/NiUserPane"
 import Part from "common/NiPart"
 export default {
   name: "app-menu",
   components: {
-    Btn,
     ConnectedNetwork,
     ListItem,
     Part,
diff --git a/app/src/renderer/components/common/NiBtnCopy.vue b/app/src/renderer/components/common/NiBtnCopy.vue
index 6acb6a9dd3..8ed3bf4cab 100644
--- a/app/src/renderer/components/common/NiBtnCopy.vue
+++ b/app/src/renderer/components/common/NiBtnCopy.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-btn.btn-copy(
+tm-btn.btn-copy(
   icon="content_copy"
   @click.native="click"
   value="Copy")
@@ -7,9 +7,9 @@ btn.btn-copy(
 
 <script>
 import { clipboard } from "electron"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
-  components: { Btn },
+  components: { TmBtn },
   computed: {
     notifyTitle() {
       if (this.title) return this.title
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/NiBtnReceive.vue
index 886fbfbfbf..9e34bd1862 100644
--- a/app/src/renderer/components/common/NiBtnReceive.vue
+++ b/app/src/renderer/components/common/NiBtnReceive.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-btn.btn-receive(
+tm-btn.btn-receive(
   @click.native.stop="openModal"
   value="Receive"
   icon="file_download"
@@ -9,7 +9,7 @@ btn.btn-receive(
 
 <script>
 import { clipboard } from "electron"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
   components: { Btn },
   methods: {
diff --git a/app/src/renderer/components/common/NiConnectedNetwork.vue b/app/src/renderer/components/common/NiConnectedNetwork.vue
index ff4992d7ce..41c7a0cfc8 100644
--- a/app/src/renderer/components/common/NiConnectedNetwork.vue
+++ b/app/src/renderer/components/common/NiConnectedNetwork.vue
@@ -18,11 +18,9 @@
 
 <script>
 import { mapGetters } from "vuex"
-import ListItem from "common/NiListItem"
 import num from "scripts/num"
 export default {
   name: "ni-connected-network",
-  components: { ListItem },
   computed: {
     ...mapGetters(["lastHeader", "nodeIP", "connected", "mockedConnector"]),
     cssClass() {
diff --git a/app/src/renderer/components/common/NiListItem.vue b/app/src/renderer/components/common/NiListItem.vue
deleted file mode 100644
index 5071378d9f..0000000000
--- a/app/src/renderer/components/common/NiListItem.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template lang="pug">
-mixin ni-li-thumb
-  .ni-li-thumb
-    template(v-if='icon'): i.material-icons(:class="spinClass") {{ icon }}
-    template(v-else-if='image'): img(:src='image')
-    template(v-else-if="$slots['graphic']"): slot(name='graphic')
-mixin ni-li-dl
-  .ni-li-dl
-    .ni-li-dt {{ dt }}
-    .ni-li-dd.ni-li-dd-flush(v-if="$slots['dd']"): slot(name='dd')
-    .ni-li-dd(v-else) {{ dd }}
-mixin ni-li-icon
-  .ni-li-icon
-    i.material-icons.inactive chevron_right
-    i.material-icons.active my_location
-mixin ni-li-label
-  .ni-li-label
-    .ni-li-title {{ title }}
-    .ni-li-subtitle {{ subtitle }}
-transition(name="proposal")
-  //- dt/dd anchor
-  a.ni-li.ni-li-link(v-if='dt && href' :href="href"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    +ni-li-icon
-
-  //- label and input
-  .ni-li.ni-li-field(v-else-if="type === 'field'"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    .ni-li-input: slot
-
-  //- dt/dd router-link
-  router-link.ni-li.ni-li-link(v-else-if="dt && to && !btn" :to="to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    +ni-li-icon
-
-  //- button router-link
-  router-link.ni-li.ni-li-link(v-else-if="btn && to" :to="to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    btn(:value="btn" icon="chevron_right" icon-pos="right" color="primary")
-
-  //- dt/dd text
-  .ni-li(v-else-if='dt'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-
-  //- title/subtitle anchor
-  a.ni-li.ni-li-link(v-else-if="href" :href="href"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    +ni-li-icon
-
-  //- title/subtitle router-link
-  router-link.ni-li.ni-li-link(v-else-if="to" :to='to'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    +ni-li-icon
-
-  //- button receive
-  .ni-li.ni-li-receive(v-else-if="title && btn && !to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    btn-receive
-
-  //- title/subtitle text
-  .ni-li(v-else-if='title'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-
-  //- image
-  .ni-li(v-else-if="type === 'image'"): .ni-li-container: slot
-</template>
-
-<script>
-import Btn from "@nylira/vue-button"
-import BtnReceive from "common/NiBtnReceive"
-export default {
-  name: "ni-list-item",
-  props: [
-    "type",
-    "title",
-    "subtitle",
-    "image",
-    "icon",
-    "to",
-    "dt",
-    "dd",
-    "href",
-    "btn",
-    "spin",
-    "overflow"
-  ],
-  components: { Btn, BtnReceive },
-  computed: {
-    spinClass() {
-      if (this.spin) {
-        return "fa-spin"
-      }
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-li
-  display block
-  min-height 3rem
-  position relative
-  border-bottom 2*px solid var(--bc-dim)
-
-  &:last-child
-    border-bottom 2*px solid transparent
-
-  &.ni-li-link
-    &:hover, &.router-link-exact-active
-      background var(--hover-bg)
-
-      .ni-li-label
-        cursor pointer
-
-      .ni-li-title
-        color var(--bright)
-
-    &:before
-      content ''
-      display block
-      position absolute
-      top 0
-      left 0
-      height 3rem
-      width bw
-      background transparent
-      z-index z(listItem)
-
-    .ni-li-dt
-    .ni-li-dd
-      color var(--link)
-
-  &.router-link-exact-active
-    .ni-li-title
-      color var(--bright)
-    &:before
-      background var(--mc)
-
-    .ni-li-icon
-      i.material-icons
-        color var(--mc)
-
-.ni-li-label
-.ni-li-dl
-  .ni-btn
-    position absolute
-    top 0.5rem - px
-    right 1rem
-
-.ni-li-container
-  display flex
-  flex-flow row nowrap
-  align-items center
-  position relative
-  min-height 3rem - 2*px
-
-// type: anchor & link
-.ni-li-thumb
-.ni-li-label
-.ni-li-icon
-  min-height 3rem - 2*px
-
-.ni-li-thumb:empty
-  display none
-
-.ni-li-thumb
-  width 3rem - px
-  i.material-icons
-    display block
-    width 3rem - px
-    height 3rem - px
-    display flex
-    align-items center
-    justify-content center
-    color var(--txt)
-
-.ni-li-label
-  flex 1
-  display flex
-  align-items flex-start
-  justify-content center
-  padding 0 1rem
-  flex-flow column nowrap
-
-  .ni-li-title
-    color var(--txt)
-    line-height 1.25
-  .ni-li-subtitle
-    color var(--dim)
-    font-size xs
-    line-height 1.25
-
-.ni-li-link
-  .ni-li-label
-    padding 0 1rem 0 0
-
-// type: field
-
-.ni-li-field .ni-li-container
-  display flex
-  .ni-li-label
-    flex 2
-  .ni-li-input
-    flex 1
-    display flex
-    .ni-btn
-      flex 1
-    .ni-select
-      width 100%
-
-// type: dl definition list
-
-.ni-li-dl
-  flex 1
-  height 3rem - px
-  padding 0 0.5rem
-  display flex
-  align-items center
-
-  // truncate
-  min-width 0
-
-.ni-li-dt
-.ni-li-dd
-  // truncate
-  white-space nowrap
-  text-overflow ellipsis
-  overflow hidden
-  color var(--txt)
-
-.ni-li-dt
-.ni-li-dd
-  &:empty
-    display none
-
-.no-overflow
-  .ni-li-dt
-  .ni-li-dd
-    overflow visible
-
-.ni-li-dt
-  padding-left 0.5rem
-  padding-right 0.25rem
-
-  max-width width-side
-  flex 2
-
-.ni-li-dd
-  padding-left 0.25rem
-  padding-right 0.5rem
-
-  flex 3
-  line-height 1.25
-
-  &.ni-li-dd-flush
-    padding 0
-  &.ni-li-dd-flush > div
-    display flex
-    height 3rem - px
-
-a.ni-li-dd
-  color var(--mc)
-  cursor pointer
-
-.ni-li-icon
-  width 1.5rem
-  display flex
-  align-items center
-  position absolute
-  top 0
-  right 0
-  .inactive
-    display block
-  .active
-    display none
-</style>
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/NiModalError.vue
index ed1ed6a74f..a6b5f5e898 100644
--- a/app/src/renderer/components/common/NiModalError.vue
+++ b/app/src/renderer/components/common/NiModalError.vue
@@ -5,14 +5,14 @@
     .ni-modal-error__title {{ errorTitle }}
     .ni-modal-error__body {{ errorBody }}
     .ni-modal-error__footer
-      btn#ni-modal-error__btn-issue(
+      tm-btn#ni-modal-error__btn-issue(
         size="lg"
         icon="bug_report"
         color="primary"
         value="Create an issue"
         type="anchor"
         :href="issueUrl")
-      btn#ni-modal-error__btn-logs(
+      tm-btn#ni-modal-error__btn-logs(
         size="lg"
         icon="info_outline"
         value="View app logs"
@@ -22,10 +22,10 @@
 <script>
 import { remote, shell } from "electron"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
   name: "ni-modal-error",
-  components: { Btn },
+  components: { TmBtn },
   computed: {
     ...mapGetters(["config", "lastHeader"]),
     errorIcon() {
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/NiModalHelp.vue
index 0fd83494b0..fd37de5949 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/NiModalHelp.vue
@@ -2,24 +2,22 @@
 modal.ni-modal-help(v-if="active" :close="close")
   div(slot='title') Need Help?
   p Something in the app not working correctly? Tell us what went wrong in developer chat or create an issue on our GitHub. Thanks for improving Cosmos Voyager!
-  list-item(
+  tm-list-item(
     title="Developer Chat"
     href="https://riot.im/app/#/room/#cosmos:matrix.org")
-  list-item(
+  tm-list-item(
     title="GitHub Issues"
     href="https://github.com/cosmos/voyager/issues")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
 import Modal from "common/NiModal"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 export default {
   name: "ni-modal-help",
   components: {
-    ListItem,
-    Btn,
+    TmListItem,
     Modal
   },
   computed: {
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index 0056b98084..52f4d35ba1 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -10,13 +10,13 @@
 
     .ni-modal-lcd-approval__footer
 
-      btn#ni-modal-lcd-approval__btn-approve(
+      tm-btn#ni-modal-lcd-approval__btn-approve(
         size="lg"
         icon="check"
         color="primary"
         value="Approve Node"
         @click.native="approve")
-      btn#ni-modal-lcd-approval__btn-disapprove(
+      tm-btn#ni-modal-lcd-approval__btn-disapprove(
         size="lg"
         icon="skip_next"
         value="Switch Node"
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import FormGroup from "common/NiFormGroup"
 import Field from "@nylira/vue-field"
 export default {
   name: "modal-lcd-approval",
   components: {
-    Btn,
+    TmBtn,
     FormGroup,
     Field
   },
diff --git a/app/src/renderer/components/common/NiModalReceive.vue b/app/src/renderer/components/common/NiModalReceive.vue
index fabf68f450..1a965ca197 100644
--- a/app/src/renderer/components/common/NiModalReceive.vue
+++ b/app/src/renderer/components/common/NiModalReceive.vue
@@ -7,8 +7,6 @@ modal.ni-modal-receive(v-if="active" :close="close")
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import BtnCopy from "common/NiBtnCopy"
 import LiCopy from "common/NiLiCopy"
 import Modal from "common/NiModal"
 import Part from "common/NiPart"
@@ -16,8 +14,6 @@ export default {
   name: "ni-modal-receive",
   props: ["value"],
   components: {
-    Btn,
-    BtnCopy,
     LiCopy,
     Modal,
     Part
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index 01692b6551..b781cf37d6 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -11,8 +11,8 @@
           step="1"
           placeholder="View block height..."
           v-model="query")
-        btn(value="Find")
-        btn(type="button" icon="close" @click.native="close")
+        tm-btn(value="Find")
+        tm-btn(type="button" icon="close" @click.native="close")
       form-msg(name="Query" type="numeric"
         v-if="!$v.filters.blocks.search.query.numeric")
       form-msg(name="Query" type="between" min="0"
@@ -23,20 +23,20 @@
       .ni-modal-search-field
         field#search-input.mousetrap(
           type="text" placeholder="Search..." v-model="query")
-        btn(icon="close" @click.native="close")
+        tm-btn(icon="close" @click.native="close")
 </template>
 
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 export default {
   name: "modal-search",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FormGroup,
     FormMsg
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/NiOnboarding.vue
index 0672e5640a..2025fa14a1 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/NiOnboarding.vue
@@ -8,23 +8,22 @@
       img(:src="activeImg")
       tm-bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
     .ni-session-footer(v-if="activeKey === nodes.length - 1")
-      btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
-      btn(value="Finish" @click.native="finish" color="primary"
+      tm-btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
+      tm-btn(value="Finish" @click.native="finish" color="primary"
         icon="chevron_right" icon-pos="right" )
     .ni-session-footer(v-else)
-      btn(value="Skip" @click.native="finish" icon="close")
-      btn(value="Next" @click.native="next" color="primary"
+      tm-btn(value="Skip" @click.native="finish" icon="close")
+      tm-btn(value="Next" @click.native="next" color="primary"
         icon="chevron_right" icon-pos="right" )
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
-import { TmBarDiscrete } from "@tendermint/ui"
+import { TmBarDiscrete, TmBtn } from "@tendermint/ui"
 export default {
   name: "ni-onboarding",
-  components: { Btn, TmBarDiscrete },
+  components: { TmBtn, TmBarDiscrete },
   computed: {
     ...mapGetters(["onboarding"]),
     activeKey() {
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index 1b27fe2379..ea513d9f8d 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -23,12 +23,12 @@
           | I understand that Cosmos cannot recover deleted accounts without the passphrase.
       form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
   .ni-session-footer
-    btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
+    tm-btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
 </template>
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -37,7 +37,7 @@ import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-account-delete",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 3e32049902..0c21ed3eed 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -48,13 +48,13 @@
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
   .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FieldSeed from "common/NiFieldSeed"
@@ -64,7 +64,7 @@ import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-import",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FieldSeed,
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 356d5f9a54..f70958c60e 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -22,13 +22,13 @@
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
       form-msg(v-if='mockedConnector') default password is 1234567890
   .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -37,7 +37,7 @@ import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-sign-in",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index d9882384fd..499a4e7aef 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -53,13 +53,13 @@
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
   .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
 </template>
 
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FieldGroup from "common/NiFieldGroup"
@@ -69,7 +69,7 @@ import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-sign-up",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldSeed,
     FieldGroup,
diff --git a/app/src/renderer/components/common/NiSessionWelcome.vue b/app/src/renderer/components/common/NiSessionWelcome.vue
index d57df6338b..0e26c31b5f 100644
--- a/app/src/renderer/components/common/NiSessionWelcome.vue
+++ b/app/src/renderer/components/common/NiSessionWelcome.vue
@@ -35,13 +35,11 @@
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import FundraiserWarning from "common/FundraiserWarning"
-import ListItem from "common/NiListItem"
 import LiSession from "common/NiLiSession"
 export default {
   name: "ni-session-welcome",
   components: {
     FundraiserWarning,
-    ListItem,
     LiSession
   },
   computed: {
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/NiUserPane.vue
index e9dccec15b..0414df598c 100644
--- a/app/src/renderer/components/common/NiUserPane.vue
+++ b/app/src/renderer/components/common/NiUserPane.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-list-item.ni-li-user(
+tm-list-item.ni-li-user(
   v-if="user.signedIn"
   type="link"
   to="/preferences"
@@ -12,10 +12,10 @@ list-item.ni-li-user(
 <script>
 import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 export default {
   name: "ni-user-pane",
-  components: { ListItem },
+  components: { TmListItem },
   computed: { ...mapGetters(["user", "config"]) },
   methods: {
     close() {
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index 6c93badca7..0abe407151 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -1,18 +1,18 @@
 <template lang="pug">
 page(title='404 - Page Not Found')
   part(title='Try another page...')
-    list-item(to='/' title='Balances')
-    list-item(to='/staking' title='Staking')
+    tm-list-item(to='/' title='Balances')
+    tm-list-item(to='/staking' title='Staking')
 </template>
 
 <script>
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 export default {
   name: "page-404",
   components: {
-    ListItem,
+    TmListItem,
     Page,
     Part
   }
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index af69cdd02e..e4d47ee275 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -3,26 +3,26 @@ page(title="Preferences")
   div(slot="menu"): tool-bar
 
   part(title='Settings')
-    list-item(type="field" title="Select network to connect to")
+    tm-list-item(type="field" title="Select network to connect to")
       field#select-network(
         type="select"
         v-model="networkSelectActive"
         :options="networkSelectOptions"
         placeholder="Select network..."
         @change.native="setMockedConnector")
-    list-item(type="field" title="Select theme")
+    tm-list-item(type="field" title="Select theme")
       field#select-theme(
         type="select"
         v-model="themeSelectActive"
         :options="themeSelectOptions"
         placeholder="Select theme..."
         @change.native="setAppTheme")
-    list-item(type="field" title="View tutorial for Voyager")
-      btn#toggle-onboarding(
+    tm-list-item(type="field" title="View tutorial for Voyager")
+      tm-btn#toggle-onboarding(
         @click.native="setOnboarding"
         value="Launch Tutorial"
         icon="open_in_new")
-    list-item(type="field"
+    tm-list-item(type="field"
       title="Automatically send usage statistics and crash reports"
       subtitle="to the Voyager development team")
       field(
@@ -35,8 +35,8 @@ page(title="Preferences")
         :value="user.errorCollection || undefined"
         @change.native="setErrorCollection")
   part(title='Account')
-    list-item(type="field" title="Switch account")
-      btn(
+    tm-list-item(type="field" title="Switch account")
+      tm-btn(
         icon='exit_to_app'
         type='button'
         @click.native="signOut"
@@ -45,18 +45,17 @@ page(title="Preferences")
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
 import Field from "@nylira/vue-field"
-import ListItem from "common/NiListItem"
+import { TmListItem, TmBtn } from "@tendermint/ui"
 import ToolBar from "common/NiToolBar"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 export default {
   name: "page-preferences",
   components: {
-    Btn,
+    TmBtn,
     Field,
-    ListItem,
+    TmListItem,
     Page,
     Part,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index 10d04ae25d..ea4db23a9a 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -22,13 +22,13 @@ page(:title='proposal.title')
       color='hsl(0,0%,35%)' :active="votePick === 'abstain'" :results="voteVisible")
 
     div(slot='footer')
-      btn(theme='cosmos' type='button' @click.native="toggleVoteVisible" value='Toggle Results')
-      btn(theme='cosmos' type='submit' value='Confirm Vote')
+      tm-btn(theme='cosmos' type='button' @click.native="toggleVoteVisible" value='Toggle Results')
+      tm-btn(theme='cosmos' type='submit' value='Confirm Vote')
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -38,7 +38,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposal",
   components: {
-    Btn,
+    TmBtn,
     FieldVote,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 4706bd36a5..0d2a69b926 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -4,22 +4,22 @@ page(title='New Proposal')
     router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   part(title='Choose a Type')
-    list-item(title='Adjust Parameters' to="/proposals/new/adjust")
-    list-item(title='Amend Constitution' to="/proposals/new/amend")
-    list-item(title='Create Atoms' to="/proposals/new/create")
-    list-item(title='Plain Text' to="/proposals/new/text")
-    list-item(title='Upgrade Code' to="/proposals/new/upgrade")
+    tm-list-item(title='Adjust Parameters' to="/proposals/new/adjust")
+    tm-list-item(title='Amend Constitution' to="/proposals/new/amend")
+    tm-list-item(title='Create Atoms' to="/proposals/new/create")
+    tm-list-item(title='Plain Text' to="/proposals/new/text")
+    tm-list-item(title='Upgrade Code' to="/proposals/new/upgrade")
 </template>
 
 <script>
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new",
   components: {
-    ListItem,
+    TmListItem,
     Page,
     Part,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index bd55c07d2c..e750daf569 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -28,12 +28,12 @@ page(title="Proposal: Adjust Parameters")
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -44,7 +44,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 27faf479dd..875503fd9a 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -28,12 +28,12 @@ page(title="Proposal: Amend Constitution")
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -44,7 +44,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index c69ca7786c..d7bcd9f6e5 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -28,12 +28,12 @@ page(title="Proposal: Create Atoms")
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -44,7 +44,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 459cbc655d..48835d307f 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -28,12 +28,12 @@ page(title="Proposal: Freeform Text")
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -44,7 +44,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-text",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 9dbbdd72fe..d2a068a189 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -28,12 +28,12 @@ page(title="Proposal: Upgrade Code")
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
@@ -44,7 +44,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldGroup,
     FormGroup,
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 65233fce5e..800cfa3a5c 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -16,29 +16,29 @@ page(:title="pageBlockTitle")
         i.material-icons chevron_right
 
     part(title='')
-      list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
+      tm-list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
 
     part(title='Header')
-      list-item(dt="Chain ID" :dd="block.header.chain_id")
-      list-item(dt="Time" :dd="blockHeaderTime")
-      list-item(dt="Transactions" :dd="block.header.num_txs")
-      list-item(dt="Last Commit Hash" :dd="block.header.last_commit_hash")
-      list-item(dt="Validators Hash" :dd="block.header.validators_hash")
-      list-item(dt="App Hash" :dd="block.header.app_hash")
+      tm-list-item(dt="Chain ID" :dd="block.header.chain_id")
+      tm-list-item(dt="Time" :dd="blockHeaderTime")
+      tm-list-item(dt="Transactions" :dd="block.header.num_txs")
+      tm-list-item(dt="Last Commit Hash" :dd="block.header.last_commit_hash")
+      tm-list-item(dt="Validators Hash" :dd="block.header.validators_hash")
+      tm-list-item(dt="App Hash" :dd="block.header.app_hash")
 
     part(title='Last Block')
-      list-item(dt="Hash" :dd="block.header.last_block_id.hash")
-      list-item(dt="Parts Total"
+      tm-list-item(dt="Hash" :dd="block.header.last_block_id.hash")
+      tm-list-item(dt="Parts Total"
         :dd="block.header.last_block_id.parts.total")
-      list-item(dt="Parts Hash" :dd="block.header.last_block_id.parts.hash")
+      tm-list-item(dt="Parts Hash" :dd="block.header.last_block_id.parts.hash")
 
     part(title="Precommit"
       v-for="p in block.last_commit.precommits"
       :key="p.validator_address" v-if="p !== null")
-      list-item(dt="Address" :dd="p.validator_address")
-      list-item(dt="Index" :dd="p.validator_index")
-      list-item(dt="Round" :dd="p.round")
-      list-item(:dt="`Sig (${p.signature.type})`"
+      tm-list-item(dt="Address" :dd="p.validator_address")
+      tm-list-item(dt="Index" :dd="p.validator_index")
+      tm-list-item(dt="Round" :dd="p.round")
+      tm-list-item(:dt="`Sig (${p.signature.type})`"
       :dd="p.signature.data")
 
     part(title='Transactions')
@@ -64,7 +64,7 @@ import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/NiToolBar"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import Part from "common/NiPart"
 import Page from "common/NiPage"
 export default {
@@ -74,7 +74,7 @@ export default {
     DataLoading,
     DataEmpty,
     ToolBar,
-    ListItem,
+    TmListItem,
     Part,
     Page
   },
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 300afc03da..ec79f7bab5 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -10,13 +10,13 @@ page(title='Block Explorer')
   data-loading(v-if="!blockchain.syncing && !blockchain.subscription")
 
   part(title='Current Block' v-if="blockchain.subscription")
-    list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
-    list-item(dt='Block Time' :dd='latestBlockTime')
-    list-item(dt='Block Hash' :dd='latestBlockHash')
+    tm-list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
+    tm-list-item(dt='Block Time' :dd='latestBlockTime')
+    tm-list-item(dt='Block Hash' :dd='latestBlockHash')
 
   part(title='Latest Blocks' v-if="blockchain.subscription")
-    list-item.column-header(dt="Block Height" dd="# of Transactions")
-    list-item(
+    tm-list-item.column-header(dt="Block Height" dd="# of Transactions")
+    tm-list-item(
       v-for="block in blocks"
       :key="block.header.height"
       :dt="num.prettyInt(block.header.height)"
@@ -29,7 +29,7 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
 import Page from "common/NiPage"
@@ -39,7 +39,7 @@ import ModalSearch from "common/NiModalSearch"
 export default {
   name: "page-blocks",
   components: {
-    ListItem,
+    TmListItem,
     DataError,
     DataLoading,
     Page,
diff --git a/app/src/renderer/components/staking/LiDelegate.vue b/app/src/renderer/components/staking/LiDelegate.vue
index 4fa6c7266a..899b0f0ed3 100644
--- a/app/src/renderer/components/staking/LiDelegate.vue
+++ b/app/src/renderer/components/staking/LiDelegate.vue
@@ -25,12 +25,10 @@
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
-import Btn from "@nylira/vue-button"
 import { maxBy } from "lodash"
 export default {
   name: "li-delegate",
   props: ["delegate"],
-  components: { Btn },
   computed: {
     ...mapGetters([
       "shoppingCart",
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 52dbfba976..da568c21d6 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -108,8 +108,8 @@ page.page-bond(:title="`Bond ${denom}`")
         v-if='!$v.fields.bondConfirm.required')
 
     div(slot='footer')
-      btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
-      btn#btn-bond(value="Submit" color="primary")
+      tm-btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
+      tm-btn#btn-bond(value="Submit" color="primary")
 </template>
 
 <script>
@@ -117,7 +117,7 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FieldGroup from "common/NiFieldGroup"
@@ -130,7 +130,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-bond",
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldAddon,
     FieldGroup,
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index c262df226f..e65771ef8e 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -3,22 +3,21 @@ page(:title="delegateType + ' Profile'")
   div(slot="menu"): tool-bar
 
   part(:title="delegateType + ' Info'")
-    list-item(dt='Moniker' :dd='delegate.moniker')
-    list-item(dt='Website' :dd='delegate.website')
-    list-item(dt='Address' :dd='delegate.address')
-    list-item(dt='Public Key' :dd='delegate.pub_key.data')
+    tm-list-item(dt='Moniker' :dd='delegate.moniker')
+    tm-list-item(dt='Website' :dd='delegate.website')
+    tm-list-item(dt='Address' :dd='delegate.address')
+    tm-list-item(dt='Public Key' :dd='delegate.pub_key.data')
 
   part(:title="delegateType + ' Description'")
     text-block(:content="delegate.details || 'No description available.'")
 
   part(:title="delegateType + ' Details'" v-if="isValidator")
-    list-item(dt="Total Vote Power" :dd="delegate.voting_power")
+    tm-list-item(dt="Total Vote Power" :dd="delegate.voting_power")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 import TextBlock from "common/TextBlock"
@@ -26,8 +25,7 @@ import ToolBar from "common/NiToolBar"
 export default {
   name: "page-delegate",
   components: {
-    Btn,
-    ListItem,
+    TmListItem,
     Page,
     Part,
     TextBlock,
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index 1609ec4c5f..1f83dff513 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -19,10 +19,10 @@ page(title='Staking')
   .fixed-button-bar(v-if="!delegates.loading")
     template(v-if="userCanDelegate")
       .label #[strong {{ shoppingCart.length }}] delegates selected
-      btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
+      tm-btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
     template(v-else)
       .label You do not have any ATOMs to delegate.
-      btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
+      tm-btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
 </template>
 
 <script>
@@ -30,7 +30,7 @@ import { mapGetters } from "vuex"
 import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
@@ -44,7 +44,7 @@ export default {
   name: "page-delegates",
   components: {
     LiDelegate,
-    Btn,
+    TmBtn,
     DataEmpty,
     DataEmptySearch,
     DataLoading,
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index c729f7ff5f..c58ddde010 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -47,8 +47,8 @@ page(title='Send')
 
     div(slot='footer')
       div
-      btn(v-if='sending' value='Sending...' disabled color="primary")
-      btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
+      tm-btn(v-if='sending' value='Sending...' disabled color="primary")
+      tm-btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
 </template>
 
 <script>
@@ -60,7 +60,7 @@ import {
   alphaNum
 } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FieldGroup from "common/NiFieldGroup"
@@ -72,7 +72,7 @@ import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   components: {
-    Btn,
+    TmBtn,
     Field,
     FieldAddon,
     FieldGroup,
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index dfd5b97f5e..5370c1cd27 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -40,7 +40,6 @@ page(title='Wallet')
 import { mapGetters } from "vuex"
 import { clipboard } from "electron"
 import { sum, includes, orderBy } from "lodash"
-import Btn from "@nylira/vue-button"
 import Mousetrap from "mousetrap"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
diff --git a/package.json b/package.json
index 21659a3b19..b292de6035 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,6 @@
     "xmlhttprequest": "1.8.0"
   },
   "dependencies": {
-    "@nylira/vue-button": "4.4.3",
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
     "@tendermint/ui": "tendermint/ui",
diff --git a/test/unit/specs/components/common/NiListItem.spec.js b/test/unit/specs/components/common/NiListItem.spec.js
deleted file mode 100644
index b5f0d4cde3..0000000000
--- a/test/unit/specs/components/common/NiListItem.spec.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiListItem from "common/NiListItem"
-
-describe("NiListItem", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiListItem, {
-      propsData: {
-        type: null,
-        title: null,
-        subtitle: null,
-        image: null,
-        icon: null,
-        to: null,
-        dt: null,
-        dd: null,
-        href: null,
-        spin: null
-      }
-    })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a thumb", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    wrapper.setProps({ icon: "icon_hello" })
-    expect(wrapper.find("i")).toBeDefined()
-    wrapper.setProps({ icon: null, image: "path/to/img" })
-    expect(wrapper.find("img")).toBeDefined()
-  })
-
-  it("should use a slot for a thumb", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { dt: "Link", href: "/location" },
-      slots: { graphic: "<graphic-elem />" }
-    })
-    expect(wrapper.contains("graphic-elem")).toBe(true)
-  })
-
-  it("should show a description", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("Link")
-    wrapper.setProps({ dd: "HALLO" })
-    expect(wrapper.html()).toContain("HALLO")
-  })
-
-  it("should use a slot for a description", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { dt: "Link", to: "/location" },
-      slots: { dd: "Some description here" }
-    })
-    expect(wrapper.html()).toContain("Some description here")
-  })
-
-  it("should show a dd link", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a router-link", () => {
-    wrapper.setProps({ dt: "Link", to: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a label", () => {
-    wrapper.setProps({ title: "Title", subtitle: "Subtitle" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("Title")
-    expect(wrapper.html()).toContain("Subtitle")
-  })
-
-  it("should show as dd text", () => {
-    wrapper.setProps({ dt: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as text link", () => {
-    wrapper.setProps({ dt: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a subtitle router link", () => {
-    wrapper.setProps({ to: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as text", () => {
-    wrapper.setProps({ title: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as image", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { type: "image" },
-      slots: { image: '<img src="route/to/image" />' }
-    })
-    expect(wrapper.find("img")).toBeDefined()
-  })
-
-  it("should append the fa-spin class", () => {
-    wrapper.setProps({
-      title: "Connecting...",
-      spin: "true",
-      icon: "rotate_right"
-    })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("fa-spin")
-  })
-})
diff --git a/yarn.lock b/yarn.lock
index fd7f6ba90e..80ef84cc90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,6 @@
   dependencies:
     ramda "0.25.0"
 
-"@nylira/vue-button@4.4.3":
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-button/-/vue-button-4.4.3.tgz#068252a7e39beff9e35589bc1071a8a94379e212"
-
 "@nylira/vue-field@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@nylira/vue-field/-/vue-field-1.5.0.tgz#09a04f2555e63a92eb31dd40cad524ea8558a8f4"

From 15eb56fc7e00fe512930007a035735043d990560 Mon Sep 17 00:00:00 2001
From: Peng Zhong <172531+nylira@users.noreply.github.com>
Date: Thu, 14 Jun 2018 16:06:30 +0800
Subject: [PATCH 03/31] use version 0.1.0 of @tendermint/ui

---
 app/src/renderer/components/wallet/PageWallet.vue | 10 +++++-----
 package.json                                      |  2 +-
 yarn.lock                                         |  9 +++++++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 5370c1cd27..3bcccb61db 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -9,7 +9,7 @@ page(title='Wallet')
   modal-search(type="balances" v-if="somethingToSearch")
 
   part(title='Your Address')
-    list-item(
+    tm-list-item(
       :title="wallet.address"
       :btn="'Receive'"
       :overflow="true"
@@ -19,7 +19,7 @@ page(title='Wallet')
     data-loading(v-if="wallet.balancesLoading")
     data-empty(v-else-if="wallet.balances.length === 0")
     data-empty-search(v-else-if="filteredBalances.length === 0")
-    list-item.ni-li-balance(
+    tm-list-item.ni-li-balance(
       v-for="i in filteredBalances"
       v-if="wallet.balances.length > 0 && i.amount > 0"
       :btn="'Send'"
@@ -29,7 +29,7 @@ page(title='Wallet')
       :to="{name: 'send', params: {denom: i.denom}}")
 
   part#part-staked-balances(v-if="config.devMode" title="Staked Balances")
-    list-item(
+    tm-list-item(
       btn="Stake"
       :dt="stakingDenom"
       :dd="stakedTokens"
@@ -45,7 +45,7 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
@@ -57,7 +57,7 @@ export default {
     DataEmpty,
     DataEmptySearch,
     LiCopy,
-    ListItem,
+    TmListItem,
     ModalSearch,
     Page,
     Part,
diff --git a/package.json b/package.json
index b292de6035..9493ba01d5 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "tendermint/ui",
+    "@tendermint/ui": "0.1.0",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 80ef84cc90..7566860797 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,10 +24,11 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@tendermint/ui@tendermint/ui":
+"@tendermint/ui@0.1.0":
   version "0.1.0"
-  resolved "https://codeload.github.com/tendermint/ui/tar.gz/767e67b1497a009c819f4a5a74c6c0405f2359f3"
+  resolved "https://registry.yarnpkg.com/@tendermint/ui/-/ui-0.1.0.tgz#73be0c3c59edef88693e6b62bbc2d003b2c5efad"
   dependencies:
+    moment "^2.22.2"
     vue "^2.5.16"
 
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
@@ -5616,6 +5617,10 @@ moment@2.22.1, moment@^2.10.2:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
 
+moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 mousetrap@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"

From 81dd3ab90f885624f139520aa506905e5971af6a Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 14 Jun 2018 16:29:25 +0200
Subject: [PATCH 04/31] github ui

---
 package.json | 2 +-
 yarn.lock    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 84d460b618..5cd9a3b504 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "0.1.0",
+    "@tendermint/ui": "https://github.com/tendermint/ui.git",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 45b9c2de34..50072fd8d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,9 +24,9 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@tendermint/ui@0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@tendermint/ui/-/ui-0.1.0.tgz#73be0c3c59edef88693e6b62bbc2d003b2c5efad"
+"@tendermint/ui@https://github.com/tendermint/ui.git":
+  version "0.1.1"
+  resolved "https://github.com/tendermint/ui.git#5524f8a09eccf35132dcec0c603e1f9076e2157b"
   dependencies:
     moment "^2.22.2"
     vue "^2.5.16"

From fe34da12027199f2c3bc80d977e9f84634ac4047 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 14 Jun 2018 20:40:02 +0200
Subject: [PATCH 05/31] only link @tendermint/ui

---
 app/src/renderer/components/common/AppMenu.vue |  4 ++--
 package.json                                   |  1 -
 yarn.lock                                      | 13 +------------
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index 5d332bd2a6..2e3bafb0ae 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -17,7 +17,7 @@ menu.app-menu
       exact
       @click.native="close" title="Staking"
       v-bind:class="{ 'active': isValidatorPage }")
-    list-item#app-menu__proposals(
+    tm-list-item#app-menu__proposals(
       to="/proposals"
       exact @click.native="close"
       title="Proposals"
@@ -43,7 +43,7 @@ export default {
   name: "app-menu",
   components: {
     ConnectedNetwork,
-    ListItem,
+    TmListItem,
     Part,
     UserPane
   },
diff --git a/package.json b/package.json
index 5cd9a3b504..186325cfea 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "https://github.com/tendermint/ui.git",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 50072fd8d0..b221ce30db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,13 +24,6 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@tendermint/ui@https://github.com/tendermint/ui.git":
-  version "0.1.1"
-  resolved "https://github.com/tendermint/ui.git#5524f8a09eccf35132dcec0c603e1f9076e2157b"
-  dependencies:
-    moment "^2.22.2"
-    vue "^2.5.16"
-
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.1.tgz#1405e5396968c4302994b0161ce405b72b874257"
@@ -5621,10 +5614,6 @@ moment@2.22.1, moment@^2.10.2:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
 
-moment@^2.22.2:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-
 mousetrap@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
@@ -8905,7 +8894,7 @@ vue-template-es2015-compiler@1.6.0, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@2.5.16, vue@^2.5.16:
+vue@2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 

From 50cd86f1f5c48f73ae5d174d1dd86452d6506162 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 14 Jun 2018 20:43:10 +0200
Subject: [PATCH 06/31] added back to package

---
 package.json |  1 +
 yarn.lock    | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 186325cfea..5cd9a3b504 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
+    "@tendermint/ui": "https://github.com/tendermint/ui.git",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index b221ce30db..a949d6150d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,6 +24,13 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
+"@tendermint/ui@https://github.com/tendermint/ui.git":
+  version "0.1.1"
+  resolved "https://github.com/tendermint/ui.git#8f61ff55dc9279ec07d04899957545880c4fdf3a"
+  dependencies:
+    moment "^2.22.2"
+    vue "^2.5.16"
+
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.1.tgz#1405e5396968c4302994b0161ce405b72b874257"
@@ -5614,6 +5621,10 @@ moment@2.22.1, moment@^2.10.2:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
 
+moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 mousetrap@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
@@ -8894,7 +8905,7 @@ vue-template-es2015-compiler@1.6.0, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@2.5.16:
+vue@2.5.16, vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 

From 5a662e83e08ad3c2ca36637d6cbdcea9f14a948e Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 11:34:32 +0200
Subject: [PATCH 07/31] TmDataMsg

---
 .../components/common/NiDataEmpty.vue         |  6 +-
 .../components/common/NiDataEmptySearch.vue   |  6 +-
 .../components/common/NiDataEmptyTx.vue       |  6 +-
 .../components/common/NiDataError.vue         |  6 +-
 .../components/common/NiDataLoading.vue       |  6 +-
 .../renderer/components/common/NiDataMsg.vue  | 56 -------------------
 .../specs/components/common/NiDataMsg.spec.js | 44 ---------------
 .../__snapshots__/NiDataMsg.spec.js.snap      | 14 ++---
 8 files changed, 22 insertions(+), 122 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiDataMsg.vue
 delete mode 100644 test/unit/specs/components/common/NiDataMsg.spec.js

diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/NiDataEmpty.vue
index aa92f46afe..4372ce5827 100644
--- a/app/src/renderer/components/common/NiDataEmpty.vue
+++ b/app/src/renderer/components/common/NiDataEmpty.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-data-msg(icon="info_outline")
+tm-data-msg(icon="info_outline")
   h4(v-if="title" slot="title") {{ title }}
   h4(v-else slot="title") N/A
 
@@ -8,10 +8,10 @@ data-msg(icon="info_outline")
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "ni-data-empty",
   props: ["title", "subtitle"],
-  components: { DataMsg }
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/NiDataEmptySearch.vue
index c4cc2883ac..69f9f004ad 100644
--- a/app/src/renderer/components/common/NiDataEmptySearch.vue
+++ b/app/src/renderer/components/common/NiDataEmptySearch.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="search")
+tm-data-msg(icon="search")
   div(slot="title") No Results
   div(slot="subtitle") Your search did not match any available data.
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "ni-data-empty-search",
-  components: { DataMsg }
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/NiDataEmptyTx.vue
index 6e18512583..2438795517 100644
--- a/app/src/renderer/components/common/NiDataEmptyTx.vue
+++ b/app/src/renderer/components/common/NiDataEmptyTx.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="info_outline")
+tm-data-msg(icon="info_outline")
   div(slot="title") No Transaction History
   div(slot="subtitle") Looks like you haven't sent or received any transactions yet. Head over to #[router-link(:to="{ name: 'send' }") Send] to make your first transaction!
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "ni-data-empty-tx",
-  components: { DataMsg }
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/NiDataError.vue
index 76bb1b7263..4f440a87f8 100644
--- a/app/src/renderer/components/common/NiDataError.vue
+++ b/app/src/renderer/components/common/NiDataError.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="sentiment_very_dissatisfied")
+tm-data-msg(icon="sentiment_very_dissatisfied")
   div(slot="title") Aw shucks!
   div(slot="subtitle") Even though you're connected a full node, we can't display this data for you right now. Please try again later or #[a(href="https://github.com/cosmos/voyager/issues") file a bug report]. Apologies!
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "ni-data-error",
-  components: { DataMsg }
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/NiDataLoading.vue
index ef0b41342c..c60d8c1044 100644
--- a/app/src/renderer/components/common/NiDataLoading.vue
+++ b/app/src/renderer/components/common/NiDataLoading.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-data-msg(icon="rotate_right" spin="true")
+tm-data-msg(icon="rotate_right" spin="true")
   div(slot="title") {{ title }}
   div(slot="subtitle") Please wait a moment.
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "ni-data-loading",
-  components: { DataMsg },
+  components: { TmDataMsg },
   props: {
     title: {
       type: String,
diff --git a/app/src/renderer/components/common/NiDataMsg.vue b/app/src/renderer/components/common/NiDataMsg.vue
deleted file mode 100644
index bac558d8bb..0000000000
--- a/app/src/renderer/components/common/NiDataMsg.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template lang="pug">
-.ni-data-msg
-  .ni-data-msg__icon: i.material-icons(:class="iconCssClass") {{ icon }}
-  .ni-data-msg__text
-    .ni-data-msg__title: slot(name="title") {{ title }}
-    .ni-data-msg__subtitle: slot(name="subtitle") {{ subtitle }}
-</template>
-
-<script>
-export default {
-  name: "ni-data-msg",
-  computed: {
-    iconCssClass() {
-      if (this.spin) {
-        return "fa-spin"
-      }
-    }
-  },
-  props: ["title", "subtitle", "icon", "spin"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-data-msg
-  background var(--app-fg)
-  padding 1rem
-
-.ni-data-msg__icon
-  margin-bottom 0.5rem
-  i.material-icons
-    font-size 3rem
-    color var(--txt)
-
-.ni-data-msg__text
-  max-width 30rem
-
-.ni-data-msg__title
-  color var(--bright)
-  font-size h2
-
-.ni-data-msg__subtitle
-  color var(--dim)
-
-@media screen and (min-width: 768px)
-  .ni-data-msg
-    display flex
-    padding 3rem
-
-  .ni-data-msg__icon
-    margin-bottom 0
-    margin-right 1.5rem
-    i.material-icons
-      font-size 4rem
-</style>
diff --git a/test/unit/specs/components/common/NiDataMsg.spec.js b/test/unit/specs/components/common/NiDataMsg.spec.js
deleted file mode 100644
index dfdb9bfd46..0000000000
--- a/test/unit/specs/components/common/NiDataMsg.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiDataMsg from "common/NiDataMsg"
-
-describe("NiDataMsg", () => {
-  let wrapper
-
-  let propsData = {
-    title: "sOmEtHiNg Is HaPpEnIng!!!",
-    subtitle: "Oh my! What could it be?",
-    icon: "help",
-    spin: false
-  }
-
-  beforeEach(() => {
-    wrapper = mount(NiDataMsg, { propsData })
-  })
-
-  it("has a title from props", () => {
-    expect(wrapper.vm.title).toBe("sOmEtHiNg Is HaPpEnIng!!!")
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  it("has an icon", () => {
-    expect(wrapper.find(".ni-data-msg__icon i.material-icons").text()).toBe(
-      "help"
-    )
-  })
-
-  it("doesn't have a spinning icon", () => {
-    expect(
-      wrapper.find(".ni-data-msg__icon").contains("i.material-icons.fa-spin")
-    ).toBe(false)
-  })
-
-  it("has a subtitle", () => {
-    expect(wrapper.find(".ni-data-msg__subtitle").text()).toBe(
-      "Oh my! What could it be?"
-    )
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
index 30910d2f6b..3891bbf385 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataMsg has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+exports[`TmDataMsg has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">help</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       sOmEtHiNg Is HaPpEnIng!!!
    </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    Oh my! What could it be?
 </div>
 </div>
 </div>"
-`;
+`

From 8db585f479ec426b8300ad6ab398da695a3f0194 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 12:39:11 +0200
Subject: [PATCH 08/31] TmFieldGroup

---
 .../components/common/NiFieldGroup.vue        | 30 -------------------
 .../common/NiSessionAccountDelete.vue         |  2 --
 .../components/common/NiSessionImport.vue     |  2 --
 .../components/common/NiSessionSignIn.vue     |  2 --
 .../components/common/NiSessionSignUp.vue     |  2 --
 .../govern/PageProposalsNewAdjust.vue         |  2 --
 .../govern/PageProposalsNewAmend.vue          |  2 --
 .../govern/PageProposalsNewCreate.vue         |  2 --
 .../govern/PageProposalsNewText.vue           |  2 --
 .../govern/PageProposalsNewUpgrade.vue        |  2 --
 .../renderer/components/staking/PageBond.vue  |  2 --
 .../renderer/components/wallet/PageSend.vue   |  9 +++---
 .../components/common/NiFieldGroup.spec.js    | 21 -------------
 .../__snapshots__/NiFieldGroup.spec.js.snap   |  7 -----
 14 files changed, 4 insertions(+), 83 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiFieldGroup.vue
 delete mode 100644 test/unit/specs/components/common/NiFieldGroup.spec.js
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap

diff --git a/app/src/renderer/components/common/NiFieldGroup.vue b/app/src/renderer/components/common/NiFieldGroup.vue
deleted file mode 100644
index a519bfd693..0000000000
--- a/app/src/renderer/components/common/NiFieldGroup.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template lang="pug">
-.ni-field-group: slot
-</template>
-
-<script>
-export default { name: "ni-field-group" }
-</script>
-
-<style lang="stylus">
-@import '~variables'
-
-.ni-field-group
-  display flex
-  position relative
-
-  .ni-field
-    flex 1
-
-  .ni-field, .ni-btn-wrapper
-    margin 0
-
-  .ni-btn-wrapper
-    max-width 15rem
-
-  .ni-field + .ni-btn-wrapper
-    margin-left 1rem
-
-  .ni-btn-wrapper + .ni-field
-    margin-left 1rem
-</style>
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index ea513d9f8d..a2ab080e26 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -30,7 +30,6 @@
 import { required, minLength } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -39,7 +38,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 0c21ed3eed..f914d5a5d6 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -56,7 +56,6 @@ import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FieldSeed from "common/NiFieldSeed"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
@@ -66,7 +65,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FieldSeed,
     FormGroup,
     FormMsg,
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index f70958c60e..29ef33175a 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -30,7 +30,6 @@ import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -39,7 +38,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index 499a4e7aef..b2872aa293 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -62,7 +62,6 @@ import PerfectScrollbar from "perfect-scrollbar"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -72,7 +71,6 @@ export default {
     TmBtn,
     Field,
     FieldSeed,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index e750daf569..782f019f58 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -35,7 +35,6 @@ page(title="Proposal: Adjust Parameters")
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -46,7 +45,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 875503fd9a..3f6bc1e831 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -35,7 +35,6 @@ page(title="Proposal: Amend Constitution")
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -46,7 +45,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index d7bcd9f6e5..49aac12a46 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -35,7 +35,6 @@ page(title="Proposal: Create Atoms")
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -46,7 +45,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 48835d307f..ed9c219cd3 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -35,7 +35,6 @@ page(title="Proposal: Freeform Text")
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -46,7 +45,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index d2a068a189..03f94b81f9 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -35,7 +35,6 @@ page(title="Proposal: Upgrade Code")
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -46,7 +45,6 @@ export default {
   components: {
     TmBtn,
     Field,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index da568c21d6..4d2f22bdea 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -120,7 +120,6 @@ import interact from "interactjs"
 import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -133,7 +132,6 @@ export default {
     TmBtn,
     Field,
     FieldAddon,
-    FieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index 25b85c13c8..506302ef17 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -24,7 +24,7 @@ page(title='Send')
         form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
       form-group(:error='$v.fields.address.$error'
         field-id='send-address' field-label='Send To')
-        field-group
+        tm-field-group
           field#send-address(
             type='text'
             v-model='fields.address'
@@ -34,7 +34,7 @@ page(title='Send')
 
       form-group(:error='$v.fields.amount.$error'
         field-id='send-amount' field-label='Amount')
-        field-group
+        tm-field-group
           field#send-amount(
             type='number'
             v-model='fields.amount'
@@ -53,10 +53,9 @@ page(title='Send')
 import b32 from "scripts/b32"
 import { required, between } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFieldGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
-import FieldGroup from "common/NiFieldGroup"
 import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
@@ -68,7 +67,7 @@ export default {
     TmBtn,
     Field,
     FieldAddon,
-    FieldGroup,
+    TmFieldGroup,
     FormGroup,
     FormMsg,
     FormStruct,
diff --git a/test/unit/specs/components/common/NiFieldGroup.spec.js b/test/unit/specs/components/common/NiFieldGroup.spec.js
deleted file mode 100644
index 1cef18af53..0000000000
--- a/test/unit/specs/components/common/NiFieldGroup.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiFieldGroup from "common/NiFieldGroup"
-
-describe("NiFieldGroup", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiFieldGroup, {
-      slots: { default: '<input class="fake-field" placeholder="Fake">' }
-    })
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  it("has a slot with a field", () => {
-    expect(wrapper.findAll(".fake-field").length).toBe(1)
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap
deleted file mode 100644
index e4786602a5..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiFieldGroup has the expected html structure 1`] = `
-"<div class=\\"ni-field-group\\">
-   <input placeholder=\\"Fake\\" class=\\"fake-field\\">
-</div>"
-`;

From 8f8ede95fe06c1b45cb2b23c45bc04ef57bafed4 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 12:40:15 +0200
Subject: [PATCH 09/31] TmFieldGroup

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1633411eda..3b11db8ac3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changes
 
 * Use persistent peers and seeds from tendermint config @faboweb
+* more components moved to `@tendermint/ui` @okwme
 
 ### Fixed
 

From 8c0cbc48c7a51f8a5ce1b485d353608631df5079 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 12:55:32 +0200
Subject: [PATCH 10/31] TmFormGroup

---
 .../components/common/NiFormGroup.vue         | 74 -------------------
 .../components/common/NiModalLCDApproval.vue  |  2 -
 .../components/common/NiModalSearch.vue       |  9 +--
 .../common/NiSessionAccountDelete.vue         |  9 +--
 .../components/common/NiSessionImport.vue     | 15 ++--
 .../components/common/NiSessionSignIn.vue     | 11 ++-
 .../components/common/NiSessionSignUp.vue     | 17 ++---
 .../govern/PageProposalsNewAdjust.vue         |  9 +--
 .../govern/PageProposalsNewAmend.vue          |  9 +--
 .../govern/PageProposalsNewCreate.vue         |  9 +--
 .../govern/PageProposalsNewText.vue           |  9 +--
 .../govern/PageProposalsNewUpgrade.vue        |  9 +--
 .../renderer/components/staking/PageBond.vue  |  7 +-
 .../renderer/components/wallet/PageSend.vue   | 13 ++--
 archive/components/FormGroupDelegate.vue      |  6 +-
 .../components/common/NiFormGroup.spec.js     | 41 ----------
 .../__snapshots__/NiFormGroup.spec.js.snap    | 11 ---
 17 files changed, 60 insertions(+), 200 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiFormGroup.vue
 delete mode 100644 test/unit/specs/components/common/NiFormGroup.spec.js
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap

diff --git a/app/src/renderer/components/common/NiFormGroup.vue b/app/src/renderer/components/common/NiFormGroup.vue
deleted file mode 100644
index 6045f339fd..0000000000
--- a/app/src/renderer/components/common/NiFormGroup.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template lang='pug'>
-div(:class='cssClass')
-  span.ni-form-group__sub-label(v-if="subLabel")
-    | {{ subLabel }}
-  label.ni-form-group__label(:for='fieldId' v-if="fieldId && fieldLabel")
-    | {{ fieldLabel }}
-  .ni-form-group__field: slot
-</template>
-
-<script>
-export default {
-  name: "ni-form-group",
-  computed: {
-    cssClass() {
-      let value = "ni-form-group"
-      if (this.error) value += " ni-form-group--error"
-      return value
-    }
-  },
-  props: ["error", "field-id", "field-label", "sub-label"]
-}
-</script>
-
-<style lang="stylus">
-@import '~variables'
-.ni-form-group
-  padding 0.5rem 1rem
-  position relative
-
-  &:last-child
-    border-bottom none
-
-  input
-    width 100%
-
-  .ni-form-msg--error
-    display none
-
-  &__sub-label
-    position absolute
-    bottom 0.5rem
-    left 1rem
-    font-size xs
-    color var(--dim)
-
-.ni-form-group__sub-label ~ .ni-form-group__label
-  line-height 1rem
-
-.ni-form-group--error
-  .ni-field, .ni-select
-    border-color danger
-
-  .ni-form-msg--error
-    display flex
-
-.ni-form-group__label
-  display block
-  line-height 2rem
-  color txt
-
-@media (min-width: 768px)
-  .ni-form-group
-    display flex
-
-  .ni-form-group__label
-    flex 0 0 16rem
-
-  .ni-form-group__field
-    flex 1
-
-    > .ni-field
-    > .ni-field-group
-      width 100%
-</style>
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index 52f4d35ba1..10dafd0584 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -25,13 +25,11 @@
 
 <script>
 import { TmBtn } from "@tendermint/ui"
-import FormGroup from "common/NiFormGroup"
 import Field from "@nylira/vue-field"
 export default {
   name: "modal-lcd-approval",
   components: {
     TmBtn,
-    FormGroup,
     Field
   },
   computed: {},
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index b781cf37d6..ed9cfb107a 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -3,7 +3,7 @@
   form.ni-modal-search-container(
     v-if="type === 'blocks'"
     v-on:submit.prevent.default="gotoBlock")
-    form-group(field-id="search-input" field-label=""
+    tm-form-group(field-id="search-input" field-label=""
       :error="$v.filters.blocks.search.query.$invalid")
       .ni-modal-search-field
         field#search-input.mousetrap(
@@ -19,7 +19,7 @@
         :max="$v.filters.blocks.search.query.$params.between.max"
         v-if="!$v.filters.blocks.search.query.between")
   .ni-modal-search-container(v-else)
-    form-group(field-id="search-input" field-label="")
+    tm-form-group(field-id="search-input" field-label="")
       .ni-modal-search-field
         field#search-input.mousetrap(
           type="text" placeholder="Search..." v-model="query")
@@ -29,16 +29,15 @@
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 export default {
   name: "modal-search",
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg
   },
   computed: {
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index a2ab080e26..04b4dd28a2 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -5,7 +5,7 @@
     .ni-session-title Remove Account
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    form-group(:error='$v.fields.deletionPassword.$error'
+    tm-form-group(:error='$v.fields.deletionPassword.$error'
       field-id='sign-in-password' field-label='Password')
       field#sign-in-password(
         type="password"
@@ -14,7 +14,7 @@
       form-msg(name='Password' type='required' v-if='!$v.fields.deletionPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.deletionPassword.minLength')
 
-    form-group(field-id="sign-up-warning" field-label=' '
+    tm-form-group(field-id="sign-up-warning" field-label=' '
       :error='$v.fields.deletionWarning.$error')
       .ni-field-checkbox
         .ni-field-checkbox-input
@@ -28,9 +28,8 @@
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 export default {
@@ -38,7 +37,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct
   },
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index f914d5a5d6..618c1dfeff 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -5,7 +5,7 @@
     .ni-session-title Import with Seed
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
+    tm-form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
       field#import-name(
         type="text"
         placeholder="Must have at least 5 characters"
@@ -13,7 +13,7 @@
       form-msg(name='Name' type='required' v-if='!$v.fields.importName.required')
       form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.importName.minLength')
 
-    form-group(:error='$v.fields.importPassword.$error'
+    tm-form-group(:error='$v.fields.importPassword.$error'
       field-id='import-password' field-label='Password')
       field#import-password(
         type="password"
@@ -22,7 +22,7 @@
       form-msg(name='Password' type='required' v-if='!$v.fields.importPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.importPassword.minLength')
 
-    form-group(:error='$v.fields.importPasswordConfirm.$error'
+    tm-form-group(:error='$v.fields.importPasswordConfirm.$error'
       field-id='import-password-confirmation' field-label='Confirm Password')
       field#import-password-confirmation(
         type="password"
@@ -30,7 +30,7 @@
         v-model="fields.importPasswordConfirm")
       form-msg(name='Password confirmation' type='match' v-if='!$v.fields.importPasswordConfirm.sameAsPassword')
 
-    form-group(:error='$v.fields.importSeed.$error'
+    tm-form-group(:error='$v.fields.importSeed.$error'
       field-id='import-seed' field-label='Seed Phrase')
       field-seed#import-seed(
         :value="fields.importSeed"
@@ -39,7 +39,7 @@
       form-msg(name='Seed' type='required' v-if='!$v.fields.importSeed.required')
       form-msg(name='Seed' type='words16' v-else-if='!$v.fields.importSeed.words16')
 
-    form-group(field-id="error-collection" field-label=''
+    tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
       .ni-field-checkbox
         .ni-field-checkbox-input
@@ -54,10 +54,9 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 export default {
@@ -66,7 +65,7 @@ export default {
     TmBtn,
     Field,
     FieldSeed,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct
   },
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 29ef33175a..97786009b6 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -5,7 +5,7 @@
     .ni-session-title Sign In
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    form-group(field-id='sign-in-name' field-label='Select Account')
+    tm-form-group(field-id='sign-in-name' field-label='Select Account')
       field#sign-in-name(
         type="select"
         v-model="fields.signInName"
@@ -13,7 +13,7 @@
         :options="accounts")
       form-msg(name='Name' type='required' v-if='!$v.fields.signInName.required')
 
-    form-group(:error='$v.fields.signInPassword.$error'
+    tm-form-group(:error='$v.fields.signInPassword.$error'
       field-id='sign-in-password' field-label='Password')
       field#sign-in-password(
         type="password"
@@ -28,9 +28,8 @@
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 export default {
@@ -38,7 +37,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct
   },
@@ -116,7 +115,7 @@ export default {
 }
 </script>
 <style lang="stylus">
-.ni-form-group
+.ni-tm-form-group
   a
     cursor pointer
 </style>
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index b2872aa293..0c676c9bed 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -5,7 +5,7 @@
     .ni-session-title Create Account
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
+    tm-form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
       field#sign-up-name(
         type="text"
         placeholder="Must be at least 5 characters"
@@ -13,7 +13,7 @@
       form-msg(name='Name' type='required' v-if='!$v.fields.signUpName.required')
       form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.signUpName.minLength')
 
-    form-group(:error='$v.fields.signUpPassword.$error'
+    tm-form-group(:error='$v.fields.signUpPassword.$error'
       field-id='sign-up-password' field-label='Password')
       field#sign-up-password(
         type="password"
@@ -22,7 +22,7 @@
       form-msg(name='Password' type='required' v-if='!$v.fields.signUpPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signUpPassword.minLength')
 
-    form-group(:error='$v.fields.signUpPasswordConfirm.$error'
+    tm-form-group(:error='$v.fields.signUpPasswordConfirm.$error'
       field-id='sign-up-password-confirm' field-label='Confirm Password')
       field#sign-up-password-confirm(
         type="password"
@@ -30,12 +30,12 @@
         v-model="fields.signUpPasswordConfirm")
       form-msg(name='Password confirmation' type='match' v-if='!$v.fields.signUpPasswordConfirm.sameAsPassword')
 
-    form-group(field-id='sign-up-seed' field-label='Seed Phrase')
+    tm-form-group(field-id='sign-up-seed' field-label='Seed Phrase')
       field-seed#sign-up-seed(v-model="fields.signUpSeed" disabled)
       form-msg.sm
         | Please back up the seed phrase for this account. This seed phrase cannot be recovered.
 
-    form-group(field-id="sign-up-warning" field-label=''
+    tm-form-group(field-id="sign-up-warning" field-label=''
       :error='$v.fields.signUpWarning.$error')
       .ni-field-checkbox
         .ni-field-checkbox-input
@@ -44,7 +44,7 @@
           | I have securely written down my seed. I understand that lost seeds cannot be recovered.
       form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
 
-    form-group(field-id="error-collection" field-label=''
+    tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
       .ni-field-checkbox
         .ni-field-checkbox-input
@@ -59,10 +59,9 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 export default {
@@ -71,7 +70,7 @@ export default {
     TmBtn,
     Field,
     FieldSeed,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 782f019f58..143ada0bc0 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -4,7 +4,7 @@ page(title="Proposal: Adjust Parameters")
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
         type="text"
@@ -15,7 +15,7 @@ page(title="Proposal: Adjust Parameters")
       form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
       field#proposal-body(
         type="textarea"
@@ -33,9 +33,8 @@ page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -45,7 +44,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 3f6bc1e831..47b6f73732 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -4,7 +4,7 @@ page(title="Proposal: Amend Constitution")
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
         type="text"
@@ -15,7 +15,7 @@ page(title="Proposal: Amend Constitution")
       form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
       field#proposal-body(
         type="textarea"
@@ -33,9 +33,8 @@ page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -45,7 +44,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index 49aac12a46..bf0cc668da 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -4,7 +4,7 @@ page(title="Proposal: Create Atoms")
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
         type="text"
@@ -15,7 +15,7 @@ page(title="Proposal: Create Atoms")
       form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
       field#proposal-body(
         type="textarea"
@@ -33,9 +33,8 @@ page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -45,7 +44,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index ed9c219cd3..e4ef9ffe9c 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -4,7 +4,7 @@ page(title="Proposal: Freeform Text")
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
         type="text"
@@ -15,7 +15,7 @@ page(title="Proposal: Freeform Text")
       form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
       field#proposal-body(
         type="textarea"
@@ -33,9 +33,8 @@ page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -45,7 +44,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 03f94b81f9..f0c7c454fa 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -4,7 +4,7 @@ page(title="Proposal: Upgrade Code")
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
         type="text"
@@ -15,7 +15,7 @@ page(title="Proposal: Upgrade Code")
       form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
       field#proposal-body(
         type="textarea"
@@ -33,9 +33,8 @@ page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -45,7 +44,7 @@ export default {
   components: {
     TmBtn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 4d2f22bdea..b926ddd0b7 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -97,7 +97,7 @@ page.page-bond(:title="`Bond ${denom}`")
             placeholder="Atoms"
             :value="newUnbondingAtoms")
 
-    form-group(field-id="bond-confirm" field-label=''
+    tm-form-group(field-id="bond-confirm" field-label=''
       :error='$v.fields.bondConfirm.$error')
       .ni-field-checkbox
         .ni-field-checkbox-input
@@ -117,10 +117,9 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -132,7 +131,7 @@ export default {
     TmBtn,
     Field,
     FieldAddon,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index 506302ef17..a8813832de 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -3,7 +3,7 @@ page(title='Send')
   div(slot="menu"): tool-bar
   form-struct(:submit="onSubmit")
     part(title='Denomination Options')
-      form-group(:error='$v.fields.denom.$error'
+      tm-form-group(:error='$v.fields.denom.$error'
         field-id='send-denomination' field-label='Denomination')
         field#send-denomination(
           type="select"
@@ -13,7 +13,7 @@ page(title='Send')
         form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
 
     part(title='Transaction Details')
-      form-group(:error='$v.fields.zoneId.$error'
+      tm-form-group(:error='$v.fields.zoneId.$error'
         v-if="config.devMode"
         field-id='send-zone-id' field-label='Zone ID')
         field#send-zone-id(
@@ -22,7 +22,7 @@ page(title='Send')
           :options="zoneIds"
           placeholder="Select zone...")
         form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
-      form-group(:error='$v.fields.address.$error'
+      tm-form-group(:error='$v.fields.address.$error'
         field-id='send-address' field-label='Send To')
         tm-field-group
           field#send-address(
@@ -32,7 +32,7 @@ page(title='Send')
         form-msg(name='Address' type='required' v-if='!$v.fields.address.required')
         form-msg(name='Address' type='bech32' :body="bech32error" v-else-if='!$v.fields.address.bech32Validate')
 
-      form-group(:error='$v.fields.amount.$error'
+      tm-form-group(:error='$v.fields.amount.$error'
         field-id='send-amount' field-label='Amount')
         tm-field-group
           field#send-amount(
@@ -53,10 +53,9 @@ page(title='Send')
 import b32 from "scripts/b32"
 import { required, between } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import { TmBtn, TmFieldGroup } from "@tendermint/ui"
+import { TmBtn, TmFieldGroup, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
-import FormGroup from "common/NiFormGroup"
 import FormMsg from "common/NiFormMsg"
 import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
@@ -68,7 +67,7 @@ export default {
     Field,
     FieldAddon,
     TmFieldGroup,
-    FormGroup,
+    TmFormGroup,
     FormMsg,
     FormStruct,
     Page,
diff --git a/archive/components/FormGroupDelegate.vue b/archive/components/FormGroupDelegate.vue
index 6eb3c96f7c..619bb9a893 100644
--- a/archive/components/FormGroupDelegate.vue
+++ b/archive/components/FormGroupDelegate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-form-group(:class='cssClass' :error="$v.fields.atoms.$error")
+tm-form-group(:class='cssClass' :error="$v.fields.atoms.$error")
   i.fa.fa-check-square-o(@click='rm(delegate.id)')
   router-link.id(:to="{ name: 'delegate', params: { delegate: delegate.id } }")
     | {{ delegate.keybaseID }}
@@ -18,7 +18,7 @@ form-group(:class='cssClass' :error="$v.fields.atoms.$error")
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
 import Btn from "@nylira/vue-button"
-import FormGroup from "common/NiFormGroup"
+import { TmFormGroup } from "@tendermint/ui"
 import FormMsg from "common/NiFormMsg"
 export default {
   name: "card-delegate-atoms",
@@ -26,7 +26,7 @@ export default {
   components: {
     Btn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg
   },
   computed: {
diff --git a/test/unit/specs/components/common/NiFormGroup.spec.js b/test/unit/specs/components/common/NiFormGroup.spec.js
deleted file mode 100644
index 34df24ea47..0000000000
--- a/test/unit/specs/components/common/NiFormGroup.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiFormGroup from "common/NiFormGroup"
-
-describe("NiFormGroup", () => {
-  let wrapper
-
-  let propsData = {
-    error: true,
-    fieldId: "sign-in-password",
-    fieldLabel: "Sign In Password"
-  }
-
-  beforeEach(() => {
-    wrapper = mount(NiFormGroup, {
-      propsData,
-      slots: { default: '<input class="fake-field" value="fake"></div>' }
-    })
-  })
-
-  it("has a field id from props", () => {
-    expect(wrapper.vm.fieldId).toBe("sign-in-password")
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  it("shows the label of the field", () => {
-    expect(
-      wrapper
-        .find(".ni-form-group__label")
-        .text()
-        .trim()
-    ).toBe("Sign In Password")
-  })
-
-  it("has a slot with a field", () => {
-    expect(wrapper.findAll(".fake-field").length).toBe(1)
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap
deleted file mode 100644
index 99c56d7fe9..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiFormGroup has the expected html structure 1`] = `
-"<div class=\\"ni-form-group ni-form-group--error\\">
-   <!---->
-   <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Sign In Password</label>
-   <div class=\\"ni-form-group__field\\">
-      <input value=\\"fake\\" class=\\"fake-field\\">
-   </div>
-</div>"
-`;

From 22a9932a01a7d38eb923cf674a11c03a904281a2 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 14:52:54 +0200
Subject: [PATCH 11/31] TmFormStruct

---
 .../components/common/NiFormStruct.vue        | 101 ------------------
 .../common/NiSessionAccountDelete.vue         |   7 +-
 .../components/common/NiSessionImport.vue     |   8 +-
 .../components/common/NiSessionSignIn.vue     |   7 +-
 .../components/common/NiSessionSignUp.vue     |   7 +-
 .../components/govern/PageProposal.vue        |   7 +-
 .../govern/PageProposalsNewAdjust.vue         |   7 +-
 .../govern/PageProposalsNewAmend.vue          |   7 +-
 .../govern/PageProposalsNewCreate.vue         |   7 +-
 .../govern/PageProposalsNewText.vue           |   7 +-
 .../govern/PageProposalsNewUpgrade.vue        |   7 +-
 .../renderer/components/staking/PageBond.vue  |   7 +-
 .../renderer/components/wallet/PageSend.vue   |   7 +-
 .../components/common/NiFormStruct.spec.js    |  69 ------------
 .../__snapshots__/NiFormStruct.spec.js.snap   |  18 ++--
 15 files changed, 46 insertions(+), 227 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiFormStruct.vue
 delete mode 100644 test/unit/specs/components/common/NiFormStruct.spec.js

diff --git a/app/src/renderer/components/common/NiFormStruct.vue b/app/src/renderer/components/common/NiFormStruct.vue
deleted file mode 100644
index e36f1f9966..0000000000
--- a/app/src/renderer/components/common/NiFormStruct.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template lang="pug">
-form(:class='cssClass' v-on:submit.prevent.default='submit')
-  .ni-form-container
-    slot(name='overlay')
-    header.ni-form-header(v-if='hasHeader')
-      .ni-form-title
-        slot(name='title')
-      .ni-form-subtitle
-        slot(name='subtitle')
-    main.ni-form-main
-      slot
-    footer.ni-form-footer(v-if='hasFooter')
-      slot(name='footer')
-</template>
-
-<script>
-// NOTICE
-// Remember that v-on:submit will NOT work on this component
-// Use :submit="onSubmit on the parent component and it'll save you headaches
-export default {
-  name: "ni-form-struct",
-  computed: {
-    cssClass() {
-      let value = "ni-form"
-      if (this.width === "narrow") value += " ni-form-narrow"
-      return value
-    },
-    hasHeader() {
-      return this.$slots["title"] || this.$slots["subtitle"]
-    },
-    hasFooter() {
-      return this.$slots["footer"]
-    }
-  },
-  props: ["width", "submit"]
-}
-</script>
-
-<style lang="stylus">
-@import '~variables'
-
-.ni-form
-  display flex
-  position relative
-  width width-main
-
-.ni-form-container
-  flex 1
-  display flex
-  flex-flow column
-  position relative
-
-.ni-form-header
-.ni-form-title
-.ni-form-subtitle
-.ni-form-main
-.ni-form-footer
-  &:empty
-    display none
-
-.ni-form-main
-  flex 1
-
-.ni-form-header
-  display flex
-  flex-flow column nowrap
-  border-bottom px solid var(--bc)
-  position relative
-  padding 1rem 0
-
-.ni-form-title
-  line-height 1rem
-  color var(--bright)
-
-.ni-form-subtitle
-  color var(--dim)
-  font-size sm
-  line-height 1rem
-
-.ni-form-footer
-  > div
-    padding 1rem 1rem 1rem - px
-    display flex
-    justify-content space-between
-    align-items center
-
-    > *:not(:last-child)
-      margin-right 1rem
-
-@media screen and (min-width: 480px)
-  .ni-form-title
-    line-height 1.5rem
-    margin-bottom 0.5rem
-
-  .ni-form-subtitle
-    font-size m
-
-  .ni-form-main
-    p
-      margin 1rem 1rem 0
-</style>
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index 04b4dd28a2..9acd1b79e8 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
+.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
   .ni-session-header
     a(@click="setState('sign-in')"): i.material-icons arrow_back
     .ni-session-title Remove Account
@@ -28,10 +28,9 @@
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-account-delete",
   components: {
@@ -39,7 +38,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct
+    TmFormStruct
   },
   data: () => ({ fields: { deletionPassword: "" } }),
   methods: {
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 618c1dfeff..2ab9deef4b 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
+.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
     .ni-session-title Import with Seed
@@ -54,11 +54,11 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
+
 export default {
   name: "ni-session-import",
   components: {
@@ -67,7 +67,7 @@ export default {
     FieldSeed,
     TmFormGroup,
     FormMsg,
-    FormStruct
+    TmFormStruct
   },
   data: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 97786009b6..4d73f3beb1 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.ni-session: form-struct(:submit="onSubmit").ni-session-container
+.ni-session: tm-form-struct(:submit="onSubmit").ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
     .ni-session-title Sign In
@@ -28,10 +28,9 @@
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-sign-in",
   components: {
@@ -39,7 +38,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct
+    TmFormStruct
   },
   data: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index 0c676c9bed..d18ab6faea 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
+.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
     .ni-session-title Create Account
@@ -59,11 +59,10 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 export default {
   name: "ni-session-sign-up",
   components: {
@@ -72,7 +71,7 @@ export default {
     FieldSeed,
     TmFormGroup,
     FormMsg,
-    FormStruct
+    TmFormStruct
   },
   data: () => ({
     creating: true,
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index ea4db23a9a..b2d34b86cb 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -8,7 +8,7 @@ page(:title='proposal.title')
     div(slot='title') Proposed by #[router-link(:to="{ name: 'delegate', params: { delegate: proposal.validatorId }}") {{ proposal.validatorId }}]
     text-block(:content="proposal.data.text")
 
-  part(title='Time to vote: 13D 23H 27M'): form-struct(:submit='confirmVote')
+  part(title='Time to vote: 13D 23H 27M'): tm-form-struct(:submit='confirmVote')
     field-vote(@click.native="vote('yes')" dt='Yes' :dd='yesPct'
       color='hsl(120,50%,35%)' :active="votePick === 'yes'" :results="voteVisible")
 
@@ -28,9 +28,8 @@ page(:title='proposal.title')
 
 <script>
 import { mapGetters } from "vuex"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmFormStruct } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 import TextBlock from "common/TextBlock"
@@ -40,7 +39,7 @@ export default {
   components: {
     TmBtn,
     FieldVote,
-    FormStruct,
+    TmFormStruct,
     Page,
     Part,
     TextBlock,
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 143ada0bc0..c31e4e6c96 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -3,7 +3,7 @@ page(title="Proposal: Adjust Parameters")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
@@ -33,10 +33,9 @@ page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -46,7 +45,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 47b6f73732..0d7ec18a28 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -3,7 +3,7 @@ page(title="Proposal: Amend Constitution")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
@@ -33,10 +33,9 @@ page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -46,7 +45,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index bf0cc668da..66fa77013a 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -3,7 +3,7 @@ page(title="Proposal: Create Atoms")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
@@ -33,10 +33,9 @@ page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -46,7 +45,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index e4ef9ffe9c..07a9db948b 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -3,7 +3,7 @@ page(title="Proposal: Freeform Text")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
@@ -33,10 +33,9 @@ page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -46,7 +45,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index f0c7c454fa..45de56ed47 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -3,7 +3,7 @@ page(title="Proposal: Upgrade Code")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
       field#proposal-title(
@@ -33,10 +33,9 @@ page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -46,7 +45,7 @@ export default {
     Field,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     ToolBar
   },
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index b926ddd0b7..e4fc1f2e6e 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 page.page-bond(:title="`Bond ${denom}`")
   div(slot="menu"): tool-bar
-  part(:title="`Start bonding your ${totalAtoms} ${denom}`"): form-struct( :submit="onSubmit")
+  part(:title="`Start bonding your ${totalAtoms} ${denom}`"): tm-form-struct( :submit="onSubmit")
     .bond-group(:class="bondGroupClass(unbondedAtomsDelta)")
       .bond-group__fields
         .bond-bar
@@ -117,11 +117,10 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
@@ -133,7 +132,7 @@ export default {
     FieldAddon,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     Part,
     ToolBar
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index a8813832de..8eb04e876a 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
 page(title='Send')
   div(slot="menu"): tool-bar
-  form-struct(:submit="onSubmit")
+  tm-form-struct(:submit="onSubmit")
     part(title='Denomination Options')
       tm-form-group(:error='$v.fields.denom.$error'
         field-id='send-denomination' field-label='Denomination')
@@ -53,11 +53,10 @@ page(title='Send')
 import b32 from "scripts/b32"
 import { required, between } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import { TmBtn, TmFieldGroup, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFieldGroup, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
 import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
@@ -69,7 +68,7 @@ export default {
     TmFieldGroup,
     TmFormGroup,
     FormMsg,
-    FormStruct,
+    TmFormStruct,
     Page,
     Part,
     ToolBar
diff --git a/test/unit/specs/components/common/NiFormStruct.spec.js b/test/unit/specs/components/common/NiFormStruct.spec.js
deleted file mode 100644
index f73fea138a..0000000000
--- a/test/unit/specs/components/common/NiFormStruct.spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiFormStruct from "common/NiFormStruct"
-
-describe("NiFormStruct", () => {
-  let wrapper
-
-  let propsData = {
-    width: "narrow",
-    submit: function() {
-      console.log("form successfully submitted")
-    }
-  }
-
-  beforeEach(() => {
-    wrapper = mount(NiFormStruct, {
-      propsData,
-      slots: {
-        default: '<div class="fake-fields"></div>',
-        footer: '<div class="fake-footer">Fake Footer</div>',
-        title: '<div class="fake-title">Fake Title</div>',
-        subtitle: '<div class="fake-subtitle">Fake Subtitle</div>'
-      }
-    })
-  })
-
-  it("has a width from props", () => {
-    expect(wrapper.vm.width).toBe("narrow")
-  })
-
-  it("has a submit function", () => {
-    expect(wrapper.vm.submit).toBeTruthy()
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  it("has a default slot", () => {
-    expect(wrapper.findAll(".fake-fields").length).toBe(1)
-  })
-
-  it("has a footer slot", () => {
-    expect(
-      wrapper
-        .find(".fake-footer")
-        .text()
-        .trim()
-    ).toBe("Fake Footer")
-  })
-
-  it("has a title slot", () => {
-    expect(
-      wrapper
-        .find(".fake-title")
-        .text()
-        .trim()
-    ).toBe("Fake Title")
-  })
-
-  it("has a subtitle slot", () => {
-    expect(
-      wrapper
-        .find(".fake-subtitle")
-        .text()
-        .trim()
-    ).toBe("Fake Subtitle")
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
index 581e86f0f8..4d971934dd 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFormStruct has the expected html structure 1`] = `
-"<form class=\\"ni-form ni-form-narrow\\">
-   <div class=\\"ni-form-container\\">
-      <header class=\\"ni-form-header\\">
-         <div class=\\"ni-form-title\\">
+exports[`TmFormStruct has the expected html structure 1`] = `
+"<form class=\\"tm-form tm-form-narrow\\">
+   <div class=\\"tm-form-container\\">
+      <header class=\\"tm-form-header\\">
+         <div class=\\"tm-form-title\\">
             <div class=\\"fake-title\\">
                Fake Title
             </div>
 </div>
-      <div class=\\"ni-form-subtitle\\">
+      <div class=\\"tm-form-subtitle\\">
          <div class=\\"fake-subtitle\\">
             Fake Subtitle
          </div>
 </div>
 </header>
-   <main class=\\"ni-form-main\\">
+   <main class=\\"tm-form-main\\">
       <div class=\\"fake-fields\\"></div>
 </main>
-   <footer class=\\"ni-form-footer\\">
+   <footer class=\\"tm-form-footer\\">
       <div class=\\"fake-footer\\">
          Fake Footer
       </div>
 </footer>
 </div>
 </form>"
-`;
+`

From e8e8049fc7d2a68f674f31fc6c848b71de3d257d Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 15:44:07 +0200
Subject: [PATCH 12/31] TmPage & TmPageFooter

---
 app/src/renderer/components/common/NiPage.vue | 57 -----------------
 .../components/common/NiPageFooter.vue        | 24 -------
 .../components/common/NiPageHeader.vue        | 64 -------------------
 .../renderer/components/common/Page404.vue    |  7 +-
 .../components/common/PagePreferences.vue     |  7 +-
 .../components/govern/PageProposal.vue        |  7 +-
 .../components/govern/PageProposals.vue       |  6 +-
 .../components/govern/PageProposalsNew.vue    |  7 +-
 .../govern/PageProposalsNewAdjust.vue         |  7 +-
 .../govern/PageProposalsNewAmend.vue          |  7 +-
 .../govern/PageProposalsNewCreate.vue         |  7 +-
 .../govern/PageProposalsNewText.vue           |  7 +-
 .../govern/PageProposalsNewUpgrade.vue        |  7 +-
 .../renderer/components/monitor/PageBlock.vue |  7 +-
 .../components/monitor/PageBlocks.vue         |  7 +-
 .../renderer/components/staking/PageBond.vue  |  7 +-
 .../components/staking/PageDelegate.vue       |  7 +-
 .../components/staking/PageStaking.vue        |  7 +-
 .../renderer/components/wallet/PageSend.vue   | 13 ++--
 .../components/wallet/PageTransactions.vue    |  6 +-
 .../renderer/components/wallet/PageWallet.vue |  7 +-
 archive/components/PageDelegatePower.vue      |  6 +-
 archive/components/PageDelegateProposals.vue  |  6 +-
 archive/components/PageDelegateSlashes.vue    |  6 +-
 archive/components/PageDelegateVotes.vue      |  6 +-
 .../specs/components/common/NiPage.spec.js    | 35 ----------
 .../components/common/NiPageFooter.spec.js    | 14 ----
 .../components/common/NiPageHeader.spec.js    | 14 ----
 .../__snapshots__/NiPageHeader.spec.js.snap   | 25 --------
 29 files changed, 72 insertions(+), 315 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiPage.vue
 delete mode 100644 app/src/renderer/components/common/NiPageFooter.vue
 delete mode 100644 app/src/renderer/components/common/NiPageHeader.vue
 delete mode 100644 test/unit/specs/components/common/NiPage.spec.js
 delete mode 100644 test/unit/specs/components/common/NiPageFooter.spec.js
 delete mode 100644 test/unit/specs/components/common/NiPageHeader.spec.js
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap

diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue
deleted file mode 100644
index 50d5497454..0000000000
--- a/app/src/renderer/components/common/NiPage.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template lang="pug">
-.ni-page
-  page-header(:icon='icon')
-    h2(slot='title') {{ title }}
-    h3(slot='subtitle') {{ subtitle }}
-    div(slot="menu"): slot(name="menu")
-  main.ni-page-main: slot
-</template>
-
-<script>
-import { mapGetters } from "vuex"
-import PerfectScrollbar from "perfect-scrollbar"
-import PageHeader from "common/NiPageHeader"
-import PageFooter from "common/NiPageFooter"
-export default {
-  name: "ni-page",
-  props: ["title", "subtitle", "icon"],
-  components: {
-    PageHeader,
-    PageFooter
-  },
-  computed: { ...mapGetters(["config"]) },
-  data: () => ({ ps: "" }),
-  async mounted() {
-    await this.$nextTick()
-    const container = this.$el.querySelector(".ni-page-main")
-    this.ps = new PerfectScrollbar(container)
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page
-  flex 1
-  display flex
-  flex-flow column nowrap
-  position relative
-
-.ni-page-main
-  flex 1
-  position relative
-
-.ni-page-title
-  color var(--bright)
-  font-size h2
-  padding 0.5rem 1rem 1rem
-
-.ni-page-subtitle > div
-  color var(--dim)
-  font-size sm
-
-@media screen and (min-width: 768px)
-  .ni-page-main
-    padding 1rem
-</style>
diff --git a/app/src/renderer/components/common/NiPageFooter.vue b/app/src/renderer/components/common/NiPageFooter.vue
deleted file mode 100644
index bfaf116ffb..0000000000
--- a/app/src/renderer/components/common/NiPageFooter.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template lang='pug'>
-footer.ni-page-footer
-  .container
-    slot
-</template>
-
-<script>
-export default { name: "ni-page-footer" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page-footer
-  .container
-    border-top px solid var(--bc)
-    height 3rem
-    display flex
-    align-items center
-
-    padding 0 1rem
-    &:empty
-      display none
-</style>
diff --git a/app/src/renderer/components/common/NiPageHeader.vue b/app/src/renderer/components/common/NiPageHeader.vue
deleted file mode 100644
index cf77b0f88c..0000000000
--- a/app/src/renderer/components/common/NiPageHeader.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template lang='pug'>
-header.ni-page-header
-  .ni-page-header-container
-    .ni-page-header-text
-      .ni-page-header-title
-        slot(name='title')
-      .ni-page-header-subtitle
-        slot(name='subtitle')
-    menu.ni-page-header-menu
-      slot(name="menu")
-</template>
-
-<script>
-export default { name: "ni-page-header" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page-header
-  -webkit-app-region drag
-
-.ni-page-header-title
-  font-size xl
-  > div
-    display inline-block
-
-.ni-page-header-container
-  min-height 4.22rem
-  border-bottom px solid var(--bc)
-  display flex
-
-.ni-page-header-text
-  flex 1
-  display flex
-  min-width 0 // fix truncation
-  padding 11px 0 0 1rem
-  align-items: center
-
-  i.material-icons
-    font-size 1.375 * x
-    padding-right 0.375rem
-
-  > div
-    white-space nowrap
-    overflow hidden
-    text-overflow ellipsis
-
-  h2
-    font-size xl
-    font-weight 500
-    color var(--bright)
-
-@media screen and (min-width: 1024px)
-  .ni-page-header
-    border-bottom-color var(--bc)
-
-  .ni-page-header-container
-    display flex
-
-  .ni-page-header-menu
-    display flex
-    align-items center
-</style>
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index 0abe407151..e4933c8ba5 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -1,19 +1,18 @@
 <template lang="pug">
-page(title='404 - Page Not Found')
+tm-page(title='404 - Page Not Found')
   part(title='Try another page...')
     tm-list-item(to='/' title='Balances')
     tm-list-item(to='/staking' title='Staking')
 </template>
 
 <script>
-import { TmListItem } from "@tendermint/ui"
-import Page from "common/NiPage"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-404",
   components: {
     TmListItem,
-    Page,
+    TmPage,
     Part
   }
 }
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index e4d47ee275..cf452c7c50 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Preferences")
+tm-page(title="Preferences")
   div(slot="menu"): tool-bar
 
   part(title='Settings')
@@ -46,9 +46,8 @@ page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
-import { TmListItem, TmBtn } from "@tendermint/ui"
+import { TmListItem, TmBtn, TmPage } from "@tendermint/ui"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 export default {
   name: "page-preferences",
@@ -56,7 +55,7 @@ export default {
     TmBtn,
     Field,
     TmListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index b2d34b86cb..afe3e32d04 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title='proposal.title')
+tm-page(:title='proposal.title')
   div(slot="menu"): tool-bar
     a(@click="commentOnProposal(proposal.id)"): i.material-icons comment
     a(@click="proposalIsSpam(proposal.id)"): i.material-icons error
@@ -28,9 +28,8 @@ page(:title='proposal.title')
 
 <script>
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormStruct, TmPage } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/NiToolBar"
@@ -40,7 +39,7 @@ export default {
     TmBtn,
     FieldVote,
     TmFormStruct,
-    Page,
+    TmPage,
     Part,
     TextBlock,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index e16b1b42b9..67c236963b 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Proposals')
+tm-page(title='Proposals')
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'New Proposal'")
       i.material-icons add
@@ -28,7 +28,7 @@ import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/NiModalSearch"
 import TabBar from "common/NiTabBar"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-proposals",
@@ -38,7 +38,7 @@ export default {
     DataEmptySearch,
     LiProposal,
     ModalSearch,
-    Page,
+    TmPage,
     Part,
     TabBar,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 0d2a69b926..ddb3bd3204 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='New Proposal')
+tm-page(title='New Proposal')
   div(slot="menu"): tool-bar
     router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -12,15 +12,14 @@ page(title='New Proposal')
 </template>
 
 <script>
-import { TmListItem } from "@tendermint/ui"
-import Page from "common/NiPage"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new",
   components: {
     TmListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   }
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index c31e4e6c96..fa728e2a36 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Proposal: Adjust Parameters")
+tm-page(title="Proposal: Adjust Parameters")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -33,10 +33,9 @@ page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-adjust",
@@ -46,7 +45,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 0d7ec18a28..07e50adaaf 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Proposal: Amend Constitution")
+tm-page(title="Proposal: Amend Constitution")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -33,10 +33,9 @@ page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-amend",
@@ -46,7 +45,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index 66fa77013a..7c1147eea0 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Proposal: Create Atoms")
+tm-page(title="Proposal: Create Atoms")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -33,10 +33,9 @@ page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-create",
@@ -46,7 +45,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 07a9db948b..bfc5d9aa48 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Proposal: Freeform Text")
+tm-page(title="Proposal: Freeform Text")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -33,10 +33,9 @@ page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-text",
@@ -46,7 +45,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 45de56ed47..3d9a0c9533 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title="Proposal: Upgrade Code")
+tm-page(title="Proposal: Upgrade Code")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -33,10 +33,9 @@ page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new-upgrade",
@@ -46,7 +45,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 800cfa3a5c..5f602ec7ac 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title="pageBlockTitle")
+tm-page(:title="pageBlockTitle")
   data-loading(v-if="blockchain.blockLoading")
   data-empty(v-else-if="!block || !block.header || !blockMeta")
   template(v-else)
@@ -64,9 +64,8 @@ import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/NiToolBar"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
-import Page from "common/NiPage"
 export default {
   name: "page-block",
   components: {
@@ -76,7 +75,7 @@ export default {
     ToolBar,
     TmListItem,
     Part,
-    Page
+    TmPage
   },
   computed: {
     ...mapGetters(["blockchain", "blockTxInfo", "config"]),
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index ec79f7bab5..4170288433 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Block Explorer')
+tm-page(title='Block Explorer')
   div(slot="menu"): tool-bar
     a(@click='setSearch()' v-tooltip.bottom="'Search Block'" :disabled="!somethingToSearch")
       i.material-icons search
@@ -29,10 +29,9 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 import ModalSearch from "common/NiModalSearch"
@@ -42,7 +41,7 @@ export default {
     TmListItem,
     DataError,
     DataLoading,
-    Page,
+    TmPage,
     Part,
     ToolBar,
     ModalSearch
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index e4fc1f2e6e..738fda3464 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page.page-bond(:title="`Bond ${denom}`")
+tm-page.page-bond(:title="`Bond ${denom}`")
   div(slot="menu"): tool-bar
   part(:title="`Start bonding your ${totalAtoms} ${denom}`"): tm-form-struct( :submit="onSubmit")
     .bond-group(:class="bondGroupClass(unbondedAtomsDelta)")
@@ -117,11 +117,10 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -133,7 +132,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index e65771ef8e..566759c631 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title="delegateType + ' Profile'")
+tm-page(:title="delegateType + ' Profile'")
   div(slot="menu"): tool-bar
 
   part(:title="delegateType + ' Info'")
@@ -17,8 +17,7 @@ page(:title="delegateType + ' Profile'")
 
 <script>
 import { mapGetters } from "vuex"
-import { TmListItem } from "@tendermint/ui"
-import Page from "common/NiPage"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/NiToolBar"
@@ -26,7 +25,7 @@ export default {
   name: "page-delegate",
   components: {
     TmListItem,
-    Page,
+    TmPage,
     Part,
     TextBlock,
     ToolBar
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index 6b7c93073d..a6645509f9 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Staking')
+tm-page(title='Staking')
   div(slot="menu"): tool-bar
     a(@click='updateDelegates()' v-tooltip.bottom="'Refresh'")
       i.material-icons refresh
@@ -30,13 +30,12 @@ import { mapGetters } from "vuex"
 import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn, TmPage } from "@tendermint/ui"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
 import Field from "@nylira/vue-field"
 import ModalSearch from "common/NiModalSearch"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import PanelSort from "staking/PanelSort"
 import ToolBar from "common/NiToolBar"
@@ -50,7 +49,7 @@ export default {
     DataLoading,
     Field,
     ModalSearch,
-    Page,
+    TmPage,
     Part,
     PanelSort,
     ToolBar
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index 8eb04e876a..a6c2ce7e2c 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-page(title='Send')
+tm-page(title='Send')
   div(slot="menu"): tool-bar
   tm-form-struct(:submit="onSubmit")
     part(title='Denomination Options')
@@ -53,11 +53,16 @@ page(title='Send')
 import b32 from "scripts/b32"
 import { required, between } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import { TmBtn, TmFieldGroup, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import {
+  TmBtn,
+  TmFieldGroup,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage
+} from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -69,7 +74,7 @@ export default {
     TmFormGroup,
     FormMsg,
     TmFormStruct,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 9635cf6fa5..883f25fd4f 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Transactions')
+tm-page(title='Transactions')
   div(slot="menu"): tool-bar
     a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.material-icons search
@@ -28,7 +28,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import DataEmptyTx from "common/NiDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
 import ModalSearch from "common/NiModalSearch"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -39,7 +39,7 @@ export default {
     DataEmptySearch,
     DataEmptyTx,
     ModalSearch,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 037ae615ff..71df7c23a7 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Wallet')
+tm-page(title='Wallet')
   div(slot="menu"): tool-bar
     a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
       i.material-icons refresh
@@ -45,9 +45,8 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem, TmPage } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
-import Page from "common/NiPage"
 import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -59,7 +58,7 @@ export default {
     LiCopy,
     TmListItem,
     ModalSearch,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/archive/components/PageDelegatePower.vue b/archive/components/PageDelegatePower.vue
index a0e437b9c4..3679a87a5b 100644
--- a/archive/components/PageDelegatePower.vue
+++ b/archive/components/PageDelegatePower.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Vote Power`")
+tm-page(icon="storage" :title="`${delegateId} Vote Power`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -19,14 +19,14 @@ page(icon="storage" :title="`${delegateId} Vote Power`")
 import ChartVotePower from "monitor/ChartVotePower"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-delegate-power",
   components: {
     ChartVotePower,
     ListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/archive/components/PageDelegateProposals.vue b/archive/components/PageDelegateProposals.vue
index 4ab2fa24a4..5dea5bfcee 100644
--- a/archive/components/PageDelegateProposals.vue
+++ b/archive/components/PageDelegateProposals.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Proposals`")
+tm-page(icon="storage" :title="`${delegateId} Proposals`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -22,13 +22,13 @@ page(icon="storage" :title="`${delegateId} Proposals`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-delegate-proposals",
   components: {
     ListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/archive/components/PageDelegateSlashes.vue b/archive/components/PageDelegateSlashes.vue
index 6e341d9e5b..0e0aa56cfb 100644
--- a/archive/components/PageDelegateSlashes.vue
+++ b/archive/components/PageDelegateSlashes.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Slashes`")
+tm-page(icon="storage" :title="`${delegateId} Slashes`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -23,13 +23,13 @@ page(icon="storage" :title="`${delegateId} Slashes`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-delegate-slashes",
   components: {
     ListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/archive/components/PageDelegateVotes.vue b/archive/components/PageDelegateVotes.vue
index 697b4c8cc2..6a26790c72 100644
--- a/archive/components/PageDelegateVotes.vue
+++ b/archive/components/PageDelegateVotes.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
+tm-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -27,13 +27,13 @@ page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
 import { mapGetters } from "vuex"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
+import { TmPage } from "@tendermint/ui"
 import Part from "common/NiPart"
 export default {
   name: "page-delegate-votes",
   components: {
     ListItem,
-    Page,
+    TmPage,
     Part,
     ToolBar
   },
diff --git a/test/unit/specs/components/common/NiPage.spec.js b/test/unit/specs/components/common/NiPage.spec.js
deleted file mode 100644
index ac8c9d7ddb..0000000000
--- a/test/unit/specs/components/common/NiPage.spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vuex from "vuex"
-import { mount, createLocalVue } from "@vue/test-utils"
-import NiPage from "common/NiPage"
-
-const config = require("renderer/vuex/modules/config").default({})
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-
-describe("NiPage", () => {
-  let wrapper
-  let store = new Vuex.Store({
-    getters: { config: () => config.state },
-    modules: { config }
-  })
-  store.commit = jest.fn()
-
-  beforeEach(() => {
-    store.commit.mockClear()
-    wrapper = mount(NiPage, {
-      localVue,
-      store,
-      propsData: {
-        title: "Title",
-        subtitle: "Subtitle",
-        icon: "hello_icon"
-      },
-      stubs: { "app-footer": "<app-footer />" }
-    })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiPageFooter.spec.js b/test/unit/specs/components/common/NiPageFooter.spec.js
deleted file mode 100644
index 874ac08bfe..0000000000
--- a/test/unit/specs/components/common/NiPageFooter.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPageFooter from "common/NiPageFooter"
-
-describe("NiPageFooter", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPageFooter)
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiPageHeader.spec.js b/test/unit/specs/components/common/NiPageHeader.spec.js
deleted file mode 100644
index a5a726854a..0000000000
--- a/test/unit/specs/components/common/NiPageHeader.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPageHeader from "common/NiPageHeader"
-
-describe("NiPageHeader", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPageHeader)
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap
deleted file mode 100644
index 67694aa7b2..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPageHeader has the expected html structure 1`] = `
-<header
-  class="ni-page-header"
->
-  <div
-    class="ni-page-header-container"
-  >
-    <div
-      class="ni-page-header-text"
-    >
-      <div
-        class="ni-page-header-title"
-      />
-      <div
-        class="ni-page-header-subtitle"
-      />
-    </div>
-    <menu
-      class="ni-page-header-menu"
-    />
-  </div>
-</header>
-`;

From 8b1a664b60d720a34de5fa66c798f8899f594ca0 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 18 Jun 2018 18:29:54 +0200
Subject: [PATCH 13/31] TmPart

---
 .../renderer/components/common/AppMenu.vue    |  2 -
 .../components/common/NiModalReceive.vue      |  4 +-
 .../renderer/components/common/Page404.vue    |  7 +-
 .../components/common/PagePreferences.vue     | 10 +--
 .../components/govern/PageProposal.vue        |  9 ++-
 .../components/govern/PageProposals.vue       |  2 -
 .../components/govern/PageProposalsNew.vue    |  7 +-
 .../renderer/components/monitor/PageBlock.vue | 15 ++---
 .../components/monitor/PageBlocks.vue         |  9 ++-
 .../renderer/components/staking/PageBond.vue  | 13 ++--
 .../components/staking/PageDelegate.vue       | 11 ++--
 .../components/staking/PageStaking.vue        |  2 -
 .../renderer/components/wallet/PageSend.vue   | 10 +--
 .../components/wallet/PageTransactions.vue    |  2 -
 .../renderer/components/wallet/PageWallet.vue | 11 ++--
 archive/components/AppMenuUser.vue            |  8 +--
 archive/components/PageDelegatePower.vue      |  9 ++-
 archive/components/PageDelegateProposals.vue  |  9 ++-
 archive/components/PageDelegateSlashes.vue    |  9 ++-
 archive/components/PageDelegateVotes.vue      |  9 ++-
 .../specs/components/common/NiPart.spec.js    | 38 -----------
 .../common/__snapshots__/NiPage.spec.js.snap  | 64 -------------------
 .../__snapshots__/NiPageFooter.spec.js.snap   | 11 ----
 .../common/__snapshots__/NiPart.spec.js.snap  | 31 ---------
 24 files changed, 71 insertions(+), 231 deletions(-)
 delete mode 100644 test/unit/specs/components/common/NiPart.spec.js
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index 2e3bafb0ae..c745cc3eb7 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -38,13 +38,11 @@ import noScroll from "no-scroll"
 import ConnectedNetwork from "common/NiConnectedNetwork"
 import { TmListItem } from "@tendermint/ui"
 import UserPane from "common/NiUserPane"
-import Part from "common/NiPart"
 export default {
   name: "app-menu",
   components: {
     ConnectedNetwork,
     TmListItem,
-    Part,
     UserPane
   },
   computed: {
diff --git a/app/src/renderer/components/common/NiModalReceive.vue b/app/src/renderer/components/common/NiModalReceive.vue
index 1a965ca197..b75e04850b 100644
--- a/app/src/renderer/components/common/NiModalReceive.vue
+++ b/app/src/renderer/components/common/NiModalReceive.vue
@@ -9,14 +9,12 @@ modal.ni-modal-receive(v-if="active" :close="close")
 import { mapGetters } from "vuex"
 import LiCopy from "common/NiLiCopy"
 import Modal from "common/NiModal"
-import Part from "common/NiPart"
 export default {
   name: "ni-modal-receive",
   props: ["value"],
   components: {
     LiCopy,
-    Modal,
-    Part
+    Modal
   },
   computed: {
     ...mapGetters(["config", "wallet"]),
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index e4933c8ba5..d1a790b3f6 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -1,19 +1,18 @@
 <template lang="pug">
 tm-page(title='404 - Page Not Found')
-  part(title='Try another page...')
+  tm-part(title='Try another page...')
     tm-list-item(to='/' title='Balances')
     tm-list-item(to='/staking' title='Staking')
 </template>
 
 <script>
-import { TmListItem, TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-404",
   components: {
     TmListItem,
     TmPage,
-    Part
+    TmPart
   }
 }
 </script>
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index cf452c7c50..d986e454b6 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -2,7 +2,7 @@
 tm-page(title="Preferences")
   div(slot="menu"): tool-bar
 
-  part(title='Settings')
+  tm-part(title='Settings')
     tm-list-item(type="field" title="Select network to connect to")
       field#select-network(
         type="select"
@@ -34,7 +34,7 @@ tm-page(title="Preferences")
           }`
         :value="user.errorCollection || undefined"
         @change.native="setErrorCollection")
-  part(title='Account')
+  tm-part(title='Account')
     tm-list-item(type="field" title="Switch account")
       tm-btn(
         icon='exit_to_app'
@@ -46,9 +46,9 @@ tm-page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
-import { TmListItem, TmBtn, TmPage } from "@tendermint/ui"
+import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint/ui"
 import ToolBar from "common/NiToolBar"
-import Part from "common/NiPart"
+
 export default {
   name: "page-preferences",
   components: {
@@ -56,7 +56,7 @@ export default {
     Field,
     TmListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index afe3e32d04..b1abfd3772 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -4,11 +4,11 @@ tm-page(:title='proposal.title')
     a(@click="commentOnProposal(proposal.id)"): i.material-icons comment
     a(@click="proposalIsSpam(proposal.id)"): i.material-icons error
 
-  part(v-if="proposal.type === 'text'")
+  tm-part(v-if="proposal.type === 'text'")
     div(slot='title') Proposed by #[router-link(:to="{ name: 'delegate', params: { delegate: proposal.validatorId }}") {{ proposal.validatorId }}]
     text-block(:content="proposal.data.text")
 
-  part(title='Time to vote: 13D 23H 27M'): tm-form-struct(:submit='confirmVote')
+  tm-part(title='Time to vote: 13D 23H 27M'): tm-form-struct(:submit='confirmVote')
     field-vote(@click.native="vote('yes')" dt='Yes' :dd='yesPct'
       color='hsl(120,50%,35%)' :active="votePick === 'yes'" :results="voteVisible")
 
@@ -28,9 +28,8 @@ tm-page(:title='proposal.title')
 
 <script>
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
-import Part from "common/NiPart"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -40,7 +39,7 @@ export default {
     FieldVote,
     TmFormStruct,
     TmPage,
-    Part,
+    TmPart,
     TextBlock,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index 67c236963b..d34012cb56 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -29,7 +29,6 @@ import ModalSearch from "common/NiModalSearch"
 import TabBar from "common/NiTabBar"
 import ToolBar from "common/NiToolBar"
 import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
 export default {
   name: "page-proposals",
   components: {
@@ -39,7 +38,6 @@ export default {
     LiProposal,
     ModalSearch,
     TmPage,
-    Part,
     TabBar,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index ddb3bd3204..2956e1b2f6 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -3,7 +3,7 @@ tm-page(title='New Proposal')
   div(slot="menu"): tool-bar
     router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  part(title='Choose a Type')
+  tm-part(title='Choose a Type')
     tm-list-item(title='Adjust Parameters' to="/proposals/new/adjust")
     tm-list-item(title='Amend Constitution' to="/proposals/new/amend")
     tm-list-item(title='Create Atoms' to="/proposals/new/create")
@@ -12,15 +12,14 @@ tm-page(title='New Proposal')
 </template>
 
 <script>
-import { TmListItem, TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-proposals-new",
   components: {
     TmListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   }
 }
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 5f602ec7ac..3de94c92dd 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -15,10 +15,10 @@ tm-page(:title="pageBlockTitle")
         v-tooltip.bottom="'Newer Block'")
         i.material-icons chevron_right
 
-    part(title='')
+    tm-part(title='')
       tm-list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
 
-    part(title='Header')
+    tm-part(title='Header')
       tm-list-item(dt="Chain ID" :dd="block.header.chain_id")
       tm-list-item(dt="Time" :dd="blockHeaderTime")
       tm-list-item(dt="Transactions" :dd="block.header.num_txs")
@@ -26,13 +26,13 @@ tm-page(:title="pageBlockTitle")
       tm-list-item(dt="Validators Hash" :dd="block.header.validators_hash")
       tm-list-item(dt="App Hash" :dd="block.header.app_hash")
 
-    part(title='Last Block')
+    tm-part(title='Last Block')
       tm-list-item(dt="Hash" :dd="block.header.last_block_id.hash")
       tm-list-item(dt="Parts Total"
         :dd="block.header.last_block_id.parts.total")
       tm-list-item(dt="Parts Hash" :dd="block.header.last_block_id.parts.hash")
 
-    part(title="Precommit"
+    tm-part(title="Precommit"
       v-for="p in block.last_commit.precommits"
       :key="p.validator_address" v-if="p !== null")
       tm-list-item(dt="Address" :dd="p.validator_address")
@@ -41,7 +41,7 @@ tm-page(:title="pageBlockTitle")
       tm-list-item(:dt="`Sig (${p.signature.type})`"
       :dd="p.signature.data")
 
-    part(title='Transactions')
+    tm-part(title='Transactions')
       data-loading(v-if="blockchain.blockLoading")
       data-empty(v-else-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
       template(
@@ -64,8 +64,7 @@ import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/NiToolBar"
-import { TmListItem, TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-block",
   components: {
@@ -74,7 +73,7 @@ export default {
     DataEmpty,
     ToolBar,
     TmListItem,
-    Part,
+    TmPart,
     TmPage
   },
   computed: {
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 4170288433..b44d91d4c5 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -9,12 +9,12 @@ tm-page(title='Block Explorer')
   data-loading(v-if="blockchain.syncing" title="Node is syncing blockchain…")
   data-loading(v-if="!blockchain.syncing && !blockchain.subscription")
 
-  part(title='Current Block' v-if="blockchain.subscription")
+  tm-part(title='Current Block' v-if="blockchain.subscription")
     tm-list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
     tm-list-item(dt='Block Time' :dd='latestBlockTime')
     tm-list-item(dt='Block Hash' :dd='latestBlockHash')
 
-  part(title='Latest Blocks' v-if="blockchain.subscription")
+  tm-part(title='Latest Blocks' v-if="blockchain.subscription")
     tm-list-item.column-header(dt="Block Height" dd="# of Transactions")
     tm-list-item(
       v-for="block in blocks"
@@ -29,10 +29,9 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
-import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 import ModalSearch from "common/NiModalSearch"
 export default {
@@ -42,7 +41,7 @@ export default {
     DataError,
     DataLoading,
     TmPage,
-    Part,
+    TmPart,
     ToolBar,
     ModalSearch
   },
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 738fda3464..543603016f 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 tm-page.page-bond(:title="`Bond ${denom}`")
   div(slot="menu"): tool-bar
-  part(:title="`Start bonding your ${totalAtoms} ${denom}`"): tm-form-struct( :submit="onSubmit")
+  tm-part(:title="`Start bonding your ${totalAtoms} ${denom}`"): tm-form-struct( :submit="onSubmit")
     .bond-group(:class="bondGroupClass(unbondedAtomsDelta)")
       .bond-group__fields
         .bond-bar
@@ -117,11 +117,16 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmPart
+} from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-bond",
@@ -133,7 +138,7 @@ export default {
     FormMsg,
     TmFormStruct,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index 566759c631..b44ec984ca 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -2,23 +2,22 @@
 tm-page(:title="delegateType + ' Profile'")
   div(slot="menu"): tool-bar
 
-  part(:title="delegateType + ' Info'")
+  tm-part(:title="delegateType + ' Info'")
     tm-list-item(dt='Moniker' :dd='delegate.moniker')
     tm-list-item(dt='Website' :dd='delegate.website')
     tm-list-item(dt='Address' :dd='delegate.address')
     tm-list-item(dt='Public Key' :dd='delegate.pub_key.data')
 
-  part(:title="delegateType + ' Description'")
+  tm-part(:title="delegateType + ' Description'")
     text-block(:content="delegate.details || 'No description available.'")
 
-  part(:title="delegateType + ' Details'" v-if="isValidator")
+  tm-part(:title="delegateType + ' Details'" v-if="isValidator")
     tm-list-item(dt="Total Vote Power" :dd="delegate.voting_power")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -26,7 +25,7 @@ export default {
   components: {
     TmListItem,
     TmPage,
-    Part,
+    TmPart,
     TextBlock,
     ToolBar
   },
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index a6645509f9..2748f96006 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -36,7 +36,6 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
 import Field from "@nylira/vue-field"
 import ModalSearch from "common/NiModalSearch"
-import Part from "common/NiPart"
 import PanelSort from "staking/PanelSort"
 import ToolBar from "common/NiToolBar"
 export default {
@@ -50,7 +49,6 @@ export default {
     Field,
     ModalSearch,
     TmPage,
-    Part,
     PanelSort,
     ToolBar
   },
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index a6c2ce7e2c..6a21a90983 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -2,7 +2,7 @@
 tm-page(title='Send')
   div(slot="menu"): tool-bar
   tm-form-struct(:submit="onSubmit")
-    part(title='Denomination Options')
+    tm-part(title='Denomination Options')
       tm-form-group(:error='$v.fields.denom.$error'
         field-id='send-denomination' field-label='Denomination')
         field#send-denomination(
@@ -12,7 +12,7 @@ tm-page(title='Send')
           placeholder="Select token...")
         form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
 
-    part(title='Transaction Details')
+    tm-part(title='Transaction Details')
       tm-form-group(:error='$v.fields.zoneId.$error'
         v-if="config.devMode"
         field-id='send-zone-id' field-label='Zone ID')
@@ -58,12 +58,12 @@ import {
   TmFieldGroup,
   TmFormGroup,
   TmFormStruct,
-  TmPage
+  TmPage,
+  TmPart
 } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   components: {
@@ -75,7 +75,7 @@ export default {
     FormMsg,
     TmFormStruct,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 883f25fd4f..71797ebe2b 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -29,7 +29,6 @@ import DataEmptyTx from "common/NiDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
 import ModalSearch from "common/NiModalSearch"
 import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-transactions",
@@ -40,7 +39,6 @@ export default {
     DataEmptyTx,
     ModalSearch,
     TmPage,
-    Part,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 71df7c23a7..12ac8db10a 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -8,14 +8,14 @@ tm-page(title='Wallet')
 
   modal-search(type="balances" v-if="somethingToSearch")
 
-  part(title='Your Address')
+  tm-part(title='Your Address')
     tm-list-item(
       :title="wallet.address"
       :btn="'Receive'"
       :overflow="true"
       @click.native="copy")
 
-  part#part-available-balances(title="Available Balances")
+  tm-part#part-available-balances(title="Available Balances")
     data-loading(v-if="wallet.balancesLoading")
     data-empty(v-else-if="wallet.balances.length === 0")
     data-empty-search(v-else-if="filteredBalances.length === 0")
@@ -28,7 +28,7 @@ tm-page(title='Wallet')
       :dd="i.amount"
       :to="{name: 'send', params: {denom: i.denom}}")
 
-  part#part-staked-balances(v-if="config.devMode" title="Staked Balances")
+  tm-part#part-staked-balances(v-if="config.devMode" title="Staked Balances")
     tm-list-item(
       btn="Stake"
       :dt="stakingDenom"
@@ -45,9 +45,8 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
-import { TmListItem, TmPage } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
-import Part from "common/NiPart"
 import ToolBar from "common/NiToolBar"
 export default {
   name: "page-wallet",
@@ -59,7 +58,7 @@ export default {
     TmListItem,
     ModalSearch,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/AppMenuUser.vue b/archive/components/AppMenuUser.vue
index 1eed0ae9e3..fd9540a87c 100644
--- a/archive/components/AppMenuUser.vue
+++ b/archive/components/AppMenuUser.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
 modal-menu.app-menu-user(v-if="!config.desktop")
-  part(title='User Menu')
+  tm-part(title='User Menu')
     template(v-if="user.signedIn")
       list-item(to="/settings" exact @click.native="close" title="Settings")
       list-item(type="anchor" @click.native="signOut" title="Sign Out")
     template(v-else)
       list-item(type="anchor" @click.native="signIn" title="Sign In")
 modal-menu.app-menu-user(@click="close" v-else): .outer-wrapper: .inner-wrapper
-  part(title='User Menu')
+  tm-part(title='User Menu')
     template(v-if="user.signedIn")
       list-item(to="/settings" exact @click.native="close" title="Settings")
       list-item(type="anchor" @click.native="signOut" title="Sign Out")
@@ -20,13 +20,13 @@ import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
 import ListItem from "common/NiListItem"
 import ModalMenu from "common/NiModalMenu"
-import Part from "common/NiPart"
+import { TmPart } from "@tendermint/ui"
 export default {
   name: "app-menu-user",
   components: {
     ListItem,
     ModalMenu,
-    Part
+    TmPart
   },
   computed: {
     ...mapGetters(["user", "config"])
diff --git a/archive/components/PageDelegatePower.vue b/archive/components/PageDelegatePower.vue
index 3679a87a5b..5b52041860 100644
--- a/archive/components/PageDelegatePower.vue
+++ b/archive/components/PageDelegatePower.vue
@@ -5,10 +5,10 @@ tm-page(icon="storage" :title="`${delegateId} Vote Power`")
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
       i.material-icons arrow_back
 
-  part(title='Vote Power (Millions of ATOMs) / Time')
+  tm-part(title='Vote Power (Millions of ATOMs) / Time')
     chart-vote-power(:votes="chartData")
 
-  part(title='Statistics')
+  tm-part(title='Statistics')
     list-item(dt='Total Vote Power' dd='4.2M ATOM')
     list-item#li-solo-power(dt="Solo Vote Power" dd="1M ATOM (19%)")
     list-item#li-delegated-power(dt="Delg. Vote Power" dd="3.2M ATOM (81%)")
@@ -19,15 +19,14 @@ tm-page(icon="storage" :title="`${delegateId} Vote Power`")
 import ChartVotePower from "monitor/ChartVotePower"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-power",
   components: {
     ChartVotePower,
     ListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateProposals.vue b/archive/components/PageDelegateProposals.vue
index 5dea5bfcee..e7e26d1fce 100644
--- a/archive/components/PageDelegateProposals.vue
+++ b/archive/components/PageDelegateProposals.vue
@@ -7,10 +7,10 @@ tm-page(icon="storage" :title="`${delegateId} Proposals`")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Current Proposals')
+  tm-part(title='Current Proposals')
     list-item(title="Title of the proposal here" subtitle="Live now" to="/proposal")
 
-  part(title='Past Proposals')
+  tm-part(title='Past Proposals')
     list-item(title="Title of the proposal here" subtitle="Failed" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Passed" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Passed" to="/proposals")
@@ -22,14 +22,13 @@ tm-page(icon="storage" :title="`${delegateId} Proposals`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-proposals",
   components: {
     ListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateSlashes.vue b/archive/components/PageDelegateSlashes.vue
index 0e0aa56cfb..5bf4ea5bce 100644
--- a/archive/components/PageDelegateSlashes.vue
+++ b/archive/components/PageDelegateSlashes.vue
@@ -7,12 +7,12 @@ tm-page(icon="storage" :title="`${delegateId} Slashes`")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Statistics')
+  tm-part(title='Statistics')
     list-item(dt="Slashes" dd="7")
     list-item(dt="Percentage Slashed" dd="3%")
     list-item(dt="Last Slash:" dd="2 weeks ago")
 
-  part(title='Slashes')
+  tm-part(title='Slashes')
     list-item(title="Title of the proposal here" subtitle="Slashed: 17%" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Slashed: 5%" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Slashed: 3%" to="/proposals")
@@ -23,14 +23,13 @@ tm-page(icon="storage" :title="`${delegateId} Slashes`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-slashes",
   components: {
     ListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateVotes.vue b/archive/components/PageDelegateVotes.vue
index 6a26790c72..bf547a1b44 100644
--- a/archive/components/PageDelegateVotes.vue
+++ b/archive/components/PageDelegateVotes.vue
@@ -7,14 +7,14 @@ tm-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Vote Statistics')
+  tm-part(title='Vote Statistics')
     list-item(dt="Voted Yes:" dd="27%")
     list-item(dt="Voted No:" dd="5%")
     list-item(dt="Voted Reject:" dd="4%")
     list-item(dt="Abstained:" dd="11%")
     list-item(dt="Did Not Vote:" dd="53%")
 
-  part(title='Past Votes')
+  tm-part(title='Past Votes')
     list-item(title="Title of the proposal here" subtitle="YES" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="NO" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="REJECT" to="/proposals")
@@ -27,14 +27,13 @@ tm-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
 import { mapGetters } from "vuex"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import { TmPage } from "@tendermint/ui"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-votes",
   components: {
     ListItem,
     TmPage,
-    Part,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/test/unit/specs/components/common/NiPart.spec.js b/test/unit/specs/components/common/NiPart.spec.js
deleted file mode 100644
index 10c327079a..0000000000
--- a/test/unit/specs/components/common/NiPart.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPart from "common/NiPart"
-
-describe("NiPart", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPart, { propsData: { title: "Test" } })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("only has header if a title is defined", () => {
-    wrapper = mount(NiPart, { slots: { default: "<custom-main />" } })
-    expect(wrapper.find("header").exists()).toBe(false)
-    expect(wrapper.find("custom-main").exists()).toBe(true)
-  })
-
-  it("gets title from prop if defined", () => {
-    wrapper = mount(NiPart, { propsData: { title: "Test" } })
-    expect(wrapper.find(".ni-part-title").text()).toBe("Test")
-  })
-
-  it("should use slots", () => {
-    wrapper = mount(NiPart, {
-      slots: {
-        title: "<custom-title />",
-        default: "<custom-main />",
-        menu: "<custom-menu />"
-      }
-    })
-    expect(wrapper.find("custom-title").exists()).toBe(true)
-    expect(wrapper.find("custom-menu").exists()).toBe(true)
-    expect(wrapper.find("custom-main").exists()).toBe(true)
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
deleted file mode 100644
index 1a1e365050..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPage has the expected html structure 1`] = `
-<div
-  class="ni-page"
->
-  <header
-    class="ni-page-header"
-    icon="hello_icon"
-  >
-    <div
-      class="ni-page-header-container"
-    >
-      <div
-        class="ni-page-header-text"
-      >
-        <div
-          class="ni-page-header-title"
-        >
-          <h2>
-            Title
-          </h2>
-        </div>
-        <div
-          class="ni-page-header-subtitle"
-        >
-          <h3>
-            Subtitle
-          </h3>
-        </div>
-      </div>
-      <menu
-        class="ni-page-header-menu"
-      >
-        <div />
-      </menu>
-    </div>
-  </header>
-  <main
-    class="ni-page-main ps"
-  >
-    <div
-      class="ps__rail-x"
-      style="left: 0px; top: 0px;"
-    >
-      <div
-        class="ps__thumb-x"
-        style="left: 0px; width: 0px;"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="ps__rail-y"
-      style="top: 0px; left: 0px;"
-    >
-      <div
-        class="ps__thumb-y"
-        style="top: 0px; height: 0px;"
-        tabindex="0"
-      />
-    </div>
-  </main>
-</div>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap
deleted file mode 100644
index ca952fa668..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPageFooter has the expected html structure 1`] = `
-<footer
-  class="ni-page-footer"
->
-  <div
-    class="container"
-  />
-</footer>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap
deleted file mode 100644
index 43d807cdf6..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPart has the expected html structure 1`] = `
-<section
-  class="ni-part"
->
-  <div
-    class="ni-part-container"
-  >
-    <header
-      class="ni-part-header"
-    >
-      <div
-        class="ni-part-header-container"
-      >
-        <div
-          class="ni-part-title h5"
-        >
-          Test
-        </div>
-        <menu
-          class="ni-part-menu"
-        />
-      </div>
-    </header>
-    <main
-      class="ni-part-main"
-    />
-  </div>
-</section>
-`;

From b113525054ddc18eff8403ce58e99c1a092a33ac Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Tue, 19 Jun 2018 13:24:44 +0200
Subject: [PATCH 14/31] remove TmTabBar

---
 .../renderer/components/common/NiTabBar.vue   | 43 -------------------
 .../components/govern/PageProposals.vue       |  2 -
 .../specs/components/common/NiTabBar.spec.js  | 14 ------
 .../__snapshots__/NiTabBar.spec.js.snap       | 13 ------
 4 files changed, 72 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiTabBar.vue
 delete mode 100644 test/unit/specs/components/common/NiTabBar.spec.js
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap

diff --git a/app/src/renderer/components/common/NiTabBar.vue b/app/src/renderer/components/common/NiTabBar.vue
deleted file mode 100644
index eb0968aefd..0000000000
--- a/app/src/renderer/components/common/NiTabBar.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template lang="pug">
-.ni-tab-bar
-  .ni-tab-bar-container: slot
-</template>
-
-<script>
-export default { name: "ni-tab-bar" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-tab-bar-container
-  display flex
-  align-items center
-
-  background var(--app-fg)
-  border-bottom px solid var(--bc)
-
-  a
-    height 2rem - px
-    display block
-    padding 0 1rem
-
-    display flex
-    align-items center
-    justify-content center
-
-    border-right px solid var(--bc)
-
-    font-size sm
-    color var(--link)
-
-    &:last-of-type
-      border-right none
-
-    &.router-link-active
-      color var(--bright)
-      background var(--app-bg)
-
-    i.material-icons
-      font-size xl
-</style>
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index d34012cb56..80450875ac 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -26,7 +26,6 @@ import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/NiModalSearch"
-import TabBar from "common/NiTabBar"
 import ToolBar from "common/NiToolBar"
 import { TmPage } from "@tendermint/ui"
 export default {
@@ -38,7 +37,6 @@ export default {
     LiProposal,
     ModalSearch,
     TmPage,
-    TabBar,
     ToolBar
   },
   computed: {
diff --git a/test/unit/specs/components/common/NiTabBar.spec.js b/test/unit/specs/components/common/NiTabBar.spec.js
deleted file mode 100644
index 40b5f1cd81..0000000000
--- a/test/unit/specs/components/common/NiTabBar.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiTabBar from "common/NiTabBar"
-
-describe("NiTabBar", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiTabBar, { slots: { default: "<main-slot />" } })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap
deleted file mode 100644
index ef818e1c98..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiTabBar has the expected html structure 1`] = `
-<div
-  class="ni-tab-bar"
->
-  <div
-    class="ni-tab-bar-container"
-  >
-    <main-slot />
-  </div>
-</div>
-`;

From 7a8386e3e66f816318d0c3847b9ad4af45836e9d Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 12:31:47 +0200
Subject: [PATCH 15/31] VrToolBar to compoensate for vuex state and TmToolBar

---
 .../components/common/PagePreferences.vue     |  2 +-
 .../renderer/components/common/VrToolBar.vue  | 31 +++++++++++++++++++
 .../components/govern/PageProposal.vue        |  2 +-
 .../components/govern/PageProposals.vue       |  2 +-
 .../components/govern/PageProposalsNew.vue    |  2 +-
 .../govern/PageProposalsNewAdjust.vue         |  2 +-
 .../govern/PageProposalsNewAmend.vue          |  2 +-
 .../govern/PageProposalsNewCreate.vue         |  2 +-
 .../govern/PageProposalsNewText.vue           |  2 +-
 .../govern/PageProposalsNewUpgrade.vue        |  2 +-
 .../renderer/components/monitor/PageBlock.vue |  2 +-
 .../components/monitor/PageBlocks.vue         |  2 +-
 .../renderer/components/staking/PageBond.vue  |  2 +-
 .../components/staking/PageDelegate.vue       |  2 +-
 .../components/staking/PageStaking.vue        |  2 +-
 .../renderer/components/wallet/PageSend.vue   |  2 +-
 .../components/wallet/PageTransactions.vue    |  2 +-
 .../renderer/components/wallet/PageWallet.vue | 15 ++++-----
 app/src/renderer/styles/app.styl              |  2 +-
 .../{NiToolBar.spec.js => VrToolBar.spec.js}  |  6 ++--
 yarn.lock                                     |  9 ++++--
 21 files changed, 66 insertions(+), 29 deletions(-)
 create mode 100644 app/src/renderer/components/common/VrToolBar.vue
 rename test/unit/specs/components/common/{NiToolBar.spec.js => VrToolBar.spec.js} (84%)

diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index d986e454b6..4d7b48a4af 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -47,7 +47,7 @@ tm-page(title="Preferences")
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
 import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint/ui"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 
 export default {
   name: "page-preferences",
diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/VrToolBar.vue
new file mode 100644
index 0000000000..445b951c4e
--- /dev/null
+++ b/app/src/renderer/components/common/VrToolBar.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  tm-tool-bar
+    slot
+    a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
+      i.material-icons arrow_back
+    a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
+      i.material-icons help_outline
+    a.sign-out(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
+      i.material-icons exit_to_app
+</template>
+
+<script>
+import { TmToolBar } from "@tendermint/ui"
+export default {
+  name: "vr-tool-bar",
+  components: {
+    TmToolBar
+  },
+  mounted() {
+    console.log("TmToolBar", this)
+  },
+  methods: {
+    enableModalHelp() {
+      this.$store.commit("setModalHelp", true)
+    },
+    signOut() {
+      this.$store.dispatch("signOut")
+    }
+  }
+}
+</script>
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index b1abfd3772..b08ba33cbd 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -31,7 +31,7 @@ import { mapGetters } from "vuex"
 import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposal",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index 80450875ac..ee4c95794b 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -26,7 +26,7 @@ import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/NiModalSearch"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 import { TmPage } from "@tendermint/ui"
 export default {
   name: "page-proposals",
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 2956e1b2f6..0566dc5c55 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -13,7 +13,7 @@ tm-page(title='New Proposal')
 
 <script>
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index fa728e2a36..5e6612d1ff 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -36,7 +36,7 @@ import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 07e50adaaf..0263daaaf9 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -36,7 +36,7 @@ import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index 7c1147eea0..bc27a71610 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -36,7 +36,7 @@ import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index bfc5d9aa48..5640cc5375 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -36,7 +36,7 @@ import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-text",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 3d9a0c9533..d12d92a9a2 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -36,7 +36,7 @@ import { minLength, maxLength, required } from "vuelidate/lib/validators"
 import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 3de94c92dd..3a0427057a 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -63,7 +63,7 @@ import num from "scripts/num"
 import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-block",
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index b44d91d4c5..47ef1eaf09 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -32,7 +32,7 @@ import { mapGetters } from "vuex"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 import ModalSearch from "common/NiModalSearch"
 export default {
   name: "page-blocks",
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 543603016f..09657dbb6d 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -127,7 +127,7 @@ import {
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-bond",
   components: {
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index b44ec984ca..1974b2c56c 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -19,7 +19,7 @@ tm-page(:title="delegateType + ' Profile'")
 import { mapGetters } from "vuex"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-delegate",
   components: {
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index 2748f96006..b1168d1fb2 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -37,7 +37,7 @@ import DataLoading from "common/NiDataLoading"
 import Field from "@nylira/vue-field"
 import ModalSearch from "common/NiModalSearch"
 import PanelSort from "staking/PanelSort"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-delegates",
   components: {
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index 6a21a90983..ec1f7d88f6 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -64,7 +64,7 @@ import {
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   components: {
     TmBtn,
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 71797ebe2b..457853c901 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -29,7 +29,7 @@ import DataEmptyTx from "common/NiDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
 import ModalSearch from "common/NiModalSearch"
 import { TmPage } from "@tendermint/ui"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/VrToolBar"
 export default {
   name: "page-transactions",
   components: {
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 12ac8db10a..e383b40d25 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -1,10 +1,11 @@
 <template lang="pug">
 tm-page(title='Wallet')
-  div(slot="menu"): tool-bar
-    a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
-      i.material-icons refresh
-    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
-      i.material-icons search
+  div(slot="menu")
+    vr-tool-bar
+      a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
+        i.material-icons refresh
+      a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
+        i.material-icons search
 
   modal-search(type="balances" v-if="somethingToSearch")
 
@@ -47,7 +48,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
-import ToolBar from "common/NiToolBar"
+import VrToolBar from "common/VrToolBar"
 export default {
   name: "page-wallet",
   components: {
@@ -59,7 +60,7 @@ export default {
     ModalSearch,
     TmPage,
     TmPart,
-    ToolBar
+    VrToolBar
   },
   computed: {
     ...mapGetters(["filters", "wallet", "committedDelegations", "config"]),
diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
index 47a9a7a0df..a790205e09 100644
--- a/app/src/renderer/styles/app.styl
+++ b/app/src/renderer/styles/app.styl
@@ -38,7 +38,7 @@ a
   flex-flow column nowrap
   min-width 0
 
-.ni-field
+.ni-field, .tm-field
   border-radius 2px!important
 
 #app-content
diff --git a/test/unit/specs/components/common/NiToolBar.spec.js b/test/unit/specs/components/common/VrToolBar.spec.js
similarity index 84%
rename from test/unit/specs/components/common/NiToolBar.spec.js
rename to test/unit/specs/components/common/VrToolBar.spec.js
index 8a21a699b1..4672433d70 100644
--- a/test/unit/specs/components/common/NiToolBar.spec.js
+++ b/test/unit/specs/components/common/VrToolBar.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiToolBar from "common/NiToolBar"
+import VrToolBar from "common/VrToolBar"
 
-describe("NiToolBar", () => {
+describe("VrToolBar", () => {
   let wrapper, store, instance
   let { mount } = setup()
 
   beforeEach(() => {
-    instance = mount(NiToolBar)
+    instance = mount(VrToolBar)
     wrapper = instance.wrapper
     store = instance.store
   })
diff --git a/yarn.lock b/yarn.lock
index a949d6150d..9ce049e0a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,10 +25,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
 "@tendermint/ui@https://github.com/tendermint/ui.git":
-  version "0.1.1"
-  resolved "https://github.com/tendermint/ui.git#8f61ff55dc9279ec07d04899957545880c4fdf3a"
+  version "0.2.3"
+  resolved "https://github.com/tendermint/ui.git#874eca7e20ad2acacc04195bb123ea3a610ab516"
   dependencies:
     moment "^2.22.2"
+    perfect-scrollbar "^1.4.0"
     vue "^2.5.16"
 
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
@@ -6296,6 +6297,10 @@ perfect-scrollbar@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
 
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"

From 6901fd4ad220a37598c35ae2d673f5d51fad03a4 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 14:56:35 +0200
Subject: [PATCH 16/31] ni->tm

---
 .../renderer/components/common/AppMenu.vue    | 10 ++--
 .../components/common/NiConnectedNetwork.vue  | 34 +++++------
 .../components/common/NiDataEmpty.vue         |  2 +-
 .../components/common/NiDataEmptySearch.vue   |  2 +-
 .../components/common/NiDataEmptyTx.vue       |  2 +-
 .../components/common/NiDataError.vue         |  2 +-
 .../components/common/NiDataLoading.vue       |  2 +-
 .../components/common/NiFieldAddon.vue        | 16 +++---
 .../components/common/NiFieldSeed.vue         |  4 +-
 .../components/common/NiFieldVote.vue         | 36 ++++++------
 .../renderer/components/common/NiFormMsg.vue  | 18 +++---
 .../components/common/NiHardwareState.vue     | 12 ++--
 .../renderer/components/common/NiLiCopy.vue   |  6 +-
 .../components/common/NiLiSession.vue         | 26 ++++-----
 .../renderer/components/common/NiModal.vue    | 52 ++++++++---------
 .../components/common/NiModalError.vue        | 40 ++++++-------
 .../components/common/NiModalHelp.vue         |  8 +--
 .../components/common/NiModalLCDApproval.vue  | 24 ++++----
 .../components/common/NiModalMenu.vue         |  8 +--
 .../components/common/NiModalReceive.vue      |  8 +--
 .../components/common/NiModalSearch.vue       | 22 ++++----
 .../components/common/NiOnboarding.vue        | 22 ++++----
 app/src/renderer/components/common/NiPart.vue | 34 +++++------
 .../renderer/components/common/NiSession.vue  | 56 +++++++++----------
 .../common/NiSessionAccountDelete.vue         | 18 +++---
 .../components/common/NiSessionHardware.vue   | 12 ++--
 .../components/common/NiSessionImport.vue     | 20 +++----
 .../components/common/NiSessionLoading.vue    | 12 ++--
 .../components/common/NiSessionSignIn.vue     | 14 ++---
 .../components/common/NiSessionSignUp.vue     | 26 ++++-----
 .../components/common/NiSessionWelcome.vue    | 14 ++---
 .../renderer/components/common/NiToolBar.vue  | 16 +++---
 .../renderer/components/common/NiUserPane.vue |  6 +-
 .../components/monitor/PageBlocks.vue         |  4 +-
 .../renderer/components/staking/PageBond.vue  |  6 +-
 .../components/wallet/LiTransaction.vue       | 16 +++---
 .../renderer/components/wallet/PageWallet.vue |  2 +-
 app/src/renderer/styles/app.styl              |  2 +-
 38 files changed, 307 insertions(+), 307 deletions(-)

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index c745cc3eb7..4ae72995f4 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -86,15 +86,15 @@ export default {
     flex 1
     position relative // for perfect-scrollbar
 
-    .ni-li-link
+    .tm-li-link
       padding 0 0 0 1rem
 
-  .ni-user
+  .tm-user
     border-top 1px solid var(--bc)
     padding 1rem
     display flex
 
-    .ni-user-info
+    .tm-user-info
       flex 1
       display flex
 
@@ -120,7 +120,7 @@ export default {
       font-size xs
       color var(--dim)
 
-    .ni-btn
+    .tm-btn
       margin-right 0.5rem
 
 @media screen and (max-width: 1023px)
@@ -137,6 +137,6 @@ export default {
   .app-menu
     flex 1
 
-    .ni-connected-network
+    .tm-connected-network
       display none
 </style>
diff --git a/app/src/renderer/components/common/NiConnectedNetwork.vue b/app/src/renderer/components/common/NiConnectedNetwork.vue
index 41c7a0cfc8..8944cc7a92 100644
--- a/app/src/renderer/components/common/NiConnectedNetwork.vue
+++ b/app/src/renderer/components/common/NiConnectedNetwork.vue
@@ -1,31 +1,31 @@
 <template lang='pug'>
-.ni-connected-network#ni-connected-network(v-if='connected' :class="cssClass")
-  .ni-connected-network__connection
-    .ni-connected-network__icon#ni-connected-network__icon: i.material-icons wifi
-    .ni-connected-network__string#ni-connected-network__string
+.tm-connected-network#tm-connected-network(v-if='connected' :class="cssClass")
+  .tm-connected-network__connection
+    .tm-connected-network__icon#tm-connected-network__icon: i.material-icons wifi
+    .tm-connected-network__string#tm-connected-network__string
       span.desktop-only Connected to
       span.chain-id(v-tooltip.top="networkTooltip")  {{ chainId }}
       |  via #[span {{ nodeAddress }}]
-      router-link#ni-connected-network_preferences-link.desktop-only(to="/preferences" v-if="!onPreferencesPage")
+      router-link#tm-connected-network_preferences-link.desktop-only(to="/preferences" v-if="!onPreferencesPage")
         |  (change network)
-  .ni-connected-network__string#ni-connected-network__block
+  .tm-connected-network__string#tm-connected-network__block
     span.desktop-only Current Block:
     router-link(to="/blocks" v-tooltip.top="'View Block'")  {{ blockHeight }}
-.ni-connected-network#ni-disconnected-network(v-else)
-  .ni-connected-network__icon: i.material-icons.fa-spin rotate_right
-  .ni-connected-network__string Connecting to network&hellip;
+.tm-connected-network#tm-disconnected-network(v-else)
+  .tm-connected-network__icon: i.material-icons.fa-spin rotate_right
+  .tm-connected-network__string Connecting to network&hellip;
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 export default {
-  name: "ni-connected-network",
+  name: "tm-connected-network",
   computed: {
     ...mapGetters(["lastHeader", "nodeIP", "connected", "mockedConnector"]),
     cssClass() {
       if (this.mockedConnector) {
-        return "ni-connected-network--mocked"
+        return "tm-connected-network--mocked"
       }
     },
     networkTooltip() {
@@ -64,7 +64,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-connected-network
+.tm-connected-network
   font-size 0.75rem
   background var(--app-fg)
   border 0.5rem solid var(--app-bg)
@@ -76,7 +76,7 @@ export default {
   a, .chain-id
     font-weight 500
 
-.ni-connected-network__icon
+.tm-connected-network__icon
   background var(--success)
   width 2rem
   display flex
@@ -84,17 +84,17 @@ export default {
   justify-content center
   color var(--bright)
 
-.ni-connected-network__string
+.tm-connected-network__string
   padding 0 1em
   line-height 2rem
 
-.ni-connected-network--mocked
-  .ni-connected-network__icon
+.tm-connected-network--mocked
+  .tm-connected-network__icon
     background var(--warning)
 
   .chain-id
     color var(--warning)
 
-.ni-connected-network__connection
+.tm-connected-network__connection
   display flex
 </style>
diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/NiDataEmpty.vue
index 4372ce5827..74a4c1692a 100644
--- a/app/src/renderer/components/common/NiDataEmpty.vue
+++ b/app/src/renderer/components/common/NiDataEmpty.vue
@@ -10,7 +10,7 @@ tm-data-msg(icon="info_outline")
 <script>
 import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty",
+  name: "tm-data-empty",
   props: ["title", "subtitle"],
   components: { TmDataMsg }
 }
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/NiDataEmptySearch.vue
index 69f9f004ad..ff4b8c0e51 100644
--- a/app/src/renderer/components/common/NiDataEmptySearch.vue
+++ b/app/src/renderer/components/common/NiDataEmptySearch.vue
@@ -7,7 +7,7 @@ tm-data-msg(icon="search")
 <script>
 import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty-search",
+  name: "tm-data-empty-search",
   components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/NiDataEmptyTx.vue
index 2438795517..cb85192ba7 100644
--- a/app/src/renderer/components/common/NiDataEmptyTx.vue
+++ b/app/src/renderer/components/common/NiDataEmptyTx.vue
@@ -7,7 +7,7 @@ tm-data-msg(icon="info_outline")
 <script>
 import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty-tx",
+  name: "tm-data-empty-tx",
   components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/NiDataError.vue
index 4f440a87f8..13434531ea 100644
--- a/app/src/renderer/components/common/NiDataError.vue
+++ b/app/src/renderer/components/common/NiDataError.vue
@@ -7,7 +7,7 @@ tm-data-msg(icon="sentiment_very_dissatisfied")
 <script>
 import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-error",
+  name: "tm-data-error",
   components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/NiDataLoading.vue
index c60d8c1044..d1647155a7 100644
--- a/app/src/renderer/components/common/NiDataLoading.vue
+++ b/app/src/renderer/components/common/NiDataLoading.vue
@@ -7,7 +7,7 @@ tm-data-msg(icon="rotate_right" spin="true")
 <script>
 import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-loading",
+  name: "tm-data-loading",
   components: { TmDataMsg },
   props: {
     title: {
diff --git a/app/src/renderer/components/common/NiFieldAddon.vue b/app/src/renderer/components/common/NiFieldAddon.vue
index a576ac8fec..135eeb3a76 100644
--- a/app/src/renderer/components/common/NiFieldAddon.vue
+++ b/app/src/renderer/components/common/NiFieldAddon.vue
@@ -1,22 +1,22 @@
 <template lang='pug'>
-.ni-field-addon: slot
+.tm-field-addon: slot
 </template>
 
 <script>
-export default { name: "ni-field-addon" }
+export default { name: "tm-field-addon" }
 </script>
 
 <style lang="stylus">
 @import '~variables'
 
-.ni-field-addon + .ni-field-addon
-.ni-field + .ni-field-addon
-.ni-field-addon + .ni-field
+.tm-field-addon + .tm-field-addon
+.tm-field + .tm-field-addon
+.tm-field-addon + .tm-field
   margin-left -1 * px
   position relative
   z-index z(default)
 
-.ni-field-addon
+.tm-field-addon
   background var(--app-bg)
   border px solid var(--bc)
   display flex
@@ -26,10 +26,10 @@ export default { name: "ni-field-addon" }
   min-width 2rem
   padding 0 0.5rem
 
-.ni-field-addon + .ni-btn
+.tm-field-addon + .tm-btn
   margin-left 1rem
 
 @media screen and (min-width: 768px)
-  .ni-field-addon
+  .tm-field-addon
     padding 0 0.75rem
 </style>
diff --git a/app/src/renderer/components/common/NiFieldSeed.vue b/app/src/renderer/components/common/NiFieldSeed.vue
index 3f9810c115..7f802c07d4 100644
--- a/app/src/renderer/components/common/NiFieldSeed.vue
+++ b/app/src/renderer/components/common/NiFieldSeed.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-field.ni-field-seed(
+field.tm-field-seed(
   type="textarea"
   @input="update($event)"
   :value="value")
@@ -9,7 +9,7 @@ field.ni-field-seed(
 import autosize from "autosize"
 import Field from "@nylira/vue-field"
 export default {
-  name: "ni-field-seed",
+  name: "tm-field-seed",
   components: { Field },
   methods: {
     update(value) {
diff --git a/app/src/renderer/components/common/NiFieldVote.vue b/app/src/renderer/components/common/NiFieldVote.vue
index 9f541c2f20..24727e5ab7 100644
--- a/app/src/renderer/components/common/NiFieldVote.vue
+++ b/app/src/renderer/components/common/NiFieldVote.vue
@@ -1,19 +1,19 @@
 <template lang="pug">
-.ni-field-vote: .ni-field-vote-container
-  .ni-field-vote-input
+.tm-field-vote: .tm-field-vote-container
+  .tm-field-vote-input
     i.material-icons(v-if="active") radio_button_checked
     i.material-icons(v-else) radio_button_unchecked
-  .ni-field-vote-label
-    .ni-field-vote-bar-outer(v-if="results")
-      .ni-field-vote-bar-inner(:style='innerBarStyle')
-    .ni-field-vote-dl
-      .ni-field-vote-dt {{ dt }}
-      .ni-field-vote-dd(v-if="results") {{ Math.round(dd * 100) + '%' }}
+  .tm-field-vote-label
+    .tm-field-vote-bar-outer(v-if="results")
+      .tm-field-vote-bar-inner(:style='innerBarStyle')
+    .tm-field-vote-dl
+      .tm-field-vote-dt {{ dt }}
+      .tm-field-vote-dd(v-if="results") {{ Math.round(dd * 100) + '%' }}
 </template>
 
 <script>
 export default {
-  name: "ni-list-item",
+  name: "tm-list-item",
   computed: {
     innerBarStyle() {
       return {
@@ -36,19 +36,19 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-field-vote-container
+.tm-field-vote-container
   height 3rem
   border-bottom px solid var(--bc)
   display flex
   position relative
 
-.ni-field-vote-input
-.ni-field-vote-dl
-.ni-field-vote-bar-outer
-.ni-field-vote-bar-inner
+.tm-field-vote-input
+.tm-field-vote-dl
+.tm-field-vote-bar-outer
+.tm-field-vote-bar-inner
   height 3rem - px
 
-.ni-field-vote-input
+.tm-field-vote-input
   width 3rem
   display flex
   align-items center
@@ -57,12 +57,12 @@ export default {
     width 3rem
     text-align center
 
-.ni-field-vote-label
+.tm-field-vote-label
   flex 1
   position relative
   border-left px solid var(--bc)
 
-.ni-field-vote-dl
+.tm-field-vote-dl
   position relative
   z-index z(default)
 
@@ -74,7 +74,7 @@ export default {
 
   color var(--bright)
 
-.ni-field-vote-bar-outer
+.tm-field-vote-bar-outer
   position absolute
   z-index z(zero)
 
diff --git a/app/src/renderer/components/common/NiFormMsg.vue b/app/src/renderer/components/common/NiFormMsg.vue
index 34ec2150b2..16befd03f8 100644
--- a/app/src/renderer/components/common/NiFormMsg.vue
+++ b/app/src/renderer/components/common/NiFormMsg.vue
@@ -8,11 +8,11 @@ div(:class='cssClass')
 export default {
   computed: {
     cssClass() {
-      let value = "ni-form-msg sm"
+      let value = "tm-form-msg sm"
       if (this.type) {
-        value += " ni-form-msg--error"
+        value += " tm-form-msg--error"
       } else {
-        value += " ni-form-msg--desc"
+        value += " tm-form-msg--desc"
       }
       return value
     },
@@ -78,7 +78,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-form-msg
+.tm-form-msg
   padding 0.25rem 0 0
   display flex
   margin 0 !important
@@ -86,22 +86,22 @@ export default {
   &.sm
     font-size sm
 
-.ni-form-msg:before
+.tm-form-msg:before
   content ''
   font-family 'Material Icons'
   padding-right 0.35rem
 
-.ni-form-msg.ni-form-msg--error
+.tm-form-msg.tm-form-msg--error
   color var(--danger)
 
-.ni-form-msg.ni-form-msg--error:before
+.tm-form-msg.tm-form-msg--error:before
   content 'error'
   color var(--danger)
 
-.ni-form-msg.ni-form-msg--desc
+.tm-form-msg.tm-form-msg--desc
   color var(--warning)
 
-.ni-form-msg.ni-form-msg--desc:before
+.tm-form-msg.tm-form-msg--desc:before
   content 'priority_high'
   color var(--warning)
 </style>
diff --git a/app/src/renderer/components/common/NiHardwareState.vue b/app/src/renderer/components/common/NiHardwareState.vue
index ac3057687a..c7c0fc10e2 100644
--- a/app/src/renderer/components/common/NiHardwareState.vue
+++ b/app/src/renderer/components/common/NiHardwareState.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-.ni-hardware-state
-  i.ni-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
-  .ni-hardware-state__label {{ value }}
+.tm-hardware-state
+  i.tm-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
+  .tm-hardware-state__label {{ value }}
 </template>
 
 <script>
@@ -20,7 +20,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-hardware-state
+.tm-hardware-state
   background var(--app-fg)
   display flex
   flex-flow column nowrap
@@ -34,12 +34,12 @@ export default {
 
   user-select none
 
-.ni-hardware-state__icon
+.tm-hardware-state__icon
   font-size 5rem
   margin-bottom 1rem
   color var(--dim)
 
-.ni-hardware-state__label
+.tm-hardware-state__label
   text-align center
   color var(--bright)
 </style>
diff --git a/app/src/renderer/components/common/NiLiCopy.vue b/app/src/renderer/components/common/NiLiCopy.vue
index 9a8feada07..a8eb27cbd0 100644
--- a/app/src/renderer/components/common/NiLiCopy.vue
+++ b/app/src/renderer/components/common/NiLiCopy.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.ni-li-copy
+.tm-li-copy
   .value {{ value }}
   menu
     btn-copy(:value='value')
@@ -8,7 +8,7 @@
 <script>
 import BtnCopy from "common/NiBtnCopy"
 export default {
-  name: "ni-li-copy",
+  name: "tm-li-copy",
   components: { BtnCopy },
   props: ["value"]
 }
@@ -17,7 +17,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-li-copy
+.tm-li-copy
   height 3rem
   display flex
   align-items center
diff --git a/app/src/renderer/components/common/NiLiSession.vue b/app/src/renderer/components/common/NiLiSession.vue
index ddc3675adc..2c4f1850ce 100644
--- a/app/src/renderer/components/common/NiLiSession.vue
+++ b/app/src/renderer/components/common/NiLiSession.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-.ni-li-session
-  .ni-li-session-icon: i.material-icons {{ icon }}
-  .ni-li-session-text
-    .ni-li-session-title {{ title }}
-    .ni-li-session-subtitle {{ subtitle }}
+.tm-li-session
+  .tm-li-session-icon: i.material-icons {{ icon }}
+  .tm-li-session-text
+    .tm-li-session-title {{ title }}
+    .tm-li-session-subtitle {{ subtitle }}
 </template>
 
 <script>
 export default {
-  name: "ni-li-session",
+  name: "tm-li-session",
   props: ["icon", "title", "subtitle"]
 }
 </script>
@@ -16,7 +16,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-li-session
+.tm-li-session
   display flex
   flex-flow row nowrap
   user-select none
@@ -28,11 +28,11 @@ export default {
   &:hover
     cursor pointer
     background var(--app-fg)
-    .ni-li-session-icon i
-    .ni-li-session-title
+    .tm-li-session-icon i
+    .tm-li-session-title
       color var(--bright)
 
-.ni-li-session-icon
+.tm-li-session-icon
   height 5rem
   flex 0 0 5rem
   display flex
@@ -41,20 +41,20 @@ export default {
   i
     font-size 2rem
 
-.ni-li-session-text
+.tm-li-session-text
   flex 1
   display flex
   justify-content center
   flex-flow column nowrap
   padding 1rem 1rem
 
-.ni-li-session-title
+.tm-li-session-title
   color var(--txt)
   font-size lg
   line-height 1.25
   margin-bottom 0.375rem
 
-.ni-li-session-subtitle
+.tm-li-session-subtitle
   color var(--dim)
   font-size sm
 </style>
diff --git a/app/src/renderer/components/common/NiModal.vue b/app/src/renderer/components/common/NiModal.vue
index 2e5cbbe18d..f485c677cc 100644
--- a/app/src/renderer/components/common/NiModal.vue
+++ b/app/src/renderer/components/common/NiModal.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
 div(:class='cssClass' @click="close()")
-  .ni-modal-container
-    header.ni-modal-header
-      .ni-modal-icon(v-if='icon')
+  .tm-modal-container
+    header.tm-modal-header
+      .tm-modal-icon(v-if='icon')
         i.material-icons {{ icon }}
-      .ni-modal-title
+      .tm-modal-title
         slot(name='title')
-      .ni-modal-icon.ni-modal-close(@click="close()")
+      .tm-modal-icon.tm-modal-close(@click="close()")
         i.material-icons close
-    main.ni-modal-main
+    main.tm-modal-main
       slot
-    footer.ni-modal-footer
+    footer.tm-modal-footer
       slot(name='footer')
 </template>
 
@@ -18,9 +18,9 @@ div(:class='cssClass' @click="close()")
 export default {
   computed: {
     cssClass() {
-      let value = "ni-modal"
+      let value = "tm-modal"
       if (this.size === "fullscreen" || this.size === "fs") {
-        value += " ni-modal-fullscreen"
+        value += " tm-modal-fullscreen"
       }
       return value
     }
@@ -32,7 +32,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal
+.tm-modal
   position fixed
   top 0
   left 0
@@ -47,10 +47,10 @@ export default {
   align-items center
   backdrop-filter blur(0.5em)
 
-  &.ni-modal-fullscreen
+  &.tm-modal-fullscreen
     display flex
 
-    .ni-modal-container
+    .tm-modal-container
       flex 1
       height 100vh
       max-height 100vh
@@ -58,12 +58,12 @@ export default {
       display flex
       flex-flow column nowrap
 
-      .ni-modal-main
+      .tm-modal-main
         flex 1
         overflow-y scroll
         display block
 
-.ni-modal-container
+.tm-modal-container
   background var(--app-bg)
   box-shadow hsla(0,0,0,0.25) 0 0.25rem 1rem
 
@@ -76,14 +76,14 @@ export default {
   max-width 30rem
   max-height 40rem
 
-.ni-modal-header
+.tm-modal-header
   display flex
   flex-flow row nowrap
   align-items center
   flex 0 0 3rem + 0.0625rem
   background var(--app-fg)
 
-.ni-modal-icon
+.tm-modal-icon
   height 3rem
   flex 0 0 3rem
   display flex
@@ -92,29 +92,29 @@ export default {
 
   i
     font-size lg
-  &.ni-modal-close
+  &.tm-modal-close
     cursor pointer
     i
       color var(--link)
     &:hover i
       color var(--hover)
 
-.ni-modal-icon + .ni-modal-title
+.tm-modal-icon + .tm-modal-title
   padding-left 0
 
-.ni-modal-title
+.tm-modal-title
   flex 1
   font-size h3
   color var(--bright)
   padding 0 1rem
 
-.ni-modal-main, .ni-modal-footer
+.tm-modal-main, .tm-modal-footer
   padding 1rem
 
-.ni-modal-main + .ni-modal-footer
+.tm-modal-main + .tm-modal-footer
   border-top px solid var(--bc)
 
-.ni-modal-main
+.tm-modal-main
   flex 1
   display flex
   flex-flow column
@@ -123,18 +123,18 @@ export default {
   .ps-scrollbar-y-rail
     display none
 
-.ni-modal-main p
+.tm-modal-main p
   margin-bottom 1rem
 
-.ni-modal-main > .ni-article-body
+.tm-modal-main > .tm-article-body
   margin -1rem
 
-.ni-modal-footer
+.tm-modal-footer
   flex 0 0 4rem + px
   &:empty
     display none
 
-.ni-modal-footer > div
+.tm-modal-footer > div
   display flex
   justify-content space-between
 </style>
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/NiModalError.vue
index a6b5f5e898..3aee987815 100644
--- a/app/src/renderer/components/common/NiModalError.vue
+++ b/app/src/renderer/components/common/NiModalError.vue
@@ -1,18 +1,18 @@
 <template lang="pug">
-.ni-modal-error__wrapper
-  .ni-modal-error
-    .ni-modal-error__icon: i.material-icons {{ errorIcon }}
-    .ni-modal-error__title {{ errorTitle }}
-    .ni-modal-error__body {{ errorBody }}
-    .ni-modal-error__footer
-      tm-btn#ni-modal-error__btn-issue(
+.tm-modal-error__wrapper
+  .tm-modal-error
+    .tm-modal-error__icon: i.material-icons {{ errorIcon }}
+    .tm-modal-error__title {{ errorTitle }}
+    .tm-modal-error__body {{ errorBody }}
+    .tm-modal-error__footer
+      tm-btn#tm-modal-error__btn-issue(
         size="lg"
         icon="bug_report"
         color="primary"
         value="Create an issue"
         type="anchor"
         :href="issueUrl")
-      tm-btn#ni-modal-error__btn-logs(
+      tm-btn#tm-modal-error__btn-logs(
         size="lg"
         icon="info_outline"
         value="View app logs"
@@ -24,7 +24,7 @@ import { remote, shell } from "electron"
 import { mapGetters } from "vuex"
 import { TmBtn } from "@tendermint/ui"
 export default {
-  name: "ni-modal-error",
+  name: "tm-modal-error",
   components: { TmBtn },
   computed: {
     ...mapGetters(["config", "lastHeader"]),
@@ -61,7 +61,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal-error__wrapper
+.tm-modal-error__wrapper
   position absolute
   top 0
   left 0
@@ -76,11 +76,11 @@ export default {
   align-items center
   justify-content center
 
-.ni-modal-error
+.tm-modal-error
   padding 1.5rem
   max-width 40rem
 
-.ni-modal-error__icon
+.tm-modal-error__icon
   position fixed
   top 0
   left 0
@@ -90,19 +90,19 @@ export default {
     line-height 1
     color var(--bc-dim)
 
-.ni-modal-error__title
+.tm-modal-error__title
   font-size h1
   font-weight 500
   line-height 1
   margin-bottom 1.5rem
 
-.ni-modal-error__body
+.tm-modal-error__body
   font-size lg
   color var(--dim)
   margin-bottom 3rem
 
-.ni-modal-error__footer
-  .ni-btn
+.tm-modal-error__footer
+  .tm-btn
     width 100%
     margin-right 1.5rem
     margin-bottom 1rem
@@ -111,15 +111,15 @@ export default {
       margin-bottom 0
 
 @media screen and (min-width: 768px)
-  .ni-modal-error__icon i.material-icons
+  .tm-modal-error__icon i.material-icons
     font-size 20vw + 20vh
 
-  .ni-modal-error__body
+  .tm-modal-error__body
     margin-bottom 4.5rem
 
-  .ni-modal-error__footer
+  .tm-modal-error__footer
     min-width: 31rem
 
-  .ni-modal-error__footer .ni-btn
+  .tm-modal-error__footer .tm-btn
       margin-bottom 0
 </style>
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/NiModalHelp.vue
index fd37de5949..85bce8f68c 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/NiModalHelp.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-modal.ni-modal-help(v-if="active" :close="close")
+modal.tm-modal-help(v-if="active" :close="close")
   div(slot='title') Need Help?
   p Something in the app not working correctly? Tell us what went wrong in developer chat or create an issue on our GitHub. Thanks for improving Cosmos Voyager!
   tm-list-item(
@@ -15,7 +15,7 @@ import { mapGetters } from "vuex"
 import Modal from "common/NiModal"
 import { TmListItem } from "@tendermint/ui"
 export default {
-  name: "ni-modal-help",
+  name: "tm-modal-help",
   components: {
     TmListItem,
     Modal
@@ -37,10 +37,10 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal.ni-modal-help
+.tm-modal.tm-modal-help
   z-index z(modalHelp)
 
-  .ni-modal-main
+  .tm-modal-main
     padding 2rem
 
     p
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index 10dafd0584..bce9da706a 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-.ni-modal-lcd-approval__wrapper
-  .ni-modal-lcd-approval
-    .ni-modal-lcd-approval__icon: i.material-icons sync problem
-    .ni-modal-lcd-approval__title Node approval required
-    .ni-modal-lcd-approval__body
+.tm-modal-lcd-approval__wrapper
+  .tm-modal-lcd-approval
+    .tm-modal-lcd-approval__icon: i.material-icons sync problem
+    .tm-modal-lcd-approval__title Node approval required
+    .tm-modal-lcd-approval__body
       | Voyager needs to approve the node you're trying to connect to. Please compare the hash below against the hash from a trusted source. If you are 100% sure that the hashes match, click approve to proceed.
 
       field#node-hash(type="textarea" :value="hash" disabled)
 
-    .ni-modal-lcd-approval__footer
+    .tm-modal-lcd-approval__footer
 
-      tm-btn#ni-modal-lcd-approval__btn-approve(
+      tm-btn#tm-modal-lcd-approval__btn-approve(
         size="lg"
         icon="check"
         color="primary"
         value="Approve Node"
         @click.native="approve")
-      tm-btn#ni-modal-lcd-approval__btn-disapprove(
+      tm-btn#tm-modal-lcd-approval__btn-disapprove(
         size="lg"
         icon="skip_next"
         value="Switch Node"
@@ -48,7 +48,7 @@ export default {
 <style lang="stylus">
 @import '~variables';
 
-.ni-modal-lcd-approval {
+.tm-modal-lcd-approval {
   padding: 1.5rem;
   max-width: 40rem;
 
@@ -96,7 +96,7 @@ export default {
     flex-direction: row;
     justify-content: flex-start;
 
-    .ni-btn {
+    .tm-btn {
       width: 100%;
       margin-right: 1.5rem;
       margin-bottom: 1rem;
@@ -114,7 +114,7 @@ export default {
 }
 
 @media screen and (min-width: 768px) {
-  .ni-modal-lcd-approval {
+  .tm-modal-lcd-approval {
     &__icon i.material-icons {
       font-size: 20vw + 20vh;
     }
@@ -123,7 +123,7 @@ export default {
       min-width: 31rem;
     }
 
-    &__footer .ni-btn {
+    &__footer .tm-btn {
       margin-bottom: 0;
     }
   }
diff --git a/app/src/renderer/components/common/NiModalMenu.vue b/app/src/renderer/components/common/NiModalMenu.vue
index 9a32fb4929..67894c15fe 100644
--- a/app/src/renderer/components/common/NiModalMenu.vue
+++ b/app/src/renderer/components/common/NiModalMenu.vue
@@ -1,15 +1,15 @@
 <template lang="pug">
-.ni-modal-menu: slot
+.tm-modal-menu: slot
 </template>
 
 <script>
-export default { name: "ni-modal-menu" }
+export default { name: "tm-modal-menu" }
 </script>
 
 <style lang="stylus">
 @require '~variables'
 
-.ni-modal-menu
+.tm-modal-menu
   background var(--app-bg-alpha)
   z-index z(default)
   user-select none
@@ -17,7 +17,7 @@ export default { name: "ni-modal-menu" }
   overflow-y scroll
 
 @media screen and (max-width:1023px)
-  .ni-modal-menu
+  .tm-modal-menu
     padding-top 3rem
     height 100vh
     position fixed
diff --git a/app/src/renderer/components/common/NiModalReceive.vue b/app/src/renderer/components/common/NiModalReceive.vue
index b75e04850b..51a2432a91 100644
--- a/app/src/renderer/components/common/NiModalReceive.vue
+++ b/app/src/renderer/components/common/NiModalReceive.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-modal.ni-modal-receive(v-if="active" :close="close")
+modal.tm-modal-receive(v-if="active" :close="close")
   div(slot='title') Receive Tokens
   p You can receive Cosmos tokens of any denomination by sharing this address.
   li-copy.receive-modal(:value="wallet.address")
@@ -10,7 +10,7 @@ import { mapGetters } from "vuex"
 import LiCopy from "common/NiLiCopy"
 import Modal from "common/NiModal"
 export default {
-  name: "ni-modal-receive",
+  name: "tm-modal-receive",
   props: ["value"],
   components: {
     LiCopy,
@@ -33,10 +33,10 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal.ni-modal-receive
+.tm-modal.tm-modal-receive
   z-index z(modalError)
 
-  .ni-modal-main
+  .tm-modal-main
     padding 2rem
 
     p
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index ed9cfb107a..7929155cf3 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -1,11 +1,11 @@
 <template lang='pug'>
-.ni-modal-search(v-if="open")
-  form.ni-modal-search-container(
+.tm-modal-search(v-if="open")
+  form.tm-modal-search-container(
     v-if="type === 'blocks'"
     v-on:submit.prevent.default="gotoBlock")
     tm-form-group(field-id="search-input" field-label=""
       :error="$v.filters.blocks.search.query.$invalid")
-      .ni-modal-search-field
+      .tm-modal-search-field
         field#search-input.mousetrap(
           type="number"
           step="1"
@@ -18,9 +18,9 @@
       form-msg(name="Query" type="between" min="0"
         :max="$v.filters.blocks.search.query.$params.between.max"
         v-if="!$v.filters.blocks.search.query.between")
-  .ni-modal-search-container(v-else)
+  .tm-modal-search-container(v-else)
     tm-form-group(field-id="search-input" field-label="")
-      .ni-modal-search-field
+      .tm-modal-search-field
         field#search-input.mousetrap(
           type="text" placeholder="Search..." v-model="query")
         tm-btn(icon="close" @click.native="close")
@@ -83,7 +83,7 @@ export default {
     open(open) {
       if (open) {
         setTimeout(() => {
-          let el = this.$el.querySelector(".ni-field")
+          let el = this.$el.querySelector(".tm-field")
           el.select()
         })
       }
@@ -96,20 +96,20 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-modal-search-container
+.tm-modal-search-container
   background var(--app-fg)
   margin-bottom 1rem
   padding 0.5rem 0
 
-  .ni-btn
+  .tm-btn
     margin-left 0.5rem
-  .ni-field
+  .tm-field
     background var(--app-bg)
 
-.ni-modal-search-field
+.tm-modal-search-field
   display flex
   flex 1
-  .ni-field
+  .tm-field
     width auto
     flex 1
 </style>
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/NiOnboarding.vue
index 2025fa14a1..1bfc804961 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/NiOnboarding.vue
@@ -1,17 +1,17 @@
 <template lang="pug">
-#onboarding.ni-session-wrapper
-  img.ni-session-backdrop(src="~assets/images/cosmos-logo.png")
-  .ni-session: .ni-session-container
-    .ni-session-header: .ni-session-title Welcome to Voyager
-    .ni-session-main
-      .ni-session-label {{ activeValue }}
+#onboarding.tm-session-wrapper
+  img.tm-session-backdrop(src="~assets/images/cosmos-logo.png")
+  .tm-session: .tm-session-container
+    .tm-session-header: .tm-session-title Welcome to Voyager
+    .tm-session-main
+      .tm-session-label {{ activeValue }}
       img(:src="activeImg")
       tm-bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
-    .ni-session-footer(v-if="activeKey === nodes.length - 1")
+    .tm-session-footer(v-if="activeKey === nodes.length - 1")
       tm-btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
       tm-btn(value="Finish" @click.native="finish" color="primary"
         icon="chevron_right" icon-pos="right" )
-    .ni-session-footer(v-else)
+    .tm-session-footer(v-else)
       tm-btn(value="Skip" @click.native="finish" icon="close")
       tm-btn(value="Next" @click.native="next" color="primary"
         icon="chevron_right" icon-pos="right" )
@@ -22,7 +22,7 @@ import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import { TmBarDiscrete, TmBtn } from "@tendermint/ui"
 export default {
-  name: "ni-onboarding",
+  name: "tm-onboarding",
   components: { TmBtn, TmBarDiscrete },
   computed: {
     ...mapGetters(["onboarding"]),
@@ -64,7 +64,7 @@ export default {
     }
   },
   mounted() {
-    new PerfectScrollbar(this.$el.querySelector("#onboarding .ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector("#onboarding .tm-session-main"))
   }
 }
 </script>
@@ -72,6 +72,6 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-#onboarding .ni-session-main
+#onboarding .tm-session-main
   position relative
 </style>
diff --git a/app/src/renderer/components/common/NiPart.vue b/app/src/renderer/components/common/NiPart.vue
index fa42d056b2..9117381719 100644
--- a/app/src/renderer/components/common/NiPart.vue
+++ b/app/src/renderer/components/common/NiPart.vue
@@ -1,19 +1,19 @@
 <template lang='pug'>
-section.ni-part
-  .ni-part-container
-    header.ni-part-header(v-if="$slots['title'] || title")
-      .ni-part-header-container
-        .ni-part-title.h5
+section.tm-part
+  .tm-part-container
+    header.tm-part-header(v-if="$slots['title'] || title")
+      .tm-part-header-container
+        .tm-part-title.h5
           template(v-if='title') {{ title }}
           slot(name='title', v-else='')
-        menu.ni-part-menu
+        menu.tm-part-menu
           slot(name='menu')
-    main.ni-part-main: slot
+    main.tm-part-main: slot
 </template>
 
 <script>
 export default {
-  name: "ni-part",
+  name: "tm-part",
   props: ["title"]
 }
 </script>
@@ -21,30 +21,30 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-part
+.tm-part
   position relative
   max-width width-main-max
 
-.ni-part-container, .ni-part-header, .ni-part-title, .ni-part-menu, .ni-part-main
+.tm-part-container, .tm-part-header, .tm-part-title, .tm-part-menu, .tm-part-main
   &:empty
     display none
 
-.ni-part-main
+.tm-part-main
   padding-right 1rem
 
-.ni-part-container
+.tm-part-container
   margin 0 auto
 
-.ni-part-header
+.tm-part-header
   padding 0.5rem 1rem
   margin-bottom 0.5rem
   background var(--app-fg)
 
-.ni-part-header-container
+.tm-part-header-container
   display flex
   align-items center
 
-.ni-part-title, .ni-part-menu
+.tm-part-title, .tm-part-menu
   color var(--dim)
   margin 0
 
@@ -54,14 +54,14 @@ export default {
     &:hover
       color var(--hover)
 
-.ni-part-title
+.tm-part-title
   flex 1
   color var(--dim)
   font-size sm
   font-weight 400
 
 @media screen and (min-width: 768px)
-  .ni-part-container
+  .tm-part-container
     &:last-child
       padding-bottom 1.5rem
 </style>
diff --git a/app/src/renderer/components/common/NiSession.vue b/app/src/renderer/components/common/NiSession.vue
index 61a359f2fb..80f0c3e752 100644
--- a/app/src/renderer/components/common/NiSession.vue
+++ b/app/src/renderer/components/common/NiSession.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-.ni-session-wrapper
-  img.ni-session-backdrop(src="~assets/images/cosmos-logo.png")
+.tm-session-wrapper
+  img.tm-session-backdrop(src="~assets/images/cosmos-logo.png")
   session-loading(v-if="config.modals.session.state == 'loading'")
   session-welcome(v-if="config.modals.session.state == 'welcome'")
   session-sign-up(v-if="config.modals.session.state == 'sign-up'")
@@ -20,7 +20,7 @@ import SessionHardware from "common/NiSessionHardware"
 import SessionImport from "common/NiSessionImport"
 import SessionAccountDelete from "common/NiSessionAccountDelete"
 export default {
-  name: "ni-session",
+  name: "tm-session",
   components: {
     SessionLoading,
     SessionWelcome,
@@ -37,23 +37,23 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-session-wrapper
+.tm-session-wrapper
   position relative
   z-index z(modal)
 
-  .ni-session-backdrop
+  .tm-session-backdrop
     position absolute
     top -10vw
     left -10vw
     width 50vw
     opacity 0.25
 
-.ni-field-checkbox
+.tm-field-checkbox
   display flex
   flex-flow row nowrap
   align-items center
 
-  .ni-field-checkbox-input
+  .tm-field-checkbox-input
     flex 0 0 2rem
     height 2rem
     display flex
@@ -66,34 +66,34 @@ export default {
       padding 0
       margin 0
 
-  .ni-field-checkbox-label
+  .tm-field-checkbox-label
     flex 1
     line-height 1.375
     padding 0.5rem 1rem
     font-size 0.875rem
 
-.ni-session
+.tm-session
   position fixed
   top 0
   left 0
   z-index z(default)
   background var(--app-bg)
 
-.ni-session-container
-  &:not(.ni-form)
+.tm-session-container
+  &:not(.tm-form)
     width 100vw
     height 100vh
     display flex
     flex-flow column nowrap
 
-  &.ni-form
-    .ni-form-main
+  &.tm-form
+    .tm-form-main
       width 100vw
       height 100vh
       display flex
       flex-flow column nowrap
 
-.ni-session-header
+.tm-session-header
   display flex
   flex-flow row nowrap
   justify-content space-between
@@ -116,20 +116,20 @@ export default {
       i
         color var(--bright)
 
-  .ni-session-title
+  .tm-session-title
     flex 1
     padding 0 1rem
     font-size lg
     text-align center
     color var(--bright)
 
-.ni-session-main
+.tm-session-main
   min-height 0
 
   overflow-y auto
   position relative
 
-  .ni-bar-discrete
+  .tm-bar-discrete
     margin-bottom 1rem
 
   img
@@ -143,13 +143,13 @@ export default {
     padding 1rem
     border-bottom px solid var(--bc)
 
-.ni-session-label
+.tm-session-label
   text-align center
   padding 1rem
   background var(--app-fg)
   color var(--dim)
 
-.ni-session-footer
+.tm-session-footer
   border-top 2*px solid var(--bc-dim)
   flex 0 0 5rem + px
   padding 0 2rem
@@ -160,12 +160,12 @@ export default {
   &:empty
     display none
 
-.ni-session-footer > div
+.tm-session-footer > div
   display flex
   justify-content space-between
 
 @media screen and (min-width: 768px)
-  .ni-session-wrapper
+  .tm-session-wrapper
     position fixed
     top 0
     left 0
@@ -177,24 +177,24 @@ export default {
     align-items center
     justify-content center
 
-  .ni-session
+  .tm-session
     position static
     shadow()
 
-  .ni-session-container
-    &:not(.ni-form)
-    &.ni-form .ni-form-main
+  .tm-session-container
+    &:not(.tm-form)
+    &.tm-form .tm-form-main
       width 32rem
       max-height 100vh
       height auto
 
-  .ni-session-header
+  .tm-session-header
     background var(--app-fg)
     margin-top 0
 
-  .ni-session-main
+  .tm-session-main
     padding 2rem
 
-    .ni-form-group
+    .tm-form-group
       display block !important
 </style>
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index 9acd1b79e8..c2c9917274 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('sign-in')"): i.material-icons arrow_back
-    .ni-session-title Remove Account
+    .tm-session-title Remove Account
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     tm-form-group(:error='$v.fields.deletionPassword.$error'
       field-id='sign-in-password' field-label='Password')
       field#sign-in-password(
@@ -16,13 +16,13 @@
 
     tm-form-group(field-id="sign-up-warning" field-label=' '
       :error='$v.fields.deletionWarning.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#sign-up-warning(type="checkbox" v-model="fields.deletionWarning")
-        label.ni-field-checkbox-label(for="sign-up-warning")
+        label.tm-field-checkbox-label(for="sign-up-warning")
           | I understand that Cosmos cannot recover deleted accounts without the passphrase.
       form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
-  .ni-session-footer
+  .tm-session-footer
     tm-btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
 </template>
 
@@ -32,7 +32,7 @@ import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
-  name: "ni-session-account-delete",
+  name: "tm-session-account-delete",
   components: {
     TmBtn,
     Field,
diff --git a/app/src/renderer/components/common/NiSessionHardware.vue b/app/src/renderer/components/common/NiSessionHardware.vue
index 80ecd94c92..e3f9410801 100644
--- a/app/src/renderer/components/common/NiSessionHardware.vue
+++ b/app/src/renderer/components/common/NiSessionHardware.vue
@@ -1,23 +1,23 @@
 <template lang="pug">
-.ni-session: .ni-session-container
-  .ni-session-header
+.tm-session: .tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Sign In
+    .tm-session-title Sign In
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     hardware-state(v-if="status == 'connect'" @click.native="setStatus('detect')"
       icon="usb" value="Please plug in your Ledger Wallet")
     hardware-state(v-if="status == 'detect'" @click.native="setStatus('success')"
       icon="rotate_right" spin="true" value="Detecting your Ledger Wallet")
     hardware-state(v-if="status == 'success'" @click.native="onSubmit"
       icon="check_circle" value="Ledger Wallet successfully loaded")
-  .ni-session-footer
+  .tm-session-footer
 </template>
 
 <script>
 import HardwareState from "common/NiHardwareState"
 export default {
-  name: "ni-session-hardware",
+  name: "tm-session-hardware",
   components: { HardwareState },
   data: () => ({ status: "connect" }),
   methods: {
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 2ab9deef4b..356a6aaee2 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Import with Seed
+    .tm-session-title Import with Seed
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     tm-form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
       field#import-name(
         type="text"
@@ -41,13 +41,13 @@
 
     tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#error-collection(type="checkbox" v-model="fields.errorCollection")
-        label.ni-field-checkbox-label(for="error-collection")
+        label.tm-field-checkbox-label(for="error-collection")
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
-  .ni-session-footer
+  .tm-session-footer
     tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
@@ -60,7 +60,7 @@ import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
 
 export default {
-  name: "ni-session-import",
+  name: "tm-session-import",
   components: {
     TmBtn,
     Field,
@@ -118,7 +118,7 @@ export default {
   },
   mounted() {
     this.$el.querySelector("#import-seed").focus()
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   },
   validations: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/NiSessionLoading.vue b/app/src/renderer/components/common/NiSessionLoading.vue
index 430870c629..f4adf086d4 100644
--- a/app/src/renderer/components/common/NiSessionLoading.vue
+++ b/app/src/renderer/components/common/NiSessionLoading.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
-.ni-session: .ni-session-container
-  .ni-session-header
-    .ni-session-title Loading&hellip;
-  .ni-session-main &nbsp
-  .ni-session-footer &nbsp;
+.tm-session: .tm-session-container
+  .tm-session-header
+    .tm-session-title Loading&hellip;
+  .tm-session-main &nbsp
+  .tm-session-footer &nbsp;
 </template>
 
 <script>
-export default { name: "ni-session-loading" }
+export default { name: "tm-session-loading" }
 </script>
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 4d73f3beb1..dce55bb4fa 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-.ni-session: tm-form-struct(:submit="onSubmit").ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit="onSubmit").tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Sign In
+    .tm-session-title Sign In
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     tm-form-group(field-id='sign-in-name' field-label='Select Account')
       field#sign-in-name(
         type="select"
@@ -21,7 +21,7 @@
       form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
       form-msg(v-if='mockedConnector') default password is 1234567890
-  .ni-session-footer
+  .tm-session-footer
     tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
@@ -32,7 +32,7 @@ import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
-  name: "ni-session-sign-in",
+  name: "tm-session-sign-in",
   components: {
     TmBtn,
     Field,
@@ -114,7 +114,7 @@ export default {
 }
 </script>
 <style lang="stylus">
-.ni-tm-form-group
+.tm-tm-form-group
   a
     cursor pointer
 </style>
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index d18ab6faea..b8065f4e85 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-.ni-session: tm-form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Create Account
+    .tm-session-title Create Account
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     tm-form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
       field#sign-up-name(
         type="text"
@@ -37,22 +37,22 @@
 
     tm-form-group(field-id="sign-up-warning" field-label=''
       :error='$v.fields.signUpWarning.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#sign-up-warning(type="checkbox" v-model="fields.signUpWarning")
-        label.ni-field-checkbox-label(for="sign-up-warning")
+        label.tm-field-checkbox-label(for="sign-up-warning")
           | I have securely written down my seed. I understand that lost seeds cannot be recovered.
       form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
 
     tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#error-collection(type="checkbox" v-model="fields.errorCollection")
-        label.ni-field-checkbox-label(for="error-collection")
+        label.tm-field-checkbox-label(for="error-collection")
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
-  .ni-session-footer
+  .tm-session-footer
     tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
 </template>
 
@@ -64,7 +64,7 @@ import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
 export default {
-  name: "ni-session-sign-up",
+  name: "tm-session-sign-up",
   components: {
     TmBtn,
     Field,
@@ -128,7 +128,7 @@ export default {
       this.creating = false
       this.fields.signUpSeed = seedPhrase
     })
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   },
   validations: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/NiSessionWelcome.vue b/app/src/renderer/components/common/NiSessionWelcome.vue
index 0e26c31b5f..70768890b8 100644
--- a/app/src/renderer/components/common/NiSessionWelcome.vue
+++ b/app/src/renderer/components/common/NiSessionWelcome.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-#session-welcome.ni-session: .ni-session-container
-  .ni-session-header
+#session-welcome.tm-session: .tm-session-container
+  .tm-session-header
     a &nbsp;
-    .ni-session-title Sign in to Cosmos Voyager
+    .tm-session-title Sign in to Cosmos Voyager
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     li-session(
       v-if="accountExists"
       @click.native="setState('sign-in')"
@@ -28,7 +28,7 @@
       title="Sign in with hardware"
       subtitle="If you have a Ledger Wallet, choose this option.")
     fundraiser-warning
-  .ni-session-footer
+  .tm-session-footer
 </template>
 
 <script>
@@ -37,7 +37,7 @@ import PerfectScrollbar from "perfect-scrollbar"
 import FundraiserWarning from "common/FundraiserWarning"
 import LiSession from "common/NiLiSession"
 export default {
-  name: "ni-session-welcome",
+  name: "tm-session-welcome",
   components: {
     FundraiserWarning,
     LiSession
@@ -57,7 +57,7 @@ export default {
     }
   },
   mounted() {
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue
index 11cbbe5bc6..4b2536da6c 100644
--- a/app/src/renderer/components/common/NiToolBar.vue
+++ b/app/src/renderer/components/common/NiToolBar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-.ni-tool-bar
-  .ni-tool-bar-container
+.tm-tool-bar
+  .tm-tool-bar-container
     .main: slot
     a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: "ni-tool-bar",
+  name: "tm-tool-bar",
   methods: {
     enableModalHelp() {
       this.$store.commit("setModalHelp", true)
@@ -27,7 +27,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-tool-bar-container
+.tm-tool-bar-container
   display flex
 
   .main
@@ -72,23 +72,23 @@ export default {
         color var(--dim)
 
 @media screen and (max-width: 1023px)
-  .ni-tool-bar
+  .tm-tool-bar
     z-index z(toolBar)
     position fixed
     bottom 0
     left 0
     right 0
 
-  .ni-tool-bar-container
+  .tm-tool-bar-container
     background var(--app-bg-alpha)
     height 3rem + px
     border-top px solid var(--bc)
 
-  .ni-page
+  .tm-page
     padding-bottom 3rem
 
 @media screen and (min-width: 1024px)
-  .ni-tool-bar-container
+  .tm-tool-bar-container
     .main
       justify-content flex-end
     a
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/NiUserPane.vue
index 0414df598c..238bfc91f3 100644
--- a/app/src/renderer/components/common/NiUserPane.vue
+++ b/app/src/renderer/components/common/NiUserPane.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-tm-list-item.ni-li-user(
+tm-list-item.tm-li-user(
   v-if="user.signedIn"
   type="link"
   to="/preferences"
@@ -14,7 +14,7 @@ import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
 import { TmListItem } from "@tendermint/ui"
 export default {
-  name: "ni-user-pane",
+  name: "tm-user-pane",
   components: { TmListItem },
   computed: { ...mapGetters(["user", "config"]) },
   methods: {
@@ -29,7 +29,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-li.ni-li-user
+.tm-li.tm-li-user
   border-top px solid var(--bc)
   height 3rem + px
 </style>
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 47ef1eaf09..9d1ff1a484 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -81,8 +81,8 @@ export default {
 @require '~variables'
 
 .column-header
-  .ni-li-dd,
-  .ni-li-dt
+  .tm-li-dd,
+  .tm-li-dt
     font-size sm
     color var(--dim)
 </style>
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 09657dbb6d..8c6b958fe2 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -99,10 +99,10 @@ tm-page.page-bond(:title="`Bond ${denom}`")
 
     tm-form-group(field-id="bond-confirm" field-label=''
       :error='$v.fields.bondConfirm.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#bond-confirm(type="checkbox" v-model="fields.bondConfirm")
-        label.ni-field-checkbox-label(for="bond-confirm")
+        label.tm-field-checkbox-label(for="bond-confirm")
           | Yes, update my bonds. I understand unbonding will take 30 days.
       form-msg(name="Bonding Confirmation" type='required'
         v-if='!$v.fields.bondConfirm.required')
diff --git a/app/src/renderer/components/wallet/LiTransaction.vue b/app/src/renderer/components/wallet/LiTransaction.vue
index 26061a55c3..fd7c041eff 100644
--- a/app/src/renderer/components/wallet/LiTransaction.vue
+++ b/app/src/renderer/components/wallet/LiTransaction.vue
@@ -10,15 +10,15 @@ mixin tx-container-sent
       .tx-element.tx-address(v-if="!sentSelf") Sent to {{ receiver }}
       .tx-element.tx-address(v-if="sentSelf") You sent this amount to yourself.
 
-.ni-li-tx(v-if="sentSelf" @click="() => devMode && viewTransaction()")
+.tm-li-tx(v-if="sentSelf" @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons swap_horiz
   +tx-container-sent
 
-.ni-li-tx.ni-li-tx-sent(v-else-if="sent" @click="() => devMode && viewTransaction()")
+.tm-li-tx.tm-li-tx-sent(v-else-if="sent" @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons remove_circle
   +tx-container-sent
 
-.ni-li-tx.ni-li-tx-received(v-else @click="() => devMode && viewTransaction()")
+.tm-li-tx.tm-li-tx-received(v-else @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons add_circle
   .tx-container
     .tx-element.tx-coins
@@ -34,7 +34,7 @@ mixin tx-container-sent
 import num from "scripts/num"
 import moment from "moment"
 export default {
-  name: "ni-li-tx",
+  name: "tm-li-tx",
   computed: {
     transactionValue() {
       return this.transaction.tx.value.msg.value
@@ -84,7 +84,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-li-tx
+.tm-li-tx
   display flex
   font-size sm
   border-bottom 1px solid var(--bc-dim)
@@ -136,12 +136,12 @@ export default {
     color var(--dim)
     font-size sm
 
-  &.ni-li-tx-sent
+  &.tm-li-tx-sent
     .tx-icon, .tx-coin .value
       &:before
         content '-'
 
-  &.ni-li-tx-received
+  &.tm-li-tx-received
     .tx-icon
       background var(--app-fg)
 
@@ -156,7 +156,7 @@ export default {
     background var(--hover-bg)
 
 @media screen and (min-width: 700px)
-  .ni-li-tx
+  .tm-li-tx
     font-size 0.875rem
 
     .tx-container
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index e383b40d25..05b29aad35 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -20,7 +20,7 @@ tm-page(title='Wallet')
     data-loading(v-if="wallet.balancesLoading")
     data-empty(v-else-if="wallet.balances.length === 0")
     data-empty-search(v-else-if="filteredBalances.length === 0")
-    tm-list-item.ni-li-balance(
+    tm-list-item.tm-li-balance(
       v-for="i in filteredBalances"
       v-if="wallet.balances.length > 0 && i.amount > 0"
       :btn="'Send'"
diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
index a790205e09..8adcd1c5aa 100644
--- a/app/src/renderer/styles/app.styl
+++ b/app/src/renderer/styles/app.styl
@@ -38,7 +38,7 @@ a
   flex-flow column nowrap
   min-width 0
 
-.ni-field, .tm-field
+.tm-field, .tm-field
   border-radius 2px!important
 
 #app-content

From e4ad1a27c30b27f815363d388eba8012e8e923be Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 17:03:43 +0200
Subject: [PATCH 17/31] rename tests tryjest config

---
 package.json                                  |   5 +-
 test/e2e/common.js                            |  16 +-
 test/e2e/launch.js                            |  20 +-
 test/e2e/preferences.js                       |   6 +-
 test/e2e/signin.js                            |  62 +-
 test/e2e/wallet.js                            |  10 +-
 .../common/NISessionAccountDelete.spec.js     |   8 +-
 .../common/NISessionHardware.spec.js          |   4 +-
 .../components/common/NISessionSignIn.spec.js |   4 +-
 .../components/common/NISessionSignUp.spec.js |  12 +-
 .../common/NISessionWelcome.spec.js           |   2 +-
 .../common/NiConnectedNetwork.spec.js         |  18 +-
 .../components/common/NiDataEmpty.spec.js     |   6 +-
 .../common/NiDataEmptySearch.spec.js          |   6 +-
 .../components/common/NiDataEmptyTx.spec.js   |   6 +-
 .../components/common/NiDataError.spec.js     |   6 +-
 .../components/common/NiDataLoading.spec.js   |   8 +-
 .../components/common/NiFieldSeed.spec.js     |   2 +-
 .../components/common/NiFieldVote.spec.js     |   6 +-
 .../specs/components/common/NiFormMsg.spec.js |   2 +-
 .../components/common/NiHardwareState.spec.js |   2 +-
 .../components/common/NiLiSession.spec.js     |   6 +-
 .../specs/components/common/NiModal.spec.js   |   4 +-
 .../components/common/NiModalError.spec.js    |  16 +-
 .../components/common/NiModalSearch.spec.js   |   2 +-
 .../components/common/NiSessionImport.spec.js |  10 +-
 .../specs/components/common/Page404.spec.js   |   2 +-
 .../common/__snapshots__/AppMenu.spec.js.snap |  90 +--
 .../NISessionAccountDelete.spec.js.snap       |  44 +-
 .../NISessionHardware.spec.js.snap            |  24 +-
 .../NISessionLoading.spec.js.snap             |  12 +-
 .../NISessionSignIn.spec.js.snap              |  46 +-
 .../NISessionSignUp.spec.js.snap              |  80 +--
 .../NISessionWelcome.spec.js.snap             |  94 +--
 .../__snapshots__/NiBarDiscrete.spec.js.snap  |   6 +-
 .../__snapshots__/NiBtnCopy.spec.js.snap      |   2 +-
 .../__snapshots__/NiBtnReceive.spec.js.snap   |   2 +-
 .../NiConnectedNetwork.spec.js.snap           |  12 +-
 .../__snapshots__/NiDataEmpty.spec.js.snap    |  10 +-
 .../NiDataEmptySearch.spec.js.snap            |  10 +-
 .../__snapshots__/NiDataEmptyTx.spec.js.snap  |  10 +-
 .../__snapshots__/NiDataError.spec.js.snap    |  10 +-
 .../__snapshots__/NiDataLoading.spec.js.snap  |  10 +-
 .../__snapshots__/NiFieldAddon.spec.js.snap   |   2 +-
 .../__snapshots__/NiFieldSeed.spec.js.snap    |   2 +-
 .../__snapshots__/NiFieldVote.spec.js.snap    |  18 +-
 .../__snapshots__/NiFormMsg.spec.js.snap      |   2 +-
 .../NiHardwareState.spec.js.snap              |   6 +-
 .../__snapshots__/NiLiCopy.spec.js.snap       |  20 +-
 .../__snapshots__/NiLiSession.spec.js.snap    |  10 +-
 .../__snapshots__/NiListItem.spec.js.snap     | 130 ++--
 .../common/__snapshots__/NiModal.spec.js.snap |  14 +-
 .../__snapshots__/NiModalError.spec.js.snap   |  16 +-
 .../__snapshots__/NiModalHelp.spec.js.snap    |  42 +-
 .../NiModalLCDApproval.spec.js.snap           |  34 +-
 .../__snapshots__/NiModalSearch.spec.js.snap  |  18 +-
 .../__snapshots__/NiOnboarding.spec.js.snap   | 200 +++---
 .../NiSessionImport.spec.js.snap              |  68 +-
 .../__snapshots__/NiToolBar.spec.js.snap      |   2 +-
 .../__snapshots__/NiUserPane.spec.js.snap     |  14 +-
 .../common/__snapshots__/Page404.spec.js.snap |  58 +-
 .../PagePreferences.spec.js.snap              | 150 ++--
 .../__snapshots__/PageBlock.spec.js.snap      | 216 +++---
 .../__snapshots__/PageBlocks.spec.js.snap     | 112 +--
 .../specs/components/staking/PageBond.spec.js |   6 +-
 .../components/staking/PageStaking.spec.js    |   6 +-
 .../__snapshots__/PageBond.spec.js.snap       |  78 +--
 .../__snapshots__/PageDelegate.spec.js.snap   | 122 ++--
 .../__snapshots__/PageStaking.spec.js.snap    |  68 +-
 .../components/wallet/LiTransaction.spec.js   |   4 +-
 .../wallet/PageTransactions.spec.js           |   4 +-
 .../components/wallet/PageWallet.spec.js      |   8 +-
 .../__snapshots__/LiTransaction.spec.js.snap  |   2 +-
 .../__snapshots__/PageSend.spec.js.snap       | 662 +++++++++---------
 .../PageTransactions.spec.js.snap             |  58 +-
 .../__snapshots__/PageWallet.spec.js.snap     | 284 ++++----
 76 files changed, 1576 insertions(+), 1573 deletions(-)

diff --git a/package.json b/package.json
index 1840ddc3da..c85fbe5c2f 100644
--- a/package.json
+++ b/package.json
@@ -172,7 +172,10 @@
       ".*.js$": "babel-jest"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!.*vue$)"
+      "/node_modules/(?!.*vue$)",
+      "/node_modules/(?!@tendermint/ui).+\\.js$",
+      "/node_modules/(?!@tendermint/ui)",
+      "/node_modules/(?!@tendermint)"
     ],
     "collectCoverage": true,
     "mapCoverage": true,
diff --git a/test/e2e/common.js b/test/e2e/common.js
index 5707db4009..f8433edd30 100644
--- a/test/e2e/common.js
+++ b/test/e2e/common.js
@@ -12,8 +12,8 @@ module.exports = {
   async closeNotifications(app) {
     // close notifications as they overlay the menu button
     await sleep(100)
-    while (await app.client.isExisting(`.ni-notification`)) {
-      await app.client.$(`.ni-notification`).click()
+    while (await app.client.isExisting(`.tm-notification`)) {
+      await app.client.$(`.tm-notification`).click()
       await sleep(100)
     }
   },
@@ -50,13 +50,13 @@ module.exports = {
     await module.exports.openMenu(app)
     // click link
     await app.client.$(`a*=${linkText}`).click()
-    await app.client.waitUntilTextExists(".ni-page-header-title", titleText)
+    await app.client.waitUntilTextExists(".tm-page-header-title", titleText)
     console.log(`navigated to "${linkText}"`)
   },
   async navigateToPreferences(app) {
     await module.exports.openMenu(app)
     // click link
-    await app.client.$(`.ni-li-user`).click()
+    await app.client.$(`.tm-li-user`).click()
     console.log(`navigated to preferences`)
   },
   newTempDir() {
@@ -90,13 +90,13 @@ module.exports = {
     await module.exports.selectOption(app, accountsSelect, account)
 
     await app.client.$("#sign-in-password").setValue("1234567890")
-    await app.client.$(".ni-session-footer button").click()
+    await app.client.$(".tm-session-footer button").click()
 
     await app.client.waitForExist("#app-content", 10000)
 
     // checking if user is logged in
     await module.exports.openMenu(app)
-    let activeUser = await app.client.$(".ni-li-user .ni-li-subtitle").getText()
+    let activeUser = await app.client.$(".tm-li-user .tm-li-subtitle").getText()
     if (account !== activeUser) {
       throw new Error(
         "Incorrect user logged in (" + account + ", " + activeUser + ")"
@@ -109,12 +109,12 @@ module.exports = {
   },
   async logout(app) {
     console.log("logging out")
-    if (await app.client.isExisting(".ni-li-session")) {
+    if (await app.client.isExisting(".tm-li-session")) {
       return
     }
     await module.exports.openMenu(app)
 
-    await app.client.$(".ni-li-user").click()
+    await app.client.$(".tm-li-user").click()
     await sleep(300)
     await app.client
       .$(".material-icons=exit_to_app")
diff --git a/test/e2e/launch.js b/test/e2e/launch.js
index 3f0450603a..57457b2099 100644
--- a/test/e2e/launch.js
+++ b/test/e2e/launch.js
@@ -66,17 +66,17 @@ function launch(t) {
       })
 
       // TODO: use approval element once we restore initting
-      //       (".ni-modal-lcd-approval")
-      let initialElement = ".ni-session-wrapper"
+      //       (".tm-modal-lcd-approval")
+      let initialElement = ".tm-session-wrapper"
       await startApp(app, initialElement)
       t.ok(app.isRunning(), "app is running")
 
       // TODO: uncomment below once we restore initting
 
       // accept node hash
-      // await app.client.$("#ni-modal-lcd-approval__btn-approve").click()
+      // await app.client.$("#tm-modal-lcd-approval__btn-approve").click()
       // await app.client.waitForExist(
-      //   ".ni-session-title=Sign in to Cosmos Voyager",
+      //   ".tm-session-title=Sign in to Cosmos Voyager",
       //   5000
       // )
 
@@ -87,9 +87,9 @@ function launch(t) {
       t.ok(app.isRunning(), "app recovers from uninitialized gaia")
 
       // accept node hash
-      // await app.client.$("#ni-modal-lcd-approval__btn-approve").click()
+      // await app.client.$("#tm-modal-lcd-approval__btn-approve").click()
       // await app.client.waitForExist(
-      //   ".ni-session-title=Sign in to Cosmos Voyager",
+      //   ".tm-session-title=Sign in to Cosmos Voyager",
       //   5000
       // )
       // console.log("approved hash")
@@ -107,7 +107,7 @@ function launch(t) {
       )
       console.log("setup test accounts")
 
-      await startApp(app, ".ni-session-title=Sign In")
+      await startApp(app, ".tm-session-title=Sign In")
       t.ok(app.isRunning(), "app is running")
 
       // disable the onboarding wizard
@@ -167,7 +167,7 @@ async function writeLogs(app, location) {
   console.log("Wrote renderer process log to", rendererProcessLogLocation)
 }
 
-async function startApp(app, awaitingSelector = ".ni-session") {
+async function startApp(app, awaitingSelector = ".tm-session") {
   await app.start()
 
   await app.client.waitForExist(awaitingSelector, 10 * 1000).catch(async e => {
@@ -256,12 +256,12 @@ async function createAccount(name, seed) {
 
 module.exports = {
   getApp: launch,
-  restart: async function(app, awaitingSelector = ".ni-session-title=Sign In") {
+  restart: async function(app, awaitingSelector = ".tm-session-title=Sign In") {
     console.log("restarting app")
     await stop(app)
     await startApp(app, awaitingSelector)
   },
-  refresh: async function(app, awaitingSelector = ".ni-session-title=Sign In") {
+  refresh: async function(app, awaitingSelector = ".tm-session-title=Sign In") {
     console.log("refreshing app")
     await app.restart()
     await app.client.waitForExist(awaitingSelector, 5000)
diff --git a/test/e2e/preferences.js b/test/e2e/preferences.js
index fbeea301ff..bd2a15e281 100644
--- a/test/e2e/preferences.js
+++ b/test/e2e/preferences.js
@@ -29,7 +29,7 @@ test("preferences", async function(t) {
     let networkSelect = () => $("#select-network select")
     let themeSelect = () => $("#select-theme select")
     let tutorialBtn = () => $("#toggle-onboarding")
-    let statisticsToggle = () => $("label.ni-toggle")
+    let statisticsToggle = () => $("label.tm-toggle")
 
     t.test("default network", async function(t) {
       let option = await networkSelect().getValue()
@@ -38,14 +38,14 @@ test("preferences", async function(t) {
     })
     t.test("mock network", async function(t) {
       await selectOption(app, "#select-network select", "mock")
-      await app.client.waitForVisible(".ni-session-wrapper", 5000)
+      await app.client.waitForVisible(".tm-session-wrapper", 5000)
 
       await login(app, "default")
       await navigateToPreferences(app) //should click preferences link with username
 
       await sleep(1000)
       let network = await app.client
-        .$("#ni-connected-network__string")
+        .$("#tm-connected-network__string")
         .getHTML()
       t.ok(
         network.indexOf("mock-chain") !== -1,
diff --git a/test/e2e/signin.js b/test/e2e/signin.js
index 3c41bb68ae..0e107cc548 100644
--- a/test/e2e/signin.js
+++ b/test/e2e/signin.js
@@ -17,21 +17,21 @@ test("sign in", async function(t) {
   let el = (...args) => app.client.$(...args)
   // clicking the button does fail in webdriver as there is no actual click handler on the button
   async function clickContinue() {
-    return app.client.submitForm(".ni-session form")
+    return app.client.submitForm(".tm-session form")
   }
 
   t.test("signup", async function(t) {
-    await app.client.waitForExist(".ni-session-title=Sign In", 10000)
+    await app.client.waitForExist(".tm-session-title=Sign In", 10000)
 
     // go to login selection
     await app.client
       .$("i=arrow_back")
       .$("..")
       .click()
-    await app.client.waitForExist(".ni-li-session", 1000)
+    await app.client.waitForExist(".tm-li-session", 1000)
     // go to new account
     await app.client
-      .$(".ni-li-session-title=Create new account")
+      .$(".tm-li-session-title=Create new account")
       .$("..")
       .$("..")
       .click()
@@ -48,7 +48,7 @@ test("sign in", async function(t) {
           .$("..")
           .$("..")
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await warning().click()
@@ -57,7 +57,7 @@ test("sign in", async function(t) {
           .$("..")
           .$("..")
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -68,7 +68,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await app.client.leftClick("#sign-up-name")
@@ -76,7 +76,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await app.client.leftClick("#sign-up-name")
@@ -84,7 +84,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -95,7 +95,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await password().click()
@@ -103,7 +103,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await password().click()
@@ -111,7 +111,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await password()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -122,7 +122,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await passwordConfirm().click()
@@ -130,7 +130,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for not matching passwords"
       )
       await passwordConfirm().click()
@@ -138,7 +138,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -151,7 +151,7 @@ test("sign in", async function(t) {
       await app.client.waitForExist("#app-content", 10000)
       await openMenu(app)
       let activeUser = await app.client
-        .$(".ni-li-user .ni-li-subtitle")
+        .$(".tm-li-user .tm-li-subtitle")
         .getText()
       t.ok(activeUser === "signin_test", "user is logged in")
 
@@ -169,7 +169,7 @@ test("sign in", async function(t) {
       .$("..")
       .click()
 
-    await app.client.waitForExist(".ni-session", 1000)
+    await app.client.waitForExist(".tm-session", 1000)
 
     t.end()
   })
@@ -181,10 +181,10 @@ test("sign in", async function(t) {
       .$("i=arrow_back")
       .$("..")
       .click()
-    await app.client.waitForExist(".ni-li-session", 1000)
+    await app.client.waitForExist(".tm-li-session", 1000)
     // go to import with seed
     await app.client
-      .$(".ni-li-session-title=Import with seed")
+      .$(".tm-li-session-title=Import with seed")
       .$("..")
       .$("..")
       .click()
@@ -199,7 +199,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await accountName().scroll()
@@ -208,7 +208,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await accountName().click()
@@ -216,7 +216,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -227,7 +227,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await password().click()
@@ -235,7 +235,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await password().click()
@@ -243,7 +243,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await password()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -254,7 +254,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await passwordConfirm().click()
@@ -262,7 +262,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for not matching passwords"
       )
       await passwordConfirm().click()
@@ -270,7 +270,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -281,7 +281,7 @@ test("sign in", async function(t) {
       t.ok(
         await seed()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await seed().click()
@@ -291,7 +291,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await seed()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -304,7 +304,7 @@ test("sign in", async function(t) {
       await app.client.waitForExist("#app-content", 5000)
       await openMenu(app)
       let activeUser = await app.client
-        .$(".ni-li-user .ni-li-subtitle")
+        .$(".tm-li-user .tm-li-subtitle")
         .getText()
       t.equal(activeUser, "seed_test", "user is logged in")
 
diff --git a/test/e2e/wallet.js b/test/e2e/wallet.js
index 3329a2cf75..1e47c224c5 100644
--- a/test/e2e/wallet.js
+++ b/test/e2e/wallet.js
@@ -57,7 +57,7 @@ test("wallet", async function(t) {
     return app.client.waitForExist(balanceElemSlector, 20000).then(() =>
       $(balanceElemSlector)
         .$("..")
-        .$("div.ni-li-dd")
+        .$("div.tm-li-dd")
     )
   }
 
@@ -65,7 +65,7 @@ test("wallet", async function(t) {
     async function goToSendPage() {
       await navigate(app, "Wallet")
       await $("#part-available-balances")
-        .$(".ni-li-dt=FERMION")
+        .$(".tm-li-dt=FERMION")
         .$("..")
         .$("..")
         .click()
@@ -73,7 +73,7 @@ test("wallet", async function(t) {
 
     await navigate(app, "Wallet")
 
-    let sendBtn = () => $(".ni-form-footer button")
+    let sendBtn = () => $(".tm-form-footer button")
     let addressInput = () => $("#send-address")
     let amountInput = () => $("#send-amount")
     let denomBtn = denom => $(`option=${denom.toUpperCase()}`)
@@ -166,8 +166,8 @@ test("wallet", async function(t) {
         "cosmosaccaddr1xrnylx3l5mptnpjd4h0d52wtvealsdnv5k77n8"
       )
       await sendBtn().click()
-      await app.client.waitForExist(".ni-notification", 10 * 1000)
-      let msg = await app.client.$(".ni-notification .body").getText()
+      await app.client.waitForExist(".tm-notification", 10 * 1000)
+      let msg = await app.client.$(".tm-notification .body").getText()
       console.log("msg", msg)
       t.ok(msg.includes("Success"), "Send successful")
       // close the notifications to have a clean setup for the next tests
diff --git a/test/unit/specs/components/common/NISessionAccountDelete.spec.js b/test/unit/specs/components/common/NISessionAccountDelete.spec.js
index 420d9c1da2..b5b280dd81 100644
--- a/test/unit/specs/components/common/NISessionAccountDelete.spec.js
+++ b/test/unit/specs/components/common/NISessionAccountDelete.spec.js
@@ -27,7 +27,7 @@ describe("NiSessionAccountDelete", () => {
 
   it("should go back to the login screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual([
@@ -38,7 +38,7 @@ describe("NiSessionAccountDelete", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -67,7 +67,7 @@ describe("NiSessionAccountDelete", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if deletionWarning is not acknowledged", async () => {
@@ -79,7 +79,7 @@ describe("NiSessionAccountDelete", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show a notification if deletion failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionHardware.spec.js b/test/unit/specs/components/common/NISessionHardware.spec.js
index aad4eafbcc..f7398930b1 100644
--- a/test/unit/specs/components/common/NISessionHardware.spec.js
+++ b/test/unit/specs/components/common/NISessionHardware.spec.js
@@ -26,7 +26,7 @@ describe("NISessionHardware", () => {
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -35,7 +35,7 @@ describe("NISessionHardware", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
diff --git a/test/unit/specs/components/common/NISessionSignIn.spec.js b/test/unit/specs/components/common/NISessionSignIn.spec.js
index ca57e32526..8938ff95b3 100644
--- a/test/unit/specs/components/common/NISessionSignIn.spec.js
+++ b/test/unit/specs/components/common/NISessionSignIn.spec.js
@@ -21,7 +21,7 @@ describe("NiSessionSignIn", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit).toHaveBeenCalledWith("setModalHelp", true)
@@ -57,7 +57,7 @@ describe("NiSessionSignIn", () => {
     wrapper.setData({ fields: { signInPassword: "123" } })
     wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show a notification if signin failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionSignUp.spec.js b/test/unit/specs/components/common/NISessionSignUp.spec.js
index e62c0c8ac1..5fa9835eca 100644
--- a/test/unit/specs/components/common/NISessionSignUp.spec.js
+++ b/test/unit/specs/components/common/NISessionSignUp.spec.js
@@ -22,7 +22,7 @@ describe("NISessionSignUp", () => {
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -31,7 +31,7 @@ describe("NISessionSignUp", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -126,7 +126,7 @@ describe("NISessionSignUp", () => {
     })
     wrapper.vm.onSubmit()
     expect(store.commit).not.toHaveBeenCalled()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not 10 long", async () => {
@@ -141,7 +141,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not confirmed", async () => {
@@ -156,7 +156,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show an error if account name is not 5 long", async () => {
@@ -171,7 +171,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should not continue if creation failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionWelcome.spec.js b/test/unit/specs/components/common/NISessionWelcome.spec.js
index 83b4aeafee..454239981c 100644
--- a/test/unit/specs/components/common/NISessionWelcome.spec.js
+++ b/test/unit/specs/components/common/NISessionWelcome.spec.js
@@ -28,7 +28,7 @@ describe("NISessionWelcome", () => {
   describe("without accounts", () => {
     it("should open the help modal on click", () => {
       wrapper
-        .findAll(".ni-session-header a")
+        .findAll(".tm-session-header a")
         .at(1)
         .trigger("click")
       expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
diff --git a/test/unit/specs/components/common/NiConnectedNetwork.spec.js b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
index 680050b4c8..d106cbabd1 100644
--- a/test/unit/specs/components/common/NiConnectedNetwork.spec.js
+++ b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
@@ -22,7 +22,7 @@ describe("NiConnectedNetwork", () => {
   it("has a network icon", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__icon i.material-icons")
+        .find("#tm-connected-network__icon i.material-icons")
         .text()
         .trim()
     ).toBe("wifi")
@@ -31,7 +31,7 @@ describe("NiConnectedNetwork", () => {
   it("has a network string", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__string")
+        .find("#tm-connected-network__string")
         .text()
         .trim()
     ).toBe("Connected to test-net via 127.0.0.1 (change network)")
@@ -40,15 +40,15 @@ describe("NiConnectedNetwork", () => {
   it("has a block string", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__block")
+        .find("#tm-connected-network__block")
         .text()
         .trim()
     ).toBe("Current Block: #42")
   })
 
   it("has a certain style for mockedConnector", () => {
-    expect(wrapper.find("#ni-connected-network").classes()).toContain(
-      "ni-connected-network--mocked"
+    expect(wrapper.find("#tm-connected-network").classes()).toContain(
+      "tm-connected-network--mocked"
     )
   })
   it("has a network tooltip for mockedConnector", () => {
@@ -74,24 +74,24 @@ describe("NiConnectedNetwork", () => {
     expect(
       wrapper
         .find(
-          "#ni-disconnected-network .ni-connected-network__icon i.material-icons"
+          "#tm-disconnected-network .tm-connected-network__icon i.material-icons"
         )
         .text()
     ).toBe("rotate_right")
     expect(
       wrapper
-        .find("#ni-disconnected-network .ni-connected-network__string")
+        .find("#tm-disconnected-network .tm-connected-network__string")
         .text()
     ).toBe("Connecting to network…")
   })
 
   it("shows a link to the preferences page if not on the preferences page", () => {
-    expect(wrapper.find("#ni-connected-network_preferences-link")).toBeDefined()
+    expect(wrapper.find("#tm-connected-network_preferences-link")).toBeDefined()
     router.push("/preferences")
     wrapper.update()
     expect(wrapper.vm.$route.name).toBe("preferences")
     expect(
-      wrapper.vm.$el.querySelector("#ni-connected-network_preferences-link")
+      wrapper.vm.$el.querySelector("#tm-connected-network_preferences-link")
     ).toBeFalsy()
   })
 
diff --git a/test/unit/specs/components/common/NiDataEmpty.spec.js b/test/unit/specs/components/common/NiDataEmpty.spec.js
index 289fed7371..c2ff0dbac8 100644
--- a/test/unit/specs/components/common/NiDataEmpty.spec.js
+++ b/test/unit/specs/components/common/NiDataEmpty.spec.js
@@ -15,7 +15,7 @@ describe("NiDataEmpty", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("info_outline")
@@ -24,7 +24,7 @@ describe("NiDataEmpty", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title h4")
+        .find(".tm-data-msg__title h4")
         .text()
         .trim()
     ).toBe("N/A")
@@ -33,7 +33,7 @@ describe("NiDataEmpty", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle h5")
+        .find(".tm-data-msg__subtitle h5")
         .text()
         .trim()
     ).toBe("No data available yet.")
diff --git a/test/unit/specs/components/common/NiDataEmptySearch.spec.js b/test/unit/specs/components/common/NiDataEmptySearch.spec.js
index 19a926db7d..5465b03b48 100644
--- a/test/unit/specs/components/common/NiDataEmptySearch.spec.js
+++ b/test/unit/specs/components/common/NiDataEmptySearch.spec.js
@@ -15,7 +15,7 @@ describe("NiDataEmptySearch", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("search")
@@ -24,7 +24,7 @@ describe("NiDataEmptySearch", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("No Results")
@@ -33,7 +33,7 @@ describe("NiDataEmptySearch", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toBe("Your search did not match any available data.")
diff --git a/test/unit/specs/components/common/NiDataEmptyTx.spec.js b/test/unit/specs/components/common/NiDataEmptyTx.spec.js
index f8a874d72c..72fa3e4915 100644
--- a/test/unit/specs/components/common/NiDataEmptyTx.spec.js
+++ b/test/unit/specs/components/common/NiDataEmptyTx.spec.js
@@ -15,7 +15,7 @@ describe("NiDataEmptyTx", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("info_outline")
@@ -24,7 +24,7 @@ describe("NiDataEmptyTx", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("No Transaction History")
@@ -33,7 +33,7 @@ describe("NiDataEmptyTx", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toContain("Looks like you haven't sent or received any transactions yet.")
diff --git a/test/unit/specs/components/common/NiDataError.spec.js b/test/unit/specs/components/common/NiDataError.spec.js
index 473ea5c250..f3844cd064 100644
--- a/test/unit/specs/components/common/NiDataError.spec.js
+++ b/test/unit/specs/components/common/NiDataError.spec.js
@@ -15,7 +15,7 @@ describe("NiDataError", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("sentiment_very_dissatisfied")
@@ -24,7 +24,7 @@ describe("NiDataError", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("Aw shucks!")
@@ -33,7 +33,7 @@ describe("NiDataError", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toContain(
diff --git a/test/unit/specs/components/common/NiDataLoading.spec.js b/test/unit/specs/components/common/NiDataLoading.spec.js
index 262499c40d..bf8a7fb9b6 100644
--- a/test/unit/specs/components/common/NiDataLoading.spec.js
+++ b/test/unit/specs/components/common/NiDataLoading.spec.js
@@ -15,7 +15,7 @@ describe("NiDataLoading", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("rotate_right")
@@ -23,14 +23,14 @@ describe("NiDataLoading", () => {
 
   it("has a spinning icon", () => {
     expect(
-      wrapper.find(".ni-data-msg__icon").contains("i.material-icons.fa-spin")
+      wrapper.find(".tm-data-msg__icon").contains("i.material-icons.fa-spin")
     ).toBe(true)
   })
 
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("Data is loading…")
@@ -39,7 +39,7 @@ describe("NiDataLoading", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toBe("Please wait a moment.")
diff --git a/test/unit/specs/components/common/NiFieldSeed.spec.js b/test/unit/specs/components/common/NiFieldSeed.spec.js
index 09ea4ef128..05e85b51a7 100644
--- a/test/unit/specs/components/common/NiFieldSeed.spec.js
+++ b/test/unit/specs/components/common/NiFieldSeed.spec.js
@@ -24,6 +24,6 @@ describe("NiFieldSeed", () => {
   })
 
   it("has the correct class", () => {
-    expect(wrapper.find(".ni-field").classes()).toContain("ni-field-seed")
+    expect(wrapper.find(".tm-field").classes()).toContain("tm-field-seed")
   })
 })
diff --git a/test/unit/specs/components/common/NiFieldVote.spec.js b/test/unit/specs/components/common/NiFieldVote.spec.js
index 7887436e5e..f3279432c7 100644
--- a/test/unit/specs/components/common/NiFieldVote.spec.js
+++ b/test/unit/specs/components/common/NiFieldVote.spec.js
@@ -28,7 +28,7 @@ describe("NiFieldVote", () => {
   it("shows the title of the vote option", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-dt")
+        .find(".tm-field-vote-dt")
         .text()
         .trim()
     ).toBe("No")
@@ -37,7 +37,7 @@ describe("NiFieldVote", () => {
   it("has been selected by the user", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-input i.material-icons")
+        .find(".tm-field-vote-input i.material-icons")
         .text()
         .trim()
     ).toBe("radio_button_checked")
@@ -46,7 +46,7 @@ describe("NiFieldVote", () => {
   it("shows the percentage who voted", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-dd")
+        .find(".tm-field-vote-dd")
         .text()
         .trim()
     ).toBe("34%")
diff --git a/test/unit/specs/components/common/NiFormMsg.spec.js b/test/unit/specs/components/common/NiFormMsg.spec.js
index bb1ff67d06..42a8ab22aa 100644
--- a/test/unit/specs/components/common/NiFormMsg.spec.js
+++ b/test/unit/specs/components/common/NiFormMsg.spec.js
@@ -109,7 +109,7 @@ describe("NiFormMsg", () => {
       wrapper.setData(propsData[i])
       expect(
         wrapper
-          .find(".ni-form-msg")
+          .find(".tm-form-msg")
           .text()
           .trim()
       ).toContain(propsData[i].error)
diff --git a/test/unit/specs/components/common/NiHardwareState.spec.js b/test/unit/specs/components/common/NiHardwareState.spec.js
index 89301c6c85..3f18a2bc65 100644
--- a/test/unit/specs/components/common/NiHardwareState.spec.js
+++ b/test/unit/specs/components/common/NiHardwareState.spec.js
@@ -30,7 +30,7 @@ describe("NiHardwareState", () => {
   it("has a label", () => {
     expect(
       wrapper
-        .find(".ni-hardware-state__label")
+        .find(".tm-hardware-state__label")
         .text()
         .trim()
     ).toContain("Detecting your Ledger Wallet")
diff --git a/test/unit/specs/components/common/NiLiSession.spec.js b/test/unit/specs/components/common/NiLiSession.spec.js
index 6872dd20ec..a8a5154ff2 100644
--- a/test/unit/specs/components/common/NiLiSession.spec.js
+++ b/test/unit/specs/components/common/NiLiSession.spec.js
@@ -18,18 +18,18 @@ describe("NiLiSession", () => {
 
   it("should have an icon", () => {
     expect(
-      wrapper.find(".ni-li-session-icon i.material-icons").html()
+      wrapper.find(".tm-li-session-icon i.material-icons").html()
     ).toContain("mood")
   })
 
   it("should have a title", () => {
-    expect(wrapper.find(".ni-li-session-title").html()).toContain(
+    expect(wrapper.find(".tm-li-session-title").html()).toContain(
       "useful title"
     )
   })
 
   it("should have a subtitle", () => {
-    expect(wrapper.find(".ni-li-session-subtitle").html()).toContain(
+    expect(wrapper.find(".tm-li-session-subtitle").html()).toContain(
       "useful subtitle"
     )
   })
diff --git a/test/unit/specs/components/common/NiModal.spec.js b/test/unit/specs/components/common/NiModal.spec.js
index 4a0130be1d..b6f886336f 100644
--- a/test/unit/specs/components/common/NiModal.spec.js
+++ b/test/unit/specs/components/common/NiModal.spec.js
@@ -25,13 +25,13 @@ describe("NiModal", () => {
   })
 
   it("should call close button click", () => {
-    wrapper.find(".ni-modal-close").trigger("click")
+    wrapper.find(".tm-modal-close").trigger("click")
     expect(close).toHaveBeenCalled()
   })
 
   it("should set size", () => {
     wrapper.setProps({ size: "fs" })
-    expect(wrapper.classes()).toContain("ni-modal-fullscreen")
+    expect(wrapper.classes()).toContain("tm-modal-fullscreen")
   })
 
   it("should show icon", () => {
diff --git a/test/unit/specs/components/common/NiModalError.spec.js b/test/unit/specs/components/common/NiModalError.spec.js
index 9080cdea90..8f11e4498b 100644
--- a/test/unit/specs/components/common/NiModalError.spec.js
+++ b/test/unit/specs/components/common/NiModalError.spec.js
@@ -37,7 +37,7 @@ describe("NiModalError", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__icon i.material-icons")
+        .find(".tm-modal-error__icon i.material-icons")
         .text()
         .trim()
     ).toBe("error_outline")
@@ -51,7 +51,7 @@ describe("NiModalError", () => {
     })
     expect(
       wrapper
-        .find(".ni-modal-error__icon i.material-icons")
+        .find(".tm-modal-error__icon i.material-icons")
         .text()
         .trim()
     ).toBe("icon-x")
@@ -60,7 +60,7 @@ describe("NiModalError", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__title")
+        .find(".tm-modal-error__title")
         .text()
         .trim()
     ).toBe("Voyager ran into an error")
@@ -74,7 +74,7 @@ describe("NiModalError", () => {
     })
     expect(
       wrapper
-        .find(".ni-modal-error__title")
+        .find(".tm-modal-error__title")
         .text()
         .trim()
     ).toBe("title-x")
@@ -83,7 +83,7 @@ describe("NiModalError", () => {
   it("has a body", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__body")
+        .find(".tm-modal-error__body")
         .text()
         .trim()
     ).toContain(
@@ -99,7 +99,7 @@ describe("NiModalError", () => {
     })
     expect(
       wrapper
-        .find(".ni-modal-error__body")
+        .find(".tm-modal-error__body")
         .text()
         .trim()
     ).toBe("body-x")
@@ -110,10 +110,10 @@ describe("NiModalError", () => {
   })
 
   it("has a button to create an issue", () => {
-    wrapper.find("#ni-modal-error__btn-issue").trigger("click")
+    wrapper.find("#tm-modal-error__btn-issue").trigger("click")
   })
 
   it("has a button to view the app logs", () => {
-    wrapper.find("#ni-modal-error__btn-logs").trigger("click")
+    wrapper.find("#tm-modal-error__btn-logs").trigger("click")
   })
 })
diff --git a/test/unit/specs/components/common/NiModalSearch.spec.js b/test/unit/specs/components/common/NiModalSearch.spec.js
index d827dbb088..1f58bb60b2 100644
--- a/test/unit/specs/components/common/NiModalSearch.spec.js
+++ b/test/unit/specs/components/common/NiModalSearch.spec.js
@@ -50,7 +50,7 @@ describe("NiModalSearch", () => {
 
     expect(
       wrapper
-        .find(".ni-modal-search-field .ni-btn__value")
+        .find(".tm-modal-search-field .tm-btn__value")
         .text()
         .trim()
     ).toBe("Find")
diff --git a/test/unit/specs/components/common/NiSessionImport.spec.js b/test/unit/specs/components/common/NiSessionImport.spec.js
index 9c9254bfe4..2f538f0174 100644
--- a/test/unit/specs/components/common/NiSessionImport.spec.js
+++ b/test/unit/specs/components/common/NiSessionImport.spec.js
@@ -29,7 +29,7 @@ describe("NiSessionImport", () => {
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -38,7 +38,7 @@ describe("NiSessionImport", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -128,7 +128,7 @@ describe("NiSessionImport", () => {
     wrapper.setData({ fields: { importSeed: "" } })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if seed is 16 words long", async () => {
@@ -139,7 +139,7 @@ describe("NiSessionImport", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not confirmed", async () => {
@@ -153,7 +153,7 @@ describe("NiSessionImport", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should not continue if creation failed", async () => {
diff --git a/test/unit/specs/components/common/Page404.spec.js b/test/unit/specs/components/common/Page404.spec.js
index 9064ce7807..d52e66c87c 100644
--- a/test/unit/specs/components/common/Page404.spec.js
+++ b/test/unit/specs/components/common/Page404.spec.js
@@ -15,6 +15,6 @@ describe("Page404", () => {
   })
 
   it("should show links to other pages", () => {
-    expect(wrapper.findAll(".ni-li").length > 0).toBe(true)
+    expect(wrapper.findAll(".tm-li").length > 0).toBe(true)
   })
 })
diff --git a/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap b/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
index e2f1964a82..c2414fac5a 100644
--- a/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
@@ -3,78 +3,78 @@
 exports[`AppMenu has the expected html structure 1`] = `
 "<menu class=\\"app-menu\\">
    <div class=\\"app-menu-main ps\\">
-      <a href=\\"#/\\" class=\\"ni-li ni-li-link router-link-exact-active router-link-active\\" id=\\"app-menu__wallet\\" exact=\\"exact\\">
-      <div class=\\"ni-li-container\\">
-         <div class=\\"ni-li-thumb\\">
+      <a href=\\"#/\\" class=\\"tm-li tm-li-link router-link-exact-active router-link-active\\" id=\\"app-menu__wallet\\" exact=\\"exact\\">
+      <div class=\\"tm-li-container\\">
+         <div class=\\"tm-li-thumb\\">
             <!---->
          </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Wallet
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/wallet/transactions\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__transactions\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/wallet/transactions\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__transactions\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Transactions
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/staking\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__staking\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/staking\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__staking\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Staking
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/proposals\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__proposals\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/proposals\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__proposals\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Proposals
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/blocks\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__blocks\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/blocks\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__blocks\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Blocks
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
@@ -86,28 +86,28 @@ exports[`AppMenu has the expected html structure 1`] = `
       <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-   <div id=\\"ni-disconnected-network\\" class=\\"ni-connected-network\\">
-      <div class=\\"ni-connected-network__icon\\">
+   <div id=\\"tm-disconnected-network\\" class=\\"tm-connected-network\\">
+      <div class=\\"tm-connected-network__icon\\">
          <i class=\\"material-icons fa-spin\\">rotate_right</i>
       </div>
-   <div class=\\"ni-connected-network__string\\">
+   <div class=\\"tm-connected-network__string\\">
       Connecting to network…
    </div>
 </div>
-   <a href=\\"#/preferences\\" class=\\"ni-li ni-li-link ni-li-user proposal-enter proposal-enter-active\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   <a href=\\"#/preferences\\" class=\\"tm-li tm-li-link tm-li-user proposal-enter proposal-enter-active\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <i class=\\"material-icons\\">settings</i>
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Preferences
       </div>
-   <div class=\\"ni-li-subtitle\\">
+   <div class=\\"tm-li-subtitle\\">
       default
    </div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
index e906d884c7..d0e1bf7d0c 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
@@ -1,50 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiSessionAccountDelete has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
          <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
+               <div class=\\"tm-session-title\\">
                   Remove Account
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
-      <div class=\\"ni-session-main\\">
-         <div class=\\"ni-form-group\\">
+      <div class=\\"tm-session-main\\">
+         <div class=\\"tm-form-group\\">
             <!---->
-            <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label>
-            <div class=\\"ni-form-group__field\\">
-               <input type=\\"password\\" placeholder=\\"Enter your password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
-               <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+            <label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"password\\" placeholder=\\"Enter your password\\" class=\\"tm-field\\" id=\\"sign-in-password\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                   Password is required
                </div>
                   <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-warning\\" class=\\"ni-form-group__label\\"></label>
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <label for=\\"sign-up-warning\\" class=\\"tm-form-group__label\\"></label>
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I understand that Cosmos cannot recover deleted accounts without the passphrase.</label>
+      <label for=\\"sign-up-warning\\" class=\\"tm-field-checkbox-label\\">I understand that Cosmos cannot recover deleted accounts without the passphrase.</label>
    </div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
          Deletion confirmation is required
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">exit_to_app</i>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">exit_to_app</i>
          <!---->
-         <span class=\\"ni-btn__value\\">Sign Out and Remove Account</span></span></button>
+         <span class=\\"tm-btn__value\\">Sign Out and Remove Account</span></span></button>
       </div>
 </main>
       <!---->
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
index 653a42346d..4ff5f10128 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NISessionHardware has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
+"<div class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
          <a><i class=\\"material-icons\\">arrow_back</i></a>
-         <div class=\\"ni-session-title\\">
+         <div class=\\"tm-session-title\\">
             Sign In
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
-<div class=\\"ni-session-main\\">
-   <div class=\\"ni-hardware-state\\">
-      <i class=\\"ni-hardware-state__icon material-icons\\">usb</i>
-      <div class=\\"ni-hardware-state__label\\">
+<div class=\\"tm-session-main\\">
+   <div class=\\"tm-hardware-state\\">
+      <i class=\\"tm-hardware-state__icon material-icons\\">usb</i>
+      <div class=\\"tm-hardware-state__label\\">
          Please plug in your Ledger Wallet
       </div>
 </div>
 <!---->
 <!---->
 </div>
-<div class=\\"ni-session-footer\\"></div>
+<div class=\\"tm-session-footer\\"></div>
 </div>
 </div>"
 `;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons\\">usb</i><div class=\\"ni-hardware-state__label\\">Please plug in your Ledger Wallet</div></div><!----><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons\\">usb</i><div class=\\"tm-hardware-state__label\\">Please plug in your Ledger Wallet</div></div><!----><!----></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons fa-spin\\">rotate_right</i><div class=\\"ni-hardware-state__label\\">Detecting your Ledger Wallet</div></div><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><!----><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons fa-spin\\">rotate_right</i><div class=\\"tm-hardware-state__label\\">Detecting your Ledger Wallet</div></div><!----></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><!----><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons\\">check_circle</i><div class=\\"ni-hardware-state__label\\">Ledger Wallet successfully loaded</div></div></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><!----><!----><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons\\">check_circle</i><div class=\\"tm-hardware-state__label\\">Ledger Wallet successfully loaded</div></div></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
index 8cb1ee373f..fb4dcf62f9 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiSessionLoading has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
-         <div class=\\"ni-session-title\\">
+"<div class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
+         <div class=\\"tm-session-title\\">
             Loading…
          </div>
 </div>
-<div class=\\"ni-session-main\\">
+<div class=\\"tm-session-main\\">
    &nbsp;
 </div>
-<div class=\\"ni-session-footer\\">
+<div class=\\"tm-session-footer\\">
    &nbsp;
 </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
index c1284d6cdf..c9ba3bb665 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
@@ -1,44 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiSessionSignIn has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
          <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
+               <div class=\\"tm-session-title\\">
                   Sign In
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
-      <div class=\\"ni-session-main\\">
-         <div class=\\"ni-form-group\\">
+      <div class=\\"tm-session-main\\">
+         <div class=\\"tm-form-group\\">
             <!---->
-            <label for=\\"sign-in-name\\" class=\\"ni-form-group__label\\">Select Account</label>
-            <div class=\\"ni-form-group__field\\">
-               <div class=\\"ni-select\\" id=\\"sign-in-name\\">
-                  <select class=\\"ni-field ni-field-select\\">
+            <label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label>
+            <div class=\\"tm-form-group__field\\">
+               <div class=\\"tm-select\\" id=\\"sign-in-name\\">
+                  <select class=\\"tm-field tm-field-select\\">
                   <option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">
                      Select account…
                   </option>
                   </select>
-                  <div class=\\"ni-field-select-addon\\">
+                  <div class=\\"tm-field-select-addon\\">
                      <i class=\\"material-icons\\">arrow_drop_down</i>
                   </div>
 </div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
          Name is required
       </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+         <label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                Password is required
             </div>
                <!---->
@@ -46,10 +46,10 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
    </div>
 </div>
 </div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
          <!---->
-         <span class=\\"ni-btn__value\\">Next</span></span></button>
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->
@@ -58,4 +58,4 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"ni-session\\"><form class=\\"ni-session-container ni-form\\"><div class=\\"ni-form-container\\"><!----><main class=\\"ni-form-main\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"ni-form-group__label\\">Select Account</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-select\\" id=\\"sign-in-name\\"><select class=\\"ni-field ni-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg sm ni-form-msg--error\\">Name is required</div></div></div><div class=\\"ni-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label><div class=\\"ni-form-group__field\\"><input type=\\"password\\" class=\\"ni-field\\" id=\\"sign-in-password\\"><div class=\\"ni-form-msg sm ni-form-msg--error\\">Password is required</div><!----><div class=\\"ni-form-msg sm ni-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"ni-session-footer\\"><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"ni-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
+exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"tm-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
index da15e149eb..c2c7f8952c 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
@@ -1,83 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NISessionSignUp has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
          <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
+               <div class=\\"tm-session-title\\">
                   Create Account
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
-      <div class=\\"ni-session-main ps\\">
-         <div class=\\"ni-form-group\\">
+      <div class=\\"tm-session-main ps\\">
+         <div class=\\"tm-form-group\\">
             <!---->
-            <label for=\\"sign-up-name\\" class=\\"ni-form-group__label\\">Account Name</label>
-            <div class=\\"ni-form-group__field\\">
-               <input type=\\"text\\" placeholder=\\"Must be at least 5 characters\\" class=\\"ni-field\\" id=\\"sign-up-name\\">
-               <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+            <label for=\\"sign-up-name\\" class=\\"tm-form-group__label\\">Account Name</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"text\\" placeholder=\\"Must be at least 5 characters\\" class=\\"tm-field\\" id=\\"sign-up-name\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                   Name is required
                </div>
                   <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-password\\" class=\\"ni-form-group__label\\">Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"ni-field\\" id=\\"sign-up-password\\">
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+         <label for=\\"sign-up-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"tm-field\\" id=\\"sign-up-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                Password is required
             </div>
                <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-password-confirm\\" class=\\"ni-form-group__label\\">Confirm Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"ni-field\\" id=\\"sign-up-password-confirm\\">
+         <label for=\\"sign-up-password-confirm\\" class=\\"tm-form-group__label\\">Confirm Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"tm-field\\" id=\\"sign-up-password-confirm\\">
             <!---->
          </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-seed\\" class=\\"ni-form-group__label\\">Seed Phrase</label>
-         <div class=\\"ni-form-group__field\\">
-            <textarea class=\\"ni-field-seed ni-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
-            <div class=\\"sm ni-form-msg sm ni-form-msg--desc\\">
+         <label for=\\"sign-up-seed\\" class=\\"tm-form-group__label\\">Seed Phrase</label>
+         <div class=\\"tm-form-group__field\\">
+            <textarea class=\\"tm-field-seed tm-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
+            <div class=\\"sm tm-form-msg sm tm-form-msg--desc\\">
                Please back up the seed phrase for this account. This seed phrase cannot be recovered.
             </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
          <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I have securely written down my seed. I understand that lost seeds cannot be recovered.</label>
+      <label for=\\"sign-up-warning\\" class=\\"tm-field-checkbox-label\\">I have securely written down my seed. I understand that lost seeds cannot be recovered.</label>
    </div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
          Recovery confirmation is required
       </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
          <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"error-collection\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"error-collection\\" class=\\"ni-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
+      <label for=\\"error-collection\\" class=\\"tm-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
    </div>
 </div>
 </div>
@@ -88,10 +88,10 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
          <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
          <!---->
-         <span class=\\"ni-btn__value\\">Next</span></span></button>
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
index 5efebe50ff..6c8ba76f5e 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
@@ -1,64 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NISessionWelcome with accounts has the expected html structure 1`] = `
-"<div id=\\"session-welcome\\" class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
+"<div id=\\"session-welcome\\" class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
          <a>&nbsp;</a>
-         <div class=\\"ni-session-title\\">
+         <div class=\\"tm-session-title\\">
             Sign in to Cosmos Voyager
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-li-session\\">
-      <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-li-session\\">
+      <div class=\\"tm-li-session-icon\\">
          <i class=\\"material-icons\\">lock</i>
       </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with password
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have an account, choose this option.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">person_add</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Create new account
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Generate a brand new seed and create a new account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">settings_backup_restore</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Import with seed
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Use an existing seed phrase to create an account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">usb</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with hardware
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have a Ledger Wallet, choose this option.
 </div>
 </div>
@@ -78,58 +78,58 @@ exports[`NISessionWelcome with accounts has the expected html structure 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\"></div>
+<div class=\\"tm-session-footer\\"></div>
 </div>
 </div>"
 `;
 
 exports[`NISessionWelcome without accounts has the expected html structure 1`] = `
-"<div id=\\"session-welcome\\" class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
+"<div id=\\"session-welcome\\" class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
          <a>&nbsp;</a>
-         <div class=\\"ni-session-title\\">
+         <div class=\\"tm-session-title\\">
             Sign in to Cosmos Voyager
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
-<div class=\\"ni-session-main ps\\">
+<div class=\\"tm-session-main ps\\">
    <!---->
-   <div class=\\"ni-li-session\\">
-      <div class=\\"ni-li-session-icon\\">
+   <div class=\\"tm-li-session\\">
+      <div class=\\"tm-li-session-icon\\">
          <i class=\\"material-icons\\">person_add</i>
       </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Create new account
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Generate a brand new seed and create a new account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">settings_backup_restore</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Import with seed
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Use an existing seed phrase to create an account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">usb</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with hardware
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have a Ledger Wallet, choose this option.
 </div>
 </div>
@@ -149,7 +149,7 @@ exports[`NISessionWelcome without accounts has the expected html structure 1`] =
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\"></div>
+<div class=\\"tm-session-footer\\"></div>
 </div>
 </div>"
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
index 872e764343..b52493e33b 100644
--- a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiBarDiscrete has the expected html structure 1`] = `
-"<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
+"<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
 </div>
 </div>"
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
index f5f7c23451..3e1a1d02e1 100644
--- a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">content_copy</i><!----><span class=\\"ni-btn__value\\">Copy</span></span></button>"`;
+exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"tm-btn btn-copy\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">content_copy</i><!----><span class=\\"tm-btn__value\\">Copy</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
index ded8a911d0..eb3e0cbf13 100644
--- a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiBtnReceive has the expected html structure 1`] = `"<button class=\\"ni-btn btn-receive\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">file_download</i><!----><span class=\\"ni-btn__value\\">Receive</span></span></button>"`;
+exports[`NiBtnReceive has the expected html structure 1`] = `"<button class=\\"tm-btn btn-receive\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">file_download</i><!----><span class=\\"tm-btn__value\\">Receive</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
index 7e8c556cf9..b4ea401940 100644
--- a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiConnectedNetwork has the expected html structure 1`] = `
-"<div id=\\"ni-connected-network\\" class=\\"ni-connected-network ni-connected-network--mocked\\">
-   <div class=\\"ni-connected-network__connection\\">
-      <div id=\\"ni-connected-network__icon\\" class=\\"ni-connected-network__icon\\">
+"<div id=\\"tm-connected-network\\" class=\\"tm-connected-network tm-connected-network--mocked\\">
+   <div class=\\"tm-connected-network__connection\\">
+      <div id=\\"tm-connected-network__icon\\" class=\\"tm-connected-network__icon\\">
          <i class=\\"material-icons\\">wifi</i>
       </div>
-<div id=\\"ni-connected-network__string\\" class=\\"ni-connected-network__string\\">
-   <span class=\\"desktop-only\\">Connected to</span><span class=\\"chain-id\\"> test-net</span> via <span>127.0.0.1</span><a href=\\"#/preferences\\" class=\\"desktop-only\\" id=\\"ni-connected-network_preferences-link\\"> (change network)</a>
+<div id=\\"tm-connected-network__string\\" class=\\"tm-connected-network__string\\">
+   <span class=\\"desktop-only\\">Connected to</span><span class=\\"chain-id\\"> test-net</span> via <span>127.0.0.1</span><a href=\\"#/preferences\\" class=\\"desktop-only\\" id=\\"tm-connected-network_preferences-link\\"> (change network)</a>
 </div>
 </div>
-<div class=\\"ni-connected-network__string\\" id=\\"ni-connected-network__block\\">
+<div class=\\"tm-connected-network__string\\" id=\\"tm-connected-network__block\\">
    <span class=\\"desktop-only\\">Current Block:</span><a href=\\"#/blocks\\" class=\\"\\"> #42</a>
 </div>
 </div>"
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
index e9c0660da3..a988b1b750 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiDataEmpty has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">info_outline</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <h4>
          N/A
       </h4>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <h5>
       No data available yet.
    </h5>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
index 91e4b5d0ae..a71b7db5d2 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiDataEmptySearch has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">search</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          No Results
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Your search did not match any available data.
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
index af8dc51242..4c46d81946 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiDataEmptyTx has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">info_outline</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          No Transaction History
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Looks like you haven't sent or received any transactions yet. Head over to 
       <router-link to=\\"[object Object]\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
index 9c3d0dfd0e..ad3ae79c0e 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiDataError has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">sentiment_very_dissatisfied</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          Aw shucks!
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Even though you're connected a full node, we can't display this data for you right now. Please try again later or <a href=\\"https://github.com/cosmos/voyager/issues\\">file a bug report</a>. Apologies!
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
index 402b0493b0..2499166a22 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiDataLoading has the expected html structure 1`] = `
-"<div class=\\"ni-data-msg\\">
-   <div class=\\"ni-data-msg__icon\\">
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons fa-spin\\">rotate_right</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          Data is loading…
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Please wait a moment.
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
index 96a47a55bf..7eb0bbe11a 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiFieldAddon has the expected html structure 1`] = `
-"<div class=\\"ni-field-addon\\">
+"<div class=\\"tm-field-addon\\">
    <div class=\\"fake-addon\\">
       ATOM
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
index c07f82bc79..e726d95e66 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFieldSeed has the expected html structure 1`] = `"<textarea class=\\"ni-field-seed ni-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
+exports[`NiFieldSeed has the expected html structure 1`] = `"<textarea class=\\"tm-field-seed tm-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
index 0f265d3a4d..9cd2fcae1b 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
@@ -1,20 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiFieldVote has the expected html structure 1`] = `
-"<div class=\\"ni-field-vote\\">
-   <div class=\\"ni-field-vote-container\\">
-      <div class=\\"ni-field-vote-input\\">
+"<div class=\\"tm-field-vote\\">
+   <div class=\\"tm-field-vote-container\\">
+      <div class=\\"tm-field-vote-input\\">
          <i class=\\"material-icons\\">radio_button_checked</i>
       </div>
-<div class=\\"ni-field-vote-label\\">
-   <div class=\\"ni-field-vote-bar-outer\\">
-      <div class=\\"ni-field-vote-bar-inner\\" style=\\"width: 34%;\\"></div>
+<div class=\\"tm-field-vote-label\\">
+   <div class=\\"tm-field-vote-bar-outer\\">
+      <div class=\\"tm-field-vote-bar-inner\\" style=\\"width: 34%;\\"></div>
 </div>
-<div class=\\"ni-field-vote-dl\\">
-   <div class=\\"ni-field-vote-dt\\">
+<div class=\\"tm-field-vote-dl\\">
+   <div class=\\"tm-field-vote-dt\\">
       No
    </div>
-<div class=\\"ni-field-vote-dd\\">
+<div class=\\"tm-field-vote-dd\\">
    34%
 </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
index 3f27cc7e5b..2cc63e0d6a 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiFormMsg has the expected html structure 1`] = `
-"<div class=\\"ni-form-msg sm ni-form-msg--error\\">
+"<div class=\\"tm-form-msg sm tm-form-msg--error\\">
    Password must be between 16 and 255 characters
 </div>"
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
index ede7ef1e20..7a6e97b99a 100644
--- a/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiHardwareState has the expected html structure 1`] = `
-"<div class=\\"ni-hardware-state\\">
-   <i class=\\"ni-hardware-state__icon material-icons fa-spin\\">rotate_right</i>
-   <div class=\\"ni-hardware-state__label\\">
+"<div class=\\"tm-hardware-state\\">
+   <i class=\\"tm-hardware-state__icon material-icons fa-spin\\">rotate_right</i>
+   <div class=\\"tm-hardware-state__label\\">
       Detecting your Ledger Wallet
    </div>
 </div>"
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
index 34e1adb5bb..71c6b1594d 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`NiLiCopy has the expected html structure 1`] = `
 <div
-  class="ni-li-copy"
+  class="tm-li-copy"
 >
   <div
     class="value"
@@ -11,20 +11,20 @@ exports[`NiLiCopy has the expected html structure 1`] = `
   </div>
   <menu>
     <button
-      class="ni-btn btn-copy"
+      class="tm-btn btn-copy"
     >
       <span
-        class="ni-btn__container"
+        class="tm-btn__container"
       >
         <i
           aria-hidden="true"
-          class="ni-btn__icon material-icons"
+          class="tm-btn__icon material-icons"
         >
           content_copy
         </i>
         <!---->
         <span
-          class="ni-btn__value"
+          class="tm-btn__value"
         >
           Copy
         </span>
@@ -36,7 +36,7 @@ exports[`NiLiCopy has the expected html structure 1`] = `
 
 exports[`NiLiCopy should show the receive button 1`] = `
 <div
-  class="ni-li-copy"
+  class="tm-li-copy"
 >
   <div
     class="value"
@@ -45,20 +45,20 @@ exports[`NiLiCopy should show the receive button 1`] = `
   </div>
   <menu>
     <button
-      class="ni-btn btn-copy"
+      class="tm-btn btn-copy"
     >
       <span
-        class="ni-btn__container"
+        class="tm-btn__container"
       >
         <i
           aria-hidden="true"
-          class="ni-btn__icon material-icons"
+          class="tm-btn__icon material-icons"
         >
           content_copy
         </i>
         <!---->
         <span
-          class="ni-btn__value"
+          class="tm-btn__value"
         >
           Copy
         </span>
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
index 03e928246c..c3c0168789 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`NiLiSession has the expected html structure 1`] = `
 <div
-  class="ni-li-session"
+  class="tm-li-session"
 >
   <div
-    class="ni-li-session-icon"
+    class="tm-li-session-icon"
   >
     <i
       class="material-icons"
@@ -14,15 +14,15 @@ exports[`NiLiSession has the expected html structure 1`] = `
     </i>
   </div>
   <div
-    class="ni-li-session-text"
+    class="tm-li-session-text"
   >
     <div
-      class="ni-li-session-title"
+      class="tm-li-session-title"
     >
       useful title
     </div>
     <div
-      class="ni-li-session-subtitle"
+      class="tm-li-session-subtitle"
     >
       useful subtitle
     </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
index 7495e1b260..a2828bfafc 100644
--- a/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
@@ -4,14 +4,14 @@ exports[`NiListItem has the expected html structure 1`] = `<!---->`;
 
 exports[`NiListItem should append the fa-spin class 1`] = `
 <div
-  class="ni-li v-enter v-enter-active"
+  class="tm-li v-enter v-enter-active"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <i
         class="material-icons fa-spin"
@@ -20,15 +20,15 @@ exports[`NiListItem should append the fa-spin class 1`] = `
       </i>
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         Connecting...
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         
       </div>
@@ -39,34 +39,34 @@ exports[`NiListItem should append the fa-spin class 1`] = `
 
 exports[`NiListItem should show a dd link 1`] = `
 <a
-  class="ni-li ni-li-link v-enter v-enter-active"
+  class="tm-li tm-li-link v-enter v-enter-active"
   href="/location"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
@@ -85,34 +85,34 @@ exports[`NiListItem should show a dd link 1`] = `
 
 exports[`NiListItem should show a description 1`] = `
 <a
-  class="ni-li ni-li-link v-enter v-enter-active"
+  class="tm-li tm-li-link v-enter v-enter-active"
   href="/location"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
@@ -131,27 +131,27 @@ exports[`NiListItem should show a description 1`] = `
 
 exports[`NiListItem should show a label 1`] = `
 <div
-  class="ni-li v-enter v-enter-active"
+  class="tm-li v-enter v-enter-active"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         Title
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         Subtitle
       </div>
@@ -162,34 +162,34 @@ exports[`NiListItem should show a label 1`] = `
 
 exports[`NiListItem should show a router-link 1`] = `
 <router-link
-  class="ni-li ni-li-link v-enter v-enter-active"
+  class="tm-li tm-li-link v-enter v-enter-active"
   name="proposal"
   to="/location"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
@@ -208,34 +208,34 @@ exports[`NiListItem should show a router-link 1`] = `
 
 exports[`NiListItem should show a subtitle router link 1`] = `
 <router-link
-  class="ni-li ni-li-link v-enter v-enter-active"
+  class="tm-li tm-li-link v-enter v-enter-active"
   name="proposal"
   to="/location"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
@@ -254,34 +254,34 @@ exports[`NiListItem should show a subtitle router link 1`] = `
 
 exports[`NiListItem should show a thumb 1`] = `
 <a
-  class="ni-li ni-li-link v-enter v-enter-active"
+  class="tm-li tm-li-link v-enter v-enter-active"
   href="/location"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
@@ -300,27 +300,27 @@ exports[`NiListItem should show a thumb 1`] = `
 
 exports[`NiListItem should show as dd text 1`] = `
 <div
-  class="ni-li v-enter v-enter-active"
+  class="tm-li v-enter v-enter-active"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
@@ -331,27 +331,27 @@ exports[`NiListItem should show as dd text 1`] = `
 
 exports[`NiListItem should show as text 1`] = `
 <div
-  class="ni-li v-enter v-enter-active"
+  class="tm-li v-enter v-enter-active"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         Link
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         
       </div>
@@ -362,27 +362,27 @@ exports[`NiListItem should show as text 1`] = `
 
 exports[`NiListItem should show as text link 1`] = `
 <div
-  class="ni-li v-enter v-enter-active"
+  class="tm-li v-enter v-enter-active"
   name="proposal"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-dl"
+      class="tm-li-dl"
     >
       <div
-        class="ni-li-dt"
+        class="tm-li-dt"
       >
         Link
       </div>
       <div
-        class="ni-li-dd"
+        class="tm-li-dd"
       >
         
       </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
index 5117af0d55..0c66b4976a 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
@@ -2,20 +2,20 @@
 
 exports[`NiModal has the expected html structure 1`] = `
 <div
-  class="ni-modal"
+  class="tm-modal"
 >
   <div
-    class="ni-modal-container"
+    class="tm-modal-container"
   >
     <header
-      class="ni-modal-header"
+      class="tm-modal-header"
     >
       <!---->
       <div
-        class="ni-modal-title"
+        class="tm-modal-title"
       />
       <div
-        class="ni-modal-icon ni-modal-close"
+        class="tm-modal-icon tm-modal-close"
       >
         <i
           class="material-icons"
@@ -25,10 +25,10 @@ exports[`NiModal has the expected html structure 1`] = `
       </div>
     </header>
     <main
-      class="ni-modal-main"
+      class="tm-modal-main"
     />
     <footer
-      class="ni-modal-footer"
+      class="tm-modal-footer"
     />
   </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
index 17525e7cc0..bff91c74b2 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiModalError has the expected html structure 1`] = `
-"<div class=\\"ni-modal-error__wrapper\\">
-   <div class=\\"ni-modal-error\\">
-      <div class=\\"ni-modal-error__icon\\">
+"<div class=\\"tm-modal-error__wrapper\\">
+   <div class=\\"tm-modal-error\\">
+      <div class=\\"tm-modal-error__icon\\">
          <i class=\\"material-icons\\">error_outline</i>
       </div>
-<div class=\\"ni-modal-error__title\\">
+<div class=\\"tm-modal-error__title\\">
    Voyager ran into an error
 </div>
-<div class=\\"ni-modal-error__body\\">
+<div class=\\"tm-modal-error__body\\">
    Voyager has encountered a critical error that blocks the app from running. Please create an issue and include a copy of the app logs.
 </div>
-<div class=\\"ni-modal-error__footer\\">
-   <a class=\\"ni-btn\\" id=\\"ni-modal-error__btn-issue\\" href=\\"https://github.com/cosmos/voyager/issues\\"><span class=\\"ni-btn__container ni-btn--size-lg ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">bug_report</i><span class=\\"ni-btn__value\\">Create an issue</span></span></a><button class=\\"ni-btn\\" id=\\"ni-modal-error__btn-logs\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">info_outline</i>
+<div class=\\"tm-modal-error__footer\\">
+   <a class=\\"tm-btn\\" id=\\"tm-modal-error__btn-issue\\" href=\\"https://github.com/cosmos/voyager/issues\\"><span class=\\"tm-btn__container tm-btn--size-lg tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">bug_report</i><span class=\\"tm-btn__value\\">Create an issue</span></span></a><button class=\\"tm-btn\\" id=\\"tm-modal-error__btn-logs\\"><span class=\\"tm-btn__container tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">info_outline</i>
    <!---->
-   <span class=\\"ni-btn__value\\">View app logs</span></span></button>
+   <span class=\\"tm-btn__value\\">View app logs</span></span></button>
 </div>
 </div>
 </div>"
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
index 90a2045bda..9625779624 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
@@ -2,24 +2,24 @@
 
 exports[`NiModalHelp has the expected html structure 1`] = `
 <div
-  class="ni-modal-help ni-modal"
+  class="tm-modal-help tm-modal"
 >
   <div
-    class="ni-modal-container"
+    class="tm-modal-container"
   >
     <header
-      class="ni-modal-header"
+      class="tm-modal-header"
     >
       <!---->
       <div
-        class="ni-modal-title"
+        class="tm-modal-title"
       >
         <div>
           Need Help?
         </div>
       </div>
       <div
-        class="ni-modal-icon ni-modal-close"
+        class="tm-modal-icon tm-modal-close"
       >
         <i
           class="material-icons"
@@ -29,39 +29,39 @@ exports[`NiModalHelp has the expected html structure 1`] = `
       </div>
     </header>
     <main
-      class="ni-modal-main"
+      class="tm-modal-main"
     >
       <p>
         Something in the app not working correctly? Tell us what went wrong in developer chat or create an issue on our GitHub. Thanks for improving Cosmos Voyager!
       </p>
       <a
-        class="ni-li ni-li-link proposal-enter proposal-enter-active"
+        class="tm-li tm-li-link proposal-enter proposal-enter-active"
         href="https://riot.im/app/#/room/#cosmos:matrix.org"
       >
         <div
-          class="ni-li-container"
+          class="tm-li-container"
         >
           <div
-            class="ni-li-thumb"
+            class="tm-li-thumb"
           >
             <!---->
           </div>
           <div
-            class="ni-li-label"
+            class="tm-li-label"
           >
             <div
-              class="ni-li-title"
+              class="tm-li-title"
             >
               Developer Chat
             </div>
             <div
-              class="ni-li-subtitle"
+              class="tm-li-subtitle"
             >
               
             </div>
           </div>
           <div
-            class="ni-li-icon"
+            class="tm-li-icon"
           >
             <i
               class="material-icons inactive"
@@ -77,33 +77,33 @@ exports[`NiModalHelp has the expected html structure 1`] = `
         </div>
       </a>
       <a
-        class="ni-li ni-li-link proposal-enter proposal-enter-active"
+        class="tm-li tm-li-link proposal-enter proposal-enter-active"
         href="https://github.com/cosmos/voyager/issues"
       >
         <div
-          class="ni-li-container"
+          class="tm-li-container"
         >
           <div
-            class="ni-li-thumb"
+            class="tm-li-thumb"
           >
             <!---->
           </div>
           <div
-            class="ni-li-label"
+            class="tm-li-label"
           >
             <div
-              class="ni-li-title"
+              class="tm-li-title"
             >
               GitHub Issues
             </div>
             <div
-              class="ni-li-subtitle"
+              class="tm-li-subtitle"
             >
               
             </div>
           </div>
           <div
-            class="ni-li-icon"
+            class="tm-li-icon"
           >
             <i
               class="material-icons inactive"
@@ -120,7 +120,7 @@ exports[`NiModalHelp has the expected html structure 1`] = `
       </a>
     </main>
     <footer
-      class="ni-modal-footer"
+      class="tm-modal-footer"
     />
   </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
index 6beb9f6027..42bd7bf1c6 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
@@ -2,13 +2,13 @@
 
 exports[`NiModalLCDApproval has the expected html structure 1`] = `
 <div
-  class="ni-modal-lcd-approval__wrapper"
+  class="tm-modal-lcd-approval__wrapper"
 >
   <div
-    class="ni-modal-lcd-approval"
+    class="tm-modal-lcd-approval"
   >
     <div
-      class="ni-modal-lcd-approval__icon"
+      class="tm-modal-lcd-approval__icon"
     >
       <i
         class="material-icons"
@@ -17,60 +17,60 @@ exports[`NiModalLCDApproval has the expected html structure 1`] = `
       </i>
     </div>
     <div
-      class="ni-modal-lcd-approval__title"
+      class="tm-modal-lcd-approval__title"
     >
       Node approval required
     </div>
     <div
-      class="ni-modal-lcd-approval__body"
+      class="tm-modal-lcd-approval__body"
     >
       Voyager needs to approve the node you're trying to connect to. Please compare the hash below against the hash from a trusted source. If you are 100% sure that the hashes match, click approve to proceed.
       <textarea
-        class="ni-field"
+        class="tm-field"
         disabled="disabled"
         id="node-hash"
       />
     </div>
     <div
-      class="ni-modal-lcd-approval__footer"
+      class="tm-modal-lcd-approval__footer"
     >
       <button
-        class="ni-btn"
-        id="ni-modal-lcd-approval__btn-approve"
+        class="tm-btn"
+        id="tm-modal-lcd-approval__btn-approve"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg ni-btn--primary"
+          class="tm-btn__container tm-btn--size-lg tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             check
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Approve Node
           </span>
         </span>
       </button>
       <button
-        class="ni-btn"
-        id="ni-modal-lcd-approval__btn-disapprove"
+        class="tm-btn"
+        id="tm-modal-lcd-approval__btn-disapprove"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg"
+          class="tm-btn__container tm-btn--size-lg"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             skip_next
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Switch Node
           </span>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
index dd1d5184f7..322eb73371 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
@@ -2,37 +2,37 @@
 
 exports[`NiModalSearch has the expected html structure 1`] = `
 <div
-  class="ni-modal-search"
+  class="tm-modal-search"
 >
   <div
-    class="ni-modal-search-container"
+    class="tm-modal-search-container"
   >
     <div
-      class="ni-form-group"
+      class="tm-form-group"
     >
       <!---->
       <!---->
       <div
-        class="ni-form-group__field"
+        class="tm-form-group__field"
       >
         <div
-          class="ni-modal-search-field"
+          class="tm-modal-search-field"
         >
           <input
-            class="mousetrap ni-field"
+            class="mousetrap tm-field"
             id="search-input"
             placeholder="Search..."
             type="text"
           />
           <button
-            class="ni-btn"
+            class="tm-btn"
           >
             <span
-              class="ni-btn__container"
+              class="tm-btn__container"
             >
               <i
                 aria-hidden="true"
-                class="ni-btn__icon material-icons"
+                class="tm-btn__icon material-icons"
               >
                 close
               </i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
index e5e7f79c0e..a67bbb891b 100644
--- a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiOnboarding has the expected html structure 0 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
                Welcome to Voyager
             </div>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
       This is a quick tour of the primary features of Cosmos Voyager.
    </div>
 <img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node ni-bar-discrete__node--active\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node tm-bar-discrete__node--active\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
 </div>
 </div>
 <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
@@ -32,12 +32,12 @@ exports[`NiOnboarding has the expected html structure 0 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
 </div>
 </div>
 </div>
@@ -45,28 +45,28 @@ exports[`NiOnboarding has the expected html structure 0 1`] = `
 `;
 
 exports[`NiOnboarding has the expected html structure 1 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
                Welcome to Voyager
             </div>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
       You can send and receive Cosmos tokens from anyone around the world.
    </div>
 <img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
 </div>
 </div>
 <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
@@ -76,12 +76,12 @@ exports[`NiOnboarding has the expected html structure 1 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
 </div>
 </div>
 </div>
@@ -89,28 +89,28 @@ exports[`NiOnboarding has the expected html structure 1 1`] = `
 `;
 
 exports[`NiOnboarding has the expected html structure 2 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
                Welcome to Voyager
             </div>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
       You can stake your Atoms to Cosmos Validators to earn even more Atoms.
    </div>
 <img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
 </div>
 </div>
 <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
@@ -120,12 +120,12 @@ exports[`NiOnboarding has the expected html structure 2 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
 </div>
 </div>
 </div>
@@ -133,28 +133,28 @@ exports[`NiOnboarding has the expected html structure 2 1`] = `
 `;
 
 exports[`NiOnboarding has the expected html structure 3 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
                Welcome to Voyager
             </div>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
       Through governance, you can vote on the future of the Cosmos Network.
    </div>
 <img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
 </div>
 </div>
 <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
@@ -164,12 +164,12 @@ exports[`NiOnboarding has the expected html structure 3 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
 </div>
 </div>
 </div>
@@ -177,28 +177,28 @@ exports[`NiOnboarding has the expected html structure 3 1`] = `
 `;
 
 exports[`NiOnboarding has the expected html structure 4 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
                Welcome to Voyager
             </div>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
       Start using Voyager to explore the Cosmos Network!
    </div>
 <img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
 </div>
 </div>
 <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
@@ -208,12 +208,12 @@ exports[`NiOnboarding has the expected html structure 4 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
    <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
 </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
index f4e83807d5..cb8d930b71 100644
--- a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
@@ -1,68 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NiSessionImport has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
          <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
+               <div class=\\"tm-session-title\\">
                   Import with Seed
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
-      <div class=\\"ni-session-main ps\\">
-         <div class=\\"ni-form-group\\">
+      <div class=\\"tm-session-main ps\\">
+         <div class=\\"tm-form-group\\">
             <!---->
-            <label for=\\"import-name\\" class=\\"ni-form-group__label\\">Account Name</label>
-            <div class=\\"ni-form-group__field\\">
-               <input type=\\"text\\" placeholder=\\"Must have at least 5 characters\\" class=\\"ni-field\\" id=\\"import-name\\">
-               <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+            <label for=\\"import-name\\" class=\\"tm-form-group__label\\">Account Name</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"text\\" placeholder=\\"Must have at least 5 characters\\" class=\\"tm-field\\" id=\\"import-name\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                   Name is required
                </div>
                   <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"import-password\\" class=\\"ni-form-group__label\\">Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"ni-field\\" id=\\"import-password\\">
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+         <label for=\\"import-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"tm-field\\" id=\\"import-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                Password is required
             </div>
                <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"import-password-confirmation\\" class=\\"ni-form-group__label\\">Confirm Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"ni-field\\" id=\\"import-password-confirmation\\">
+         <label for=\\"import-password-confirmation\\" class=\\"tm-form-group__label\\">Confirm Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"tm-field\\" id=\\"import-password-confirmation\\">
             <!---->
          </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"import-seed\\" class=\\"ni-form-group__label\\">Seed Phrase</label>
-         <div class=\\"ni-form-group__field\\">
-            <textarea class=\\"ni-field-seed ni-field\\" id=\\"import-seed\\" placeholder=\\"Must be exactly 16 words\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+         <label for=\\"import-seed\\" class=\\"tm-form-group__label\\">Seed Phrase</label>
+         <div class=\\"tm-form-group__field\\">
+            <textarea class=\\"tm-field-seed tm-field\\" id=\\"import-seed\\" placeholder=\\"Must be exactly 16 words\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                Seed is required
             </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
          <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"error-collection\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"error-collection\\" class=\\"ni-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
+      <label for=\\"error-collection\\" class=\\"tm-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
    </div>
 </div>
 </div>
@@ -73,10 +73,10 @@ exports[`NiSessionImport has the expected html structure 1`] = `
          <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
          <!---->
-         <span class=\\"ni-btn__value\\">Next</span></span></button>
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->
diff --git a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
index 0d849a036c..5541bb6494 100644
--- a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiToolBar has the expected html structure 1`] = `"<div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div>"`;
+exports[`NiToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
index 231579a113..bbee9acb87 100644
--- a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
@@ -2,14 +2,14 @@
 
 exports[`NiUserPane has the expected html structure 1`] = `
 <a
-  class="ni-li ni-li-link ni-li-user proposal-enter proposal-enter-active"
+  class="tm-li tm-li-link tm-li-user proposal-enter proposal-enter-active"
   href="#/preferences"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <i
         class="material-icons"
@@ -18,21 +18,21 @@ exports[`NiUserPane has the expected html structure 1`] = `
       </i>
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         Preferences
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         default
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
diff --git a/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap b/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
index 5b8ffe29d5..aa6baa7f67 100644
--- a/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`Page404 has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             404 - Page Not Found
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,68 +29,68 @@ exports[`Page404 has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div />
       </menu>
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Try another page...
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link router-link-exact-active router-link-active"
+            class="tm-li tm-li-link router-link-exact-active router-link-active"
             href="#/"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Balances
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-icon"
+                class="tm-li-icon"
               >
                 <i
                   class="material-icons inactive"
@@ -106,33 +106,33 @@ exports[`Page404 has the expected html structure 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Staking
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-icon"
+                class="tm-li-icon"
               >
                 <i
                   class="material-icons inactive"
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 be7413a75b..a3af272bce 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PagePreferences has the expected html structure if connected 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Preferences
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -77,67 +77,67 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Settings
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Select network to connect to
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <div
-                  class="ni-select"
+                  class="tm-select"
                   id="select-network"
                 >
                   <select
-                    class="ni-field ni-field-select"
+                    class="tm-field tm-field-select"
                   >
                     <option
                       disabled="disabled"
@@ -159,7 +159,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                     </option>
                   </select>
                   <div
-                    class="ni-field-select-addon"
+                    class="tm-field-select-addon"
                   >
                     <i
                       class="material-icons"
@@ -172,39 +172,39 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Select theme
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <div
-                  class="ni-select"
+                  class="tm-select"
                   id="select-theme"
                 >
                   <select
-                    class="ni-field ni-field-select"
+                    class="tm-field tm-field-select"
                   >
                     <option
                       disabled="disabled"
@@ -226,7 +226,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                     </option>
                   </select>
                   <div
-                    class="ni-field-select-addon"
+                    class="tm-field-select-addon"
                   >
                     <i
                       class="material-icons"
@@ -239,49 +239,49 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   View tutorial for Voyager
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <button
-                  class="ni-btn"
+                  class="tm-btn"
                   id="toggle-onboarding"
                 >
                   <span
-                    class="ni-btn__container"
+                    class="tm-btn__container"
                   >
                     <i
                       aria-hidden="true"
-                      class="ni-btn__icon material-icons"
+                      class="tm-btn__icon material-icons"
                     >
                       open_in_new
                     </i>
                     <!---->
                     <span
-                      class="ni-btn__value"
+                      class="tm-btn__value"
                     >
                       Launch Tutorial
                     </span>
@@ -291,39 +291,39 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Automatically send usage statistics and crash reports
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   to the Voyager development team
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <label
-                  class="ni-toggle unchecked"
+                  class="tm-toggle unchecked"
                   style="margin: 1em auto 0px auto;"
                 >
                   <div
-                    class="ni-toggle-wrapper"
+                    class="tm-toggle-wrapper"
                   >
                     <span>
                        
@@ -357,74 +357,74 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Account
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Switch account
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <button
-                  class="ni-btn"
+                  class="tm-btn"
                   type="button"
                 >
                   <span
-                    class="ni-btn__container"
+                    class="tm-btn__container"
                   >
                     <i
                       aria-hidden="true"
-                      class="ni-btn__icon material-icons"
+                      class="tm-btn__icon material-icons"
                     >
                       exit_to_app
                     </i>
                     <!---->
                     <span
-                      class="ni-btn__value"
+                      class="tm-btn__value"
                     >
                       Sign Out
                     </span>
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
index a967acfe59..76dd09495e 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageBlock has the expected html structure 1`] = `
-"<div class=\\"ni-page\\">
-   <header class=\\"ni-page-header\\">
-      <div class=\\"ni-page-header-container\\">
-         <div class=\\"ni-page-header-text\\">
-            <div class=\\"ni-page-header-title\\">
+"<div class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Block #10
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
                      <a href=\\"#/blocks/9\\" class=\\"\\"><i class=\\"material-icons\\">chevron_left</i></a><a href=\\"#/blocks/11\\" class=\\"\\"><i class=\\"material-icons\\">chevron_right</i></a>
                   </div>
@@ -30,21 +30,21 @@ exports[`PageBlock has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
-   <section class=\\"ni-part\\">
-      <div class=\\"ni-part-container\\">
+<main class=\\"tm-page-main ps\\">
+   <section class=\\"tm-part\\">
+      <div class=\\"tm-part-container\\">
          <!---->
-         <main class=\\"ni-part-main\\">
-            <div class=\\"ni-li\\">
-               <div class=\\"ni-li-container\\">
-                  <div class=\\"ni-li-thumb\\">
+         <main class=\\"tm-part-main\\">
+            <div class=\\"tm-li\\">
+               <div class=\\"tm-li-container\\">
+                  <div class=\\"tm-li-thumb\\">
                      <!---->
                   </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Hash
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             hash
          </div>
 </div>
@@ -53,181 +53,181 @@ exports[`PageBlock has the expected html structure 1`] = `
 </main>
 </div>
 </section>
-<section class=\\"ni-part\\">
-   <div class=\\"ni-part-container\\">
-      <header class=\\"ni-part-header\\">
-         <div class=\\"ni-part-header-container\\">
-            <div class=\\"ni-part-title h5\\">
+<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\\">
                Header
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Chain ID
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Time
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          January 1st 1970 — 02:00:01
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Transactions
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Last Commit Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Validators Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             App Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
 </main>
 </div>
 </section>
-<section class=\\"ni-part\\">
-   <div class=\\"ni-part-container\\">
-      <header class=\\"ni-part-header\\">
-         <div class=\\"ni-part-header-container\\">
-            <div class=\\"ni-part-title h5\\">
+<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\\">
                Last Block
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Hash
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          last-hash
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Parts Total
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Parts Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
 </main>
 </div>
 </section>
-<section class=\\"ni-part\\">
-   <div class=\\"ni-part-container\\">
-      <header class=\\"ni-part-header\\">
-         <div class=\\"ni-part-header-container\\">
-            <div class=\\"ni-part-title h5\\">
+<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\\">
                Transactions
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-data-msg\\">
-         <div class=\\"ni-data-msg__icon\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-data-msg\\">
+         <div class=\\"tm-data-msg__icon\\">
             <i class=\\"material-icons\\">info_outline</i>
          </div>
-      <div class=\\"ni-data-msg__text\\">
-         <div class=\\"ni-data-msg__title\\">
+      <div class=\\"tm-data-msg__text\\">
+         <div class=\\"tm-data-msg__title\\">
             <h4>
                Empty Block
             </h4>
 </div>
-      <div class=\\"ni-data-msg__subtitle\\">
+      <div class=\\"tm-data-msg__subtitle\\">
          <h5>
             There were no transactions in this block.
          </h5>
@@ -247,28 +247,28 @@ exports[`PageBlock has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`PageBlock should disable the next block button if last block 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><h2>Block #10</h2></div><div class=\\"ni-page-header-subtitle\\"><h3></h3></div></div><menu class=\\"ni-page-header-menu\\"><div></div></menu></div></header><main class=\\"ni-page-main\\"><div class=\\"ni-data-msg\\"><div class=\\"ni-data-msg__icon\\"><i class=\\"material-icons fa-spin\\">rotate_right</i></div><div class=\\"ni-data-msg__text\\"><div class=\\"ni-data-msg__title\\"><div>Data is loading…</div></div><div class=\\"ni-data-msg__subtitle\\"><div>Please wait a moment.</div></div></div></div></main></div>"`;
+exports[`PageBlock should disable the next block button if last block 1`] = `"<div class=\\"tm-page\\"><header class=\\"tm-page-header\\"><div class=\\"tm-page-header-container\\"><div class=\\"tm-page-header-text\\"><div class=\\"tm-page-header-title\\"><h2>Block #10</h2></div><div class=\\"tm-page-header-subtitle\\"><h3></h3></div></div><menu class=\\"tm-page-header-menu\\"><div></div></menu></div></header><main class=\\"tm-page-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>"`;
 
 exports[`PageBlock should show a loading state if loading 1`] = `
-"<div class=\\"ni-page\\">
-   <header class=\\"ni-page-header\\">
-      <div class=\\"ni-page-header-container\\">
-         <div class=\\"ni-page-header-text\\">
-            <div class=\\"ni-page-header-title\\">
+"<div class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Loading...
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div></div>
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main\\">
+<main class=\\"tm-page-main\\">
    <data-loading></data-loading>
 </main>
 </div>"
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
index 8a29775641..9bdd244ccb 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageBlocks has the expected html structure 1`] = `
-"<div class=\\"ni-page\\">
-   <header class=\\"ni-page-header\\">
-      <div class=\\"ni-page-header-container\\">
-         <div class=\\"ni-page-header-text\\">
-            <div class=\\"ni-page-header-title\\">
+"<div class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Block Explorer
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
                      <a><i class=\\"material-icons\\">search</i></a>
                   </div>
@@ -30,64 +30,64 @@ exports[`PageBlocks has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
+<main class=\\"tm-page-main ps\\">
    <modal-search type=\\"blocks\\"></modal-search>
       <!---->
       <!---->
-   <section class=\\"ni-part\\">
-      <div class=\\"ni-part-container\\">
-         <header class=\\"ni-part-header\\">
-            <div class=\\"ni-part-header-container\\">
-               <div class=\\"ni-part-title h5\\">
+   <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\\">
                   Current Block
                </div>
-         <menu class=\\"ni-part-menu\\"></menu>
+         <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-      <main class=\\"ni-part-main\\">
-         <a href=\\"#/blocks/12345\\" class=\\"ni-li ni-li-link\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <main class=\\"tm-part-main\\">
+         <a href=\\"#/blocks/12345\\" class=\\"tm-li tm-li-link\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Height
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             12,345
          </div>
 </div>
-         <div class=\\"ni-li-icon\\">
+         <div class=\\"tm-li-icon\\">
             <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
          </div>
 </div>
          </a>
-         <div class=\\"ni-li\\">
-            <div class=\\"ni-li-container\\">
-               <div class=\\"ni-li-thumb\\">
+         <div class=\\"tm-li\\">
+            <div class=\\"tm-li-container\\">
+               <div class=\\"tm-li-thumb\\">
                   <!---->
                </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Time
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             January 1st 1970 — 02:00:01
          </div>
 </div>
 </div>
 </div>
-         <div class=\\"ni-li\\">
-            <div class=\\"ni-li-container\\">
-               <div class=\\"ni-li-thumb\\">
+         <div class=\\"tm-li\\">
+            <div class=\\"tm-li-container\\">
+               <div class=\\"tm-li-thumb\\">
                   <!---->
                </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Hash
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             123
          </div>
 </div>
@@ -96,46 +96,46 @@ exports[`PageBlocks has the expected html structure 1`] = `
 </main>
 </div>
 </section>
-<section class=\\"ni-part\\">
-   <div class=\\"ni-part-container\\">
-      <header class=\\"ni-part-header\\">
-         <div class=\\"ni-part-header-container\\">
-            <div class=\\"ni-part-title h5\\">
+<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\\">
                Latest Blocks
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li column-header\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li column-header\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Block Height
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          # of Transactions
       </div>
 </div>
 </div>
 </div>
-      <a href=\\"#/blocks/10\\" class=\\"ni-li ni-li-link\\">
-      <div class=\\"ni-li-container\\">
-         <div class=\\"ni-li-thumb\\">
+      <a href=\\"#/blocks/10\\" class=\\"tm-li tm-li-link\\">
+      <div class=\\"tm-li-container\\">
+         <div class=\\"tm-li-thumb\\">
             <!---->
          </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             10
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
-      <div class=\\"ni-li-icon\\">
+      <div class=\\"tm-li-icon\\">
          <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
       </div>
 </div>
diff --git a/test/unit/specs/components/staking/PageBond.spec.js b/test/unit/specs/components/staking/PageBond.spec.js
index b796cb3443..57e5f63baa 100644
--- a/test/unit/specs/components/staking/PageBond.spec.js
+++ b/test/unit/specs/components/staking/PageBond.spec.js
@@ -119,7 +119,7 @@ describe("PageBond", () => {
   })
 
   it("returns to the candidates if desired", () => {
-    wrapper.find(".ni-tool-bar a").trigger("click")
+    wrapper.find(".tm-tool-bar a").trigger("click")
     expect(router.currentRoute.fullPath).toBe("/staking")
   })
 
@@ -171,7 +171,7 @@ describe("PageBond", () => {
     })
     wrapper.findAll("#btn-bond").trigger("click")
     expect(store.dispatch.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("shows an appropriate amount of unbonded atoms", () => {
@@ -246,7 +246,7 @@ describe("PageBond", () => {
     })
     wrapper.findAll("#btn-bond").trigger("click")
     expect(store.dispatch.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("bonds atoms on submit", () => {
diff --git a/test/unit/specs/components/staking/PageStaking.spec.js b/test/unit/specs/components/staking/PageStaking.spec.js
index b0949beb3b..89b09baaa2 100644
--- a/test/unit/specs/components/staking/PageStaking.spec.js
+++ b/test/unit/specs/components/staking/PageStaking.spec.js
@@ -22,13 +22,13 @@ describe("PageStaking", () => {
   })
 
   it("should show the search on click", () => {
-    wrapper.find(".ni-tool-bar i.search").trigger("click")
-    expect(wrapper.contains(".ni-modal-search")).toBe(true)
+    wrapper.find(".tm-tool-bar i.search").trigger("click")
+    expect(wrapper.contains(".tm-modal-search")).toBe(true)
   })
 
   it("should refresh candidates on click", () => {
     wrapper
-      .findAll(".ni-tool-bar i")
+      .findAll(".tm-tool-bar i")
       .at(1)
       .trigger("click")
     expect(store.dispatch).toHaveBeenCalledWith("updateDelegates")
diff --git a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
index 31ac1b54fd..0a1709d06e 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageBond has the expected html structure 1`] = `
 <div
-  class="ni-page page-bond"
+  class="tm-page page-bond"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Bond STEAK
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageBond has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -77,42 +77,42 @@ exports[`PageBond has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Start bonding your 101 STEAK
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <form
-            class="ni-form"
+            class="tm-form"
           >
             <div
-              class="ni-form-container"
+              class="tm-form-container"
             >
               <!---->
               <main
-                class="ni-form-main"
+                class="tm-form-main"
               >
                 <div
                   class="bond-group bond-group--neutral"
@@ -158,7 +158,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -172,7 +172,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         disabled="disabled"
                         id="new-unbonded-atoms"
                         placeholder="Atoms"
@@ -226,7 +226,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -240,7 +240,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         max="101"
                         min="0"
                         placeholder="Atoms"
@@ -298,7 +298,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -312,7 +312,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         max="101"
                         min="0"
                         placeholder="Atoms"
@@ -327,18 +327,18 @@ exports[`PageBond has the expected html structure 1`] = `
                 </div>
                 <!---->
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <!---->
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-checkbox"
+                      class="tm-field-checkbox"
                     >
                       <div
-                        class="ni-field-checkbox-input"
+                        class="tm-field-checkbox-input"
                       >
                         <input
                           id="bond-confirm"
@@ -346,14 +346,14 @@ exports[`PageBond has the expected html structure 1`] = `
                         />
                       </div>
                       <label
-                        class="ni-field-checkbox-label"
+                        class="tm-field-checkbox-label"
                         for="bond-confirm"
                       >
                         Yes, update my bonds. I understand unbonding will take 30 days.
                       </label>
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Bonding Confirmation is required
                     </div>
@@ -361,37 +361,37 @@ exports[`PageBond has the expected html structure 1`] = `
                 </div>
               </main>
               <footer
-                class="ni-form-footer"
+                class="tm-form-footer"
               >
                 <div>
                   <button
-                    class="ni-btn"
+                    class="tm-btn"
                     id="btn-reset"
                     type="button"
                   >
                     <span
-                      class="ni-btn__container ni-btn--danger"
+                      class="tm-btn__container tm-btn--danger"
                     >
                       <!---->
                       <!---->
                       <span
-                        class="ni-btn__value"
+                        class="tm-btn__value"
                       >
                         Reset
                       </span>
                     </span>
                   </button>
                   <button
-                    class="ni-btn"
+                    class="tm-btn"
                     id="btn-bond"
                   >
                     <span
-                      class="ni-btn__container ni-btn--primary"
+                      class="tm-btn__container tm-btn--primary"
                     >
                       <!---->
                       <!---->
                       <span
-                        class="ni-btn__value"
+                        class="tm-btn__value"
                       >
                         Submit
                       </span>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
index 9c3945ca50..ef708c9240 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageDelegate has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Validator Profile
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageDelegate has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -77,54 +77,54 @@ exports[`PageDelegate has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Info
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Moniker
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   JB
                 </div>
@@ -132,26 +132,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Website
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   https://the.zone
                 </div>
@@ -159,26 +159,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Address
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   helloaddr
                 </div>
@@ -186,26 +186,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Public Key
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123pubkeyforme
                 </div>
@@ -216,29 +216,29 @@ exports[`PageDelegate has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Description
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
             class="text-block"
@@ -251,51 +251,51 @@ exports[`PageDelegate has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Details
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li proposal-enter proposal-enter-active"
+            class="tm-li proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Total Vote Power
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   1000
                 </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 17e532c1f1..150dda1b53 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageStaking has the expected html structure 1`] = `
-"<div class=\\"ni-page\\">
-   <header class=\\"ni-page-header\\">
-      <div class=\\"ni-page-header-container\\">
-         <div class=\\"ni-page-header-text\\">
-            <div class=\\"ni-page-header-title\\">
+"<div class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Staking
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
                      <a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a>
                   </div>
@@ -30,7 +30,7 @@ exports[`PageStaking has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
+<main class=\\"tm-page-main ps\\">
    <!---->
    <div class=\\"delegates-container\\">
       <div class=\\"panel-sort\\">
@@ -139,7 +139,7 @@ exports[`PageStaking has the expected html structure 1`] = `
       <div class=\\"label\\">
          <strong>0</strong> delegates selected
       </div>
-   <a href=\\"#/staking/bond\\" class=\\"ni-btn\\" disabled=\\"disabled\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i><span class=\\"ni-btn__value\\">Next</span></span></a>
+   <a href=\\"#/staking/bond\\" class=\\"tm-btn\\" disabled=\\"disabled\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i><span class=\\"tm-btn__value\\">Next</span></span></a>
 </div>
    <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
       <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
@@ -153,26 +153,26 @@ exports[`PageStaking has the expected html structure 1`] = `
 
 exports[`PageStaking should filter the delegates 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Staking
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -180,15 +180,15 @@ exports[`PageStaking should filter the delegates 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -243,40 +243,40 @@ exports[`PageStaking should filter the delegates 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <div
-      class="ni-modal-search"
+      class="tm-modal-search"
     >
       <div
-        class="ni-modal-search-container"
+        class="tm-modal-search-container"
       >
         <div
-          class="ni-form-group"
+          class="tm-form-group"
         >
           <!---->
           <!---->
           <div
-            class="ni-form-group__field"
+            class="tm-form-group__field"
           >
             <div
-              class="ni-modal-search-field"
+              class="tm-modal-search-field"
             >
               <input
-                class="mousetrap ni-field"
+                class="mousetrap tm-field"
                 id="search-input"
                 placeholder="Search..."
                 type="text"
               />
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container"
+                  class="tm-btn__container"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     close
                   </i>
@@ -427,21 +427,21 @@ exports[`PageStaking should filter the delegates 1`] = `
          delegates selected
       </div>
       <a
-        class="ni-btn"
+        class="tm-btn"
         disabled="disabled"
         href="#/staking/bond"
       >
         <span
-          class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+          class="tm-btn__container tm-btn__icon-right tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             chevron_right
           </i>
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Next
           </span>
diff --git a/test/unit/specs/components/wallet/LiTransaction.spec.js b/test/unit/specs/components/wallet/LiTransaction.spec.js
index 681dc7ba48..dab79636b8 100644
--- a/test/unit/specs/components/wallet/LiTransaction.spec.js
+++ b/test/unit/specs/components/wallet/LiTransaction.spec.js
@@ -19,7 +19,7 @@ describe("LiTransaction", () => {
   })
 
   it("should show incoming transactions", () => {
-    expect(wrapper.find(".ni-li-tx").classes()).toContain("ni-li-tx-received")
+    expect(wrapper.find(".tm-li-tx").classes()).toContain("tm-li-tx-received")
   })
 
   it("should show outgoing transactions", () => {
@@ -27,7 +27,7 @@ describe("LiTransaction", () => {
       transaction: transactions[1],
       address: "tb1d4u5zerywfjhxuc9nudvw"
     })
-    expect(wrapper.find(".ni-li-tx").classes()).toContain("ni-li-tx-sent")
+    expect(wrapper.find(".tm-li-tx").classes()).toContain("tm-li-tx-sent")
   })
 
   it("should show all coins of the transaction", () => {
diff --git a/test/unit/specs/components/wallet/PageTransactions.spec.js b/test/unit/specs/components/wallet/PageTransactions.spec.js
index 718ac940a5..5725afd2a5 100644
--- a/test/unit/specs/components/wallet/PageTransactions.spec.js
+++ b/test/unit/specs/components/wallet/PageTransactions.spec.js
@@ -29,8 +29,8 @@ describe("PageTransactions", () => {
   })
 
   it("should show the search on click", () => {
-    wrapper.find(".ni-tool-bar i").trigger("click")
-    expect(wrapper.contains(".ni-modal-search")).toBe(true)
+    wrapper.find(".tm-tool-bar i").trigger("click")
+    expect(wrapper.contains(".tm-modal-search")).toBe(true)
   })
 
   it("should show transactions", () => {
diff --git a/test/unit/specs/components/wallet/PageWallet.spec.js b/test/unit/specs/components/wallet/PageWallet.spec.js
index b1de6a5513..a4ed369bd0 100644
--- a/test/unit/specs/components/wallet/PageWallet.spec.js
+++ b/test/unit/specs/components/wallet/PageWallet.spec.js
@@ -65,7 +65,7 @@ describe("PageWallet", () => {
   })
 
   it("should list the denoms that are available", () => {
-    expect(wrapper.findAll(".ni-li-balance").length).toBe(2)
+    expect(wrapper.findAll(".tm-li-balance").length).toBe(2)
   })
 
   it("should show the n/a message if there are no denoms", () => {
@@ -86,7 +86,7 @@ describe("PageWallet", () => {
   it("has a title for available balances", () => {
     expect(
       wrapper
-        .find("#part-available-balances .ni-part-title")
+        .find("#part-available-balances .tm-part-title")
         .text()
         .trim()
     ).toBe("Available Balances")
@@ -95,7 +95,7 @@ describe("PageWallet", () => {
   it("has a title for staked balances", () => {
     expect(
       wrapper
-        .find("#part-staked-balances .ni-part-title")
+        .find("#part-staked-balances .tm-part-title")
         .text()
         .trim()
     ).toBe("Staked Balances")
@@ -104,7 +104,7 @@ describe("PageWallet", () => {
   it("has shows the correct number of staked tokens", () => {
     expect(
       wrapper
-        .find("#part-staked-balances .ni-li-dd")
+        .find("#part-staked-balances .tm-li-dd")
         .text()
         .trim()
     ).toBe("123")
diff --git a/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
index 765643567c..486f1e0003 100644
--- a/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`LiTransaction has the expected html structure 1`] = `
 <div
-  class="ni-li-tx ni-li-tx-received"
+  class="tm-li-tx tm-li-tx-received"
 >
   <div
     class="tx-icon"
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 8bed3d9c2b..e1f4146452 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageSend has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageSend has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -77,62 +77,62 @@ exports[`PageSend has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -154,7 +154,7 @@ exports[`PageSend has the expected html structure 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -170,49 +170,49 @@ exports[`PageSend has the expected html structure 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -234,7 +234,7 @@ exports[`PageSend has the expected html structure 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -247,60 +247,60 @@ exports[`PageSend has the expected html structure 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount is required
                     </div>
@@ -312,20 +312,20 @@ exports[`PageSend has the expected html structure 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -361,26 +361,26 @@ exports[`PageSend has the expected html structure 1`] = `
 
 exports[`PageSend should show address required error 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -388,15 +388,15 @@ exports[`PageSend should show address required error 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -436,62 +436,62 @@ exports[`PageSend should show address required error 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -503,7 +503,7 @@ exports[`PageSend should show address required error 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -519,49 +519,49 @@ exports[`PageSend should show address required error 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -583,7 +583,7 @@ exports[`PageSend should show address required error 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -596,53 +596,53 @@ exports[`PageSend should show address required error 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -650,7 +650,7 @@ exports[`PageSend should show address required error 1`] = `
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -661,20 +661,20 @@ exports[`PageSend should show address required error 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -690,26 +690,26 @@ exports[`PageSend should show address required error 1`] = `
 
 exports[`PageSend should show bech32 error when address length is too long 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -717,15 +717,15 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -765,62 +765,62 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -832,7 +832,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -848,49 +848,49 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -912,7 +912,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -925,53 +925,53 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (No separator character for asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -979,7 +979,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -990,20 +990,20 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1019,26 +1019,26 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
 
 exports[`PageSend should show bech32 error when address length is too short 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1046,15 +1046,15 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -1094,62 +1094,62 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1161,7 +1161,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1177,49 +1177,49 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1241,7 +1241,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1254,53 +1254,53 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (asdf too short)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -1308,7 +1308,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -1319,20 +1319,20 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1348,26 +1348,26 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
 
 exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1375,15 +1375,15 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -1423,62 +1423,62 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1490,7 +1490,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1506,49 +1506,49 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1570,7 +1570,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1583,53 +1583,53 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (No separator character for !@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -1637,7 +1637,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -1648,20 +1648,20 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1688,26 +1688,26 @@ Object {
 
 exports[`PageSend should work without providing a default denom 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1715,15 +1715,15 @@ exports[`PageSend should work without providing a default denom 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -1763,62 +1763,62 @@ exports[`PageSend should work without providing a default denom 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1830,7 +1830,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1840,7 +1840,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                       </div>
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Denomination is required
                     </div>
@@ -1850,49 +1850,49 @@ exports[`PageSend should work without providing a default denom 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-select"
+                      class="tm-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1914,7 +1914,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1927,60 +1927,60 @@ exports[`PageSend should work without providing a default denom 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount is required
                     </div>
@@ -1992,20 +1992,20 @@ exports[`PageSend should work without providing a default denom 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
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 226e602782..9bfaef36ac 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageTransactions has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Transactions
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageTransactions has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -85,7 +85,7 @@ exports[`PageTransactions has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <!---->
     <li-transaction
@@ -129,26 +129,26 @@ exports[`PageTransactions has the expected html structure 1`] = `
 
 exports[`PageTransactions should filter the transactions 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Transactions
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -156,15 +156,15 @@ exports[`PageTransactions should filter the transactions 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -212,40 +212,40 @@ exports[`PageTransactions should filter the transactions 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <div
-      class="ni-modal-search"
+      class="tm-modal-search"
     >
       <div
-        class="ni-modal-search-container"
+        class="tm-modal-search-container"
       >
         <div
-          class="ni-form-group"
+          class="tm-form-group"
         >
           <!---->
           <!---->
           <div
-            class="ni-form-group__field"
+            class="tm-form-group__field"
           >
             <div
-              class="ni-modal-search-field"
+              class="tm-modal-search-field"
             >
               <input
-                class="mousetrap ni-field"
+                class="mousetrap tm-field"
                 id="search-input"
                 placeholder="Search..."
                 type="text"
               />
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container"
+                  class="tm-btn__container"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     close
                   </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 a747fcc005..bdf39df982 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageWallet has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Wallet
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageWallet has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -92,76 +92,76 @@ exports[`PageWallet has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <modal-search
       type="balances"
     />
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Your Address
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-receive proposal-enter proposal-enter-active"
+            class="tm-li tm-li-receive proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   tb1zgatc3tdauv2m0uf
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <button
-                class="ni-btn btn-receive"
+                class="tm-btn btn-receive"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     file_download
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Receive
                   </span>
@@ -173,73 +173,73 @@ exports[`PageWallet has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-available-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Available Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <!---->
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/FERMION"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   FERMION
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   456
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -248,46 +248,46 @@ exports[`PageWallet has the expected html structure 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/ATOM"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   ATOM
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -300,72 +300,72 @@ exports[`PageWallet has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-staked-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Staked Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   STEAK
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Stake
                   </span>
@@ -402,26 +402,26 @@ exports[`PageWallet has the expected html structure 1`] = `
 
 exports[`PageWallet should filter the balances 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Wallet
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -429,15 +429,15 @@ exports[`PageWallet should filter the balances 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -492,76 +492,76 @@ exports[`PageWallet should filter the balances 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <modal-search
       type="balances"
     />
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Your Address
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-receive proposal-enter proposal-enter-active"
+            class="tm-li tm-li-receive proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   tb1zgatc3tdauv2m0uf
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <button
-                class="ni-btn btn-receive"
+                class="tm-btn btn-receive"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     file_download
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Receive
                   </span>
@@ -573,73 +573,73 @@ exports[`PageWallet should filter the balances 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-available-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Available Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <!---->
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/ATOM"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   ATOM
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -648,46 +648,46 @@ exports[`PageWallet should filter the balances 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-leave proposal-leave-active"
+            class="tm-li tm-li-link tm-li-balance proposal-leave proposal-leave-active"
             href="#/wallet/send/FERMION"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   FERMION
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   456
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -699,72 +699,72 @@ exports[`PageWallet should filter the balances 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-staked-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Staked Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   STEAK
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Stake
                   </span>

From d3c78aa0b206cfd77fb2e8de693cd510fa311b0a Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 17:41:40 +0200
Subject: [PATCH 18/31] jest config

---
 .../renderer/components/common/AppMenu.vue    |  2 +-
 .../renderer/components/common/NiBtnCopy.vue  |  2 +-
 .../components/common/NiBtnReceive.vue        |  2 +-
 .../components/common/NiDataEmpty.vue         |  2 +-
 .../components/common/NiDataEmptySearch.vue   |  2 +-
 .../components/common/NiDataEmptyTx.vue       |  2 +-
 .../components/common/NiDataError.vue         |  2 +-
 .../components/common/NiDataLoading.vue       |  2 +-
 .../components/common/NiModalError.vue        |  2 +-
 .../components/common/NiModalHelp.vue         |  2 +-
 .../components/common/NiModalLCDApproval.vue  |  2 +-
 .../components/common/NiModalSearch.vue       |  2 +-
 .../components/common/NiOnboarding.vue        |  2 +-
 .../common/NiSessionAccountDelete.vue         |  2 +-
 .../components/common/NiSessionImport.vue     |  2 +-
 .../components/common/NiSessionSignIn.vue     |  2 +-
 .../components/common/NiSessionSignUp.vue     |  2 +-
 .../renderer/components/common/NiUserPane.vue |  2 +-
 .../renderer/components/common/Page404.vue    |  2 +-
 .../components/common/PagePreferences.vue     |  2 +-
 .../renderer/components/common/VrToolBar.vue  |  2 +-
 .../components/govern/PageProposal.vue        |  2 +-
 .../components/govern/PageProposals.vue       |  2 +-
 .../components/govern/PageProposalsNew.vue    |  2 +-
 .../govern/PageProposalsNewAdjust.vue         |  2 +-
 .../govern/PageProposalsNewAmend.vue          |  2 +-
 .../govern/PageProposalsNewCreate.vue         |  2 +-
 .../govern/PageProposalsNewText.vue           |  2 +-
 .../govern/PageProposalsNewUpgrade.vue        |  2 +-
 .../renderer/components/monitor/PageBlock.vue |  2 +-
 .../components/monitor/PageBlocks.vue         |  2 +-
 .../renderer/components/staking/PageBond.vue  |  2 +-
 .../components/staking/PageDelegate.vue       |  2 +-
 .../components/staking/PageStaking.vue        |  2 +-
 .../renderer/components/wallet/PageSend.vue   |  2 +-
 .../components/wallet/PageTransactions.vue    |  2 +-
 .../renderer/components/wallet/PageWallet.vue |  2 +-
 jest.config.js                                | 45 ++++++++++++++
 package.json                                  | 60 +------------------
 39 files changed, 83 insertions(+), 96 deletions(-)
 create mode 100644 jest.config.js

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index 4ae72995f4..cba4e73153 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -36,7 +36,7 @@ import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
 import ConnectedNetwork from "common/NiConnectedNetwork"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem } from "@tendermint-ui"
 import UserPane from "common/NiUserPane"
 export default {
   name: "app-menu",
diff --git a/app/src/renderer/components/common/NiBtnCopy.vue b/app/src/renderer/components/common/NiBtnCopy.vue
index 8ed3bf4cab..7a64bf2f16 100644
--- a/app/src/renderer/components/common/NiBtnCopy.vue
+++ b/app/src/renderer/components/common/NiBtnCopy.vue
@@ -7,7 +7,7 @@ tm-btn.btn-copy(
 
 <script>
 import { clipboard } from "electron"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn } from "@tendermint-ui"
 export default {
   components: { TmBtn },
   computed: {
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/NiBtnReceive.vue
index 9e34bd1862..4c7145120d 100644
--- a/app/src/renderer/components/common/NiBtnReceive.vue
+++ b/app/src/renderer/components/common/NiBtnReceive.vue
@@ -9,7 +9,7 @@ tm-btn.btn-receive(
 
 <script>
 import { clipboard } from "electron"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn } from "@tendermint-ui"
 export default {
   components: { Btn },
   methods: {
diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/NiDataEmpty.vue
index 74a4c1692a..359915719d 100644
--- a/app/src/renderer/components/common/NiDataEmpty.vue
+++ b/app/src/renderer/components/common/NiDataEmpty.vue
@@ -8,7 +8,7 @@ tm-data-msg(icon="info_outline")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint/ui"
+import { TmDataMsg } from "@tendermint-ui"
 export default {
   name: "tm-data-empty",
   props: ["title", "subtitle"],
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/NiDataEmptySearch.vue
index ff4b8c0e51..601ceced09 100644
--- a/app/src/renderer/components/common/NiDataEmptySearch.vue
+++ b/app/src/renderer/components/common/NiDataEmptySearch.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="search")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint/ui"
+import { TmDataMsg } from "@tendermint-ui"
 export default {
   name: "tm-data-empty-search",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/NiDataEmptyTx.vue
index cb85192ba7..2d702f05bd 100644
--- a/app/src/renderer/components/common/NiDataEmptyTx.vue
+++ b/app/src/renderer/components/common/NiDataEmptyTx.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="info_outline")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint/ui"
+import { TmDataMsg } from "@tendermint-ui"
 export default {
   name: "tm-data-empty-tx",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/NiDataError.vue
index 13434531ea..35c5f4988f 100644
--- a/app/src/renderer/components/common/NiDataError.vue
+++ b/app/src/renderer/components/common/NiDataError.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="sentiment_very_dissatisfied")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint/ui"
+import { TmDataMsg } from "@tendermint-ui"
 export default {
   name: "tm-data-error",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/NiDataLoading.vue
index d1647155a7..baf3297647 100644
--- a/app/src/renderer/components/common/NiDataLoading.vue
+++ b/app/src/renderer/components/common/NiDataLoading.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="rotate_right" spin="true")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint/ui"
+import { TmDataMsg } from "@tendermint-ui"
 export default {
   name: "tm-data-loading",
   components: { TmDataMsg },
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/NiModalError.vue
index 3aee987815..611dc79287 100644
--- a/app/src/renderer/components/common/NiModalError.vue
+++ b/app/src/renderer/components/common/NiModalError.vue
@@ -22,7 +22,7 @@
 <script>
 import { remote, shell } from "electron"
 import { mapGetters } from "vuex"
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn } from "@tendermint-ui"
 export default {
   name: "tm-modal-error",
   components: { TmBtn },
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/NiModalHelp.vue
index 85bce8f68c..dc265ac300 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/NiModalHelp.vue
@@ -13,7 +13,7 @@ modal.tm-modal-help(v-if="active" :close="close")
 <script>
 import { mapGetters } from "vuex"
 import Modal from "common/NiModal"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem } from "@tendermint-ui"
 export default {
   name: "tm-modal-help",
   components: {
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index bce9da706a..7678de1e08 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { TmBtn } from "@tendermint/ui"
+import { TmBtn } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 export default {
   name: "modal-lcd-approval",
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index 7929155cf3..7f834fd90a 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -29,7 +29,7 @@
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmFormGroup } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/NiOnboarding.vue
index 1bfc804961..bae0680715 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/NiOnboarding.vue
@@ -20,7 +20,7 @@
 <script>
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBarDiscrete, TmBtn } from "@tendermint/ui"
+import { TmBarDiscrete, TmBtn } from "@tendermint-ui"
 export default {
   name: "tm-onboarding",
   components: { TmBtn, TmBarDiscrete },
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index c2c9917274..aa4268c068 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -28,7 +28,7 @@
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 356a6aaee2..303c9ba88e 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -54,7 +54,7 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index dce55bb4fa..996afdc989 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -28,7 +28,7 @@
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index b8065f4e85..004956a772 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -59,7 +59,7 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/NiUserPane.vue
index 238bfc91f3..21db0460b3 100644
--- a/app/src/renderer/components/common/NiUserPane.vue
+++ b/app/src/renderer/components/common/NiUserPane.vue
@@ -12,7 +12,7 @@ tm-list-item.tm-li-user(
 <script>
 import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
-import { TmListItem } from "@tendermint/ui"
+import { TmListItem } from "@tendermint-ui"
 export default {
   name: "tm-user-pane",
   components: { TmListItem },
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index d1a790b3f6..a186736e71 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -6,7 +6,7 @@ tm-page(title='404 - Page Not Found')
 </template>
 
 <script>
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 export default {
   name: "page-404",
   components: {
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index 4d7b48a4af..122c5f9b95 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -46,7 +46,7 @@ tm-page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
-import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint-ui"
 import ToolBar from "common/VrToolBar"
 
 export default {
diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/VrToolBar.vue
index 445b951c4e..4bc9e2f2ed 100644
--- a/app/src/renderer/components/common/VrToolBar.vue
+++ b/app/src/renderer/components/common/VrToolBar.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { TmToolBar } from "@tendermint/ui"
+import { TmToolBar } from "@tendermint-ui"
 export default {
   name: "vr-tool-bar",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index b08ba33cbd..472f46fc6a 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -28,7 +28,7 @@ tm-page(:title='proposal.title')
 
 <script>
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
+import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint-ui"
 import FieldVote from "common/NiFieldVote"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index ee4c95794b..3a9ff48f93 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -27,7 +27,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/NiModalSearch"
 import ToolBar from "common/VrToolBar"
-import { TmPage } from "@tendermint/ui"
+import { TmPage } from "@tendermint-ui"
 export default {
   name: "page-proposals",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 0566dc5c55..93aded4747 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -12,7 +12,7 @@ tm-page(title='New Proposal')
 </template>
 
 <script>
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new",
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 5e6612d1ff..69898c6f26 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 0263daaaf9..1a4458e8be 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index bc27a71610..06f58d7cad 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 5640cc5375..d538afd101 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index d12d92a9a2..0053d4515d 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 3a0427057a..ef8ba67840 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -64,7 +64,7 @@ import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/VrToolBar"
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 export default {
   name: "page-block",
   components: {
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 9d1ff1a484..e9ea8d8dc2 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -29,7 +29,7 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 8c6b958fe2..313bec36a7 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -123,7 +123,7 @@ import {
   TmFormStruct,
   TmPage,
   TmPart
-} from "@tendermint/ui"
+} from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index 1974b2c56c..1240cce656 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -17,7 +17,7 @@ tm-page(:title="delegateType + ' Profile'")
 
 <script>
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/VrToolBar"
 export default {
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index b1168d1fb2..b1bdd50ee0 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -30,7 +30,7 @@ import { mapGetters } from "vuex"
 import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
-import { TmBtn, TmPage } from "@tendermint/ui"
+import { TmBtn, TmPage } from "@tendermint-ui"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index ec1f7d88f6..327aed4323 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -60,7 +60,7 @@ import {
   TmFormStruct,
   TmPage,
   TmPart
-} from "@tendermint/ui"
+} from "@tendermint-ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 457853c901..caa56cd663 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -28,7 +28,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import DataEmptyTx from "common/NiDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
 import ModalSearch from "common/NiModalSearch"
-import { TmPage } from "@tendermint/ui"
+import { TmPage } from "@tendermint-ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-transactions",
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 05b29aad35..527e99655e 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -46,7 +46,7 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
-import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
 import ModalSearch from "common/NiModalSearch"
 import VrToolBar from "common/VrToolBar"
 export default {
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..bc8054f03f
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,45 @@
+module.exports = {
+  testMatch: ["**/unit/specs/**/*spec.js"],
+  moduleFileExtensions: ["js", "vue"],
+  moduleDirectories: ["app/node_modules", "node_modules", "src"],
+  moduleNameMapper: {
+    "^src/(.*)$": "<rootDir>/app/src/$1",
+    "^app/(.*)$": "<rootDir>/app/$1",
+    "^renderer/(.*)$": "<rootDir>/app/src/renderer/$1",
+    "^common/(.*)$": "<rootDir>/app/src/renderer/components/common/$1",
+    "^govern/(.*)$": "<rootDir>/app/src/renderer/components/govern/$1",
+    "^monitor/(.*)$": "<rootDir>/app/src/renderer/components/monitor/$1",
+    "^staking/(.*)$": "<rootDir>/app/src/renderer/components/staking/$1",
+    "^scripts/(.*)$": "<rootDir>/app/src/renderer/scripts/$1",
+    "^wallet/(.*)$": "<rootDir>/app/src/renderer/components/wallet/$1",
+    "^variables$": "<rootDir>/app/src/renderer/styles/variables.styl"
+  },
+  transform: {
+    ".*.vue$": "jest-vue-preprocessor",
+    ".*.js$": "babel-jest"
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!.*vue$)",
+    "/node_modules/(?!@tendermint-ui).+\\.js$"
+  ],
+  collectCoverage: true,
+  mapCoverage: true,
+  coverageDirectory: "./test/unit/coverage",
+  coverageReporters: ["lcov"],
+  coveragePathIgnorePatterns: [
+    "/node_modules/",
+    "/build/",
+    "/dist/",
+    "/test/",
+    "/app/src/config.js"
+  ],
+  testURL: "http://localhost",
+  setupFiles: [
+    "./test/unit/helpers/fixed_time.js",
+    "./test/unit/helpers/setup.js",
+    "./test/unit/helpers/console_error_throw.js",
+    "./test/unit/helpers/genesis_mock.js",
+    "./test/unit/helpers/electron_mock.js",
+    "jest-localstorage-mock"
+  ]
+}
diff --git a/package.json b/package.json
index c85fbe5c2f..3582478152 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "https://github.com/tendermint/ui.git",
+    "@tendermint-ui": "https://github.com/tendermint/ui.git",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
@@ -142,64 +142,6 @@
     "vuelidate": "0.6.2",
     "vuex": "3.0.1"
   },
-  "jest": {
-    "testMatch": [
-      "**/unit/specs/**/*spec.js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "vue"
-    ],
-    "moduleDirectories": [
-      "app/node_modules",
-      "node_modules",
-      "src"
-    ],
-    "moduleNameMapper": {
-      "^src/(.*)$": "<rootDir>/app/src/$1",
-      "^app/(.*)$": "<rootDir>/app/$1",
-      "^renderer/(.*)$": "<rootDir>/app/src/renderer/$1",
-      "^common/(.*)$": "<rootDir>/app/src/renderer/components/common/$1",
-      "^govern/(.*)$": "<rootDir>/app/src/renderer/components/govern/$1",
-      "^monitor/(.*)$": "<rootDir>/app/src/renderer/components/monitor/$1",
-      "^staking/(.*)$": "<rootDir>/app/src/renderer/components/staking/$1",
-      "^scripts/(.*)$": "<rootDir>/app/src/renderer/scripts/$1",
-      "^wallet/(.*)$": "<rootDir>/app/src/renderer/components/wallet/$1",
-      "^variables$": "<rootDir>/app/src/renderer/styles/variables.styl"
-    },
-    "transform": {
-      ".*.vue$": "jest-vue-preprocessor",
-      ".*.js$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!.*vue$)",
-      "/node_modules/(?!@tendermint/ui).+\\.js$",
-      "/node_modules/(?!@tendermint/ui)",
-      "/node_modules/(?!@tendermint)"
-    ],
-    "collectCoverage": true,
-    "mapCoverage": true,
-    "coverageDirectory": "./test/unit/coverage",
-    "coverageReporters": [
-      "lcov"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/build/",
-      "/dist/",
-      "/test/",
-      "/app/src/config.js"
-    ],
-    "testURL": "http://localhost",
-    "setupFiles": [
-      "./test/unit/helpers/fixed_time.js",
-      "./test/unit/helpers/setup.js",
-      "./test/unit/helpers/console_error_throw.js",
-      "./test/unit/helpers/genesis_mock.js",
-      "./test/unit/helpers/electron_mock.js",
-      "jest-localstorage-mock"
-    ]
-  },
   "prettier": {
     "semi": false
   }

From 1e48093f6269b993b54753c430a1e2e926953f03 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 17:44:32 +0200
Subject: [PATCH 19/31] still @tendermint/ui

---
 app/src/renderer/components/common/AppMenu.vue                 | 2 +-
 app/src/renderer/components/common/NiBtnCopy.vue               | 2 +-
 app/src/renderer/components/common/NiBtnReceive.vue            | 2 +-
 app/src/renderer/components/common/NiDataEmpty.vue             | 2 +-
 app/src/renderer/components/common/NiDataEmptySearch.vue       | 2 +-
 app/src/renderer/components/common/NiDataEmptyTx.vue           | 2 +-
 app/src/renderer/components/common/NiDataError.vue             | 2 +-
 app/src/renderer/components/common/NiDataLoading.vue           | 2 +-
 app/src/renderer/components/common/NiModalError.vue            | 2 +-
 app/src/renderer/components/common/NiModalHelp.vue             | 2 +-
 app/src/renderer/components/common/NiModalLCDApproval.vue      | 2 +-
 app/src/renderer/components/common/NiModalSearch.vue           | 2 +-
 app/src/renderer/components/common/NiOnboarding.vue            | 2 +-
 app/src/renderer/components/common/NiSessionAccountDelete.vue  | 2 +-
 app/src/renderer/components/common/NiSessionImport.vue         | 2 +-
 app/src/renderer/components/common/NiSessionSignIn.vue         | 2 +-
 app/src/renderer/components/common/NiSessionSignUp.vue         | 2 +-
 app/src/renderer/components/common/NiUserPane.vue              | 2 +-
 app/src/renderer/components/common/Page404.vue                 | 2 +-
 app/src/renderer/components/common/PagePreferences.vue         | 2 +-
 app/src/renderer/components/common/VrToolBar.vue               | 2 +-
 app/src/renderer/components/govern/PageProposal.vue            | 2 +-
 app/src/renderer/components/govern/PageProposals.vue           | 2 +-
 app/src/renderer/components/govern/PageProposalsNew.vue        | 2 +-
 app/src/renderer/components/govern/PageProposalsNewAdjust.vue  | 2 +-
 app/src/renderer/components/govern/PageProposalsNewAmend.vue   | 2 +-
 app/src/renderer/components/govern/PageProposalsNewCreate.vue  | 2 +-
 app/src/renderer/components/govern/PageProposalsNewText.vue    | 2 +-
 app/src/renderer/components/govern/PageProposalsNewUpgrade.vue | 2 +-
 app/src/renderer/components/monitor/PageBlock.vue              | 2 +-
 app/src/renderer/components/monitor/PageBlocks.vue             | 2 +-
 app/src/renderer/components/staking/PageBond.vue               | 2 +-
 app/src/renderer/components/staking/PageDelegate.vue           | 2 +-
 app/src/renderer/components/staking/PageStaking.vue            | 2 +-
 app/src/renderer/components/wallet/PageSend.vue                | 2 +-
 app/src/renderer/components/wallet/PageTransactions.vue        | 2 +-
 app/src/renderer/components/wallet/PageWallet.vue              | 2 +-
 package.json                                                   | 2 +-
 38 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index cba4e73153..4ae72995f4 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -36,7 +36,7 @@ import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
 import ConnectedNetwork from "common/NiConnectedNetwork"
-import { TmListItem } from "@tendermint-ui"
+import { TmListItem } from "@tendermint/ui"
 import UserPane from "common/NiUserPane"
 export default {
   name: "app-menu",
diff --git a/app/src/renderer/components/common/NiBtnCopy.vue b/app/src/renderer/components/common/NiBtnCopy.vue
index 7a64bf2f16..8ed3bf4cab 100644
--- a/app/src/renderer/components/common/NiBtnCopy.vue
+++ b/app/src/renderer/components/common/NiBtnCopy.vue
@@ -7,7 +7,7 @@ tm-btn.btn-copy(
 
 <script>
 import { clipboard } from "electron"
-import { TmBtn } from "@tendermint-ui"
+import { TmBtn } from "@tendermint/ui"
 export default {
   components: { TmBtn },
   computed: {
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/NiBtnReceive.vue
index 4c7145120d..9e34bd1862 100644
--- a/app/src/renderer/components/common/NiBtnReceive.vue
+++ b/app/src/renderer/components/common/NiBtnReceive.vue
@@ -9,7 +9,7 @@ tm-btn.btn-receive(
 
 <script>
 import { clipboard } from "electron"
-import { TmBtn } from "@tendermint-ui"
+import { TmBtn } from "@tendermint/ui"
 export default {
   components: { Btn },
   methods: {
diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/NiDataEmpty.vue
index 359915719d..74a4c1692a 100644
--- a/app/src/renderer/components/common/NiDataEmpty.vue
+++ b/app/src/renderer/components/common/NiDataEmpty.vue
@@ -8,7 +8,7 @@ tm-data-msg(icon="info_outline")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint-ui"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "tm-data-empty",
   props: ["title", "subtitle"],
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/NiDataEmptySearch.vue
index 601ceced09..ff4b8c0e51 100644
--- a/app/src/renderer/components/common/NiDataEmptySearch.vue
+++ b/app/src/renderer/components/common/NiDataEmptySearch.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="search")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint-ui"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "tm-data-empty-search",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/NiDataEmptyTx.vue
index 2d702f05bd..cb85192ba7 100644
--- a/app/src/renderer/components/common/NiDataEmptyTx.vue
+++ b/app/src/renderer/components/common/NiDataEmptyTx.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="info_outline")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint-ui"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "tm-data-empty-tx",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/NiDataError.vue
index 35c5f4988f..13434531ea 100644
--- a/app/src/renderer/components/common/NiDataError.vue
+++ b/app/src/renderer/components/common/NiDataError.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="sentiment_very_dissatisfied")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint-ui"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "tm-data-error",
   components: { TmDataMsg }
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/NiDataLoading.vue
index baf3297647..d1647155a7 100644
--- a/app/src/renderer/components/common/NiDataLoading.vue
+++ b/app/src/renderer/components/common/NiDataLoading.vue
@@ -5,7 +5,7 @@ tm-data-msg(icon="rotate_right" spin="true")
 </template>
 
 <script>
-import { TmDataMsg } from "@tendermint-ui"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
   name: "tm-data-loading",
   components: { TmDataMsg },
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/NiModalError.vue
index 611dc79287..3aee987815 100644
--- a/app/src/renderer/components/common/NiModalError.vue
+++ b/app/src/renderer/components/common/NiModalError.vue
@@ -22,7 +22,7 @@
 <script>
 import { remote, shell } from "electron"
 import { mapGetters } from "vuex"
-import { TmBtn } from "@tendermint-ui"
+import { TmBtn } from "@tendermint/ui"
 export default {
   name: "tm-modal-error",
   components: { TmBtn },
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/NiModalHelp.vue
index dc265ac300..85bce8f68c 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/NiModalHelp.vue
@@ -13,7 +13,7 @@ modal.tm-modal-help(v-if="active" :close="close")
 <script>
 import { mapGetters } from "vuex"
 import Modal from "common/NiModal"
-import { TmListItem } from "@tendermint-ui"
+import { TmListItem } from "@tendermint/ui"
 export default {
   name: "tm-modal-help",
   components: {
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index 7678de1e08..bce9da706a 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { TmBtn } from "@tendermint-ui"
+import { TmBtn } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 export default {
   name: "modal-lcd-approval",
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index 7f834fd90a..7929155cf3 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -29,7 +29,7 @@
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormGroup } from "@tendermint-ui"
+import { TmBtn, TmFormGroup } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/NiOnboarding.vue
index bae0680715..1bfc804961 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/NiOnboarding.vue
@@ -20,7 +20,7 @@
 <script>
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBarDiscrete, TmBtn } from "@tendermint-ui"
+import { TmBarDiscrete, TmBtn } from "@tendermint/ui"
 export default {
   name: "tm-onboarding",
   components: { TmBtn, TmBarDiscrete },
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index aa4268c068..c2c9917274 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -28,7 +28,7 @@
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 303c9ba88e..356a6aaee2 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -54,7 +54,7 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 996afdc989..dce55bb4fa 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -28,7 +28,7 @@
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 export default {
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index 004956a772..b8065f4e85 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -59,7 +59,7 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldSeed from "common/NiFieldSeed"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/NiUserPane.vue
index 21db0460b3..238bfc91f3 100644
--- a/app/src/renderer/components/common/NiUserPane.vue
+++ b/app/src/renderer/components/common/NiUserPane.vue
@@ -12,7 +12,7 @@ tm-list-item.tm-li-user(
 <script>
 import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
-import { TmListItem } from "@tendermint-ui"
+import { TmListItem } from "@tendermint/ui"
 export default {
   name: "tm-user-pane",
   components: { TmListItem },
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index a186736e71..d1a790b3f6 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -6,7 +6,7 @@ tm-page(title='404 - Page Not Found')
 </template>
 
 <script>
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-404",
   components: {
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index 122c5f9b95..4d7b48a4af 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -46,7 +46,7 @@ tm-page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
-import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 
 export default {
diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/VrToolBar.vue
index 4bc9e2f2ed..445b951c4e 100644
--- a/app/src/renderer/components/common/VrToolBar.vue
+++ b/app/src/renderer/components/common/VrToolBar.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { TmToolBar } from "@tendermint-ui"
+import { TmToolBar } from "@tendermint/ui"
 export default {
   name: "vr-tool-bar",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index 472f46fc6a..b08ba33cbd 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -28,7 +28,7 @@ tm-page(:title='proposal.title')
 
 <script>
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint-ui"
+import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
 import FieldVote from "common/NiFieldVote"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index 3a9ff48f93..ee4c95794b 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -27,7 +27,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/NiModalSearch"
 import ToolBar from "common/VrToolBar"
-import { TmPage } from "@tendermint-ui"
+import { TmPage } from "@tendermint/ui"
 export default {
   name: "page-proposals",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 93aded4747..0566dc5c55 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -12,7 +12,7 @@ tm-page(title='New Proposal')
 </template>
 
 <script>
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new",
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 69898c6f26..5e6612d1ff 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 1a4458e8be..0263daaaf9 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index 06f58d7cad..bc27a71610 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index d538afd101..5640cc5375 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 0053d4515d..d12d92a9a2 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -33,7 +33,7 @@ tm-page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint-ui"
+import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index ef8ba67840..3a0427057a 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -64,7 +64,7 @@ import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/VrToolBar"
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-block",
   components: {
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index e9ea8d8dc2..9d1ff1a484 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -29,7 +29,7 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import DataError from "common/NiDataError"
 import DataLoading from "common/NiDataLoading"
 import ToolBar from "common/VrToolBar"
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 313bec36a7..8c6b958fe2 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -123,7 +123,7 @@ import {
   TmFormStruct,
   TmPage,
   TmPart
-} from "@tendermint-ui"
+} from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index 1240cce656..1974b2c56c 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -17,7 +17,7 @@ tm-page(:title="delegateType + ' Profile'")
 
 <script>
 import { mapGetters } from "vuex"
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import TextBlock from "common/TextBlock"
 import ToolBar from "common/VrToolBar"
 export default {
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index b1bdd50ee0..b1168d1fb2 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -30,7 +30,7 @@ import { mapGetters } from "vuex"
 import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
-import { TmBtn, TmPage } from "@tendermint-ui"
+import { TmBtn, TmPage } from "@tendermint/ui"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index 327aed4323..ec1f7d88f6 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -60,7 +60,7 @@ import {
   TmFormStruct,
   TmPage,
   TmPart
-} from "@tendermint-ui"
+} from "@tendermint/ui"
 import Field from "@nylira/vue-field"
 import FieldAddon from "common/NiFieldAddon"
 import FormMsg from "common/NiFormMsg"
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index caa56cd663..457853c901 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -28,7 +28,7 @@ import DataEmptySearch from "common/NiDataEmptySearch"
 import DataEmptyTx from "common/NiDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
 import ModalSearch from "common/NiModalSearch"
-import { TmPage } from "@tendermint-ui"
+import { TmPage } from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-transactions",
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 527e99655e..05b29aad35 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -46,7 +46,7 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
-import { TmListItem, TmPage, TmPart } from "@tendermint-ui"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
 import VrToolBar from "common/VrToolBar"
 export default {
diff --git a/package.json b/package.json
index 3582478152..2d19a1003d 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint-ui": "https://github.com/tendermint/ui.git",
+    "@tendermint/ui": "https://github.com/tendermint/ui.git",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",

From 110802ec30c54e8fe788cedeca445907eb7bb35f Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Wed, 20 Jun 2018 18:39:12 +0200
Subject: [PATCH 20/31] unit tests breaking in an expected way ):)

---
 app/src/renderer/App.vue                      |   6 +-
 .../components/common/NiBtnReceive.vue        |   2 +-
 .../components/common/NiFieldSeed.vue         |   6 +-
 .../renderer/components/common/NiFormMsg.vue  | 107 ----------------
 .../components/common/NiModalLCDApproval.vue  |   7 +-
 .../components/common/NiModalSearch.vue       |  16 ++-
 .../common/NiSessionAccountDelete.vue         |  22 ++--
 .../components/common/NiSessionImport.vue     |  34 ++---
 .../components/common/NiSessionSignIn.vue     |  26 ++--
 .../components/common/NiSessionSignUp.vue     |  34 ++---
 .../components/common/PagePreferences.vue     |  11 +-
 .../renderer/components/common/VrToolBar.vue  |   3 -
 .../govern/PageProposalsNewAdjust.vue         |  27 ++--
 .../govern/PageProposalsNewAmend.vue          |  27 ++--
 .../govern/PageProposalsNewCreate.vue         |  27 ++--
 .../govern/PageProposalsNewText.vue           |  28 +++--
 .../govern/PageProposalsNewUpgrade.vue        |  28 +++--
 .../renderer/components/staking/PageBond.vue  |  31 ++---
 .../components/staking/PageStaking.vue        |   3 +-
 .../renderer/components/wallet/PageSend.vue   |  31 ++---
 jest.config.js                                |  12 +-
 .../specs/components/common/NiFormMsg.spec.js | 118 ------------------
 .../components/common/NiUserPane.spec.js      |   4 +-
 .../__snapshots__/VrToolBar.spec.js.snap      |   3 +
 24 files changed, 214 insertions(+), 399 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiFormMsg.vue
 delete mode 100644 test/unit/specs/components/common/NiFormMsg.spec.js
 create mode 100644 test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap

diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index 9c5bf4baa8..f0a5a55f71 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -9,7 +9,7 @@
       router-view
       app-footer
     modal-receive
-  notifications(:notifications='notifications' theme='cosmos')
+  tm-notifications(:notifications='notifications' theme='cosmos')
   modal-error(v-if='config.modals.error.active' :body='config.modals.error.message')
   modal-lcd-approval(v-if='approvalRequired' :hash='approvalRequired')
 </template>
@@ -18,7 +18,7 @@
 import { mapGetters } from "vuex"
 import AppHeader from "common/AppHeader"
 import AppFooter from "common/AppFooter"
-import Notifications from "@nylira/vue-notifications"
+import { TmNotifications } from "@tendermint/ui"
 import ModalError from "common/NiModalError"
 import ModalHelp from "common/NiModalHelp"
 import ModalLcdApproval from "common/NiModalLCDApproval"
@@ -35,7 +35,7 @@ export default {
     ModalHelp,
     ModalLcdApproval,
     ModalReceive,
-    Notifications,
+    TmNotifications,
     Onboarding,
     Session
   },
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/NiBtnReceive.vue
index 9e34bd1862..2b9146ff0e 100644
--- a/app/src/renderer/components/common/NiBtnReceive.vue
+++ b/app/src/renderer/components/common/NiBtnReceive.vue
@@ -11,7 +11,7 @@ tm-btn.btn-receive(
 import { clipboard } from "electron"
 import { TmBtn } from "@tendermint/ui"
 export default {
-  components: { Btn },
+  components: { TmBtn },
   methods: {
     openModal() {
       this.$store.commit("setModalReceive", true)
diff --git a/app/src/renderer/components/common/NiFieldSeed.vue b/app/src/renderer/components/common/NiFieldSeed.vue
index 7f802c07d4..aff4357a0d 100644
--- a/app/src/renderer/components/common/NiFieldSeed.vue
+++ b/app/src/renderer/components/common/NiFieldSeed.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-field.tm-field-seed(
+tm-field.tm-field-seed(
   type="textarea"
   @input="update($event)"
   :value="value")
@@ -7,10 +7,10 @@ field.tm-field-seed(
 
 <script>
 import autosize from "autosize"
-import Field from "@nylira/vue-field"
+import { TmField } from "@tendermint/ui"
 export default {
   name: "tm-field-seed",
-  components: { Field },
+  components: { TmField },
   methods: {
     update(value) {
       this.$emit("input", value)
diff --git a/app/src/renderer/components/common/NiFormMsg.vue b/app/src/renderer/components/common/NiFormMsg.vue
deleted file mode 100644
index 16befd03f8..0000000000
--- a/app/src/renderer/components/common/NiFormMsg.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template lang='pug'>
-div(:class='cssClass')
-  template(v-if='name') {{ name }} {{ error }}
-  slot(v-else='')
-</template>
-
-<script>
-export default {
-  computed: {
-    cssClass() {
-      let value = "tm-form-msg sm"
-      if (this.type) {
-        value += " tm-form-msg--error"
-      } else {
-        value += " tm-form-msg--desc"
-      }
-      return value
-    },
-    error() {
-      let msg = ""
-      switch (this.type) {
-        case "alphaNum":
-          msg = "must contain only alphanumeric characters"
-          break
-        case "numeric":
-          msg = "must contain only numerals"
-          break
-        case "between":
-          msg = `must be between ${this.min} and ${this.max}`
-          break
-        case "date":
-          msg = `must be a valid date`
-          break
-        case "datetime":
-          msg = `must be a valid date and time`
-          break
-        case "exactLength":
-          msg = `must be exactly ${this.length} characters`
-          break
-        case "ipAddress":
-          msg = "must be a valid IPv4 or IPv6 address"
-          break
-        case "length":
-          msg = `must be between ${this.min} and ${this.max} characters`
-          break
-        case "minLength":
-          msg = `must be longer than ${this.min} characters`
-          break
-        case "match":
-          msg = "must match"
-          break
-        case "maxLength":
-          msg = `must be shorter than ${this.max} characters`
-          break
-        case "required":
-          msg = "is required"
-          break
-        case "words16":
-          msg = "phrase must be 16 words"
-          break
-        case "url":
-          msg = "must be a valid URL (http:// required)"
-          break
-        case "bech32":
-          msg = "is invalid (" + this.body + ")"
-          break
-        default:
-          msg = "must be valid"
-          break
-      }
-      return msg
-    }
-  },
-  props: ["type", "body", "name", "min", "max", "length"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.tm-form-msg
-  padding 0.25rem 0 0
-  display flex
-  margin 0 !important
-
-  &.sm
-    font-size sm
-
-.tm-form-msg:before
-  content ''
-  font-family 'Material Icons'
-  padding-right 0.35rem
-
-.tm-form-msg.tm-form-msg--error
-  color var(--danger)
-
-.tm-form-msg.tm-form-msg--error:before
-  content 'error'
-  color var(--danger)
-
-.tm-form-msg.tm-form-msg--desc
-  color var(--warning)
-
-.tm-form-msg.tm-form-msg--desc:before
-  content 'priority_high'
-  color var(--warning)
-</style>
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/NiModalLCDApproval.vue
index bce9da706a..c45c558f48 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/NiModalLCDApproval.vue
@@ -6,7 +6,7 @@
     .tm-modal-lcd-approval__body
       | Voyager needs to approve the node you're trying to connect to. Please compare the hash below against the hash from a trusted source. If you are 100% sure that the hashes match, click approve to proceed.
 
-      field#node-hash(type="textarea" :value="hash" disabled)
+      tm-field#node-hash(type="textarea" :value="hash" disabled)
 
     .tm-modal-lcd-approval__footer
 
@@ -24,13 +24,12 @@
 </template>
 
 <script>
-import { TmBtn } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
+import { TmBtn, TmField } from "@tendermint/ui"
 export default {
   name: "modal-lcd-approval",
   components: {
     TmBtn,
-    Field
+    TmField
   },
   computed: {},
   methods: {
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue
index 7929155cf3..d9fd395a7d 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/NiModalSearch.vue
@@ -6,22 +6,22 @@
     tm-form-group(field-id="search-input" field-label=""
       :error="$v.filters.blocks.search.query.$invalid")
       .tm-modal-search-field
-        field#search-input.mousetrap(
+        tm-field#search-input.mousetrap(
           type="number"
           step="1"
           placeholder="View block height..."
           v-model="query")
         tm-btn(value="Find")
         tm-btn(type="button" icon="close" @click.native="close")
-      form-msg(name="Query" type="numeric"
+      tm-form-msg(name="Query" type="numeric"
         v-if="!$v.filters.blocks.search.query.numeric")
-      form-msg(name="Query" type="between" min="0"
+      tm-form-msg(name="Query" type="between" min="0"
         :max="$v.filters.blocks.search.query.$params.between.max"
         v-if="!$v.filters.blocks.search.query.between")
   .tm-modal-search-container(v-else)
     tm-form-group(field-id="search-input" field-label="")
       .tm-modal-search-field
-        field#search-input.mousetrap(
+        tm-field#search-input.mousetrap(
           type="text" placeholder="Search..." v-model="query")
         tm-btn(icon="close" @click.native="close")
 </template>
@@ -29,16 +29,14 @@
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import { TmBtn, TmFormGroup } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import { TmBtn, TmFormGroup, TmField, TmFormMsg } from "@tendermint/ui"
 export default {
   name: "modal-search",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg
+    TmFormMsg
   },
   computed: {
     ...mapGetters(["filters", "lastHeader"]),
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/NiSessionAccountDelete.vue
index c2c9917274..ec57ae27b5 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/NiSessionAccountDelete.vue
@@ -7,12 +7,12 @@
   .tm-session-main
     tm-form-group(:error='$v.fields.deletionPassword.$error'
       field-id='sign-in-password' field-label='Password')
-      field#sign-in-password(
+      tm-field#sign-in-password(
         type="password"
         placeholder="Enter your password"
         v-model="fields.deletionPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.deletionPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.deletionPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.deletionPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.deletionPassword.minLength')
 
     tm-form-group(field-id="sign-up-warning" field-label=' '
       :error='$v.fields.deletionWarning.$error')
@@ -21,23 +21,27 @@
           input#sign-up-warning(type="checkbox" v-model="fields.deletionWarning")
         label.tm-field-checkbox-label(for="sign-up-warning")
           | I understand that Cosmos cannot recover deleted accounts without the passphrase.
-      form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
+      tm-form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
   .tm-session-footer
     tm-btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
 </template>
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 export default {
   name: "tm-session-account-delete",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct
   },
   data: () => ({ fields: { deletionPassword: "" } }),
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/NiSessionImport.vue
index 356a6aaee2..9e9c141a55 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/NiSessionImport.vue
@@ -6,29 +6,29 @@
     a(@click="help"): i.material-icons help_outline
   .tm-session-main
     tm-form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
-      field#import-name(
+      tm-field#import-name(
         type="text"
         placeholder="Must have at least 5 characters"
         v-model="fields.importName")
-      form-msg(name='Name' type='required' v-if='!$v.fields.importName.required')
-      form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.importName.minLength')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.importName.required')
+      tm-form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.importName.minLength')
 
     tm-form-group(:error='$v.fields.importPassword.$error'
       field-id='import-password' field-label='Password')
-      field#import-password(
+      tm-field#import-password(
         type="password"
         placeholder="Must be at least 10 characters"
         v-model="fields.importPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.importPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.importPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.importPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.importPassword.minLength')
 
     tm-form-group(:error='$v.fields.importPasswordConfirm.$error'
       field-id='import-password-confirmation' field-label='Confirm Password')
-      field#import-password-confirmation(
+      tm-field#import-password-confirmation(
         type="password"
         placeholder="Enter password again"
         v-model="fields.importPasswordConfirm")
-      form-msg(name='Password confirmation' type='match' v-if='!$v.fields.importPasswordConfirm.sameAsPassword')
+      tm-form-msg(name='Password confirmation' type='match' v-if='!$v.fields.importPasswordConfirm.sameAsPassword')
 
     tm-form-group(:error='$v.fields.importSeed.$error'
       field-id='import-seed' field-label='Seed Phrase')
@@ -36,8 +36,8 @@
         :value="fields.importSeed"
         @input="val => fields.importSeed = val"
         placeholder="Must be exactly 16 words")
-      form-msg(name='Seed' type='required' v-if='!$v.fields.importSeed.required')
-      form-msg(name='Seed' type='words16' v-else-if='!$v.fields.importSeed.words16')
+      tm-form-msg(name='Seed' type='required' v-if='!$v.fields.importSeed.required')
+      tm-form-msg(name='Seed' type='words16' v-else-if='!$v.fields.importSeed.words16')
 
     tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
@@ -54,19 +54,23 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 import FieldSeed from "common/NiFieldSeed"
-import FormMsg from "common/NiFormMsg"
 
 export default {
   name: "tm-session-import",
   components: {
     TmBtn,
-    Field,
+    TmField,
     FieldSeed,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct
   },
   data: () => ({
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index dce55bb4fa..2ba9a223ab 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -6,21 +6,21 @@
     a(@click="help"): i.material-icons help_outline
   .tm-session-main
     tm-form-group(field-id='sign-in-name' field-label='Select Account')
-      field#sign-in-name(
+      tm-field#sign-in-name(
         type="select"
         v-model="fields.signInName"
         placeholder="Select account…"
         :options="accounts")
-      form-msg(name='Name' type='required' v-if='!$v.fields.signInName.required')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.signInName.required')
 
     tm-form-group(:error='$v.fields.signInPassword.$error'
       field-id='sign-in-password' field-label='Password')
-      field#sign-in-password(
+      tm-field#sign-in-password(
         type="password"
         v-model="fields.signInPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
-      form-msg(v-if='mockedConnector') default password is 1234567890
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
+      tm-form-msg(v-if='mockedConnector') default password is 1234567890
   .tm-session-footer
     tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
@@ -28,16 +28,20 @@
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 export default {
   name: "tm-session-sign-in",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct
   },
   data: () => ({
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/NiSessionSignUp.vue
index b8065f4e85..8d184b0324 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/NiSessionSignUp.vue
@@ -6,33 +6,33 @@
     a(@click="help"): i.material-icons help_outline
   .tm-session-main
     tm-form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
-      field#sign-up-name(
+      tm-field#sign-up-name(
         type="text"
         placeholder="Must be at least 5 characters"
         v-model="fields.signUpName")
-      form-msg(name='Name' type='required' v-if='!$v.fields.signUpName.required')
-      form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.signUpName.minLength')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.signUpName.required')
+      tm-form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.signUpName.minLength')
 
     tm-form-group(:error='$v.fields.signUpPassword.$error'
       field-id='sign-up-password' field-label='Password')
-      field#sign-up-password(
+      tm-field#sign-up-password(
         type="password"
         placeholder="Must be at least 10 characters"
         v-model="fields.signUpPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.signUpPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signUpPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.signUpPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signUpPassword.minLength')
 
     tm-form-group(:error='$v.fields.signUpPasswordConfirm.$error'
       field-id='sign-up-password-confirm' field-label='Confirm Password')
-      field#sign-up-password-confirm(
+      tm-field#sign-up-password-confirm(
         type="password"
         placeholder="Enter password again"
         v-model="fields.signUpPasswordConfirm")
-      form-msg(name='Password confirmation' type='match' v-if='!$v.fields.signUpPasswordConfirm.sameAsPassword')
+      tm-form-msg(name='Password confirmation' type='match' v-if='!$v.fields.signUpPasswordConfirm.sameAsPassword')
 
     tm-form-group(field-id='sign-up-seed' field-label='Seed Phrase')
       field-seed#sign-up-seed(v-model="fields.signUpSeed" disabled)
-      form-msg.sm
+      tm-form-msg.sm
         | Please back up the seed phrase for this account. This seed phrase cannot be recovered.
 
     tm-form-group(field-id="sign-up-warning" field-label=''
@@ -42,7 +42,7 @@
           input#sign-up-warning(type="checkbox" v-model="fields.signUpWarning")
         label.tm-field-checkbox-label(for="sign-up-warning")
           | I have securely written down my seed. I understand that lost seeds cannot be recovered.
-      form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
+      tm-form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
 
     tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
@@ -59,18 +59,22 @@
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import { TmBtn, TmFormGroup, TmFormStruct } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 import FieldSeed from "common/NiFieldSeed"
-import FormMsg from "common/NiFormMsg"
 export default {
   name: "tm-session-sign-up",
   components: {
     TmBtn,
-    Field,
+    TmField,
     FieldSeed,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct
   },
   data: () => ({
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index 4d7b48a4af..1939e1a436 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -4,14 +4,14 @@ tm-page(title="Preferences")
 
   tm-part(title='Settings')
     tm-list-item(type="field" title="Select network to connect to")
-      field#select-network(
+      tm-field#select-network(
         type="select"
         v-model="networkSelectActive"
         :options="networkSelectOptions"
         placeholder="Select network..."
         @change.native="setMockedConnector")
     tm-list-item(type="field" title="Select theme")
-      field#select-theme(
+      tm-field#select-theme(
         type="select"
         v-model="themeSelectActive"
         :options="themeSelectOptions"
@@ -25,7 +25,7 @@ tm-page(title="Preferences")
     tm-list-item(type="field"
       title="Automatically send usage statistics and crash reports"
       subtitle="to the Voyager development team")
-      field(
+      tm-field(
         type="toggle"
         :style="{margin:'1em auto 0 auto'}"
         :options=`{
@@ -45,15 +45,14 @@ tm-page(title="Preferences")
 
 <script>
 import { mapGetters } from "vuex"
-import Field from "@nylira/vue-field"
-import { TmListItem, TmBtn, TmPage, TmPart } from "@tendermint/ui"
+import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 
 export default {
   name: "page-preferences",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmListItem,
     TmPage,
     TmPart,
diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/VrToolBar.vue
index 445b951c4e..db5cc60ffb 100644
--- a/app/src/renderer/components/common/VrToolBar.vue
+++ b/app/src/renderer/components/common/VrToolBar.vue
@@ -16,9 +16,6 @@ export default {
   components: {
     TmToolBar
   },
-  mounted() {
-    console.log("TmToolBar", this)
-  },
   methods: {
     enableModalHelp() {
       this.$store.commit("setModalHelp", true)
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 5e6612d1ff..16eef845dc 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -6,24 +6,24 @@ tm-page(title="Proposal: Adjust Parameters")
   tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      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')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      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")
@@ -33,17 +33,22 @@ tm-page(title="Proposal: Adjust Parameters")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 0263daaaf9..894b6c002c 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -6,24 +6,24 @@ tm-page(title="Proposal: Amend Constitution")
   tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      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')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      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")
@@ -33,17 +33,22 @@ tm-page(title="Proposal: Amend Constitution")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index bc27a71610..fa0ab96a35 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -6,24 +6,24 @@ tm-page(title="Proposal: Create Atoms")
   tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      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')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      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")
@@ -33,17 +33,22 @@ tm-page(title="Proposal: Create Atoms")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 5640cc5375..c55be28cba 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -6,24 +6,24 @@ tm-page(title="Proposal: Freeform Text")
   tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      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')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      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")
@@ -33,17 +33,23 @@ tm-page(title="Proposal: Freeform Text")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-text",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     ToolBar
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index d12d92a9a2..e28b1ef59f 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -6,24 +6,24 @@ tm-page(title="Proposal: Upgrade Code")
   tm-form-struct(:submit="onSubmit")
     tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      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')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      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")
@@ -33,17 +33,23 @@ tm-page(title="Proposal: Upgrade Code")
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import { TmBtn, TmFormGroup, TmFormStruct, TmPage } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
-import FormMsg from "common/NiFormMsg"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
     TmBtn,
-    Field,
+    TmField,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     ToolBar
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 8c6b958fe2..a809226bc1 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -15,14 +15,14 @@ tm-page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="unbondedAtomsDeltaPct !== '0%'") {{ unbondedAtomsDeltaPct }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(newUnbondedAtoms)")
         .bond-value
           label.bond-delta
             span(v-if="unbondedAtomsDelta !== 0") {{ unbondedAtomsDelta }}
-          field.bond-value__input#new-unbonded-atoms(
+          tm-field.bond-value__input#new-unbonded-atoms(
             disabled
             type="number"
             placeholder="Atoms"
@@ -45,14 +45,14 @@ tm-page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="d.deltaAtomsPercent !== '0%'") {{ d.deltaAtomsPercent }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(d.atoms)")
         .bond-value
           label.bond-delta
             span(v-if="d.deltaAtoms !== 0") {{ d.deltaAtoms }}
-          field.bond-value__input(
+          tm-field.bond-value__input(
             type="number"
             placeholder="Atoms"
             step="1"
@@ -61,11 +61,11 @@ tm-page.page-bond(:title="`Bond ${denom}`")
             v-model.number="d.atoms"
             @change.native="limitMax(d, $event)")
 
-      form-msg(name="Atoms" type="required"
+      tm-form-msg(name="Atoms" type="required"
         v-if="!$v.fields.delegates.$each[index].atoms.required")
-      form-msg(name="Atoms" type="numeric"
+      tm-form-msg(name="Atoms" type="numeric"
         v-if="!$v.fields.delegates.$each[index].atoms.numeric")
-      form-msg(name="Atoms" type="between" :min="minimumAtoms" :max="$v.fields.delegates.$each[index].atoms.$params.between.max"
+      tm-form-msg(name="Atoms" type="between" :min="minimumAtoms" :max="$v.fields.delegates.$each[index].atoms.$params.between.max"
         v-if="!$v.fields.delegates.$each[index].atoms.between")
 
     .bond-group.bond-group--unbonding(
@@ -84,14 +84,14 @@ tm-page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="newUnbondingAtomsDeltaPct !== '0%'") {{ newUnbondingAtomsDeltaPct }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(newUnbondingAtoms)")
         .bond-value
           label.bond-delta
             span(v-if="newUnbondingAtomsDelta !== 0") {{ newUnbondingAtomsDelta }}
-          field.bond-value__input#new-unbonding-atoms(
+          tm-field.bond-value__input#new-unbonding-atoms(
             disabled
             type="number"
             placeholder="Atoms"
@@ -104,7 +104,7 @@ tm-page.page-bond(:title="`Bond ${denom}`")
           input#bond-confirm(type="checkbox" v-model="fields.bondConfirm")
         label.tm-field-checkbox-label(for="bond-confirm")
           | Yes, update my bonds. I understand unbonding will take 30 days.
-      form-msg(name="Bonding Confirmation" type='required'
+      tm-form-msg(name="Bonding Confirmation" type='required'
         v-if='!$v.fields.bondConfirm.required')
 
     div(slot='footer')
@@ -122,20 +122,21 @@ import {
   TmFormGroup,
   TmFormStruct,
   TmPage,
-  TmPart
+  TmPart,
+  TmField,
+  TmFormMsg
 } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
+
 import FieldAddon from "common/NiFieldAddon"
-import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
 export default {
   name: "page-bond",
   components: {
     TmBtn,
-    Field,
+    TmField,
     FieldAddon,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     TmPart,
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index b1168d1fb2..035a8412c1 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -34,7 +34,7 @@ import { TmBtn, TmPage } from "@tendermint/ui"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import DataLoading from "common/NiDataLoading"
-import Field from "@nylira/vue-field"
+
 import ModalSearch from "common/NiModalSearch"
 import PanelSort from "staking/PanelSort"
 import ToolBar from "common/VrToolBar"
@@ -46,7 +46,6 @@ export default {
     DataEmpty,
     DataEmptySearch,
     DataLoading,
-    Field,
     ModalSearch,
     TmPage,
     PanelSort,
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index ec1f7d88f6..da2fa1d98e 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -5,42 +5,42 @@ tm-page(title='Send')
     tm-part(title='Denomination Options')
       tm-form-group(:error='$v.fields.denom.$error'
         field-id='send-denomination' field-label='Denomination')
-        field#send-denomination(
+        tm-field#send-denomination(
           type="select"
           v-model="fields.denom"
           :options="denominations"
           placeholder="Select token...")
-        form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
+        tm-form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
 
     tm-part(title='Transaction Details')
       tm-form-group(:error='$v.fields.zoneId.$error'
         v-if="config.devMode"
         field-id='send-zone-id' field-label='Zone ID')
-        field#send-zone-id(
+        tm-field#send-zone-id(
           type="select"
           v-model="fields.zoneId"
           :options="zoneIds"
           placeholder="Select zone...")
-        form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
+        tm-form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
       tm-form-group(:error='$v.fields.address.$error'
         field-id='send-address' field-label='Send To')
         tm-field-group
-          field#send-address(
+          tm-field#send-address(
             type='text'
             v-model='fields.address'
             placeholder='Address')
-        form-msg(name='Address' type='required' v-if='!$v.fields.address.required')
-        form-msg(name='Address' type='bech32' :body="bech32error" v-else-if='!$v.fields.address.bech32Validate')
+        tm-form-msg(name='Address' type='required' v-if='!$v.fields.address.required')
+        tm-form-msg(name='Address' type='bech32' :body="bech32error" v-else-if='!$v.fields.address.bech32Validate')
 
       tm-form-group(:error='$v.fields.amount.$error'
         field-id='send-amount' field-label='Amount')
         tm-field-group
-          field#send-amount(
+          tm-field#send-amount(
             type='number'
             v-model='fields.amount'
             placeholder='Amount')
-        form-msg(name='Amount' type='required' v-if='!$v.fields.amount.required')
-        form-msg(name='Amount' type='between' :min='max ? 1 : 0' :max='max'
+        tm-form-msg(name='Amount' type='required' v-if='!$v.fields.amount.required')
+        tm-form-msg(name='Amount' type='between' :min='max ? 1 : 0' :max='max'
           v-if='!$v.fields.amount.between')
 
     div(slot='footer')
@@ -59,20 +59,21 @@ import {
   TmFormGroup,
   TmFormStruct,
   TmPage,
-  TmPart
+  TmPart,
+  TmField,
+  TmFormMsg
 } from "@tendermint/ui"
-import Field from "@nylira/vue-field"
+
 import FieldAddon from "common/NiFieldAddon"
-import FormMsg from "common/NiFormMsg"
 import ToolBar from "common/VrToolBar"
 export default {
   components: {
     TmBtn,
-    Field,
+    TmField,
     FieldAddon,
     TmFieldGroup,
     TmFormGroup,
-    FormMsg,
+    TmFormMsg,
     TmFormStruct,
     TmPage,
     TmPart,
diff --git a/jest.config.js b/jest.config.js
index bc8054f03f..9b588ce855 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -14,14 +14,14 @@ module.exports = {
     "^wallet/(.*)$": "<rootDir>/app/src/renderer/components/wallet/$1",
     "^variables$": "<rootDir>/app/src/renderer/styles/variables.styl"
   },
+
   transform: {
-    ".*.vue$": "jest-vue-preprocessor",
-    ".*.js$": "babel-jest"
+    ".*\\.vue$": "<rootDir>/node_modules/jest-vue-preprocessor",
+    ".*\\.js$": "<rootDir>/node_modules/babel-jest"
   },
-  transformIgnorePatterns: [
-    "/node_modules/(?!.*vue$)",
-    "/node_modules/(?!@tendermint-ui).+\\.js$"
-  ],
+
+  transformIgnorePatterns: ["node_modules/(?!@tendermint/ui|.*vue)"],
+
   collectCoverage: true,
   mapCoverage: true,
   coverageDirectory: "./test/unit/coverage",
diff --git a/test/unit/specs/components/common/NiFormMsg.spec.js b/test/unit/specs/components/common/NiFormMsg.spec.js
deleted file mode 100644
index 42a8ab22aa..0000000000
--- a/test/unit/specs/components/common/NiFormMsg.spec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiFormMsg from "common/NiFormMsg"
-
-describe("NiFormMsg", () => {
-  let wrapper
-  let propsData = [
-    {
-      type: "length",
-      body: "",
-      name: "Password",
-      min: 16,
-      max: 255,
-      length: "",
-      error: "Password must be between 16 and 255 characters"
-    },
-    {
-      type: "words16",
-      name: "Seed",
-      error: "Seed phrase must be 16 words"
-    },
-    {
-      type: "alphaNum",
-      name: "Asdf",
-      error: "Asdf must contain only alphanumeric characters"
-    },
-    {
-      type: "numeric",
-      name: "Asdf",
-      error: "Asdf must contain only numerals"
-    },
-    {
-      type: "between",
-      name: "Asdf",
-      min: 16,
-      max: 255,
-      error: "Asdf must be between 16 and 255"
-    },
-    {
-      type: "date",
-      name: "Asdf",
-      error: "Asdf must be a valid date"
-    },
-    {
-      type: "datetime",
-      name: "Asdf",
-      error: "Asdf must be a valid date and time"
-    },
-    {
-      type: "exactLength",
-      name: "Asdf",
-      length: 16,
-      error: "Asdf must be exactly 16 characters"
-    },
-    {
-      type: "ipAddress",
-      name: "Asdf",
-      error: "Asdf must be a valid IPv4 or IPv6 address"
-    },
-    {
-      type: "minLength",
-      name: "Asdf",
-      min: 2,
-      error: "Asdf must be longer than 2 characters"
-    },
-    {
-      type: "maxLength",
-      name: "Asdf",
-      max: 255,
-      error: "Asdf must be shorter than 255 characters"
-    },
-    {
-      type: "match",
-      name: "Asdf",
-      error: "Asdf must match"
-    },
-    {
-      type: "required",
-      name: "Asdf",
-      error: "Asdf is required"
-    },
-    {
-      type: "url",
-      name: "Asdf",
-      error: "Asdf must be a valid URL (http:// required)"
-    },
-    {
-      type: "asdf",
-      name: "Asdf",
-      error: "Asdf must be valid"
-    }
-  ]
-
-  beforeEach(() => {
-    wrapper = mount(NiFormMsg, { propsData: propsData[0] })
-  })
-  for (let i = 1; i < propsData.length; i++) {}
-
-  it("has a type from props", () => {
-    expect(wrapper.vm.type).toBe("length")
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  for (let i = 0; i < propsData.length; i++) {
-    it("shows correct message for " + propsData[i].type, () => {
-      wrapper.setData(propsData[i])
-      expect(
-        wrapper
-          .find(".tm-form-msg")
-          .text()
-          .trim()
-      ).toContain(propsData[i].error)
-    })
-  }
-})
diff --git a/test/unit/specs/components/common/NiUserPane.spec.js b/test/unit/specs/components/common/NiUserPane.spec.js
index 918b21696d..d5eb860ef5 100644
--- a/test/unit/specs/components/common/NiUserPane.spec.js
+++ b/test/unit/specs/components/common/NiUserPane.spec.js
@@ -1,5 +1,5 @@
 import NiUserPane from "common/NiUserPane"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 import setup from "../../../helpers/vuex-setup"
 
 describe("NiUserPane", () => {
@@ -33,7 +33,7 @@ describe("NiUserPane", () => {
   })
 
   it("should redirect to the preferences page if signed in", () => {
-    wrapper.find(ListItem).trigger("click")
+    wrapper.find(TmListItem).trigger("click")
     expect(router.currentRoute.path).toBe("/preferences")
   })
 })
diff --git a/test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap
new file mode 100644
index 0000000000..07b71881da
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VrToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;

From cfc7d080a0a4dd556124221b5bd40da865180b96 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 21 Jun 2018 17:40:09 +0200
Subject: [PATCH 21/31] unit tests pass

---
 .../renderer/components/common/VrToolBar.vue  |   3 +
 .../renderer/components/wallet/PageWallet.vue |   5 +-
 .../common/NISessionAccountDelete.spec.js     |   1 +
 .../components/common/NISessionSignUp.spec.js |   1 +
 .../common/NiConnectedNetwork.spec.js         |   1 +
 .../components/common/NiModalHelp.spec.js     |   1 +
 .../specs/components/common/Page404.spec.js   |   9 +-
 .../components/common/PagePreferences.spec.js |   4 +-
 .../specs/components/common/VrToolBar.spec.js |   3 +
 .../NISessionSignIn.spec.js.snap              |   4 +-
 .../__snapshots__/NiBarDiscrete.spec.js.snap  |   9 -
 .../__snapshots__/NiDataMsg.spec.js.snap      |  17 -
 .../__snapshots__/NiFormMsg.spec.js.snap      |   7 -
 .../__snapshots__/NiFormStruct.spec.js.snap   |  28 --
 .../__snapshots__/NiListItem.spec.js.snap     | 392 ------------------
 .../__snapshots__/NiToolBar.spec.js.snap      |   3 -
 .../PagePreferences.spec.js.snap              |  57 +--
 .../components/monitor/PageBlock.spec.js      |   4 +-
 .../components/monitor/PageBlocks.spec.js     |   4 +-
 .../__snapshots__/PageBlock.spec.js.snap      |   5 +-
 .../__snapshots__/PageBlocks.spec.js.snap     |   5 +-
 .../specs/components/staking/PageBond.spec.js |   4 +-
 .../components/staking/PageDelegate.spec.js   |   4 +-
 .../components/staking/PageStaking.spec.js    |   4 +-
 .../__snapshots__/PageBond.spec.js.snap       |  49 +--
 .../__snapshots__/PageDelegate.spec.js.snap   |  49 +--
 .../__snapshots__/PageStaking.spec.js.snap    |  55 ++-
 .../specs/components/wallet/PageSend.spec.js  |  11 +-
 .../wallet/PageTransactions.spec.js           |   4 +-
 .../components/wallet/PageWallet.spec.js      |  11 +-
 .../__snapshots__/PageSend.spec.js.snap       | 342 +++++++--------
 .../PageTransactions.spec.js.snap             | 100 ++---
 .../__snapshots__/PageWallet.spec.js.snap     | 100 ++---
 33 files changed, 447 insertions(+), 849 deletions(-)
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap

diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/VrToolBar.vue
index db5cc60ffb..abd4b3f757 100644
--- a/app/src/renderer/components/common/VrToolBar.vue
+++ b/app/src/renderer/components/common/VrToolBar.vue
@@ -16,6 +16,9 @@ export default {
   components: {
     TmToolBar
   },
+  mounted() {
+    // console.log(TmToolBar)
+  },
   methods: {
     enableModalHelp() {
       this.$store.commit("setModalHelp", true)
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index 05b29aad35..fb62c0101a 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -15,6 +15,7 @@ tm-page(title='Wallet')
       :btn="'Receive'"
       :overflow="true"
       @click.native="copy")
+      btn-receive(slot="btn-receive")
 
   tm-part#part-available-balances(title="Available Balances")
     data-loading(v-if="wallet.balancesLoading")
@@ -46,6 +47,7 @@ import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import DataEmptySearch from "common/NiDataEmptySearch"
 import LiCopy from "common/NiLiCopy"
+import BtnReceive from "common/NiBtnReceive"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import ModalSearch from "common/NiModalSearch"
 import VrToolBar from "common/VrToolBar"
@@ -60,7 +62,8 @@ export default {
     ModalSearch,
     TmPage,
     TmPart,
-    VrToolBar
+    VrToolBar,
+    BtnReceive
   },
   computed: {
     ...mapGetters(["filters", "wallet", "committedDelegations", "config"]),
diff --git a/test/unit/specs/components/common/NISessionAccountDelete.spec.js b/test/unit/specs/components/common/NISessionAccountDelete.spec.js
index b5b280dd81..65d2346417 100644
--- a/test/unit/specs/components/common/NISessionAccountDelete.spec.js
+++ b/test/unit/specs/components/common/NISessionAccountDelete.spec.js
@@ -19,6 +19,7 @@ describe("NiSessionAccountDelete", () => {
     })
     store.commit = jest.fn()
     store.dispatch = jest.fn(async () => true)
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NISessionSignUp.spec.js b/test/unit/specs/components/common/NISessionSignUp.spec.js
index 5fa9835eca..21d6248d30 100644
--- a/test/unit/specs/components/common/NISessionSignUp.spec.js
+++ b/test/unit/specs/components/common/NISessionSignUp.spec.js
@@ -17,6 +17,7 @@ describe("NISessionSignUp", () => {
   })
 
   it("has the expected html structure", () => {
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/common/NiConnectedNetwork.spec.js b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
index d106cbabd1..f896a79ee8 100644
--- a/test/unit/specs/components/common/NiConnectedNetwork.spec.js
+++ b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
@@ -71,6 +71,7 @@ describe("NiConnectedNetwork", () => {
 
   it("has a connecting state", async () => {
     await store.commit("setConnected", false)
+    wrapper.update()
     expect(
       wrapper
         .find(
diff --git a/test/unit/specs/components/common/NiModalHelp.spec.js b/test/unit/specs/components/common/NiModalHelp.spec.js
index d619060c32..dfade60b03 100644
--- a/test/unit/specs/components/common/NiModalHelp.spec.js
+++ b/test/unit/specs/components/common/NiModalHelp.spec.js
@@ -10,6 +10,7 @@ describe("NiModalHelp", () => {
     wrapper = instance.wrapper
     store = instance.store
     store.commit("setModalHelp", true)
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/Page404.spec.js b/test/unit/specs/components/common/Page404.spec.js
index d52e66c87c..10d1d58f59 100644
--- a/test/unit/specs/components/common/Page404.spec.js
+++ b/test/unit/specs/components/common/Page404.spec.js
@@ -1,5 +1,6 @@
 import setup from "../../../helpers/vuex-setup"
 import Page404 from "renderer/components/common/Page404"
+import htmlBeautify from "html-beautify"
 
 describe("Page404", () => {
   let instance = setup()
@@ -8,9 +9,15 @@ describe("Page404", () => {
   beforeEach(() => {
     let test = instance.mount(Page404)
     wrapper = test.wrapper
+    wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
+    // console.log(wrapper.vm.$el)
+    // console.log(htmlBeautify(wrapper.html()))
+    // expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/common/PagePreferences.spec.js b/test/unit/specs/components/common/PagePreferences.spec.js
index 8368f2c771..9ea6b38c18 100644
--- a/test/unit/specs/components/common/PagePreferences.spec.js
+++ b/test/unit/specs/components/common/PagePreferences.spec.js
@@ -17,7 +17,9 @@ describe("PagePreferences", () => {
     })
   })
 
-  it("has the expected html structure if connected", () => {
+  it("has the expected html structure if connected", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
     expect(wrapper.vm.$el.outerHTML).toContain("Select network")
     expect(wrapper.vm.$el.outerHTML).toContain("Select theme")
diff --git a/test/unit/specs/components/common/VrToolBar.spec.js b/test/unit/specs/components/common/VrToolBar.spec.js
index 4672433d70..54c0edd797 100644
--- a/test/unit/specs/components/common/VrToolBar.spec.js
+++ b/test/unit/specs/components/common/VrToolBar.spec.js
@@ -9,6 +9,7 @@ describe("VrToolBar", () => {
     instance = mount(VrToolBar)
     wrapper = instance.wrapper
     store = instance.store
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
@@ -17,11 +18,13 @@ describe("VrToolBar", () => {
 
   it("sets the helper modal", () => {
     wrapper.vm.enableModalHelp()
+    wrapper.update()
     expect(store.state.config.modals.help.active).toBe(true)
   })
 
   it("call dispatch to sign the user out", () => {
     wrapper.vm.signOut()
+    wrapper.update()
     expect(store.dispatch).toHaveBeenCalledWith("signOut")
   })
 })
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
index c9ba3bb665..5c698fe0e8 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
@@ -18,7 +18,7 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
             <!---->
             <label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label>
             <div class=\\"tm-form-group__field\\">
-               <div class=\\"tm-select\\" id=\\"sign-in-name\\">
+               <div class=\\"ni-select\\" id=\\"sign-in-name\\">
                   <select class=\\"tm-field tm-field-select\\">
                   <option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">
                      Select account…
@@ -58,4 +58,4 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"tm-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
+exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"ni-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
deleted file mode 100644
index b52493e33b..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiBarDiscrete has the expected html structure 1`] = `
-"<div class=\\"tm-bar-discrete\\">
-   <div class=\\"tm-bar-discrete__container\\">
-      <div class=\\"tm-bar-discrete__edge\\"></div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
deleted file mode 100644
index 3891bbf385..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TmDataMsg has the expected html structure 1`] = `
-"<div class=\\"tm-data-msg\\">
-   <div class=\\"tm-data-msg__icon\\">
-      <i class=\\"material-icons\\">help</i>
-   </div>
-<div class=\\"tm-data-msg__text\\">
-   <div class=\\"tm-data-msg__title\\">
-      sOmEtHiNg Is HaPpEnIng!!!
-   </div>
-<div class=\\"tm-data-msg__subtitle\\">
-   Oh my! What could it be?
-</div>
-</div>
-</div>"
-`
diff --git a/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
deleted file mode 100644
index 2cc63e0d6a..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiFormMsg has the expected html structure 1`] = `
-"<div class=\\"tm-form-msg sm tm-form-msg--error\\">
-   Password must be between 16 and 255 characters
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
deleted file mode 100644
index 4d971934dd..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TmFormStruct has the expected html structure 1`] = `
-"<form class=\\"tm-form tm-form-narrow\\">
-   <div class=\\"tm-form-container\\">
-      <header class=\\"tm-form-header\\">
-         <div class=\\"tm-form-title\\">
-            <div class=\\"fake-title\\">
-               Fake Title
-            </div>
-</div>
-      <div class=\\"tm-form-subtitle\\">
-         <div class=\\"fake-subtitle\\">
-            Fake Subtitle
-         </div>
-</div>
-</header>
-   <main class=\\"tm-form-main\\">
-      <div class=\\"fake-fields\\"></div>
-</main>
-   <footer class=\\"tm-form-footer\\">
-      <div class=\\"fake-footer\\">
-         Fake Footer
-      </div>
-</footer>
-</div>
-</form>"
-`
diff --git a/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
deleted file mode 100644
index a2828bfafc..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
+++ /dev/null
@@ -1,392 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiListItem has the expected html structure 1`] = `<!---->`;
-
-exports[`NiListItem should append the fa-spin class 1`] = `
-<div
-  class="tm-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <i
-        class="material-icons fa-spin"
-      >
-        rotate_right
-      </i>
-    </div>
-    <div
-      class="tm-li-label"
-    >
-      <div
-        class="tm-li-title"
-      >
-        Connecting...
-      </div>
-      <div
-        class="tm-li-subtitle"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show a dd link 1`] = `
-<a
-  class="tm-li tm-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="tm-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show a description 1`] = `
-<a
-  class="tm-li tm-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="tm-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show a label 1`] = `
-<div
-  class="tm-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-label"
-    >
-      <div
-        class="tm-li-title"
-      >
-        Title
-      </div>
-      <div
-        class="tm-li-subtitle"
-      >
-        Subtitle
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show a router-link 1`] = `
-<router-link
-  class="tm-li tm-li-link v-enter v-enter-active"
-  name="proposal"
-  to="/location"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="tm-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</router-link>
-`;
-
-exports[`NiListItem should show a subtitle router link 1`] = `
-<router-link
-  class="tm-li tm-li-link v-enter v-enter-active"
-  name="proposal"
-  to="/location"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-label"
-    >
-      <div
-        class="tm-li-title"
-      >
-        
-      </div>
-      <div
-        class="tm-li-subtitle"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="tm-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</router-link>
-`;
-
-exports[`NiListItem should show a thumb 1`] = `
-<a
-  class="tm-li tm-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="tm-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show as dd text 1`] = `
-<div
-  class="tm-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show as text 1`] = `
-<div
-  class="tm-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-label"
-    >
-      <div
-        class="tm-li-title"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-subtitle"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show as text link 1`] = `
-<div
-  class="tm-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="tm-li-container"
-  >
-    <div
-      class="tm-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="tm-li-dl"
-    >
-      <div
-        class="tm-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="tm-li-dd"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
deleted file mode 100644
index 5541bb6494..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div>"`;
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 a3af272bce..dda453c7a2 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -41,34 +41,35 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -133,7 +134,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                 class="tm-li-input"
               >
                 <div
-                  class="tm-select"
+                  class="ni-select"
                   id="select-network"
                 >
                   <select
@@ -200,7 +201,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                 class="tm-li-input"
               >
                 <div
-                  class="tm-select"
+                  class="ni-select"
                   id="select-theme"
                 >
                   <select
@@ -319,11 +320,11 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                 class="tm-li-input"
               >
                 <label
-                  class="tm-toggle unchecked"
+                  class="ni-toggle unchecked"
                   style="margin: 1em auto 0px auto;"
                 >
                   <div
-                    class="tm-toggle-wrapper"
+                    class="ni-toggle-wrapper"
                   >
                     <span>
                        
diff --git a/test/unit/specs/components/monitor/PageBlock.spec.js b/test/unit/specs/components/monitor/PageBlock.spec.js
index 16eb9b5be2..15b5eb60b0 100644
--- a/test/unit/specs/components/monitor/PageBlock.spec.js
+++ b/test/unit/specs/components/monitor/PageBlock.spec.js
@@ -40,7 +40,9 @@ describe("PageBlock", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/monitor/PageBlocks.spec.js b/test/unit/specs/components/monitor/PageBlocks.spec.js
index aaef4497d5..1ca59673d6 100644
--- a/test/unit/specs/components/monitor/PageBlocks.spec.js
+++ b/test/unit/specs/components/monitor/PageBlocks.spec.js
@@ -46,7 +46,9 @@ describe("PageBlocks", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
index 76dd09495e..e4d7b15b2d 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
@@ -20,10 +20,9 @@ exports[`PageBlock has the expected html structure 1`] = `
             <div class=\\"tm-tool-bar\\">
                <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a href=\\"#/blocks/9\\" class=\\"\\"><i class=\\"material-icons\\">chevron_left</i></a><a href=\\"#/blocks/11\\" class=\\"\\"><i class=\\"material-icons\\">chevron_right</i></a>
+                     <a href=\\"#/blocks/9\\" class=\\"\\"><i class=\\"material-icons\\">chevron_left</i></a><a href=\\"#/blocks/11\\" class=\\"\\"><i class=\\"material-icons\\">chevron_right</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
index 9bdd244ccb..59b44622a1 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
@@ -20,10 +20,9 @@ exports[`PageBlocks has the expected html structure 1`] = `
             <div class=\\"tm-tool-bar\\">
                <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a><i class=\\"material-icons\\">search</i></a>
+                     <a><i class=\\"material-icons\\">search</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
diff --git a/test/unit/specs/components/staking/PageBond.spec.js b/test/unit/specs/components/staking/PageBond.spec.js
index 57e5f63baa..2eb9759564 100644
--- a/test/unit/specs/components/staking/PageBond.spec.js
+++ b/test/unit/specs/components/staking/PageBond.spec.js
@@ -45,7 +45,9 @@ describe("PageBond", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/staking/PageDelegate.spec.js b/test/unit/specs/components/staking/PageDelegate.spec.js
index 801e241221..abe60d1e06 100644
--- a/test/unit/specs/components/staking/PageDelegate.spec.js
+++ b/test/unit/specs/components/staking/PageDelegate.spec.js
@@ -30,7 +30,9 @@ describe("PageDelegate", () => {
     router.push("/staking/delegates/1a2b3c")
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/staking/PageStaking.spec.js b/test/unit/specs/components/staking/PageStaking.spec.js
index 89b09baaa2..1f545f0c3d 100644
--- a/test/unit/specs/components/staking/PageStaking.spec.js
+++ b/test/unit/specs/components/staking/PageStaking.spec.js
@@ -17,7 +17,9 @@ describe("PageStaking", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
index 0a1709d06e..4f0a922c45 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
@@ -41,34 +41,35 @@ exports[`PageBond has the expected html structure 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
index ef708c9240..b7d3aeca26 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
@@ -41,34 +41,35 @@ exports[`PageDelegate has the expected html structure 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </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 150dda1b53..ff58b07312 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -20,10 +20,9 @@ exports[`PageStaking has the expected html structure 1`] = `
             <div class=\\"tm-tool-bar\\">
                <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a>
+                     <a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
@@ -207,34 +206,34 @@ exports[`PageStaking should filter the delegates 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
diff --git a/test/unit/specs/components/wallet/PageSend.spec.js b/test/unit/specs/components/wallet/PageSend.spec.js
index 132ef50073..33a1a3428f 100644
--- a/test/unit/specs/components/wallet/PageSend.spec.js
+++ b/test/unit/specs/components/wallet/PageSend.spec.js
@@ -46,11 +46,14 @@ describe("PageSend", () => {
     store.commit("setNonce", 1)
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it("should populate the select options with denoms", () => {
+    wrapper.update()
     expect(
       wrapper
         .findAll("option")
@@ -72,6 +75,8 @@ describe("PageSend", () => {
   })
 
   it("should populate the select options with networks", () => {
+    wrapper.update()
+
     expect(
       wrapper
         .findAll("option")
@@ -102,6 +107,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
   it("should show bech32 error when address length is too short", async () => {
@@ -115,6 +121,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -129,6 +136,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
   it("should show bech32 error when alphanumeric is wrong", async () => {
@@ -142,6 +150,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/wallet/PageTransactions.spec.js b/test/unit/specs/components/wallet/PageTransactions.spec.js
index 5725afd2a5..27ce7cd4f1 100644
--- a/test/unit/specs/components/wallet/PageTransactions.spec.js
+++ b/test/unit/specs/components/wallet/PageTransactions.spec.js
@@ -24,7 +24,9 @@ describe("PageTransactions", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/wallet/PageWallet.spec.js b/test/unit/specs/components/wallet/PageWallet.spec.js
index a4ed369bd0..841c093035 100644
--- a/test/unit/specs/components/wallet/PageWallet.spec.js
+++ b/test/unit/specs/components/wallet/PageWallet.spec.js
@@ -31,7 +31,9 @@ describe("PageWallet", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -43,9 +45,10 @@ describe("PageWallet", () => {
     ])
   })
 
-  it("should filter the balances", () => {
+  it("should filter the balances", async () => {
     store.commit("setSearchVisible", ["balances", true])
     store.commit("setSearchQuery", ["balances", "atom"])
+    await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(["ATOM"])
     expect(wrapper.vm.$el).toMatchSnapshot()
@@ -101,7 +104,9 @@ describe("PageWallet", () => {
     ).toBe("Staked Balances")
   })
 
-  it("has shows the correct number of staked tokens", () => {
+  it("has shows the correct number of staked tokens", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(
       wrapper
         .find("#part-staked-balances .tm-li-dd")
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 e1f4146452..24d8521147 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -41,34 +41,35 @@ exports[`PageSend has the expected html structure 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -128,7 +129,7 @@ exports[`PageSend has the expected html structure 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -208,7 +209,7 @@ exports[`PageSend has the expected html structure 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
@@ -400,34 +401,35 @@ exports[`PageSend should show address required error 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -487,7 +489,7 @@ exports[`PageSend should show address required error 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -557,7 +559,7 @@ exports[`PageSend should show address required error 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
@@ -729,34 +731,35 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -816,7 +819,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -886,7 +889,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
@@ -1058,34 +1061,35 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1145,7 +1149,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -1215,7 +1219,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
@@ -1387,34 +1391,35 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1474,7 +1479,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -1544,7 +1549,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
@@ -1727,34 +1732,35 @@ exports[`PageSend should work without providing a default denom 1`] = `
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1814,7 +1820,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-denomination"
                     >
                       <select
@@ -1888,7 +1894,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                     class="tm-form-group__field"
                   >
                     <div
-                      class="tm-select"
+                      class="ni-select"
                       id="send-zone-id"
                     >
                       <select
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 9bfaef36ac..97833690fc 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -49,34 +49,34 @@ exports[`PageTransactions has the expected html structure 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -176,34 +176,34 @@ exports[`PageTransactions should filter the transactions 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
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 bdf39df982..94653ea25f 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -56,34 +56,34 @@ exports[`PageWallet has the expected html structure 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -456,34 +456,34 @@ exports[`PageWallet should filter the balances 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>

From 56577cb9f00ffa990b0218fee7d11adf79bcf995 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 21 Jun 2018 17:45:56 +0200
Subject: [PATCH 22/31] unit tests pass

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b11db8ac3..f6d05127db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 * Increased version of localtestnet used for testing to match gaia @faboweb
 * Fixed padding issue in main container @faboweb
+* Unit tests work with new components @okwme
 
 ## [0.7.0] - 2018-06-13
 

From a5cc2d60e45350be75e99ce48223dbd03c894257 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 21 Jun 2018 18:28:38 +0200
Subject: [PATCH 23/31] force cirlce to reinstall

---
 package.json |  2 +-
 yarn.lock    | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2d19a1003d..08b030789d 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@nylira/vue-field": "1.5.0",
     "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "https://github.com/tendermint/ui.git",
+    "@tendermint/ui": "https://github.com/tendermint/ui.git#",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 9ce049e0a0..4b8930f342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,10 +24,11 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@tendermint/ui@https://github.com/tendermint/ui.git":
-  version "0.2.3"
-  resolved "https://github.com/tendermint/ui.git#874eca7e20ad2acacc04195bb123ea3a610ab516"
+"@tendermint/ui@https://github.com/tendermint/ui.git#":
+  version "0.2.6"
+  resolved "https://github.com/tendermint/ui.git#3538219cc2bc4019778ab2866ca2405d2774fe33"
   dependencies:
+    cookieconsent "^3.0.6"
     moment "^2.22.2"
     perfect-scrollbar "^1.4.0"
     vue "^2.5.16"
@@ -1948,6 +1949,10 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+cookieconsent@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/cookieconsent/-/cookieconsent-3.0.6.tgz#147afa3e594e7b1a7826e49cb322aa0beee7b987"
+
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"

From 0dbc67c5b8c452a26b5c24476a3219266c023273 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Thu, 21 Jun 2018 18:39:08 +0200
Subject: [PATCH 24/31] fixes merge updates and hopefully forces circle to run
 yarn

---
 .../components/common/NiModalNoNodes.vue      |  8 ++++----
 .../common/NiConnectedNetwork.spec.js         |  3 ++-
 .../NiConnectedNetwork.spec.js.snap           | 20 +++++++++----------
 .../__snapshots__/NiModalNoNodes.spec.js.snap | 16 +++++++--------
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/app/src/renderer/components/common/NiModalNoNodes.vue b/app/src/renderer/components/common/NiModalNoNodes.vue
index 3f3d54b903..66162ffd19 100644
--- a/app/src/renderer/components/common/NiModalNoNodes.vue
+++ b/app/src/renderer/components/common/NiModalNoNodes.vue
@@ -5,13 +5,13 @@
     .ni-modal-error__title No nodes found
     .ni-modal-error__body All known nodes are offline or incompatible. You can retry to connect or switch to a demo connection so you can try out Voyager.
     .ni-modal-error__footer
-      btn#ni-modal-error__btn-retry(
+      tm-btn#ni-modal-error__btn-retry(
         size="lg"
         icon="autorenew"
         color="primary"
         value="Retry Connection"
         @click.native="retry")
-      btn#ni-modal-error__btn-mock(
+      tm-btn#ni-modal-error__btn-mock(
         size="lg"
         icon="pageview"
         value="Try Demo"
@@ -21,10 +21,10 @@
 <script>
 import { ipcRenderer } from "electron"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
   name: "modal-no-nodes",
-  components: { Btn },
+  components: { TmBtn },
   methods: {
     retry() {
       ipcRenderer.send("retry-connection")
diff --git a/test/unit/specs/components/common/NiConnectedNetwork.spec.js b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
index a45fb017f4..cababf3b5c 100644
--- a/test/unit/specs/components/common/NiConnectedNetwork.spec.js
+++ b/test/unit/specs/components/common/NiConnectedNetwork.spec.js
@@ -112,10 +112,11 @@ describe("NiConnectedNetwork", () => {
 
   it("should close the menu if clicking on switch to live network intent", async () => {
     store.commit("setActiveMenu", "app")
+    wrapper.update()
     expect(store.state.config.activeMenu).toBe("app")
     let spy = jest.spyOn(wrapper.vm, "closeMenu")
     wrapper.vm.$el
-      .querySelector("#ni-connected-network_preferences-link")
+      .querySelector("#tm-connected-network_preferences-link")
       .click()
     expect(spy).toHaveBeenCalled()
     expect(store.state.config.activeMenu).not.toBe("app")
diff --git a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
index 262c83f143..bd95ad391c 100644
--- a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
@@ -18,15 +18,15 @@ exports[`NiConnectedNetwork has the expected html structure 1`] = `
 
 exports[`NiConnectedNetwork shows the connected node 1`] = `
 <div
-  class="ni-connected-network"
-  id="ni-connected-network"
+  class="tm-connected-network"
+  id="tm-connected-network"
 >
   <div
-    class="ni-connected-network__connection"
+    class="tm-connected-network__connection"
   >
     <div
-      class="ni-connected-network__icon"
-      id="ni-connected-network__icon"
+      class="tm-connected-network__icon"
+      id="tm-connected-network__icon"
     >
       <i
         class="material-icons"
@@ -35,8 +35,8 @@ exports[`NiConnectedNetwork shows the connected node 1`] = `
       </i>
     </div>
     <div
-      class="ni-connected-network__string"
-      id="ni-connected-network__string"
+      class="tm-connected-network__string"
+      id="tm-connected-network__string"
     >
       <span
         class="desktop-only"
@@ -55,15 +55,15 @@ exports[`NiConnectedNetwork shows the connected node 1`] = `
       <a
         class="desktop-only router-link-exact-active router-link-active"
         href="#/preferences"
-        id="ni-connected-network_preferences-link"
+        id="tm-connected-network_preferences-link"
       >
          (change network)
       </a>
     </div>
   </div>
   <div
-    class="ni-connected-network__string"
-    id="ni-connected-network__block"
+    class="tm-connected-network__string"
+    id="tm-connected-network__block"
   >
     <span
       class="desktop-only"
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
index b39572c0e9..75cc811e67 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
@@ -30,42 +30,42 @@ exports[`NiModalNoNodes has the expected html structure 1`] = `
       class="ni-modal-error__footer"
     >
       <button
-        class="ni-btn"
+        class="tm-btn"
         id="ni-modal-error__btn-retry"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg ni-btn--primary"
+          class="tm-btn__container tm-btn--size-lg tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             autorenew
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Retry Connection
           </span>
         </span>
       </button>
       <button
-        class="ni-btn"
+        class="tm-btn"
         id="ni-modal-error__btn-mock"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg"
+          class="tm-btn__container tm-btn--size-lg"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             pageview
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Try Demo
           </span>

From 229c462c1fa4aef7b74c8a5f56096711bb7f8790 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 25 Jun 2018 11:04:20 +0200
Subject: [PATCH 25/31] tm-tm

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

diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/NiSessionSignIn.vue
index 2ba9a223ab..cbcd67ba2b 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/NiSessionSignIn.vue
@@ -118,7 +118,7 @@ export default {
 }
 </script>
 <style lang="stylus">
-.tm-tm-form-group
+.tm-form-group
   a
     cursor pointer
 </style>

From 1a805a22c2df62b4fcb9d1e8f8f08ab8d91da21c Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 25 Jun 2018 11:42:59 +0200
Subject: [PATCH 26/31] rename and feedback

---
 app/src/renderer/App.vue                      | 14 +--
 .../renderer/components/common/AppFooter.vue  |  2 +-
 .../renderer/components/common/AppMenu.vue    |  4 +-
 .../renderer/components/common/NiToolBar.vue  | 96 -------------------
 .../components/common/PagePreferences.vue     |  2 +-
 .../common/{NiBtnCopy.vue => TmBtnCopy.vue}   |  0
 .../{NiBtnReceive.vue => TmBtnReceive.vue}    |  0
 ...ctedNetwork.vue => TmConnectedNetwork.vue} |  0
 .../{NiDataEmpty.vue => TmDataEmpty.vue}      |  0
 ...aEmptySearch.vue => TmDataEmptySearch.vue} |  0
 .../{NiDataEmptyTx.vue => TmDataEmptyTx.vue}  |  0
 .../{NiDataError.vue => TmDataError.vue}      |  0
 .../{NiDataLoading.vue => TmDataLoading.vue}  |  0
 .../{NiFieldAddon.vue => TmFieldAddon.vue}    |  0
 .../{NiFieldSeed.vue => TmFieldSeed.vue}      |  0
 .../{NiFieldVote.vue => TmFieldVote.vue}      |  0
 ...iHardwareState.vue => TmHardwareState.vue} |  0
 .../common/{NiLiCopy.vue => TmLiCopy.vue}     |  2 +-
 .../{NiLiSession.vue => TmLiSession.vue}      |  0
 .../common/{NiModal.vue => TmModal.vue}       |  0
 .../{NiModalError.vue => TmModalError.vue}    |  0
 .../{NiModalHelp.vue => TmModalHelp.vue}      |  2 +-
 ...LCDApproval.vue => TmModalLCDApproval.vue} |  0
 .../{NiModalMenu.vue => TmModalMenu.vue}      |  0
 ...{NiModalNoNodes.vue => TmModalNoNodes.vue} |  0
 ...{NiModalReceive.vue => TmModalReceive.vue} |  4 +-
 .../{NiModalSearch.vue => TmModalSearch.vue}  |  0
 .../{NiOnboarding.vue => TmOnboarding.vue}    |  0
 .../common/{NiPart.vue => TmPart.vue}         |  0
 .../common/{NiSession.vue => TmSession.vue}   | 14 +--
 ...tDelete.vue => TmSessionAccountDelete.vue} |  0
 ...sionHardware.vue => TmSessionHardware.vue} |  2 +-
 ...iSessionImport.vue => TmSessionImport.vue} |  2 +-
 ...essionLoading.vue => TmSessionLoading.vue} |  0
 ...iSessionSignIn.vue => TmSessionSignIn.vue} |  0
 ...iSessionSignUp.vue => TmSessionSignUp.vue} |  2 +-
 ...essionWelcome.vue => TmSessionWelcome.vue} |  2 +-
 .../common/{VrToolBar.vue => TmToolBar.vue}   |  2 +-
 .../common/{NiUserPane.vue => TmUserPane.vue} |  0
 .../components/govern/PageProposal.vue        |  4 +-
 .../components/govern/PageProposals.vue       | 10 +-
 .../components/govern/PageProposalsNew.vue    |  2 +-
 .../govern/PageProposalsNewAdjust.vue         |  2 +-
 .../govern/PageProposalsNewAmend.vue          |  2 +-
 .../govern/PageProposalsNewCreate.vue         |  2 +-
 .../govern/PageProposalsNewText.vue           |  2 +-
 .../govern/PageProposalsNewUpgrade.vue        |  2 +-
 .../renderer/components/monitor/PageBlock.vue |  6 +-
 .../components/monitor/PageBlocks.vue         |  8 +-
 .../renderer/components/staking/PageBond.vue  |  4 +-
 .../components/staking/PageDelegate.vue       |  2 +-
 .../components/staking/PageStaking.vue        | 10 +-
 .../renderer/components/wallet/PageSend.vue   |  4 +-
 .../components/wallet/PageTransactions.vue    | 10 +-
 .../renderer/components/wallet/PageWallet.vue | 18 ++--
 .../{NiBtnCopy.spec.js => TmBtnCopy.spec.js}  |  6 +-
 ...tnReceive.spec.js => TmBtnReceive.spec.js} |  6 +-
 ...ork.spec.js => TmConnectedNetwork.spec.js} |  8 +-
 ...iDataEmpty.spec.js => TmDataEmpty.spec.js} |  6 +-
 ...arch.spec.js => TmDataEmptySearch.spec.js} |  6 +-
 ...aEmptyTx.spec.js => TmDataEmptyTx.spec.js} |  6 +-
 ...iDataError.spec.js => TmDataError.spec.js} |  6 +-
 ...aLoading.spec.js => TmDataLoading.spec.js} |  6 +-
 ...ieldAddon.spec.js => TmFieldAddon.spec.js} |  6 +-
 ...iFieldSeed.spec.js => TmFieldSeed.spec.js} |  6 +-
 ...iFieldVote.spec.js => TmFieldVote.spec.js} |  6 +-
 ...eState.spec.js => TmHardwareState.spec.js} |  6 +-
 .../{NiLiCopy.spec.js => TmLiCopy.spec.js}    |  6 +-
 ...iLiSession.spec.js => TmLiSession.spec.js} |  6 +-
 .../{NiModal.spec.js => TmModal.spec.js}      |  8 +-
 ...odalError.spec.js => TmModalError.spec.js} | 12 +--
 ...iModalHelp.spec.js => TmModalHelp.spec.js} |  6 +-
 ...val.spec.js => TmModalLCDApproval.spec.js} |  6 +-
 ...NoNodes.spec.js => TmModalNoNodes.spec.js} |  6 +-
 ...Receive.spec.js => TmModalReceive.spec.js} |  6 +-
 ...alSearch.spec.js => TmModalSearch.spec.js} |  6 +-
 ...nboarding.spec.js => TmOnboarding.spec.js} |  6 +-
 .../{NISession.spec.js => TmSession.spec.js}  |  6 +-
 ...spec.js => TmSessionAccountDelete.spec.js} |  6 +-
 ...ware.spec.js => TmSessionHardware.spec.js} |  2 +-
 ...Import.spec.js => TmSessionImport.spec.js} |  6 +-
 ...ading.spec.js => TmSessionLoading.spec.js} |  6 +-
 ...SignIn.spec.js => TmSessionSignIn.spec.js} |  8 +-
 ...SignUp.spec.js => TmSessionSignUp.spec.js} |  2 +-
 ...lcome.spec.js => TmSessionWelcome.spec.js} |  4 +-
 .../{VrToolBar.spec.js => TmToolBar.spec.js}  |  6 +-
 ...{NiUserPane.spec.js => TmUserPane.spec.js} |  6 +-
 .../__snapshots__/NiModalReceive.spec.js.snap |  5 -
 ...py.spec.js.snap => TmBtnCopy.spec.js.snap} |  2 +-
 ...spec.js.snap => TmBtnReceive.spec.js.snap} |  2 +-
 ...s.snap => TmConnectedNetwork.spec.js.snap} |  4 +-
 ....spec.js.snap => TmDataEmpty.spec.js.snap} |  2 +-
 ...js.snap => TmDataEmptySearch.spec.js.snap} |  2 +-
 ...pec.js.snap => TmDataEmptyTx.spec.js.snap} |  2 +-
 ....spec.js.snap => TmDataError.spec.js.snap} |  2 +-
 ...pec.js.snap => TmDataLoading.spec.js.snap} |  2 +-
 ...spec.js.snap => TmFieldAddon.spec.js.snap} |  2 +-
 ....spec.js.snap => TmFieldSeed.spec.js.snap} |  2 +-
 ....spec.js.snap => TmFieldVote.spec.js.snap} |  2 +-
 ...c.js.snap => TmHardwareState.spec.js.snap} |  2 +-
 ...opy.spec.js.snap => TmLiCopy.spec.js.snap} |  4 +-
 ....spec.js.snap => TmLiSession.spec.js.snap} |  2 +-
 ...odal.spec.js.snap => TmModal.spec.js.snap} |  2 +-
 ...spec.js.snap => TmModalError.spec.js.snap} |  2 +-
 ....spec.js.snap => TmModalHelp.spec.js.snap} |  4 +-
 ...s.snap => TmModalLCDApproval.spec.js.snap} |  2 +-
 ...ec.js.snap => TmModalNoNodes.spec.js.snap} |  2 +-
 .../__snapshots__/TmModalReceive.spec.js.snap |  5 +
 ...pec.js.snap => TmModalSearch.spec.js.snap} |  2 +-
 ...spec.js.snap => TmOnboarding.spec.js.snap} | 10 +-
 ...ap => TmSessionAccountDelete.spec.js.snap} |  2 +-
 ...js.snap => TmSessionHardware.spec.js.snap} |  0
 ...c.js.snap => TmSessionImport.spec.js.snap} |  2 +-
 ....js.snap => TmSessionLoading.spec.js.snap} |  2 +-
 ...c.js.snap => TmSessionSignIn.spec.js.snap} |  4 +-
 ...c.js.snap => TmSessionSignUp.spec.js.snap} |  0
 ....js.snap => TmSessionWelcome.spec.js.snap} |  0
 ...ar.spec.js.snap => TmToolBar.spec.js.snap} |  2 +-
 ...e.spec.js.snap => TmUserPane.spec.js.snap} |  2 +-
 119 files changed, 208 insertions(+), 304 deletions(-)
 delete mode 100644 app/src/renderer/components/common/NiToolBar.vue
 rename app/src/renderer/components/common/{NiBtnCopy.vue => TmBtnCopy.vue} (100%)
 rename app/src/renderer/components/common/{NiBtnReceive.vue => TmBtnReceive.vue} (100%)
 rename app/src/renderer/components/common/{NiConnectedNetwork.vue => TmConnectedNetwork.vue} (100%)
 rename app/src/renderer/components/common/{NiDataEmpty.vue => TmDataEmpty.vue} (100%)
 rename app/src/renderer/components/common/{NiDataEmptySearch.vue => TmDataEmptySearch.vue} (100%)
 rename app/src/renderer/components/common/{NiDataEmptyTx.vue => TmDataEmptyTx.vue} (100%)
 rename app/src/renderer/components/common/{NiDataError.vue => TmDataError.vue} (100%)
 rename app/src/renderer/components/common/{NiDataLoading.vue => TmDataLoading.vue} (100%)
 rename app/src/renderer/components/common/{NiFieldAddon.vue => TmFieldAddon.vue} (100%)
 rename app/src/renderer/components/common/{NiFieldSeed.vue => TmFieldSeed.vue} (100%)
 rename app/src/renderer/components/common/{NiFieldVote.vue => TmFieldVote.vue} (100%)
 rename app/src/renderer/components/common/{NiHardwareState.vue => TmHardwareState.vue} (100%)
 rename app/src/renderer/components/common/{NiLiCopy.vue => TmLiCopy.vue} (93%)
 rename app/src/renderer/components/common/{NiLiSession.vue => TmLiSession.vue} (100%)
 rename app/src/renderer/components/common/{NiModal.vue => TmModal.vue} (100%)
 rename app/src/renderer/components/common/{NiModalError.vue => TmModalError.vue} (100%)
 rename app/src/renderer/components/common/{NiModalHelp.vue => TmModalHelp.vue} (96%)
 rename app/src/renderer/components/common/{NiModalLCDApproval.vue => TmModalLCDApproval.vue} (100%)
 rename app/src/renderer/components/common/{NiModalMenu.vue => TmModalMenu.vue} (100%)
 rename app/src/renderer/components/common/{NiModalNoNodes.vue => TmModalNoNodes.vue} (100%)
 rename app/src/renderer/components/common/{NiModalReceive.vue => TmModalReceive.vue} (92%)
 rename app/src/renderer/components/common/{NiModalSearch.vue => TmModalSearch.vue} (100%)
 rename app/src/renderer/components/common/{NiOnboarding.vue => TmOnboarding.vue} (100%)
 rename app/src/renderer/components/common/{NiPart.vue => TmPart.vue} (100%)
 rename app/src/renderer/components/common/{NiSession.vue => TmSession.vue} (90%)
 rename app/src/renderer/components/common/{NiSessionAccountDelete.vue => TmSessionAccountDelete.vue} (100%)
 rename app/src/renderer/components/common/{NiSessionHardware.vue => TmSessionHardware.vue} (96%)
 rename app/src/renderer/components/common/{NiSessionImport.vue => TmSessionImport.vue} (99%)
 rename app/src/renderer/components/common/{NiSessionLoading.vue => TmSessionLoading.vue} (100%)
 rename app/src/renderer/components/common/{NiSessionSignIn.vue => TmSessionSignIn.vue} (100%)
 rename app/src/renderer/components/common/{NiSessionSignUp.vue => TmSessionSignUp.vue} (99%)
 rename app/src/renderer/components/common/{NiSessionWelcome.vue => TmSessionWelcome.vue} (97%)
 rename app/src/renderer/components/common/{VrToolBar.vue => TmToolBar.vue} (96%)
 rename app/src/renderer/components/common/{NiUserPane.vue => TmUserPane.vue} (100%)
 rename test/unit/specs/components/common/{NiBtnCopy.spec.js => TmBtnCopy.spec.js} (90%)
 rename test/unit/specs/components/common/{NiBtnReceive.spec.js => TmBtnReceive.spec.js} (76%)
 rename test/unit/specs/components/common/{NiConnectedNetwork.spec.js => TmConnectedNetwork.spec.js} (95%)
 rename test/unit/specs/components/common/{NiDataEmpty.spec.js => TmDataEmpty.spec.js} (86%)
 rename test/unit/specs/components/common/{NiDataEmptySearch.spec.js => TmDataEmptySearch.spec.js} (85%)
 rename test/unit/specs/components/common/{NiDataEmptyTx.spec.js => TmDataEmptyTx.spec.js} (87%)
 rename test/unit/specs/components/common/{NiDataError.spec.js => TmDataError.spec.js} (88%)
 rename test/unit/specs/components/common/{NiDataLoading.spec.js => TmDataLoading.spec.js} (88%)
 rename test/unit/specs/components/common/{NiFieldAddon.spec.js => TmFieldAddon.spec.js} (78%)
 rename test/unit/specs/components/common/{NiFieldSeed.spec.js => TmFieldSeed.spec.js} (83%)
 rename test/unit/specs/components/common/{NiFieldVote.spec.js => TmFieldVote.spec.js} (88%)
 rename test/unit/specs/components/common/{NiHardwareState.spec.js => TmHardwareState.spec.js} (83%)
 rename test/unit/specs/components/common/{NiLiCopy.spec.js => TmLiCopy.spec.js} (84%)
 rename test/unit/specs/components/common/{NiLiSession.spec.js => TmLiSession.spec.js} (84%)
 rename test/unit/specs/components/common/{NiModal.spec.js => TmModal.spec.js} (89%)
 rename test/unit/specs/components/common/{NiModalError.spec.js => TmModalError.spec.js} (91%)
 rename test/unit/specs/components/common/{NiModalHelp.spec.js => TmModalHelp.spec.js} (80%)
 rename test/unit/specs/components/common/{NiModalLCDApproval.spec.js => TmModalLCDApproval.spec.js} (85%)
 rename test/unit/specs/components/common/{NiModalNoNodes.spec.js => TmModalNoNodes.spec.js} (87%)
 rename test/unit/specs/components/common/{NiModalReceive.spec.js => TmModalReceive.spec.js} (80%)
 rename test/unit/specs/components/common/{NiModalSearch.spec.js => TmModalSearch.spec.js} (92%)
 rename test/unit/specs/components/common/{NiOnboarding.spec.js => TmOnboarding.spec.js} (95%)
 rename test/unit/specs/components/common/{NISession.spec.js => TmSession.spec.js} (95%)
 rename test/unit/specs/components/common/{NISessionAccountDelete.spec.js => TmSessionAccountDelete.spec.js} (94%)
 rename test/unit/specs/components/common/{NISessionHardware.spec.js => TmSessionHardware.spec.js} (96%)
 rename test/unit/specs/components/common/{NiSessionImport.spec.js => TmSessionImport.spec.js} (97%)
 rename test/unit/specs/components/common/{NISessionLoading.spec.js => TmSessionLoading.spec.js} (64%)
 rename test/unit/specs/components/common/{NISessionSignIn.spec.js => TmSessionSignIn.spec.js} (92%)
 rename test/unit/specs/components/common/{NISessionSignUp.spec.js => TmSessionSignUp.spec.js} (99%)
 rename test/unit/specs/components/common/{NISessionWelcome.spec.js => TmSessionWelcome.spec.js} (95%)
 rename test/unit/specs/components/common/{VrToolBar.spec.js => TmToolBar.spec.js} (86%)
 rename test/unit/specs/components/common/{NiUserPane.spec.js => TmUserPane.spec.js} (90%)
 delete mode 100644 test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap
 rename test/unit/specs/components/common/__snapshots__/{NiBtnCopy.spec.js.snap => TmBtnCopy.spec.js.snap} (80%)
 rename test/unit/specs/components/common/__snapshots__/{NiBtnReceive.spec.js.snap => TmBtnReceive.spec.js.snap} (82%)
 rename test/unit/specs/components/common/__snapshots__/{NiConnectedNetwork.spec.js.snap => TmConnectedNetwork.spec.js.snap} (94%)
 rename test/unit/specs/components/common/__snapshots__/{NiDataEmpty.spec.js.snap => TmDataEmpty.spec.js.snap} (86%)
 rename test/unit/specs/components/common/__snapshots__/{NiDataEmptySearch.spec.js.snap => TmDataEmptySearch.spec.js.snap} (87%)
 rename test/unit/specs/components/common/__snapshots__/{NiDataEmptyTx.spec.js.snap => TmDataEmptyTx.spec.js.snap} (90%)
 rename test/unit/specs/components/common/__snapshots__/{NiDataError.spec.js.snap => TmDataError.spec.js.snap} (90%)
 rename test/unit/specs/components/common/__snapshots__/{NiDataLoading.spec.js.snap => TmDataLoading.spec.js.snap} (87%)
 rename test/unit/specs/components/common/__snapshots__/{NiFieldAddon.spec.js.snap => TmFieldAddon.spec.js.snap} (69%)
 rename test/unit/specs/components/common/__snapshots__/{NiFieldSeed.spec.js.snap => TmFieldSeed.spec.js.snap} (73%)
 rename test/unit/specs/components/common/__snapshots__/{NiFieldVote.spec.js.snap => TmFieldVote.spec.js.snap} (90%)
 rename test/unit/specs/components/common/__snapshots__/{NiHardwareState.spec.js.snap => TmHardwareState.spec.js.snap} (80%)
 rename test/unit/specs/components/common/__snapshots__/{NiLiCopy.spec.js.snap => TmLiCopy.spec.js.snap} (89%)
 rename test/unit/specs/components/common/__snapshots__/{NiLiSession.spec.js.snap => TmLiSession.spec.js.snap} (87%)
 rename test/unit/specs/components/common/__snapshots__/{NiModal.spec.js.snap => TmModal.spec.js.snap} (89%)
 rename test/unit/specs/components/common/__snapshots__/{NiModalError.spec.js.snap => TmModalError.spec.js.snap} (94%)
 rename test/unit/specs/components/common/__snapshots__/{NiModalHelp.spec.js.snap => TmModalHelp.spec.js.snap} (95%)
 rename test/unit/specs/components/common/__snapshots__/{NiModalLCDApproval.spec.js.snap => TmModalLCDApproval.spec.js.snap} (96%)
 rename test/unit/specs/components/common/__snapshots__/{NiModalNoNodes.spec.js.snap => TmModalNoNodes.spec.js.snap} (96%)
 create mode 100644 test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap
 rename test/unit/specs/components/common/__snapshots__/{NiModalSearch.spec.js.snap => TmModalSearch.spec.js.snap} (93%)
 rename test/unit/specs/components/common/__snapshots__/{NiOnboarding.spec.js.snap => TmOnboarding.spec.js.snap} (96%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionAccountDelete.spec.js.snap => TmSessionAccountDelete.spec.js.snap} (97%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionHardware.spec.js.snap => TmSessionHardware.spec.js.snap} (100%)
 rename test/unit/specs/components/common/__snapshots__/{NiSessionImport.spec.js.snap => TmSessionImport.spec.js.snap} (98%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionLoading.spec.js.snap => TmSessionLoading.spec.js.snap} (85%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionSignIn.spec.js.snap => TmSessionSignIn.spec.js.snap} (96%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionSignUp.spec.js.snap => TmSessionSignUp.spec.js.snap} (100%)
 rename test/unit/specs/components/common/__snapshots__/{NISessionWelcome.spec.js.snap => TmSessionWelcome.spec.js.snap} (100%)
 rename test/unit/specs/components/common/__snapshots__/{VrToolBar.spec.js.snap => TmToolBar.spec.js.snap} (84%)
 rename test/unit/specs/components/common/__snapshots__/{NiUserPane.spec.js.snap => TmUserPane.spec.js.snap} (92%)

diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index efdcb97d94..8ebafecc56 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -20,13 +20,13 @@ import { mapGetters } from "vuex"
 import AppHeader from "common/AppHeader"
 import AppFooter from "common/AppFooter"
 import { TmNotifications } from "@tendermint/ui"
-import ModalError from "common/NiModalError"
-import ModalHelp from "common/NiModalHelp"
-import ModalLcdApproval from "common/NiModalLCDApproval"
-import ModalNoNodes from "common/NiModalNoNodes"
-import ModalReceive from "common/NiModalReceive"
-import Onboarding from "common/NiOnboarding"
-import Session from "common/NiSession"
+import ModalError from "common/TmModalError"
+import ModalHelp from "common/TmModalHelp"
+import ModalLcdApproval from "common/TmModalLCDApproval"
+import ModalNoNodes from "common/TmModalNoNodes"
+import ModalReceive from "common/TmModalReceive"
+import Onboarding from "common/TmOnboarding"
+import Session from "common/TmSession"
 import store from "./vuex/store"
 export default {
   name: "app",
diff --git a/app/src/renderer/components/common/AppFooter.vue b/app/src/renderer/components/common/AppFooter.vue
index 4487c86b0d..7f89adfbf9 100644
--- a/app/src/renderer/components/common/AppFooter.vue
+++ b/app/src/renderer/components/common/AppFooter.vue
@@ -3,7 +3,7 @@ footer.app-footer: connected-network
 </template>
 
 <script>
-import ConnectedNetwork from "common/NiConnectedNetwork"
+import ConnectedNetwork from "common/TmConnectedNetwork"
 export default {
   name: "app-footer",
   components: { ConnectedNetwork }
diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index 4ae72995f4..79adcb4707 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -35,9 +35,9 @@ menu.app-menu
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
-import ConnectedNetwork from "common/NiConnectedNetwork"
+import ConnectedNetwork from "common/TmConnectedNetwork"
 import { TmListItem } from "@tendermint/ui"
-import UserPane from "common/NiUserPane"
+import UserPane from "common/TmUserPane"
 export default {
   name: "app-menu",
   components: {
diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue
deleted file mode 100644
index 4b2536da6c..0000000000
--- a/app/src/renderer/components/common/NiToolBar.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template lang="pug">
-.tm-tool-bar
-  .tm-tool-bar-container
-    .main: slot
-    a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
-      i.material-icons arrow_back
-    a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
-      i.material-icons help_outline
-    a.sign-out(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
-      i.material-icons exit_to_app
-</template>
-
-<script>
-export default {
-  name: "tm-tool-bar",
-  methods: {
-    enableModalHelp() {
-      this.$store.commit("setModalHelp", true)
-    },
-    signOut() {
-      this.$store.dispatch("signOut")
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.tm-tool-bar-container
-  display flex
-
-  .main
-    flex 1
-    display flex
-    align-items center
-
-  a, i.material-icons
-    display flex
-    align-items center
-    justify-content center
-
-  a
-    padding 1rem
-
-    user-select none
-    cursor pointer
-
-    display flex
-    align-items center
-    justify-content center
-    position relative
-
-    i
-      color var(--txt)
-
-    i
-      font-size lg
-
-    &.router-link-active
-      i
-        color var(--bright)
-
-    &:hover:not([disabled])
-      background var(--app-fg)
-      i
-        color var(--bright)
-
-    &[disabled]
-      cursor default
-      i
-        color var(--dim)
-
-@media screen and (max-width: 1023px)
-  .tm-tool-bar
-    z-index z(toolBar)
-    position fixed
-    bottom 0
-    left 0
-    right 0
-
-  .tm-tool-bar-container
-    background var(--app-bg-alpha)
-    height 3rem + px
-    border-top px solid var(--bc)
-
-  .tm-page
-    padding-bottom 3rem
-
-@media screen and (min-width: 1024px)
-  .tm-tool-bar-container
-    .main
-      justify-content flex-end
-    a
-      margin-top 0.7rem
-</style>
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index 1939e1a436..3360f8d795 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -46,7 +46,7 @@ tm-page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 
 export default {
   name: "page-preferences",
diff --git a/app/src/renderer/components/common/NiBtnCopy.vue b/app/src/renderer/components/common/TmBtnCopy.vue
similarity index 100%
rename from app/src/renderer/components/common/NiBtnCopy.vue
rename to app/src/renderer/components/common/TmBtnCopy.vue
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/TmBtnReceive.vue
similarity index 100%
rename from app/src/renderer/components/common/NiBtnReceive.vue
rename to app/src/renderer/components/common/TmBtnReceive.vue
diff --git a/app/src/renderer/components/common/NiConnectedNetwork.vue b/app/src/renderer/components/common/TmConnectedNetwork.vue
similarity index 100%
rename from app/src/renderer/components/common/NiConnectedNetwork.vue
rename to app/src/renderer/components/common/TmConnectedNetwork.vue
diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/TmDataEmpty.vue
similarity index 100%
rename from app/src/renderer/components/common/NiDataEmpty.vue
rename to app/src/renderer/components/common/TmDataEmpty.vue
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/TmDataEmptySearch.vue
similarity index 100%
rename from app/src/renderer/components/common/NiDataEmptySearch.vue
rename to app/src/renderer/components/common/TmDataEmptySearch.vue
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/TmDataEmptyTx.vue
similarity index 100%
rename from app/src/renderer/components/common/NiDataEmptyTx.vue
rename to app/src/renderer/components/common/TmDataEmptyTx.vue
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/TmDataError.vue
similarity index 100%
rename from app/src/renderer/components/common/NiDataError.vue
rename to app/src/renderer/components/common/TmDataError.vue
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/TmDataLoading.vue
similarity index 100%
rename from app/src/renderer/components/common/NiDataLoading.vue
rename to app/src/renderer/components/common/TmDataLoading.vue
diff --git a/app/src/renderer/components/common/NiFieldAddon.vue b/app/src/renderer/components/common/TmFieldAddon.vue
similarity index 100%
rename from app/src/renderer/components/common/NiFieldAddon.vue
rename to app/src/renderer/components/common/TmFieldAddon.vue
diff --git a/app/src/renderer/components/common/NiFieldSeed.vue b/app/src/renderer/components/common/TmFieldSeed.vue
similarity index 100%
rename from app/src/renderer/components/common/NiFieldSeed.vue
rename to app/src/renderer/components/common/TmFieldSeed.vue
diff --git a/app/src/renderer/components/common/NiFieldVote.vue b/app/src/renderer/components/common/TmFieldVote.vue
similarity index 100%
rename from app/src/renderer/components/common/NiFieldVote.vue
rename to app/src/renderer/components/common/TmFieldVote.vue
diff --git a/app/src/renderer/components/common/NiHardwareState.vue b/app/src/renderer/components/common/TmHardwareState.vue
similarity index 100%
rename from app/src/renderer/components/common/NiHardwareState.vue
rename to app/src/renderer/components/common/TmHardwareState.vue
diff --git a/app/src/renderer/components/common/NiLiCopy.vue b/app/src/renderer/components/common/TmLiCopy.vue
similarity index 93%
rename from app/src/renderer/components/common/NiLiCopy.vue
rename to app/src/renderer/components/common/TmLiCopy.vue
index a8eb27cbd0..6382999837 100644
--- a/app/src/renderer/components/common/NiLiCopy.vue
+++ b/app/src/renderer/components/common/TmLiCopy.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import BtnCopy from "common/NiBtnCopy"
+import BtnCopy from "common/TmBtnCopy"
 export default {
   name: "tm-li-copy",
   components: { BtnCopy },
diff --git a/app/src/renderer/components/common/NiLiSession.vue b/app/src/renderer/components/common/TmLiSession.vue
similarity index 100%
rename from app/src/renderer/components/common/NiLiSession.vue
rename to app/src/renderer/components/common/TmLiSession.vue
diff --git a/app/src/renderer/components/common/NiModal.vue b/app/src/renderer/components/common/TmModal.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModal.vue
rename to app/src/renderer/components/common/TmModal.vue
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/TmModalError.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModalError.vue
rename to app/src/renderer/components/common/TmModalError.vue
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/TmModalHelp.vue
similarity index 96%
rename from app/src/renderer/components/common/NiModalHelp.vue
rename to app/src/renderer/components/common/TmModalHelp.vue
index 85bce8f68c..d5c1e2b09c 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/TmModalHelp.vue
@@ -12,7 +12,7 @@ modal.tm-modal-help(v-if="active" :close="close")
 
 <script>
 import { mapGetters } from "vuex"
-import Modal from "common/NiModal"
+import Modal from "common/TmModal"
 import { TmListItem } from "@tendermint/ui"
 export default {
   name: "tm-modal-help",
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/TmModalLCDApproval.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModalLCDApproval.vue
rename to app/src/renderer/components/common/TmModalLCDApproval.vue
diff --git a/app/src/renderer/components/common/NiModalMenu.vue b/app/src/renderer/components/common/TmModalMenu.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModalMenu.vue
rename to app/src/renderer/components/common/TmModalMenu.vue
diff --git a/app/src/renderer/components/common/NiModalNoNodes.vue b/app/src/renderer/components/common/TmModalNoNodes.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModalNoNodes.vue
rename to app/src/renderer/components/common/TmModalNoNodes.vue
diff --git a/app/src/renderer/components/common/NiModalReceive.vue b/app/src/renderer/components/common/TmModalReceive.vue
similarity index 92%
rename from app/src/renderer/components/common/NiModalReceive.vue
rename to app/src/renderer/components/common/TmModalReceive.vue
index 51a2432a91..43c78ca857 100644
--- a/app/src/renderer/components/common/NiModalReceive.vue
+++ b/app/src/renderer/components/common/TmModalReceive.vue
@@ -7,8 +7,8 @@ modal.tm-modal-receive(v-if="active" :close="close")
 
 <script>
 import { mapGetters } from "vuex"
-import LiCopy from "common/NiLiCopy"
-import Modal from "common/NiModal"
+import LiCopy from "common/TmLiCopy"
+import Modal from "common/TmModal"
 export default {
   name: "tm-modal-receive",
   props: ["value"],
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/TmModalSearch.vue
similarity index 100%
rename from app/src/renderer/components/common/NiModalSearch.vue
rename to app/src/renderer/components/common/TmModalSearch.vue
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/TmOnboarding.vue
similarity index 100%
rename from app/src/renderer/components/common/NiOnboarding.vue
rename to app/src/renderer/components/common/TmOnboarding.vue
diff --git a/app/src/renderer/components/common/NiPart.vue b/app/src/renderer/components/common/TmPart.vue
similarity index 100%
rename from app/src/renderer/components/common/NiPart.vue
rename to app/src/renderer/components/common/TmPart.vue
diff --git a/app/src/renderer/components/common/NiSession.vue b/app/src/renderer/components/common/TmSession.vue
similarity index 90%
rename from app/src/renderer/components/common/NiSession.vue
rename to app/src/renderer/components/common/TmSession.vue
index 80f0c3e752..3d2fe86a41 100644
--- a/app/src/renderer/components/common/NiSession.vue
+++ b/app/src/renderer/components/common/TmSession.vue
@@ -12,13 +12,13 @@
 
 <script>
 import { mapGetters } from "vuex"
-import SessionLoading from "common/NiSessionLoading"
-import SessionWelcome from "common/NiSessionWelcome"
-import SessionSignUp from "common/NiSessionSignUp"
-import SessionSignIn from "common/NiSessionSignIn"
-import SessionHardware from "common/NiSessionHardware"
-import SessionImport from "common/NiSessionImport"
-import SessionAccountDelete from "common/NiSessionAccountDelete"
+import SessionLoading from "common/TmSessionLoading"
+import SessionWelcome from "common/TmSessionWelcome"
+import SessionSignUp from "common/TmSessionSignUp"
+import SessionSignIn from "common/TmSessionSignIn"
+import SessionHardware from "common/TmSessionHardware"
+import SessionImport from "common/TmSessionImport"
+import SessionAccountDelete from "common/TmSessionAccountDelete"
 export default {
   name: "tm-session",
   components: {
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/TmSessionAccountDelete.vue
similarity index 100%
rename from app/src/renderer/components/common/NiSessionAccountDelete.vue
rename to app/src/renderer/components/common/TmSessionAccountDelete.vue
diff --git a/app/src/renderer/components/common/NiSessionHardware.vue b/app/src/renderer/components/common/TmSessionHardware.vue
similarity index 96%
rename from app/src/renderer/components/common/NiSessionHardware.vue
rename to app/src/renderer/components/common/TmSessionHardware.vue
index e3f9410801..47efd6b3d1 100644
--- a/app/src/renderer/components/common/NiSessionHardware.vue
+++ b/app/src/renderer/components/common/TmSessionHardware.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import HardwareState from "common/NiHardwareState"
+import HardwareState from "common/TmHardwareState"
 export default {
   name: "tm-session-hardware",
   components: { HardwareState },
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/TmSessionImport.vue
similarity index 99%
rename from app/src/renderer/components/common/NiSessionImport.vue
rename to app/src/renderer/components/common/TmSessionImport.vue
index 9e9c141a55..3177e3c0ee 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/TmSessionImport.vue
@@ -61,7 +61,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import FieldSeed from "common/NiFieldSeed"
+import FieldSeed from "common/TmFieldSeed"
 
 export default {
   name: "tm-session-import",
diff --git a/app/src/renderer/components/common/NiSessionLoading.vue b/app/src/renderer/components/common/TmSessionLoading.vue
similarity index 100%
rename from app/src/renderer/components/common/NiSessionLoading.vue
rename to app/src/renderer/components/common/TmSessionLoading.vue
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/TmSessionSignIn.vue
similarity index 100%
rename from app/src/renderer/components/common/NiSessionSignIn.vue
rename to app/src/renderer/components/common/TmSessionSignIn.vue
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/TmSessionSignUp.vue
similarity index 99%
rename from app/src/renderer/components/common/NiSessionSignUp.vue
rename to app/src/renderer/components/common/TmSessionSignUp.vue
index 8d184b0324..41d3f39562 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/TmSessionSignUp.vue
@@ -66,7 +66,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import FieldSeed from "common/NiFieldSeed"
+import FieldSeed from "common/TmFieldSeed"
 export default {
   name: "tm-session-sign-up",
   components: {
diff --git a/app/src/renderer/components/common/NiSessionWelcome.vue b/app/src/renderer/components/common/TmSessionWelcome.vue
similarity index 97%
rename from app/src/renderer/components/common/NiSessionWelcome.vue
rename to app/src/renderer/components/common/TmSessionWelcome.vue
index 70768890b8..64166fe45f 100644
--- a/app/src/renderer/components/common/NiSessionWelcome.vue
+++ b/app/src/renderer/components/common/TmSessionWelcome.vue
@@ -35,7 +35,7 @@
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import FundraiserWarning from "common/FundraiserWarning"
-import LiSession from "common/NiLiSession"
+import LiSession from "common/TmLiSession"
 export default {
   name: "tm-session-welcome",
   components: {
diff --git a/app/src/renderer/components/common/VrToolBar.vue b/app/src/renderer/components/common/TmToolBar.vue
similarity index 96%
rename from app/src/renderer/components/common/VrToolBar.vue
rename to app/src/renderer/components/common/TmToolBar.vue
index abd4b3f757..c2a1f6044a 100644
--- a/app/src/renderer/components/common/VrToolBar.vue
+++ b/app/src/renderer/components/common/TmToolBar.vue
@@ -12,7 +12,7 @@
 <script>
 import { TmToolBar } from "@tendermint/ui"
 export default {
-  name: "vr-tool-bar",
+  name: "vm-tool-bar",
   components: {
     TmToolBar
   },
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/TmUserPane.vue
similarity index 100%
rename from app/src/renderer/components/common/NiUserPane.vue
rename to app/src/renderer/components/common/TmUserPane.vue
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index b08ba33cbd..69c87a9df8 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -29,9 +29,9 @@ tm-page(:title='proposal.title')
 <script>
 import { mapGetters } from "vuex"
 import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
-import FieldVote from "common/NiFieldVote"
+import FieldVote from "common/TmFieldVote"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposal",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index ee4c95794b..941d723506 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -21,12 +21,12 @@ tm-page(title='Proposals')
 import { mapGetters } from "vuex"
 import { includes, orderBy } from "lodash"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-import DataEmpty from "common/NiDataEmpty"
-import DataEmptySearch from "common/NiDataEmptySearch"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
 import LiProposal from "govern/LiProposal"
-import ModalSearch from "common/NiModalSearch"
-import ToolBar from "common/VrToolBar"
+import ModalSearch from "common/TmModalSearch"
+import ToolBar from "common/TmToolBar"
 import { TmPage } from "@tendermint/ui"
 export default {
   name: "page-proposals",
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 0566dc5c55..a0650eae73 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -13,7 +13,7 @@ tm-page(title='New Proposal')
 
 <script>
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index 16eef845dc..76f01ecde6 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -41,7 +41,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 894b6c002c..c9f9175423 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -41,7 +41,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index fa0ab96a35..9132f4e835 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -41,7 +41,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index c55be28cba..02df66780f 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -42,7 +42,7 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-text",
   components: {
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index e28b1ef59f..d650d8b4d1 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -42,7 +42,7 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 3a0427057a..d74c4a8d0d 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -61,9 +61,9 @@ import { mapGetters } from "vuex"
 import moment from "moment"
 import num from "scripts/num"
 import LiTransaction from "wallet/LiTransaction"
-import DataLoading from "common/NiDataLoading"
-import DataEmpty from "common/NiDataEmpty"
-import ToolBar from "common/VrToolBar"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import ToolBar from "common/TmToolBar"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-block",
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 9d1ff1a484..b0cc25e8c7 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -30,10 +30,10 @@ import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
-import DataError from "common/NiDataError"
-import DataLoading from "common/NiDataLoading"
-import ToolBar from "common/VrToolBar"
-import ModalSearch from "common/NiModalSearch"
+import DataError from "common/TmDataError"
+import DataLoading from "common/TmDataLoading"
+import ToolBar from "common/TmToolBar"
+import ModalSearch from "common/TmModalSearch"
 export default {
   name: "page-blocks",
   components: {
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index a809226bc1..5046d5e38b 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -127,8 +127,8 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import FieldAddon from "common/NiFieldAddon"
-import ToolBar from "common/VrToolBar"
+import FieldAddon from "common/TmFieldAddon"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-bond",
   components: {
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index 1974b2c56c..b87c7eb725 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -19,7 +19,7 @@ tm-page(:title="delegateType + ' Profile'")
 import { mapGetters } from "vuex"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-delegate",
   components: {
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index 035a8412c1..42a4dff69c 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -31,13 +31,13 @@ import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
 import { TmBtn, TmPage } from "@tendermint/ui"
-import DataEmpty from "common/NiDataEmpty"
-import DataEmptySearch from "common/NiDataEmptySearch"
-import DataLoading from "common/NiDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import DataLoading from "common/TmDataLoading"
 
-import ModalSearch from "common/NiModalSearch"
+import ModalSearch from "common/TmModalSearch"
 import PanelSort from "staking/PanelSort"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-delegates",
   components: {
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index da2fa1d98e..00210d2a8c 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -64,8 +64,8 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import FieldAddon from "common/NiFieldAddon"
-import ToolBar from "common/VrToolBar"
+import FieldAddon from "common/TmFieldAddon"
+import ToolBar from "common/TmToolBar"
 export default {
   components: {
     TmBtn,
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 457853c901..5e2d99650d 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -23,13 +23,13 @@ import shortid from "shortid"
 import { mapGetters } from "vuex"
 import { includes, orderBy, uniqBy } from "lodash"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-import DataEmptySearch from "common/NiDataEmptySearch"
-import DataEmptyTx from "common/NiDataEmptyTx"
+import DataLoading from "common/TmDataLoading"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import DataEmptyTx from "common/TmDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
-import ModalSearch from "common/NiModalSearch"
+import ModalSearch from "common/TmModalSearch"
 import { TmPage } from "@tendermint/ui"
-import ToolBar from "common/VrToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-transactions",
   components: {
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index fb62c0101a..8024d288f7 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(title='Wallet')
   div(slot="menu")
-    vr-tool-bar
+    tm-tool-bar
       a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
         i.material-icons refresh
       a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
@@ -43,14 +43,14 @@ import { mapGetters } from "vuex"
 import { clipboard } from "electron"
 import { sum, includes, orderBy } from "lodash"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-import DataEmpty from "common/NiDataEmpty"
-import DataEmptySearch from "common/NiDataEmptySearch"
-import LiCopy from "common/NiLiCopy"
-import BtnReceive from "common/NiBtnReceive"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import LiCopy from "common/TmLiCopy"
+import BtnReceive from "common/TmBtnReceive"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
-import ModalSearch from "common/NiModalSearch"
-import VrToolBar from "common/VrToolBar"
+import ModalSearch from "common/TmModalSearch"
+import TmToolBar from "common/TmToolBar"
 export default {
   name: "page-wallet",
   components: {
@@ -62,7 +62,7 @@ export default {
     ModalSearch,
     TmPage,
     TmPart,
-    VrToolBar,
+    TmToolBar,
     BtnReceive
   },
   computed: {
diff --git a/test/unit/specs/components/common/NiBtnCopy.spec.js b/test/unit/specs/components/common/TmBtnCopy.spec.js
similarity index 90%
rename from test/unit/specs/components/common/NiBtnCopy.spec.js
rename to test/unit/specs/components/common/TmBtnCopy.spec.js
index 03227c0edf..336e0fc19e 100644
--- a/test/unit/specs/components/common/NiBtnCopy.spec.js
+++ b/test/unit/specs/components/common/TmBtnCopy.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiBtnCopy from "renderer/components/common/NiBtnCopy"
+import TmBtnCopy from "renderer/components/common/TmBtnCopy"
 
-describe("NiBtnCopy", () => {
+describe("TmBtnCopy", () => {
   let wrapper, store
   let instance = setup()
 
   beforeEach(() => {
-    let test = instance.mount(NiBtnCopy, {
+    let test = instance.mount(TmBtnCopy, {
       propsData: { value: "this is a test" }
     })
     wrapper = test.wrapper
diff --git a/test/unit/specs/components/common/NiBtnReceive.spec.js b/test/unit/specs/components/common/TmBtnReceive.spec.js
similarity index 76%
rename from test/unit/specs/components/common/NiBtnReceive.spec.js
rename to test/unit/specs/components/common/TmBtnReceive.spec.js
index 14aa42b7e4..ef8c6396e9 100644
--- a/test/unit/specs/components/common/NiBtnReceive.spec.js
+++ b/test/unit/specs/components/common/TmBtnReceive.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiBtnReceive from "renderer/components/common/NiBtnReceive"
+import TmBtnReceive from "renderer/components/common/TmBtnReceive"
 
-describe("NiBtnReceive", () => {
+describe("TmBtnReceive", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiBtnReceive)
+    let instance = mount(TmBtnReceive)
     wrapper = instance.wrapper
     store = instance.store
   })
diff --git a/test/unit/specs/components/common/NiConnectedNetwork.spec.js b/test/unit/specs/components/common/TmConnectedNetwork.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NiConnectedNetwork.spec.js
rename to test/unit/specs/components/common/TmConnectedNetwork.spec.js
index cababf3b5c..8505dc64d1 100644
--- a/test/unit/specs/components/common/NiConnectedNetwork.spec.js
+++ b/test/unit/specs/components/common/TmConnectedNetwork.spec.js
@@ -1,13 +1,13 @@
-import NiConnectedNetwork from "common/NiConnectedNetwork"
+import TmConnectedNetwork from "common/TmConnectedNetwork"
 import htmlBeautify from "html-beautify"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiConnectedNetwork", () => {
+describe("TmConnectedNetwork", () => {
   let wrapper, router, store, instance
   let { mount } = setup()
 
   beforeEach(async () => {
-    instance = mount(NiConnectedNetwork)
+    instance = mount(TmConnectedNetwork)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
@@ -97,7 +97,7 @@ describe("NiConnectedNetwork", () => {
   })
 
   it("shows the connected node", async () => {
-    instance = mount(NiConnectedNetwork)
+    instance = mount(TmConnectedNetwork)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
diff --git a/test/unit/specs/components/common/NiDataEmpty.spec.js b/test/unit/specs/components/common/TmDataEmpty.spec.js
similarity index 86%
rename from test/unit/specs/components/common/NiDataEmpty.spec.js
rename to test/unit/specs/components/common/TmDataEmpty.spec.js
index c2ff0dbac8..81a4002a66 100644
--- a/test/unit/specs/components/common/NiDataEmpty.spec.js
+++ b/test/unit/specs/components/common/TmDataEmpty.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmpty from "common/NiDataEmpty"
+import TmDataEmpty from "common/TmDataEmpty"
 
-describe("NiDataEmpty", () => {
+describe("TmDataEmpty", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmpty)
+    wrapper = mount(TmDataEmpty)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiDataEmptySearch.spec.js b/test/unit/specs/components/common/TmDataEmptySearch.spec.js
similarity index 85%
rename from test/unit/specs/components/common/NiDataEmptySearch.spec.js
rename to test/unit/specs/components/common/TmDataEmptySearch.spec.js
index 5465b03b48..442b39b119 100644
--- a/test/unit/specs/components/common/NiDataEmptySearch.spec.js
+++ b/test/unit/specs/components/common/TmDataEmptySearch.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmptySearch from "common/NiDataEmptySearch"
+import TmDataEmptySearch from "common/TmDataEmptySearch"
 
-describe("NiDataEmptySearch", () => {
+describe("TmDataEmptySearch", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmptySearch)
+    wrapper = mount(TmDataEmptySearch)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiDataEmptyTx.spec.js b/test/unit/specs/components/common/TmDataEmptyTx.spec.js
similarity index 87%
rename from test/unit/specs/components/common/NiDataEmptyTx.spec.js
rename to test/unit/specs/components/common/TmDataEmptyTx.spec.js
index 72fa3e4915..db194b613b 100644
--- a/test/unit/specs/components/common/NiDataEmptyTx.spec.js
+++ b/test/unit/specs/components/common/TmDataEmptyTx.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmptyTx from "common/NiDataEmptyTx"
+import TmDataEmptyTx from "common/TmDataEmptyTx"
 
-describe("NiDataEmptyTx", () => {
+describe("TmDataEmptyTx", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmptyTx)
+    wrapper = mount(TmDataEmptyTx)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiDataError.spec.js b/test/unit/specs/components/common/TmDataError.spec.js
similarity index 88%
rename from test/unit/specs/components/common/NiDataError.spec.js
rename to test/unit/specs/components/common/TmDataError.spec.js
index f3844cd064..5c364e5fe2 100644
--- a/test/unit/specs/components/common/NiDataError.spec.js
+++ b/test/unit/specs/components/common/TmDataError.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataError from "common/NiDataError"
+import TmDataError from "common/TmDataError"
 
-describe("NiDataError", () => {
+describe("TmDataError", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataError)
+    wrapper = mount(TmDataError)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiDataLoading.spec.js b/test/unit/specs/components/common/TmDataLoading.spec.js
similarity index 88%
rename from test/unit/specs/components/common/NiDataLoading.spec.js
rename to test/unit/specs/components/common/TmDataLoading.spec.js
index bf8a7fb9b6..3bfb7ab511 100644
--- a/test/unit/specs/components/common/NiDataLoading.spec.js
+++ b/test/unit/specs/components/common/TmDataLoading.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataLoading from "common/NiDataLoading"
+import TmDataLoading from "common/TmDataLoading"
 
-describe("NiDataLoading", () => {
+describe("TmDataLoading", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataLoading)
+    wrapper = mount(TmDataLoading)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiFieldAddon.spec.js b/test/unit/specs/components/common/TmFieldAddon.spec.js
similarity index 78%
rename from test/unit/specs/components/common/NiFieldAddon.spec.js
rename to test/unit/specs/components/common/TmFieldAddon.spec.js
index cdbbe0223c..8cf34f7637 100644
--- a/test/unit/specs/components/common/NiFieldAddon.spec.js
+++ b/test/unit/specs/components/common/TmFieldAddon.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldAddon from "common/NiFieldAddon"
+import TmFieldAddon from "common/TmFieldAddon"
 
-describe("NiFieldAddon", () => {
+describe("TmFieldAddon", () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = mount(NiFieldAddon, {
+    wrapper = mount(TmFieldAddon, {
       slots: { default: '<div class="fake-addon">ATOM</div>' }
     })
   })
diff --git a/test/unit/specs/components/common/NiFieldSeed.spec.js b/test/unit/specs/components/common/TmFieldSeed.spec.js
similarity index 83%
rename from test/unit/specs/components/common/NiFieldSeed.spec.js
rename to test/unit/specs/components/common/TmFieldSeed.spec.js
index 05e85b51a7..691282af62 100644
--- a/test/unit/specs/components/common/NiFieldSeed.spec.js
+++ b/test/unit/specs/components/common/TmFieldSeed.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldSeed from "common/NiFieldSeed"
+import TmFieldSeed from "common/TmFieldSeed"
 
-describe("NiFieldSeed", () => {
+describe("TmFieldSeed", () => {
   let wrapper
 
   let propsData = {
@@ -10,7 +10,7 @@ describe("NiFieldSeed", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiFieldSeed, { propsData })
+    wrapper = mount(TmFieldSeed, { propsData })
   })
 
   it("has a value from props", () => {
diff --git a/test/unit/specs/components/common/NiFieldVote.spec.js b/test/unit/specs/components/common/TmFieldVote.spec.js
similarity index 88%
rename from test/unit/specs/components/common/NiFieldVote.spec.js
rename to test/unit/specs/components/common/TmFieldVote.spec.js
index f3279432c7..ad1295f2ff 100644
--- a/test/unit/specs/components/common/NiFieldVote.spec.js
+++ b/test/unit/specs/components/common/TmFieldVote.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldVote from "common/NiFieldVote"
+import TmFieldVote from "common/TmFieldVote"
 
-describe("NiFieldVote", () => {
+describe("TmFieldVote", () => {
   let wrapper
 
   let propsData = {
@@ -14,7 +14,7 @@ describe("NiFieldVote", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiFieldVote, { propsData })
+    wrapper = mount(TmFieldVote, { propsData })
   })
 
   it("has a color from props", () => {
diff --git a/test/unit/specs/components/common/NiHardwareState.spec.js b/test/unit/specs/components/common/TmHardwareState.spec.js
similarity index 83%
rename from test/unit/specs/components/common/NiHardwareState.spec.js
rename to test/unit/specs/components/common/TmHardwareState.spec.js
index 3f18a2bc65..4f11fbc96d 100644
--- a/test/unit/specs/components/common/NiHardwareState.spec.js
+++ b/test/unit/specs/components/common/TmHardwareState.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiHardwareState from "common/NiHardwareState"
+import TmHardwareState from "common/TmHardwareState"
 
-describe("NiHardwareState", () => {
+describe("TmHardwareState", () => {
   let wrapper
 
   let propsData = {
@@ -12,7 +12,7 @@ describe("NiHardwareState", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiHardwareState, { propsData })
+    wrapper = mount(TmHardwareState, { propsData })
   })
 
   it("has an icon from props", () => {
diff --git a/test/unit/specs/components/common/NiLiCopy.spec.js b/test/unit/specs/components/common/TmLiCopy.spec.js
similarity index 84%
rename from test/unit/specs/components/common/NiLiCopy.spec.js
rename to test/unit/specs/components/common/TmLiCopy.spec.js
index 0cbbd05989..8ab27ab216 100644
--- a/test/unit/specs/components/common/NiLiCopy.spec.js
+++ b/test/unit/specs/components/common/TmLiCopy.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiLiCopy from "common/NiLiCopy"
+import TmLiCopy from "common/TmLiCopy"
 
-describe("NiLiCopy", () => {
+describe("TmLiCopy", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiLiCopy)
+    let instance = mount(TmLiCopy)
     wrapper = instance.wrapper
     store = instance.store
   })
diff --git a/test/unit/specs/components/common/NiLiSession.spec.js b/test/unit/specs/components/common/TmLiSession.spec.js
similarity index 84%
rename from test/unit/specs/components/common/NiLiSession.spec.js
rename to test/unit/specs/components/common/TmLiSession.spec.js
index a8a5154ff2..f591b75760 100644
--- a/test/unit/specs/components/common/NiLiSession.spec.js
+++ b/test/unit/specs/components/common/TmLiSession.spec.js
@@ -1,7 +1,7 @@
 import { shallow } from "@vue/test-utils"
-import NiLiSession from "common/NiLiSession"
+import TmLiSession from "common/TmLiSession"
 
-describe("NiLiSession", () => {
+describe("TmLiSession", () => {
   let wrapper
   let propsData = {
     icon: "mood",
@@ -9,7 +9,7 @@ describe("NiLiSession", () => {
     subtitle: "useful subtitle"
   }
   beforeEach(() => {
-    wrapper = shallow(NiLiSession, { propsData })
+    wrapper = shallow(TmLiSession, { propsData })
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiModal.spec.js b/test/unit/specs/components/common/TmModal.spec.js
similarity index 89%
rename from test/unit/specs/components/common/NiModal.spec.js
rename to test/unit/specs/components/common/TmModal.spec.js
index b6f886336f..cf17095fd5 100644
--- a/test/unit/specs/components/common/NiModal.spec.js
+++ b/test/unit/specs/components/common/TmModal.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
-import NiModal from "common/NiModal"
+import TmModal from "common/TmModal"
 
-describe("NiModal", () => {
+describe("TmModal", () => {
   let wrapper, close
 
   beforeEach(() => {
     close = jest.fn()
-    wrapper = mount(NiModal, {
+    wrapper = mount(TmModal, {
       propsData: {
         size: null,
         icon: null,
@@ -41,7 +41,7 @@ describe("NiModal", () => {
   })
 
   it("should use slots", () => {
-    wrapper = mount(NiModal, {
+    wrapper = mount(TmModal, {
       slots: {
         title: "<custom-title />",
         footer: "<custom-footer />"
diff --git a/test/unit/specs/components/common/NiModalError.spec.js b/test/unit/specs/components/common/TmModalError.spec.js
similarity index 91%
rename from test/unit/specs/components/common/NiModalError.spec.js
rename to test/unit/specs/components/common/TmModalError.spec.js
index 8f11e4498b..54a2e13f91 100644
--- a/test/unit/specs/components/common/NiModalError.spec.js
+++ b/test/unit/specs/components/common/TmModalError.spec.js
@@ -1,7 +1,7 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiModalError from "common/NiModalError"
+import TmModalError from "common/TmModalError"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -14,7 +14,7 @@ jest.mock("electron", () => ({
   }
 }))
 
-describe("NiModalError", () => {
+describe("TmModalError", () => {
   let wrapper
   let store = new Vuex.Store({
     getters: {
@@ -24,7 +24,7 @@ describe("NiModalError", () => {
   })
 
   beforeEach(() => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store
     })
@@ -44,7 +44,7 @@ describe("NiModalError", () => {
   })
 
   it("shows an icon if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { icon: "icon-x" }
@@ -67,7 +67,7 @@ describe("NiModalError", () => {
   })
 
   it("shows a title if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { title: "title-x" }
@@ -92,7 +92,7 @@ describe("NiModalError", () => {
   })
 
   it("shows a body if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { body: "body-x" }
diff --git a/test/unit/specs/components/common/NiModalHelp.spec.js b/test/unit/specs/components/common/TmModalHelp.spec.js
similarity index 80%
rename from test/unit/specs/components/common/NiModalHelp.spec.js
rename to test/unit/specs/components/common/TmModalHelp.spec.js
index dfade60b03..8a06f8f1d4 100644
--- a/test/unit/specs/components/common/NiModalHelp.spec.js
+++ b/test/unit/specs/components/common/TmModalHelp.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalHelp from "common/NiModalHelp"
+import TmModalHelp from "common/TmModalHelp"
 
-describe("NiModalHelp", () => {
+describe("TmModalHelp", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalHelp)
+    let instance = mount(TmModalHelp)
     wrapper = instance.wrapper
     store = instance.store
     store.commit("setModalHelp", true)
diff --git a/test/unit/specs/components/common/NiModalLCDApproval.spec.js b/test/unit/specs/components/common/TmModalLCDApproval.spec.js
similarity index 85%
rename from test/unit/specs/components/common/NiModalLCDApproval.spec.js
rename to test/unit/specs/components/common/TmModalLCDApproval.spec.js
index 20d5bace2b..54553db88f 100644
--- a/test/unit/specs/components/common/NiModalLCDApproval.spec.js
+++ b/test/unit/specs/components/common/TmModalLCDApproval.spec.js
@@ -1,13 +1,13 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalLCDApproval from "common/NiModalLCDApproval"
+import TmModalLCDApproval from "common/TmModalLCDApproval"
 
 let instance = setup()
 
-describe("NiModalLCDApproval", () => {
+describe("TmModalLCDApproval", () => {
   let wrapper, store
 
   beforeEach(() => {
-    let test = instance.mount(NiModalLCDApproval, {
+    let test = instance.mount(TmModalLCDApproval, {
       propsData: { hash: "this_is_a_hash" }
     })
     wrapper = test.wrapper
diff --git a/test/unit/specs/components/common/NiModalNoNodes.spec.js b/test/unit/specs/components/common/TmModalNoNodes.spec.js
similarity index 87%
rename from test/unit/specs/components/common/NiModalNoNodes.spec.js
rename to test/unit/specs/components/common/TmModalNoNodes.spec.js
index 9da170c213..3109de2c66 100644
--- a/test/unit/specs/components/common/NiModalNoNodes.spec.js
+++ b/test/unit/specs/components/common/TmModalNoNodes.spec.js
@@ -1,12 +1,12 @@
-import NiModalNoNodes from "common/NiModalNoNodes"
+import TmModalNoNodes from "common/TmModalNoNodes"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiModalNoNodes", () => {
+describe("TmModalNoNodes", () => {
   let wrapper, store
   let { mount, localVue } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalNoNodes)
+    let instance = mount(TmModalNoNodes)
     store = instance.store
     wrapper = instance.wrapper
   })
diff --git a/test/unit/specs/components/common/NiModalReceive.spec.js b/test/unit/specs/components/common/TmModalReceive.spec.js
similarity index 80%
rename from test/unit/specs/components/common/NiModalReceive.spec.js
rename to test/unit/specs/components/common/TmModalReceive.spec.js
index 17145de430..ff2b8212c2 100644
--- a/test/unit/specs/components/common/NiModalReceive.spec.js
+++ b/test/unit/specs/components/common/TmModalReceive.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalReceive from "common/NiModalReceive"
+import TmModalReceive from "common/TmModalReceive"
 
-describe("NiModalReceive", () => {
+describe("TmModalReceive", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalReceive)
+    let instance = mount(TmModalReceive)
     wrapper = instance.wrapper
     store = instance.store
     store.commit("setModalHelp", true)
diff --git a/test/unit/specs/components/common/NiModalSearch.spec.js b/test/unit/specs/components/common/TmModalSearch.spec.js
similarity index 92%
rename from test/unit/specs/components/common/NiModalSearch.spec.js
rename to test/unit/specs/components/common/TmModalSearch.spec.js
index 1f58bb60b2..bc54bc974a 100644
--- a/test/unit/specs/components/common/NiModalSearch.spec.js
+++ b/test/unit/specs/components/common/TmModalSearch.spec.js
@@ -1,13 +1,13 @@
-import NiModalSearch from "common/NiModalSearch"
+import TmModalSearch from "common/TmModalSearch"
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 
-describe("NiModalSearch", () => {
+describe("TmModalSearch", () => {
   let wrapper, store
   let { mount, localVue } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalSearch, { propsData: { type: "transactions" } })
+    let instance = mount(TmModalSearch, { propsData: { type: "transactions" } })
     localVue.use(Vuelidate)
     store = instance.store
     wrapper = instance.wrapper
diff --git a/test/unit/specs/components/common/NiOnboarding.spec.js b/test/unit/specs/components/common/TmOnboarding.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NiOnboarding.spec.js
rename to test/unit/specs/components/common/TmOnboarding.spec.js
index b725f43b10..9fd6957ea3 100644
--- a/test/unit/specs/components/common/NiOnboarding.spec.js
+++ b/test/unit/specs/components/common/TmOnboarding.spec.js
@@ -1,4 +1,4 @@
-import NiOnboarding from "common/NiOnboarding.vue"
+import TmOnboarding from "common/TmOnboarding.vue"
 import htmlBeautify from "html-beautify"
 import setup from "../../../helpers/vuex-setup"
 
@@ -23,12 +23,12 @@ jest.mock(
   () => jest.fn()
 )
 
-describe("NiOnboarding", () => {
+describe("TmOnboarding", () => {
   let wrapper, store, instance
   let { mount } = setup()
 
   beforeEach(() => {
-    instance = mount(NiOnboarding)
+    instance = mount(TmOnboarding)
     wrapper = instance.wrapper
     store = instance.store
     wrapper.update()
diff --git a/test/unit/specs/components/common/NISession.spec.js b/test/unit/specs/components/common/TmSession.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NISession.spec.js
rename to test/unit/specs/components/common/TmSession.spec.js
index f192d8ce95..e8f1b09ab2 100644
--- a/test/unit/specs/components/common/NISession.spec.js
+++ b/test/unit/specs/components/common/TmSession.spec.js
@@ -1,12 +1,12 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
-import NiSession from "common/NiSession"
+import TmSession from "common/TmSession"
 const config = require("renderer/vuex/modules/config").default({})
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
 
-describe("NiSessionWelcome", () => {
+describe("TmSessionWelcome", () => {
   let wrapper, store
 
   beforeEach(() => {
@@ -14,7 +14,7 @@ describe("NiSessionWelcome", () => {
       getters: { config: () => config.state },
       modules: { config }
     })
-    wrapper = mount(NiSession, {
+    wrapper = mount(TmSession, {
       localVue,
       store,
       stubs: {
diff --git a/test/unit/specs/components/common/NISessionAccountDelete.spec.js b/test/unit/specs/components/common/TmSessionAccountDelete.spec.js
similarity index 94%
rename from test/unit/specs/components/common/NISessionAccountDelete.spec.js
rename to test/unit/specs/components/common/TmSessionAccountDelete.spec.js
index 65d2346417..e3930994ae 100644
--- a/test/unit/specs/components/common/NISessionAccountDelete.spec.js
+++ b/test/unit/specs/components/common/TmSessionAccountDelete.spec.js
@@ -2,18 +2,18 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionAccountDelete from "common/NiSessionAccountDelete"
+import TmSessionAccountDelete from "common/TmSessionAccountDelete"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Vuelidate)
 
-describe("NiSessionAccountDelete", () => {
+describe("TmSessionAccountDelete", () => {
   let wrapper, store
 
   beforeEach(() => {
     store = new Vuex.Store()
-    wrapper = mount(NiSessionAccountDelete, {
+    wrapper = mount(TmSessionAccountDelete, {
       localVue,
       store
     })
diff --git a/test/unit/specs/components/common/NISessionHardware.spec.js b/test/unit/specs/components/common/TmSessionHardware.spec.js
similarity index 96%
rename from test/unit/specs/components/common/NISessionHardware.spec.js
rename to test/unit/specs/components/common/TmSessionHardware.spec.js
index f7398930b1..80d663af82 100644
--- a/test/unit/specs/components/common/NISessionHardware.spec.js
+++ b/test/unit/specs/components/common/TmSessionHardware.spec.js
@@ -2,7 +2,7 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NISessionHardware from "common/NiSessionHardware"
+import NISessionHardware from "common/TmSessionHardware"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
diff --git a/test/unit/specs/components/common/NiSessionImport.spec.js b/test/unit/specs/components/common/TmSessionImport.spec.js
similarity index 97%
rename from test/unit/specs/components/common/NiSessionImport.spec.js
rename to test/unit/specs/components/common/TmSessionImport.spec.js
index 2f538f0174..d97503fe0b 100644
--- a/test/unit/specs/components/common/NiSessionImport.spec.js
+++ b/test/unit/specs/components/common/TmSessionImport.spec.js
@@ -2,7 +2,7 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionImport from "common/NiSessionImport"
+import TmSessionImport from "common/TmSessionImport"
 jest.mock("renderer/google-analytics.js", () => uid => {})
 const seed =
   "goose toward escape engine wheel board help torch avocado educate rose rebel rigid side aspect abandon"
@@ -10,12 +10,12 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Vuelidate)
 
-describe("NiSessionImport", () => {
+describe("TmSessionImport", () => {
   let wrapper, store
 
   beforeEach(() => {
     store = new Vuex.Store()
-    wrapper = mount(NiSessionImport, {
+    wrapper = mount(TmSessionImport, {
       localVue,
       store
     })
diff --git a/test/unit/specs/components/common/NISessionLoading.spec.js b/test/unit/specs/components/common/TmSessionLoading.spec.js
similarity index 64%
rename from test/unit/specs/components/common/NISessionLoading.spec.js
rename to test/unit/specs/components/common/TmSessionLoading.spec.js
index 4f530302d1..d760d1d1a4 100644
--- a/test/unit/specs/components/common/NISessionLoading.spec.js
+++ b/test/unit/specs/components/common/TmSessionLoading.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionLoading from "common/NiSessionLoading"
+import TmSessionLoading from "common/TmSessionLoading"
 
-describe("NiSessionLoading", () => {
+describe("TmSessionLoading", () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = mount(NiSessionLoading)
+    wrapper = mount(TmSessionLoading)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NISessionSignIn.spec.js b/test/unit/specs/components/common/TmSessionSignIn.spec.js
similarity index 92%
rename from test/unit/specs/components/common/NISessionSignIn.spec.js
rename to test/unit/specs/components/common/TmSessionSignIn.spec.js
index 8938ff95b3..b6e9a4bdc9 100644
--- a/test/unit/specs/components/common/NISessionSignIn.spec.js
+++ b/test/unit/specs/components/common/TmSessionSignIn.spec.js
@@ -1,16 +1,16 @@
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 import htmlBeautify from "html-beautify"
-import NiSessionSignIn from "common/NiSessionSignIn"
+import TmSessionSignIn from "common/TmSessionSignIn"
 
 let instance = setup()
 instance.localVue.use(Vuelidate)
 
-describe("NiSessionSignIn", () => {
+describe("TmSessionSignIn", () => {
   let wrapper, store
 
   beforeEach(() => {
-    let test = instance.mount(NiSessionSignIn)
+    let test = instance.mount(TmSessionSignIn)
     store = test.store
     wrapper = test.wrapper
   })
@@ -74,7 +74,7 @@ describe("NiSessionSignIn", () => {
   })
 
   it("should set the default password in mocked mode", async () => {
-    let test = instance.mount(NiSessionSignIn, {
+    let test = instance.mount(TmSessionSignIn, {
       getters: {
         mockedConnector: () => true
       }
diff --git a/test/unit/specs/components/common/NISessionSignUp.spec.js b/test/unit/specs/components/common/TmSessionSignUp.spec.js
similarity index 99%
rename from test/unit/specs/components/common/NISessionSignUp.spec.js
rename to test/unit/specs/components/common/TmSessionSignUp.spec.js
index 21d6248d30..3d405f2a39 100644
--- a/test/unit/specs/components/common/NISessionSignUp.spec.js
+++ b/test/unit/specs/components/common/TmSessionSignUp.spec.js
@@ -1,7 +1,7 @@
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 import htmlBeautify from "html-beautify"
-import NISessionSignUp from "common/NiSessionSignUp"
+import NISessionSignUp from "common/TmSessionSignUp"
 jest.mock("renderer/google-analytics.js", () => uid => {})
 
 let instance = setup()
diff --git a/test/unit/specs/components/common/NISessionWelcome.spec.js b/test/unit/specs/components/common/TmSessionWelcome.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NISessionWelcome.spec.js
rename to test/unit/specs/components/common/TmSessionWelcome.spec.js
index 454239981c..eae97be353 100644
--- a/test/unit/specs/components/common/NISessionWelcome.spec.js
+++ b/test/unit/specs/components/common/TmSessionWelcome.spec.js
@@ -1,8 +1,8 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NISessionWelcome from "common/NiSessionWelcome"
-import LiSession from "common/NiLiSession"
+import NISessionWelcome from "common/TmSessionWelcome"
+import LiSession from "common/TmLiSession"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
diff --git a/test/unit/specs/components/common/VrToolBar.spec.js b/test/unit/specs/components/common/TmToolBar.spec.js
similarity index 86%
rename from test/unit/specs/components/common/VrToolBar.spec.js
rename to test/unit/specs/components/common/TmToolBar.spec.js
index 54c0edd797..ace7dec0ab 100644
--- a/test/unit/specs/components/common/VrToolBar.spec.js
+++ b/test/unit/specs/components/common/TmToolBar.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import VrToolBar from "common/VrToolBar"
+import TmToolBar from "common/TmToolBar"
 
-describe("VrToolBar", () => {
+describe("TmToolBar", () => {
   let wrapper, store, instance
   let { mount } = setup()
 
   beforeEach(() => {
-    instance = mount(VrToolBar)
+    instance = mount(TmToolBar)
     wrapper = instance.wrapper
     store = instance.store
     wrapper.update()
diff --git a/test/unit/specs/components/common/NiUserPane.spec.js b/test/unit/specs/components/common/TmUserPane.spec.js
similarity index 90%
rename from test/unit/specs/components/common/NiUserPane.spec.js
rename to test/unit/specs/components/common/TmUserPane.spec.js
index d5eb860ef5..ec049bd668 100644
--- a/test/unit/specs/components/common/NiUserPane.spec.js
+++ b/test/unit/specs/components/common/TmUserPane.spec.js
@@ -1,13 +1,13 @@
-import NiUserPane from "common/NiUserPane"
+import TmUserPane from "common/TmUserPane"
 import { TmListItem } from "@tendermint/ui"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiUserPane", () => {
+describe("TmUserPane", () => {
   let wrapper, router, store, instance
   let { mount } = setup()
 
   beforeEach(async () => {
-    instance = mount(NiUserPane)
+    instance = mount(TmUserPane)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap
deleted file mode 100644
index 6de6571261..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiModalReceive has the expected html structure 1`] = `<!---->`;
-
-exports[`NiModalReceive should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap
similarity index 80%
rename from test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap
index 3e1a1d02e1..248e2da84e 100644
--- a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"tm-btn btn-copy\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">content_copy</i><!----><span class=\\"tm-btn__value\\">Copy</span></span></button>"`;
+exports[`TmBtnCopy has the expected html structure 1`] = `"<button class=\\"tm-btn btn-copy\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">content_copy</i><!----><span class=\\"tm-btn__value\\">Copy</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap
similarity index 82%
rename from test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap
index eb3e0cbf13..81b2ea7d6d 100644
--- a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiBtnReceive has the expected html structure 1`] = `"<button class=\\"tm-btn btn-receive\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">file_download</i><!----><span class=\\"tm-btn__value\\">Receive</span></span></button>"`;
+exports[`TmBtnReceive has the expected html structure 1`] = `"<button class=\\"tm-btn btn-receive\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">file_download</i><!----><span class=\\"tm-btn__value\\">Receive</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
similarity index 94%
rename from test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
index bd95ad391c..f035edd184 100644
--- a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiConnectedNetwork has the expected html structure 1`] = `
+exports[`TmConnectedNetwork has the expected html structure 1`] = `
 "<div id=\\"tm-connected-network\\" class=\\"tm-connected-network tm-connected-network--mocked\\">
    <div class=\\"tm-connected-network__connection\\">
       <div id=\\"tm-connected-network__icon\\" class=\\"tm-connected-network__icon\\">
@@ -16,7 +16,7 @@ exports[`NiConnectedNetwork has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`NiConnectedNetwork shows the connected node 1`] = `
+exports[`TmConnectedNetwork shows the connected node 1`] = `
 <div
   class="tm-connected-network"
   id="tm-connected-network"
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap
similarity index 86%
rename from test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap
index a988b1b750..d6000728f2 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataEmpty has the expected html structure 1`] = `
+exports[`TmDataEmpty has the expected html structure 1`] = `
 "<div class=\\"tm-data-msg\\">
    <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">info_outline</i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
similarity index 87%
rename from test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
index a71b7db5d2..9e3291d6c1 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataEmptySearch has the expected html structure 1`] = `
+exports[`TmDataEmptySearch has the expected html structure 1`] = `
 "<div class=\\"tm-data-msg\\">
    <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">search</i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
similarity index 90%
rename from test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
index 4c46d81946..09f71f07f5 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataEmptyTx has the expected html structure 1`] = `
+exports[`TmDataEmptyTx has the expected html structure 1`] = `
 "<div class=\\"tm-data-msg\\">
    <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">info_outline</i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
similarity index 90%
rename from test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
index ad3ae79c0e..e85e1998ae 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataError has the expected html structure 1`] = `
+exports[`TmDataError has the expected html structure 1`] = `
 "<div class=\\"tm-data-msg\\">
    <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">sentiment_very_dissatisfied</i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap
similarity index 87%
rename from test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap
index 2499166a22..f046ce4acd 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiDataLoading has the expected html structure 1`] = `
+exports[`TmDataLoading has the expected html structure 1`] = `
 "<div class=\\"tm-data-msg\\">
    <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons fa-spin\\">rotate_right</i>
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
similarity index 69%
rename from test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
index 7eb0bbe11a..3f623bd596 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFieldAddon has the expected html structure 1`] = `
+exports[`TmFieldAddon has the expected html structure 1`] = `
 "<div class=\\"tm-field-addon\\">
    <div class=\\"fake-addon\\">
       ATOM
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap
similarity index 73%
rename from test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap
index e726d95e66..9e53f003f4 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFieldSeed has the expected html structure 1`] = `"<textarea class=\\"tm-field-seed tm-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
+exports[`TmFieldSeed has the expected html structure 1`] = `"<textarea class=\\"tm-field-seed tm-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap
similarity index 90%
rename from test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap
index 9cd2fcae1b..02bd451827 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFieldVote has the expected html structure 1`] = `
+exports[`TmFieldVote has the expected html structure 1`] = `
 "<div class=\\"tm-field-vote\\">
    <div class=\\"tm-field-vote-container\\">
       <div class=\\"tm-field-vote-input\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
similarity index 80%
rename from test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
index 7a6e97b99a..232b6ff506 100644
--- a/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiHardwareState has the expected html structure 1`] = `
+exports[`TmHardwareState has the expected html structure 1`] = `
 "<div class=\\"tm-hardware-state\\">
    <i class=\\"tm-hardware-state__icon material-icons fa-spin\\">rotate_right</i>
    <div class=\\"tm-hardware-state__label\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
similarity index 89%
rename from test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
index 71c6b1594d..2ec3d3db1d 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiLiCopy has the expected html structure 1`] = `
+exports[`TmLiCopy has the expected html structure 1`] = `
 <div
   class="tm-li-copy"
 >
@@ -34,7 +34,7 @@ exports[`NiLiCopy has the expected html structure 1`] = `
 </div>
 `;
 
-exports[`NiLiCopy should show the receive button 1`] = `
+exports[`TmLiCopy should show the receive button 1`] = `
 <div
   class="tm-li-copy"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
similarity index 87%
rename from test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
index c3c0168789..60c16a857e 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiLiSession has the expected html structure 1`] = `
+exports[`TmLiSession has the expected html structure 1`] = `
 <div
   class="tm-li-session"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
similarity index 89%
rename from test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
index 0c66b4976a..93bcd355f5 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModal has the expected html structure 1`] = `
+exports[`TmModal has the expected html structure 1`] = `
 <div
   class="tm-modal"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap
similarity index 94%
rename from test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap
index bff91c74b2..6f8080de41 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalError has the expected html structure 1`] = `
+exports[`TmModalError has the expected html structure 1`] = `
 "<div class=\\"tm-modal-error__wrapper\\">
    <div class=\\"tm-modal-error\\">
       <div class=\\"tm-modal-error__icon\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
similarity index 95%
rename from test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
index 9625779624..9c6ecc0985 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalHelp has the expected html structure 1`] = `
+exports[`TmModalHelp has the expected html structure 1`] = `
 <div
   class="tm-modal-help tm-modal"
 >
@@ -126,4 +126,4 @@ exports[`NiModalHelp has the expected html structure 1`] = `
 </div>
 `;
 
-exports[`NiModalHelp should hide 1`] = `<!---->`;
+exports[`TmModalHelp should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
similarity index 96%
rename from test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
index 42bd7bf1c6..882e9fb4fd 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalLCDApproval has the expected html structure 1`] = `
+exports[`TmModalLCDApproval has the expected html structure 1`] = `
 <div
   class="tm-modal-lcd-approval__wrapper"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
similarity index 96%
rename from test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
index 75cc811e67..f5458c0a44 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalNoNodes has the expected html structure 1`] = `
+exports[`TmModalNoNodes has the expected html structure 1`] = `
 <div
   class="ni-modal-error__wrapper"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap
new file mode 100644
index 0000000000..0da9ab40d6
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmModalReceive has the expected html structure 1`] = `<!---->`;
+
+exports[`TmModalReceive should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
similarity index 93%
rename from test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
index 322eb73371..a34389db46 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalSearch has the expected html structure 1`] = `
+exports[`TmModalSearch has the expected html structure 1`] = `
 <div
   class="tm-modal-search"
 >
diff --git a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap
similarity index 96%
rename from test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap
index a67bbb891b..6dafdbc4f4 100644
--- a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiOnboarding has the expected html structure 0 1`] = `
+exports[`TmOnboarding has the expected html structure 0 1`] = `
 "<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
    <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
    <div class=\\"tm-session\\">
@@ -44,7 +44,7 @@ exports[`NiOnboarding has the expected html structure 0 1`] = `
 </div>"
 `;
 
-exports[`NiOnboarding has the expected html structure 1 1`] = `
+exports[`TmOnboarding has the expected html structure 1 1`] = `
 "<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
    <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
    <div class=\\"tm-session\\">
@@ -88,7 +88,7 @@ exports[`NiOnboarding has the expected html structure 1 1`] = `
 </div>"
 `;
 
-exports[`NiOnboarding has the expected html structure 2 1`] = `
+exports[`TmOnboarding has the expected html structure 2 1`] = `
 "<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
    <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
    <div class=\\"tm-session\\">
@@ -132,7 +132,7 @@ exports[`NiOnboarding has the expected html structure 2 1`] = `
 </div>"
 `;
 
-exports[`NiOnboarding has the expected html structure 3 1`] = `
+exports[`TmOnboarding has the expected html structure 3 1`] = `
 "<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
    <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
    <div class=\\"tm-session\\">
@@ -176,7 +176,7 @@ exports[`NiOnboarding has the expected html structure 3 1`] = `
 </div>"
 `;
 
-exports[`NiOnboarding has the expected html structure 4 1`] = `
+exports[`TmOnboarding has the expected html structure 4 1`] = `
 "<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
    <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
    <div class=\\"tm-session\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap
similarity index 97%
rename from test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap
index d0e1bf7d0c..ad1bcf9252 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiSessionAccountDelete has the expected html structure 1`] = `
+exports[`TmSessionAccountDelete has the expected html structure 1`] = `
 "<div class=\\"tm-session\\">
    <form class=\\"tm-session-container tm-form\\">
       <div class=\\"tm-form-container\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
similarity index 100%
rename from test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
diff --git a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap
similarity index 98%
rename from test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap
index cb8d930b71..bf1c2249ee 100644
--- a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiSessionImport has the expected html structure 1`] = `
+exports[`TmSessionImport has the expected html structure 1`] = `
 "<div class=\\"tm-session\\">
    <form class=\\"tm-session-container tm-form\\">
       <div class=\\"tm-form-container\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap
similarity index 85%
rename from test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap
index fb4dcf62f9..9b48c9e4e8 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiSessionLoading has the expected html structure 1`] = `
+exports[`TmSessionLoading has the expected html structure 1`] = `
 "<div class=\\"tm-session\\">
    <div class=\\"tm-session-container\\">
       <div class=\\"tm-session-header\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap
similarity index 96%
rename from test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap
index 5c698fe0e8..566aca30b8 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiSessionSignIn has the expected html structure 1`] = `
+exports[`TmSessionSignIn has the expected html structure 1`] = `
 "<div class=\\"tm-session\\">
    <form class=\\"tm-session-container tm-form\\">
       <div class=\\"tm-form-container\\">
@@ -58,4 +58,4 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"ni-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
+exports[`TmSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"ni-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionSignUp.spec.js.snap
similarity index 100%
rename from test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionSignUp.spec.js.snap
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
similarity index 100%
rename from test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
diff --git a/test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
similarity index 84%
rename from test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
index 07b71881da..b473c02ca2 100644
--- a/test/unit/specs/components/common/__snapshots__/VrToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VrToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;
+exports[`TmToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
similarity index 92%
rename from test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
index bbee9acb87..5c55a9ca4f 100644
--- a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiUserPane has the expected html structure 1`] = `
+exports[`TmUserPane has the expected html structure 1`] = `
 <a
   class="tm-li tm-li-link tm-li-user proposal-enter proposal-enter-active"
   href="#/preferences"

From f55ad35c466cf9a411dacbfb2f60a49f78645ed2 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 25 Jun 2018 11:45:35 +0200
Subject: [PATCH 27/31] remove governance from code coverage

---
 codecov.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/codecov.yaml b/codecov.yaml
index 4475840196..2986bf17c6 100644
--- a/codecov.yaml
+++ b/codecov.yaml
@@ -19,4 +19,5 @@ comment:
   require_head: yes
 
 ignore:
-  - "tasks/release.js"
\ No newline at end of file
+  - "tasks/release.js"
+  - "app/src/renderer/components/govern/*"

From 7c80d8e75cfc21807b15b5d0bef1b6cfae6f1001 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Mon, 25 Jun 2018 12:06:19 +0200
Subject: [PATCH 28/31] werent saved?

---
 app/src/renderer/components/common/TmPart.vue | 20 -------------------
 .../renderer/components/common/TmSession.vue  |  5 -----
 .../__snapshots__/TmToolBar.spec.js.snap      |  4 +++-
 3 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/app/src/renderer/components/common/TmPart.vue b/app/src/renderer/components/common/TmPart.vue
index db54b7f1c5..d625810955 100644
--- a/app/src/renderer/components/common/TmPart.vue
+++ b/app/src/renderer/components/common/TmPart.vue
@@ -32,26 +32,14 @@ export default {
   &:empty
     display none
 
-<<<<<<< HEAD:app/src/renderer/components/common/TmPart.vue
-.tm-part-main
-  padding-right 1rem
 
 .tm-part-container
   margin 0 auto
 
 .tm-part-header
-  padding 0.5rem 1rem
-  margin-bottom 0.5rem
-  background var(--app-fg)
-=======
-.ni-part-container
-  margin 0 auto
-
-.ni-part-header
   padding 1rem 1rem 0.5rem
   border-radius 2px
   background var(--app-bg-light)
->>>>>>> develop:app/src/renderer/components/common/NiPart.vue
 
 .tm-part-header-container
   display flex
@@ -72,12 +60,4 @@ export default {
   color var(--dim)
   font-size sm
   font-weight 400
-<<<<<<< HEAD:app/src/renderer/components/common/TmPart.vue
-
-@media screen and (min-width: 768px)
-  .tm-part-container
-    &:last-child
-      padding-bottom 1.5rem
-=======
->>>>>>> develop:app/src/renderer/components/common/NiPart.vue
 </style>
diff --git a/app/src/renderer/components/common/TmSession.vue b/app/src/renderer/components/common/TmSession.vue
index cde06662e3..5626b1a47f 100644
--- a/app/src/renderer/components/common/TmSession.vue
+++ b/app/src/renderer/components/common/TmSession.vue
@@ -192,13 +192,8 @@ export default {
     background var(--app-fg)
     margin-top 0
 
-<<<<<<< HEAD:app/src/renderer/components/common/TmSession.vue
   .tm-session-main
-    padding 2rem
-=======
-  .ni-session-main
     padding 3rem 2rem
->>>>>>> develop:app/src/renderer/components/common/NiSession.vue
 
     .tm-form-group
       display block !important
diff --git a/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
index b473c02ca2..6e108f66bb 100644
--- a/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TmToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;
+exports[
+  `TmToolBar has the expected html structure 1`
+] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`

From b4f31d0faa1d8740059a95aa0cff9507527c8fd8 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Tue, 26 Jun 2018 11:45:39 +0200
Subject: [PATCH 29/31] update packages

---
 package.json |  4 +---
 yarn.lock    | 14 +++-----------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 08b030789d..57006f28f4 100644
--- a/package.json
+++ b/package.json
@@ -98,9 +98,7 @@
     "xmlhttprequest": "1.8.0"
   },
   "dependencies": {
-    "@nylira/vue-field": "1.5.0",
-    "@nylira/vue-notifications": "1.5.0",
-    "@tendermint/ui": "https://github.com/tendermint/ui.git#",
+    "@tendermint/ui": "0.2.7",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 4b8930f342..b77f7e50cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,21 +12,13 @@
   dependencies:
     ramda "0.25.0"
 
-"@nylira/vue-field@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-field/-/vue-field-1.5.0.tgz#09a04f2555e63a92eb31dd40cad524ea8558a8f4"
-
-"@nylira/vue-notifications@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-notifications/-/vue-notifications-1.5.0.tgz#a6f027c4ecd8ca99ed7dbbcc04d5b67288d8d0f6"
-
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@tendermint/ui@https://github.com/tendermint/ui.git#":
-  version "0.2.6"
-  resolved "https://github.com/tendermint/ui.git#3538219cc2bc4019778ab2866ca2405d2774fe33"
+"@tendermint/ui@0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@tendermint/ui/-/ui-0.2.7.tgz#417a5946124f4c6df40dec38d0858c9e6684877c"
   dependencies:
     cookieconsent "^3.0.6"
     moment "^2.22.2"

From 62f5d240796aa153632add6614dfd8e3c682c463 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Tue, 26 Jun 2018 13:47:59 +0200
Subject: [PATCH 30/31] feedback comments from @fabo

---
 app/networks/genesis.json                     | 1459 -----------------
 .../renderer/components/common/TmToolBar.vue  |    1 +
 .../specs/components/common/Page404.spec.js   |    7 +-
 .../components/common/PagePreferences.spec.js |    4 +
 .../components/monitor/PageBlocks.spec.js     |    5 +-
 .../specs/components/staking/PageBond.spec.js |    4 +
 .../components/staking/PageDelegate.spec.js   |    5 +-
 .../components/staking/PageStaking.spec.js    |    4 +
 .../specs/components/wallet/PageSend.spec.js  |    4 +
 .../wallet/PageTransactions.spec.js           |    4 +
 .../components/wallet/PageWallet.spec.js      |   12 +
 11 files changed, 45 insertions(+), 1464 deletions(-)
 delete mode 100644 app/networks/genesis.json

diff --git a/app/networks/genesis.json b/app/networks/genesis.json
deleted file mode 100644
index 2217f15b0f..0000000000
--- a/app/networks/genesis.json
+++ /dev/null
@@ -1,1459 +0,0 @@
-{
-  "genesis_time": "2018-06-16T18:29:12.38288148Z",
-  "chain_id": "gaia-6002",
-  "consensus_params": {
-    "block_size_params": {
-      "max_bytes": 22020096,
-      "max_txs": 100000,
-      "max_gas": -1
-    },
-    "tx_size_params": {
-      "max_bytes": 10240,
-      "max_gas": -1
-    },
-    "block_gossip_params": {
-      "block_part_size_bytes": 65536
-    },
-    "evidence_params": {
-      "max_age": 100000
-    }
-  },
-  "validators": [
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "TZTQnfqOsi89SeoXVnIw+tnFJnr4X8qVC0U8AsEmFk4="
-      },
-      "power": 1000,
-      "name": "adrian"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "CDF/8aD8Lt+ikR3LyCg9c7DwWBA51NH+MUkH7tzxrfY="
-      },
-      "power": 1000,
-      "name": "zaki"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "bIvXwf0qlOy0rO0SY/h8FfsqyW/AMpGL2yUhUNOY7hs="
-      },
-      "power": 100,
-      "name": "staked"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "RMwWTZsVdkq1heicNJb2fosy9Fls4NHxAHReiJvHl+8="
-      },
-      "power": 1000,
-      "name": "polsdam"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "SW12+WpGKUCO9oT2CV0CD5kUclbXjJHV1MjerLWB7Oc="
-      },
-      "power": 1000,
-      "name": "lino"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "NjjEQKUsq8F0gWxl3BoU2Li5n7hEz9H/LX80rfMxVyE="
-      },
-      "power": 100,
-      "name": ""
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "7SaH/LyM+qdz9ovD/pvqIf2q7LC7tc5v0ZJxsA2CGTw="
-      },
-      "power": 1000,
-      "name": "iris"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "pY7eLF0Ez3yq495kIjag8mD67Q131np/ssagpEvlV2A="
-      },
-      "power": 1000,
-      "name": "pbostrom"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "RpX+xkwnCNw5DpBelscz4//TiODyC9RDiyIuD6NEwx0="
-      },
-      "power": 1000,
-      "name": "aurel"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "0aNTDL49987ZNRi3FtJIi0jk93ybHuYg1FjWrfP9H2o="
-      },
-      "power": 1000,
-      "name": "bucky"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "dcmCn+RZTBdwbCa4YqSnw/Va7xQloBw6vF87ItLwdM0="
-      },
-      "power": 100,
-      "name": "cwgoes"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "TNPLvN6f6QoSLJqGHzIfbraBoSw3emr9Sk2Us94M4gM="
-      },
-      "power": 1000,
-      "name": "bdnet"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "cvGYknYP9XMUzqlXZde7lRpvAp/kZiSRYHg66krJNxQ="
-      },
-      "power": 1000,
-      "name": "melea-trust"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "kol7Gj60Fct4X8T1rHLJQ0z/b14UqqSae8h1e37rLL8="
-      },
-      "power": 1000,
-      "name": "naruemon"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "rcl+kuM69Un/a7e+fQsQrCEtT1g04tFviOeq2GygSIw="
-      },
-      "power": 1000,
-      "name": "idoor"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "S9urD5q7je21qp5vEobiURdWrtJwvqMsfZGQhb8GOBQ="
-      },
-      "power": 1000,
-      "name": "ATEAM1"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "vSr94aI+zfF3D8Cr2VtCXPpfgj7t2ck8SlZxRsfn7gk="
-      },
-      "power": 1000,
-      "name": "figmatt"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "p5ijoVwp2zmA7RkXXvPl+yqdnlaWMwoV2pYIN8bDyFs="
-      },
-      "power": 1000,
-      "name": "jla-bsd"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "KOdWpo4aQFrLxVlkyc66p7m6mBNnPLmGuO4Z4L+CI1Y="
-      },
-      "power": 1000,
-      "name": "Gold"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "VfOsmcON77auerRc9zKwOR+CvL0sj1nA45hS2WqX1xE="
-      },
-      "power": 1000,
-      "name": "nylira"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "QYONAknaJqx3OKPSKraDrOPkx6xssezYtXVS84nZvZE="
-      },
-      "power": 1000,
-      "name": "BKCM"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "PyFJmNrUres3QOkj2BjxplCxrOF+HDFGohi3tRKsToY="
-      },
-      "power": 1000,
-      "name": "Dev's Validator"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "s4ER09+WeX10euzGyK7xDW7+myQVXt3Plup8IHUE4nk="
-      },
-      "power": 1000,
-      "name": "Staking Facilities"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "OPxj9edXgufNEjYNhZKqLgmYnK4A3nGw3rxaFQrHn24="
-      },
-      "power": 1000,
-      "name": "nuevax"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "Hi2rtbdJdQtOe3Kq4OoD/xkWJbIjIsUI9qgLQ6TlhiM="
-      },
-      "power": 1000,
-      "name": "vultr.guest"
-    },
-    {
-      "pub_key": {
-        "type": "AC26791624DE60",
-        "value": "ah3JtmBA7gbxSiimPsLqQlV85gpNOUBJMvnxGx8eVlo="
-      },
-      "power": 1000,
-      "name": "forebole"
-    }
-  ],
-  "app_hash": "",
-  "app_state": {
-    "accounts": [
-      {
-        "address": "04F01D5AF8DD248130BBE1D0780EA219CE479A9B",
-        "coins": [
-          {
-            "denom": "devToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "FD8DA5F512A59A30F8698E3CA638D384A68DF977",
-        "coins": [
-          {
-            "denom": "adrianToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "109720515B4F8C0858DA3521E448262334534FFD",
-        "coins": [
-          {
-            "denom": "defaultToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "10B0899E05A486AE4E5589C39587DF7E9A185872",
-        "coins": [
-          {
-            "denom": "aurelToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "328FBB8EA315D070DF908982A5F91A3618001D20",
-        "coins": [
-          {
-            "denom": "cwgoesToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "4062DAFB9ACD4D91051B569CD4B19A26524B314B",
-        "coins": [
-          {
-            "denom": "BKCMToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "42D76AF31E36EE23CA5366FBB9CE18610CCB9820",
-        "coins": [
-          {
-            "denom": "BDToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "4B5BE759EB23B0D76C6A60636BD0E3111178794E",
-        "coins": [
-          {
-            "denom": "suyuToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "5A007B81A25AF34B829B79DA508A26E12180BCDB",
-        "coins": [
-          {
-            "denom": "linoToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "83C2788B74E1A410A4E62F1040EAE15F4B6EA3F5",
-        "coins": [
-          {
-            "denom": "stakingToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "935E04662697134905706A4CCDB822AC6FC11C2E",
-        "coins": [
-          {
-            "denom": "defaultToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "935E48ED79F1006ED135553768E1D9A768747CF6",
-        "coins": [
-          {
-            "denom": "buckyToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "99FFAEE5BF6040EADA2F26548C4A702619797C9F",
-        "coins": [
-          {
-            "denom": "kwunyeungToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      },
-      {
-        "address": "9D5723057702E2090405AB5D3B48C45B9ABF4377",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "zachToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "A323EC45243D600204BA3D298E3C20322D08C84C",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "nuevaxToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "A9A3DADDC8BFFAD52BA51C8F4F2E9F62709412DC",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "dokiaToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "B6834D914FE50F0C743E6A012AB20438CFADFB95",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "forboleToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "B75C2C4309475C91E8DE271BC52CBAC408365B83",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 100
-          },
-          {
-            "denom": "pengToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "FD30D5C983FFEDEC069C3DDFCF270E41A556A86E",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 900
-          },
-          {
-            "denom": "faucetToken",
-            "amount": 10000000
-          }
-        ]
-      },
-      {
-        "address": "C0D0CA58C50B7B02A841E1B27D9A21D939754AC7",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "goldToken",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "C5033FCFB67D7BD7B8546389F125710462D4FB6C",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "jlaToken",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "C6CB038C98026D2F17241A3B3166AE7E9488D9AD",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "figmattToken",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "D0861E3F22339C507B716102FDD5CA681EDE4F8E",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "ATEAM1Token",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "D6545CB14FCA7840A295FB0566C27E4B9D526993",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "idoorToken",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "D841E0DACF3994E6A40126F023F6F32F98A5D89E",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "naruemonToken",
-            "amount": 100
-          }
-        ]
-      },
-      {
-        "address": "ECE57661F0CDCF28EED257B72F86240E57F4A612",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "zakiToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "EFE597F7A90D3F3E7599B25259449628E2C4AFAD",
-        "coins": [
-          {
-            "denom": "steak",
-            "amount": 50
-          },
-          {
-            "denom": "trustToken",
-            "amount": 1000
-          }
-        ]
-      },
-      {
-        "address": "FA929191B04C5DB222AFC6F15C63EF48CCC864C5",
-        "coins": [
-          {
-            "denom": "poldsamToken",
-            "amount": 1000
-          },
-          {
-            "denom": "steak",
-            "amount": 50
-          }
-        ]
-      }
-    ],
-    "stake": {
-      "pool": {
-        "loose_unbonded_tokens": 2300,
-        "unbonded_tokens": 0,
-        "unbonding_tokens": 0,
-        "bonded_tokens": 23300,
-        "unbonded_shares": "0",
-        "unbonding_shares": "0",
-        "bonded_shares": "23300",
-        "inflation_last_time": 0,
-        "inflation": "9012837/100000000",
-        "date_last_commission_reset": 0,
-        "prev_bonded_shares": "0"
-      },
-      "params": {
-        "inflation_rate_change": "13/100",
-        "inflation_max": "1/5",
-        "inflation_min": "7/100",
-        "goal_bonded": "67/100",
-        "max_validators": 100,
-        "bond_denom": "steak"
-      },
-      "bonds": [
-        {
-          "delegator_addr": "04F01D5AF8DD248130BBE1D0780EA219CE479A9B",
-          "validator_addr": "04F01D5AF8DD248130BBE1D0780EA219CE479A9B",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "109720515B4F8C0858DA3521E448262334534FFD",
-          "validator_addr": "109720515B4F8C0858DA3521E448262334534FFD",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "10B0899E05A486AE4E5589C39587DF7E9A185872",
-          "validator_addr": "10B0899E05A486AE4E5589C39587DF7E9A185872",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "328FBB8EA315D070DF908982A5F91A3618001D20",
-          "validator_addr": "328FBB8EA315D070DF908982A5F91A3618001D20",
-          "shares": "100",
-          "height": 0
-        },
-        {
-          "delegator_addr": "4062DAFB9ACD4D91051B569CD4B19A26524B314B",
-          "validator_addr": "4062DAFB9ACD4D91051B569CD4B19A26524B314B",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "42D76AF31E36EE23CA5366FBB9CE18610CCB9820",
-          "validator_addr": "42D76AF31E36EE23CA5366FBB9CE18610CCB9820",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "4B5BE759EB23B0D76C6A60636BD0E3111178794E",
-          "validator_addr": "4B5BE759EB23B0D76C6A60636BD0E3111178794E",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "5A007B81A25AF34B829B79DA508A26E12180BCDB",
-          "validator_addr": "5A007B81A25AF34B829B79DA508A26E12180BCDB",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "83C2788B74E1A410A4E62F1040EAE15F4B6EA3F5",
-          "validator_addr": "83C2788B74E1A410A4E62F1040EAE15F4B6EA3F5",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "935E04662697134905706A4CCDB822AC6FC11C2E",
-          "validator_addr": "935E04662697134905706A4CCDB822AC6FC11C2E",
-          "shares": "100",
-          "height": 0
-        },
-        {
-          "delegator_addr": "935E48ED79F1006ED135553768E1D9A768747CF6",
-          "validator_addr": "935E48ED79F1006ED135553768E1D9A768747CF6",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "9D5723057702E2090405AB5D3B48C45B9ABF4377",
-          "validator_addr": "9D5723057702E2090405AB5D3B48C45B9ABF4377",
-          "shares": "100",
-          "height": 0
-        },
-        {
-          "delegator_addr": "A323EC45243D600204BA3D298E3C20322D08C84C",
-          "validator_addr": "A323EC45243D600204BA3D298E3C20322D08C84C",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "A9A3DADDC8BFFAD52BA51C8F4F2E9F62709412DC",
-          "validator_addr": "A9A3DADDC8BFFAD52BA51C8F4F2E9F62709412DC",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "B6834D914FE50F0C743E6A012AB20438CFADFB95",
-          "validator_addr": "B6834D914FE50F0C743E6A012AB20438CFADFB95",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "B75C2C4309475C91E8DE271BC52CBAC408365B83",
-          "validator_addr": "B75C2C4309475C91E8DE271BC52CBAC408365B83",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "C0D0CA58C50B7B02A841E1B27D9A21D939754AC7",
-          "validator_addr": "C0D0CA58C50B7B02A841E1B27D9A21D939754AC7",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "C5033FCFB67D7BD7B8546389F125710462D4FB6C",
-          "validator_addr": "C5033FCFB67D7BD7B8546389F125710462D4FB6C",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "C6CB038C98026D2F17241A3B3166AE7E9488D9AD",
-          "validator_addr": "C6CB038C98026D2F17241A3B3166AE7E9488D9AD",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "D0861E3F22339C507B716102FDD5CA681EDE4F8E",
-          "validator_addr": "D0861E3F22339C507B716102FDD5CA681EDE4F8E",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "D6545CB14FCA7840A295FB0566C27E4B9D526993",
-          "validator_addr": "D6545CB14FCA7840A295FB0566C27E4B9D526993",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "D841E0DACF3994E6A40126F023F6F32F98A5D89E",
-          "validator_addr": "D841E0DACF3994E6A40126F023F6F32F98A5D89E",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "FD8DA5F512A59A30F8698E3CA638D384A68DF977",
-          "validator_addr": "FD8DA5F512A59A30F8698E3CA638D384A68DF977",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "ECE57661F0CDCF28EED257B72F86240E57F4A612",
-          "validator_addr": "ECE57661F0CDCF28EED257B72F86240E57F4A612",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "EFE597F7A90D3F3E7599B25259449628E2C4AFAD",
-          "validator_addr": "EFE597F7A90D3F3E7599B25259449628E2C4AFAD",
-          "shares": "1000",
-          "height": 0
-        },
-        {
-          "delegator_addr": "FA929191B04C5DB222AFC6F15C63EF48CCC864C5",
-          "validator_addr": "FA929191B04C5DB222AFC6F15C63EF48CCC864C5",
-          "shares": "1000",
-          "height": 0
-        }
-      ],
-      "validators": [
-        {
-          "owner": "04F01D5AF8DD248130BBE1D0780EA219CE479A9B",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "PyFJmNrUres3QOkj2BjxplCxrOF+HDFGohi3tRKsToY="
-          },
-          "description": {
-            "moniker": "Dev's Validator",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "109720515B4F8C0858DA3521E448262334534FFD",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "pY7eLF0Ez3yq495kIjag8mD67Q131np/ssagpEvlV2A="
-          },
-          "description": {
-            "moniker": "",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "10B0899E05A486AE4E5589C39587DF7E9A185872",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "RpX+xkwnCNw5DpBelscz4//TiODyC9RDiyIuD6NEwx0="
-          },
-          "description": {
-            "moniker": "aurel",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "328FBB8EA315D070DF908982A5F91A3618001D20",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "dcmCn+RZTBdwbCa4YqSnw/Va7xQloBw6vF87ItLwdM0="
-          },
-          "description": {
-            "moniker": "cwgoes",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "100"
-          },
-          "delegator_shares": "100",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "4062DAFB9ACD4D91051B569CD4B19A26524B314B",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "QYONAknaJqx3OKPSKraDrOPkx6xssezYtXVS84nZvZE="
-          },
-          "description": {
-            "moniker": "BKCM",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "42D76AF31E36EE23CA5366FBB9CE18610CCB9820",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "TNPLvN6f6QoSLJqGHzIfbraBoSw3emr9Sk2Us94M4gM="
-          },
-          "description": {
-            "moniker": "bdnet",
-            "identity": "",
-            "website": "<marquee>",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "4B5BE759EB23B0D76C6A60636BD0E3111178794E",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "7SaH/LyM+qdz9ovD/pvqIf2q7LC7tc5v0ZJxsA2CGTw="
-          },
-          "description": {
-            "moniker": "suyu",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "5A007B81A25AF34B829B79DA508A26E12180BCDB",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "SW12+WpGKUCO9oT2CV0CD5kUclbXjJHV1MjerLWB7Oc="
-          },
-          "description": {
-            "moniker": "lino",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "83C2788B74E1A410A4E62F1040EAE15F4B6EA3F5",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "s4ER09+WeX10euzGyK7xDW7+myQVXt3Plup8IHUE4nk="
-          },
-          "description": {
-            "moniker": "Staking Facilities",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "935E04662697134905706A4CCDB822AC6FC11C2E",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "bIvXwf0qlOy0rO0SY/h8FfsqyW/AMpGL2yUhUNOY7hs="
-          },
-          "description": {
-            "moniker": "default",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "100"
-          },
-          "delegator_shares": "100",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "935E48ED79F1006ED135553768E1D9A768747CF6",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "0aNTDL49987ZNRi3FtJIi0jk93ybHuYg1FjWrfP9H2o="
-          },
-          "description": {
-            "moniker": "bucky",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "9D5723057702E2090405AB5D3B48C45B9ABF4377",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "NjjEQKUsq8F0gWxl3BoU2Li5n7hEz9H/LX80rfMxVyE="
-          },
-          "description": {
-            "moniker": "zach",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "100"
-          },
-          "delegator_shares": "100",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "A323EC45243D600204BA3D298E3C20322D08C84C",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "OPxj9edXgufNEjYNhZKqLgmYnK4A3nGw3rxaFQrHn24="
-          },
-          "description": {
-            "moniker": "nuevax",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "A9A3DADDC8BFFAD52BA51C8F4F2E9F62709412DC",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "Hi2rtbdJdQtOe3Kq4OoD/xkWJbIjIsUI9qgLQ6TlhiM="
-          },
-          "description": {
-            "moniker": "vultr.guest",
-            "identity": "",
-            "website": "https://ion.dokia.capital/",
-            "details": "DokiaValidator"
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "B6834D914FE50F0C743E6A012AB20438CFADFB95",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "ah3JtmBA7gbxSiimPsLqQlV85gpNOUBJMvnxGx8eVlo="
-          },
-          "description": {
-            "moniker": "forbole",
-            "identity": "",
-            "website": "https://www.forbole.com",
-            "details": "Recommend. Refer. Reward"
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "B75C2C4309475C91E8DE271BC52CBAC408365B83",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "VfOsmcON77auerRc9zKwOR+CvL0sj1nA45hS2WqX1xE="
-          },
-          "description": {
-            "moniker": "nylira",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "C0D0CA58C50B7B02A841E1B27D9A21D939754AC7",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "KOdWpo4aQFrLxVlkyc66p7m6mBNnPLmGuO4Z4L+CI1Y="
-          },
-          "description": {
-            "moniker": "Gold",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "C5033FCFB67D7BD7B8546389F125710462D4FB6C",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "p5ijoVwp2zmA7RkXXvPl+yqdnlaWMwoV2pYIN8bDyFs="
-          },
-          "description": {
-            "moniker": "jla-bsd",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "C6CB038C98026D2F17241A3B3166AE7E9488D9AD",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "vSr94aI+zfF3D8Cr2VtCXPpfgj7t2ck8SlZxRsfn7gk="
-          },
-          "description": {
-            "moniker": "figmatt",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "D0861E3F22339C507B716102FDD5CA681EDE4F8E",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "S9urD5q7je21qp5vEobiURdWrtJwvqMsfZGQhb8GOBQ="
-          },
-          "description": {
-            "moniker": "ATEAM1",
-            "identity": "",
-            "website": "",
-            "details": "ATEAM1"
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "D6545CB14FCA7840A295FB0566C27E4B9D526993",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "rcl+kuM69Un/a7e+fQsQrCEtT1g04tFviOeq2GygSIw="
-          },
-          "description": {
-            "moniker": "idoor",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "D841E0DACF3994E6A40126F023F6F32F98A5D89E",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "kol7Gj60Fct4X8T1rHLJQ0z/b14UqqSae8h1e37rLL8="
-          },
-          "description": {
-            "moniker": "naruemon",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "FD8DA5F512A59A30F8698E3CA638D384A68DF977",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "TZTQnfqOsi89SeoXVnIw+tnFJnr4X8qVC0U8AsEmFk4="
-          },
-          "description": {
-            "moniker": "Adrian Brink - Cryptium Labs",
-            "identity": "",
-            "website": "https://cryptium.ch",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "ECE57661F0CDCF28EED257B72F86240E57F4A612",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "CDF/8aD8Lt+ikR3LyCg9c7DwWBA51NH+MUkH7tzxrfY="
-          },
-          "description": {
-            "moniker": "zaki",
-            "identity": "",
-            "website": "",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "EFE597F7A90D3F3E7599B25259449628E2C4AFAD",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "cvGYknYP9XMUzqlXZde7lRpvAp/kZiSRYHg66krJNxQ="
-          },
-          "description": {
-            "moniker": "trust",
-            "identity": "",
-            "website": "http://cosmos-trust.com",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        },
-        {
-          "owner": "FA929191B04C5DB222AFC6F15C63EF48CCC864C5",
-          "pub_key": {
-            "type": "AC26791624DE60",
-            "value": "RMwWTZsVdkq1heicNJb2fosy9Fls4NHxAHReiJvHl+8="
-          },
-          "description": {
-            "moniker": "proof-of-audit",
-            "identity": "",
-            "website": "https://proof-of-audit.com",
-            "details": ""
-          },
-          "revoked": false,
-          "pool_shares": {
-            "status": 2,
-            "amount": "1000"
-          },
-          "delegator_shares": "1000",
-          "bond_height": 0,
-          "bond_intra_tx_counter": 0,
-          "commision": "0/1",
-          "commission_max": "0/1",
-          "commission_change_rate": "0/1",
-          "commission_change_rate_today": "0/1",
-          "prev_bonded_shares": "0/1"
-        }
-      ]
-    }
-  }
-}
diff --git a/app/src/renderer/components/common/TmToolBar.vue b/app/src/renderer/components/common/TmToolBar.vue
index c2a1f6044a..c8ab143728 100644
--- a/app/src/renderer/components/common/TmToolBar.vue
+++ b/app/src/renderer/components/common/TmToolBar.vue
@@ -12,6 +12,7 @@
 <script>
 import { TmToolBar } from "@tendermint/ui"
 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
diff --git a/test/unit/specs/components/common/Page404.spec.js b/test/unit/specs/components/common/Page404.spec.js
index 10d1d58f59..ca2fa46cf6 100644
--- a/test/unit/specs/components/common/Page404.spec.js
+++ b/test/unit/specs/components/common/Page404.spec.js
@@ -13,11 +13,12 @@ describe("Page404", () => {
   })
 
   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()
-    // console.log(wrapper.vm.$el)
-    // console.log(htmlBeautify(wrapper.html()))
-    // expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/common/PagePreferences.spec.js b/test/unit/specs/components/common/PagePreferences.spec.js
index 9ea6b38c18..853782a2f2 100644
--- a/test/unit/specs/components/common/PagePreferences.spec.js
+++ b/test/unit/specs/components/common/PagePreferences.spec.js
@@ -18,6 +18,10 @@ describe("PagePreferences", () => {
   })
 
   it("has the expected html structure if connected", async () => {
+    // after importing the @tendermint/ui components  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(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/monitor/PageBlocks.spec.js b/test/unit/specs/components/monitor/PageBlocks.spec.js
index 1ca59673d6..4540b74869 100644
--- a/test/unit/specs/components/monitor/PageBlocks.spec.js
+++ b/test/unit/specs/components/monitor/PageBlocks.spec.js
@@ -47,7 +47,10 @@ describe("PageBlocks", () => {
   })
 
   it("has the expected html structure", async () => {
-    await wrapper.vm.$nextTick()
+    // 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()
   })
diff --git a/test/unit/specs/components/staking/PageBond.spec.js b/test/unit/specs/components/staking/PageBond.spec.js
index 2eb9759564..4881b18c7e 100644
--- a/test/unit/specs/components/staking/PageBond.spec.js
+++ b/test/unit/specs/components/staking/PageBond.spec.js
@@ -46,6 +46,10 @@ describe("PageBond", () => {
   })
 
   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(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/staking/PageDelegate.spec.js b/test/unit/specs/components/staking/PageDelegate.spec.js
index abe60d1e06..3940367f9b 100644
--- a/test/unit/specs/components/staking/PageDelegate.spec.js
+++ b/test/unit/specs/components/staking/PageDelegate.spec.js
@@ -31,7 +31,10 @@ describe("PageDelegate", () => {
   })
 
   it("has the expected html structure", async () => {
-    await wrapper.vm.$nextTick()
+    // 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(wrapper.vm.$el).toMatchSnapshot()
   })
diff --git a/test/unit/specs/components/staking/PageStaking.spec.js b/test/unit/specs/components/staking/PageStaking.spec.js
index 511e010827..31304ffbda 100644
--- a/test/unit/specs/components/staking/PageStaking.spec.js
+++ b/test/unit/specs/components/staking/PageStaking.spec.js
@@ -18,6 +18,10 @@ describe("PageStaking", () => {
   })
 
   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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageSend.spec.js b/test/unit/specs/components/wallet/PageSend.spec.js
index 33a1a3428f..c1fb11de29 100644
--- a/test/unit/specs/components/wallet/PageSend.spec.js
+++ b/test/unit/specs/components/wallet/PageSend.spec.js
@@ -47,6 +47,10 @@ describe("PageSend", () => {
   })
 
   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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageTransactions.spec.js b/test/unit/specs/components/wallet/PageTransactions.spec.js
index 27ce7cd4f1..1e2cc0f2b0 100644
--- a/test/unit/specs/components/wallet/PageTransactions.spec.js
+++ b/test/unit/specs/components/wallet/PageTransactions.spec.js
@@ -25,6 +25,10 @@ describe("PageTransactions", () => {
   })
 
   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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageWallet.spec.js b/test/unit/specs/components/wallet/PageWallet.spec.js
index 841c093035..00034cddd4 100644
--- a/test/unit/specs/components/wallet/PageWallet.spec.js
+++ b/test/unit/specs/components/wallet/PageWallet.spec.js
@@ -32,6 +32,10 @@ describe("PageWallet", () => {
   })
 
   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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
@@ -48,6 +52,10 @@ describe("PageWallet", () => {
   it("should filter the balances", async () => {
     store.commit("setSearchVisible", ["balances", true])
     store.commit("setSearchQuery", ["balances", "atom"])
+    // 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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(["ATOM"])
@@ -105,6 +113,10 @@ describe("PageWallet", () => {
   })
 
   it("has shows the correct number of staked tokens", 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()
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(

From c366bb4c67d7b7b0c59d55e16df67f07ccf25ac6 Mon Sep 17 00:00:00 2001
From: Billy Rennekamp <billy.rennekamp@gmail.com>
Date: Tue, 26 Jun 2018 13:52:20 +0200
Subject: [PATCH 31/31] copy paste

---
 app/src/renderer/components/common/TmToolBar.vue           | 3 ---
 test/unit/specs/components/monitor/PageBlocks.spec.js      | 3 ++-
 test/unit/specs/components/staking/PageDelegate.spec.js    | 3 ++-
 test/unit/specs/components/staking/PageStaking.spec.js     | 2 +-
 test/unit/specs/components/wallet/PageSend.spec.js         | 2 +-
 test/unit/specs/components/wallet/PageTransactions.spec.js | 2 +-
 test/unit/specs/components/wallet/PageWallet.spec.js       | 6 +++---
 7 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/src/renderer/components/common/TmToolBar.vue b/app/src/renderer/components/common/TmToolBar.vue
index c8ab143728..a2d14b5ecb 100644
--- a/app/src/renderer/components/common/TmToolBar.vue
+++ b/app/src/renderer/components/common/TmToolBar.vue
@@ -17,9 +17,6 @@ export default {
   components: {
     TmToolBar
   },
-  mounted() {
-    // console.log(TmToolBar)
-  },
   methods: {
     enableModalHelp() {
       this.$store.commit("setModalHelp", true)
diff --git a/test/unit/specs/components/monitor/PageBlocks.spec.js b/test/unit/specs/components/monitor/PageBlocks.spec.js
index 4540b74869..fae0eb7998 100644
--- a/test/unit/specs/components/monitor/PageBlocks.spec.js
+++ b/test/unit/specs/components/monitor/PageBlocks.spec.js
@@ -50,7 +50,8 @@ describe("PageBlocks", () => {
     // 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()
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
     wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
diff --git a/test/unit/specs/components/staking/PageDelegate.spec.js b/test/unit/specs/components/staking/PageDelegate.spec.js
index 3940367f9b..385329b649 100644
--- a/test/unit/specs/components/staking/PageDelegate.spec.js
+++ b/test/unit/specs/components/staking/PageDelegate.spec.js
@@ -34,7 +34,8 @@ describe("PageDelegate", () => {
     // 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()
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
diff --git a/test/unit/specs/components/staking/PageStaking.spec.js b/test/unit/specs/components/staking/PageStaking.spec.js
index 31304ffbda..a8487e3607 100644
--- a/test/unit/specs/components/staking/PageStaking.spec.js
+++ b/test/unit/specs/components/staking/PageStaking.spec.js
@@ -21,7 +21,7 @@ describe("PageStaking", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageSend.spec.js b/test/unit/specs/components/wallet/PageSend.spec.js
index c1fb11de29..6191fcb148 100644
--- a/test/unit/specs/components/wallet/PageSend.spec.js
+++ b/test/unit/specs/components/wallet/PageSend.spec.js
@@ -50,7 +50,7 @@ describe("PageSend", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageTransactions.spec.js b/test/unit/specs/components/wallet/PageTransactions.spec.js
index 1e2cc0f2b0..76d737302e 100644
--- a/test/unit/specs/components/wallet/PageTransactions.spec.js
+++ b/test/unit/specs/components/wallet/PageTransactions.spec.js
@@ -28,7 +28,7 @@ describe("PageTransactions", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
diff --git a/test/unit/specs/components/wallet/PageWallet.spec.js b/test/unit/specs/components/wallet/PageWallet.spec.js
index 00034cddd4..540793cc24 100644
--- a/test/unit/specs/components/wallet/PageWallet.spec.js
+++ b/test/unit/specs/components/wallet/PageWallet.spec.js
@@ -35,7 +35,7 @@ describe("PageWallet", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
@@ -55,7 +55,7 @@ describe("PageWallet", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(["ATOM"])
@@ -116,7 +116,7 @@ describe("PageWallet", () => {
     // 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()
+    // this has occured across multiple tests
     await wrapper.vm.$nextTick()
     wrapper.update()
     expect(