Show contribution history from events

app/components/contribution-list/component.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  tagName: 'ul',
+  classNames: ['contribution-list'],
+
+  contributionsWithContributors: function() {
+    return this.get('contributions').map((c) => {
+      c.set('contributor', this.get('contributors')
+                               .findBy('address', c.get('recipientAddress')));
+      return c;
+    });
+  }.property('contributions.@each')
+
+});

app/components/contribution-list/template.hbs

@@ -0,0 +1,7 @@
+{{#each contributionsWithContributors as |contribution|}}
+  <li title="({{contribution.kind}}) {{contribution.description}}">
+    <span class="category {{contribution.kind}}">♥</span>
+    <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
+    for <span class="recipient">{{contribution.contributor.name}}</span>
+  </li>
+{{/each}}

app/models/contribution.js

@@ -10,6 +10,7 @@ export default Ember.Object.extend({
   ipfsHash: null,
   amount: null,
 
+  contributor: null,
   contribution: null,
   kind: null,
   description: null,

app/styles/app.scss

@@ -104,3 +104,4 @@ button, input[type=submit] {
 @import "components/contributor-list";
 @import "components/add-contributor";
 @import "components/proposal-list";
+@import "components/contribution-list";

app/styles/components/_contribution-list.scss

@@ -0,0 +1,39 @@
+ul.contribution-list {
+  clear: both;
+  width: 100%;
+  list-style: none;
+
+  li {
+    // display: block;
+    padding: 0 1.2rem;
+    line-height: 4.2rem;
+    background-color: rgba(255,255,255,0.1);
+    font-size: 1.4rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    &:first-of-type {
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .category {
+      color: $blue;
+      padding-right: 0.2rem;
+      &.community { color: $red; }
+      &.dev       { color: $pink; }
+      &.design    { color: $yellow; }
+      &.docs      { color: $green; }
+      &.ops       { color: $purple; }
+    }
+    .amount {
+      font-weight: 500;
+    }
+    .symbol {
+      font-size: 1rem;
+      font-weight: 500;
+      padding-left: 0.2rem;
+    }
+    .recipient {
+      font-weight: 500;
+    }
+  }
+
+}

app/templates/index.hbs

@@ -32,19 +32,13 @@
   </section>
 {{/if}}
 
-<section id="proposals-closed">
+<section id="contributions">
   <header>
-    <h2>Closed Proposals</h2>
+    <h2>Contributions</h2>
   </header>
   <div class="content">
-    {{proposal-list proposals=proposalsClosedSorted
-                    confirmAction="confirmProposal"}}
-
-    {{#if contractInteractionEnabled}}
-      <p class="actions">
-        {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
-      </p>
-    {{/if}}
+    {{contribution-list contributions=model.contributions
+                        contributors=model.contributors}}
   </div>
 </section>