Ana/multiple denoms in porfolio (missing better designs)

changes/ana_multiple-denoms-in-porfolio

@@ -0,0 +1 @@
+[Added] [#3365](https://github.com/cosmos/lunie/pull/3365) TmBalance now displays multiple tokens balances and has a currency selector to display total value in the selected fiat currency @Bitcoinera

src/components/common/TmBalance.vue

@@ -11,13 +11,46 @@
     </div>
     <div v-else>
       <div class="values-container">
-        <div class="total-atoms">
-          <h3>Total {{ stakingDenom }}</h3>
-          <h2 class="total-atoms__value">
-            {{ overview.totalStake | shortDecimals | noBlanks }}
-          </h2>
+        <div class="upper-header">
+          <div class="total-atoms">
+            <h3>Total {{ stakingDenom }}</h3>
+            <h2 class="total-atoms__value">
+              {{ overview.totalStake | shortDecimals | noBlanks }}
+            </h2>
+          </div>
+          <TmFormGroup
+            v-if="balances && balances.length > 1"
+            class="currency-selector"
+            field-id="currency"
+            field-label="Currency"
+          >
+            <TmField
+              v-model="selectedFiatCurrency"
+              :title="`Select your fiat currency`"
+              :options="fiatCurrencies"
+              :placeholder="selectedFiatCurrency"
+              type="select"
+            />
+          </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>
@@ -57,11 +90,16 @@ import { noBlanks } from "src/filters"
 import TmBtn from "common/TmBtn"
 import SendModal from "src/ActionModal/components/SendModal"
 import ModalWithdrawRewards from "src/ActionModal/components/ModalWithdrawRewards"
+import TmFormGroup from "common/TmFormGroup"
+import TmField from "src/components/common/TmField"
 import { mapGetters } from "vuex"
 import gql from "graphql-tag"
+
 export default {
   name: `tm-balance`,
   components: {
+    TmFormGroup,
+    TmField,
     TmBtn,
     SendModal,
     ModalWithdrawRewards
@@ -73,7 +111,10 @@ export default {
   data() {
     return {
       overview: {},
-      stakingDenom: ""
+      stakingDenom: "",
+      balances: [],
+      selectedTokenFiatValue: `Tokens Total Fiat Value`,
+      selectedFiatCurrency: `EUR` // EUR is our default fiat currency
     }
   },
   computed: {
@@ -83,6 +124,35 @@ export default {
     readyToWithdraw() {
       return this.overview.totalRewards > 0
     },
+    concatBalances() {
+      let balancesArray = []
+      if (this.balances.length > 1) {
+        balancesArray = this.balances
+          .filter(balance => !balance.denom.includes(this.stakingDenom))
+          .map(({ denom, amount }) => ({
+            value: ``,
+            key: denom.concat(` ` + amount)
+          }))
+      }
+      return balancesArray
+    },
+    convertedBalances() {
+      return this.balances
+        .filter(balance => !balance.denom.includes(this.stakingDenom))
+        .map(({ denom, fiatValue }) => ({
+          value: ``,
+          key: denom.concat(` ` + fiatValue)
+        }))
+    },
+    fiatCurrencies() {
+      return [
+        { key: `EUR`, value: `EUR` },
+        { key: `USD`, value: `USD` },
+        { key: `GBP`, value: `GBP` },
+        { key: `CHF`, value: `CHF` },
+        { key: `JPY`, value: `JPY` }
+      ]
+    },
     getAllDenoms() {
       if (this.balances) {
         const balances = this.balances
@@ -111,42 +181,58 @@ export default {
           }
         }
       `,
+      /* istanbul ignore next */
       variables() {
-        /* istanbul ignore next */
         return {
           networkId: this.network,
           address: this.address
         }
       },
+      /* istanbul ignore next */
       update(data) {
-        /* istanbul ignore next */
         return {
           ...data.overview,
           totalRewards: Number(data.overview.totalRewards)
         }
       },
+      /* istanbul ignore next */
       skip() {
         return !this.address
       }
     },
     balances: {
       query: gql`
-        query balances($networkId: String!, $address: String!) {
-          balances(networkId: $networkId, address: $address) {
+        query balances(
+          $networkId: String!
+          $address: String!
+          $fiatCurrency: String
+        ) {
+          balances(
+            networkId: $networkId
+            address: $address
+            fiatCurrency: $fiatCurrency
+          ) {
             denom
             amount
+            fiatValue
           }
         }
       `,
+      /* istanbul ignore next */
       variables() {
-        /* istanbul ignore next */
         return {
           networkId: this.network,
-          address: this.address
+          address: this.address,
+          fiatCurrency: this.selectedFiatCurrency
         }
       },
+      /* istanbul ignore next */
       skip() {
         return !this.address
+      },
+      /* istanbul ignore next */
+      update(data) {
+        return data.balances
       }
     },
     stakingDenom: {
@@ -158,23 +244,26 @@ export default {
           }
         }
       `,
+      /* istanbul ignore next */
       variables() {
         return {
           networkId: this.network
         }
       },
+      /* istanbul ignore next */
       update(data) {
-        /* istanbul ignore next */
         return data.network.stakingDenom
       }
     },
     $subscribe: {
       blockAdded: {
+        /* istanbul ignore next */
         variables() {
           return {
             networkId: this.network
           }
         },
+        /* istanbul ignore next */
         query() {
           return gql`
             subscription($networkId: String!) {
@@ -185,8 +274,8 @@ export default {
             }
           `
         },
+        /* istanbul ignore next */
         result() {
-          /* istanbul ignore next */
           this.$apollo.queries.overview.refetch()
         }
       }
@@ -228,6 +317,12 @@ export default {
   padding-right: 2.5rem;
 }
 
+.currency-selector.tm-form-group {
+  position: absolute;
+  right: 1.25rem;
+  top: -0.7rem;
+}
+
 .rewards h2 {
   color: var(--success);
   font-size: var(--m);
@@ -288,6 +383,11 @@ export default {
     text-align: center;
   }
 
+  .currency-selector.tm-form-group {
+    width: 40px;
+    right: 2.5rem;
+  }
+
   .button-container {
     width: 100%;
     padding: 1rem;

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

@@ -88,4 +88,61 @@ describe(`TmBalance`, () => {
     wrapper.find("#withdraw-btn").trigger("click")
     expect($refs.ModalWithdrawRewards.open).not.toHaveBeenCalled()
   })
+
+  it(`should return the balances for the balances dropdown`, () => {
+    wrapper.setData({
+      balances: [
+        {
+          amount: 1,
+          denom: `TOKEN1`
+        },
+        {
+          amount: 2,
+          denom: `TOKEN2`
+        }
+      ]
+    })
+    expect(wrapper.vm.concatBalances).toEqual([
+      { value: ``, key: `TOKEN1 1` },
+      { value: ``, key: `TOKEN2 2` }
+    ])
+  })
+
+  it(`if no balances are found, then it returns the staking denom`, () => {
+    wrapper.setData({
+      balances: ``
+    })
+    expect(wrapper.vm.getAllDenoms).toEqual(["ATOM"])
+  })
+
+  it(`should return the fiat currencies for the currencies selector`, () => {
+    expect(wrapper.vm.fiatCurrencies).toEqual([
+      { key: `EUR`, value: `EUR` },
+      { key: `USD`, value: `USD` },
+      { key: `GBP`, value: `GBP` },
+      { key: `CHF`, value: `CHF` },
+      { key: `JPY`, value: `JPY` }
+    ])
+  })
+
+  it(`should return balances concatanating denoms and fiat values`, () => {
+    wrapper.setData({
+      balances: [
+        {
+          amount: 1,
+          denom: `TOKEN1`,
+          fiatValue: 1.52
+        },
+        {
+          amount: 2,
+          denom: `TOKEN2`,
+          fiatValue: 3.04
+        }
+      ]
+    })
+    expect(wrapper.vm.convertedBalances).toEqual([
+      { key: `TOKEN1 1.52`, value: `` },
+      { key: `TOKEN2 3.04`, value: `` }
+    ])
+  })
 })