Show unconfirmed kredits in toplist

And allow toggling between confirmed and unconfirmed

app/components/contributor-list/template.hbs

@@ -1,24 +1,30 @@
 <tbody>
-  {{#each contributors as |contributor|}}
-    <tr role="button" class={{if (is-current-user contributor) "current-user"}} {{action "toggleContributorInfo" contributor}}>
+  {{#each contributorList as |c|}}
+    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "toggleContributorInfo" c.contributor}}>
       <td class="person">
-        {{user-avatar contributor=contributor}} {{contributor.name}}
+        {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>
       <td class="kredits">
-        <span class="amount">{{contributor.totalKreditsEarned}}</span>
+        <span class="amount">
+          {{#if showUnconfirmedKredits}}
+            {{c.amountTotal}}
+          {{else}}
+            {{c.amountConfirmed}}
+          {{/if}}
+        </span>
         <span class="symbol">₭S</span>
       </td>
     </tr>
-    <tr class="metadata {{if (is-current-user contributor) "current-user"}} {{if contributor.showMetadata "visible"}}">
+    <tr class="metadata {{if (is-current-user c.contributor) "current-user"}} {{if c.showMetadata "visible"}}">
       <td colspan="2">
         <ul>
-          <li><a href="https://testnet.etherscan.io/address/{{contributor.account}}">Inspect Ethereum transactions</a></li>
-          {{#if contributor.ipfsHash}}
-            <li><a href="https://ipfs.io/ipfs/{{contributor.ipfsHash}}">Inspect IPFS profile</a></li>
+          <li><a href="https://testnet.etherscan.io/address/{{c.contributor.account}}">Inspect Ethereum transactions</a></li>
+          {{#if c.contributor.ipfsHash}}
+            <li><a href="https://ipfs.io/ipfs/{{c.contributor.ipfsHash}}">Inspect IPFS profile</a></li>
           {{/if}}
         </ul>
-        {{#if contributor.showMetadata}}
-          <pre>{{contributor.ipfsData}}</pre>
+        {{#if c.contributor.showMetadata}}
+          <pre>{{c.contributor.ipfsData}}</pre>
         {{/if}}
       </td>
     </tr>

app/controllers/index.js

@@ -1,25 +1,29 @@
 import Controller from '@ember/controller';
-import { alias, filter, sort } from '@ember/object/computed';
+import { computed } from '@ember/object';
+import { alias, not, sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 export default Controller.extend({
   kredits: service(),
   currentBlock: alias('kredits.currentBlock'),
 
-  contributors: alias('kredits.contributors'),
-  contributorsWithKredits: filter('contributors', function(contributor) {
-    return contributor.get('totalKreditsEarnedRaw').gt(0);
-  }),
-  contributorsSorting: Object.freeze(['totalKreditsEarned:desc']),
-  contributorsSorted: sort('contributorsWithKredits', 'contributorsSorting'),
-
   contributions: alias('kredits.contributions'),
-  contributionsUnconfirmed: alias('kredits.contributionsUnconfirmed'),
   contributionsConfirmed: alias('kredits.contributionsConfirmed'),
+  contributionsUnconfirmed: alias('kredits.contributionsUnconfirmed'),
 
+  contributionsSorting: Object.freeze(['id:desc']),
   contributionsUnconfirmedSorted: sort('contributionsUnconfirmed', 'contributionsSorting'),
   contributionsConfirmedSorted: sort('contributionsConfirmed', 'contributionsSorting'),
-  contributionsSorting: Object.freeze(['id:desc']),
+
+  kreditsByContributor: alias('kredits.kreditsByContributor'),
+
+  kreditsToplistSorting: computed('showUnconfirmedKredits', function(){
+    return this.showUnconfirmedKredits ? ['amountTotal:desc'] : ['amountConfirmed:desc'];
+  }),
+  kreditsToplist: sort('kreditsByContributor', 'kreditsToplistSorting'),
+
+  showUnconfirmedKredits: true,
+  hideUnconfirmedKredits: not('showUnconfirmedKredits'),
 
   actions: {
 

app/styles/app.scss

@@ -47,7 +47,7 @@ section {
   &#people {
     .content {
       p.stats {
-        padding-top: 3rem;
+        margin-bottom: 1rem;
         font-size: 1rem;
         color: white;
         text-align: center;

app/styles/components/_contributor-list.scss

@@ -1,6 +1,7 @@
 table.contributor-list {
   width: 100%;
   border-collapse: collapse;
+  margin-bottom: 1.5rem;
 
   tr {
     border-bottom: 1px solid rgba(255,255,255,0.2);

app/templates/index.hbs

@@ -6,12 +6,17 @@
         <h2>Contributors</h2>
       </header>
       <div class="content">
-        {{contributor-list contributors=contributorsSorted}}
+        {{contributor-list contributorList=kreditsToplist
+                           showUnconfirmedKredits=showUnconfirmedKredits}}
 
         <p class="stats">
-          <span class="number">{{await kredits.totalKreditsEarned}}</span> kredits issued and distributed among
+          <span class="number">{{await kredits.totalKreditsEarned}}</span> kredits confirmed and issued to
           <span class="number">{{contributorsWithKredits.length}}</span> contributors.
         </p>
+        <p class="stats">
+          {{input type="checkbox" id="hide-unnconfirmed-kredits" checked=showUnconfirmedKredits}}
+          <label for="hide-unnconfirmed-kredits">Show unconfirmed kredits in toplist</label>
+        </p>
       </div>
     </section>