From ba703823c1185d45262a85c9cb5073a119e1cdf8 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Mon, 30 Dec 2019 20:53:23 +0100 Subject: [PATCH 01/20] add balance of various tokens --- src/components/common/TmBalance.vue | 84 ++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 9e67ea944e..0f6f86895a 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -17,7 +17,20 @@ {{ overview.totalStake | shortDecimals | noBlanks }} - +
+
+

Total Tokens

+

+ +

+
+

Available {{ stakingDenom }}

@@ -58,6 +71,7 @@ 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 TmField from "src/components/common/TmField" import { UserTransactionAdded } from "src/gql" import { mapGetters } from "vuex" import gql from "graphql-tag" @@ -65,6 +79,7 @@ export default { name: `tm-balance`, components: { TmBtn, + TmField, SendModal, ModalWithdrawRewards }, @@ -75,7 +90,8 @@ export default { data() { return { overview: {}, - stakingDenom: "" + stakingDenom: "", + totalFiatValue: `Total Tokens Fiat Value` } }, computed: { @@ -84,6 +100,18 @@ 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 = this.overview.balances + return balances.map(({ denom, amount }) => ({ + value: ``, + key: denom.concat(` ` + amount) + })) + } + }, + mounted() { + if (this.overview.balances) { + this.totalFiatValue = this.calculateTotalFiatValue() } }, methods: { @@ -92,6 +120,54 @@ export default { }, onSend() { this.$refs.SendModal.open() + }, + // This function will receive the desired fiat currency to display as a parameter + // Right now it is EUR by default + async calculateTotalFiatValue() { + // When e-Money goes live they will count with a trading platform where the value + // for the different backed tokens will be changing slightly. + // They will provide with an API for us to query these values. + // For now we will assume a 1:1 ratio and treat each token like it were the real + // fiat currency it represents. + + // First we filter out the NGM balance and get the real fiat currencies names + const fiatBalances = this.overview.balances + .filter(({ denom }) => !denom.includes(`NGM`)) + .map(({ denom, amount }) => ({ + denom: denom.substr(2), + amount + })) + // Now we use the public API https://exchangeratesapi.io/ to add all balances into + // a single fiat currency value + const allTickers = fiatBalances + .map(({ denom }) => denom) + .filter(denom => denom !== `EUR`) + .join(`,`) + const exchangeRates = await fetch( + `https://api.exchangeratesapi.io/latest?&symbols=${allTickers}` + ) + .then(r => r.json()) + .catch(error => console.error(error)) + + const tickersKeyMap = Object.keys(exchangeRates.rates) + const tickersValueMap = Object.values(exchangeRates.rates) + let totalFiatValue = 0 + this.overview.balances.forEach(({ denom, amount }) => { + // in case it is Euro, we add it directly + if (denom.includes(`EUR`)) { + totalFiatValue += parseFloat(amount) + } else { + tickersKeyMap.forEach((ticker, index) => { + if (denom.includes(ticker)) { + totalFiatValue += parseFloat(amount) / tickersValueMap[index] + } + }) + } + }) + this.totalFiatValue = totalFiatValue + .toFixed(6) + .toString() + .concat(` €`) } }, apollo: { @@ -101,6 +177,10 @@ export default { overview(networkId: $networkId, address: $address) { totalRewards liquidStake + balances { + denom + amount + } totalStake } } From 81e6c7eed4807b841d5cb61aef86cd8a3344b230 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Mon, 30 Dec 2019 20:54:48 +0100 Subject: [PATCH 02/20] update snapshot --- .../components/common/__snapshots__/TmBalance.spec.js.snap | 4 ++++ 1 file changed, 4 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 a511c087af..c67db02c9b 100644 --- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap +++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap @@ -24,6 +24,8 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
+ +
@@ -83,6 +85,8 @@ exports[`TmBalance show the balance header when signed in 1`] = `
+ +
From 3d31015904b3393675634d7df03c9d48e4c052bf Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Tue, 31 Dec 2019 10:36:00 +0100 Subject: [PATCH 03/20] fix word misordering --- src/components/common/TmBalance.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 0f6f86895a..128ca77e14 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -91,7 +91,7 @@ export default { return { overview: {}, stakingDenom: "", - totalFiatValue: `Total Tokens Fiat Value` + totalFiatValue: `Tokens Total Fiat Value` } }, computed: { From 38666598f2375bc1187891447ec14aae9d3fce62 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Tue, 31 Dec 2019 11:36:10 +0100 Subject: [PATCH 04/20] try fix asynchrony --- src/components/common/TmBalance.vue | 75 +++++++++++++++-------------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 128ca77e14..4c152a0b61 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -110,9 +110,9 @@ export default { } }, mounted() { - if (this.overview.balances) { + setTimeout(() => { this.totalFiatValue = this.calculateTotalFiatValue() - } + }, 1000) }, methods: { onWithdrawal() { @@ -131,43 +131,48 @@ export default { // fiat currency it represents. // First we filter out the NGM balance and get the real fiat currencies names - const fiatBalances = this.overview.balances - .filter(({ denom }) => !denom.includes(`NGM`)) - .map(({ denom, amount }) => ({ - denom: denom.substr(2), - amount - })) - // Now we use the public API https://exchangeratesapi.io/ to add all balances into - // a single fiat currency value - const allTickers = fiatBalances - .map(({ denom }) => denom) - .filter(denom => denom !== `EUR`) - .join(`,`) - const exchangeRates = await fetch( + if (this.overview.balances) { + const fiatBalances = this.overview.balances + .filter(({ denom }) => !denom.includes(`NGM`)) + .map(({ denom, amount }) => ({ + denom: denom.substr(2), + amount + })) + // Now we use the public API https://exchangeratesapi.io/ to add all balances into + // a single fiat currency value + const allTickers = fiatBalances + .map(({ denom }) => denom) + .filter(denom => denom !== `EUR`) + .join(`,`) + const exchangeRates = await this.fetchExchangeRates(allTickers) + + const tickersKeyMap = Object.keys(exchangeRates.rates) + const tickersValueMap = Object.values(exchangeRates.rates) + let totalFiatValue = 0 + this.overview.balances.forEach(({ denom, amount }) => { + // in case it is Euro, we add it directly + if (denom.includes(`EUR`)) { + totalFiatValue += parseFloat(amount) + } else { + tickersKeyMap.forEach((ticker, index) => { + if (denom.includes(ticker)) { + totalFiatValue += parseFloat(amount) / tickersValueMap[index] + } + }) + } + }) + this.totalFiatValue = totalFiatValue + .toFixed(6) + .toString() + .concat(` €`) + } + }, + async fetchExchangeRates(allTickers) { + return await fetch( `https://api.exchangeratesapi.io/latest?&symbols=${allTickers}` ) .then(r => r.json()) .catch(error => console.error(error)) - - const tickersKeyMap = Object.keys(exchangeRates.rates) - const tickersValueMap = Object.values(exchangeRates.rates) - let totalFiatValue = 0 - this.overview.balances.forEach(({ denom, amount }) => { - // in case it is Euro, we add it directly - if (denom.includes(`EUR`)) { - totalFiatValue += parseFloat(amount) - } else { - tickersKeyMap.forEach((ticker, index) => { - if (denom.includes(ticker)) { - totalFiatValue += parseFloat(amount) / tickersValueMap[index] - } - }) - } - }) - this.totalFiatValue = totalFiatValue - .toFixed(6) - .toString() - .concat(` €`) } }, apollo: { From 6e7c8ba08ff242763bc62b79ed4687da7479558a Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Tue, 31 Dec 2019 14:50:05 +0100 Subject: [PATCH 05/20] add currency selector --- src/components/common/TmBalance.vue | 48 ++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 4c152a0b61..0dd16609ae 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -17,6 +17,20 @@ {{ overview.totalStake | shortDecimals | noBlanks }}
+ + + + +

Total Tokens

@@ -91,7 +105,8 @@ export default { return { overview: {}, stakingDenom: "", - totalFiatValue: `Tokens Total Fiat Value` + totalFiatValue: `Tokens Total Fiat Value`, + selectedFiatCurrency: `` } }, computed: { @@ -107,6 +122,14 @@ export default { value: ``, key: denom.concat(` ` + amount) })) + }, + fiatCurrencies() { + return [ + { key: `EUR`, value: `EUR` }, + { key: `USD`, value: `USD` }, + { key: `GBP`, value: `GBP` }, + { key: `CHF`, value: `CHF` } + ] } }, mounted() { @@ -115,14 +138,15 @@ export default { }, 1000) }, methods: { + async onSubmit() { + await this.calculateTotalFiatValue() + }, onWithdrawal() { this.$refs.ModalWithdrawRewards.open() }, onSend() { this.$refs.SendModal.open() }, - // This function will receive the desired fiat currency to display as a parameter - // Right now it is EUR by default async calculateTotalFiatValue() { // When e-Money goes live they will count with a trading platform where the value // for the different backed tokens will be changing slightly. @@ -131,7 +155,7 @@ export default { // fiat currency it represents. // First we filter out the NGM balance and get the real fiat currencies names - if (this.overview.balances) { + if (this.overview.balances && this.selectedFiatCurrency) { const fiatBalances = this.overview.balances .filter(({ denom }) => !denom.includes(`NGM`)) .map(({ denom, amount }) => ({ @@ -142,7 +166,7 @@ export default { // a single fiat currency value const allTickers = fiatBalances .map(({ denom }) => denom) - .filter(denom => denom !== `EUR`) + .filter(denom => denom !== this.selectedFiatCurrency) .join(`,`) const exchangeRates = await this.fetchExchangeRates(allTickers) @@ -150,8 +174,8 @@ export default { const tickersValueMap = Object.values(exchangeRates.rates) let totalFiatValue = 0 this.overview.balances.forEach(({ denom, amount }) => { - // in case it is Euro, we add it directly - if (denom.includes(`EUR`)) { + // in case it is the base fiat currency selected, we add it directly + if (denom.includes(this.selectedFiatCurrency)) { totalFiatValue += parseFloat(amount) } else { tickersKeyMap.forEach((ticker, index) => { @@ -302,6 +326,12 @@ export default { padding-right: 2.5rem; } +#currency-selector.tm-select { + position: absolute; + right: 1.25rem; + top: 1.25rem; +} + .rewards h2 { color: var(--success); font-size: var(--m); @@ -362,6 +392,10 @@ export default { text-align: center; } + #currency-selector.tm-select { + width: 40px; + } + .button-container { width: 100%; padding: 1rem; From 3682bf47fd2b7d5c5ca3a3f47121f944acb032f3 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Tue, 31 Dec 2019 20:25:31 +0100 Subject: [PATCH 06/20] fix select currency. hack for placeholder --- src/components/common/TmBalance.vue | 65 ++++++++++++++++++++--------- src/components/common/TmField.vue | 2 +- 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 0dd16609ae..072a78702e 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -17,20 +17,16 @@ {{ overview.totalStake | shortDecimals | noBlanks }}
- - - - - + + +

Total Tokens

@@ -85,6 +81,8 @@ 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 TmFormStruct from "common/TmFormStruct" +import TmFormGroup from "common/TmFormGroup" import TmField from "src/components/common/TmField" import { UserTransactionAdded } from "src/gql" import { mapGetters } from "vuex" @@ -92,8 +90,9 @@ import gql from "graphql-tag" export default { name: `tm-balance`, components: { - TmBtn, + TmFormGroup, TmField, + TmBtn, SendModal, ModalWithdrawRewards }, @@ -106,7 +105,8 @@ export default { overview: {}, stakingDenom: "", totalFiatValue: `Tokens Total Fiat Value`, - selectedFiatCurrency: `` + selectedFiatCurrency: ``, + currencySign: `` } }, computed: { @@ -130,6 +130,11 @@ export default { { key: `GBP`, value: `GBP` }, { key: `CHF`, value: `CHF` } ] + }, + async currency() { + if (!this.selectedFiatCurrency) return `` + + await this.calculateTotalFiatValue() } }, mounted() { @@ -138,9 +143,6 @@ export default { }, 1000) }, methods: { - async onSubmit() { - await this.calculateTotalFiatValue() - }, onWithdrawal() { this.$refs.ModalWithdrawRewards.open() }, @@ -185,10 +187,11 @@ export default { }) } }) + this.getCurrencySign(this.selectedFiatCurrency) this.totalFiatValue = totalFiatValue .toFixed(6) .toString() - .concat(` €`) + .concat(` ${this.currencySign}`) } }, async fetchExchangeRates(allTickers) { @@ -197,6 +200,28 @@ export default { ) .then(r => r.json()) .catch(error => console.error(error)) + }, + getCurrencySign(currency) { + switch (currency) { + case `EUR`: + this.currencySign = `€` + break + case `USD`: + this.currencySign = `$` + break + case `GBP`: + this.currencySign = `£` + break + case `CHF`: + this.currencySign = `Fr` + break + case `JPY`: + this.currencySign = `¥` + break + default: + this.currencySign = `?` + break + } } }, apollo: { diff --git a/src/components/common/TmField.vue b/src/components/common/TmField.vue index e57a2dfe66..336a95c455 100644 --- a/src/components/common/TmField.vue +++ b/src/components/common/TmField.vue @@ -89,7 +89,7 @@ export default { default: null }, placeholder: { - type: String, + type: ``, // temporary fix while I figure this out default: null }, size: { From 337b69cbf896c5c8ffdaa59b30ccf98bda46db86 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Fri, 3 Jan 2020 11:42:04 +0100 Subject: [PATCH 07/20] important fixes --- src/components/common/TmBalance.vue | 68 ++++++++++++++++------------- src/components/common/TmField.vue | 2 +- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 072a78702e..5245b14b2f 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -11,22 +11,27 @@
-
-

Total {{ stakingDenom }}

-

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

+
+
+

Total {{ stakingDenom }}

+

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

+
+ + +
- - -

Total Tokens

@@ -81,7 +86,6 @@ 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 TmFormStruct from "common/TmFormStruct" import TmFormGroup from "common/TmFormGroup" import TmField from "src/components/common/TmField" import { UserTransactionAdded } from "src/gql" @@ -128,20 +132,16 @@ export default { { key: `EUR`, value: `EUR` }, { key: `USD`, value: `USD` }, { key: `GBP`, value: `GBP` }, - { key: `CHF`, value: `CHF` } + { key: `CHF`, value: `CHF` }, + { key: `JPY`, value: `JPY` } ] }, - async currency() { + currency() { if (!this.selectedFiatCurrency) return `` - await this.calculateTotalFiatValue() + return this.calculateTotalFiatValue() } }, - mounted() { - setTimeout(() => { - this.totalFiatValue = this.calculateTotalFiatValue() - }, 1000) - }, methods: { onWithdrawal() { this.$refs.ModalWithdrawRewards.open() @@ -170,8 +170,12 @@ export default { .map(({ denom }) => denom) .filter(denom => denom !== this.selectedFiatCurrency) .join(`,`) - const exchangeRates = await this.fetchExchangeRates(allTickers) - + const exchangeRates = await this.fetchExchangeRates( + this.selectedFiatCurrency, + allTickers + ) + // Now we have the exchange rates, we can proceed to add all the tokens times + // their fiat value const tickersKeyMap = Object.keys(exchangeRates.rates) const tickersValueMap = Object.values(exchangeRates.rates) let totalFiatValue = 0 @@ -187,6 +191,7 @@ export default { }) } }) + // Finally we get the proper currency sign to display this.getCurrencySign(this.selectedFiatCurrency) this.totalFiatValue = totalFiatValue .toFixed(6) @@ -194,9 +199,9 @@ export default { .concat(` ${this.currencySign}`) } }, - async fetchExchangeRates(allTickers) { + async fetchExchangeRates(selectedFiatCurrency, allTickers) { return await fetch( - `https://api.exchangeratesapi.io/latest?&symbols=${allTickers}` + `https://api.exchangeratesapi.io/latest?base=${selectedFiatCurrency}&symbols=${allTickers}` ) .then(r => r.json()) .catch(error => console.error(error)) @@ -351,10 +356,10 @@ export default { padding-right: 2.5rem; } -#currency-selector.tm-select { +.currency-selector.tm-form-group { position: absolute; right: 1.25rem; - top: 1.25rem; + top: -0.7rem; } .rewards h2 { @@ -417,8 +422,9 @@ export default { text-align: center; } - #currency-selector.tm-select { + .currency-selector.tm-form-group { width: 40px; + right: 2.5rem; } .button-container { diff --git a/src/components/common/TmField.vue b/src/components/common/TmField.vue index 336a95c455..e57a2dfe66 100644 --- a/src/components/common/TmField.vue +++ b/src/components/common/TmField.vue @@ -89,7 +89,7 @@ export default { default: null }, placeholder: { - type: ``, // temporary fix while I figure this out + type: String, default: null }, size: { From 802012aa4fd2c0ec76020564bb5d60d4c8db2312 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Fri, 3 Jan 2020 12:01:03 +0100 Subject: [PATCH 08/20] update snapshot --- .../__snapshots__/TmBalance.spec.js.snap | 76 ++++++++++++++----- 1 file changed, 56 insertions(+), 20 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 c67db02c9b..afa453129e 100644 --- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap +++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap @@ -9,19 +9,37 @@ exports[`TmBalance do not show available atoms when the user has none in the fir class="values-container" >
-

- Total ATOM -

- -

+

+ Total ATOM +

+ +

+ + 0 - 0 - -

+ +
+ + + +
@@ -70,19 +88,37 @@ exports[`TmBalance show the balance header when signed in 1`] = ` class="values-container" >
-

- Total ATOM -

- -

+

+ Total ATOM +

+ +

+ + 3,210 - 3,210 - -

+ +
+ + + +
From 0c25e231f6c29969a99b9ddef435c11bc0783cb4 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Fri, 3 Jan 2020 12:02:07 +0100 Subject: [PATCH 09/20] changelog --- changes/ana_multiple-denoms-in-porfolio | 1 + 1 file changed, 1 insertion(+) create mode 100644 changes/ana_multiple-denoms-in-porfolio 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 From f3b3102552db59ddc9f83ba38c24b2b8cd251bb0 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Sun, 5 Jan 2020 20:59:19 +0100 Subject: [PATCH 10/20] getting things ready --- src/components/common/TmBalance.vue | 121 +++++++++------------------- 1 file changed, 36 insertions(+), 85 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 5245b14b2f..935b4f74be 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -19,6 +19,7 @@
0 }, balances() { - let balances = this.overview.balances - return balances.map(({ denom, amount }) => ({ - value: ``, - key: denom.concat(` ` + amount) - })) + if (this.overview.balances) { + let balances = this.overview.balances + return balances.map(({ denom, amount }) => ({ + value: ``, + key: denom.concat(` ` + amount) + })) + } }, fiatCurrencies() { return [ @@ -139,7 +142,7 @@ export default { currency() { if (!this.selectedFiatCurrency) return `` - return this.calculateTotalFiatValue() + return this.totalFiatValue } }, methods: { @@ -148,85 +151,6 @@ export default { }, onSend() { this.$refs.SendModal.open() - }, - async calculateTotalFiatValue() { - // When e-Money goes live they will count with a trading platform where the value - // for the different backed tokens will be changing slightly. - // They will provide with an API for us to query these values. - // For now we will assume a 1:1 ratio and treat each token like it were the real - // fiat currency it represents. - - // First we filter out the NGM balance and get the real fiat currencies names - if (this.overview.balances && this.selectedFiatCurrency) { - const fiatBalances = this.overview.balances - .filter(({ denom }) => !denom.includes(`NGM`)) - .map(({ denom, amount }) => ({ - denom: denom.substr(2), - amount - })) - // Now we use the public API https://exchangeratesapi.io/ to add all balances into - // a single fiat currency value - const allTickers = fiatBalances - .map(({ denom }) => denom) - .filter(denom => denom !== this.selectedFiatCurrency) - .join(`,`) - const exchangeRates = await this.fetchExchangeRates( - this.selectedFiatCurrency, - allTickers - ) - // Now we have the exchange rates, we can proceed to add all the tokens times - // their fiat value - const tickersKeyMap = Object.keys(exchangeRates.rates) - const tickersValueMap = Object.values(exchangeRates.rates) - let totalFiatValue = 0 - this.overview.balances.forEach(({ denom, amount }) => { - // in case it is the base fiat currency selected, we add it directly - if (denom.includes(this.selectedFiatCurrency)) { - totalFiatValue += parseFloat(amount) - } else { - tickersKeyMap.forEach((ticker, index) => { - if (denom.includes(ticker)) { - totalFiatValue += parseFloat(amount) / tickersValueMap[index] - } - }) - } - }) - // Finally we get the proper currency sign to display - this.getCurrencySign(this.selectedFiatCurrency) - this.totalFiatValue = totalFiatValue - .toFixed(6) - .toString() - .concat(` ${this.currencySign}`) - } - }, - async fetchExchangeRates(selectedFiatCurrency, allTickers) { - return await fetch( - `https://api.exchangeratesapi.io/latest?base=${selectedFiatCurrency}&symbols=${allTickers}` - ) - .then(r => r.json()) - .catch(error => console.error(error)) - }, - getCurrencySign(currency) { - switch (currency) { - case `EUR`: - this.currencySign = `€` - break - case `USD`: - this.currencySign = `$` - break - case `GBP`: - this.currencySign = `£` - break - case `CHF`: - this.currencySign = `Fr` - break - case `JPY`: - this.currencySign = `¥` - break - default: - this.currencySign = `?` - break - } } }, apollo: { @@ -281,6 +205,33 @@ export default { return data.network.stakingDenom } }, + totalFiatValue: { + // if(this.overview.balances) { + query() { + if(this.overview.balances) { + gql` + query TotalFiatValue($networkId: String!, $balances: [BalanceInput], $selectedFiatCurrency: String!) { + totalfiatvalue(networkId: $networkId, balances: $balances, selectedFiatCurrency: $selectedFiatCurrency) + } + ` + } + } + , + variables() { + if(this.overview.balances) { + return { + networkId: this.network, + balances: this.overview.balances, + selectedFiatCurrency: this.selectedFiatCurrency + } + } + }, + update(data) { + /* istanbul ignore next */ + return data + } + // } + }, $subscribe: { userTransactionAdded: { variables() { From 66d8554e2f16ff941db0be05cb8463923cbcc596 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Sun, 5 Jan 2020 22:53:41 +0100 Subject: [PATCH 11/20] fixes but totalfiatvalue query not triggered --- src/components/common/TmBalance.vue | 73 +++++++++++++++++++---------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 935b4f74be..c8d38ca5ab 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -26,7 +26,7 @@ > 0 }, balances() { + let balances = `` if (this.overview.balances) { - let balances = this.overview.balances - return balances.map(({ denom, amount }) => ({ + balances = this.overview.balances.map(({ denom, amount }) => ({ value: ``, key: denom.concat(` ` + amount) })) } + return balances }, fiatCurrencies() { return [ @@ -139,8 +141,9 @@ export default { { key: `JPY`, value: `JPY` } ] }, - currency() { + totalValue() { if (!this.selectedFiatCurrency) return `` + this.fireQuery() return this.totalFiatValue } @@ -151,6 +154,13 @@ export default { }, onSend() { this.$refs.SendModal.open() + }, + fireQuery() { + this.$apollo.queries.totalFiatValue.refetch({ + networkId: this.network, + balances: this.overview.balances, + selectedFiatCurrency: this.selectedFiatCurrency + }) } }, apollo: { @@ -206,31 +216,42 @@ export default { } }, totalFiatValue: { - // if(this.overview.balances) { - query() { - if(this.overview.balances) { - gql` - query TotalFiatValue($networkId: String!, $balances: [BalanceInput], $selectedFiatCurrency: String!) { - totalfiatvalue(networkId: $networkId, balances: $balances, selectedFiatCurrency: $selectedFiatCurrency) - } - ` + query() { + console.log("Inside QUERY") + return gql` + query totalFiatValue( + $networkId: String! + $balances: [BalanceInput] + $selectedFiatCurrency: String! + ) { + totalFiatValue( + networkId: $networkId + balances: $balances + selectedFiatCurrency: $selectedFiatCurrency + ) } + ` + }, + variables() { + console.log("selected fiat currency is", this.selectedFiatCurrency) + return { + networkId: this.network, + balances: this.overview.balances, + selectedFiatCurrency: this.selectedFiatCurrency } - , - variables() { - if(this.overview.balances) { - return { - networkId: this.network, - balances: this.overview.balances, - selectedFiatCurrency: this.selectedFiatCurrency - } - } - }, - update(data) { - /* istanbul ignore next */ - return data + }, + update(data) { + /* istanbul ignore next */ + console.log("data in totalFiatValue is ", data) + return data.totalFiatValue + }, + skip() { + console.log("balances are ", this.overview.balances) + if (!this.overview.balances) { + console.log("Are we skipping this query?") + return this.skipQuery } - // } + } }, $subscribe: { userTransactionAdded: { From 14b86811e2904ad92f79256c2970660a12423c52 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Mon, 6 Jan 2020 11:45:02 +0100 Subject: [PATCH 12/20] all working --- src/components/common/TmBalance.vue | 64 ++++++++++++----------------- 1 file changed, 26 insertions(+), 38 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index c8d38ca5ab..bc48884f7f 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -26,7 +26,7 @@ > { + let newBalance = { + amount: balance.amount, + denom: balance.denom + } + balances.push(newBalance) + }) return { networkId: this.network, - balances: this.overview.balances, + balances, selectedFiatCurrency: this.selectedFiatCurrency } }, update(data) { /* istanbul ignore next */ - console.log("data in totalFiatValue is ", data) return data.totalFiatValue }, skip() { - console.log("balances are ", this.overview.balances) - if (!this.overview.balances) { - console.log("Are we skipping this query?") - return this.skipQuery - } + return !this.overview.balances || !this.selectedFiatCurrency } }, $subscribe: { From 4f205159d143ab2c41df95756be0fd32fa98342d Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Mon, 6 Jan 2020 12:45:31 +0100 Subject: [PATCH 13/20] update snapshot --- .../__snapshots__/TmBalance.spec.js.snap | 28 ++----------------- 1 file changed, 2 insertions(+), 26 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 afa453129e..5b0f3bc0e3 100644 --- a/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap +++ b/tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap @@ -27,19 +27,7 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
- - - +
@@ -106,19 +94,7 @@ exports[`TmBalance show the balance header when signed in 1`] = `
- - - +
From 2eded47981201b60cc4b8a6b8fa701f4c86be0e7 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Mon, 6 Jan 2020 13:12:29 +0100 Subject: [PATCH 14/20] add test for new computed fields --- .../specs/components/common/TmBalance.spec.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index ca59c2503d..3c13953e82 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/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` } + ]) + }) }) From 22564e189bd838dbb009d57a1d6118f8ba023e98 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 12:52:25 +0100 Subject: [PATCH 15/20] adapt logic to recent changes --- src/components/common/TmBalance.vue | 128 +++++++++++------- .../specs/components/common/TmBalance.spec.js | 24 ++-- 2 files changed, 93 insertions(+), 59 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index bc48884f7f..3e69d47d01 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -19,7 +19,7 @@
-
+

