Load community funds balances from mainnet Gnosis Safe

app/components/budget-balances/component.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class BudgetBalancesComponent extends Component {
+  @service communityFunds
+}

app/components/budget-balances/template.hbs

@@ -0,0 +1,21 @@
+<table>
+  <thead>
+    <tr>
+      <td>Token</td>
+      <td>Amount</td>
+      <td>Fiat value</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>WBTC</td>
+      <td>{{this.communityFunds.balanceWBTC.balance}}</td>
+      <td>{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
+    </tr>
+    <tr>
+      <td>ETH</td>
+      <td>{{this.communityFunds.balanceETH.balance}}</td>
+      <td>{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
+    </tr>
+  </tbody>
+</table>

app/routes/application.js

@@ -3,8 +3,8 @@ import { inject as service } from '@ember/service';
 import { schedule } from '@ember/runloop';
 
 export default class ApplicationRoute extends Route {
-
   @service kredits;
+  @service communityFunds;
 
   beforeModel(/* transition */) {
     const kredits = this.kredits;
@@ -30,6 +30,8 @@ export default class ApplicationRoute extends Route {
       schedule('afterRender', this.kredits.syncContributors,
         this.kredits.syncContributors.perform);
     }
-  }
 
+    schedule('afterRender', this.communityFunds.fetchBalances,
+      this.communityFunds.fetchBalances.perform);
+  }
 }

app/services/community-funds.js

@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+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 };
+
+  @task
+  *fetchBalances () {
+    const uri = `${txServiceBaseUrl}/balances/usd/`;
+
+    yield fetch(uri).then(res => res.json())
+      .then(res => {
+        this.processBalances(res);
+      })
+      .catch(err => {
+        console.log(`[community-funds] Fetching balances failed:`);
+        console.error(err);
+      });
+  }
+
+  processBalances (res) {
+    // TODO proper selection/find
+    const { balance, balanceUsd, usdConversion } = res[0];
+    this.balanceETH = { balance, balanceUsd, usdConversion };
+    this.balanceWBTC = res[1];
+  }
+}

app/services/kredits.js

@@ -21,7 +21,7 @@ import Contributor from 'kredits-web/models/contributor';
 import Contribution from 'kredits-web/models/contribution';
 import Reimbursement from 'kredits-web/models/reimbursement';
 // Lets us access the model classes dynamically
-const models = { Contributor, Contribution, Reimbursement }
+const models = { Contributor, Contribution, Reimbursement };
 
 export default Service.extend({
 

app/templates/budget.hbs

@@ -22,27 +22,7 @@
         <h2>Community funds</h2>
       </header>
       <div class="content">
-        <table>
-          <thead>
-            <tr>
-              <td>Token</td>
-              <td>Amount</td>
-              <td>Fiat value</td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>WBTC</td>
-              <td>1.17215</td>
-              <td>11031.15 USD</td>
-            </tr>
-            <tr>
-              <td>ETH</td>
-              <td>0.5</td>
-              <td>115.60 USD</td>
-            </tr>
-          </tbody>
-        </table>
+        <BudgetBalances />
       </div>
     </section>
   </div>