diff --git a/app/components/budget-balances/component.js b/app/components/budget-balances/component.js index 4c903e1..7ae86bd 100644 --- a/app/components/budget-balances/component.js +++ b/app/components/budget-balances/component.js @@ -1,6 +1,12 @@ import Component from '@glimmer/component'; import { inject as service } from '@ember/service'; +import { alias } from '@ember/object/computed'; export default class BudgetBalancesComponent extends Component { @service communityFunds + @alias('communityFunds.balances') balances; + + get loading () { + return !this.communityFunds.balancesLoaded; + } } diff --git a/app/components/budget-balances/template.hbs b/app/components/budget-balances/template.hbs index 42ffd3a..71ce098 100644 --- a/app/components/budget-balances/template.hbs +++ b/app/components/budget-balances/template.hbs @@ -1,4 +1,4 @@ - +
@@ -7,15 +7,12 @@ - - - - - - - - - - + {{#each this.balances as |balance|}} + + + + + + {{/each}}
Token
ETH{{fmt-crypto-currency this.communityFunds.balanceETH.balance 'ETH'}}{{this.communityFunds.balanceETH.balanceUsd}} USD
WBTC{{fmt-crypto-currency this.communityFunds.balanceWBTC.balance 'WBTC'}}{{this.communityFunds.balanceWBTC.balanceUsd}} USD
{{balance.token.symbol}}{{fmt-crypto-currency balance.balance balance.token.symbol}}{{balance.balanceUsd}} USD
\ No newline at end of file diff --git a/app/services/community-funds.js b/app/services/community-funds.js index 8c6eabd..3f40db1 100644 --- a/app/services/community-funds.js +++ b/app/services/community-funds.js @@ -1,22 +1,22 @@ import Service from '@ember/service'; import { tracked } from '@glimmer/tracking'; +import { A } from '@ember/array'; +import { timeout } from 'ember-concurrency'; import { task } from 'ember-concurrency-decorators'; import config from 'kredits-web/config/environment'; const txServiceBaseUrl = `${config.gnosisSafe.txServiceHost}/api/v1/safes/${config.gnosisSafe.address}`; export default class CommunityFundsService extends Service { - @tracked balanceETH = { balance: 0, balanceUsd: 0, usdConversion: 0 }; - @tracked balanceWBTC = { balance: 0, balanceUsd: 0, usdConversion: 0 }; + @tracked balancesLoaded = false; + @tracked balances = A([]); @task *fetchBalances () { const uri = `${txServiceBaseUrl}/balances/usd/`; yield fetch(uri).then(res => res.json()) - .then(res => { - this.processBalances(res); - }) + .then(res => this.processBalances(res)) .catch(err => { console.log(`[community-funds] Fetching balances failed:`); console.error(err); @@ -24,9 +24,19 @@ export default class CommunityFundsService extends Service { } processBalances (res) { - // TODO proper selection/find - const { balance, balanceUsd, usdConversion } = res[0]; - this.balanceETH = { balance, balanceUsd, usdConversion }; - this.balanceWBTC = res[1]; + for (const balance of res) { + if (balance.token) { + // ERC20 token, has all meta data + this.balances.pushObject(balance); + } else { + // ETH, missing meta data + this.balances.pushObject({ + ...balance, + ...{ token: { name: 'Ether', symbol: 'ETH'} } + }); + } + } + + this.balancesLoaded = true; } } diff --git a/app/styles/components/_budget-balances.scss b/app/styles/components/_budget-balances.scss index 7173b02..05226bd 100644 --- a/app/styles/components/_budget-balances.scss +++ b/app/styles/components/_budget-balances.scss @@ -1,5 +1,12 @@ section#funds { table.token-balances { + opacity: 1; + transition: opacity 0.3s linear; + + &.loading { + opacity: 0; + } + thead { display: none; }