Total Tokens

@@ -110,9 +115,11 @@ export default { return { overview: {}, stakingDenom: "", - totalFiatValue: `Tokens Total Fiat Value`, + balances: [], + balancesWithFiat: [], + selectedTokenFiatValue: `Tokens Total Fiat Value`, selectedFiatCurrency: ``, - currencySign: `` + convertedBalances: [] } }, computed: { @@ -122,15 +129,15 @@ export default { readyToWithdraw() { return this.overview.totalRewards > 0 }, - balances() { - let balances = `` - if (this.overview.balances) { - balances = this.overview.balances.map(({ denom, amount }) => ({ + concatBalances() { + let balancesArray = [] + if (this.balances.length > 1) { + balancesArray = this.balances.map(({ denom, amount }) => ({ value: ``, key: denom.concat(` ` + amount) })) } - return balances + return balancesArray }, fiatCurrencies() { return [ @@ -142,6 +149,16 @@ export default { ] } }, + watch: { + balancesWithFiat: function() { + this.convertedBalances = this.balancesWithFiat.map( + ({ denom, fiatValue }) => ({ + value: ``, + key: denom.concat(` ` + fiatValue) + }) + ) + } + }, methods: { onWithdrawal() { this.$refs.ModalWithdrawRewards.open() @@ -157,10 +174,6 @@ export default { overview(networkId: $networkId, address: $address) { totalRewards liquidStake - balances { - denom - amount - } totalStake } } @@ -180,76 +193,97 @@ export default { } }, skip() { + /* istanbul ignore next */ return !this.address } }, - stakingDenom: { + balances: { query: gql` - query Network($networkId: String!) { - network(id: $networkId) { - id - stakingDenom + query balances($networkId: String!, $address: String!) { + balances(networkId: $networkId, address: $address) { + denom + amount } } `, variables() { + /* istanbul ignore next */ return { - networkId: this.network + networkId: this.network, + address: this.address } }, - update(data) { + skip() { /* istanbul ignore next */ - return data.network.stakingDenom + return !this.address } }, - totalFiatValue: { + balancesWithFiat: { query: gql` - query totalFiatValue( + query balances( $networkId: String! - $balances: [BalanceInput]! - $selectedFiatCurrency: String! + $address: String! + $fiatCurrency: String ) { - totalFiatValue( + balances( networkId: $networkId - balances: $balances - selectedFiatCurrency: $selectedFiatCurrency - ) + address: $address + fiatCurrency: $fiatCurrency + ) { + denom + amount + fiatValue + } } `, 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) - }) + /* istanbul ignore next */ return { networkId: this.network, - balances, - selectedFiatCurrency: this.selectedFiatCurrency + address: this.address, + fiatCurrency: this.selectedFiatCurrency } }, + skip() { + /* istanbul ignore next */ + return !this.address || !this.selectedFiatCurrency + }, update(data) { /* istanbul ignore next */ - return data.totalFiatValue + return data.balances + } + }, + stakingDenom: { + query: gql` + query Network($networkId: String!) { + network(id: $networkId) { + id + stakingDenom + } + } + `, + variables() { + /* istanbul ignore next */ + return { + networkId: this.network + } }, - skip() { - return !this.overview.balances || !this.selectedFiatCurrency + update(data) { + /* istanbul ignore next */ + return data.network.stakingDenom } }, $subscribe: { userTransactionAdded: { variables() { + /* istanbul ignore next */ return { networkId: this.network, address: this.address } }, skip() { + /* istanbul ignore next */ return !this.address }, query: UserTransactionAdded, @@ -260,11 +294,13 @@ export default { }, blockAdded: { variables() { + /* istanbul ignore next */ return { networkId: this.network } }, query() { + /* istanbul ignore next */ return gql` subscription($networkId: String!) { blockAdded(networkId: $networkId) { diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index 3c13953e82..eb538960bf 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/tests/unit/specs/components/common/TmBalance.spec.js @@ -91,20 +91,18 @@ describe(`TmBalance`, () => { it(`should return the balances for the balances dropdown`, () => { wrapper.setData({ - overview: { - balances: [ - { - amount: 1, - denom: `TOKEN1` - }, - { - amount: 2, - denom: `TOKEN2` - }, - ] - } + balances: [ + { + amount: 1, + denom: `TOKEN1` + }, + { + amount: 2, + denom: `TOKEN2` + }, + ] }) - expect(wrapper.vm.balances).toEqual([{value: ``, key: `TOKEN1 1`}, {value: ``, key: `TOKEN2 2`}]) + expect(wrapper.vm.concatBalances).toEqual([{value: ``, key: `TOKEN1 1`}, {value: ``, key: `TOKEN2 2`}]) }) it(`should return the fiat currencies for the currencies selector`, () => { From 9c6aee625315598aea95c0a3e937e60aceaacac7 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 14:18:51 +0100 Subject: [PATCH 16/20] add getalldenoms test --- tests/unit/specs/components/common/TmBalance.spec.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index 9f6e800370..0bb9600d04 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/tests/unit/specs/components/common/TmBalance.spec.js @@ -108,6 +108,13 @@ describe(`TmBalance`, () => { ]) }) + 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` }, From e8be4eb48db2dca43446f92eab49111b12530175 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 14:18:59 +0100 Subject: [PATCH 17/20] travel to istanbul --- src/components/common/TmBalance.vue | 31 +++++++++++++++-------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index ee929f58b5..1ca972e91d 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -186,22 +186,22 @@ 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() { - /* istanbul ignore next */ return !this.address } }, @@ -214,15 +214,15 @@ export default { } } `, + /* istanbul ignore next */ variables() { - /* istanbul ignore next */ return { networkId: this.network, address: this.address } }, + /* istanbul ignore next */ skip() { - /* istanbul ignore next */ return !this.address } }, @@ -244,20 +244,20 @@ export default { } } `, + /* istanbul ignore next */ variables() { - /* istanbul ignore next */ return { networkId: this.network, address: this.address, fiatCurrency: this.selectedFiatCurrency } }, + /* istanbul ignore next */ skip() { - /* istanbul ignore next */ return !this.address || !this.selectedFiatCurrency }, + /* istanbul ignore next */ update(data) { - /* istanbul ignore next */ return data.balances } }, @@ -270,45 +270,46 @@ export default { } } `, + /* istanbul ignore next */ variables() { - /* istanbul ignore next */ return { networkId: this.network } }, + /* istanbul ignore next */ update(data) { - /* istanbul ignore next */ return data.network.stakingDenom } }, $subscribe: { userTransactionAdded: { + /* istanbul ignore next */ variables() { - /* istanbul ignore next */ return { networkId: this.network, address: this.address } }, + /* istanbul ignore next */ skip() { - /* istanbul ignore next */ return !this.address }, query: UserTransactionAdded, + /* istanbul ignore next */ result() { // query if successful or not as even an unsuccessful tx costs fees this.$apollo.queries.overview.refetch() } }, blockAdded: { + /* istanbul ignore next */ variables() { - /* istanbul ignore next */ return { networkId: this.network } }, + /* istanbul ignore next */ query() { - /* istanbul ignore next */ return gql` subscription($networkId: String!) { blockAdded(networkId: $networkId) { @@ -318,8 +319,8 @@ export default { } ` }, + /* istanbul ignore next */ result() { - /* istanbul ignore next */ this.$apollo.queries.overview.refetch() } } From aeff1d0aff3acce90fd3cffd00c03f5480c5a1a5 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 14:28:45 +0100 Subject: [PATCH 18/20] delete usertransactionadded --- src/components/common/TmBalance.vue | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 1ca972e91d..979b5cf672 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -92,7 +92,6 @@ 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" @@ -282,25 +281,6 @@ export default { } }, $subscribe: { - userTransactionAdded: { - /* istanbul ignore next */ - variables() { - return { - networkId: this.network, - address: this.address - } - }, - /* istanbul ignore next */ - skip() { - return !this.address - }, - query: UserTransactionAdded, - /* istanbul ignore next */ - result() { - // query if successful or not as even an unsuccessful tx costs fees - this.$apollo.queries.overview.refetch() - } - }, blockAdded: { /* istanbul ignore next */ variables() { From 33ccad9e17572b71f499334434c17e0221f0a605 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 14:43:09 +0100 Subject: [PATCH 19/20] add watch test --- .../specs/components/common/TmBalance.spec.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index 0bb9600d04..d262ed3854 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/tests/unit/specs/components/common/TmBalance.spec.js @@ -124,4 +124,27 @@ describe(`TmBalance`, () => { { key: `JPY`, value: `JPY` } ]) }) + + it(`should return balances concatanating denoms and fiat values`, () => { + const self = { + convertedBalances: [], + balancesWithFiat: [ + { + amount: 1, + denom: `TOKEN1`, + fiatValue: 1.52 + }, + { + amount: 2, + denom: `TOKEN2`, + fiatValue: 3.04 + } + ] + } + TmBalance.watch.balancesWithFiat.call(self) + expect(self.convertedBalances).toEqual([ + { key: `TOKEN1 1.52`, value: `` }, + { key: `TOKEN2 3.04`, value: `` } + ]) + }) }) From 2ff9be8b107a256179ad3bab7a3d68264e0aa9b0 Mon Sep 17 00:00:00 2001 From: Bitcoinera Date: Thu, 16 Jan 2020 17:43:05 +0100 Subject: [PATCH 20/20] set eur as default selected fiat currency --- src/components/common/TmBalance.vue | 47 +++++-------------- .../specs/components/common/TmBalance.spec.js | 10 ++-- 2 files changed, 15 insertions(+), 42 deletions(-) diff --git a/src/components/common/TmBalance.vue b/src/components/common/TmBalance.vue index 979b5cf672..17e61c600d 100644 --- a/src/components/common/TmBalance.vue +++ b/src/components/common/TmBalance.vue @@ -28,7 +28,7 @@ v-model="selectedFiatCurrency" :title="`Select your fiat currency`" :options="fiatCurrencies" - placeholder="Select your currency..." + :placeholder="selectedFiatCurrency" type="select" /> @@ -113,10 +113,8 @@ export default { overview: {}, stakingDenom: "", balances: [], - balancesWithFiat: [], selectedTokenFiatValue: `Tokens Total Fiat Value`, - selectedFiatCurrency: ``, - convertedBalances: [] + selectedFiatCurrency: `EUR` // EUR is our default fiat currency } }, computed: { @@ -138,6 +136,14 @@ export default { } 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` }, @@ -156,16 +162,6 @@ export default { } } }, - watch: { - balancesWithFiat: function() { - this.convertedBalances = this.balancesWithFiat - .filter(balance => !balance.denom.includes(this.stakingDenom)) - .map(({ denom, fiatValue }) => ({ - value: ``, - key: denom.concat(` ` + fiatValue) - })) - } - }, methods: { onWithdrawal() { this.$refs.ModalWithdrawRewards.open() @@ -205,27 +201,6 @@ export default { } }, balances: { - query: gql` - query balances($networkId: String!, $address: String!) { - balances(networkId: $networkId, address: $address) { - denom - amount - } - } - `, - /* istanbul ignore next */ - variables() { - return { - networkId: this.network, - address: this.address - } - }, - /* istanbul ignore next */ - skip() { - return !this.address - } - }, - balancesWithFiat: { query: gql` query balances( $networkId: String! @@ -253,7 +228,7 @@ export default { }, /* istanbul ignore next */ skip() { - return !this.address || !this.selectedFiatCurrency + return !this.address }, /* istanbul ignore next */ update(data) { diff --git a/tests/unit/specs/components/common/TmBalance.spec.js b/tests/unit/specs/components/common/TmBalance.spec.js index d262ed3854..fd82da2026 100644 --- a/tests/unit/specs/components/common/TmBalance.spec.js +++ b/tests/unit/specs/components/common/TmBalance.spec.js @@ -126,9 +126,8 @@ describe(`TmBalance`, () => { }) it(`should return balances concatanating denoms and fiat values`, () => { - const self = { - convertedBalances: [], - balancesWithFiat: [ + wrapper.setData({ + balances: [ { amount: 1, denom: `TOKEN1`, @@ -140,9 +139,8 @@ describe(`TmBalance`, () => { fiatValue: 3.04 } ] - } - TmBalance.watch.balancesWithFiat.call(self) - expect(self.convertedBalances).toEqual([ + }) + expect(wrapper.vm.convertedBalances).toEqual([ { key: `TOKEN1 1.52`, value: `` }, { key: `TOKEN2 3.04`, value: `` } ])