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 @@
-
+
| Token |
@@ -7,15 +7,12 @@
-
- | 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 |
-
+ {{#each this.balances as |balance|}}
+
+ | {{balance.token.symbol}} |
+ {{fmt-crypto-currency balance.balance balance.token.symbol}} |
+ {{balance.balanceUsd}} USD |
+
+ {{/each}}
\ 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;
}