Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ana/multiple denoms in porfolio (missing better designs) #3365

Merged
merged 21 commits into from
Jan 16, 2020
Merged

Ana/multiple denoms in porfolio (missing better designs) #3365

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
ba70382
add balance of various tokens
Bitcoinera Dec 30, 2019
81e6c7e
update snapshot
Bitcoinera Dec 30, 2019
3d31015
fix word misordering
Bitcoinera Dec 31, 2019
3866659
try fix asynchrony
Bitcoinera Dec 31, 2019
6e7c8ba
add currency selector
Bitcoinera Dec 31, 2019
3682bf4
fix select currency. hack for placeholder
Bitcoinera Dec 31, 2019
337b69c
important fixes
Bitcoinera Jan 3, 2020
802012a
update snapshot
Bitcoinera Jan 3, 2020
0c25e23
changelog
Bitcoinera Jan 3, 2020
f3b3102
getting things ready
Bitcoinera Jan 5, 2020
66d8554
fixes but totalfiatvalue query not triggered
Bitcoinera Jan 5, 2020
14b8681
all working
Bitcoinera Jan 6, 2020
4f20515
update snapshot
Bitcoinera Jan 6, 2020
2eded47
add test for new computed fields
Bitcoinera Jan 6, 2020
22564e1
adapt logic to recent changes
Bitcoinera Jan 16, 2020
a03eb2f
merge develop
Bitcoinera Jan 16, 2020
9c6aee6
add getalldenoms test
Bitcoinera Jan 16, 2020
e8be4eb
travel to istanbul
Bitcoinera Jan 16, 2020
aeff1d0
delete usertransactionadded
Bitcoinera Jan 16, 2020
33ccad9
add watch test
Bitcoinera Jan 16, 2020
2ff9be8
set eur as default selected fiat currency
Bitcoinera Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changes/ana_multiple-denoms-in-porfolio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
160 changes: 153 additions & 7 deletions src/components/common/TmBalance.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,47 @@
</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="Select your currency..."
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"
:is-disabled="true"
/>
</h2>
</div>
</div>

<div class="row small-container">
<div v-if="overview.totalStake > 0" class="available-atoms">
<h3>Available {{ stakingDenom }}</h3>
Expand Down Expand Up @@ -58,12 +92,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
Expand All @@ -75,7 +114,12 @@ export default {
data() {
return {
overview: {},
stakingDenom: ""
stakingDenom: "",
balances: [],
balancesWithFiat: [],
selectedTokenFiatValue: `Tokens Total Fiat Value`,
selectedFiatCurrency: ``,
convertedBalances: []
}
},
computed: {
Expand All @@ -84,6 +128,35 @@ export default {
// the validator rewards are needed to filter the top 5 validators to withdraw from
readyToWithdraw() {
return this.overview.totalRewards > 0
},
concatBalances() {
let balancesArray = []
if (this.balances.length > 1) {
balancesArray = this.balances.map(({ denom, amount }) => ({
value: ``,
key: denom.concat(` ` + amount)
}))
}
return balancesArray
},
fiatCurrencies() {
return [
{ key: `EUR`, value: `EUR` },
{ key: `USD`, value: `USD` },
{ key: `GBP`, value: `GBP` },
{ key: `CHF`, value: `CHF` },
{ key: `JPY`, value: `JPY` }
]
}
},
watch: {
balancesWithFiat: function() {
this.convertedBalances = this.balancesWithFiat.map(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you considered making this a computed instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the issue here is that I cannot query balancesWithFiat at the beginning, when the component loads, since I lack of the fiatCurrency parameter. That is why I went the watch way.

({ denom, fiatValue }) => ({
value: ``,
key: denom.concat(` ` + fiatValue)
})
)
}
},
methods: {
Expand Down Expand Up @@ -120,9 +193,66 @@ export default {
}
},
skip() {
/* istanbul ignore next */
return !this.address
}
},
balances: {
query: gql`
query balances($networkId: String!, $address: String!) {
balances(networkId: $networkId, address: $address) {
denom
amount
}
}
`,
variables() {
/* istanbul ignore next */
return {
networkId: this.network,
address: this.address
}
},
skip() {
/* istanbul ignore next */
return !this.address
}
},
balancesWithFiat: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it correct, that we load the balances twice now?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any other option. Unless there is some way to use one fragment or another conditionally (either

{
amount
denom
}

or

{
amount
denom
fiatValue
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?! why not just load the latter? it holds all the info right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because I don't have fiatCurrency at the beginning...

Well, this is easily fixed by selecting a default fiatCurrency. And then I can also make balancesWithFiat a computed prop 🤔

I will go this way ✌️

query: gql`
query balances(
$networkId: String!
$address: String!
$fiatCurrency: String
) {
balances(
networkId: $networkId
address: $address
fiatCurrency: $fiatCurrency
) {
denom
amount
fiatValue
}
}
`,
variables() {
/* istanbul ignore next */
return {
networkId: this.network,
address: this.address,
fiatCurrency: this.selectedFiatCurrency
}
},
skip() {
/* istanbul ignore next */
return !this.address || !this.selectedFiatCurrency
},
update(data) {
/* istanbul ignore next */
return data.balances
}
},
stakingDenom: {
query: gql`
query Network($networkId: String!) {
Expand All @@ -133,6 +263,7 @@ export default {
}
`,
variables() {
/* istanbul ignore next */
return {
networkId: this.network
}
Expand All @@ -145,12 +276,14 @@ export default {
$subscribe: {
userTransactionAdded: {
variables() {
/* istanbul ignore next */
return {
networkId: this.network,
address: this.address
}
},
skip() {
/* istanbul ignore next */
return !this.address
},
query: UserTransactionAdded,
Expand All @@ -161,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) {
Expand Down Expand Up @@ -217,6 +352,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);
Expand Down Expand Up @@ -277,6 +418,11 @@ export default {
text-align: center;
}

.currency-selector.tm-form-group {
width: 40px;
right: 2.5rem;
}

.button-container {
width: 100%;
padding: 1rem;
Expand Down
26 changes: 26 additions & 0 deletions tests/unit/specs/components/common/TmBalance.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,30 @@ 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(`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` }
])
})
})
56 changes: 36 additions & 20 deletions tests/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down