2.2.0

Improve reimbursement lists

app/components/confirmed-in/template.hbs

@@ -1,3 +1,5 @@
-{{#unless this.isConfirmed}}
+{{#if this.isConfirmed}}
+Confirmed at block <strong>{{@confirmedAtBlock}}</strong> (~ {{this.confirmedInHumanTime}} ago)
+{{else}}
 Confirming in <strong>{{this.confirmedInBlocks}}</strong> blocks (~ {{this.confirmedInHumanTime}})
-{{/unless}}
+{{/if}}

app/components/reimbursement-item/component.js

@@ -1,10 +1,20 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import config from 'kredits-web/config/environment';
+import fmtDateLocalized from 'kredits-web/helpers/fmt-date-localized';
 
 export default class ReimbursementItemComponent extends Component {
   @service kredits;
+  @tracked showExpenseDetails = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    if (this.isUnconfirmed && !this.isVetoed) {
+      this.showExpenseDetails = true;
+    }
+  }
 
   get ipfsGatewayUrl () {
     return config.ipfs.gatewayUrl;
@@ -18,10 +28,37 @@ export default class ReimbursementItemComponent extends Component {
     return !this.isConfirmed;
   }
 
+  get isVetoed () {
+    return this.args.reimbursement.vetoed;
+  }
+
   get showVetoButton () {
     return this.isUnconfirmed && this.kredits.currentUserIsCore;
   }
 
+  get showConfirmedIn () {
+    return !this.isVetoed &&
+           (this.showExpenseDetails || this.isUnconfirmed);
+  }
+
+  get expenses () {
+    return this.args.reimbursement.expenses;
+  }
+
+  get expensesDateRange () {
+    const dates = this.expenses.map(e => e.date).uniq().sort();
+    let out = fmtDateLocalized.compute(dates.firstObject)
+    if (dates.length > 1) {
+      out += ' - ' + fmtDateLocalized.compute(dates.lastObject)
+    }
+    return out;
+  }
+
+  @action
+  toggleExpenseDetails () {
+    this.showExpenseDetails = !this.showExpenseDetails;
+  }
+
   @action
   veto (id) {
     this.kredits.vetoReimbursement(id).then(transaction => {

app/components/reimbursement-item/template.hbs

@@ -1,5 +1,6 @@
 <li data-reimbursement-id={{@reimbursement.id}}
-    class="{{item-status @reimbursement}}">
+    class="{{item-status @reimbursement}}"
+    role="button" {{on "click" this.toggleExpenseDetails}}>
   <p class="meta">
     <span class="recipient">
       <UserAvatar @contributor={{@reimbursement.contributor}} />
@@ -13,11 +14,17 @@
       {{sats-to-btc @reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
   </p>
 
+  {{#if this.showExpenseDetails}}
   <ExpenseList @expenses={{@reimbursement.expenses}} />
+  {{/if}}
 
   <div class="meta">
-    <p class="confirmation-eta">
+    <p>
+      {{#if this.showConfirmedIn}}
       <ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
+      {{else}}
+        {{#unless this.isVetoed}}{{this.expensesDateRange}}{{/unless}}
+      {{/if}}
     </p>
     <p class="actions">
       <a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"

app/components/reimbursement-list/template.hbs

@@ -1,4 +1,4 @@
-<ul class="item-list spaced reimbursement-list {{if @loading 'loading'}}">
+<ul class="item-list collapsible spaced reimbursement-list {{if @loading 'loading'}}">
   {{#each this.itemsSorted as |item|}}
     <ReimbursementItem @reimbursement={{item}} />
   {{/each}}

app/helpers/fmt-date-localized.js

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import getLocale from 'kredits-web/utils/get-locale';
 
-export default helper(function(dateStr) {
+export default helper(function fmtDateLocalized(dateStr) {
   const date = new Date(dateStr);
   const locale = getLocale();
   return new Intl.DateTimeFormat(locale).format(date);

app/routes/budget.js

@@ -30,8 +30,5 @@ export default class BudgetRoute extends Route {
     }
     schedule('afterRender', this.kredits.fetchMissingReimbursements,
       this.kredits.fetchMissingReimbursements.perform);
-
-    schedule('afterRender', this.kredits.syncReimbursementEvents,
-      this.kredits.syncReimbursementEvents.perform);
   }
 }

app/services/kredits.js

@@ -780,32 +780,5 @@ export default Service.extend({
     this.contributors
         .findBy('address', to)
         .incrementProperty('balance', value);
-  },
-
-
-  syncReimbursementEvents: task(function * () {
-    yield this.fetchEvents(
-      'Reimbursement', // contract
-      'ReimbursementAdded', // event
-      0,
-      // this.kredits.currentBlock - (2*60*24*14), // from block
-      this.currentBlock // to block
-    );
-  }).group('syncTaskGroup'),
-
-  async fetchEvents(contractName, eventName, fromBlock, toBlock) {
-    const contract = this.kredits[contractName].contract;
-    const eventFilter = contract.filters[eventName]();
-    const filterOptions = { fromBlock, toBlock };
-
-    console.debug(contract, eventFilter, filterOptions);
-    contract.queryFilter(eventFilter)
-      .then(events => {
-        events.forEach(event => {
-          console.debug("Event:", event.args.creator, event.args.key, event.args.value);
-        });
-      }).catch(e => {
-        console.error(e);
-      });
   }
 });

app/styles/_item-list.scss

@@ -16,6 +16,16 @@ ul.item-list {
     }
   }
 
+  &.collapsible {
+    > li {
+      border-left: 1px solid transparent;
+
+      &:hover {
+        border-left: 1px solid $blue;
+      }
+    }
+  }
+
   &.loading {
     @include loading-border-top;
 

app/styles/components/_reimbursement-list.scss

@@ -43,9 +43,6 @@ ul.reimbursement-list {
       flex: 1;
       padding: 1.6rem 0 1rem 0;
 
-      &.confirmation-eta {
-      }
-
       &.actions {
         text-align: right;
       }

config/environment.js

@@ -62,9 +62,7 @@ module.exports = function(environment) {
       }
     },
 
-    corsProxy: 'https://cors.5apps.com/?uri=',
+    corsProxy: 'https://cors.5apps.com/?uri='
-
-    hideVetoedEntriesAfterBlocks: 5760 // 48 hours
   };
 
   if (environment === 'development') {

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "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.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" />
+<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.2.0%2B0777c213%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-950f3a97cf1dfead67fdfdc4f5dc1cfb.css">
+    <link integrity="" rel="stylesheet" href="/assets/kredits-web-1ce689f6aada92a7d79a1947300931cf.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-5b714ebc501e0789ddba130f2a3f10e1.js" integrity="sha256-jb10J7E1WRUc8DztQgvbdsKXYRHqXTqjbap4CVh2AaM= sha512-dx+d1T+WrZs0qG1J4puW0hZEzG2Qh+d5iU3XXnkfkF8ya3lMp/L1xdfzh697Ca5x3/Gw7+j7Mb/LSPUfWuNCEQ==" ></script>
+    <script src="/assets/kredits-web-dab5f8c2df81891a0eb6d4d2bbf24a27.js" integrity="sha256-5XKNFa8JPKQWJztf69+Qhuszl/RV5uIYlg8/aPYp0ZY= sha512-0NYDa2a5cJBY6LxPDrEtaqD9YpuDEH7oR17jLvoMzWHBx4WIwerNRc9uadXwg+7UMnua3ysxt8M6i9uaJKRhTA==" ></script>
 
     
   </body>