From a6d4106dbcf342113369b0e4b61e249600e0d293 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 12 Feb 2020 18:44:08 +0100
Subject: [PATCH 01/28] add multidenom rewards to tmbalance & livalidator

---
 src/components/common/TmBalance.vue           | 53 ++++++++++++++++---
 src/components/staking/LiValidator.vue        | 18 ++++++-
 src/components/staking/TableValidators.vue    | 41 ++++++++++++--
 .../__snapshots__/TmBalance.spec.js.snap      |  2 +
 .../TableValidators.spec.js.snap              | 15 ++++++
 5 files changed, 115 insertions(+), 14 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index d5e2efbc3e..80e8ec0151 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -32,7 +32,13 @@
               </div>
 
               <div v-if="overview.totalRewards" class="rewards">
-                <h3>Total Rewards</h3>
+                <h3>
+                  {{
+                    isMultiDenomReward
+                      ? `Total Rewards in ${stakingDenom}`
+                      : `Total Rewards`
+                  }}
+                </h3>
                 <h2>+{{ overview.totalRewards | shortDecimals | noBlanks }}</h2>
               </div>
             </div>
@@ -48,6 +54,11 @@
               >
                 <p class="token-denom">{{ balance.denom }}</p>
                 <p class="token-balance">{{ balance.amount }}</p>
+                <p class="rewards">
+                  +{{
+                    calculateTotalRewardsDenom(balance.denom) | shortDecimals
+                  }}
+                </p>
               </div>
             </div>
           </div>
@@ -117,6 +128,7 @@ export default {
       selectedTokenFiatValue: `Tokens Total Fiat Value`,
       selectedFiatCurrency: `EUR`, // EUR is our default fiat currency
       showTutorial: false,
+      rewards: [],
       cosmosTokensTutorial: {
         fullguide: `https://lunie.io/guides/how-to-get-tokens/`,
         background: `red`,
@@ -214,6 +226,15 @@ export default {
       } else {
         return [this.stakingDenom]
       }
+    },
+    isMultiDenomReward() {
+      if (this.overview.rewards && this.overview.rewards.length > 0) {
+        return this.overview.rewards[0].denom !== this.overview.rewards[1].denom
+          ? true
+          : false
+      } else {
+        return false
+      }
     }
   },
   methods: {
@@ -228,6 +249,17 @@ export default {
     },
     hideTutorial() {
       this.showTutorial = false
+    },
+    calculateTotalRewardsDenom(denom) {
+      if (this.overview.rewards && this.overview.rewards.length > 0) {
+        let rewardsAccumulator = 0
+        this.overview.rewards
+          .filter(reward => reward.denom === denom.toLowerCase())
+          .forEach(reward => {
+            rewardsAccumulator += parseFloat(reward.amount)
+          })
+        return rewardsAccumulator
+      }
     }
   },
   apollo: {
@@ -238,6 +270,10 @@ export default {
             totalRewards
             liquidStake
             totalStake
+            rewards {
+              amount
+              denom
+            }
           }
         }
       `,
@@ -291,7 +327,8 @@ export default {
         }
         return {
           ...data.overview,
-          totalRewards: Number(data.overview.totalRewards)
+          totalRewards: Number(data.overview.totalRewards),
+          rewards: data.overview.rewards
         }
       },
       /* istanbul ignore next */
@@ -423,7 +460,6 @@ export default {
 
 .token-denom {
   font-size: 12px;
-  float: left;
 }
 
 .token-balance {
@@ -436,6 +472,11 @@ export default {
   top: -0.7rem;
 }
 
+p.rewards {
+  color: var(--success);
+  font-size: var(--s);
+}
+
 .rewards h2 {
   color: var(--success);
   font-size: var(--m);
@@ -459,6 +500,7 @@ export default {
   width: 100%;
   border-bottom: 1px solid var(--bc-dim);
   border-top: 1px solid var(--bc-dim);
+  margin-top: 1rem;
   margin-bottom: 2rem;
 }
 
@@ -553,11 +595,6 @@ export default {
     width: 100%;
   }
 
-  /* This doesn't work */
-  /* .scroll > .scroll-item {
-    flex: 0 0 auto;
-  } */
-
   .scroll > .row > div {
     margin-right: 3rem;
   }
diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 41c43b43a9..53083721a1 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -43,7 +43,12 @@
             {{ delegation.amount | shortDecimals }}
           </h4>
           <h5 v-if="rewards.amount > 0.001">
-            +{{ rewards.amount | shortDecimals }}
+            <span v-if="isMultiDenomReward"
+              >+{{
+                shortDecimals(rewards.amount).concat(` ${stakingDenom}`)
+              }}</span
+            >
+            <span v-else>+{{ rewards.amount | shortDecimals }}</span>
           </h5>
         </div>
       </div>
@@ -94,10 +99,19 @@ export default {
       type: String,
       /* istanbul ignore next */
       default: () => "returns"
+    },
+    isMultiDenomReward: {
+      type: Boolean,
+      default: false
+    },
+    stakingDenom: {
+      type: String,
+      default: ""
     }
   },
   methods: {
-    percent
+    percent,
+    shortDecimals
   }
 }
 </script>
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index abb36d3895..176497dc95 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -21,6 +21,8 @@
           :delegation="getDelegation(validator)"
           :rewards="getRewards(validator)"
           :show-on-mobile="showOnMobile"
+          :is-multi-denom-reward="isMultiDenomReward"
+          :staking-denom="stakingDenom"
         />
       </tbody>
     </table>
@@ -29,6 +31,7 @@
 
 <script>
 import { mapGetters } from "vuex"
+import { toMicroDenom } from "src/scripts/common"
 import orderBy from "lodash.orderby"
 import LiValidator from "staking/LiValidator"
 import PanelSort from "staking/PanelSort"
@@ -60,7 +63,8 @@ export default {
       property: `expectedReturns`,
       order: `desc`
     },
-    showing: 15
+    showing: 15,
+    stakingDenom: ""
   }),
   computed: {
     ...mapGetters([`address`, `network`]),
@@ -100,6 +104,13 @@ export default {
           tooltip: `Percentage of voting shares`
         }
       ]
+    },
+    isMultiDenomReward() {
+      if (this.rewards && this.rewards.length > 0) {
+        return this.rewards[0].denom !== this.rewards[1].denom ? true : false
+      } else {
+        return false
+      }
     }
   },
   watch: {
@@ -123,9 +134,9 @@ export default {
       )
     },
     getRewards({ operatorAddress }) {
-      return this.rewards.find(
-        ({ validator }) => validator.operatorAddress === operatorAddress
-      )
+      return this.rewards
+        .filter(({ denom }) => denom === toMicroDenom(this.stakingDenom))
+        .find(({ validator }) => validator.operatorAddress === operatorAddress)
     }
   },
   apollo: {
@@ -137,6 +148,7 @@ export default {
               operatorAddress
             }
             amount
+            denom
           }
         }
       `,
@@ -153,6 +165,27 @@ export default {
         return result.rewards || []
       }
     },
+    stakingDenom: {
+      query: gql`
+        query Network($networkId: String!) {
+          network(id: $networkId) {
+            id
+            stakingDenom
+          }
+        }
+      `,
+      /* istanbul ignore next */
+      variables() {
+        return {
+          networkId: this.network
+        }
+      },
+      /* istanbul ignore next */
+      update(data) {
+        if (!data.network) return ""
+        return data.network.stakingDenom
+      }
+    },
     $subscribe: {
       blockAdded: {
         variables() {
diff --git a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
index 8fc0df6f45..d28f3643ed 100644
--- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
+++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
@@ -140,7 +140,9 @@ exports[`TmBalance show the balance header when signed in 1`] = `
               class="rewards"
             >
               <h3>
+                
                 Total Rewards
+              
               </h3>
                
               <h2>
diff --git a/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap b/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
index e8a4989afb..250d29e34d 100644
--- a/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
+++ b/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
@@ -22,6 +22,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="0"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -29,6 +30,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="1"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -36,6 +38,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="2"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -43,6 +46,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="3"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -50,6 +54,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="4"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -57,6 +62,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="5"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -64,6 +70,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="6"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -71,6 +78,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="7"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -78,6 +86,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="8"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -85,6 +94,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="9"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -92,6 +102,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="10"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -99,6 +110,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="11"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -106,6 +118,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="12"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -113,6 +126,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="13"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
       <livalidator-stub
@@ -120,6 +134,7 @@ exports[`TableValidators shows a validator table 1`] = `
         index="14"
         rewards="[object Object]"
         showonmobile="returns"
+        stakingdenom=""
         validator="[object Object]"
       />
     </tbody>

From d4cad6ee31e119ac024cbe0e6ccff697c79adca4 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Thu, 13 Feb 2020 12:48:38 +0100
Subject: [PATCH 02/28] fix tomicrodenom

---
 src/components/staking/TableValidators.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index 176497dc95..9d8d33d2dc 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -125,6 +125,7 @@ export default {
     this.$apollo.queries.rewards.startPolling(1000 * 60 * 5)
   },
   methods: {
+    toMicroDenom,
     loadMore() {
       this.showing += 10
     },
@@ -134,9 +135,13 @@ export default {
       )
     },
     getRewards({ operatorAddress }) {
-      return this.rewards
-        .filter(({ denom }) => denom === toMicroDenom(this.stakingDenom))
-        .find(({ validator }) => validator.operatorAddress === operatorAddress)
+      if (this.rewards) {
+        return this.rewards
+          .filter(({ denom }) => denom === this.toMicroDenom(this.stakingDenom))
+          .find(
+            ({ validator }) => validator.operatorAddress === operatorAddress
+          )
+      }
     }
   },
   apollo: {

From bc86a9c9efe6becf9ba4eb396c6fdcd709db7fdb Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Thu, 13 Feb 2020 13:37:44 +0100
Subject: [PATCH 03/28] fix responsiveness but getting pyramid

---
 src/components/common/TmBalance.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 80e8ec0151..634cc41a8b 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -44,7 +44,7 @@
             </div>
             <div
               v-if="formattedBalances.length > 0"
-              id="scroll-item"
+              id="multidenom-rewards"
               class="row small-container tokens-div scroll-item"
             >
               <div
@@ -548,6 +548,15 @@ p.rewards {
   background-color: rgba(255, 255, 255, 0.02);
 }
 
+@media screen and (max-width: 1168px) {
+  div.tokens-div {
+    position: initial;
+  }
+  #multidenom-rewards {
+    margin-top: 0.3rem;
+  }
+}
+
 @media screen and (max-width: 667px) {
   .balance-header {
     display: flex;
@@ -600,7 +609,7 @@ p.rewards {
   }
 
   .tokens-div {
-    position: inherit;
+    position: relative;
     margin: 0;
     top: 0;
   }
@@ -609,6 +618,10 @@ p.rewards {
     float: none;
   }
 
+  #multidenom-rewards {
+    margin-top: 4.3rem;
+  }
+
   .currency-selector.tm-form-group {
     width: 40px;
     right: 2.5rem;
@@ -629,6 +642,8 @@ p.rewards {
     justify-content: space-evenly;
     padding: 1rem 0;
     text-align: center;
+    height: 90px;
+    position: absolute;
   }
   .tutorial-container {
     padding-right: 1rem;

From a6efd56b3f270e0f434c37180efee51f75a39b32 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Thu, 13 Feb 2020 14:12:27 +0100
Subject: [PATCH 04/28] add tests

---
 src/components/staking/TableValidators.vue    | 15 +++++++----
 .../specs/components/common/TmBalance.spec.js | 25 ++++++++++++++++++-
 .../__snapshots__/TmBalance.spec.js.snap      |  2 +-
 .../staking/TableValidators.spec.js           | 16 ++++++++++++
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index 9d8d33d2dc..cfe53c1c82 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -136,11 +136,16 @@ export default {
     },
     getRewards({ operatorAddress }) {
       if (this.rewards) {
-        return this.rewards
-          .filter(({ denom }) => denom === this.toMicroDenom(this.stakingDenom))
-          .find(
-            ({ validator }) => validator.operatorAddress === operatorAddress
-          )
+        return (
+          this.rewards
+            /* istanbul ignore next */
+            .filter(
+              ({ denom }) => denom === this.toMicroDenom(this.stakingDenom)
+            )
+            .find(
+              ({ validator }) => validator.operatorAddress === operatorAddress
+            )
+        )
       }
     }
   },
diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js
index 489980c07c..3499b5b5cf 100644
--- a/tests/unit/specs/components/common/TmBalance.spec.js
+++ b/tests/unit/specs/components/common/TmBalance.spec.js
@@ -40,7 +40,21 @@ describe(`TmBalance`, () => {
       overview: {
         totalStake: 3210,
         liquidStake: 1230,
-        totalRewards: 1000.45
+        totalRewards: 1000.45,
+        rewards: [
+          {
+            amount: 1,
+            denom: `utoken1`
+          },
+          {
+            amount: 2,
+            denom: `utoken2`
+          },
+          {
+            amount: 1.5,
+            denom: `utoken1`
+          }
+        ]
       }
     })
   })
@@ -154,6 +168,10 @@ describe(`TmBalance`, () => {
     ])
   })
 
