Mark contributions as vetoed on incoming event

app/components/contribution-list/template.hbs

@@ -1,5 +1,5 @@
 {{#each contributions as |contribution|}}
-  <li data-contribution-id={{contribution.id}} class={{contribution-status contribution}}>
+  <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
     <p class="meta">
       <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
       <span class="category {{contribution.kind}}">({{contribution.kind}})</span>

app/controllers/index.js

@@ -35,13 +35,13 @@ export default Controller.extend({
 
     vetoContribution (contributionId) {
       this.kredits.veto(contributionId).then(transaction => {
-        window.confirm('Veto submitted to Ethereum blockhain: '+transaction.hash);
+        console.debug('[controllers:index] Veto submitted to Ethereum blockhain: '+transaction.hash);
       });
     },
 
     confirmProposal (proposalId) {
       this.kredits.vote(proposalId).then(transaction => {
-        window.confirm('Vote submitted to Ethereum blockhain: '+transaction.hash);
+        console.debug('[controllers:index] Vote submitted to Ethereum blockhain: '+transaction.hash);
       });
     },
 

app/services/kredits.js

@@ -220,23 +220,30 @@ export default Service.extend({
     return this.proposals.findBy('id', proposalId.toString());
   },
 
-  findContributionById(contributionId) {
-    return this.contributions.findBy('id', contributionId.toString());
-  },
-
   // Contract events
   addContractEventHandlers() {
-    // Proposal events
+    this.kredits.Contribution
+      .on('ContributionVetoed', this.handleContributionVetoed.bind(this))
+
     this.kredits.Proposal
       .on('ProposalCreated', this.handleProposalCreated.bind(this))
       .on('ProposalVoted', this.handleProposalVoted.bind(this))
       .on('ProposalExecuted', this.handleProposalExecuted.bind(this));
 
-    // Token events
     this.kredits.Token
       .on('Transfer', this.handleTransfer.bind(this));
   },
 
+  handleContributionVetoed(contributionId) {
+    console.debug('[kredits] ContributionVetoed event received for ', contributionId);
+    const contribution = this.contributions.findBy('id', contributionId);
+    console.debug('[kredits] contribution', contribution);
+
+    if (contribution) {
+      contribution.set('vetoed', true);
+    }
+  },
+
   handleProposalCreated(proposalId) {
     let proposal = this.findProposalById(proposalId);
 

app/styles/components/_contribution-list.scss

@@ -13,13 +13,27 @@ ul.contribution-list {
 
   li {
     display: grid;
-    grid-template-columns: auto 5rem;
+    grid-template-columns: auto 5rem 5rem;
     grid-row-gap: 0.5rem;
     padding: 1rem 1.2rem;
     background-color: rgba(255,255,255,0.1);
     font-size: 1.2rem;
     border-bottom: 1px solid rgba(255,255,255,0.2);
 
+    &:first-of-type {
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+
+    &.confirmed {
+      grid-template-columns: auto 5rem;
+    }
+
+    &.vetoed {
+      grid-template-columns: auto 5rem;
+      text-decoration: line-through;
+      opacity: 0.6;
+    }
+
     p {
       align-self: center;
       margin: 0;
@@ -80,19 +94,6 @@ ul.contribution-list {
       color: $primary-color;
       margin-right: 0.5rem;
     }
-
-    &:first-of-type {
-      border-top: 1px solid rgba(255,255,255,0.2);
-    }
-
-    &.unconfirmed {
-      grid-template-columns: auto 5rem 5rem;
-    }
-
-    &.vetoed {
-      text-decoration: line-through;
-      opacity: 0.6;
-    }
   }
 
 }