Show confirmation ETA for proposed reimbursements

app/components/confirmed-in/component.js

@@ -1,20 +1,12 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import moment from 'moment';
 
 export default class ConfirmedInComponent extends Component {
   @service kredits;
 
-  @tracked confirmedAtBlock = null;
-
-  constructor(confirmedAtBlock) {
-    super(...arguments);
-    this.confirmedAtBlock = confirmedAtBlock;
-  }
-
   get confirmedInBlocks () {
-    return this.confirmedAtBlock - this.kredits.currentBlock;
+    return this.args.confirmedAtBlock - this.kredits.currentBlock;
   }
 
   get confirmedInSeconds () {

app/components/confirmed-in/template.hbs

@@ -0,0 +1 @@
+Confirming in <strong>{{this.confirmedInBlocks}}</strong> blocks (~ {{this.confirmedInHumanTime}})

app/components/reimbursement-list/template.hbs

@@ -3,12 +3,12 @@
     <li data-reimbursement-id={{reimbursement.id}}
         class="{{item-status reimbursement}}">
       <p class="meta">
-        <span class="title">
-          Expenses covered by {{reimbursement.contributor.name}}
-        </span>
         <span class="recipient">
           <UserAvatar @contributor={{reimbursement.contributor}} />
         </span>
+        <span class="title">
+          Expenses covered by {{reimbursement.contributor.name}}
+        </span>
       </p>
       <p class="token-amount">
         <span class="amount">
@@ -30,17 +30,22 @@
           </li>
         {{/each}}
       </ul>
-      {{#if this.kredits.currentUserIsCore}}
+      <div class="meta">
-        <p>
+        <p class="confirmation-eta">
+          <ConfirmedIn @confirmedAtBlock={{reimbursement.confirmedAt}} />
+        </p>
+        <p class="actions">
           <a href="{{this.ipfsGatewayUrl}}/{{reimbursement.ipfsHash}}"
              class="button small" target="_blank" rel="noopener noreferrer">
             Inspect IPFS data
           </a>
+          {{#if this.kredits.currentUserIsCore}}
             <button {{on "click" (fn this.veto reimbursement.id)}}
                     disabled={{reimbursement.vetoed}}
                     class="button small danger" type="button">veto</button>
-        </p>
           {{/if}}
+        </p>
+      </div>
     </li>
   {{/each}}
 </ul>

app/styles/components/_reimbursement-list.scss

@@ -31,4 +31,24 @@ ul.reimbursement-list {
       }
     }
   }
+
+  div.meta {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    margin-top: 0.6rem;
+    border-top: 1px solid $item-border-color;
+    display: flex;
+
+    p {
+      flex: 1;
+      padding: 1.6rem 0 1rem 0;
+
+      &.confirmation-eta {
+      }
+
+      &.actions {
+        text-align: right;
+      }
+    }
+  }
 }