2.1.1

Ember has no way of finding them in the code and thus cannot turn hrefs
into fingerprinted URLs

README.md

@@ -31,8 +31,8 @@ You will need the following things properly installed on your computer.
 ### Building/running for development
 
 * `npm start` - by default Kredits Web connects to the Rootstock testnet network
-* Visit your app at [http://localhost:4200](http://localhost:4200).
-* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+* Visit the app at [http://localhost:4200](http://localhost:4200).
+* Visit the tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
 See [working with locally deployed contracts](https://github.com/67P/kredits-web#working-with-locally-deployed-contracts) for details on how to develop with locally deployed contracts.
 

app/components/budget-balances/component.js

@@ -1,10 +1,13 @@
 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 balancesSorted () {
+    return this.communityFunds.balances
+               .sortBy('confirmed_balance').reverse();
+  }
 
   get loading () {
     return !this.communityFunds.balancesLoaded;

app/components/budget-balances/template.hbs

@@ -7,11 +7,19 @@
     </tr>
   </thead>
   <tbody>
-    {{#each this.balances as |balance|}}
+    {{#each this.balancesSorted as |balance|}}
       <tr>
-        <th>{{balance.token.symbol}}</th>
-        <td class="amount">{{balance.confirmed_balance}}</td>
-        <td class="fiat-amount">~{{balance.balanceUSD}} USD</td>
+        <th>
+          <img src={{balance.token.icon}}
+               alt={{balance.token.description}}
+               title={{balance.token.description}} />
+        </th>
+        <td class="amount">
+          {{fmt-number balance.confirmed_balance}} <span class="unit">sats</span>
+        </td>
+        <td class="fiat-amount">
+          ~{{balance.balanceUSD}} USD
+        </td>
       </tr>
     {{/each}}
   </tbody>

app/components/main-navigation-menu/template.hbs

@@ -0,0 +1,7 @@
+<nav id="main-menu">
+  <ul>
+    <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+    <li><LinkTo @route="budget">Budget</LinkTo></li>
+    <li><LinkTo @route="about">About</LinkTo></li>
+  </ul>
+</nav>

app/controllers/application.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
-export default Controller.extend({
-  kredits: service(),
-});
+export default class ApplicationController extends Controller {
+  @service kredits;
+}

app/controllers/dashboard.js

@@ -35,10 +35,6 @@ export default Controller.extend({
 
   showFullContributionSync: gt('kredits.missingHistoricContributionsCount', 0),
 
-  showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){
-    return (!this.kredits.hasAccounts || !this.kredits.currentUser);
-  }),
-
   actions: {
 
     vetoContribution (contributionId) {

app/helpers/fmt-number.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function fmtNumber(number) {
+  const lang = navigator.language || navigator.userLanguage;
+  return number.toLocaleString(lang);
+});

app/router.js

@@ -11,7 +11,6 @@ Router.map(function() {
     this.route('contributors', function() {
       this.route('show', { path: ':id' });
     });
-
     this.route('contributions', function() {
       this.route('show', { path: ':id' });
     });
@@ -31,11 +30,10 @@ Router.map(function() {
   });
   this.route('budget', function() {
     this.route('expenses');
-
     this.route('reimbursements', function() {});
   });
-
   this.route('reimbursements', function() {
     this.route('new');
   });
+  this.route('about');
 });

app/routes/about.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {
+}

app/services/community-funds.js

@@ -1,7 +1,7 @@
-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 { tracked } from '@glimmer/tracking';
+import Service, { inject as service } from '@ember/service';
 import config from 'kredits-web/config/environment';
 
 export default class CommunityFundsService extends Service {
@@ -12,9 +12,20 @@ export default class CommunityFundsService extends Service {
 
   @task
   *fetchBalances () {
-    yield fetch(config.btcBalanceAPI).then(res => res.json())
-      .then(res => {
-        return this.processBalances(res);
+    const promises = [];
+    const balances = config.communityFundsAPI.balances;
+
+    for (const item of Object.keys(balances)) {
+      const c = balances[item];
+      promises.push(
+        this.fetchBalance(c.url)
+            .then(res => { return this.processBalance(res, c) })
+      )
+    }
+
+    yield Promise.all(promises)
+      .then(() => {
+        this.balancesLoaded = true;
       })
       .catch(err => {
         console.log(`[community-funds] Fetching balances failed:`);
@@ -22,18 +33,21 @@ export default class CommunityFundsService extends Service {
       });
   }
 
-  async processBalances (res) {
+  async fetchBalance(url) {
+    return fetch(url).then(res => res.json());
+  }
+
+  async processBalance (res, config) {
     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;
+    const balanceUSD = (res.confirmed_balance / 100000000) * this.exchangeRates.btcusd;
     res.balanceUSD = Math.round(balanceUSD).toLocaleString(lang);
 
     this.balances.pushObject({
       ...res,
-      ...{ token: { name: 'BTC', symbol: 'BTC'} }
+      ...{ token: { icon: `/img/${config.icon}`, symbol: config.symbol, description: config.description } }
     });
-
-    this.balancesLoaded = true;
   }
 }

app/services/exchange-rates.js

@@ -19,7 +19,13 @@ export default class ExchangeRatesService extends Service {
   @tracked btceur = 0;
   @tracked btcusd = 0;
 
+  get exchangeRatesLoaded () {
+    return (this.btceur !== 0) && (this.btcusd !== 0);
+  }
+
   async fetchRates (source='bitstamp') {
+    if (this.exchangeRatesLoaded) return;
+
     switch(source) {
       case 'bitstamp':
         this.btceur = await fetchFromBitstamp('btceur');

app/styles/_layout.scss

@@ -1,3 +1,7 @@
+body {
+  margin-bottom: 10rem;
+}
+
 main {
   padding: 1rem 2rem;
 
@@ -14,7 +18,7 @@ main {
       "contributions";
   }
 
-  &#budget {
+  &#budget, &#about {
     width: 100%;
     display: grid;
     grid-row-gap: 2rem;
@@ -56,13 +60,12 @@ main {
 
       &.text-lg {
         p {
-          font-size: 1.2rem;
-          margin-bottom: 1em;
-          line-height: 1.5em;
+          font-size: 1.35rem;
+          margin-bottom: 2rem;
+          line-height: 150%;
         }
       }
 
-      // TODO Remove after switch to Tailwind CSS
       &.text-center {
         text-align: center;
       }
@@ -74,40 +77,23 @@ main {
         }
       }
     }
-  }
-}
 
-#intro {
-  padding: 2rem;
-  background-color: rgba(0,0,0,.2);
-  font-size: 1.6rem;
+    &.text {
+      h2 {
+        margin: 4rem 0 2rem 0;
 
-  @include media-max(small) {
-    padding: 2rem 1rem;
-    font-size: 1.5rem;
-  }
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
 
-  h2 {
-    font-size: inherit;
-    margin-bottom: 1em;
-  }
-
-  p {
-    margin-bottom: 1em;
-    line-height: 1.5em;
-    font-size: 1.2rem;
-
-    &:last-child {
-      margin-bottom: 0;
+      p {
+        font-size: 1.35rem;
+        margin-bottom: 2rem;
+        line-height: 150%;
+      }
     }
-  }
 
-  a {
-    text-decoration: none;
-
-    &:hover, &:active {
-      text-decoration: underline;
-    }
   }
 }
 
@@ -128,7 +114,7 @@ main {
       }
     }
 
-    &#budget {
+    &#budget, &#about {
       grid-column-gap: 3rem;
       grid-template-columns: 2fr 4fr 2fr;
       grid-template-areas:

app/styles/app.scss

@@ -98,6 +98,7 @@ section {
 @import "components/contributor-profile";
 @import "components/expense-list";
 @import "components/external-account-link";
+@import "components/main-navigation-menu";
 @import "components/loading-spinner";
 @import "components/reimbursement-list";
 @import "components/topbar";

app/styles/components/_budget-balances.scss

@@ -16,8 +16,12 @@ section#funds {
     }
 
     th, td {
-      font-size: 1.2rem;
       vertical-align: text-bottom;
+
+      img {
+        max-height: 1.5rem;
+        max-width: 1.5rem;
+      }
     }
 
     th {
@@ -35,8 +39,13 @@ section#funds {
       }
 
       &.fiat-amount {
+        font-size: 1.2rem;
         color: rgba(255,255,255,0.8);
       }
+
+      span.unit {
+        font-size: 1.5rem;
+      }
     }
   }
 }

app/styles/components/_main-navigation-menu.scss

@@ -0,0 +1,30 @@
+nav#main-menu {
+  padding: 2rem;
+  background-color: rgba(0,0,0,.2);
+
+  ul {
+    list-style: none;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3rem;
+    font-size: 1.5rem;
+
+    @include media-max(small) {
+      justify-content: center;
+      font-size: 1.2rem;
+    }
+  }
+
+  li {
+    a {
+      text-decoration: none;
+      color: #fff;
+
+      &.active, &:hover {
+        color: $yellow;
+      }
+    }
+  }
+}

app/styles/components/_topbar.scss

@@ -13,6 +13,7 @@
   h1 {
     display: inline-block;
     text-transform: uppercase;
+    font-weight: bold;
 
     a {
       color: inherit;

app/templates/about.hbs

@@ -0,0 +1,78 @@
+<main id="about">
+  <div id="aside">
+  </div>
+
+  <div id="content">
+    <section class="text">
+      <h2>What is this?</h2>
+      <p>
+        You have found the contribution dashboard and budget management app of the
+        <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a>
+        open-source co-operative.
+      </p>
+      <p>
+        We use this app to track what people contribute to all parts of our
+        projects (not just code), as well as for managing our community's budget.
+      </p>
+      <h2>Why?</h2>
+      <p>
+        We are trying out a new form of co-operative, native to the Internet,
+        creating and sharing digital resources the same way traditional
+        co-operatives share physical ones.
+      </p>
+      <p>
+        By knowing roughly how much people contribute, we are able to reward
+        co-operative members who contribute their time with money contributed
+        by the ones who don't.
+      </p>
+      <p>
+        In addition to open-source grant payouts, all contributors can also propose
+        reimbursements for specific expenses they covered on behalf of the
+        community.
+      </p>
+      <h2>How?</h2>
+      <p>
+        Instead of notaries, lawyers, courts, or banks, we record data and manage
+        certain decisions on a decentralized ledger called
+        <a href="https://rootstock.io/" target="_blank" rel="noreferrer noopener">Rootstock</a>,
+        which is cryptographically tied to the bitcoin timechain.
+      </p>
+      <p>
+        By doing this, we can ensure community control over the budget, as well as
+        full transparency and verifiability of everything that happens. It also
+        allows us to quickly, cheaply, and reliably send our open-source grants to
+        anyone who's contributing, no matter where they are on this beautiful
+        planet.
+      </p>
+      <h2>Kredits</h2>
+      <p>
+        All contributions are rewarded with so-called kredits. They are both
+        credits in the traditional sense of public attribution, as well as a
+        measure of how much and how regularly someone has added value to the
+        community and its products and services.
+      </p>
+      <p>
+        Kredits are considered for example for grant payouts, as well as
+        permissions for certain actions like vetos or votes. They may also be used
+        to access <a href="https://kosmos.org/services/">hosted services</a> for free,
+        or to unlock additional features on otherwise free services.
+      </p>
+      <h2>Getting started</h2>
+      <p>
+        We'd be delighted to welcome you as a new contributor!
+        If you'd like to start collecting kredits for your contributions, you can
+        <LinkTo @route="signup">create a contributor profile</LinkTo> now.
+      </p>
+      <p>
+        Next, you could learn more about
+        <a href="https://community.kosmos.org/t/how-kredits-for-contributions-are-proposed-and-confirmed/176">how kredits are proposed and issued</a>.
+        If you want to dive deeper into how this all works, head over to the
+        <a href="https://wiki.kosmos.org/Kredits">Kredits documentation</a>
+        page on our (soon to be phased out) wiki.
+      </p>
+    </section>
+  </div>
+
+  <div id="empty">
+  </div>
+</main>

app/templates/application.hbs

@@ -1,6 +1,8 @@
 <header id="topbar">
-  <h1><LinkTo @route="dashboard">Kosmos Kredits</LinkTo></h1>
+  <h1><LinkTo @route="dashboard">Kredits</LinkTo></h1>
   <TopbarAccountPanel />
 </header>
 
+<MainNavigationMenu />
+
 {{outlet}}

app/templates/budget.hbs

@@ -45,7 +45,7 @@
     {{#if this.reimbursementsConfirmed}}
       <section id="expenses-confirmed">
         <header class="with-nav">
-          <h2>Confirmed Expenses</h2>
+          <h2>Confirmed Reimbursements</h2>
           <nav>
             <LinkTo @route="reimbursements.new" @title="Submit a reimbursement" class="button small green">add</LinkTo>
           </nav>

app/templates/dashboard.hbs

@@ -1,19 +1,3 @@
-{{#if this.showIntroText}}
-  <div id="intro" class={{if this.showDetailsPane "with-details"}}>
-    <h2>
-      Welcome to the contribution dashboard of the
-      <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a> project!
-    </h2>
-    <p>
-      If you want to learn more about what the numbers mean and how this works,
-      check out the
-      <a href="https://wiki.kosmos.org/Kredits" target="_blank" rel="noreferrer noopener">Kredits documentation</a>.
-      If you want to start earning kredits for your contributions,
-      <LinkTo @route="signup">create a contributor profile</LinkTo>.
-    </p>
-  </div>
-{{/if}}
-
 <main id="dashboard" class={{if this.showDetailsPane "with-details"}}>
 
   <div id="stats">

config/environment.js

@@ -45,7 +45,22 @@ module.exports = function(environment) {
       'BTC': '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'
     },
 
-    btcBalanceAPI: 'https://api.kosmos.org/kredits/onchain_btc_balance',
+    communityFundsAPI: {
+      balances: {
+        onchain: {
+          icon: 'icon-btc.png',
+          symbol: 'BTC',
+          description: 'BTC on chain',
+          url: 'https://api.kosmos.org/btcpay/onchain_btc_balance'
+        },
+        lightning: {
+          icon: 'icon-btc-lightning.png',
+          symbol: 'BTC',
+          description: 'BTC on Lightning Network',
+          url: 'https://api.kosmos.org/btcpay/lightning_btc_balance'
+        }
+      }
+    },
 
     corsProxy: 'https://cors.5apps.com/?uri='
   };
@@ -66,6 +81,9 @@ module.exports = function(environment) {
       protocol: 'http',
       gatewayUrl: 'http://localhost:8080/ipfs'
     };
+
+    ENV.communityFundsAPI.balances.onchain.url   = 'http://localhost:3000/api/btcpay/onchain_btc_balance';
+    ENV.communityFundsAPI.balances.lightning.url = 'http://localhost:3000/api/btcpay/lightning_btc_balance';
   }
 
   if (environment === 'test') {

ember-cli-build.js

@@ -29,6 +29,9 @@ module.exports = function(defaults) {
           path: "empty" // needed for kosmos-schemas dependency
         }
       }
+    },
+    fingerprint: {
+      exclude: [ 'img/icon-btc' ]
     }
   });
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "kredits-web",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "kredits-web",
-      "version": "2.0.0",
+      "version": "2.1.1",
       "license": "MIT",
       "devDependencies": {
         "@babel/eslint-parser": "^7.19.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "private": true,
   "description": "Contribution dashboard of the Kosmos project",
   "repository": "https://github.com/67P/kredits-web",

release/index.html

@@ -8,10 +8,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     
-<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%222.0.0%2Bbdeab512%22%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frsk-testnet.kosmos.org%22%2C%22web3ChainId%22%3A31%2C%22web3NetworkName%22%3A%22RSK%20Testnet%22%2C%22githubConnectUrl%22%3A%22https%3A%2F%2Fhal8000.kosmos.chat%2Fkredits%2Fsignup%2Fconnect%2Fgithub%22%2C%22githubSignupUrl%22%3A%22https%3A%2F%2Fhal8000.kosmos.chat%2Fkredits%2Fsignup%2Fgithub%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22tokens%22%3A%7B%22BTC%22%3A%220x2260fac5e5542a773aa44fbcfedf7c193bc2c599%22%7D%2C%22btcBalanceAPI%22%3A%22https%3A%2F%2Fapi.kosmos.org%2Fkredits%2Fonchain_btc_balance%22%2C%22corsProxy%22%3A%22https%3A%2F%2Fcors.5apps.com%2F%3Furi%3D%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%222.1.1%2B5c9fbf50%22%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frsk-testnet.kosmos.org%22%2C%22web3ChainId%22%3A31%2C%22web3NetworkName%22%3A%22RSK%20Testnet%22%2C%22githubConnectUrl%22%3A%22https%3A%2F%2Fhal8000.kosmos.chat%2Fkredits%2Fsignup%2Fconnect%2Fgithub%22%2C%22githubSignupUrl%22%3A%22https%3A%2F%2Fhal8000.kosmos.chat%2Fkredits%2Fsignup%2Fgithub%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22tokens%22%3A%7B%22BTC%22%3A%220x2260fac5e5542a773aa44fbcfedf7c193bc2c599%22%7D%2C%22communityFundsAPI%22%3A%7B%22balances%22%3A%7B%22onchain%22%3A%7B%22icon%22%3A%22icon-btc.png%22%2C%22symbol%22%3A%22BTC%22%2C%22description%22%3A%22BTC%20on%20chain%22%2C%22url%22%3A%22https%3A%2F%2Fapi.kosmos.org%2Fbtcpay%2Fonchain_btc_balance%22%7D%2C%22lightning%22%3A%7B%22icon%22%3A%22icon-btc-lightning.png%22%2C%22symbol%22%3A%22BTC%22%2C%22description%22%3A%22BTC%20on%20Lightning%20Network%22%2C%22url%22%3A%22https%3A%2F%2Fapi.kosmos.org%2Fbtcpay%2Flightning_btc_balance%22%7D%7D%7D%2C%22corsProxy%22%3A%22https%3A%2F%2Fcors.5apps.com%2F%3Furi%3D%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link integrity="" rel="stylesheet" href="/assets/vendor-ca96b2e19fc9f356e3dbad90c9f3f323.css">
-    <link integrity="" rel="stylesheet" href="/assets/kredits-web-f21602587acec9a1744c244385a83592.css">
+    <link integrity="" rel="stylesheet" href="/assets/kredits-web-950f3a97cf1dfead67fdfdc4f5dc1cfb.css">
 
     
 
@@ -25,7 +25,7 @@
     
 
     <script src="/assets/vendor-4d87b3e0995c5bb18e46836a089900a4.js" integrity="sha256-5WmWY05Kd+n98Sw0GwuaWodmDVBZ2yVGGtC/2owVfQE= sha512-tiGPA5zvfhnSC9LPTmpvXJmOu30yhsdPqSiZJMPGmE/ez/xJLMaM29vjs4Cs74cDf6fX4uYSGRIu1KfOyGpJYA==" ></script>
-    <script src="/assets/kredits-web-ae44ce0c1a892c2da424f8002b037b86.js" integrity="sha256-ZT6R9QwhnMEgs1X3pmlX6Oh5N4zJgXWLF8al8PTOKqk= sha512-BYrlNe9cti4ZEcp//b5FhPGvmAE08vTEC3WT15EpTqTXccNkOqFJuiGob+ymxIDfDzVU6vN8szxCTBOUe61Tmw==" ></script>
+    <script src="/assets/kredits-web-5b714ebc501e0789ddba130f2a3f10e1.js" integrity="sha256-jb10J7E1WRUc8DztQgvbdsKXYRHqXTqjbap4CVh2AaM= sha512-dx+d1T+WrZs0qG1J4puW0hZEzG2Qh+d5iU3XXnkfkF8ya3lMp/L1xdfzh697Ca5x3/Gw7+j7Mb/LSPUfWuNCEQ==" ></script>
 
     
   </body>