+  it(`should return true if rewards contain multiple denoms`, () => {
+    expect(wrapper.vm.isMultiDenomReward).toBe(true)
+  })
+
   it(`should show How To Get Tokens tutorial`, () => {
     wrapper.setData({
       showTutorial: false
@@ -169,4 +187,9 @@ describe(`TmBalance`, () => {
     wrapper.vm.hideTutorial()
     expect(wrapper.vm.showTutorial).toBe(false)
   })
+
+  it(`should calculate the total rewards amount for each denom when rewards contain multiple denoms`, () => {
+    const totalDenomRewards = wrapper.vm.calculateTotalRewardsDenom(`UTOKEN1`)
+    expect(totalDenomRewards).toBe(2.5)
+  })
 })
diff --git a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
index d28f3643ed..2d66966261 100644
--- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
+++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
@@ -141,7 +141,7 @@ exports[`TmBalance show the balance header when signed in 1`] = `
             >
               <h3>
                 
-                Total Rewards
+                Total Rewards in ATOM
               
               </h3>
                
diff --git a/tests/unit/specs/components/staking/TableValidators.spec.js b/tests/unit/specs/components/staking/TableValidators.spec.js
index 1a20ed4b46..85cf9dd8e6 100644
--- a/tests/unit/specs/components/staking/TableValidators.spec.js
+++ b/tests/unit/specs/components/staking/TableValidators.spec.js
@@ -52,6 +52,22 @@ describe(`TableValidators`, () => {
     expect(wrapper.vm.showingValidators[0].smallName).toBe(`cosmos1a`)
   })
 
+  it(`should return true if rewards contain multiple denoms`, () => {
+    wrapper.setData({
+      rewards: [
+        {
+          amount: 1,
+          denom: `utoken1`
+        },
+        {
+          amount: 2,
+          denom: `utoken2`
+        }
+      ]
+    })
+    expect(wrapper.vm.isMultiDenomReward).toBe(true)
+  })
+
   it(`should sort the delegates by selected property`, () => {
     wrapper.vm.sort.property = `operatorAddress`
     wrapper.vm.sort.order = `desc`

From 56831c91351874057c1d4d945077b723aa7a42ae Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Fri, 14 Feb 2020 10:31:10 +0100
Subject: [PATCH 05/28] handle when rewards are 0

---
 src/components/common/TmBalance.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 634cc41a8b..0057698194 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -31,7 +31,10 @@
                 <h2>{{ overview.liquidStake | shortDecimals | noBlanks }}</h2>
               </div>
 
-              <div v-if="overview.totalRewards" class="rewards">
+              <div
+                v-if="overview.totalRewards && overview.totalRewards > 0.001"
+                class="rewards"
+              >
                 <h3>
                   {{
                     isMultiDenomReward
@@ -54,7 +57,10 @@
               >
                 <p class="token-denom">{{ balance.denom }}</p>
                 <p class="token-balance">{{ balance.amount }}</p>
-                <p class="rewards">
+                <p
+                  v-if="calculateTotalRewardsDenom(balance.denom) > 0.001"
+                  class="rewards"
+                >
                   +{{
                     calculateTotalRewardsDenom(balance.denom) | shortDecimals
                   }}

From 3c5c0700c5d835178cc202708665452973befad9 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Fri, 14 Feb 2020 12:54:44 +0100
Subject: [PATCH 06/28] rewards avoid 0. select most relevant reward.terra

---
 src/components/common/TmBalance.vue           |  6 +++-
 src/components/staking/LiValidator.vue        | 17 +++++++----
 src/components/staking/PageValidator.vue      | 14 +++++++--
 src/components/staking/TableValidators.vue    |  6 ++--
 src/scripts/common.js                         |  6 ++++
 .../components/staking/LiValidator.spec.js    |  6 ++++
 .../staking/TableValidators.spec.js           |  2 ++
 .../TableValidators.spec.js.snap              | 30 +++++++++----------
 8 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 0057698194..781bea7bba 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -55,7 +55,9 @@
                 :key="balance.denom"
                 class="col"
               >
-                <p class="token-denom">{{ balance.denom }}</p>
+                <p class="token-denom">
+                  {{ balance.denom | removeUFromMicroDenom }}
+                </p>
                 <p class="token-balance">{{ balance.amount }}</p>
                 <p
                   v-if="calculateTotalRewardsDenom(balance.denom) > 0.001"
@@ -105,6 +107,7 @@
 <script>
 import { shortDecimals } from "scripts/num"
 import { noBlanks } from "src/filters"
+import { removeUFromMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import SendModal from "src/ActionModal/components/SendModal"
 import ModalWithdrawRewards from "src/ActionModal/components/ModalWithdrawRewards"
@@ -122,6 +125,7 @@ export default {
     ModalTutorial
   },
   filters: {
+    removeUFromMicroDenom,
     shortDecimals,
     noBlanks
   },
diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 53083721a1..5a9b38b439 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -42,11 +42,9 @@
           <h4>
             {{ delegation.amount | shortDecimals }}
           </h4>
-          <h5 v-if="rewards.amount > 0.001">
+          <h5 v-if="rewards.find(reward => reward.amount > 0.001)">
             <span v-if="isMultiDenomReward"
-              >+{{
-                shortDecimals(rewards.amount).concat(` ${stakingDenom}`)
-              }}</span
+              >+{{ selectMostRelevantReward(rewards) }}</span
             >
             <span v-else>+{{ rewards.amount | shortDecimals }}</span>
           </h5>
@@ -88,7 +86,7 @@ export default {
       default: () => ({})
     },
     rewards: {
-      type: Object,
+      type: Array,
       default: () => ({})
     },
     index: {
@@ -111,7 +109,14 @@ export default {
   },
   methods: {
     percent,
-    shortDecimals
+    shortDecimals,
+    selectMostRelevantReward(rewards) {
+      rewards.sort((a, b) => b.amount - a.amount)
+      // we return the reward with the highest amount
+      return shortDecimals(rewards[0].amount)
+        .toString()
+        .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
+    }
   }
 }
 </script>
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index d401caaf0e..9afb3a1d0b 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -54,7 +54,7 @@
               <div v-if="delegation.amount">
                 <h4>{{ delegation.amount | fullDecimals }}</h4>
                 <h5 v-if="rewards">
-                  +{{ rewards.amount | fullDecimals | noBlanks }}
+                  +{{ selectMostRelevantReward(rewards) | noBlanks }}
                 </h5>
               </div>
             </div>
@@ -307,6 +307,7 @@ export default {
   },
   methods: {
     shortDecimals,
+    fullDecimals,
     atoms,
     percent,
     fromNow,
@@ -329,6 +330,14 @@ export default {
     },
     handleIntercom() {
       this.$store.dispatch(`displayMessenger`)
+    },
+    selectMostRelevantReward(rewards) {
+      // this results in an infinite loop O.o
+      // rewards.sort( (a ,b) => b.amount - a.amount)
+      // we return the reward with the highest amount
+      return fullDecimals(rewards[0].amount)
+        .toString()
+        .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
     }
   },
   apollo: {
@@ -386,6 +395,7 @@ export default {
             operatorAddress: $operatorAddress
           ) {
             amount
+            denom
           }
         }
       `,
@@ -404,7 +414,7 @@ export default {
       update(result) {
         /* istanbul ignore next */
         return result.rewards && result.rewards.length > 0
-          ? result.rewards[0]
+          ? result.rewards
           : { amount: 0 }
       }
     },
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index cfe53c1c82..66ff599a7e 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -139,10 +139,10 @@ export default {
         return (
           this.rewards
             /* istanbul ignore next */
+            // .filter(
+            //   ({ denom }) => denom === this.toMicroDenom(this.stakingDenom)
+            // )
             .filter(
-              ({ denom }) => denom === this.toMicroDenom(this.stakingDenom)
-            )
-            .find(
               ({ validator }) => validator.operatorAddress === operatorAddress
             )
         )
diff --git a/src/scripts/common.js b/src/scripts/common.js
index 3b889c4791..d71c6f869c 100644
--- a/src/scripts/common.js
+++ b/src/scripts/common.js
@@ -54,3 +54,9 @@ export function toMicroDenom(denom) {
   }
   return lookup[denom] ? lookup[denom] : denom.toLowerCase()
 }
+
+export function removeUFromMicroDenom(denom) {
+  if (denom.startsWith(`u`)) {
+    return denom.slice(-3)
+  }
+}
diff --git a/tests/unit/specs/components/staking/LiValidator.spec.js b/tests/unit/specs/components/staking/LiValidator.spec.js
index 192e756429..a30d3a1965 100644
--- a/tests/unit/specs/components/staking/LiValidator.spec.js
+++ b/tests/unit/specs/components/staking/LiValidator.spec.js
@@ -65,6 +65,12 @@ describe(`LiValidator`, () => {
       localVue,
       propsData: {
         validator,
+        rewards: [
+          {
+            amount: 1,
+            denom: `token1`
+          }
+        ],
         index,
         showOnMobile: "returns"
       },
diff --git a/tests/unit/specs/components/staking/TableValidators.spec.js b/tests/unit/specs/components/staking/TableValidators.spec.js
index 85cf9dd8e6..49576a61b7 100644
--- a/tests/unit/specs/components/staking/TableValidators.spec.js
+++ b/tests/unit/specs/components/staking/TableValidators.spec.js
@@ -56,10 +56,12 @@ describe(`TableValidators`, () => {
     wrapper.setData({
       rewards: [
         {
+          validator: { name: "cosmos1a", operatorAddress: "cosmos1a" },
           amount: 1,
           denom: `utoken1`
         },
         {
+          validator: { name: "cosmos1a", operatorAddress: "cosmos1a" },
           amount: 2,
           denom: `utoken2`
         }
diff --git a/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap b/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
index 250d29e34d..7a5d89bdf4 100644
--- a/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
+++ b/tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap
@@ -20,7 +20,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="0"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -28,7 +28,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="1"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -36,7 +36,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="2"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -44,7 +44,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="3"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -52,7 +52,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="4"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -60,7 +60,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="5"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -68,7 +68,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="6"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -76,7 +76,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="7"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -84,7 +84,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="8"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -92,7 +92,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="9"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -100,7 +100,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="10"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -108,7 +108,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="11"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -116,7 +116,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="12"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -124,7 +124,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="13"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"
@@ -132,7 +132,7 @@ exports[`TableValidators shows a validator table 1`] = `
       <livalidator-stub
         delegation="[object Object]"
         index="14"
-        rewards="[object Object]"
+        rewards=""
         showonmobile="returns"
         stakingdenom=""
         validator="[object Object]"

From 3586c762e7251d37df03bd0d4bb3c039f7af1873 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Fri, 14 Feb 2020 13:09:52 +0100
Subject: [PATCH 07/28] fix infinite loop

---
 src/components/staking/PageValidator.vue | 26 ++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index 9afb3a1d0b..eef303ca40 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -252,6 +252,8 @@ export default {
     error: false,
     loaded: false,
     showTutorial: false,
+    isMostRelevantRewardSelected: false,
+    mostRelevantReward: ``,
     cosmosStakingTutorial: {
       fullguide: `https://lunie.io/guides/how-cosmos-staking-works/`,
       background: `blue`,
@@ -332,12 +334,24 @@ export default {
       this.$store.dispatch(`displayMessenger`)
     },
     selectMostRelevantReward(rewards) {
-      // this results in an infinite loop O.o
-      // rewards.sort( (a ,b) => b.amount - a.amount)
-      // we return the reward with the highest amount
-      return fullDecimals(rewards[0].amount)
-        .toString()
-        .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
+      if (
+        !this.isMostRelevantRewardSelected &&
+        this.rewards &&
+        this.rewards.length > 0
+      ) {
+        // this results in an infinite loop O.o
+        rewards.sort((a, b) => b.amount - a.amount)
+        // avoid infinite loop
+        this.isMostRelevantRewardSelected = true
+        // we return the reward with the highest amount
+        this.mostRelevantReward = this.fullDecimals(rewards[0].amount)
+          .toString()
+          .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
+      } else {
+        if (this.mostRelevantReward !== "") {
+          return this.mostRelevantReward
+        }
+      }
     }
   },
   apollo: {

From 7d8fe2d331ad22ef093f6cd16374de6a04c6245e Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Fri, 14 Feb 2020 13:46:24 +0100
Subject: [PATCH 08/28] fixes. make cosmos compatible

---
 src/components/common/TmBalance.vue        |  4 +---
 src/components/staking/LiValidator.vue     | 11 ++++++-----
 src/components/staking/PageValidator.vue   | 17 +++++++++++++++--
 src/components/staking/TableValidators.vue |  2 +-
 src/scripts/common.js                      |  2 +-
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 781bea7bba..c7ea7cc5f4 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -239,9 +239,7 @@ export default {
     },
     isMultiDenomReward() {
       if (this.overview.rewards && this.overview.rewards.length > 0) {
-        return this.overview.rewards[0].denom !== this.overview.rewards[1].denom
-          ? true
-          : false
+        return this.overview.rewards[0].denom ? true : false
       } else {
         return false
       }
diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 5a9b38b439..74783d17e9 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -43,10 +43,7 @@
             {{ delegation.amount | shortDecimals }}
           </h4>
           <h5 v-if="rewards.find(reward => reward.amount > 0.001)">
-            <span v-if="isMultiDenomReward"
-              >+{{ selectMostRelevantReward(rewards) }}</span
-            >
-            <span v-else>+{{ rewards.amount | shortDecimals }}</span>
+            <span>+{{ selectMostRelevantReward(rewards) }}</span>
           </h5>
         </div>
       </div>
@@ -115,7 +112,11 @@ export default {
       // we return the reward with the highest amount
       return shortDecimals(rewards[0].amount)
         .toString()
-        .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
+        .concat(
+          this.isMultiDenomReward
+            ? ` ${rewards[0].denom.slice(-3).toUpperCase()}`
+            : ``
+        )
     }
   }
 }
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index eef303ca40..78581c0847 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -198,6 +198,7 @@ import moment from "moment"
 import { mapGetters, mapState } from "vuex"
 import { atoms, shortDecimals, fullDecimals, percent } from "scripts/num"
 import { noBlanks, fromNow } from "src/filters"
+import { removeUFromMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import DelegationModal from "src/ActionModal/components/DelegationModal"
 import UndelegationModal from "src/ActionModal/components/UndelegationModal"
@@ -301,13 +302,21 @@ export default {
   computed: {
     ...mapState([`connection`]),
     ...mapGetters([`network`]),
-    ...mapGetters({ userAddress: `address` })
+    ...mapGetters({ userAddress: `address` }),
+    isMultiDenomReward() {
+      if (this.rewards && this.rewards.length > 0) {
+        return this.rewards[0].denom ? true : false
+      } else {
+        return false
+      }
+    }
   },
   mounted() {
     this.$apollo.queries.rewards.refetch()
     this.$apollo.queries.delegation.refetch()
   },
   methods: {
+    removeUFromMicroDenom,
     shortDecimals,
     fullDecimals,
     atoms,
@@ -346,7 +355,11 @@ export default {
         // we return the reward with the highest amount
         this.mostRelevantReward = this.fullDecimals(rewards[0].amount)
           .toString()
-          .concat(` ${rewards[0].denom.slice(-3).toUpperCase()}`)
+          .concat(
+            this.isMultiDenomReward
+              ? ` ${this.removeUFromMicroDenom(rewards[0].denom).toUpperCase()}`
+              : ``
+          )
       } else {
         if (this.mostRelevantReward !== "") {
           return this.mostRelevantReward
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index 66ff599a7e..f98682bcdb 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -107,7 +107,7 @@ export default {
     },
     isMultiDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
-        return this.rewards[0].denom !== this.rewards[1].denom ? true : false
+        return this.rewards[0].denom ? true : false
       } else {
         return false
       }
diff --git a/src/scripts/common.js b/src/scripts/common.js
index d71c6f869c..ff4858fea6 100644
--- a/src/scripts/common.js
+++ b/src/scripts/common.js
@@ -57,6 +57,6 @@ export function toMicroDenom(denom) {
 
 export function removeUFromMicroDenom(denom) {
   if (denom.startsWith(`u`)) {
-    return denom.slice(-3)
+    return denom.slice(1, denom.length)
   }
 }

From 75f8b7ea879e7cd7e2067ee83e6fca65e63372f3 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Fri, 14 Feb 2020 16:58:53 +0100
Subject: [PATCH 09/28] change to only display staking denom rewards

---
 src/components/staking/LiValidator.vue     | 31 +++++++-----
 src/components/staking/PageValidator.vue   | 59 ++++++++++++----------
 src/components/staking/TableValidators.vue |  2 +-
 3 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 74783d17e9..0cdbc3f786 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -42,8 +42,16 @@
           <h4>
             {{ delegation.amount | shortDecimals }}
           </h4>
-          <h5 v-if="rewards.find(reward => reward.amount > 0.001)">
-            <span>+{{ selectMostRelevantReward(rewards) }}</span>
+          <h5
+            v-if="
+              rewards.find(
+                reward =>
+                  reward.denom === toMicroDenom(stakingDenom) &&
+                  reward.amount > 0.001
+              )
+            "
+          >
+            <span>+{{ filterStakingDenomReward(rewards) }}</span>
           </h5>
         </div>
       </div>
@@ -61,6 +69,7 @@
 
 <script>
 import { percent, shortDecimals, atoms } from "scripts/num"
+import { toMicroDenom } from "src/scripts/common"
 import Avatar from "common/Avatar"
 export default {
   name: `li-validator`,
@@ -107,16 +116,14 @@ export default {
   methods: {
     percent,
     shortDecimals,
-    selectMostRelevantReward(rewards) {
-      rewards.sort((a, b) => b.amount - a.amount)
-      // we return the reward with the highest amount
-      return shortDecimals(rewards[0].amount)
-        .toString()
-        .concat(
-          this.isMultiDenomReward
-            ? ` ${rewards[0].denom.slice(-3).toUpperCase()}`
-            : ``
-        )
+    toMicroDenom,
+    filterStakingDenomReward(rewards) {
+      const stakingDenomsRewards = rewards.filter(
+        reward => reward.denom === this.toMicroDenom(this.stakingDenom)
+      )
+      return shortDecimals(stakingDenomsRewards[0].amount).concat(
+        this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
+      )
     }
   }
 }
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index 78581c0847..d1d5572745 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -54,7 +54,7 @@
               <div v-if="delegation.amount">
                 <h4>{{ delegation.amount | fullDecimals }}</h4>
                 <h5 v-if="rewards">
-                  +{{ selectMostRelevantReward(rewards) | noBlanks }}
+                  +{{ filterStakingDenomReward(rewards) | noBlanks }}
                 </h5>
               </div>
             </div>
@@ -198,7 +198,7 @@ import moment from "moment"
 import { mapGetters, mapState } from "vuex"
 import { atoms, shortDecimals, fullDecimals, percent } from "scripts/num"
 import { noBlanks, fromNow } from "src/filters"
-import { removeUFromMicroDenom } from "src/scripts/common"
+import { toMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import DelegationModal from "src/ActionModal/components/DelegationModal"
 import UndelegationModal from "src/ActionModal/components/UndelegationModal"
@@ -305,7 +305,7 @@ export default {
     ...mapGetters({ userAddress: `address` }),
     isMultiDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
-        return this.rewards[0].denom ? true : false
+        return !this.rewards.length > 1 ? true : false
       } else {
         return false
       }
@@ -316,7 +316,7 @@ export default {
     this.$apollo.queries.delegation.refetch()
   },
   methods: {
-    removeUFromMicroDenom,
+    toMicroDenom,
     shortDecimals,
     fullDecimals,
     atoms,
@@ -342,28 +342,14 @@ export default {
     handleIntercom() {
       this.$store.dispatch(`displayMessenger`)
     },
-    selectMostRelevantReward(rewards) {
-      if (
-        !this.isMostRelevantRewardSelected &&
-        this.rewards &&
-        this.rewards.length > 0
-      ) {
-        // this results in an infinite loop O.o
-        rewards.sort((a, b) => b.amount - a.amount)
-        // avoid infinite loop
-        this.isMostRelevantRewardSelected = true
-        // we return the reward with the highest amount
-        this.mostRelevantReward = this.fullDecimals(rewards[0].amount)
-          .toString()
-          .concat(
-            this.isMultiDenomReward
-              ? ` ${this.removeUFromMicroDenom(rewards[0].denom).toUpperCase()}`
-              : ``
-          )
-      } else {
-        if (this.mostRelevantReward !== "") {
-          return this.mostRelevantReward
-        }
+    filterStakingDenomReward(rewards) {
+      if (this.rewards && this.rewards.length > 0) {
+        const stakingDenomsRewards = rewards.filter(
+          reward => reward.denom === this.toMicroDenom(this.stakingDenom)
+        )
+        return shortDecimals(stakingDenomsRewards[0].amount).concat(
+          this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
+        )
       }
     }
   },
@@ -466,6 +452,27 @@ export default {
         }
       }
     },
+    stakingDenom: {
+      query: gql`
+        query Network($networkId: String!) {
+          network(id: $networkId) {
+            id
+            stakingDenom
+          }
+        }
+      `,
+      /* istanbul ignore next */
+      variables() {
+        return {
+          networkId: this.network
+        }
+      },
+      /* istanbul ignore next */
+      update(data) {
+        if (!data.network) return ""
+        return data.network.stakingDenom
+      }
+    },
     $subscribe: {
       blockAdded: {
         variables() {
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index f98682bcdb..66ff599a7e 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -107,7 +107,7 @@ export default {
     },
     isMultiDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
-        return this.rewards[0].denom ? true : false
+        return this.rewards[0].denom !== this.rewards[1].denom ? true : false
       } else {
         return false
       }

From e07b22f6b8261b03f0d65b0e6d81ae105c05243b Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 11:28:53 +0100
Subject: [PATCH 10/28] lint

---
 src/components/common/TmBalance.vue                 | 13 ++++++++++---
 src/components/common/TmSessionSignUp.vue           |  2 +-
 src/components/common/TmSessionSignUpPassword.vue   |  2 +-
 src/components/common/TmSessionSignUpSeed.vue       |  2 +-
 .../specs/components/common/TmSessionSignUp.spec.js |  4 ++--
 .../common/TmSessionSignUpPassword.spec.js          |  2 +-
 .../components/common/TmSessionSignUpSeed.spec.js   |  2 +-
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 0724f54dcf..997ac7436a 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -46,7 +46,11 @@
                       : `Total Rewards`
                   }}
                 </h3>
-                <h2>+{{ overview.totalRewards | bigFigureOrShortDecimals | noBlanks }}</h2>
+                <h2>
+                  +{{
+                    overview.totalRewards | bigFigureOrShortDecimals | noBlanks
+                  }}
+                </h2>
               </div>
             </div>
             <div
@@ -68,7 +72,8 @@
                   class="rewards"
                 >
                   +{{
-                    calculateTotalRewardsDenom(balance.denom) | bigFigureOrShortDecimals
+                    calculateTotalRewardsDenom(balance.denom)
+                      | bigFigureOrShortDecimals
                   }}
                 </p>
               </div>
@@ -243,7 +248,9 @@ export default {
     },
     isMultiDenomReward() {
       if (this.overview.rewards && this.overview.rewards.length > 0) {
-        return this.overview.rewards[0].denom !== this.overview.rewards[1].denom ? true : false
+        return this.overview.rewards[0].denom !== this.overview.rewards[1].denom
+          ? true
+          : false
       } else {
         return false
       }
diff --git a/src/components/common/TmSessionSignUp.vue b/src/components/common/TmSessionSignUp.vue
index ec0f546c65..89b8a04556 100644
--- a/src/components/common/TmSessionSignUp.vue
+++ b/src/components/common/TmSessionSignUp.vue
@@ -25,8 +25,8 @@
           >
             <TmField
               id="sign-up-name"
-              v-focus
               v-model.trim="fieldName"
+              v-focus
               type="text"
               placeholder="Must be at least 3 characters"
               vue-focus="vue-focus"
diff --git a/src/components/common/TmSessionSignUpPassword.vue b/src/components/common/TmSessionSignUpPassword.vue
index 2d3ce0e664..c994ad6ac7 100644
--- a/src/components/common/TmSessionSignUpPassword.vue
+++ b/src/components/common/TmSessionSignUpPassword.vue
@@ -20,8 +20,8 @@
         >
           <TmField
             id="sign-up-password"
-            v-focus
             v-model="fieldPassword"
+            v-focus
             type="password"
             placeholder="Must be at least 10 characters"
           />
diff --git a/src/components/common/TmSessionSignUpSeed.vue b/src/components/common/TmSessionSignUpSeed.vue
index 2ae1b14808..3b80fe3b96 100644
--- a/src/components/common/TmSessionSignUpSeed.vue
+++ b/src/components/common/TmSessionSignUpSeed.vue
@@ -24,9 +24,9 @@
             <div class="field-checkbox-input">
               <label class="field-checkbox-label" for="sign-up-warning">
                 <input
-                  v-focus
                   id="sign-up-warning"
                   v-model="fieldWarning"
+                  v-focus
                   type="checkbox"
                 />
                 I understand that lost seeds cannot be recovered.</label
diff --git a/tests/unit/specs/components/common/TmSessionSignUp.spec.js b/tests/unit/specs/components/common/TmSessionSignUp.spec.js
index 9228d6cd94..09bbd5b2ef 100644
--- a/tests/unit/specs/components/common/TmSessionSignUp.spec.js
+++ b/tests/unit/specs/components/common/TmSessionSignUp.spec.js
@@ -2,14 +2,14 @@ import { createLocalVue, shallowMount } from "@vue/test-utils"
 import Vuelidate from "vuelidate"
 import TmSessionSignUp from "common/TmSessionSignUp"
 jest.mock("@lunie/cosmos-keys", () => ({
-  getWalletIndex: function () {
+  getWalletIndex: function() {
     return [{ name: `Happy Lunie User`, address: `xyz123` }]
   }
 }))
 
 describe(`TmSessionSignUp`, () => {
   const localVue = createLocalVue()
-  localVue.directive(`focus`, () => { })
+  localVue.directive(`focus`, () => {})
   localVue.use(Vuelidate)
 
   let wrapper, $store
diff --git a/tests/unit/specs/components/common/TmSessionSignUpPassword.spec.js b/tests/unit/specs/components/common/TmSessionSignUpPassword.spec.js
index 999107d7b9..e6434941fc 100644
--- a/tests/unit/specs/components/common/TmSessionSignUpPassword.spec.js
+++ b/tests/unit/specs/components/common/TmSessionSignUpPassword.spec.js
@@ -5,7 +5,7 @@ import TmSessionSignUpPassword from "common/TmSessionSignUpPassword"
 describe(`TmSessionSignUpPassword`, () => {
   const localVue = createLocalVue()
 
-  localVue.directive(`focus`, () => { })
+  localVue.directive(`focus`, () => {})
   localVue.use(Vuelidate)
 
   let wrapper, $store
diff --git a/tests/unit/specs/components/common/TmSessionSignUpSeed.spec.js b/tests/unit/specs/components/common/TmSessionSignUpSeed.spec.js
index 1d3cbcfff0..05e3a0c68a 100644
--- a/tests/unit/specs/components/common/TmSessionSignUpSeed.spec.js
+++ b/tests/unit/specs/components/common/TmSessionSignUpSeed.spec.js
@@ -4,7 +4,7 @@ import TmSessionSignUpSeed from "common/TmSessionSignUpSeed"
 
 describe(`TmSessionSignUpSeed`, () => {
   const localVue = createLocalVue()
-  localVue.directive(`focus`, () => { })
+  localVue.directive(`focus`, () => {})
   localVue.use(Vuelidate)
 
   let wrapper, $store

From 9221db4282a8f42838f5a277a45325c8ee401f12 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 11:32:00 +0100
Subject: [PATCH 11/28] fix remove u from micro denom

---
 src/scripts/common.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scripts/common.js b/src/scripts/common.js
index ff4858fea6..52389b3fc0 100644
--- a/src/scripts/common.js
+++ b/src/scripts/common.js
@@ -58,5 +58,7 @@ export function toMicroDenom(denom) {
 export function removeUFromMicroDenom(denom) {
   if (denom.startsWith(`u`)) {
     return denom.slice(1, denom.length)
+  } else {
+    return denom
   }
 }

From 8b504adef4b568f296367491408bfe1dd0071a9a Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 11:44:29 +0100
Subject: [PATCH 12/28] add big figure or short decimals for token balance

---
 src/components/common/TmBalance.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 997ac7436a..7805f786b2 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -66,7 +66,9 @@
                 <p class="token-denom">
                   {{ balance.denom | removeUFromMicroDenom }}
                 </p>
-                <p class="token-balance">{{ balance.amount }}</p>
+                <p class="token-balance">
+                  {{ balance.amount | bigFigureOrShortDecimals }}
+                </p>
                 <p
                   v-if="calculateTotalRewardsDenom(balance.denom) > 0.001"
                   class="rewards"

From 7271921ba718a436ddb46159959a10ee05b828d8 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 18:09:13 +0100
Subject: [PATCH 13/28] snapper the Ripper

---
 .../components/common/__snapshots__/TmBalance.spec.js.snap      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
index a1085788e5..dafc5fb2bf 100644
--- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
+++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
@@ -148,7 +148,9 @@ exports[`TmBalance show the balance header when signed in 1`] = `
               </h3>
                
               <h2>
+                
                 +1,000.45
+              
               </h2>
             </div>
           </div>

From 502b2b3dde294b7848c87e8ae6ccf8f08c8a4ae5 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 19:21:00 +0100
Subject: [PATCH 14/28] add tests

---
 src/components/staking/LiValidator.vue        | 12 ++---
 src/components/staking/PageValidator.vue      | 40 +++++++++--------
 src/components/staking/TableValidators.vue    | 12 ++---
 .../components/staking/LiValidator.spec.js    | 27 +++++++++++
 .../components/staking/PageValidator.spec.js  | 45 +++++++++++++++++++
 5 files changed, 107 insertions(+), 29 deletions(-)

diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 2cee7cc0f2..660c4a08c2 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -51,7 +51,7 @@
               )
             "
           >
-            <span>+{{ filterStakingDenomReward(rewards) }}</span>
+            <span>+{{ filterStakingDenomReward() }}</span>
           </h5>
         </div>
       </div>
@@ -94,10 +94,12 @@ export default {
       type: Object,
       required: true
     },
+    /* istanbul ignore next */
     delegation: {
       type: Object,
       default: () => ({})
     },
+    /* istanbul ignore next */
     rewards: {
       type: Array,
       default: () => ({})
@@ -106,9 +108,9 @@ export default {
       type: Number,
       required: true
     },
+    /* istanbul ignore next */
     showOnMobile: {
       type: String,
-      /* istanbul ignore next */
       default: () => "returns"
     },
     isMultiDenomReward: {
@@ -124,11 +126,11 @@ export default {
     toMicroDenom,
     bigFigureOrPercent,
     bigFigureOrShortDecimals,
-    filterStakingDenomReward(rewards) {
-      const stakingDenomsRewards = rewards.filter(
+    filterStakingDenomReward() {
+      const stakingDenomRewards = this.rewards.filter(
         reward => reward.denom === this.toMicroDenom(this.stakingDenom)
       )
-      return bigFigureOrShortDecimals(stakingDenomsRewards[0].amount).concat(
+      return bigFigureOrShortDecimals(stakingDenomRewards[0].amount).concat(
         this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
       )
     }
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index d1d5572745..11d143b3ad 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -54,7 +54,7 @@
               <div v-if="delegation.amount">
                 <h4>{{ delegation.amount | fullDecimals }}</h4>
                 <h5 v-if="rewards">
-                  +{{ filterStakingDenomReward(rewards) | noBlanks }}
+                  +{{ filterStakingDenomReward() | noBlanks }}
                 </h5>
               </div>
             </div>
@@ -305,7 +305,7 @@ export default {
     ...mapGetters({ userAddress: `address` }),
     isMultiDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
-        return !this.rewards.length > 1 ? true : false
+        return this.rewards.length > 1 ? true : false
       } else {
         return false
       }
@@ -324,12 +324,15 @@ export default {
     fromNow,
     noBlanks,
     moment,
+    /* istanbul ignore next */
     onDelegation() {
       this.$refs.delegationModal.open()
     },
+    /* istanbul ignore next */
     onUndelegation() {
       this.$refs.undelegationModal.open()
     },
+    /* istanbul ignore next */
     isBlankField(field, alternateFilter) {
       return field ? alternateFilter(field) : noBlanks(field)
     },
@@ -342,12 +345,12 @@ export default {
     handleIntercom() {
       this.$store.dispatch(`displayMessenger`)
     },
-    filterStakingDenomReward(rewards) {
+    filterStakingDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
-        const stakingDenomsRewards = rewards.filter(
+        const stakingDenomRewards = this.rewards.filter(
           reward => reward.denom === this.toMicroDenom(this.stakingDenom)
         )
-        return shortDecimals(stakingDenomsRewards[0].amount).concat(
+        return shortDecimals(stakingDenomRewards[0].amount).concat(
           this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
         )
       }
@@ -370,18 +373,19 @@ export default {
           }
         }
       `,
+      /* istanbul ignore next */
       skip() {
-        /* istanbul ignore next */
         return !this.userAddress
       },
+      /* istanbul ignore next */
       variables() {
-        /* istanbul ignore next */
         return {
           networkId: this.network,
           delegatorAddress: this.userAddress,
           operatorAddress: this.$route.params.validator
         }
       },
+      /* istanbul ignore next */
       update(result) {
         if (!result.delegation) {
           return {
@@ -412,20 +416,20 @@ export default {
           }
         }
       `,
+      /* istanbul ignore next */
       skip() {
-        /* istanbul ignore next */
         return !this.userAddress
       },
+      /* istanbul ignore next */
       variables() {
-        /* istanbul ignore next */
         return {
           networkId: this.network,
           delegatorAddress: this.userAddress,
           operatorAddress: this.$route.params.validator
         }
       },
+      /* istanbul ignore next */
       update(result) {
-        /* istanbul ignore next */
         return result.rewards && result.rewards.length > 0
           ? result.rewards
           : { amount: 0 }
@@ -433,19 +437,18 @@ export default {
     },
     validator: {
       query: ValidatorProfile,
+      /* istanbul ignore next */
       variables() {
-        /* istanbul ignore next */
         return {
           networkId: this.network,
           operatorAddress: this.$route.params.validator
         }
       },
+      /* istanbul ignore next */
       update(result) {
         if (!result.validator) return {}
 
-        /* istanbul ignore next */
         this.loaded = true
-        /* istanbul ignore next */
         return {
           ...result.validator,
           statusDetailed: getStatusText(result.validator.statusDetailed)
@@ -475,12 +478,13 @@ export default {
     },
     $subscribe: {
       blockAdded: {
+        /* istanbul ignore next */
         variables() {
-          /* istanbul ignore next */
           return {
             networkId: this.network
           }
         },
+        /* istanbul ignore next */
         query() {
           return gql`
             subscription($networkId: String!) {
@@ -491,26 +495,26 @@ export default {
             }
           `
         },
+        /* istanbul ignore next */
         result() {
-          /* istanbul ignore next */
           this.$apollo.queries.rewards.refetch()
         }
       },
       userTransactionAdded: {
+        /* istanbul ignore next */
         variables() {
-          /* istanbul ignore next */
           return {
             networkId: this.network,
             address: this.userAddress
           }
         },
+        /* istanbul ignore next */
         skip() {
-          /* istanbul ignore next */
           return !this.userAddress
         },
         query: UserTransactionAdded,
+        /* istanbul ignore next */
         result({ data }) {
-          /* istanbul ignore next */
           if (data.userTransactionAdded.success) {
             this.$apollo.queries.delegation.refetch()
           }
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index 66ff599a7e..a6b0d3ab30 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -31,7 +31,6 @@
 
 <script>
 import { mapGetters } from "vuex"
-import { toMicroDenom } from "src/scripts/common"
 import orderBy from "lodash.orderby"
 import LiValidator from "staking/LiValidator"
 import PanelSort from "staking/PanelSort"
@@ -125,7 +124,6 @@ export default {
     this.$apollo.queries.rewards.startPolling(1000 * 60 * 5)
   },
   methods: {
-    toMicroDenom,
     loadMore() {
       this.showing += 10
     },
@@ -139,9 +137,6 @@ export default {
         return (
           this.rewards
             /* istanbul ignore next */
-            // .filter(
-            //   ({ denom }) => denom === this.toMicroDenom(this.stakingDenom)
-            // )
             .filter(
               ({ validator }) => validator.operatorAddress === operatorAddress
             )
@@ -162,15 +157,18 @@ export default {
           }
         }
       `,
+      /* istanbul ignore next */
       skip() {
         return !this.address
       },
+      /* istanbul ignore next */
       variables() {
         return {
           networkId: this.network,
           delegatorAddress: this.address
         }
       },
+      /* istanbul ignore next */
       update: result => {
         return result.rewards || []
       }
@@ -198,11 +196,13 @@ export default {
     },
     $subscribe: {
       blockAdded: {
+        /* istanbul ignore next */
         variables() {
           return {
             networkId: this.network
           }
         },
+        /* istanbul ignore next */
         query() {
           return gql`
             subscription($networkId: String!) {
@@ -213,8 +213,8 @@ export default {
             }
           `
         },
+        /* istanbul ignore next */
         result() {
-          /* istanbul ignore next */
           this.$apollo.queries.rewards.refetch()
         }
       }
diff --git a/tests/unit/specs/components/staking/LiValidator.spec.js b/tests/unit/specs/components/staking/LiValidator.spec.js
index a30d3a1965..5ce4afca5b 100644
--- a/tests/unit/specs/components/staking/LiValidator.spec.js
+++ b/tests/unit/specs/components/staking/LiValidator.spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, createLocalVue } from "@vue/test-utils"
+import { toMicroDenom } from "scripts/common"
 import VueApollo from "vue-apollo"
 import LiValidator from "src/components/staking/LiValidator"
 
@@ -98,4 +99,30 @@ describe(`LiValidator`, () => {
     })
     expect(wrapper.find("avatar-stub").exists())
   })
+
+  it(`should filter the staking denom reward`, () => {
+    const rewards = [
+      {
+        amount: 1,
+        denom: `utoken1`
+      },
+      {
+        amount: 2,
+        denom: `utoken2`
+      },
+      {
+        amount: 3,
+        denom: `utoken3`
+      }
+    ]
+    const self = {
+      stakingDenom: `UTOKEN1`,
+      rewards: rewards,
+      toMicroDenom
+    }
+    const stakingDenomReward = LiValidator.methods.filterStakingDenomReward.call(
+      self
+    )
+    expect(stakingDenomReward).toEqual(`1`)
+  })
 })
diff --git a/tests/unit/specs/components/staking/PageValidator.spec.js b/tests/unit/specs/components/staking/PageValidator.spec.js
index 7474614070..6aa57c387b 100644
--- a/tests/unit/specs/components/staking/PageValidator.spec.js
+++ b/tests/unit/specs/components/staking/PageValidator.spec.js
@@ -1,4 +1,5 @@
 import PageValidator from "staking/PageValidator"
+import { toMicroDenom } from "scripts/common"
 import { shallowMount, createLocalVue } from "@vue/test-utils"
 
 const validator = {
@@ -124,6 +125,50 @@ describe(`PageValidator`, () => {
     PageValidator.methods.handleIntercom.call(self)
     expect(self.$store.dispatch).toHaveBeenCalledWith("displayMessenger")
   })
+  it(`returns true if the validator holds a multidenom reward`, () => {
+    wrapper.setData({
+      rewards: [
+        {
+          amount: 1,
+          denom: `utoken1`
+        },
+        {
+          amount: 2,
+          denom: `utoken2`
+        },
+        {
+          amount: 3,
+          denom: `utoken3`
+        }
+      ]
+    })
+    expect(wrapper.vm.isMultiDenomReward).toBe(true)
+  })
+  it(`should filter the staking denom reward`, () => {
+    const rewards = [
+      {
+        amount: 1,
+        denom: `utoken1`
+      },
+      {
+        amount: 2,
+        denom: `utoken2`
+      },
+      {
+        amount: 3,
+        denom: `utoken3`
+      }
+    ]
+    const self = {
+      stakingDenom: `UTOKEN1`,
+      rewards: rewards,
+      toMicroDenom
+    }
+    const stakingDenomReward = PageValidator.methods.filterStakingDenomReward.call(
+      self
+    )
+    expect(stakingDenomReward).toEqual(`1`)
+  })
 })
 
 describe(`isBlankField method`, () => {

From 7787dad4f0a34f73ae0042d9de277b6ce8d3e723 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sat, 15 Feb 2020 20:55:37 +0100
Subject: [PATCH 15/28] fix styles

---
 src/components/common/TmBalance.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 7805f786b2..1bb2db7859 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -535,7 +535,7 @@ p.rewards {
 }
 
 .small-container {
-  padding-top: 1rem;
+  padding: 1rem 1rem 1rem 0;
 }
 
 .open-tutorial {
@@ -575,6 +575,7 @@ p.rewards {
   }
   #multidenom-rewards {
     margin-top: 0.3rem;
+    padding: 0;
   }
 }
 
@@ -640,7 +641,7 @@ p.rewards {
   }
 
   #multidenom-rewards {
-    margin-top: 4.3rem;
+    margin-top: 5.3rem;
   }
 
   .currency-selector.tm-form-group {
@@ -652,6 +653,7 @@ p.rewards {
     width: 100%;
     padding: 1rem;
     border-top: 1px solid var(--bc);
+    margin-top: 0rem;
   }
 
   .button-container button {

From e2a3c67b36f054d8e53736e77d9bfce541bda9f9 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Sun, 16 Feb 2020 13:08:59 +0100
Subject: [PATCH 16/28] changelog

---
 changes/ana_emoney-format-rewards | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changes/ana_emoney-format-rewards

diff --git a/changes/ana_emoney-format-rewards b/changes/ana_emoney-format-rewards
new file mode 100644
index 0000000000..952173c053
--- /dev/null
+++ b/changes/ana_emoney-format-rewards
@@ -0,0 +1 @@
+[Added] [#3559](https://github.com/cosmos/lunie/pull/3559) Now rewards for multidenom networks are displayed in TmBalance and staking denom is especified in validators' components @Bitcoinera
\ No newline at end of file

From 153f84c6fe5688528d198e3af268960b24a24d44 Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Tue, 18 Feb 2020 23:59:02 -0500
Subject: [PATCH 17/28] lil' bug i noticed: buttons are intended to be on the
 right side on mobile

---
 src/ActionModal/components/ActionModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ActionModal/components/ActionModal.vue b/src/ActionModal/components/ActionModal.vue
index 66f8ce7ef9..257b4c4117 100644
--- a/src/ActionModal/components/ActionModal.vue
+++ b/src/ActionModal/components/ActionModal.vue
@@ -936,7 +936,7 @@ export default {
 .action-modal-footer .tm-form-group .tm-form-group__field {
   display: flex;
   align-items: center;
-  justify-items: space-between;
+  justify-content: flex-end;
 }
 
 .action-modal-footer .tm-form-group .tm-form-group__field .tertiary {

From 613d342ddac51874e6a526df4a2ff38eac99cb61 Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Tue, 18 Feb 2020 23:59:44 -0500
Subject: [PATCH 18/28] restructured TmBalance to account for multi-denom
 rewards, including responsive fixes and style cleanups

---
 src/components/common/TmBalance.vue | 234 ++++++++++++----------------
 1 file changed, 99 insertions(+), 135 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 1bb2db7859..7dde81468c 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -25,59 +25,72 @@
             </button>
           </div>
           <div class="scroll">
-            <div class="row small-container scroll-item">
-              <div v-if="overview.totalStake > 0" class="available-atoms">
-                <h3>Available {{ stakingDenom }}</h3>
-                <h2>
-                  {{
-                    overview.liquidStake | bigFigureOrShortDecimals | noBlanks
-                  }}
-                </h2>
-              </div>
-
-              <div
-                v-if="overview.totalRewards && overview.totalRewards > 0.001"
-                class="rewards"
-              >
-                <h3>
-                  {{
-                    isMultiDenomReward
-                      ? `${stakingDenom} Rewards`
-                      : `Total Rewards`
-                  }}
-                </h3>
-                <h2>
-                  +{{
-                    overview.totalRewards | bigFigureOrShortDecimals | noBlanks
-                  }}
-                </h2>
-              </div>
-            </div>
             <div
-              v-if="formattedBalances.length > 0"
-              id="multidenom-rewards"
-              class="row small-container tokens-div scroll-item"
+              class="row lower-header scroll-item"
+              :class="{ 'single-denom-rewards': !isMultiDenomReward }"
             >
-              <div
-                v-for="balance in formattedBalances"
-                :key="balance.denom"
-                class="col"
-              >
-                <p class="token-denom">
-                  {{ balance.denom | removeUFromMicroDenom }}
-                </p>
-                <p class="token-balance">
-                  {{ balance.amount | bigFigureOrShortDecimals }}
-                </p>
-                <p
-                  v-if="calculateTotalRewardsDenom(balance.denom) > 0.001"
+              <div class="row">
+                <div v-if="overview.totalStake > 0" class="available-atoms">
+                  <h3>Available {{ stakingDenom }}</h3>
+                  <h2>
+                    {{
+                      overview.liquidStake | bigFigureOrShortDecimals | noBlanks
+                    }}
+                  </h2>
+                  <div class="rewards multi-denom">
+                    <h2 v-if="isMultiDenomReward">
+                      +{{
+                        overview.totalRewards
+                          | bigFigureOrShortDecimals
+                          | noBlanks
+                      }}
+                    </h2>
+                  </div>
+                </div>
+
+                <div
+                  v-if="
+                    !isMultiDenomReward &&
+                      overview.totalRewards &&
+                      overview.totalRewards > 0.001
+                  "
                   class="rewards"
                 >
-                  +{{
-                    calculateTotalRewardsDenom(balance.denom)
-                      | bigFigureOrShortDecimals
-                  }}
-                </p>
+                  <h3>Total Rewards</h3>
+                  <h2>
+                    +{{
+                      overview.totalRewards
+                        | bigFigureOrShortDecimals
+                        | noBlanks
+                    }}
+                  </h2>
+                </div>
+              </div>
+
+              <div
+                v-if="formattedBalances.length > 0"
+                class="row values-container"
+              >
+                <div v-for="balance in formattedBalances" :key="balance.denom">
+                  <div class="available-atoms">
+                    <h3>
+                      {{ balance.denom | removeUFromMicroDenom }}
+                    </h3>
+                    <h2>
+                      {{ balance.amount | bigFigureOrShortDecimals }}
+                    </h2>
+                  </div>
+                  <div class="rewards multi-denom">
+                    <h2
+                      v-if="calculateTotalRewardsDenom(balance.denom) > 0.001"
+                    >
+                      +{{
+                        calculateTotalRewardsDenom(balance.denom)
+                          | bigFigureOrShortDecimals
+                      }}
+                    </h2>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -447,7 +460,6 @@ export default {
 
 .values-container {
   position: relative;
-  padding: 1rem 2rem;
 }
 
 .values-container h2 {
@@ -469,30 +481,6 @@ export default {
   padding-right: 2.5rem;
 }
 
-.tokens-div {
-  position: absolute;
-  right: 1.25rem;
-  top: 3.5rem;
-}
-
-.tokens-div > .col {
-  margin-right: 1rem;
-}
-
-.token-denom {
-  font-size: 12px;
-}
-
-.token-balance {
-  font-weight: bold;
-}
-
-.currency-selector.tm-form-group {
-  position: absolute;
-  right: 1.25rem;
-  top: -0.7rem;
-}
-
 p.rewards {
   color: var(--success);
   font-size: var(--s);
@@ -503,17 +491,29 @@ p.rewards {
   font-size: var(--m);
 }
 
+.rewards.multi-denom h2 {
+  font-size: 12px;
+}
+
 .available-atoms h2 {
   font-size: var(--m);
   line-height: 20px;
 }
 
 .upper-header {
+  padding: 0 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+.lower-header {
+  padding: 2rem;
+  align-items: normal;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .button-container {
   display: flex;
   align-items: center;
@@ -534,8 +534,8 @@ p.rewards {
   flex-direction: row;
 }
 
-.small-container {
-  padding: 1rem 1rem 1rem 0;
+.row div {
+  white-space: nowrap;
 }
 
 .open-tutorial {
@@ -569,16 +569,6 @@ p.rewards {
   background-color: rgba(255, 255, 255, 0.02);
 }
 
-@media screen and (max-width: 1168px) {
-  div.tokens-div {
-    position: initial;
-  }
-  #multidenom-rewards {
-    margin-top: 0.3rem;
-    padding: 0;
-  }
-}
-
 @media screen and (max-width: 667px) {
   .balance-header {
     display: flex;
@@ -589,64 +579,32 @@ p.rewards {
     flex-direction: column-reverse;
   }
 
-  .values-container {
-    flex-direction: column;
-    width: 100%;
-  }
-
   .values-container .total-atoms__value {
     font-size: 28px;
     font-weight: 500;
     line-height: 32px;
   }
 
-  .available-atoms,
-  .rewards {
-    padding: 0;
-  }
-
   .total-atoms {
     padding: 1rem 0;
     text-align: center;
   }
 
-  .tutorial-button {
-    margin: 0 auto 1rem auto;
-  }
-
-  .scroll {
-    display: flex;
-    width: 90vw;
-    overflow-x: auto;
-    /* Make it smooth scrolling on iOS devices */
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .scroll-item {
-    width: 100%;
-  }
-
-  .scroll > .row > div {
-    margin-right: 3rem;
-  }
-
-  .tokens-div {
-    position: relative;
-    margin: 0;
-    top: 0;
+  .single-denom-rewards {
+    justify-content: center;
+    text-align: center;
   }
 
-  .token-denom {
-    float: none;
+  .single-denom-rewards .rewards {
+    padding-right: 0;
   }
 
-  #multidenom-rewards {
-    margin-top: 5.3rem;
+  .single-denom-rewards .available-atoms {
+    padding-right: 4rem;
   }
 
-  .currency-selector.tm-form-group {
-    width: 40px;
-    right: 2.5rem;
+  .tutorial-button {
+    margin: 0 auto 1rem auto;
   }
 
   .button-container {
@@ -660,16 +618,22 @@ p.rewards {
     width: 50%;
   }
 
-  .small-container {
-    display: flex;
-    justify-content: space-evenly;
-    padding: 1rem 0;
-    text-align: center;
-    height: 90px;
-    position: absolute;
-  }
   .tutorial-container {
     padding-right: 1rem;
   }
 }
+
+@media screen and (max-width: 1023px) {
+  .scroll {
+    display: flex;
+    width: 100vw;
+    overflow-x: auto;
+    /* Make it smooth scrolling on iOS devices */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .scroll-item {
+    width: 100%;
+  }
+}
 </style>

From 96d4911037b511a0c41b13950de7b04374283ddc Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 19 Feb 2020 00:00:20 -0500
Subject: [PATCH 19/28] minor changes to how we display staking rewards inline
 next to stake count (desktop and mobile)

---
 src/components/staking/LiValidator.vue   | 10 ++++++----
 src/components/staking/PageValidator.vue | 10 +++++-----
 src/styles/table.css                     |  4 ----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index 660c4a08c2..cc2ed140ff 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -51,7 +51,11 @@
               )
             "
           >
-            <span>+{{ filterStakingDenomReward() }}</span>
+            <span
+              >+{{
+                filterStakingDenomReward() | bigFigureOrShortDecimals
+              }}</span
+            >
           </h5>
         </div>
       </div>
@@ -130,9 +134,7 @@ export default {
       const stakingDenomRewards = this.rewards.filter(
         reward => reward.denom === this.toMicroDenom(this.stakingDenom)
       )
-      return bigFigureOrShortDecimals(stakingDenomRewards[0].amount).concat(
-        this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
-      )
+      return stakingDenomRewards[0].amount
     }
   }
 }
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index 11d143b3ad..0762b94b6c 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -350,9 +350,7 @@ export default {
         const stakingDenomRewards = this.rewards.filter(
           reward => reward.denom === this.toMicroDenom(this.stakingDenom)
         )
-        return shortDecimals(stakingDenomRewards[0].amount).concat(
-          this.isMultiDenomReward ? ` ${this.stakingDenom}` : ``
-        )
+        return stakingDenomRewards[0].amount
       }
     }
   },
@@ -661,10 +659,12 @@ span {
   border-color: var(--success);
 }
 
-.validator-status-detailed {
+.validator-status-detailed,
+.no-img-info {
   display: block;
-  margin-top: 0.4rem;
+  margin-top: 1rem;
   font-size: 0.8rem;
+  color: var(--dim);
 }
 
 @media screen and (max-width: 425px) {
diff --git a/src/styles/table.css b/src/styles/table.css
index 96e06579c3..569ab20276 100644
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -137,10 +137,6 @@
     padding: 0;
   }
 
-  .data-table__row__info {
-    max-width: calc(100vw - 6rem);
-  }
-
   .data-table th:nth-child(4) {
     width: 20%;
   }

From 0a21f6736e620f9fc4243a16de45a7d4a433d287 Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 19 Feb 2020 00:00:41 -0500
Subject: [PATCH 20/28] fixed two unit tests that were expecting a string, but
 now expect a number

---
 .../unit/specs/components/staking/LiValidator.spec.js  |  4 ++--
 .../specs/components/staking/PageValidator.spec.js     | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/unit/specs/components/staking/LiValidator.spec.js b/tests/unit/specs/components/staking/LiValidator.spec.js
index 5ce4afca5b..d46de3023b 100644
--- a/tests/unit/specs/components/staking/LiValidator.spec.js
+++ b/tests/unit/specs/components/staking/LiValidator.spec.js
@@ -4,7 +4,7 @@ import VueApollo from "vue-apollo"
 import LiValidator from "src/components/staking/LiValidator"
 
 const localVue = createLocalVue()
-localVue.directive(`tooltip`, () => {})
+localVue.directive(`tooltip`, () => { })
 localVue.use(VueApollo)
 
 describe(`LiValidator`, () => {
@@ -123,6 +123,6 @@ describe(`LiValidator`, () => {
     const stakingDenomReward = LiValidator.methods.filterStakingDenomReward.call(
       self
     )
-    expect(stakingDenomReward).toEqual(`1`)
+    expect(stakingDenomReward).toEqual(1)
   })
 })
diff --git a/tests/unit/specs/components/staking/PageValidator.spec.js b/tests/unit/specs/components/staking/PageValidator.spec.js
index 6aa57c387b..b9df0791cb 100644
--- a/tests/unit/specs/components/staking/PageValidator.spec.js
+++ b/tests/unit/specs/components/staking/PageValidator.spec.js
@@ -37,7 +37,7 @@ const validator = {
 describe(`PageValidator`, () => {
   let wrapper, $store, $apollo
   const localVue = createLocalVue()
-  localVue.directive(`tooltip`, () => {})
+  localVue.directive(`tooltip`, () => { })
 
   beforeEach(() => {
     $store = {
@@ -56,15 +56,15 @@ describe(`PageValidator`, () => {
         validator: {
           loading: false,
           error: false,
-          refetch: () => {}
+          refetch: () => { }
         },
         rewards: {
           loading: false,
           error: false,
-          refetch: () => {}
+          refetch: () => { }
         },
         delegation: {
-          refetch: () => {}
+          refetch: () => { }
         }
       }
     }
@@ -167,7 +167,7 @@ describe(`PageValidator`, () => {
     const stakingDenomReward = PageValidator.methods.filterStakingDenomReward.call(
       self
     )
-    expect(stakingDenomReward).toEqual(`1`)
+    expect(stakingDenomReward).toEqual(1)
   })
 })
 

From 930f6aff7e8afa1ddb54732cb8926ff8e4e10d9b Mon Sep 17 00:00:00 2001
From: Jordan Bibla <jbibla@gmail.com>
Date: Wed, 19 Feb 2020 00:00:56 -0500
Subject: [PATCH 21/28] updated snaperoos

---
 .../__snapshots__/TmBalance.spec.js.snap      | 72 +++++++++++--------
 1 file changed, 42 insertions(+), 30 deletions(-)

diff --git a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
index dafc5fb2bf..966f5cf694 100644
--- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
+++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
@@ -41,14 +41,18 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
           class="scroll"
         >
           <div
-            class="row small-container scroll-item"
+            class="row lower-header scroll-item single-denom-rewards"
           >
-            <!---->
+            <div
+              class="row"
+            >
+              <!---->
+               
+              <!---->
+            </div>
              
             <!---->
           </div>
-           
-          <!---->
         </div>
       </div>
     </div>
@@ -122,40 +126,48 @@ exports[`TmBalance show the balance header when signed in 1`] = `
           class="scroll"
         >
           <div
-            class="row small-container scroll-item"
+            class="row lower-header scroll-item single-denom-rewards"
           >
             <div
-              class="available-atoms"
-            >
-              <h3>
-                Available ATOM
-              </h3>
-               
-              <h2>
-                
-                1,230
-              
-              </h2>
-            </div>
-             
-            <div
-              class="rewards"
+              class="row"
             >
-              <h3>
+              <div
+                class="available-atoms"
+              >
+                <h3>
+                  Available ATOM
+                </h3>
+                 
+                <h2>
+                  
+                  1,230
                 
-                Total Rewards
-              
-              </h3>
+                </h2>
+                 
+                <div
+                  class="rewards multi-denom"
+                >
+                  <!---->
+                </div>
+              </div>
                
-              <h2>
+              <div
+                class="rewards"
+              >
+                <h3>
+                  Total Rewards
+                </h3>
+                 
+                <h2>
+                  
+                  +1,000.45
                 
-                +1,000.45
-              
-              </h2>
+                </h2>
+              </div>
             </div>
+             
+            <!---->
           </div>
-           
-          <!---->
         </div>
       </div>
     </div>

From 72432879a918b6a58fe69a309028134e5eb6680a Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 19 Feb 2020 15:26:34 +0100
Subject: [PATCH 22/28] clean up ismultidenomreward where not needed

---
 src/components/staking/LiValidator.vue        |  4 ----
 src/components/staking/TableValidators.vue    |  8 -------
 .../components/staking/LiValidator.spec.js    |  2 +-
 .../components/staking/PageValidator.spec.js  |  8 +++----
 .../staking/TableValidators.spec.js           | 22 -------------------
 5 files changed, 5 insertions(+), 39 deletions(-)

diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index cc2ed140ff..ea50849ea6 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -117,10 +117,6 @@ export default {
       type: String,
       default: () => "returns"
     },
-    isMultiDenomReward: {
-      type: Boolean,
-      default: false
-    },
     stakingDenom: {
       type: String,
       default: ""
diff --git a/src/components/staking/TableValidators.vue b/src/components/staking/TableValidators.vue
index a6b0d3ab30..8ae7d8ed46 100644
--- a/src/components/staking/TableValidators.vue
+++ b/src/components/staking/TableValidators.vue
@@ -21,7 +21,6 @@
           :delegation="getDelegation(validator)"
           :rewards="getRewards(validator)"
           :show-on-mobile="showOnMobile"
-          :is-multi-denom-reward="isMultiDenomReward"
           :staking-denom="stakingDenom"
         />
       </tbody>
@@ -103,13 +102,6 @@ export default {
           tooltip: `Percentage of voting shares`
         }
       ]
-    },
-    isMultiDenomReward() {
-      if (this.rewards && this.rewards.length > 0) {
-        return this.rewards[0].denom !== this.rewards[1].denom ? true : false
-      } else {
-        return false
-      }
     }
   },
   watch: {
diff --git a/tests/unit/specs/components/staking/LiValidator.spec.js b/tests/unit/specs/components/staking/LiValidator.spec.js
index d46de3023b..9f60e1f0ab 100644
--- a/tests/unit/specs/components/staking/LiValidator.spec.js
+++ b/tests/unit/specs/components/staking/LiValidator.spec.js
@@ -4,7 +4,7 @@ import VueApollo from "vue-apollo"
 import LiValidator from "src/components/staking/LiValidator"
 
 const localVue = createLocalVue()
-localVue.directive(`tooltip`, () => { })
+localVue.directive(`tooltip`, () => {})
 localVue.use(VueApollo)
 
 describe(`LiValidator`, () => {
diff --git a/tests/unit/specs/components/staking/PageValidator.spec.js b/tests/unit/specs/components/staking/PageValidator.spec.js
index b9df0791cb..35e9c5786e 100644
--- a/tests/unit/specs/components/staking/PageValidator.spec.js
+++ b/tests/unit/specs/components/staking/PageValidator.spec.js
@@ -37,7 +37,7 @@ const validator = {
 describe(`PageValidator`, () => {
   let wrapper, $store, $apollo
   const localVue = createLocalVue()
-  localVue.directive(`tooltip`, () => { })
+  localVue.directive(`tooltip`, () => {})
 
   beforeEach(() => {
     $store = {
@@ -56,15 +56,15 @@ describe(`PageValidator`, () => {
         validator: {
           loading: false,
           error: false,
-          refetch: () => { }
+          refetch: () => {}
         },
         rewards: {
           loading: false,
           error: false,
-          refetch: () => { }
+          refetch: () => {}
         },
         delegation: {
-          refetch: () => { }
+          refetch: () => {}
         }
       }
     }
diff --git a/tests/unit/specs/components/staking/TableValidators.spec.js b/tests/unit/specs/components/staking/TableValidators.spec.js
index 49576a61b7..7f94c0f309 100644
--- a/tests/unit/specs/components/staking/TableValidators.spec.js
+++ b/tests/unit/specs/components/staking/TableValidators.spec.js
@@ -48,28 +48,6 @@ describe(`TableValidators`, () => {
     expect(wrapper.element).toMatchSnapshot()
   })
 
-  it(`should add smallName property to validators`, () => {
-    expect(wrapper.vm.showingValidators[0].smallName).toBe(`cosmos1a`)
-  })
-
-  it(`should return true if rewards contain multiple denoms`, () => {
-    wrapper.setData({
-      rewards: [
-        {
-          validator: { name: "cosmos1a", operatorAddress: "cosmos1a" },
-          amount: 1,
-          denom: `utoken1`
-        },
-        {
-          validator: { name: "cosmos1a", operatorAddress: "cosmos1a" },
-          amount: 2,
-          denom: `utoken2`
-        }
-      ]
-    })
-    expect(wrapper.vm.isMultiDenomReward).toBe(true)
-  })
-
   it(`should sort the delegates by selected property`, () => {
     wrapper.vm.sort.property = `operatorAddress`
     wrapper.vm.sort.order = `desc`

From 320fe668feb0d878b44fb4424dd01a94b25ff5c7 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 19 Feb 2020 15:28:58 +0100
Subject: [PATCH 23/28] left one out

---
 src/components/staking/PageValidator.vue      |  9 +--------
 .../components/staking/PageValidator.spec.js  | 19 -------------------
 2 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index 0762b94b6c..6affa248b6 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -302,14 +302,7 @@ export default {
   computed: {
     ...mapState([`connection`]),
     ...mapGetters([`network`]),
-    ...mapGetters({ userAddress: `address` }),
-    isMultiDenomReward() {
-      if (this.rewards && this.rewards.length > 0) {
-        return this.rewards.length > 1 ? true : false
-      } else {
-        return false
-      }
-    }
+    ...mapGetters({ userAddress: `address` })
   },
   mounted() {
     this.$apollo.queries.rewards.refetch()
diff --git a/tests/unit/specs/components/staking/PageValidator.spec.js b/tests/unit/specs/components/staking/PageValidator.spec.js
index 35e9c5786e..7f5bf45170 100644
--- a/tests/unit/specs/components/staking/PageValidator.spec.js
+++ b/tests/unit/specs/components/staking/PageValidator.spec.js
@@ -125,25 +125,6 @@ describe(`PageValidator`, () => {
     PageValidator.methods.handleIntercom.call(self)
     expect(self.$store.dispatch).toHaveBeenCalledWith("displayMessenger")
   })
-  it(`returns true if the validator holds a multidenom reward`, () => {
-    wrapper.setData({
-      rewards: [
-        {
-          amount: 1,
-          denom: `utoken1`
-        },
-        {
-          amount: 2,
-          denom: `utoken2`
-        },
-        {
-          amount: 3,
-          denom: `utoken3`
-        }
-      ]
-    })
-    expect(wrapper.vm.isMultiDenomReward).toBe(true)
-  })
   it(`should filter the staking denom reward`, () => {
     const rewards = [
       {

From acda2a48508de0a199cd3474c95f40a03bd0f3c2 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 19 Feb 2020 18:31:54 +0100
Subject: [PATCH 24/28] add todo for multidenomreward

---
 src/components/common/TmBalance.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index c01b1e11d1..f938f465d5 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -270,6 +270,7 @@ export default {
         return [this.stakingDenom]
       }
     },
+    // TODO: replace for the multi field in the network schema
     isMultiDenomReward() {
       if (this.overview.rewards && this.overview.rewards.length > 0) {
         return this.overview.rewards[0].denom !== this.overview.rewards[1].denom

From bc1d4198b8c9f97bf7cfdf5a190db16d8a4afdf0 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 19 Feb 2020 18:50:44 +0100
Subject: [PATCH 25/28] add more todos

---
 src/components/common/TmBalance.vue | 2 ++
 src/scripts/common.js               | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index f938f465d5..c3022a7339 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -140,6 +140,7 @@
 <script>
 import { bigFigureOrShortDecimals } from "scripts/num"
 import { noBlanks } from "src/filters"
+// TODO: remove when PR add-token-gas-prices is merged
 import { removeUFromMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import SendModal from "src/ActionModal/components/SendModal"
@@ -219,6 +220,7 @@ export default {
     readyToWithdraw() {
       return this.overview.totalRewards > 0
     },
+    // TODO: remove when PR add-token-gas-prices is merged
     formattedBalances() {
       return this.balances
         .filter(balance => !balance.denom.includes(this.stakingDenom))
diff --git a/src/scripts/common.js b/src/scripts/common.js
index 52389b3fc0..fca01f2454 100644
--- a/src/scripts/common.js
+++ b/src/scripts/common.js
@@ -55,6 +55,7 @@ export function toMicroDenom(denom) {
   return lookup[denom] ? lookup[denom] : denom.toLowerCase()
 }
 
+// TODO: remove when PR add-token-gas-prices is merged
 export function removeUFromMicroDenom(denom) {
   if (denom.startsWith(`u`)) {
     return denom.slice(1, denom.length)

From 178747153f1f9406fef1e7d38a1180e81a491c4d Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Wed, 19 Feb 2020 22:46:14 +0100
Subject: [PATCH 26/28] remove todos

---
 src/components/common/TmBalance.vue           | 48 +++++++------------
 src/scripts/common.js                         |  9 ----
 .../specs/components/common/TmBalance.spec.js | 24 +++++-----
 3 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index c3022a7339..dd43043eaa 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -36,7 +36,7 @@
           <div class="scroll">
             <div
               class="row lower-header scroll-item"
-              :class="{ 'single-denom-rewards': !isMultiDenomReward }"
+              :class="{ 'single-denom-rewards': !isMultiDenomNetwork }"
             >
               <div class="row">
                 <div v-if="overview.totalStake > 0" class="available-atoms">
@@ -47,7 +47,7 @@
                     }}
                   </h2>
                   <div class="rewards multi-denom">
-                    <h2 v-if="isMultiDenomReward">
+                    <h2 v-if="isMultiDenomNetwork">
                       +{{
                         overview.totalRewards
                           | bigFigureOrShortDecimals
@@ -59,7 +59,7 @@
 
                 <div
                   v-if="
-                    !isMultiDenomReward &&
+                    !isMultiDenomNetwork &&
                       overview.totalRewards &&
                       overview.totalRewards > 0.001
                   "
@@ -76,14 +76,14 @@
                 </div>
               </div>
 
-              <div
-                v-if="formattedBalances.length > 0"
-                class="row values-container"
-              >
-                <div v-for="balance in formattedBalances" :key="balance.denom">
+              <div v-if="isMultiDenomNetwork" class="row values-container">
+                <div
+                  v-for="balance in filteredMultiDenomBalances"
+                  :key="balance.denom"
+                >
                   <div class="available-atoms">
                     <h3>
-                      {{ balance.denom | removeUFromMicroDenom }}
+                      {{ balance.denom }}
                     </h3>
                     <h2>
                       {{ balance.amount | bigFigureOrShortDecimals }}
@@ -140,8 +140,6 @@
 <script>
 import { bigFigureOrShortDecimals } from "scripts/num"
 import { noBlanks } from "src/filters"
-// TODO: remove when PR add-token-gas-prices is merged
-import { removeUFromMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import SendModal from "src/ActionModal/components/SendModal"
 import ModalWithdrawRewards from "src/ActionModal/components/ModalWithdrawRewards"
@@ -159,7 +157,6 @@ export default {
     ModalTutorial
   },
   filters: {
-    removeUFromMicroDenom,
     bigFigureOrShortDecimals,
     noBlanks
   },
@@ -220,20 +217,10 @@ export default {
     readyToWithdraw() {
       return this.overview.totalRewards > 0
     },
-    // TODO: remove when PR add-token-gas-prices is merged
-    formattedBalances() {
-      return this.balances
-        .filter(balance => !balance.denom.includes(this.stakingDenom))
-        .map(
-          balance =>
-            (balance = {
-              denom: balance.denom
-                .charAt(0)
-                .toLowerCase()
-                .concat(balance.denom.slice(-3)),
-              amount: parseFloat(balance.amount).toFixed(2)
-            })
-        )
+    filteredMultiDenomBalances() {
+      return this.balances.filter(
+        balance => !balance.denom.includes(this.stakingDenom)
+      )
     },
     concatBalances() {
       let balancesArray = []
@@ -272,10 +259,11 @@ export default {
         return [this.stakingDenom]
       }
     },
-    // TODO: replace for the multi field in the network schema
-    isMultiDenomReward() {
-      if (this.overview.rewards && this.overview.rewards.length > 0) {
-        return this.overview.rewards[0].denom !== this.overview.rewards[1].denom
+    isMultiDenomNetwork() {
+      if (this.balances && this.balances.length > 0) {
+        return this.balances.find(
+          balance => balance.denom !== this.stakingDenom
+        )
           ? true
           : false
       } else {
diff --git a/src/scripts/common.js b/src/scripts/common.js
index fca01f2454..3b889c4791 100644
--- a/src/scripts/common.js
+++ b/src/scripts/common.js
@@ -54,12 +54,3 @@ export function toMicroDenom(denom) {
   }
   return lookup[denom] ? lookup[denom] : denom.toLowerCase()
 }
-
-// TODO: remove when PR add-token-gas-prices is merged
-export function removeUFromMicroDenom(denom) {
-  if (denom.startsWith(`u`)) {
-    return denom.slice(1, denom.length)
-  } else {
-    return denom
-  }
-}
diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js
index ec283e79f7..0efad1d101 100644
--- a/tests/unit/specs/components/common/TmBalance.spec.js
+++ b/tests/unit/specs/components/common/TmBalance.spec.js
@@ -170,20 +170,18 @@ describe(`TmBalance`, () => {
 
   it(`should return true if rewards contain multiple denoms`, () => {
     wrapper.setData({
-      overview: {
-        rewards: [
-          {
-            amount: 1,
-            denom: `utoken1`
-          },
-          {
-            amount: 2,
-            denom: `utoken2`
-          }
-        ]
-      }
+      balances: [
+        {
+          amount: 1,
+          denom: `utoken1`
+        },
+        {
+          amount: 2,
+          denom: `utoken2`
+        }
+      ]
     })
-    expect(wrapper.vm.isMultiDenomReward).toBe(true)
+    expect(wrapper.vm.isMultiDenomNetwork).toBe(true)
   })
 
   it(`should show How To Get Tokens tutorial`, () => {

From 53e03151c06d1758948da2e84032e4bea5af0606 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Thu, 20 Feb 2020 12:24:50 +0100
Subject: [PATCH 27/28] fix rewards denoms. works with 351 merged

---
 src/components/common/TmBalance.vue                    |  2 +-
 src/components/staking/LiValidator.vue                 |  8 ++------
 src/components/staking/PageValidator.vue               |  4 +---
 tests/unit/specs/components/common/TmBalance.spec.js   | 10 +++++-----
 .../unit/specs/components/staking/LiValidator.spec.js  |  8 ++++----
 .../specs/components/staking/PageValidator.spec.js     |  8 ++++----
 6 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index dd43043eaa..203d979790 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -288,7 +288,7 @@ export default {
       if (this.overview.rewards && this.overview.rewards.length > 0) {
         let rewardsAccumulator = 0
         this.overview.rewards
-          .filter(reward => reward.denom === denom.toLowerCase())
+          .filter(reward => reward.denom === denom)
           .forEach(reward => {
             rewardsAccumulator += parseFloat(reward.amount)
           })
diff --git a/src/components/staking/LiValidator.vue b/src/components/staking/LiValidator.vue
index ea50849ea6..56d19af4b4 100644
--- a/src/components/staking/LiValidator.vue
+++ b/src/components/staking/LiValidator.vue
@@ -45,9 +45,7 @@
           <h5
             v-if="
               rewards.find(
-                reward =>
-                  reward.denom === toMicroDenom(stakingDenom) &&
-                  reward.amount > 0.001
+                reward => reward.denom === stakingDenom && reward.amount > 0.001
               )
             "
           >
@@ -79,7 +77,6 @@ import {
   bigFigureOrShortDecimals,
   atoms
 } from "scripts/num"
-import { toMicroDenom } from "src/scripts/common"
 import Avatar from "common/Avatar"
 
 export default {
@@ -123,12 +120,11 @@ export default {
     }
   },
   methods: {
-    toMicroDenom,
     bigFigureOrPercent,
     bigFigureOrShortDecimals,
     filterStakingDenomReward() {
       const stakingDenomRewards = this.rewards.filter(
-        reward => reward.denom === this.toMicroDenom(this.stakingDenom)
+        reward => reward.denom === this.stakingDenom
       )
       return stakingDenomRewards[0].amount
     }
diff --git a/src/components/staking/PageValidator.vue b/src/components/staking/PageValidator.vue
index 8060dfd4cc..ddcbe69a61 100644
--- a/src/components/staking/PageValidator.vue
+++ b/src/components/staking/PageValidator.vue
@@ -205,7 +205,6 @@ import moment from "moment"
 import { mapGetters, mapState } from "vuex"
 import { atoms, shortDecimals, fullDecimals, percent } from "scripts/num"
 import { noBlanks, fromNow } from "src/filters"
-import { toMicroDenom } from "src/scripts/common"
 import TmBtn from "common/TmBtn"
 import DelegationModal from "src/ActionModal/components/DelegationModal"
 import UndelegationModal from "src/ActionModal/components/UndelegationModal"
@@ -316,7 +315,6 @@ export default {
     this.$apollo.queries.delegation.refetch()
   },
   methods: {
-    toMicroDenom,
     shortDecimals,
     fullDecimals,
     atoms,
@@ -348,7 +346,7 @@ export default {
     filterStakingDenomReward() {
       if (this.rewards && this.rewards.length > 0) {
         const stakingDenomRewards = this.rewards.filter(
-          reward => reward.denom === this.toMicroDenom(this.stakingDenom)
+          reward => reward.denom === this.stakingDenom
         )
         return stakingDenomRewards[0].amount
       }
diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js
index 0efad1d101..d3ea696e86 100644
--- a/tests/unit/specs/components/common/TmBalance.spec.js
+++ b/tests/unit/specs/components/common/TmBalance.spec.js
@@ -44,15 +44,15 @@ describe(`TmBalance`, () => {
         rewards: [
           {
             amount: 1,
-            denom: `utoken1`
+            denom: `TOKEN1`
           },
           {
             amount: 2,
-            denom: `utoken1`
+            denom: `TOKEN1`
           },
           {
             amount: 1.5,
-            denom: `utoken1`
+            denom: `TOKEN1`
           }
         ]
       }
@@ -173,7 +173,7 @@ describe(`TmBalance`, () => {
       balances: [
         {
           amount: 1,
-          denom: `utoken1`
+          denom: `TOKEN1`
         },
         {
           amount: 2,
@@ -201,7 +201,7 @@ describe(`TmBalance`, () => {
   })
 
   it(`should calculate the total rewards amount for each denom when rewards contain multiple denoms`, () => {
-    const totalDenomRewards = wrapper.vm.calculateTotalRewardsDenom(`UTOKEN1`)
+    const totalDenomRewards = wrapper.vm.calculateTotalRewardsDenom(`TOKEN1`)
     expect(totalDenomRewards).toBe(4.5)
   })
 })
diff --git a/tests/unit/specs/components/staking/LiValidator.spec.js b/tests/unit/specs/components/staking/LiValidator.spec.js
index 9f60e1f0ab..b2e6681cc9 100644
--- a/tests/unit/specs/components/staking/LiValidator.spec.js
+++ b/tests/unit/specs/components/staking/LiValidator.spec.js
@@ -104,19 +104,19 @@ describe(`LiValidator`, () => {
     const rewards = [
       {
         amount: 1,
-        denom: `utoken1`
+        denom: `TOKEN1`
       },
       {
         amount: 2,
-        denom: `utoken2`
+        denom: `TOKEN2`
       },
       {
         amount: 3,
-        denom: `utoken3`
+        denom: `TOKEN3`
       }
     ]
     const self = {
-      stakingDenom: `UTOKEN1`,
+      stakingDenom: `TOKEN1`,
       rewards: rewards,
       toMicroDenom
     }
diff --git a/tests/unit/specs/components/staking/PageValidator.spec.js b/tests/unit/specs/components/staking/PageValidator.spec.js
index 7f5bf45170..bed94d61d7 100644
--- a/tests/unit/specs/components/staking/PageValidator.spec.js
+++ b/tests/unit/specs/components/staking/PageValidator.spec.js
@@ -129,19 +129,19 @@ describe(`PageValidator`, () => {
     const rewards = [
       {
         amount: 1,
-        denom: `utoken1`
+        denom: `TOKEN1`
       },
       {
         amount: 2,
-        denom: `utoken2`
+        denom: `TOKEN2`
       },
       {
         amount: 3,
-        denom: `utoken3`
+        denom: `TOKEN3`
       }
     ]
     const self = {
-      stakingDenom: `UTOKEN1`,
+      stakingDenom: `TOKEN1`,
       rewards: rewards,
       toMicroDenom
     }

From 2759f547cb9774b2211ac95029b3b09fe6fd22b8 Mon Sep 17 00:00:00 2001
From: show <anagjordano@gmail.com>
Date: Thu, 20 Feb 2020 13:13:05 +0100
Subject: [PATCH 28/28] fix conditional to show rewards

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

diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue
index 203d979790..4e16bbe77c 100644
--- a/src/components/common/TmBalance.vue
+++ b/src/components/common/TmBalance.vue
@@ -47,7 +47,11 @@
                     }}
                   </h2>
                   <div class="rewards multi-denom">
-                    <h2 v-if="isMultiDenomNetwork">
+                    <h2
+                      v-if="
+                        isMultiDenomNetwork && overview.totalRewards > 0.001
+                      "
+                    >
                       +{{
                         overview.totalRewards
                           | bigFigureOrShortDecimals