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;
+  }
 }

app/components/budget-balances/template.hbs

@@ -1,4 +1,4 @@
-<table class="token-balances">
+<table class="token-balances {{if this.loading 'loading'}}">
   <thead>
     <tr>
       <th>Token</th>
@@ -7,15 +7,12 @@
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <th>ETH</th>
-      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceETH.balance 'ETH'}}</td>
-      <td class="fiat-amount">{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
-    </tr>
-    <tr>
-      <th>WBTC</th>
-      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceWBTC.balance 'WBTC'}}</td>
-      <td class="fiat-amount">{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
-    </tr>
+    {{#each this.balances as |balance|}}
+      <tr>
+        <th>{{balance.token.symbol}}</th>
+        <td class="amount">{{fmt-crypto-currency balance.balance balance.token.symbol}}</td>
+        <td class="fiat-amount">{{balance.balanceUsd}} USD</td>
+      </tr>
+    {{/each}}
   </tbody>
 </table>

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;
   }
 }

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;
     }