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"
>