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/better multiple denoms porfolio version #3434

Merged
merged 7 commits into from
Jan 18, 2020
Merged

Ana/better multiple denoms porfolio version #3434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c02ba69
pyramid state
Bitcoinera Jan 17, 2020
4541971
add scroll. scroll bar not showing
Bitcoinera Jan 17, 2020
2a0363e
Update src/components/common/TmBalance.vue
faboweb Jan 18, 2020
6a9cd1c
switch ids for classes
faboweb Jan 18, 2020
a0999bf
Update TmBalance.vue
faboweb Jan 18, 2020
3d97fde
fixed tests
faboweb Jan 18, 2020
d785d23
changelog
faboweb Jan 18, 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_better-multiple-denoms-porfolio-version
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[Added] Show multiple wallet balances in UI @faboweb
115 changes: 87 additions & 28 deletions src/components/common/TmBalance.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
</div>
<TmFormGroup
v-if="balances && balances.length > 1"
style="display: none;"
class="currency-selector"
field-id="currency"
field-label="Currency"
Expand All @@ -33,33 +34,31 @@
/>
</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"
/>
</h2>
</div>
</div>
<div class="row small-container">
<div v-if="overview.totalStake > 0" class="available-atoms">
<h3>Available {{ stakingDenom }}</h3>
<h2>{{ overview.liquidStake | shortDecimals | noBlanks }}</h2>
</div>
<div class="scroll">
<div class="row small-container scroll-item">
<div v-if="overview.totalStake > 0" class="available-atoms">
<h3>Available {{ stakingDenom }}</h3>
<h2>{{ overview.liquidStake | shortDecimals | noBlanks }}</h2>
</div>

<div v-if="overview.totalRewards" class="rewards">
<h3>Total Rewards</h3>
<h2>+{{ overview.totalRewards | shortDecimals | noBlanks }}</h2>
<div v-if="overview.totalRewards" class="rewards">
<h3>Total Rewards</h3>
<h2>+{{ overview.totalRewards | shortDecimals | noBlanks }}</h2>
</div>
</div>
<div
v-if="formattedBalances.length > 0"
id="scroll-item"
class="row small-container tokens-div scroll-item"
>
<div
v-for="balance in formattedBalances"
:key="balance.denom"
class="col"
>
<p class="token-denom">{{ balance.denom }}</p>
<p class="token-balance">{{ balance.amount }}</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -124,6 +123,20 @@ export default {
readyToWithdraw() {
return this.overview.totalRewards > 0
},
formattedBalances() {
return this.balances
.filter(balance => !balance.denom.includes(this.stakingDenom))
.map(
balance =>
(balance = {
denom: balance.denom
.charAt(0)
.toLowerCase()
.concat(balance.denom.slice(-3)),
amount: parseFloat(balance.amount).toFixed(2)
})
)
},
concatBalances() {
let balancesArray = []
if (this.balances.length > 1) {
Expand Down Expand Up @@ -154,7 +167,7 @@ export default {
]
},
getAllDenoms() {
if (this.balances) {
if (this.balances.length > 0) {
const balances = this.balances
return balances.map(({ denom }) => denom)
} else {
Expand Down Expand Up @@ -232,7 +245,7 @@ export default {
},
/* istanbul ignore next */
update(data) {
return data.balances
return data.balances || []
}
},
stakingDenom: {
Expand Down Expand Up @@ -318,6 +331,25 @@ export default {
padding-right: 2.5rem;
}

.tokens-div {
position: absolute;
right: 1.25rem;
top: 3.5rem;
}

.tokens-div > .col {
margin-right: 1rem;
}

.token-denom {
font-size: 12px;
float: left;
}

.token-balance {
font-weight: bold;
}

.currency-selector.tm-form-group {
position: absolute;
right: 1.25rem;
Expand Down Expand Up @@ -384,6 +416,33 @@ export default {
text-align: center;
}

.scroll {
display: flex;
width: 90vw;
overflow-x: auto;
/* Make it smooth scrolling on iOS devices */
-webkit-overflow-scrolling: touch;
}

/* This doesn't work */
/* .scroll > .scroll-item {
flex: 0 0 auto;
} */

.scroll > .row > div {
margin-right: 3rem;
}

.tokens-div {
position: inherit;
margin: 0;
top: 0;
}

.token-denom {
float: none;
}

.currency-selector.tm-form-group {
width: 40px;
right: 2.5rem;
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -110,7 +110,7 @@ describe(`TmBalance`, () => {

it(`if no balances are found, then it returns the staking denom`, () => {
wrapper.setData({
balances: ``
balances: []
})
expect(wrapper.vm.getAllDenoms).toEqual(["ATOM"])
})
Expand Down
62 changes: 35 additions & 27 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 @@ -30,12 +30,16 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
<!---->
</div>

<!---->

<div
class="row small-container"
class="scroll"
>
<!---->
<div
class="row small-container scroll-item"
>
<!---->

<!---->
</div>

<!---->
</div>
Expand All @@ -59,7 +63,7 @@ exports[`TmBalance do not show available atoms when the user has none in the fir
</div>

<sendmodal-stub
denoms=""
denoms="ATOM"
/>

<modalwithdrawrewards-stub />
Expand Down Expand Up @@ -97,34 +101,38 @@ exports[`TmBalance show the balance header when signed in 1`] = `
<!---->
</div>

<!---->

<div
class="row small-container"
class="scroll"
>
<div
class="available-atoms"
class="row small-container scroll-item"
>
<h3>
Available ATOM
</h3>
<div
class="available-atoms"
>
<h3>
Available ATOM
</h3>

<h2>
1,230
</h2>
</div>

<h2>
1,230
</h2>
<div
class="rewards"
>
<h3>
Total Rewards
</h3>

<h2>
+1,000.45
</h2>
</div>
</div>

<div
class="rewards"
>
<h3>
Total Rewards
</h3>

<h2>
+1,000.45
</h2>
</div>
<!---->
</div>
</div>

Expand All @@ -145,7 +153,7 @@ exports[`TmBalance show the balance header when signed in 1`] = `
</div>

<sendmodal-stub
denoms=""
denoms="ATOM"
/>

<modalwithdrawrewards-stub />
Expand Down