Merge pull request #159 from 67P/feature/pending_changes

Gracefully handle pending changes for contributions

app/components/contribution-list/template.hbs

@@ -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/components/topbar-account-panel/component.js

@@ -14,7 +14,7 @@ export default Component.extend({
 
   userHasEthereumWallet: computed(function() {
     return isPresent(window.ethereum);
-  }).volatile(),
+  }),
 
   showConnectButton: computed('userHasEthereumWallet',
                               'kredits.hasAccounts', function() {

app/controllers/dashboard/contributions/show.js

@@ -7,6 +7,6 @@ export default Controller.extend({
 
   ipfsGatewayUrl: computed(function() {
     return config.ipfs.gatewayUrl;
-  }).volatile()
+  })
 
 });

app/controllers/dashboard/contributors/show.js

@@ -12,6 +12,6 @@ export default Controller.extend({
 
   ipfsGatewayUrl: computed(function() {
     return config.ipfs.gatewayUrl;
-  }).volatile()
+  })
 
 });

app/helpers/contribution-status.js

@@ -11,13 +11,23 @@ export default Helper.extend({
   compute([contribution]) {
     this.setupRecompute(contribution);
 
+    let status = [];
+
     if (contribution.vetoed) {
-      return 'vetoed';
+      status.push('vetoed');
     } else if (contribution.confirmedAt > this.currentBlock) {
-      return 'unconfirmed';
+      status.push('unconfirmed');
     } else {
-      return 'confirmed'
+      status.push('confirmed');
     }
+
+    if (contribution.hasPendingChanges) {
+      status.push('pending');
+    }
+
+    status.push('pending');
+
+    return status.join(' ');
   },
 
   destroy () {
@@ -31,11 +41,13 @@ export default Helper.extend({
     contribution.addObserver('vetoed' , this, this.triggerRecompute);
     contribution.addObserver('confirmedAt' , this, this.triggerRecompute);
     contribution.addObserver('currentBlock' , this, this.triggerRecompute);
+    contribution.addObserver('hasPendingChanges' , this, this.triggerRecompute);
 
     this.teardown = () => {
       contribution.removeObserver('vetoed', this, this.triggerRecompute);
       contribution.removeObserver('confirmedAt', this, this.triggerRecompute);
       contribution.removeObserver('currentBlock', this, this.triggerRecompute);
+      contribution.removeObserver('hadPendingChanges', this, this.triggerRecompute);
     };
   },
 

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

@@ -210,8 +210,8 @@ export default Service.extend({
 
   getContributors () {
     return this.kredits.Contributor.all()
-      .then((contributors) => {
-        return contributors.map((contributor) => {
+      .then(contributors => {
+        return contributors.map(contributor => {
           return Contributor.create(contributor);
         });
       });
@@ -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);
     }
   },
 

app/styles/_buttons.scss

@@ -32,7 +32,7 @@ button, input[type=submit], .button {
     padding: 0.2rem 0.8rem;
   }
 
-  &.danger {
+  &.danger:not(:disabled) {
     color: $red;
     background-color: rgba(40, 21, 21, 0.6);
     border-color: rgba(40, 21, 21, 1);
@@ -45,7 +45,7 @@ button, input[type=submit], .button {
     }
   }
 
-  &.green {
+  &.green:not(:disabled) {
     color: $green;
     background-color: rgba(21, 40, 21, 0.6);
     border-color: rgba(21, 40, 21, 1);

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);
+  });
+
 });