app/components/budget-balances/template.hbs

@@ -10,8 +10,8 @@
     {{#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>
+        <td class="amount">{{balance.confirmed_balance}}</td>
+        <td class="fiat-amount">~{{balance.balanceUSD}} USD</td>
       </tr>
     {{/each}}
   </tbody>

app/services/community-funds.js

@@ -1,44 +1,38 @@
-import Service from '@ember/service';
+import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 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 {
+  @service exchangeRates;
+
   @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))
+    yield fetch(config.btcBalanceAPI).then(res => res.json())
+      .then(res => {
+        return this.processBalances(res);
+      })
       .catch(err => {
         console.log(`[community-funds] Fetching balances failed:`);
         console.error(err);
       });
   }
 
-  processBalances (res) {
-    for (const balance of res) {
-      // Format and round the approximate USD value
-      const lang = navigator.language || navigator.userLanguage;
-      balance.balanceUsd = Math.round(balance.balanceUsd).toLocaleString(lang);
+  async processBalances (res) {
+    await this.exchangeRates.fetchRates();
+    // Format and round the approximate USD value
+    const lang = navigator.language || navigator.userLanguage;
+    const balanceUSD = res.confirmed_balance * this.exchangeRates.btcusd;
+    res.balanceUSD = Math.round(balanceUSD).toLocaleString(lang);
 
-      if (balance.token) {
-        // ERC20 token, has all meta data
-        this.balances.pushObject(balance);
-      } else {
-        // RBTC, missing meta data
-        this.balances.pushObject({
-          ...balance,
-          ...{ token: { name: 'RBTC', symbol: 'RBTC'} }
-        });
-      }
-    }
+    this.balances.pushObject({
+      ...res,
+      ...{ token: { name: 'BTC', symbol: 'BTC'} }
+    });
 
     this.balancesLoaded = true;
   }

app/services/exchange-rates.js

@@ -8,7 +8,7 @@ const bitstampBaseUrl = `${config.corsProxy}https://www.bitstamp.net/api/v2`;
 async function fetchFromBitstamp(currencyPair) {
   try {
     const res = await fetch(`${bitstampBaseUrl}/ticker/${currencyPair}/`).then(r => r.json());
-    return res.vwap; // Last 24 hours volume weighted average price
+    return parseFloat(res.vwap); // Last 24 hours volume weighted average price
   } catch(e) {
     console.error('Could not fetch exchange rate from Bitstamp:', e);
     return 0;

app/styles/components/_budget-balances.scss

@@ -21,15 +21,16 @@ section#funds {
     }
 
     th {
+      font-size: 1.5rem;
       text-align: left;
-      padding-right: 1.2rem;
+      padding-right: 1rem;
     }
 
     td {
       text-align: right;
 
       &.amount {
-        font-size: 1.5rem;
+        font-size: 2rem;
         padding-right: 1.2rem;
       }
 

config/environment.js

@@ -44,10 +44,7 @@ module.exports = function(environment) {
       'BTC': '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'
     },
 
-    gnosisSafe: {
-      txServiceHost: 'https://safe-transaction.mainnet.gnosis.io',
-      address: '0x9CC29b8373FF92B01C1f09F31B5DD862350c167E'
-    },
+    btcBalanceAPI: 'https://api.kosmos.org/kredits/onchain_btc_balance',
 
     corsProxy: 'https://cors.5apps.com/?uri='
   };