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,42 @@
     </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="overview.balances"
+            class="currency-selector"
+            field-id="currency"
+            field-label="Currency"
+          >
+            <TmField
+              v-model="selectedFiatCurrency"
+              :title="`Select your fiat currency`"
+              :options="fiatCurrencies"
+              placeholder="Select your currency..."
+              type="select"
+            />
+          </TmFormGroup>
+        </div>
+        <div v-if="overview.balances" class="row small-container">
+          <div class="col">
+            <h3>Total Tokens</h3>
+            <h2>
+              <TmField
+                id="balance"
+                :options="balances"
+                :placeholder="totalFiatValue"
+                type="select"
+                :is-disabled="true"
+              />
+            </h2>
+          </div>
         </div>
-
         <div class="row small-container">
           <div v-if="overview.totalStake > 0" class="available-atoms">
             <h3>Available {{ stakingDenom }}</h3>
@@ -58,12 +87,17 @@ 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 { UserTransactionAdded } from "src/gql"
 import { mapGetters } from "vuex"
 import gql from "graphql-tag"
+
 export default {
   name: `tm-balance`,
   components: {
+    TmFormGroup,
+    TmField,
     TmBtn,
     SendModal,
     ModalWithdrawRewards
@@ -75,7 +109,10 @@ export default {
   data() {
     return {
       overview: {},
-      stakingDenom: ""
+      stakingDenom: "",
+      totalFiatValue: `Tokens Total Fiat Value`,
+      selectedFiatCurrency: ``,
+      currencySign: ``
     }
   },
   computed: {
@@ -84,6 +121,25 @@ export default {
     // the validator rewards are needed to filter the top 5 validators to withdraw from
     readyToWithdraw() {
       return this.overview.totalRewards > 0
+    },
+    balances() {
+      let balances = ``
+      if (this.overview.balances) {
+        balances = this.overview.balances.map(({ denom, amount }) => ({
+          value: ``,
+          key: denom.concat(` ` + amount)
+        }))
+      }
+      return balances
+    },
+    fiatCurrencies() {
+      return [
+        { key: `EUR`, value: `EUR` },
+        { key: `USD`, value: `USD` },
+        { key: `GBP`, value: `GBP` },
+        { key: `CHF`, value: `CHF` },
+        { key: `JPY`, value: `JPY` }
+      ]
     }
   },
   methods: {
@@ -101,6 +157,10 @@ export default {
           overview(networkId: $networkId, address: $address) {
             totalRewards
             liquidStake
+            balances {
+              denom
+              amount
+            }
             totalStake
           }
         }
@@ -142,6 +202,45 @@ export default {
         return data.network.stakingDenom
       }
     },
+    totalFiatValue: {
+      query: gql`
+        query totalFiatValue(
+          $networkId: String!
+          $balances: [BalanceInput]!
+          $selectedFiatCurrency: String!
+        ) {
+          totalFiatValue(
+            networkId: $networkId
+            balances: $balances
+            selectedFiatCurrency: $selectedFiatCurrency
+          )
+        }
+      `,
+      variables() {
+        // We need to create new balances objects because of the __typename field.
+        // The delete command is really bad for performance so this is the best way.
+        let balances = []
+        this.overview.balances.forEach(balance => {
+          let newBalance = {
+            amount: balance.amount,
+            denom: balance.denom
+          }
+          balances.push(newBalance)
+        })
+        return {
+          networkId: this.network,
+          balances,
+          selectedFiatCurrency: this.selectedFiatCurrency
+        }
+      },
+      update(data) {
+        /* istanbul ignore next */
+        return data.totalFiatValue
+      },
+      skip() {
+        return !this.overview.balances || !this.selectedFiatCurrency
+      }
+    },
     $subscribe: {
       userTransactionAdded: {
         variables() {
@@ -217,6 +316,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);
@@ -277,6 +382,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,32 @@ 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({
+      overview: {
+        balances: [
+          {
+            amount: 1,
+            denom: `TOKEN1`
+          },
+          {
+            amount: 2,
+            denom: `TOKEN2`
+          },
+        ] 
+      }
+    })
+    expect(wrapper.vm.balances).toEqual([{value: ``, key: `TOKEN1 1`}, {value: ``, key: `TOKEN2 2`}])
+  })
+
+  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` }
+    ])
+  })
 })

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

@@ -9,21 +9,29 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
       class="values-container"
     >
       <div
-        class="total-atoms"
+        class="upper-header"
       >
-        <h3>
-          Total ATOM
-        </h3>
-
-        <h2
-          class="total-atoms__value"
+        <div
+          class="total-atoms"
         >
+          <h3>
+            Total ATOM
+          </h3>
+
+          <h2
+            class="total-atoms__value"
+          >
+
+            0
 
-          0
-
-        </h2>
+          </h2>
+        </div>
+
+        <!---->
       </div>
 
+      <!---->
+
       <div
         class="row small-container"
       >
@@ -68,21 +76,29 @@ exports[`TmBalance show the balance header when signed in 1`] = `
       class="values-container"
     >
       <div
-        class="total-atoms"
+        class="upper-header"
       >
-        <h3>
-          Total ATOM
-        </h3>
-
-        <h2
-          class="total-atoms__value"
+        <div
+          class="total-atoms"
         >
+          <h3>
+            Total ATOM
+          </h3>
+
+          <h2
+            class="total-atoms__value"
+          >
+
+            3,210
 
-          3,210
-
-        </h2>
+          </h2>
+        </div>
+
+        <!---->
       </div>
 
+      <!---->
+
       <div
         class="row small-container"
       >