diff --git a/changes/ana_multiple-denoms-in-porfolio b/changes/ana_multiple-denoms-in-porfolio new file mode 100644 index 0000000000..5d55b46e34 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index fa263c1384..17e61c600d 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -11,13 +11,46 @@
-
-

Total {{ stakingDenom }}

-

- {{ overview.totalStake | shortDecimals | noBlanks }} -

+
+
+

Total {{ stakingDenom }}

+

+ {{ overview.totalStake | shortDecimals | noBlanks }} +

+
+ + + +
+
+
+

Total Tokens

+

+ +

+
-

Available {{ stakingDenom }}

@@ -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; diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index ca59c2503d..fd82da2026 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/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: `` } + ]) + }) }) 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 05bce988b7..510d0bd93e 100644 --- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap +++ b/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" >
-

- Total ATOM -

- -

+

+ Total ATOM +

+ +

+ + 0 - 0 - -

+ +
+ +
+ +
@@ -51,7 +59,7 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
@@ -68,21 +76,29 @@ exports[`TmBalance show the balance header when signed in 1`] = ` class="values-container" >
-

- Total ATOM -

- -

+

+ Total ATOM +

+ +

+ + 3,210 - 3,210 - -

+ +
+ +
+ +
@@ -129,7 +145,7 @@ exports[`TmBalance show the balance header when signed in 1`] = `