Handle pending changes for contributions

This adds the pending tx data to pending contributions (after adding or
vetoing, until the tx is mined). It also disables the veto button while
pending.

app/components/contribution-list/template.hbs

@@ -33,7 +33,7 @@
   {{#each contributionsFiltered as |contribution|}}
     <li role="button" {{action "openContributionDetails" contribution}}
         data-contribution-id={{contribution.id}}
-        class="{{contribution-status contribution}}{{if contribution.vetoed " vetoed"}}{{if (eq contribution.id selectedContributionId) " selected"}}">
+        class="{{contribution-status contribution}}{{if contribution.hasPendingChanges " pending"}}{{if contribution.vetoed " vetoed"}}{{if (eq contribution.id selectedContributionId) " selected"}}">
       <p class="meta">
         <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
         <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
@@ -45,7 +45,10 @@
       {{#unless contribution.vetoed}}
         {{#unless (is-confirmed-contribution contribution)}}
           <p class="voting">
-            <button {{action "veto" contribution.id}} class="small danger">veto</button>
+            {{input type="button" class="button small danger"
+                    click=(action "veto" contribution.id)
+                    disabled=contribution.hasPendingChanges
+                    value="veto"}}
           </p>
         {{/unless}}
       {{/unless}}

app/models/contribution.js

@@ -1,5 +1,5 @@
 import EmberObject, { computed } from '@ember/object';
-import { isEmpty } from '@ember/utils';
+import { isEmpty, isPresent } from '@ember/utils';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 import moment from 'moment';
 
@@ -24,6 +24,8 @@ export default EmberObject.extend({
   time: null,
   ipfsData: '',
 
+  pendingTx: null,
+
   init () {
     this._super(...arguments);
     if (isEmpty(this.details)) this.set('details', {});
@@ -35,6 +37,10 @@ export default EmberObject.extend({
 
   jsDate: computed('iso8601Date', function() {
     return moment(this.iso8601Date).toDate();
+  }),
+
+  hasPendingChanges: computed('pendingTx', function() {
+    return isPresent(this.pendingTx);
   })
 
 });

app/services/kredits.js

@@ -225,6 +225,7 @@ export default Service.extend({
         console.debug('[kredits] add contribution response', data);
         attributes.contributor = this.contributors.findBy('id', attributes.contributorId);
         const contribution = Contribution.create(attributes);
+        contribution.set('pendingTx', data);
         contribution.set('confirmedAtBlock', data.blockNumber + 40320);
         this.contributions.pushObject(contribution);
         return contribution;
@@ -278,10 +279,12 @@ export default Service.extend({
 
   veto (contributionId) {
     console.debug('[kredits] veto against', contributionId);
+    const contribution = this.contributions.findBy('id', contributionId);
 
     return this.kredits.Contribution.functions.veto(contributionId, { gasLimit: 300000 })
       .then(data => {
         console.debug('[kredits] veto response', data);
+        contribution.set('pendingTx', data);
         return data;
       });
   },
@@ -367,6 +370,7 @@ export default Service.extend({
 
     if (contribution) {
       contribution.set('vetoed', true);
+      contribution.set('pendingTx', null);
     }
   },
 

tests/unit/models/contribution-test.js

@@ -24,4 +24,13 @@ module('Unit | Model | contribution', function(hooks) {
     assert.ok(model.jsDate instanceof Date);
     assert.equal(model.jsDate.toISOString(), '2019-09-10T09:33:00.141Z');
   });
+
+  test('hasPendingChanges', function(assert) {
+    const model = Contribution.create({});
+    assert.equal(model.hasPendingChanges, false);
+
+    model.set('pendingTx', { hash: 'abcdef123456' });
+    assert.equal(model.hasPendingChanges, true);
+  });
+
 });