Ana/better multiple denoms porfolio version (#3434)

* pyramid state

* add scroll. scroll bar not showing

* Update src/components/common/TmBalance.vue

* switch ids for classes

* Update TmBalance.vue

* fixed tests

* changelog

Co-authored-by: Fabian <frznhope@gmail.com>

changes/ana_better-multiple-denoms-porfolio-version

@@ -0,0 +1 @@
+[Added] Show multiple wallet balances in UI @faboweb

src/components/common/TmBalance.vue

@@ -20,6 +20,7 @@
           </div>
           <TmFormGroup
             v-if="balances && balances.length > 1"
+            style="display: none;"
             class="currency-selector"
             field-id="currency"
             field-label="Currency"
@@ -33,33 +34,31 @@
             />
           </TmFormGroup>
         </div>
-        <div v-if="balances && balances.length > 1" class="row small-container">
-          <div class="col">
-            <h3>Total Tokens</h3>
-            <h2>
-              <TmField
-                id="balance"
-                :title="`All your token balances`"
-                :options="
-                  convertedBalances.length > 1
-                    ? convertedBalances
-                    : concatBalances
-                "
-                :placeholder="selectedTokenFiatValue"
-                type="select"
-              />
-            </h2>
-          </div>
-        </div>
-        <div class="row small-container">
-          <div v-if="overview.totalStake > 0" class="available-atoms">
-            <h3>Available {{ stakingDenom }}</h3>
-            <h2>{{ overview.liquidStake | shortDecimals | noBlanks }}</h2>
-          </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 | shortDecimals | noBlanks }}</h2>
+            </div>
 
-          <div v-if="overview.totalRewards" class="rewards">
-            <h3>Total Rewards</h3>
-            <h2>+{{ overview.totalRewards | shortDecimals | noBlanks }}</h2>
+            <div v-if="overview.totalRewards" class="rewards">
+              <h3>Total Rewards</h3>
+              <h2>+{{ overview.totalRewards | shortDecimals | noBlanks }}</h2>
+            </div>
+          </div>
+          <div
+            v-if="formattedBalances.length > 0"
+            id="scroll-item"
+            class="row small-container tokens-div scroll-item"
+          >
+            <div
+              v-for="balance in formattedBalances"
+              :key="balance.denom"
+              class="col"
+            >
+              <p class="token-denom">{{ balance.denom }}</p>
+              <p class="token-balance">{{ balance.amount }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -124,6 +123,20 @@ export default {
     readyToWithdraw() {
       return this.overview.totalRewards > 0
     },
+    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)
+            })
+        )
+    },
     concatBalances() {
       let balancesArray = []
       if (this.balances.length > 1) {
@@ -154,7 +167,7 @@ export default {
       ]
     },
     getAllDenoms() {
-      if (this.balances) {
+      if (this.balances.length > 0) {
         const balances = this.balances
         return balances.map(({ denom }) => denom)
       } else {
@@ -232,7 +245,7 @@ export default {
       },
       /* istanbul ignore next */
       update(data) {
-        return data.balances
+        return data.balances || []
       }
     },
     stakingDenom: {
@@ -318,6 +331,25 @@ 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;
+  float: left;
+}
+
+.token-balance {
+  font-weight: bold;
+}
+
 .currency-selector.tm-form-group {
   position: absolute;
   right: 1.25rem;
@@ -384,6 +416,33 @@ export default {
     text-align: center;
   }
 
+  .scroll {
+    display: flex;
+    width: 90vw;
+    overflow-x: auto;
+    /* Make it smooth scrolling on iOS devices */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* This doesn't work */
+  /* .scroll > .scroll-item {
+    flex: 0 0 auto;
+  } */
+
+  .scroll > .row > div {
+    margin-right: 3rem;
+  }
+
+  .tokens-div {
+    position: inherit;
+    margin: 0;
+    top: 0;
+  }
+
+  .token-denom {
+    float: none;
+  }
+
   .currency-selector.tm-form-group {
     width: 40px;
     right: 2.5rem;

tests/unit/specs/components/common/TmBalance.spec.js

@@ -110,7 +110,7 @@ describe(`TmBalance`, () => {
 
   it(`if no balances are found, then it returns the staking denom`, () => {
     wrapper.setData({
-      balances: ``
+      balances: []
     })
     expect(wrapper.vm.getAllDenoms).toEqual(["ATOM"])
   })

tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap

@@ -30,12 +30,16 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
         <!---->
       </div>
        
-      <!---->
-       
       <div
-        class="row small-container"
+        class="scroll"
       >
-        <!---->
+        <div
+          class="row small-container scroll-item"
+        >
+          <!---->
+           
+          <!---->
+        </div>
          
         <!---->
       </div>
@@ -59,7 +63,7 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
     </div>
      
     <sendmodal-stub
-      denoms=""
+      denoms="ATOM"
     />
      
     <modalwithdrawrewards-stub />
@@ -97,34 +101,38 @@ exports[`TmBalance show the balance header when signed in 1`] = `
         <!---->
       </div>
        
-      <!---->
-       
       <div
-        class="row small-container"
+        class="scroll"
       >
         <div
-          class="available-atoms"
+          class="row small-container scroll-item"
         >
-          <h3>
-            Available ATOM
-          </h3>
+          <div
+            class="available-atoms"
+          >
+            <h3>
+              Available ATOM
+            </h3>
+             
+            <h2>
+              1,230
+            </h2>
+          </div>
            
-          <h2>
-            1,230
-          </h2>
+          <div
+            class="rewards"
+          >
+            <h3>
+              Total Rewards
+            </h3>
+             
+            <h2>
+              +1,000.45
+            </h2>
+          </div>
         </div>
          
-        <div
-          class="rewards"
-        >
-          <h3>
-            Total Rewards
-          </h3>
-           
-          <h2>
-            +1,000.45
-          </h2>
-        </div>
+        <!---->
       </div>
     </div>
      
@@ -145,7 +153,7 @@ exports[`TmBalance show the balance header when signed in 1`] = `
     </div>
      
     <sendmodal-stub
-      denoms=""
+      denoms="ATOM"
     />
      
     <modalwithdrawrewards-stub />