2.2.1

Reimbursement form fixes and improvements

.eslintrc.js

@@ -2,13 +2,21 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    requireConfigFile: false,
+    ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true
-    }
+    },
+    babelOptions: {
+      babelrc: false,
+      configFile: false,
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+      ],
+    },
   },
   globals: {
     console: true
@@ -28,7 +36,13 @@ module.exports = {
     'no-console': 'off',
     'ember/no-jquery': 'error',
     'ember/require-computed-property-dependencies': 'warn',
-    'ember/no-observers': 'warn'
+    'ember/no-computed-properties-in-native-classes': 'warn',
+    'ember/no-observers': 'warn',
+    'ember/no-classic-classes': 'warn',
+    'ember/no-classic-components': 'warn',
+    'ember/no-controller-access-in-routes': 'warn',
+    'ember/no-actions-hash': 'warn',
+    'ember/require-tagless-components': 'warn'
   },
   overrides: [
     // node files

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
+    - run: npm test

.template-lintrc.js

@@ -5,7 +5,8 @@ module.exports = {
 
   rules: {
     'simple-unless': false,
-    'no-nested-interactive': false
+    'no-nested-interactive': false,
+    'no-html-comments': false
   },
 
   ignore: [
@@ -47,6 +48,12 @@ module.exports = {
 				"no-action"
 			]
 		},
+		{
+			"moduleId": "app/components/expense-list/template",
+			"only": [
+				"no-invalid-role"
+			]
+		},
 		{
 			"moduleId": "app/components/topbar-account-panel/template",
 			"only": [

.travis.yml

@@ -1,31 +0,0 @@
----
-language: node_js
-node_js:
-  - "10"
-
-sudo: false
-dist: xenial
-
-notifications:
-  email:
-    on_success: never
-    on_failure: always
-
-addons:
-  chrome: stable
-
-cache:
-  directories:
-    - $HOME/.npm
-
-env:
-  global:
-    # See https://git.io/vdao3 for details.
-    - JOBS=1
-
-branches:
-  only:
-    - master
-
-script:
-  - npm test

README.md

@@ -1,39 +1,46 @@
-[![Build Status](https://travis-ci.org/67P/kredits-web.svg?branch=master)](https://travis-ci.org/67P/kredits-web)
+[![Build Status](https://github.com/67P/kredits-web/actions/workflows/ci.yml/badge.svg)](https://github.com/67P/kredits-web/actions/workflows/ci.yml?query=branch%3Amaster)
 
-# kredits-web
+# Kredits Web
 
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
+This is the main Web UI for Kosmos [Kredits](https://wiki.kosmos.org/Kredits).
+It provides an overview of contributors and contributions, as well as the
+community's budget, expenses, and reimbursements.
 
-## Prerequisites
+It is an unhosted Web app, fetching all data from
+[Rootstock](https://rootstock.io/) and [IPFS](https://ipfs.tech/), and caching
+it in the browser's local database. As such, you can run the app directly from
+the `/release` directory on any Web server that can serve static assets.
+
+## Development
+
+### Prerequisites
 
 You will need the following things properly installed on your computer.
 
 * [Git](https://git-scm.com/)
 * [Node.js](https://nodejs.org/) (with npm)
 * [Ember CLI](https://ember-cli.com/)
-* [Google Chrome](https://google.com/chrome/)
+* [Google Chrome](https://google.com/chrome/) (only for running tests)
 
-## Installation
+### Installation
 
 * `git clone git@github.com:67P/kredits-web.git` this repository
 * `cd kredits-web`
 * `npm install`
 
-## Running / Development
+### Building/running for development
 
-
-* `ember serve` - by default kredits-web connects to the Ethreum Kovan network
-* Visit your app at [http://localhost:4200](http://localhost:4200).
-* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+* `npm start` - by default Kredits Web connects to the Rootstock testnet network
+* Visit the app at [http://localhost:4200](http://localhost:4200).
+* Visit the tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
 See [working with locally deployed contracts](https://github.com/67P/kredits-web#working-with-locally-deployed-contracts) for details on how to develop with locally deployed contracts.
 
-### Code Generators
+### Code generators
 
 Make use of the many generators for code, try `ember help generate` for more details
 
-### Running Tests
+### Running tests
 
 * `ember test`
 * `ember test --server`
@@ -47,7 +54,7 @@ Make use of the many generators for code, try `ember help generate` for more det
 ### Building
 
 * `ember build` (development)
-* `ember build --environment production` (production)
+* `npm run build` (production)
 
 ### Deploying
 
@@ -55,17 +62,15 @@ _(You need collaborator permissions on the 5apps Deploy project.)_
 
 `npm run deploy`
 
-## Working with locally deployed contracts
+### Working with locally deployed contracts
 
 The smart contracts and their JavaScript wrapper library are developed in the
 [kredits-contracts](https://github.com/67P/kredits-contracts) repo/package.
 
-You can run `kredits-web` on your machine, against a local, simulated Ethereum
-network, provided e.g. by [ganache](http://truffleframework.com/ganache/).
-
-[kredits-contracts](https://github.com/67P/kredits-contracts) holds all the tools
-to start and set up such a simulated network, as well as to deploy smart
-contracts to it.
+You can run `kredits-web` on your machine, against a local, simulated
+blockchain. [kredits-contracts](https://github.com/67P/kredits-contracts)
+contains all the tools to start and set up such a simulated network, as well as
+to deploy the Kredits smart contracts to it.
 
 These are the basic steps to get up and running:
 
@@ -78,37 +83,33 @@ Run a local IPFS deamon.
 
 #### 2. kredits-contracts
 
-Get your local Ethereum development node running. (See [kredits-contracts README](https://github.com/67P/kredits-contracts)
-for details.
+Run a local devchain with test data. (See [kredits-contracts
+README](https://github.com/67P/kredits-contracts) for details.
 
   * Clone [kredits-contracts](https://github.com/67P/kredits-contracts)
   * `npm install`
   * `npm run devchain` - runs a local development chain
-  * `npm run bootstrap` - bootstrap runs deploys all the contracts
-  * `npm link` - make the `kredits-contracts` module linkable as `kredits-contracts` on your machine (currently broken :( )
+  * `npm run bootstrap` - deploys all contracts and seeds test data
+  * `npm link` - makes the `kredits-contracts` module linkable as `kredits-contracts` on your machine
 
 #### 3. kredits-web
 
-With IPFS and Ethereum/ganache running, you can now start this Ember app.
+With IPFS and the local devchain running, you can now link the contracts and
+start the Ember app:
 
-  * `npm link kredits-contracts` - link the local `kredits-contracts` package
-  * `npm run start:local` - WEB3_PROVIDER_URL=http://localhost:7545 must be set for local settings
-
-If you restart the devchain your network ID changes. So kredits-contracts does not find the correct DAO address.
-If that is the case the DAO address must be provided as `KREDITS_DAO_ADDRESS` environment variable.
-
-  * `npm run dao:address` in the kredits-contracts repo to find your address
-  * `KREDITS_DAO_ADDRESS=<0xYOURADDRESS> npm run start:local`
+  * `npm link kredits-contracts` - links the local `kredits-contracts` package (has to be done again after every `npm install`)
+  * `npm run start:local` - runs the Ember app with WEB3_PROVIDER_URL=http://localhost:8545 set
 
 #### 4. Metamask network
 
-Switch the network in Metamask to "Custom RPC" with the RPC URL `http://localhost:7545`.
+If you want to interact with the local contracts via a Web3 wallet, switch the
+network to a "Custom RPC" one, with the RPC URL `http://localhost:8545`.
 
 #### IPFS
 
-Install IPFS with your favorite package manager and run
+If you haven't configured your IPFS node for CORS yet, you can do so by running
+the following commands:
 
-    ipfs init (on initial installation)
     ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["localhost:4200"]'
     ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST"]'
     ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'

app/components/add-contribution/component.js

@@ -3,11 +3,21 @@ import { computed } from '@ember/object';
 import { and, notEmpty } from '@ember/object/computed';
 import { assign } from '@ember/polyfills';
 import moment from 'moment';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
+  kredits: service(),
 
   attributes: null,
-  contributors: Object.freeze([]),
+
+  contributors: computed('kredits.contributorsSorted.[]', function() {
+    return this.kredits.contributorsSorted.map(c => {
+      return {
+        id: c.id.toString(),
+        name: c.name
+      }
+    })
+  }),
 
   isValidContributor: notEmpty('contributorId'),
   isValidKind: notEmpty('kind'),
@@ -55,6 +65,8 @@ export default Component.extend({
 
       const attributes = this.getProperties(Object.keys(this.attributes));
 
+      attributes.contributorId = parseInt(this.contributorId);
+
       let dateInput = (attributes.date instanceof Array) ?
         attributes.date[0] : attributes.date;
 
@@ -72,7 +84,5 @@ export default Component.extend({
         })
         .finally(() => this.set('inProgress', false));
     }
-
   }
-
 });

app/components/add-contribution/template.hbs

@@ -4,7 +4,7 @@
     <p>
       <select required onchange={{action (mut this.contributorId) value="target.value"}}>
         <option value="" selected disabled hidden></option>
-        {{#each @contributors as |contributor|}}
+        {{#each this.contributors as |contributor|}}
           <option value={{contributor.id}} selected={{eq this.contributorId contributor.id}}>{{contributor.name}}</option>
         {{/each}}
       </select>
@@ -15,11 +15,14 @@
     <p>
       <select required onchange={{action (mut this.kind) value="target.value"}}>
         <option value="" selected disabled hidden></option>
+        <option value="bureaucracy" selected={{eq this.kind "bureaucracy"}}>Bureaucracy</option>
         <option value="community" selected={{eq this.kind "community"}}>Community</option>
         <option value="design" selected={{eq this.kind "design"}}>Design</option>
         <option value="dev" selected={{eq this.kind "dev"}}>Development</option>
         <option value="docs" selected={{eq this.kind "docs"}}>Documentation</option>
         <option value="ops" selected={{eq this.kind "ops"}}>IT Operations</option>
+        <option value="outreach" selected={{eq this.kind "outreach"}}>Outreach</option>
+        <option value="qa" selected={{eq this.kind "qa"}}>Quality Assurance</option>
         <option value="special" selected={{eq this.kind "special"}}>Special</option>
       </select>
     </p>

app/components/add-contributor/template.hbs

@@ -1,6 +1,6 @@
 <form onsubmit={{action "submit"}}>
   <p>
-    <label for="c-account">Ethereum account</label>
+    <label for="c-account">Rootstock account</label>
       <Input @type="text"
              @value={{this.account}}
              name="account" id="c-account"

app/components/add-expense-item/component.js

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import moment from 'moment';
+import isValidAmount from 'kredits-web/utils/is-valid-amount';
+import { isPresent } from '@ember/utils';
+
+export default class AddExpenseItemComponent extends Component {
+  @tracked amount = '0';
+  @tracked currency = 'EUR';
+  @tracked date = moment().startOf('hour').toDate();
+  @tracked title = '';
+  @tracked description = '';
+  @tracked url = '';
+  @tracked tags = '';
+
+  defaultDate = moment().startOf('hour').toDate();
+
+  currencies = [
+    { code: 'EUR' },
+    { code: 'USD' }
+  ];
+
+  get isValidAmount () {
+    return isValidAmount(this.amount);
+  }
+
+  get amountInputClass () {
+    return this.isValidTotal ? 'valid' : '';
+  }
+
+  validateForm () {
+    const formEl = document.querySelector('form#add-expense-item');
+    const inputFields = formEl.querySelectorAll('input');
+    inputFields.forEach(i => i.classList.remove('invalid'));
+    let validity = true;
+
+    if (!this.isValidAmount) {
+      document.querySelector('input[name=expense-amount]').classList.add('invalid');
+      validity = false;
+    }
+
+    if (!formEl.checkValidity()) {
+      inputFields.forEach(i => {
+        if (!i.validity.valid) {
+          i.classList.add('invalid');
+          validity = false;
+        }
+      })
+    }
+
+    return validity;
+  }
+
+  @action
+  updateCurrency(event) {
+    this.currency = event.target.value;
+  }
+
+  @action
+  submit (e) {
+    e.preventDefault();
+
+    let dateInput = (this.date instanceof Array) ?
+      this.date[0] : this.date;
+
+    const [ date ] = moment(dateInput).utcOffset(0, true)
+                                      .toISOString()
+                                      .split('T');
+
+    const isValid = this.validateForm();
+    if (!isValid) return false;
+
+    const expense = {
+      amount: parseFloat(this.amount),
+      currency: this.currency,
+      date: date,
+      title: this.title,
+      description: isPresent(this.description) ? this.description : undefined,
+      url: isPresent(this.url) ? this.url : undefined,
+    }
+
+    if (isPresent(this.tags)) {
+      expense.tags = this.tags.split(',')
+                              .map(t => t.trim())
+                              .filter(t => t.length > 0);
+    }
+
+    this.args.addExpenseItem(expense);
+  }
+}

app/components/add-expense-item/template.hbs

@@ -0,0 +1,69 @@
+<form id="add-expense-item" {{on "submit" this.submit}} novalidate>
+  <fieldset class="horizontal">
+    <label>
+      <p class="label">Amount:</p>
+      <p>
+        <Input @name="expense-amount"
+               @type="text"
+               @placeholder="10"
+               @value={{this.amount}}
+               @required={{true}}
+               @pattern="([0-9]*[.])?[0-9]+"
+               @class={{this.amountInputClass}} />
+      </p>
+    </label>
+    <label>
+      <p class="label">Currency:</p>
+      <p>
+        <select required name="expense-currency" {{on "change" this.updateCurrency}}>
+          <option value="" selected disabled hidden></option>
+          {{#each this.currencies as |currency|}}
+          <option value={{currency.code}} selected={{eq this.currency currency.code}}>{{currency.code}}</option>
+          {{/each}}
+        </select>
+      </p>
+    </label>
+  </fieldset>
+  <label>
+    <p class="label">Date:</p>
+    <p>
+      <EmberFlatpickr @date={{this.date}}
+                      @defaultDate={{this.defaultDate}}
+                      @maxDate={{this.defaultDate}}
+                      @enableTime={{false}}
+                      @onChange={{fn (mut this.date)}} />
+    </p>
+  </label>
+  <label>
+    <p class="label">Title:</p>
+    <p>
+      <Input @name="expense-title"
+             @type="text"
+             @value={{this.title}}
+             @required={{true}} />
+    </p>
+  </label>
+  <label>
+    <p class="label">Description (optional):</p>
+    <p>
+      <Input @name="expense-description" @type="text" @value={{this.description}} />
+    </p>
+  </label>
+  <label>
+    <p class="label">URL (optional):</p>
+    <p>
+      <Input @name="expense-url" @type="url" @value={{this.url}} />
+    </p>
+  </label>
+  <label>
+    <p class="label">Tags (comma-separated, optional):</p>
+    <p>
+      <Input @name="expense-tags" @type="text" @value={{this.tags}} />
+    </p>
+  </label>
+
+  <p class="actions">
+    <Input @type="submit" @value="Add" @class="green"
+           @title="Add item to reimbursement" />
+  </p>
+</form>

app/components/add-reimbursement/component.js

@@ -0,0 +1,169 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { alias } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+import { scheduleOnce } from '@ember/runloop';
+import isValidAmount from 'kredits-web/utils/is-valid-amount';
+import readFileContent from 'kredits-web/utils/read-file-content';
+import config from 'kredits-web/config/environment';
+
+export default class AddReimbursementComponent extends Component {
+  @service router;
+  @service kredits;
+  @service exchangeRates;
+
+  @alias('kredits.contributorsSorted') contributors;
+
+  @tracked recipientId = null;
+  @tracked title = '';
+  @tracked total = '0';
+  @tracked expenses = A([]);
+  @tracked expenseFormVisible = true;
+
+  constructor() {
+    super(...arguments);
+    this.exchangeRates.fetchRates();
+  }
+
+  get contributorId () {
+    return this.recipientId || this.kredits.currentUser?.id;
+  }
+
+  get isValidTotal () {
+    return isValidAmount(this.total);
+  }
+
+  get totalInputClass () {
+    return this.isValidTotal ? 'valid' : '';
+  }
+
+  get totalEUR () {
+    const expenses = this.expenses.filterBy('currency', 'EUR');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
+  get totalUSD () {
+    const expenses = this.expenses.filterBy('currency', 'USD');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
+  get submitButtonEnabled () {
+    return this.isValidTotal &&
+           (this.expenses.length > 0);
+  }
+
+  get submitButtonDisabled () {
+    return !this.submitButtonEnabled;
+  }
+
+  scrollToExpenseItemForm () {
+    const anchor = document.getElementById('new-expense-item');
+    anchor.scrollIntoView();
+  }
+
+  updateTotalAmountFromFiat() {
+    let btcAmount = 0;
+
+    if (this.exchangeRates.btceur > 0 && this.totalEUR > 0) {
+      btcAmount += (this.totalEUR / this.exchangeRates.btceur);
+    }
+    if (this.exchangeRates.btcusd > 0 && this.totalUSD > 0) {
+      btcAmount += (this.totalUSD / this.exchangeRates.btcusd);
+    }
+    if (this.totalUSD === 0 && this.totalEUR === 0) {
+      btcAmount = 0;
+    }
+
+    this.total = btcAmount.toFixed(8);
+  }
+
+  // TODO use ember-concurrency here
+  // https://github.com/67P/kredits-web/pull/209#discussion_r1064234421
+  @action
+  async addExpensesFromFile (evt) {
+    const content = await readFileContent(evt.target.files[0]);
+    const expenses = JSON.parse(content);
+
+    if (expenses instanceof Array) {
+      for (const item of expenses) {
+        this.addExpenseItem(item);
+      }
+    } else {
+      console.warn("Expenses in file must be a list of items:");
+      console.debug(content);
+    }
+  }
+
+  @action
+  updateContributor (event) {
+    this.recipientId = parseInt(event.target.value);
+  }
+
+  @action
+  showExpenseForm () {
+    this.expenseFormVisible = true;
+    scheduleOnce('afterRender', this, this.scrollToExpenseItemForm);
+  }
+
+  @action
+  addExpenseItem (expenseItem) {
+    this.expenses.pushObject(expenseItem);
+    this.updateTotalAmountFromFiat();
+    this.expenseFormVisible = false;
+  }
+
+  @action
+  removeExpenseItem (expenseItem) {
+    this.expenses.removeObject(expenseItem);
+    this.updateTotalAmountFromFiat();
+
+    if (this.expenses.length === 0) {
+      this.expenseFormVisible = true;
+    }
+  }
+
+  @action
+  submit (e) {
+    e.preventDefault();
+    if (!this.kredits.currentUser) { window.alert('You need to connect your RSK account first.'); return false }
+    if (!this.kredits.currentUserIsCore) { window.alert('Only core contributors can submit reimbursements.'); return false }
+
+    const contributor = this.contributors.findBy('id', this.contributorId);
+
+    const attributes = {
+      amount: parseInt(parseFloat(this.total) * 100000000), // convert to sats
+      token: config.tokens['BTC'],
+      recipientId: this.contributorId,
+      title: `Expenses covered by ${contributor.name}`,
+      description: this.description,
+      url: this.url,
+      expenses: JSON.parse(JSON.stringify((this.expenses)))
+    }
+
+    this.inProgress = true;
+
+    this.kredits.addReimbursement(attributes)
+      .then((/* reimbursement */) => {
+        this.router.transitionTo('budget');
+      })
+      .catch(e => {
+        console.error('Could not add reimbursement:', e);
+        window.alert('Something went wrong. Please check the browser console.')
+      })
+      .finally(() => {
+        this.inProgress = false;
+      });
+  }
+}

app/components/add-reimbursement/template.hbs

@@ -0,0 +1,81 @@
+<form {{on "submit" this.submit}} novalidate>
+  <label>
+    <p class="label">Contributor:</p>
+    <p>
+      <select id="contributor" required {{on "change" this.updateContributor}}>
+        {{#each this.contributors as |contributor|}}
+          <option value={{contributor.id}} selected={{eq this.contributorId contributor.id}}>{{contributor.name}}</option>
+        {{/each}}
+      </select>
+    </p>
+  </label>
+  <fieldset class="horizontal thirds total-amounts">
+    <label>
+      <p class="label">Total amount (BTC):</p>
+      <p>
+        <Input @type="text"
+               @name="total-btc"
+               @placeholder="0.0015"
+               @value={{this.total}}
+               @required={{true}}
+               @pattern="([0-9]*[.])?[0-9]+"
+               @class={{this.totalInputClass}} />
+      </p>
+    </label>
+    <label>
+      <p class="label">EUR total</p>
+      <p>
+        <Input @type="text"
+               @name="total-eur"
+               @value={{this.totalEUR}}
+               @disabled={{true}} />
+      </p>
+    </label>
+    <label>
+      <p class="label">USD total</p>
+      <p>
+        <Input @type="text"
+               @name="total-usd"
+               @value={{this.totalUSD}}
+               @disabled={{true}} />
+      </p>
+    </label>
+  </fieldset>
+
+  <h3>Expense items</h3>
+  {{#if this.expenses}}
+     <ExpenseList @expenses={{this.expenses}}
+                  @removeExpenseItem={{this.removeExpenseItem}}
+                  @deletable={{true}} />
+
+    <p class="actions">
+      <button {{on "click" this.showExpenseForm}}
+        id="add-another-item" class="green small" type="button">
+        + Add another item
+      </button>
+    </p>
+  {{else}}
+    <p>No line items yet.</p>
+  {{/if}}
+
+  <p class="actions">
+    {{#if this.inProgress}}
+      <Input @type="submit" @value="Submitting..." @disabled={{true}}
+             @title="Submit/propose this reimbursement" />
+    {{else}}
+      <Input @type="submit" @value="Submit" @disabled={{this.submitButtonDisabled}}
+             @title="Submit/propose this reimbursement" />
+    {{/if}}
+  </p>
+
+  {{#if this.expenseFormVisible}}
+    <h3 id="new-expense-item">New expense item</h3>
+    <AddExpenseItem @addExpenseItem={{fn this.addExpenseItem}} />
+  {{/if}}
+</form>
+<form id="add-expenses-from-file">
+  <h3>Add expense items from file</h3>
+  <input type="file" multiple="false"
+         onchange={{fn this.addExpensesFromFile}}
+         accept="application/json" />
+</form>

app/components/budget-balances/component.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class BudgetBalancesComponent extends Component {
+  @service communityFunds;
+
+  get balancesSorted () {
+    return this.communityFunds.balances
+               .sortBy('confirmed_balance').reverse();
+  }
+
+  get loading () {
+    return !this.communityFunds.balancesLoaded;
+  }
+}

app/components/budget-balances/template.hbs

@@ -0,0 +1,26 @@
+<table class="token-balances {{if this.loading 'loading'}}">
+  <thead>
+    <tr>
+      <th>Token</th>
+      <th>Amount</th>
+      <th>Fiat value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.balancesSorted as |balance|}}
+      <tr>
+        <th>
+          <img src={{balance.token.icon}}
+               alt={{balance.token.description}}
+               title={{balance.token.description}} />
+        </th>
+        <td class="amount">
+          {{fmt-number balance.confirmed_balance}} <span class="unit">sats</span>
+        </td>
+        <td class="fiat-amount">
+          ~{{balance.balanceUSD}} USD
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

app/components/confirmed-in/component.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import moment from 'moment';
+
+export default class ConfirmedInComponent extends Component {
+  @service kredits;
+
+  get confirmedInBlocks () {
+    return this.args.confirmedAtBlock - this.kredits.currentBlock;
+  }
+
+  get confirmedInSeconds () {
+    // A new block is mined every 30 seconds on average
+    return this.confirmedInBlocks * 30;
+  }
+
+  get confirmedInHumanTime () {
+    return moment.duration(this.confirmedInSeconds, "seconds").humanize();
+  }
+
+  get isConfirmed () {
+    return this.confirmedInBlocks <= 0;
+  }
+}

app/components/confirmed-in/template.hbs

@@ -0,0 +1,5 @@
+{{#if this.isConfirmed}}
+Confirmed at block <strong>{{@confirmedAtBlock}}</strong> (~ {{this.confirmedInHumanTime}} ago)
+{{else}}
+Confirming in <strong>{{this.confirmedInBlocks}}</strong> blocks (~ {{this.confirmedInHumanTime}})
+{{/if}}

app/components/contribution-list/component.js

@@ -24,10 +24,9 @@ export default Component.extend({
   contributors: sort('kredits.contributors', 'contributorsSorting'),
 
   contributorsActive: computed('contributors.[]', 'contributions', function() {
-    const activeIds = new Set(this.contributions.mapBy('contributorId')
-                                                .map(id => id.toString()));
+    const activeIds = new Set(this.contributions.mapBy('contributorId'));
 
-    return this.contributors.filter(c => activeIds.has(c.id.toString()));
+    return this.contributors.filter(c => activeIds.has(c.id));
   }),
 
   contributionKinds: computed('contributions.[]', function() {
@@ -42,7 +41,7 @@ export default Component.extend({
           c.amount <= 500) { included = false; }
 
       if (isPresent(this.contributorId) &&
-          c.contributorId.toString() !== this.contributorId.toString()) { included = false; }
+          c.contributorId !== parseInt(this.contributorId)) { included = false; }
 
       if (isPresent(this.contributionKind) &&
           c.kind !== this.contributionKind) { included = false; }

app/components/contribution-list/template.hbs

@@ -29,11 +29,11 @@
   </div>
 {{/if}}
 
-<ul class="contribution-list">
+<ul class="item-list contribution-list {{if @loading 'loading'}}">
   {{#each this.contributionsFiltered as |contribution|}}
     <li role="button" data-contribution-id={{contribution.id}}
         {{action "openContributionDetails" contribution}}
-        class="{{contribution-status contribution}}{{if (eq contribution.id @selectedContributionId) " selected"}}">
+        class="{{item-status contribution}}{{if (eq contribution.id @selectedContributionId) " selected"}}">
       <p class="meta">
         <span class="recipient"><UserAvatar @contributor={{contribution.contributor}} /></span>
         <span class="category {{contribution.kind}}">({{contribution.kind}})</span>

app/components/contributor-list/component.js

@@ -2,12 +2,10 @@ import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
 export default Component.extend({
+  tagName: '',
 
   router: service(),
 
-  tagName: 'table',
-  classNames: 'contributor-list',
-
   selectedContributorId: null,
 
   actions: {
@@ -17,5 +15,4 @@ export default Component.extend({
     }
 
   }
-
 });

app/components/contributor-list/template.hbs

@@ -1,21 +1,25 @@
-<tbody>
-  {{#each @contributorList as |c|}}
-    <tr role="button"
-        onclick={{action "openContributorDetails" c.contributor}}
-        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id @selectedContributorId) "selected"}}">
-      <td class="person">
-        <UserAvatar @contributor={{c.contributor}} /> {{c.contributor.name}}
-      </td>
-      <td class="kredits">
-        <span class="amount">
-          {{#if @showUnconfirmedKredits}}
-            {{c.amountTotal}}
-          {{else}}
-            {{c.amountConfirmed}}
-          {{/if}}
-        </span>
-        <span class="symbol">₭S</span>
-      </td>
-    </tr>
-  {{/each}}
-</tbody>
+<table class="contributor-list {{if @loading 'loading'}}">
+  <thead>
+  </thead>
+  <tbody>
+    {{#each @contributorList as |c|}}
+      <tr role="button"
+          onclick={{action "openContributorDetails" c.contributor}}
+          class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id @selectedContributorId) "selected"}}">
+        <td class="person">
+          <UserAvatar @contributor={{c.contributor}} /> {{c.contributor.name}}
+        </td>
+        <td class="kredits">
+          <span class="amount">
+            {{#if @showUnconfirmedKredits}}
+              {{c.amountTotal}}
+            {{else}}
+              {{c.amountConfirmed}}
+            {{/if}}
+          </span>
+          <span class="symbol">₭S</span>
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

app/components/expense-list/component.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ExpenseListComponent extends Component {
+
+  get showDeleteButton () {
+    return !!this.args.deletable;
+  }
+
+}

app/components/expense-list/template.hbs

@@ -0,0 +1,29 @@
+<ul class="expense-list">
+  {{#each @expenses as |expense|}}
+    <li class="expense-item">
+      <h4>
+        <span class="date">{{fmt-date-localized expense.date}}:</span>
+        <span class="title">{{expense.title}}</span>
+      </h4>
+      <div class="amount">
+        {{fmt-fiat-currency expense.amount expense.currency}}
+      </div>
+      <p class="description">
+        {{expense.description}}
+      </p>
+      <p class="tags">
+        {{#each expense.tags as |tag|}}
+          <button type="button" class="small yellow" role="none">
+            <IconTag />{{tag}}
+          </button>
+        {{/each}}
+      </p>
+      {{#if this.showDeleteButton}}
+        <div class="actions">
+          <button {{on "click" (fn @removeExpenseItem expense)}}
+            class="danger small" type="button">delete</button>
+        </div>
+      {{/if}}
+    </li>
+  {{/each}}
+</ul>

app/components/main-navigation-menu/template.hbs

@@ -0,0 +1,7 @@
+<nav id="main-menu">
+  <ul>
+    <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+    <li><LinkTo @route="budget">Budget</LinkTo></li>
+    <li><LinkTo @route="about">About</LinkTo></li>
+  </ul>
+</nav>

app/components/reimbursement-item/component.js

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import config from 'kredits-web/config/environment';
+import fmtDateLocalized from 'kredits-web/helpers/fmt-date-localized';
+
+export default class ReimbursementItemComponent extends Component {
+  @service kredits;
+  @tracked showExpenseDetails = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    if (this.isUnconfirmed && !this.isVetoed) {
+      this.showExpenseDetails = true;
+    }
+  }
+
+  get ipfsGatewayUrl () {
+    return config.ipfs.gatewayUrl;
+  }
+
+  get isConfirmed () {
+    return (this.args.reimbursement.confirmedAt - this.kredits.currentBlock) <= 0;
+  }
+
+  get isUnconfirmed () {
+    return !this.isConfirmed;
+  }
+
+  get isVetoed () {
+    return this.args.reimbursement.vetoed;
+  }
+
+  get showVetoButton () {
+    return this.isUnconfirmed && this.kredits.currentUserIsCore;
+  }
+
+  get showConfirmedIn () {
+    return !this.isVetoed &&
+           (this.showExpenseDetails || this.isUnconfirmed);
+  }
+
+  get expenses () {
+    return this.args.reimbursement.expenses;
+  }
+
+  get expensesDateRange () {
+    const dates = this.expenses.map(e => e.date).uniq().sort();
+    let out = fmtDateLocalized.compute(dates.firstObject)
+    if (dates.length > 1) {
+      out += ' - ' + fmtDateLocalized.compute(dates.lastObject)
+    }
+    return out;
+  }
+
+  @action
+  toggleExpenseDetails () {
+    this.showExpenseDetails = !this.showExpenseDetails;
+  }
+
+  @action
+  veto (id) {
+    this.kredits.vetoReimbursement(id).then(transaction => {
+      console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
+    });
+  }
+}

app/components/reimbursement-item/template.hbs

@@ -0,0 +1,41 @@
+<li data-reimbursement-id={{@reimbursement.id}}
+    class="{{item-status @reimbursement}}"
+    role="button" {{on "click" this.toggleExpenseDetails}}>
+  <p class="meta">
+    <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">
+      {{sats-to-btc @reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
+  </p>
+
+  {{#if this.showExpenseDetails}}
+  <ExpenseList @expenses={{@reimbursement.expenses}} />
+  {{/if}}
+
+  <div class="meta">
+    <p>
+      {{#if this.showConfirmedIn}}
+      <ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
+      {{else}}
+        {{#unless this.isVetoed}}{{this.expensesDateRange}}{{/unless}}
+      {{/if}}
+    </p>
+    <p class="actions">
+      <a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"
+         class="button small" target="_blank" rel="noopener noreferrer">
+        Inspect IPFS data
+      </a>
+      {{#if this.showVetoButton}}
+        <button {{on "click" (fn this.veto @reimbursement.id)}}
+                disabled={{@reimbursement.vetoed}}
+                class="button small danger" type="button">veto</button>
+      {{/if}}
+    </p>
+  </div>
+</li>

app/components/reimbursement-list/component.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { sort } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+export default class ReimbursementListComponent extends Component {
+  @service kredits;
+
+  itemSorting = Object.freeze(['pendingStatus:asc', 'id:desc']);
+  @sort('args.items', 'itemSorting') itemsSorted;
+}

app/components/reimbursement-list/template.hbs

@@ -0,0 +1,5 @@
+<ul class="item-list collapsible spaced reimbursement-list {{if @loading 'loading'}}">
+  {{#each this.itemsSorted as |item|}}
+    <ReimbursementItem @reimbursement={{item}} />
+  {{/each}}
+</ul>

app/components/topbar-account-panel/component.js

@@ -1,46 +1,37 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
+import { action } from '@ember/object';
 import { isPresent } from '@ember/utils';
 
-export default Component.extend({
+export default class TopbarAccountPanelComponent extends Component {
+  @service router;
+  @service kredits;
 
-  tagName: '',
+  @tracked setupInProgress = false;
 
-  kredits: service(),
-  router: service(),
-
-  setupInProgress: false,
-
-  userHasEthereumWallet: computed(function() {
+  get userHasWallet () {
     return isPresent(window.ethereum);
-  }),
-
-  showConnectButton: computed('userHasEthereumWallet',
-                              'kredits.hasAccounts', function() {
-    return this.userHasEthereumWallet &&
-           !this.kredits.hasAccounts;
-  }),
-
-  actions: {
-
-    signup() {
-      this.router.transitionTo('signup');
-    },
-
-    async connectAccount() {
-      try {
-        await window.ethereum.enable();
-        this.set('setupInProgress', true);
-        await this.kredits.setup();
-        this.set('setupInProgress', false);
-        this.router.transitionTo('dashboard');
-      } catch (error) {
-        this.set('setupInProgress', false);
-        console.log('Opening Ethereum wallet failed:', error);
-      }
-    }
-
   }
 
-});
+  get walletConnected () {
+    return this.userHasWallet && this.kredits.hasAccounts;
+  }
+
+  get walletDisconnected () {
+    return this.userHasWallet && !this.kredits.hasAccounts;
+  }
+
+  @action
+  signup () {
+    this.router.transitionTo('signup');
+  }
+
+  @action
+  async connectWallet () {
+    this.setupInProgress = true;
+    await this.kredits.connectWallet();
+    this.setupInProgress = false;
+  }
+
+}

app/components/topbar-account-panel/template.hbs

@@ -2,16 +2,15 @@
   {{#if this.setupInProgress}}
     Connecting account...
   {{else}}
-    {{#if (and this.kredits.hasAccounts this.kredits.currentUser)}}
+    {{#if (and this.walletConnected this.kredits.currentUser)}}
       {{this.kredits.currentUser.name}}
-      {{#if this.kredits.currentUserIsCore}}
-        <span class="core-flag">(core)</span>
-      {{/if}}
     {{else}}
       <span class="anonymous">Anonymous</span>
-      <button onclick={{action "signup"}} class="small" type="button">Sign up</button>
-      {{#if this.showConnectButton}}
-        <button onclick={{action "connectAccount"}} class="small green" type="button">Connect account</button>
+      <button onclick={{action "signup"}} id="signup"
+              class="small" type="button">Sign up</button>
+      {{#if this.walletDisconnected}}
+        <button onclick={{action "connectWallet"}} id="connect"
+                class="small green" type="button">Connect wallet</button>
       {{/if}}
     {{/if}}
   {{/if}}

app/controllers/application.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
-export default Controller.extend({
-  kredits: service(),
-});
+export default class ApplicationController extends Controller {
+  @service kredits;
+}

app/controllers/budget.js

@@ -0,0 +1,26 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { action } from '@ember/object';
+
+export default class BudgetController extends Controller {
+  @service kredits;
+  @service router;
+
+  @alias('kredits.reimbursementsUnconfirmed') reimbursementsUnconfirmed;
+  @alias('kredits.reimbursementsConfirmed') reimbursementsConfirmed;
+  @alias('kredits.currentUserIsCore') currentUserIsCore;
+
+  @action
+  addReimbursement () {
+    if (!this.kredits.currentUser) {
+      window.alert('You need to connect your RSK account first.');
+      return false;
+    }
+    if (!this.kredits.currentUserIsCore) {
+      window.alert('Only core contributors can submit reimbursements.');
+      return false;
+    }
+    this.router.transitionTo('reimbursements.new');
+  }
+}

app/controllers/dashboard.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
-import { alias, not, sort } from '@ember/object/computed';
+import { alias, gt, not, sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 export default Controller.extend({
@@ -33,15 +33,13 @@ export default Controller.extend({
   showQuickFilterUnconfirmed: false,
   showQuickFilterConfirmed: false,
 
-  showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){
-    return (!this.kredits.hasAccounts || !this.kredits.currentUser);
-  }),
+  showFullContributionSync: gt('kredits.missingHistoricContributionsCount', 0),
 
   actions: {
 
     vetoContribution (contributionId) {
       this.kredits.veto(contributionId).then(transaction => {
-        console.debug('[controllers:index] Veto submitted to Ethereum blockhain: '+transaction.hash);
+        console.debug('[controllers:index] Veto submitted to chain: '+transaction.hash);
       });
     },
 

app/controllers/signup/account.js

@@ -0,0 +1,50 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import config from 'kredits-web/config/environment';
+import { isAddress } from 'web3-utils';
+
+export default class AccountController extends Controller {
+  @service kredits;
+
+  @tracked accountAddress = null;
+
+  get isValidEthAccount () {
+    return isAddress(this.accountAddress);
+  }
+
+  get signupButtonDisabled () {
+    return !this.isValidEthAccount;
+  }
+
+  @action
+  completeSignup () {
+    const payload = {
+      accessToken: this.kredits.githubAccessToken,
+      account: this.accountAddress
+    }
+
+    fetch(config.githubSignupUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    })
+    .then(res => res.json())
+    .then(data => {
+      if (data.error) {
+        alert('Creating profile failed. We have been notified about this error and will take a look soon. Sorry!');
+        console.warn('Creating contributor profile failed:',
+          JSON.parse(data.error.body).error.message)
+        return false;
+      } else {
+        console.log('[signup/account] Created contributor:', data);
+
+        this.kredits.githubAccessToken = null;
+        this.accountAddress = null;
+
+        this.transitionToRoute('signup.complete');
+      }
+    })
+  }
+}

app/controllers/signup/eth-account.js

@@ -1,49 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { alias, not } from '@ember/object/computed';
-import { isAddress } from 'web3-utils';
-import { inject as service } from '@ember/service';
-import config from 'kredits-web/config/environment';
-
-export default Controller.extend({
-
-  kredits: service(),
-
-  ethAddress: null,
-  githubAccessToken: alias('kredits.githubAccessToken'),
-
-  isValidEthAccount: computed('ethAddress', function() {
-    return isAddress(this.ethAddress);
-  }),
-
-  signupButtonDisabled: not('isValidEthAccount'),
-
-  actions: {
-
-    completeSignup () {
-      const payload = {
-        accessToken: this.githubAccessToken,
-        account: this.ethAddress
-      }
-
-      fetch(config.githubSignupUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      })
-      .then(res => res.json())
-      .then(data => {
-        console.log('Created contributor:', data);
-
-        this.setProperties({
-          githubAccessToken: null,
-          ethAddress: null
-        });
-
-        this.transitionToRoute('signup.complete');
-      });
-    }
-
-  }
-
-});

app/controllers/signup/index.js

@@ -1,14 +1,12 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import config from 'kredits-web/config/environment';
 
-export default Controller.extend({
-
-  actions: {
-
-    connectGithub () {
-      window.location = config.githubConnectUrl;
-    }
+export default class IndexController extends Controller {
 
+  @action
+  connectGithub () {
+    window.location = config.githubConnectUrl;
   }
 
-});
+}

app/helpers/contribution-status.js

@@ -1,56 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import { once } from '@ember/runloop';
-
-export default Helper.extend({
-
-  kredits: service(),
-  currentBlock: alias('kredits.currentBlock'),
-
-  compute([contribution]) {
-    this.setupRecompute(contribution);
-
-    let status = [];
-
-    if (contribution.vetoed) {
-      status.push('vetoed');
-    } else if (contribution.confirmedAt > this.currentBlock) {
-      status.push('unconfirmed');
-    } else {
-      status.push('confirmed');
-    }
-
-    if (contribution.hasPendingChanges) {
-      status.push('pending');
-    }
-
-    return status.join(' ');
-  },
-
-  destroy () {
-    if (this.teardown) this.teardown();
-    this._super(...arguments);
-  },
-
-  setupRecompute (contribution) {
-    if (this.teardown) this.teardown();
-
-    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('hasPendingChanges', this, this.triggerRecompute);
-    };
-  },
-
-  triggerRecompute () {
-    once(this, this.recompute);
-  }
-
-});

app/helpers/fmt-crypto-currency.js

@@ -0,0 +1,18 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function fmtCryptoCurrency(params/*, hash*/) {
+  let fmtAmount;
+  const amount = params[0];
+  const code = params[1];
+
+  switch(code) {
+    case 'RBTC':
+      fmtAmount = amount / 1000000000000000000;
+      break;
+    case 'BTC':
+      fmtAmount = amount / 100000000;
+      break;
+  }
+
+  return fmtAmount;
+});

app/helpers/fmt-date-localized.js

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+import getLocale from 'kredits-web/utils/get-locale';
+
+export default helper(function fmtDateLocalized(dateStr) {
+  const date = new Date(dateStr);
+  const locale = getLocale();
+  return new Intl.DateTimeFormat(locale).format(date);
+});

app/helpers/fmt-fiat-currency.js

@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function fmtFiatCurrency(params) {
+  const lang = navigator.language || navigator.userLanguage;
+  const formatter = new Intl.NumberFormat(lang, {
+    style: 'currency',
+    currency: params[1] || 'EUR',
+    currencyDisplay: 'code'
+  })
+  return formatter.format(params[0]);
+});

app/helpers/fmt-number.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function fmtNumber(number) {
+  const lang = navigator.language || navigator.userLanguage;
+  return number.toLocaleString(lang);
+});

app/helpers/item-status.js

@@ -0,0 +1,56 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { once } from '@ember/runloop';
+
+export default Helper.extend({
+
+  kredits: service(),
+  currentBlock: alias('kredits.currentBlock'),
+
+  compute([item]) {
+    this.setupRecompute(item);
+
+    let status = [];
+
+    if (item.vetoed) {
+      status.push('vetoed');
+    } else if (item.confirmedAt > this.currentBlock) {
+      status.push('unconfirmed');
+    } else {
+      status.push('confirmed');
+    }
+
+    if (item.hasPendingChanges) {
+      status.push('pending');
+    }
+
+    return status.join(' ');
+  },
+
+  destroy () {
+    if (this.teardown) this.teardown();
+    this._super(...arguments);
+  },
+
+  setupRecompute (item) {
+    if (this.teardown) this.teardown();
+
+    item.addObserver('vetoed' , this, this.triggerRecompute);
+    item.addObserver('confirmedAt' , this, this.triggerRecompute);
+    item.addObserver('currentBlock' , this, this.triggerRecompute);
+    item.addObserver('hasPendingChanges' , this, this.triggerRecompute);
+
+    this.teardown = () => {
+      item.removeObserver('vetoed', this, this.triggerRecompute);
+      item.removeObserver('confirmedAt', this, this.triggerRecompute);
+      item.removeObserver('currentBlock', this, this.triggerRecompute);
+      item.removeObserver('hasPendingChanges', this, this.triggerRecompute);
+    };
+  },
+
+  triggerRecompute () {
+    once(this, this.recompute);
+  }
+
+});

app/helpers/sats-to-btc.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function satsToBtc(amount/*, hash*/) {
+  return amount / 100000000;
+});

app/models/contribution.js

@@ -1,19 +1,21 @@
 import EmberObject, { computed } from '@ember/object';
 import { isEmpty, isPresent } from '@ember/utils';
-import bignumber from 'kredits-web/utils/cps/bignumber';
 import moment from 'moment';
 
 export default EmberObject.extend({
-
   // Contract
   id: null,
   contributorId: null,
   amount: null,
-  confirmedAt: bignumber('confirmedAtBlock', 'toNumber'),
+  confirmedAt: null,
   vetoed: null,
   ipfsHash: null,
 
-  creatorAccount: null,
+  // contributor model instance
+  contributor: null,
+
+  // TODO contributor who submitted the contribution
+  // submittedBy: null,
 
   // IPFS
   kind: null,
@@ -22,7 +24,6 @@ export default EmberObject.extend({
   url: null,
   date: null,
   time: null,
-  ipfsData: '',
 
   pendingTx: null,
 
@@ -41,6 +42,9 @@ export default EmberObject.extend({
 
   hasPendingChanges: computed('pendingTx', function() {
     return isPresent(this.pendingTx);
-  })
+  }),
 
+  serialize () {
+    return JSON.stringify(this);
+  }
 });

app/models/contributor.js

@@ -1,14 +1,12 @@
 import EmberObject from '@ember/object';
-import bignumber from 'kredits-web/utils/cps/bignumber';
-import kreditsValue from 'kredits-web/utils/cps/kredits';
 
 export default EmberObject.extend({
   // Contract
-  id: bignumber('idRaw', 'toString'),
+  id: null,
   account: null,
-  balance: kreditsValue('balanceRaw'),
-  totalKreditsEarned: bignumber('totalKreditsEarnedRaw', 'toNumber'),
-  contributionsCount: bignumber('contributionsCountRaw', 'toNumber'),
+  balance: 0,
+  totalKreditsEarned: 0,
+  contributionsCount: 0,
   isCore: false,
   ipfsHash: null,
 
@@ -20,6 +18,8 @@ export default EmberObject.extend({
   github_uid: null,
   wiki_username: null,
   zoom_display_name: null,
-  ipfsData: ''
 
+  serialize () {
+    return JSON.stringify(this);
+  }
 });

app/models/reimbursement.js

@@ -0,0 +1,47 @@
+import EmberObject, { computed } from '@ember/object';
+import moment from 'moment';
+import { isPresent } from '@ember/utils';
+
+export default EmberObject.extend({
+
+  // Contract
+  id: null,
+  recipientId: null,
+  token: null,
+  amount: null,
+  confirmedAt: null,
+  vetoed: null,
+  ipfsHash: null,
+
+  // contributor model instance
+  recipient: null,
+
+  // TODO contributor who submitted the reimbursement
+  // recordedBy: null,
+
+  // IPFS
+  expenses: null, // Array of expense objects
+
+  pendingTx: null,
+
+  iso8601Date: computed('date', 'time', function() {
+    return this.time ? `${this.date}T${this.time}` : this.date;
+  }),
+
+  jsDate: computed('iso8601Date', function() {
+    return moment(this.iso8601Date).toDate();
+  }),
+
+  hasPendingChanges: computed('pendingTx', function() {
+    return isPresent(this.pendingTx);
+  }),
+
+  pendingStatus: computed('pendingTx', function() {
+    return isPresent(this.pendingTx) ? 'isPending' : 'notPending';
+  }),
+
+  serialize () {
+    return JSON.stringify(this);
+  }
+
+});

app/router.js

@@ -11,7 +11,6 @@ Router.map(function() {
     this.route('contributors', function() {
       this.route('show', { path: ':id' });
     });
-
     this.route('contributions', function() {
       this.route('show', { path: ':id' });
     });
@@ -26,7 +25,15 @@ Router.map(function() {
   });
   this.route('signup', function() {
     this.route('github');
-    this.route('eth-account');
+    this.route('account');
     this.route('complete');
   });
+  this.route('budget', function() {
+    this.route('expenses');
+    this.route('reimbursements', function() {});
+  });
+  this.route('reimbursements', function() {
+    this.route('new');
+  });
+  this.route('about');
 });

app/routes/about.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {
+}

app/routes/application.js

@@ -1,26 +1,35 @@
-import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { schedule } from '@ember/runloop';
 
-export default Route.extend({
-  kredits: service(),
+export default class ApplicationRoute extends Route {
+  @service kredits;
+  @service communityFunds;
 
   beforeModel(/* transition */) {
-    const kredits = this.kredits;
-
-    return kredits.setup().then(() => {
-      kredits.get('kredits').preflightChecks().catch((error) => {
+    return this.kredits.setup().then(() => {
+      this.kredits.kredits.preflightChecks().catch(error => {
         console.error('Kredits preflight check failed!');
         console.error(error);
       });
-    }).catch((error) => {
+    }).catch(error => {
       console.log('Error initializing Kredits', error);
     });
-  },
+  }
+
+  model() {
+    return this.kredits.loadInitialData().then(() => {
+      this.kredits.addContractEventHandlers()
+    });
+  }
 
   afterModel() {
-    return this.kredits.loadInitialData()
-      .then(() => {
-        this.kredits.addContractEventHandlers();
-      });
+    if (this.kredits.contributorsNeedSync) {
+      schedule('afterRender', this.kredits.syncContributors,
+        this.kredits.syncContributors.perform);
+    }
+
+    schedule('afterRender', this.communityFunds.fetchBalances,
+      this.communityFunds.fetchBalances.perform);
   }
-});
+}

app/routes/budget.js

@@ -0,0 +1,34 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { isEmpty, isPresent } from '@ember/utils';
+import { schedule } from '@ember/runloop';
+
+export default class BudgetRoute extends Route {
+  @service browserCache;
+  @service kredits;
+
+  async model () {
+    if (isPresent(this.kredits.reimbursements) &&
+        isEmpty(this.kredits.reimbursementsPending)) {
+      console.debug('[route:budget] Reimbursements loaded before, no need to sync or load');
+      return;
+    } else {
+      const numCachedReimbursements = await this.browserCache.reimbursements.length();
+      if (numCachedReimbursements > 0) {
+        await this.kredits.loadObjectsFromCache('Reimbursement');
+        this.kredits.set('reimbursementsNeedSync', true);
+      } else {
+        await this.kredits.fetchObjects('Reimbursement', { page: { size: 10 } });
+      }
+    }
+  }
+
+  afterModel() {
+    if (this.kredits.reimbursementsNeedSync) {
+      schedule('afterRender', this.kredits.syncReimbursements,
+        this.kredits.syncReimbursements.perform);
+    }
+    schedule('afterRender', this.kredits.fetchMissingReimbursements,
+      this.kredits.fetchMissingReimbursements.perform);
+  }
+}

app/routes/budget/expenses.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class BudgetExpensesRoute extends Route {
+}

app/routes/contributions/new.js

@@ -1,9 +1,9 @@
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+export default class ContributionsNewRoute extends Route {
 
   model (params) {
     return { params };
   }
 
-});
+}

app/routes/contributions/resubmit.js

@@ -6,19 +6,15 @@ export default Route.extend({
   kredits: service(),
 
   model(params) {
-    const contribution = this.kredits.contributions.findBy('id', parseInt(params.id));
-    contribution.contributorId = contribution.contributorId.toString();
-
-    return contribution;
+    return this.kredits.contributions.findBy('id', parseInt(params.id));
   },
 
   setupController (controller, model) {
     this._super(controller, model);
 
     controller.set('attributes', model.getProperties([
-      'kind', 'amount', 'description', 'url', 'details'
+      'contributorId', 'kind', 'amount', 'description', 'url', 'details'
     ]));
-    controller.set('attributes.contributorId', model.contributorId.toString());
     controller.set('attributes.date', model.jsDate);
   }
 

app/routes/dashboard.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { schedule } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+
+export default class DashboardRoute extends Route {
+
+  @service kredits;
+
+  afterModel() {
+    if (this.kredits.contributionsNeedSync) {
+      schedule('afterRender', this.kredits.syncContributions,
+        this.kredits.syncContributions.perform);
+    }
+    // TODO fetch automatically under a certain threshold
+    // The browser might delete cached data and we don't need manual re-syncs
+    // depending on how little is missing
+    // schedule('afterRender', this.kredits.fetchMissingContributions,
+    //   this.kredits.fetchMissingContributions.perform);
+  }
+
+}

app/routes/dashboard/contributors/show.js

@@ -8,7 +8,13 @@ export default Route.extend({
   contributors: alias('kredits.contributors'),
 
   model (params) {
-    return this.contributors.findBy('id', params.id);
+    const contributor = this.contributors.findBy('id', params.id);
+
+    if (contributor) {
+      return contributor;
+    } else {
+      return this.kredits.fetchContributor(params.id);
+    }
   },
 
   setupController (controller, model) {

app/routes/reimbursements/new.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class ReimbursementsNewRoute extends Route {
+
+  model (params) {
+    return { params };
+  }
+
+}

app/routes/signup/account.js

@@ -0,0 +1,23 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
+
+export default class SignupAccountRoute extends Route {
+  @service kredits;
+
+  async setupController (controller) {
+    if (!window.ethereum) return;
+
+    if (this.kredits.hasAccounts) {
+      controller.accountAddress = this.kredits.currentUserAccounts.firstObject;
+    } else {
+      return this.kredits.connectWallet();
+    }
+  }
+
+  redirect () {
+    if (isEmpty(this.kredits.githubAccessToken)) {
+      this.transitionTo('signup.index');
+    }
+  }
+}

app/routes/signup/eth-account.js

@@ -1,17 +0,0 @@
-import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
-import { isEmpty } from '@ember/utils';
-
-export default Route.extend({
-
-  kredits: service(),
-
-  redirect () {
-    this._super(...arguments);
-
-    if (isEmpty(this.kredits.githubAccessToken)) {
-      this.transitionTo('signup.index');
-    }
-  }
-
-});

app/routes/signup/github.js

@@ -22,7 +22,7 @@ export default Route.extend({
 
     this.kredits.set('githubAccessToken', accessToken);
 
-    this.transitionTo('signup.eth-account');
+    this.transitionTo('signup.account');
   }
 
 });

app/services/browser-cache.js

@@ -0,0 +1,37 @@
+import Service from '@ember/service';
+import * as localforage from 'localforage';
+import config from 'kredits-web/config/environment';
+
+function createStore(name) {
+  let networkName;
+  if (config.web3NetworkName) {
+    networkName = config.web3NetworkName.toLocaleLowerCase().replace(' ', '-');
+  } else {
+    networkName = 'custom';
+  }
+  return localforage.createInstance({ name: `kredits:${networkName}:${name}` });
+}
+
+export default class BrowserCacheService extends Service {
+
+  constructor() {
+    super(...arguments);
+    this.stores = {
+      contributors:  createStore('contributors'),
+      contributions: createStore('contributions'),
+      reimbursements: createStore('reimbursements')
+    }
+  }
+
+  get contributors() {
+    return this.stores.contributors;
+  }
+
+  get contributions() {
+    return this.stores.contributions;
+  }
+
+  get reimbursements() {
+    return this.stores.reimbursements;
+  }
+}

app/services/community-funds.js

@@ -0,0 +1,53 @@
+import { A } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+import { tracked } from '@glimmer/tracking';
+import Service, { inject as service } from '@ember/service';
+import config from 'kredits-web/config/environment';
+
+export default class CommunityFundsService extends Service {
+  @service exchangeRates;
+
+  @tracked balancesLoaded = false;
+  @tracked balances = A([]);
+
+  @task
+  *fetchBalances () {
+    const promises = [];
+    const balances = config.communityFundsAPI.balances;
+
+    for (const item of Object.keys(balances)) {
+      const c = balances[item];
+      promises.push(
+        this.fetchBalance(c.url)
+            .then(res => { return this.processBalance(res, c) })
+      )
+    }
+
+    yield Promise.all(promises)
+      .then(() => {
+        this.balancesLoaded = true;
+      })
+      .catch(err => {
+        console.log(`[community-funds] Fetching balances failed:`);
+        console.error(err);
+      });
+  }
+
+  async fetchBalance(url) {
+    return fetch(url).then(res => res.json());
+  }
+
+  async processBalance (res, config) {
+    await this.exchangeRates.fetchRates();
+
+    // Format and round the approximate USD value
+    const lang = navigator.language || navigator.userLanguage;
+    const balanceUSD = (res.confirmed_balance / 100000000) * this.exchangeRates.btcusd;
+    res.balanceUSD = Math.round(balanceUSD).toLocaleString(lang);
+
+    this.balances.pushObject({
+      ...res,
+      ...{ token: { icon: `/img/${config.icon}`, symbol: config.symbol, description: config.description } }
+    });
+  }
+}

app/services/exchange-rates.js

@@ -0,0 +1,35 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import config from 'kredits-web/config/environment';
+
+// Need to go through proxy for CORS headers
+const bitstampBaseUrl = `${config.corsProxy}https://www.bitstamp.net/api/v2`;
+
+async function fetchFromBitstamp(currencyPair) {
+  try {
+    const res = await fetch(`${bitstampBaseUrl}/ticker/${currencyPair}/`).then(r => r.json());
+    return parseFloat(res.vwap); // Last 24 hours volume weighted average price
+  } catch(e) {
+    console.error('Could not fetch exchange rate from Bitstamp:', e);
+    return 0;
+  }
+}
+
+export default class ExchangeRatesService extends Service {
+  @tracked btceur = 0;
+  @tracked btcusd = 0;
+
+  get exchangeRatesLoaded () {
+    return (this.btceur !== 0) && (this.btcusd !== 0);
+  }
+
+  async fetchRates (source='bitstamp') {
+    if (this.exchangeRatesLoaded) return;
+
+    switch(source) {
+      case 'bitstamp':
+        this.btceur = await fetchFromBitstamp('btceur');
+        this.btcusd = await fetchFromBitstamp('btcusd');
+    }
+  }
+}

app/services/kredits.js

@@ -1,56 +1,198 @@
 import ethers from 'ethers';
-import Kredits from 'kredits-contracts';
-import RSVP from 'rsvp';
+import Kredits from '@kredits/contracts';
 
 import Service from '@ember/service';
 import EmberObject from '@ember/object';
 import { computed } from '@ember/object';
-import { alias, notEmpty } from '@ember/object/computed';
-import { isEmpty, isPresent } from '@ember/utils';
+import { alias, filterBy, notEmpty, sort } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
+import { inject as service } from '@ember/service';
+
+import { task, taskGroup } from 'ember-concurrency';
 
 import groupBy from 'kredits-web/utils/group-by';
+import processContributorData from 'kredits-web/utils/process-contributor-data';
+import processContributionData from 'kredits-web/utils/process-contribution-data';
+import processReimbursementData from 'kredits-web/utils/process-reimbursement-data';
 import formatKredits from 'kredits-web/utils/format-kredits';
+import switchNetwork from 'kredits-web/utils/switch-network';
 
 import config from 'kredits-web/config/environment';
-import Contributor from 'kredits-web/models/contributor'
-import Contribution from 'kredits-web/models/contribution'
+import Contributor from 'kredits-web/models/contributor';
+import Contribution from 'kredits-web/models/contribution';
+import Reimbursement from 'kredits-web/models/reimbursement';
+// Lets us access the model classes dynamically
+const models = { Contributor, Contribution, Reimbursement };
 
 export default Service.extend({
 
+  browserCache: service(),
+
   currentBlock: null,
-  currentUserAccounts: null, // default to not having an account. this is the wen web3 is loaded.
+  currentUserAccounts: null, // default to not having an account. this is the when web3 is loaded.
   currentUser: null,
   contributors: null,
   contributions: null,
+  reimbursements: null,
   githubAccessToken: null,
 
   currentUserIsContributor: notEmpty('currentUser'),
   currentUserIsCore: alias('currentUser.isCore'),
   hasAccounts: notEmpty('currentUserAccounts'),
 
-  contributionsUnconfirmed: computed('contributions.[]', 'currentBlock', function() {
-    return this.contributions.filter(contribution => {
-      return contribution.confirmedAt > this.currentBlock;
+  contributorsMined: filterBy('contributors', 'id'),
+  contributorsSorting: Object.freeze(['name:asc']),
+  contributorsSorted: sort('contributorsMined', 'contributorsSorting'),
+
+  // When data was loaded from cache, we need to fetch updates from the network
+  contributorsNeedSync: false,
+  contributionsNeedSync: false,
+  reimbursementsNeedSync: false,
+
+  missingHistoricContributionsCount: 0,
+
+  init () {
+    this._super(...arguments);
+    this.set('contributors', []);
+    this.set('contributions', []);
+    this.set('reimbursements', []);
+
+    if (window.ethereum) {
+      window.ethereum.on('chainChanged', this.handleUserChainChanged);
+      window.ethereum.on('accountsChanged', this.handleAccountsChanged);
+    }
+  },
+
+  handleUserChainChanged (chainId) {
+    console.log('User-provided chain ID changed to', chainId);
+    window.location.reload();
+  },
+
+  handleAccountsChanged (accounts) {
+    console.log('User-provided accounts changed to', accounts);
+    window.location.reload();
+  },
+
+  // This is called in the application route's beforeModel(). So it is
+  // initialized before everything else, and we can rely on the ethProvider and
+  // the potential currentUserAccounts to be available
+  getEthProvider () {
+    let ethProvider;
+
+    return new Promise(resolve => {
+      function instantiateWithoutWallet () {
+        console.debug('[kredits] Creating new instance from npm module class');
+        console.debug(`[kredits] providerURL: ${config.web3ProviderUrl}`);
+        ethProvider = new ethers.providers.JsonRpcProvider(config.web3ProviderUrl);
+        resolve({
+          ethProvider: ethProvider,
+          ethSigner: null
+        });
+      }
+
+      async function instantiateWithWallet (web3Provider, context) {
+        console.debug('[kredits] Using user-provided Web3 instance, e.g. from Metamask');
+        ethProvider       = new ethers.providers.Web3Provider(web3Provider);
+        const network     = await ethProvider.getNetwork();
+        const accounts    = await ethProvider.listAccounts();
+        const chainId     = config.web3ChainId;
+
+        if (isEmpty(accounts)) return instantiateWithoutWallet();
+
+        if (network.chainId !== chainId) {
+          return switchNetwork();
+        } else {
+          context.set('currentUserAccounts', accounts);
+          const ethSigner = accounts.length === 0 ? null : ethProvider.getSigner();
+          resolve({
+            ethProvider,
+            ethSigner
+          });
+        }
+      }
+
+      if (window.ethereum) {
+        instantiateWithWallet(window.ethereum, this);
+      } else {
+        instantiateWithoutWallet();
+      }
     });
+  },
+
+  async connectWallet () {
+    const provider    = new ethers.providers.Web3Provider(window.ethereum);
+    const network     = await provider.getNetwork();
+    const chainId     = config.web3ChainId;
+    const chainIdHex  = `0x${Number(chainId).toString(16)}`;
+
+    try {
+      await window.ethereum.request({ method: 'eth_requestAccounts' });
+      if (network.chainId !== chainId) await switchNetwork(chainIdHex);
+    } catch (err) {
+      console.log('Connecting wallet failed:', err);
+      return false;
+    }
+  },
+
+  async setup () {
+    const kredits = await this.getEthProvider().then(providerAndSigner => {
+      return new Kredits(providerAndSigner.ethProvider, providerAndSigner.ethSigner, {
+        ipfsConfig: config.ipfs
+      });
+    });
+
+    await kredits.init();
+    this.set('kredits', kredits);
+    this.set('currentBlock', await this.kredits.provider.getBlockNumber());
+    this.kredits.provider.on('block', blockNumber => {
+      console.debug('[kredits] New block mined:', blockNumber);
+      this.set('currentBlock', blockNumber)
+    });
+
+    if (this.currentUserAccounts && this.currentUserAccounts.length > 0) {
+      this.getCurrentUser.then(contributorData => {
+        this.set('currentUser', contributorData);
+      });
+    }
+
+    return kredits;
+  },
+
+  getCurrentUser: computed('kredits.provider', 'currentUserAccounts.[]', function() {
+    if (isEmpty(this.currentUserAccounts)) {
+      return Promise.resolve();
+    }
+    return this.kredits.Contributor
+      .functions.getContributorIdByAddress(this.currentUserAccounts.firstObject)
+      .then((id) => {
+        // check if the user is a contributor or not
+        if (id === 0) {
+          return Promise.resolve();
+        } else {
+          return this.kredits.Contributor.getById(id);
+        }
+      });
   }),
 
-  contributionsConfirmed: computed('contributions.[]', 'currentBlock', function() {
-    return this.contributions
-               .filterBy('vetoed', false)
-               .filter(contribution => {
-                 return contribution.confirmedAt <= this.currentBlock;
-               });
+  totalSupply: computed(function() {
+    return this.kredits.Token.functions.totalSupply().then(total => {
+      return formatKredits(total);
+    })
+  }),
+
+  totalKreditsEarned: computed(function() {
+    return this.kredits.Contribution.functions.totalKreditsEarned(true);
   }),
 
   kreditsByContributor: computed('contributionsUnconfirmed.@each.vetoed', 'contributors.[]', function() {
     const contributionsUnconfirmed = this.contributionsUnconfirmed.filterBy('vetoed', false);
     const contributionsGrouped = groupBy(contributionsUnconfirmed, 'contributorId');
-    const contributorsWithUnconfirmed = contributionsGrouped.map(c => c.value.toString());
+    const contributorsWithUnconfirmed = contributionsGrouped.map(c => c.value);
     const contributorsWithOnlyConfirmed = this.contributors.reject(c => contributorsWithUnconfirmed.includes(c.id))
 
     const kreditsByContributor = contributionsGrouped.map(c => {
       const amountUnconfirmed = c.items.mapBy('amount').reduce((a, b) => a + b);
-      const contributor = this.contributors.findBy('id', c.value.toString());
+      const contributor = this.contributors.findBy('id', c.value);
 
       return EmberObject.create({
         contributor: contributor,
@@ -72,109 +214,58 @@ export default Service.extend({
     return kreditsByContributor;
   }),
 
-  init () {
-    this._super(...arguments);
-    this.set('contributors', []);
-    this.set('contributions', []);
-  },
-
-  // This is called in the application route's beforeModel(). So it is
-  // initialized before everything else, and we can rely on the ethProvider and
-  // the potential currentUserAccounts to be available
-  getEthProvider () {
-    let ethProvider;
-
-    return new RSVP.Promise(async (resolve) => {
-      function instantiateWithoutAccount () {
-        console.debug('[kredits] Creating new instance from npm module class');
-        console.debug(`[kredits] providerURL: ${config.web3ProviderUrl}`);
-        ethProvider = new ethers.providers.JsonRpcProvider(config.web3ProviderUrl);
-        resolve({
-          ethProvider: ethProvider,
-          ethSigner: null
-        });
-      }
-
-      async function instantiateWithAccount (web3Provider, context) {
-        console.debug('[kredits] Using user-provided instance, e.g. from Mist browser or Metamask');
-        ethProvider = new ethers.providers.Web3Provider(web3Provider);
-
-        const network = await ethProvider.getNetwork();
-        if (isPresent(config.web3RequiredNetwork) &&
-            network.name !== config.web3RequiredNetwork) {
-          window.alert(`Please switch your Ethereum wallet to the "${config.web3RequiredNetwork}" network before connecting your account.`);
-          return instantiateWithoutAccount();
-        }
-
-        ethProvider.listAccounts().then(accounts => {
-          context.set('currentUserAccounts', accounts);
-          const ethSigner = accounts.length === 0 ? null : ethProvider.getSigner();
-          resolve({
-            ethProvider,
-            ethSigner
-          });
-        });
-      }
-
-      if (window.ethereum) {
-        if (window.ethereum.isConnected()) {
-          instantiateWithAccount(window.ethereum, this);
-        } else {
-          instantiateWithoutAccount();
-        }
-      }
-      // Legacy dapp browsers...
-      else if (window.web3) {
-        instantiateWithAccount(window.web3.currentProvider, this);
-      }
-      // Non-dapp browsers...
-      else {
-        instantiateWithoutAccount();
-      }
-    });
-  },
-
-  setup () {
-    return this.getEthProvider().then((providerAndSigner) => {
-      let kredits = new Kredits(providerAndSigner.ethProvider, providerAndSigner.ethSigner, {
-        addresses: { Kernel: config.kreditsKernelAddress },
-        apm: config.kreditsApmDomain,
-        ipfsConfig: config.ipfs
-      });
-      return kredits
-        .init()
-        .then(async (kredits) => {
-          this.set('kredits', kredits);
-          this.set('currentBlock', await kredits.provider.getBlockNumber());
-
-          if (this.currentUserAccounts && this.currentUserAccounts.length > 0) {
-            this.getCurrentUser.then((contributorData) => {
-              this.set('currentUser', contributorData);
-            });
-          }
-
-          return kredits;
-        });
-    });
-  },
-
-  totalSupply: computed(function() {
-    return this.kredits.Token.functions.totalSupply().then(total => {
-      return formatKredits(total);
-    })
+  contributionsUnconfirmed: computed('contributions.[]', 'currentBlock', function() {
+    return this.contributions
+               .filter(c => c.confirmedAt > this.currentBlock);
   }),
 
-  totalKreditsEarned: computed(function() {
-    return this.kredits.Contribution.functions.totalKreditsEarned(true)
-      .then(total => total.toNumber());
+  contributionsConfirmed: computed('contributions.[]', 'currentBlock', function() {
+    return this.contributions
+               .filterBy('vetoed', false)
+               .filter(c => c.confirmedAt <= this.currentBlock);
   }),
 
+  reimbursementsUnconfirmed: computed('reimbursements.[]', 'currentBlock', function() {
+    return this.reimbursements
+               .filter(r => r.confirmedAt > this.currentBlock);
+  }),
 
-  loadInitialData () {
-    return this.getContributors()
-               .then(contributors => this.contributors.pushObjects(contributors))
-               .then(() => this.getContributions())
-               .then(contributions => this.contributions.pushObjects(contributions))
+  reimbursementsConfirmed: computed('reimbursements.[]', 'currentBlock', function() {
+    return this.reimbursements
+               .filterBy('vetoed', false)
+               .filter(r => r.confirmedAt <= this.currentBlock);
+  }),
+
+  reimbursementsPending: computed('reimbursements.[]', 'pendingTx', function() {
+    return this.reimbursements.filter(r => !r.id);
+  }),
+
+  async loadInitialData () {
+    const numCachedContributors = await this.browserCache.contributors.length();
+    if (numCachedContributors > 0) {
+      await this.loadObjectsFromCache('Contributor');
+      this.set('contributorsNeedSync', true);
+    } else {
+      await this.fetchContributors();
+    }
+
+    const numCachedContributions = await this.browserCache.contributions.length();
+    if (numCachedContributions > 0) {
+      await this.loadObjectsFromCache('Contribution');
+      this.set('contributionsNeedSync', true);
+    } else {
+      await this.fetchContributions({ page: { size: 40 } });
+    }
+
+    await this.updateMissingHistoricContributionsCount();
+
+    return Promise.resolve();
+  },
+
+  async updateMissingHistoricContributionsCount () {
+    const contributionsCount = await this.kredits.Contribution.count;
+    this.set('missingHistoricContributionsCount', contributionsCount - this.contributions.length);
+    console.debug(`Missing ${this.missingHistoricContributionsCount} historic contributions (out of ${contributionsCount} overall)`)
   },
 
   addContributor (attributes) {
@@ -205,40 +296,182 @@ export default Service.extend({
       });
   },
 
-  getContributors () {
+  async fetchContributor (id) {
+    console.debug(`[kredits] Fetching contributor from the network`);
+    return this.kredits.Contributor.getById(id)
+      .then(data => this.loadContributorFromData(data))
+  },
+
+  fetchContributors () {
+    console.debug(`[kredits] Fetching all contributors from the network`);
     return this.kredits.Contributor.all()
       .then(contributors => {
-        return contributors.map(contributor => {
-          return Contributor.create(contributor);
+        return contributors.forEach(data => {
+          this.loadContributorFromData(data);
+          return;
         });
+      })
+      .then(() => {
+        return this.cacheLoadedContributors();
       });
   },
 
-  addContribution (attributes) {
-    console.debug('[kredits] add contribution', attributes);
+  loadContributorFromData (data) {
+    const contributor = Contributor.create(processContributorData(data));
+    const loadedContributor = this.contributors.findBy('id', contributor.id);
+    if (loadedContributor) { this.contributors.removeObject(loadedContributor); }
+    this.contributors.pushObject(contributor);
+    return contributor;
+  },
 
-    return this.kredits.Contribution.addContribution(attributes, { gasLimit: 300000 })
+  async cacheLoadedContributors () {
+    for (const c of this.contributors) {
+      await this.browserCache.contributors.setItem(c.id.toString(), c.serialize());
+    }
+    console.debug(`[kredits] Cached ${this.contributors.length} contributors in browser storage`);
+    return Promise.resolve();
+  },
+
+  async loadContributorsFromCache () {
+    return this.browserCache.contributors.iterate((value/*, key , iterationNumber */) => {
+      this.contributors.pushObject(Contributor.create(JSON.parse(value)));
+    }).then((/* result */) => {
+      console.debug(`[kredits] Loaded ${this.contributors.length} contributors from cache`);
+    });
+  },
+
+  syncContributors: task(function * () {
+    yield this.fetchContributors();
+    this.set('contributorsNeedSync', false);
+  }),
+
+  addContribution (attributes) {
+    console.debug('[kredits] Adding contribution', attributes);
+
+    return this.kredits.Contribution.add(attributes, { gasLimit: 300000 })
       .then(data => {
-        console.debug('[kredits] add contribution response', data);
+        console.debug('[kredits] Contribution.add 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);
+        contribution.set('confirmedAtBlock', this.currentBlock + 40320);
         this.contributions.pushObject(contribution);
         return contribution;
       });
   },
 
-  getContributions () {
-    return this.kredits.Contribution.all({page: {size: 200}})
+  fetchContributions (options = { page: { size: 200 } }) {
+    console.debug(`[kredits] Fetching contributions from the network`);
+    return this.kredits.Contribution.all(options)
       .then(contributions => {
-        return contributions.map(contribution => {
-          contribution.contributor = this.contributors.findBy('id', contribution.contributorId.toString());
-          return Contribution.create(contribution);
+        return contributions.map(data => {
+          const contribution = this.loadContributionFromData(data);
+          return contribution;
+        });
+      })
+      .then(contributions => {
+        const cacheWrites = contributions.map(c => {
+          return this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+        });
+        return Promise.all(cacheWrites).then(() => {
+          console.debug(`[kredits] Cached ${contributions.length} contributions in browser storage`);
         });
       });
   },
 
+  loadContributionFromData(data) {
+    const contribution = Contribution.create(processContributionData(data));
+    contribution.set('contributor', this.contributors.findBy('id', data.contributorId));
+    const loadedContribution = this.contributions.findBy('id', contribution.id);
+    if (loadedContribution) { this.contributions.removeObject(loadedContribution); }
+    this.contributions.pushObject(contribution);
+    return contribution;
+  },
+
+  async cacheLoadedContributions () {
+    for (const c of this.contributions) {
+      await this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+    }
+    console.debug(`[kredits] Cached ${this.contributions.length} contributions in browser storage`);
+    return Promise.resolve();
+  },
+
+  async loadContributionsFromCache () {
+    return this.browserCache.contributions.iterate((value/*, key , iterationNumber */) => {
+      this.contributions.pushObject(Contribution.create(JSON.parse(value)));
+    }).then((/* result */) => {
+      console.debug(`[kredits] Loaded ${this.contributions.length} contributions from cache`);
+    });
+  },
+
+  contributionTasks: taskGroup().enqueue(),
+
+  syncContributions: task(function * () {
+    yield this.fetchNewContributions.perform();
+    yield this.syncUnconfirmedContributions.perform();
+    yield this.updateMissingHistoricContributionsCount();
+    this.set('contributionsNeedSync', false);
+  }).group('contributionTasks'),
+
+  fetchNewContributions: task(function * () {
+    const count = yield this.kredits.Contribution.count;
+    const lastKnownContributionId = Math.max.apply(null, this.contributions.mapBy('id'));
+    const toFetch = count - lastKnownContributionId;
+
+    if (toFetch > 0) {
+      console.debug(`[kredits] Fetching ${toFetch} new contributions`);
+      for (let id = lastKnownContributionId; id <= count; id++) {
+        const data = yield this.kredits.Contribution.getById(id);
+        const c = this.loadContributionFromData(data);
+        yield this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+      }
+    } else {
+      console.debug(`[kredits] No new contributions to fetch`);
+    }
+  }),
+
+  fetchMissingContributions: task(function * () {
+    const count = yield this.kredits.Contribution.count;
+    const allIds = [...Array(count+1).keys()];
+    allIds.shift(); // remove first item, which is 0
+    const loadedContributions = new Set(this.contributions.mapBy('id'));
+    const toFetch = allIds.filter(id => !loadedContributions.has(id));
+    if (toFetch.length === 0) {
+      console.debug(`[kredits] No contributions left to fetch`);
+      return;
+    }
+    console.debug(`[kredits] Fetching ${toFetch.length} past contributions`);
+    let countFetched = 0;
+
+    for (let id = count; id > 0; id--) {
+      if (loadedContributions.has(id)) {
+        continue;
+      } else {
+        const data = yield this.kredits.Contribution.getById(id);
+        const c = this.loadContributionFromData(data);
+        yield this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+        countFetched++;
+        if (countFetched % 20 === 0) {
+          console.debug(`[kredits] Fetched ${countFetched} more contributions`);
+        }
+      }
+    }
+    console.debug(`[kredits] Cached ${countFetched} past contributions`);
+  }).group('contributionTasks'),
+
+  syncUnconfirmedContributions: task(function * () {
+    if (this.contributionsUnconfirmed.length > 0) {
+      console.debug(`[kredits] Syncing unconfirmed contributions`);
+      for (const c of this.contributionsUnconfirmed) {
+        const data = yield this.kredits.Contribution.getById(c.id);
+        const contribution = this.loadContributionFromData(data);
+        yield this.browserCache.contributions.setItem(c.id.toString(), contribution.serialize());
+      }
+    } else {
+      console.debug(`[kredits] No unconfirmed contributions to sync`);
+    }
+  }),
+
   veto (contributionId) {
     console.debug('[kredits] veto against', contributionId);
     const contribution = this.contributions.findBy('id', contributionId);
@@ -251,23 +484,197 @@ export default Service.extend({
       });
   },
 
-  getCurrentUser: computed('kredits.provider', 'currentUserAccounts.[]', function() {
-    if (isEmpty(this.currentUserAccounts)) {
-      return RSVP.resolve();
-    }
-    return this.kredits.Contributor
-      .functions.getContributorIdByAddress(this.currentUserAccounts.firstObject)
-      .then((id) => {
-        // check if the user is a contributor or not
-        if (id === 0) {
-          return RSVP.resolve();
-        } else {
-          return this.kredits.Contributor.getById(id);
-        }
+  //
+  // Generic data handling (for objects that can be vetoed)
+  //
+
+  fetchObjects(objectClass, options = { page: { size: 200 } }) {
+    const objectClassLowerCase = objectClass.toLowerCase();
+    console.debug(`[kredits] Fetching ${objectClassLowerCase}s from the network`);
+    return this.kredits[objectClass].all(options)
+      .then(objects => {
+        return objects.map(data => {
+          const classInstance = this[`load${objectClass}FromData`](data);
+          return classInstance;
+        });
+      })
+      .then(objects => {
+        const cacheWrites = objects.map(o => {
+          return this.browserCache[objectClassLowerCase+'s']
+                     .setItem(o.id.toString(), o.serialize());
+        });
+        return Promise.all(cacheWrites).then(() => {
+          console.debug(`[kredits] Cached ${objects.length} ${objectClassLowerCase+'s'} in browser storage`);
+        });
       });
+  },
+
+  removeObjectFromCollectionIfLoaded (collection, objectId) {
+    const loadedObj = this[collection].findBy('id', objectId);
+    if (loadedObj) { this[collection].removeObject(loadedObj); }
+  },
+
+  async cacheLoadedObjects (collection) {
+    for (const o of this[collection]) {
+      await this.browserCache[collection].setItem(o.id, o.serialize());
+    }
+    console.debug(`[kredits] Cached ${this[collection].length} ${collection} in browser storage`);
+  },
+
+  async loadObjectsFromCache (objectClass) {
+    const collection = objectClass.toLowerCase()+'s';
+    return this.browserCache[collection].iterate((value/*, key , iterationNumber */) => {
+      const obj = models[objectClass].create(JSON.parse(value));
+      this.removeObjectFromCollectionIfLoaded(collection, obj.id)
+      this[collection].pushObject(obj);
+    }).then((/* result */) => {
+      console.debug(`[kredits] Loaded ${this[collection].length} ${collection} from cache`);
+    });
+  },
+
+  syncTaskGroup: taskGroup().enqueue(),
+
+  fetchNewObjects: task(function * (objectClass) {
+    const collection = objectClass.toLowerCase()+'s';
+    const count = yield this.kredits[objectClass].functions[`${collection}Count`]();
+    const lastKnownObjectId = Math.max.apply(null, this[collection].mapBy('id'));
+    const toFetch = count - lastKnownObjectId;
+
+    if (toFetch > 0) {
+      console.debug(`[kredits] Fetching ${toFetch} new ${collection}`);
+      for (let id = lastKnownObjectId; id <= count; id++) {
+        const data = yield this.kredits[objectClass].getById(id);
+        const o = this[`load${objectClass}FromData`](data);
+        yield this.browserCache[collection].setItem(o.id.toString(), o.serialize());
+      }
+    } else {
+      console.debug(`[kredits] No new ${collection} to fetch`);
+    }
   }),
 
+  fetchMissingObjects: task(function * (objectClass) {
+    const collection = objectClass.toLowerCase()+'s';
+    const count = yield this.kredits[objectClass].functions[`${collection}Count`]();
+    const allIds = [...Array(count+1).keys()];
+    allIds.shift(); // remove first item, which is 0
+    const loadedObjects = new Set(this[collection].mapBy('id'));
+    const toFetch = allIds.filter(id => !loadedObjects.has(id));
+    if (toFetch.length === 0) {
+      console.debug(`[kredits] No ${collection} left to fetch`);
+      return;
+    }
+    console.debug(`[kredits] Fetching ${toFetch.length} past ${collection}`);
+    let countFetched = 0;
+
+    for (let id = count; id > 0; id--) {
+      if (loadedObjects.has(id)) {
+        continue;
+      } else {
+        const data = yield this.kredits[objectClass].getById(id);
+        const o = this[`load${objectClass}FromData`](data);
+        yield this.browserCache[collection].setItem(o.id.toString(), o.serialize());
+        countFetched++;
+        if (countFetched % 20 === 0) {
+          console.debug(`[kredits] Fetched ${countFetched} more ${collection}`);
+        }
+      }
+    }
+    console.debug(`[kredits] Cached ${countFetched} past ${collection}`);
+  }),
+
+  syncUnconfirmedObjects: task(function * (objectClass) {
+    const collection = objectClass.toLowerCase()+'s';
+    if (this.get(`${collection}Unconfirmed`).length > 0) {
+      console.debug(`[kredits] Syncing unconfirmed ${collection}`);
+      for (const o of this[`${collection}Unconfirmed`]) {
+        if (isEmpty(o.id)) return;
+        const data = yield this.kredits[objectClass].getById(o.id);
+        const object = this[`load${objectClass}FromData`](data);
+        yield this.browserCache[collection]
+                  .setItem(o.id.toString(), object.serialize());
+      }
+    } else {
+      console.debug(`[kredits] No unconfirmed ${collection} to sync`);
+    }
+  }),
+
+  vetoAgainstObject (objectClass, objectId) {
+    console.debug(`[kredits] veto against ${objectClass.toLowerCase()}`, objectId);
+    const collection = objectClass.toLowerCase()+'s';
+    const object = this[collection].findBy('id', objectId);
+
+    return this.kredits[objectClass].functions.veto(objectId, { gasLimit: 300000 })
+      .then(data => {
+        console.debug('[kredits] veto response', data);
+        object.set('pendingTx', data);
+        return data;
+      });
+  },
+
+  //
+  // Reimbursements
+  //
+
+  loadReimbursementFromData(data) {
+    const obj = Reimbursement.create(processReimbursementData(data));
+    obj.set('contributor', this.contributors.findBy('id', data.recipientId));
+    this.removeObjectFromCollectionIfLoaded('reimbursements', obj.id);
+    this.reimbursements.pushObject(obj);
+    return obj;
+  },
+
+  addReimbursement (attributes) {
+    console.debug('[kredits] add reimbursement', attributes);
+
+    return this.kredits.Reimbursement.add(attributes, { gasLimit: 300000 })
+      .then(data => {
+        console.debug('[kredits] add reimbursement response', data);
+        const reimbursement = Reimbursement.create(attributes);
+        reimbursement.setProperties({
+          contributor: this.contributors.findBy('id', attributes.recipientId),
+          pendingTx: data,
+          confirmedAt: this.currentBlock + 40320
+        });
+        this.reimbursements.pushObject(reimbursement);
+
+        // Listen to tx mining/execution status
+        data.wait()
+            .then(d => console.debug('[kredits] tx successful', d))
+            .catch(e => {
+              window.alert('The transaction failed to execute. Please check the browser console.');
+              console.log('[kredits] tx error', e);
+            });
+
+        return reimbursement;
+      });
+  },
+
+  syncReimbursements: task(function * () {
+    yield this.fetchNewObjects.perform('Reimbursement');
+    yield this.syncUnconfirmedObjects.perform('Reimbursement');
+    this.set('reimbursementsNeedSync', false);
+  }).group('syncTaskGroup'),
+
+  fetchMissingReimbursements: task(function * () {
+    yield this.fetchMissingObjects.perform('Reimbursement');
+  }).group('syncTaskGroup'),
+
+  vetoReimbursement (id) {
+    console.debug('[kredits] veto against reimbursement', id);
+    const reimbursement = this.reimbursements.findBy('id', id);
+
+    return this.kredits.Reimbursement.functions.veto(id, { gasLimit: 300000 })
+      .then(data => {
+        console.debug('[kredits] veto response', data);
+        reimbursement.set('pendingTx', data);
+        return data;
+      });
+  },
+
+  //
   // Contract events
+  //
+
   addContractEventHandlers () {
     this.kredits.Contributor
       .on('ContributorProfileUpdated', this.handleContributorChange.bind(this))
@@ -278,6 +685,10 @@ export default Service.extend({
       .on('ContributionAdded', this.handleContributionAdded.bind(this))
       .on('ContributionVetoed', this.handleContributionVetoed.bind(this))
 
+    this.kredits.Reimbursement
+      .on('ReimbursementAdded', this.handleReimbursementAdded.bind(this))
+      .on('ReimbursementVetoed', this.handleReimbursementVetoed.bind(this))
+
     this.kredits.Token
       .on('Transfer', this.handleTransfer.bind(this));
   },
@@ -288,13 +699,15 @@ export default Service.extend({
     const contributorData = await this.kredits.Contributor.getById(contributorId);
     const newContributor = Contributor.create(contributorData);
 
-    const oldContributor = this.contributors.findBy('id', contributorId.toString());
+    // TODO check for actual differences in the contributor data first
+
+    const oldContributor = this.contributors.findBy('id', contributorId);
     if (oldContributor) {
-      console.debug('[kredits] old contributor', oldContributor);
+      // console.debug('[kredits] cached contributor', oldContributor);
       this.contributors.removeObject(oldContributor);
     }
 
-    console.debug('[kredits] new contributor', newContributor);
+    // console.debug('[kredits] incoming contributor data', newContributor);
     this.contributors.pushObject(newContributor);
   },
 
@@ -303,27 +716,57 @@ export default Service.extend({
 
     const pendingContribution = this.contributions.find(c => {
       return (c.id === null) &&
-             (c.contributorId.toString() === contributorId.toString()) &&
+             (c.contributorId === contributorId) &&
              (c.amount.toString() === amount.toString());
     });
 
     if (pendingContribution) {
-      const attributes = await this.kredits.Contribution.getById(id);
-      attributes.contributor = this.contributors.findBy('id', attributes.contributorId.toString());
-      const newContribution = Contribution.create(attributes);
-      this.contributions.addObject(newContribution);
       this.contributions.removeObject(pendingContribution);
     }
+
+    const data = await this.kredits.Contribution.getById(id);
+    const c = this.loadContributionFromData(data);
+    await this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+  },
+
+  async handleContributionVetoed (contributionId) {
+    console.debug('[kredits] ContributionVetoed event received for #', contributionId);
+    const c = this.contributions.findBy('id', contributionId);
+
+    if (c) {
+      console.debug('[kredits] Updating contribution', c);
+      c.set('vetoed', true);
+      c.set('pendingTx', null);
+      await this.browserCache.contributions.setItem(c.id.toString(), c.serialize());
+    }
   },
 
-  handleContributionVetoed (contributionId) {
-    console.debug('[kredits] ContributionVetoed event received for ', contributionId);
-    const contribution = this.contributions.findBy('id', contributionId);
-    console.debug('[kredits] contribution', contribution);
+  async handleReimbursementAdded (id, addedByAccount, amount) {
+    console.debug('[kredits] ReimbursementAdded event received', { id, addedByAccount, amount });
 
-    if (contribution) {
-      contribution.set('vetoed', true);
-      contribution.set('pendingTx', null);
+    const pendingReimbursement = this.reimbursementsPending.find(r => {
+      return r.amount.toString() === amount.toString();
+    });
+
+    if (pendingReimbursement) {
+      console.debug('[kredits] Found a pending reimbursement matching the event. Replacing it with the final record...');
+      this.reimbursements.removeObject(pendingReimbursement);
+    }
+
+    const data = await this.kredits.Reimbursement.getById(id);
+    const r = this.loadReimbursementFromData(data);
+    this.browserCache.reimbursements.setItem(r.id.toString(), r.serialize());
+  },
+
+  async handleReimbursementVetoed (id) {
+    console.debug(`[kredits] ReimbursementVetoed received for #${id}`);
+    const r = this.reimbursements.findBy('id', id);
+    console.debug('[kredits] reimbursement', r);
+
+    if (r) {
+      r.set('vetoed', true);
+      r.set('pendingTx', null);
+      this.browserCache.reimbursements.setItem(r.id.toString(), r.serialize());
     }
   },
 
@@ -337,5 +780,5 @@ export default Service.extend({
     this.contributors
         .findBy('address', to)
         .incrementProperty('balance', value);
-  },
+  }
 });

app/styles/_buttons.scss

@@ -20,7 +20,7 @@ button, input[type=submit], .button {
     background-color: rgba(22, 21, 40, 0.8);
   }
 
-  &:active, &.active {
+  &:focus, &:active, &.active {
     border-color: $primary-color;
   }
 
@@ -31,32 +31,53 @@ button, input[type=submit], .button {
   &.small {
     font-size: 0.86rem;
     padding: 0.2rem 0.8rem;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.4rem;
+    }
   }
 
   &.danger:not(:disabled) {
     color: $red;
     background-color: rgba(40, 21, 21, 0.6);
     border-color: rgba(40, 21, 21, 1);
-
-    &:hover {
-      background-color: rgba(40, 21, 21, 0.8);
-    }
-    &:active, &.active {
-      border-color: $red;
-    }
+    &:hover { background-color: rgba(40, 21, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $red; }
   }
 
   &.green:not(:disabled) {
     color: $green;
     background-color: rgba(21, 40, 21, 0.6);
     border-color: rgba(21, 40, 21, 1);
+    &:hover { background-color: rgba(21, 40, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $green; }
+  }
 
-    &:hover {
-      background-color: rgba(21, 40, 21, 0.8);
-    }
-    &:active, &.active {
-      border-color: $green;
-    }
+  &.pink:not(:disabled) {
+    color: $pink;
+    background-color: rgba(40, 21, 40, 0.6);
+    border-color: rgba(40, 21, 40, 1);
+    &:hover { background-color: rgba(40, 21, 40, 0.8); }
+    &:focus, &:active, &.active { border-color: $pink; }
+  }
+
+  &.purple:not(:disabled) {
+    color: $purple;
+    background-color: rgba(24, 21, 40, 0.6);
+    border-color: rgba(24, 21, 40, 1);
+    &:hover { background-color: rgba(24, 21, 40, 0.8); }
+    &:focus, &:active, &.active { border-color: $purple; }
+  }
+
+  &.yellow:not(:disabled) {
+    color: $yellow;
+    background-color: rgba(40, 40, 21, 0.6);
+    border-color: rgba(40, 40, 21, 1);
+    &:hover { background-color: rgba(40, 40, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $yellow; }
   }
 
   &.icon {

app/styles/_colors.scss

@@ -8,3 +8,7 @@ $red: #fb6868;
 $primary-color: $blue;
 
 $body-text-color: #fff;
+
+$item-background-color: rgba(255,255,255,0.1);
+$item-highlighted-background-color: rgba(255,255,255,0.2);
+$item-border-color: rgba(255,255,255,0.2);

app/styles/_forms.scss

@@ -1,21 +1,27 @@
 section#add-contributor,
 section#add-contribution,
+section#add-contribution,
+section#add-item, // TODO use for all forms for adding data
 section#signup {
-
   form {
+    h3 {
+      font-size: 1.5rem;
+      font-weight: normal;
+      margin-top: 2em;
+      margin-bottom: 1em;
+    }
 
     p {
-      margin-bottom: 1.5rem;
-
-      &.mg-bottom-md {
-        margin-bottom: 2rem;
-      }
+      font-size: 1.2rem;
 
       &.label {
+        margin-bottom: 1.5rem;
+        font-size: 1rem;
         margin-bottom: .5rem;
       }
 
       &.actions {
+        margin-bottom: 1.5rem;
         padding-top: 1.5rem;
         text-align: center;
         a {
@@ -29,9 +35,34 @@ section#signup {
       display: block;
       margin-bottom: 0.5rem;
       opacity: 0.7;
+
+      > p {
+        margin-bottom: 1.5rem;
+      }
     }
 
-    input[type=text], select {
+    fieldset {
+      border: none;
+
+      &.horizontal {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 2rem;
+
+        &.thirds {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        &.total-amounts {
+          grid-template-columns: 2fr 1fr 1fr;
+        }
+
+        label {
+        }
+      }
+    }
+
+    input[type=text], input[type=url], select {
       width: 100%;
       padding: 1rem;
       border: none;
@@ -39,17 +70,24 @@ section#signup {
       background-color: rgba(22, 21, 40, 0.3);
       color: #fff;
       font-size: 1.2rem;
+      font-weight: normal;
       transition: border-color 0.1s linear;
 
       &:focus, &.valid {
         background-color: rgba(22, 21, 40, 0.6);
       }
-      &:focus {
+      &:focus :not(:invalid) {
         border-color: $blue;
       }
       &::placeholder {
         color: rgba(238, 238, 238, 0.5);
       }
+      &.invalid {
+        border-color: $red;
+      }
+      &:disabled {
+        color: rgba(255, 255, 255, 0.6);
+      }
     }
 
     select {
@@ -109,7 +147,5 @@ section#signup {
         color: #fff;
       }
     }
-
   }
-
 }

app/styles/_item-list.scss

@@ -0,0 +1,45 @@
+ul.item-list {
+  list-style: none;
+
+  > li {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.2rem;
+    background-color: $item-background-color;
+    border-bottom: 1px solid $item-border-color;
+
+    &:first-of-type {
+      border-top: 1px solid $item-border-color;
+    }
+
+    &.selected {
+      background-color: $item-highlighted-background-color;
+    }
+  }
+
+  &.collapsible {
+    > li {
+      border-left: 1px solid transparent;
+
+      &:hover {
+        border-left: 1px solid $blue;
+      }
+    }
+  }
+
+  &.loading {
+    @include loading-border-top;
+
+    > li {
+      &:first-of-type {
+        border-top: none;
+      }
+    }
+  }
+
+  &.spaced {
+    > li {
+      border-top: 1px solid $item-border-color;
+      margin-bottom: 2rem;
+    }
+  }
+}

app/styles/_layout.scss

@@ -1,3 +1,7 @@
+body {
+  margin-bottom: 10rem;
+}
+
 main {
   padding: 1rem 2rem;
 
@@ -14,6 +18,15 @@ main {
       "contributions";
   }
 
+  &#budget, &#about {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "aside"
+      "content";
+  }
+
   &.center-column {
     display: flex;
     flex-direction: column;
@@ -29,6 +42,16 @@ main {
     }
   }
 
+  div#content {
+    section {
+      &:first-of-type {
+        @include media-max(small) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
   section {
     .content {
       a {
@@ -37,9 +60,9 @@ main {
 
       &.text-lg {
         p {
-          font-size: 1.2rem;
-          margin-bottom: 1em;
-          line-height: 1.5em;
+          font-size: 1.35rem;
+          margin-bottom: 2rem;
+          line-height: 150%;
         }
       }
 
@@ -48,50 +71,29 @@ main {
       }
 
       p {
-        &.mg-bottom-md {
-          margin-bottom: 2rem;
-        }
-
         &.actions {
           text-align: center;
           padding-top: 2rem;
         }
       }
     }
-  }
-}
 
-#intro {
-  padding: 2rem;
-  background-color: rgba(0,0,0,.2);
-  font-size: 1.6rem;
+    &.text {
+      h2 {
+        margin: 4rem 0 2rem 0;
 
-  @include media-max(small) {
-    padding: 2rem 1rem;
-    font-size: 1.4rem;
-  }
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
 
-  h2 {
-    font-size: inherit;
-    margin-bottom: 1em;
-  }
-
-  p {
-    margin-bottom: 1em;
-    line-height: 1.5em;
-    font-size: 1.2rem;
-
-    &:last-child {
-      margin-bottom: 0;
+      p {
+        font-size: 1.35rem;
+        margin-bottom: 2rem;
+        line-height: 150%;
+      }
     }
-  }
 
-  a {
-    text-decoration: none;
-
-    &:hover, &:active {
-      text-decoration: underline;
-    }
   }
 }
 
@@ -111,6 +113,13 @@ main {
           "stats contributions details";
       }
     }
+
+    &#budget, &#about {
+      grid-column-gap: 3rem;
+      grid-template-columns: 2fr 4fr 2fr;
+      grid-template-areas:
+        "aside content empty";
+    }
   }
 }
 
@@ -151,4 +160,9 @@ main section {
       margin-bottom: 2rem;
     }
   }
+
+  // TODO Remove after switch to Tailwind CSS
+  .mb-4 { margin-bottom: 1rem; }
+  .mb-8 { margin-bottom: 2rem; }
 }
+

app/styles/_sugar.scss

@@ -0,0 +1,17 @@
+@mixin loading-border-top {
+  &::before {
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 40%, #68d7fb 60%, rgba(255, 255, 255, 0.2));
+    background-size: 200% 200%;
+    animation: kitt 2.5s linear infinite;
+  }
+}
+
+@keyframes kitt {
+  0%{ background-position: 0% 0%}
+  50%{ background-position: 100% 0%}
+  100%{ background-position: 0% 0%}
+}

app/styles/app.scss

@@ -47,7 +47,7 @@ a {
 
 section {
   h2 {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     color: $primary-color;
   }
 
@@ -88,13 +88,19 @@ section {
 
 @import "buttons";
 @import "forms";
+@import "sugar";
+@import "item-list";
 
-@import "components/contribution-list";
+@import "components/budget-balances";
 @import "components/contribution-details";
+@import "components/contribution-list";
 @import "components/contributor-list";
 @import "components/contributor-profile";
+@import "components/expense-list";
 @import "components/external-account-link";
+@import "components/main-navigation-menu";
 @import "components/loading-spinner";
+@import "components/reimbursement-list";
 @import "components/topbar";
 @import "components/topbar-account-panel";
 @import "components/user-avatar";

app/styles/components/_budget-balances.scss

@@ -0,0 +1,51 @@
+section#funds {
+  @include media-max(small) {
+    margin-bottom: 2rem;
+  }
+
+  table.token-balances {
+    opacity: 1;
+    transition: opacity 0.3s linear;
+
+    &.loading {
+      opacity: 0;
+    }
+
+    thead {
+      display: none;
+    }
+
+    th, td {
+      vertical-align: text-bottom;
+
+      img {
+        max-height: 1.5rem;
+        max-width: 1.5rem;
+      }
+    }
+
+    th {
+      font-size: 1.5rem;
+      text-align: left;
+      padding-right: 1rem;
+    }
+
+    td {
+      text-align: right;
+
+      &.amount {
+        font-size: 2rem;
+        padding-right: 1.2rem;
+      }
+
+      &.fiat-amount {
+        font-size: 1.2rem;
+        color: rgba(255,255,255,0.8);
+      }
+
+      span.unit {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}

app/styles/components/_contribution-details.scss

@@ -16,9 +16,9 @@ section#contribution-details {
     margin: 0 0 1.5rem;
     padding: 2rem 2rem;
 
-    border-top: 1px solid rgba(255,255,255,0.2);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    background-color: rgba(255,255,255,0.1);
+    border-top: 1px solid $item-border-color;
+    border-bottom: 1px solid $item-border-color;
+    background-color: $item-background-color;
 
     h3 {
       font-size: 1.5rem;
@@ -67,7 +67,7 @@ section#contribution-details {
     overflow: auto;
     margin-top: 2rem;
     padding-top: 2rem;
-    border-top: 1px solid rgba(255,255,255,0.2);
+    border-top: 1px solid $item-border-color;
     font-size: 1.2rem;
 
     .icon {

app/styles/components/_contribution-list.scss

@@ -24,22 +24,13 @@ main section {
 ul.contribution-list {
   clear: both;
   width: 100%;
-  list-style: none;
 
   li {
     display: grid;
     grid-template-columns: auto 5rem 5rem;
     grid-row-gap: 0.5rem;
-    padding: 0.8rem 1.2rem;
-    background-color: rgba(255,255,255,0.1);
-    font-size: 1.2rem;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
     cursor: pointer;
 
-    &:first-of-type {
-      border-top: 1px solid rgba(255,255,255,0.2);
-    }
-
     &.confirmed {
       grid-template-columns: auto 5rem;
     }
@@ -50,10 +41,6 @@ ul.contribution-list {
       opacity: 0.6;
     }
 
-    &.selected {
-      background-color: rgba(255,255,255,0.2);
-    }
-
     p {
       align-self: center;
       margin: 0;
@@ -113,5 +100,4 @@ ul.contribution-list {
       margin-right: 0.5rem;
     }
   }
-
 }

app/styles/components/_contributor-list.scss

@@ -1,19 +1,20 @@
 table.contributor-list {
+  position: relative;
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1.5rem;
 
   tr {
-    background-color: rgba(255,255,255,0.1);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: $item-background-color;
+    border-bottom: 1px solid $item-border-color;
     cursor: pointer;
 
     &:first-of-type {
-      border-top: 1px solid rgba(255,255,255,0.2);
+      border-top: 1px solid $item-border-color;
     }
 
     &.selected {
-      background-color: rgba(255,255,255,0.2);
+      background-color: $item-highlighted-background-color;
     }
 
     &.current-user {
@@ -48,4 +49,11 @@ table.contributor-list {
       }
     }
   }
+
+  &.loading {
+    @include loading-border-top;
+    &::before {
+      position: absolute;
+    }
+  }
 }

app/styles/components/_contributor-profile.scss

@@ -8,7 +8,7 @@ section#contributor-profile {
 
     img {
       margin: 0 auto;
-      border: 3px solid rgba(255,255,255,0.2);
+      border: 3px solid $item-border-color;
     }
   }
 
@@ -18,9 +18,9 @@ section#contributor-profile {
     margin: -7.2rem 0 1.5rem;
     padding: 6rem 1.2rem 2rem;
 
-    border-top: 1px solid rgba(255,255,255,0.2);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    background-color: rgba(255,255,255,0.1);
+    border-top: 1px solid $item-border-color;
+    border-bottom: 1px solid $item-border-color;
+    background-color: $item-background-color;
 
     h2 {
       text-align: center;

app/styles/components/_expense-list.scss

@@ -0,0 +1,46 @@
+ul.expense-list {
+  grid-column-start: span 2;
+  width: 100%;
+  margin-top: 0.8rem;
+  border-collapse: collapse;
+
+  li {
+    display: grid;
+    grid-template-columns: auto 10rem;
+    grid-row-gap: 0.5rem;
+    padding-top: 1.2rem;
+    border-top: 1px solid $item-border-color;
+    font-size: 1.2rem;
+
+    &:not(:last-child) {
+      padding-bottom: 1.2rem;
+    }
+  }
+
+  h4 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 2rem;
+  }
+
+  .amount {
+    justify-self: end;
+  }
+
+  .description {
+    font-size: 1rem;
+    opacity: 0.7;
+    grid-column-start: span 2;
+  }
+
+  .tags {
+    button {
+      margin-left: 0;
+    }
+  }
+
+  .actions {
+    justify-self: end;
+  }
+
+}

app/styles/components/_loading-spinner.scss

@@ -10,7 +10,7 @@
 .loading-spinner {
   margin-top: 12rem;
   text-align: center;
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   color: $primary-color;
 
   @include media-max(small) {

app/styles/components/_main-navigation-menu.scss

@@ -0,0 +1,30 @@
+nav#main-menu {
+  padding: 2rem;
+  background-color: rgba(0,0,0,.2);
+
+  ul {
+    list-style: none;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3rem;
+    font-size: 1.5rem;
+
+    @include media-max(small) {
+      justify-content: center;
+      font-size: 1.2rem;
+    }
+  }
+
+  li {
+    a {
+      text-decoration: none;
+      color: #fff;
+
+      &.active, &:hover {
+        color: $yellow;
+      }
+    }
+  }
+}

app/styles/components/_reimbursement-list.scss

@@ -0,0 +1,51 @@
+ul.reimbursement-list {
+  width: 100%;
+
+  > li {
+    display: grid;
+    grid-template-columns: auto 12rem;
+    grid-row-gap: 0.5rem;
+    padding-top: 1.6rem;
+
+    &.vetoed {
+      text-decoration: line-through;
+      opacity: 0.6;
+    }
+
+    .token-amount {
+      text-align: right;
+
+      img {
+        height: 1em;
+        vertical-align: middle;
+        margin-top: -2px;
+      }
+
+      .amount {
+        font-size: 1.5rem;
+      }
+
+      .symbol {
+        font-size: 1rem;
+        padding-left: 0.2rem;
+      }
+    }
+  }
+
+  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;
+
+      &.actions {
+        text-align: right;
+      }
+    }
+  }
+}

app/styles/components/_topbar.scss

@@ -13,6 +13,7 @@
   h1 {
     display: inline-block;
     text-transform: uppercase;
+    font-weight: bold;
 
     a {
       color: inherit;

app/templates/about.hbs

@@ -0,0 +1,78 @@
+<main id="about">
+  <div id="aside">
+  </div>
+
+  <div id="content">
+    <section class="text">
+      <h2>What is this?</h2>
+      <p>
+        You have found the contribution dashboard and budget management app of the
+        <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a>
+        open-source co-operative.
+      </p>
+      <p>
+        We use this app to track what people contribute to all parts of our
+        projects (not just code), as well as for managing our community's budget.
+      </p>
+      <h2>Why?</h2>
+      <p>
+        We are trying out a new form of co-operative, native to the Internet,
+        creating and sharing digital resources the same way traditional
+        co-operatives share physical ones.
+      </p>
+      <p>
+        By knowing roughly how much people contribute, we are able to reward
+        co-operative members who contribute their time with money contributed
+        by the ones who don't.
+      </p>
+      <p>
+        In addition to open-source grant payouts, all contributors can also propose
+        reimbursements for specific expenses they covered on behalf of the
+        community.
+      </p>
+      <h2>How?</h2>
+      <p>
+        Instead of notaries, lawyers, courts, or banks, we record data and manage
+        certain decisions on a decentralized ledger called
+        <a href="https://rootstock.io/" target="_blank" rel="noreferrer noopener">Rootstock</a>,
+        which is cryptographically tied to the bitcoin timechain.
+      </p>
+      <p>
+        By doing this, we can ensure community control over the budget, as well as
+        full transparency and verifiability of everything that happens. It also
+        allows us to quickly, cheaply, and reliably send our open-source grants to
+        anyone who's contributing, no matter where they are on this beautiful
+        planet.
+      </p>
+      <h2>Kredits</h2>
+      <p>
+        All contributions are rewarded with so-called kredits. They are both
+        credits in the traditional sense of public attribution, as well as a
+        measure of how much and how regularly someone has added value to the
+        community and its products and services.
+      </p>
+      <p>
+        Kredits are considered for example for grant payouts, as well as
+        permissions for certain actions like vetos or votes. They may also be used
+        to access <a href="https://kosmos.org/services/">hosted services</a> for free,
+        or to unlock additional features on otherwise free services.
+      </p>
+      <h2>Getting started</h2>
+      <p>
+        We'd be delighted to welcome you as a new contributor!
+        If you'd like to start collecting kredits for your contributions, you can
+        <LinkTo @route="signup">create a contributor profile</LinkTo> now.
+      </p>
+      <p>
+        Next, you could learn more about
+        <a href="https://community.kosmos.org/t/how-kredits-for-contributions-are-proposed-and-confirmed/176">how kredits are proposed and issued</a>.
+        If you want to dive deeper into how this all works, head over to the
+        <a href="https://wiki.kosmos.org/Kredits">Kredits documentation</a>
+        page on our (soon to be phased out) wiki.
+      </p>
+    </section>
+  </div>
+
+  <div id="empty">
+  </div>
+</main>

app/templates/application.hbs

@@ -1,6 +1,8 @@
 <header id="topbar">
-  <h1><LinkTo @route="dashboard">Kosmos Kredits</LinkTo></h1>
+  <h1><LinkTo @route="dashboard">Kredits</LinkTo></h1>
   <TopbarAccountPanel />
 </header>
 
+<MainNavigationMenu />
+
 {{outlet}}

app/templates/budget.hbs

@@ -0,0 +1,55 @@
+<main id="budget">
+
+  <div id="aside">
+    <section id="funds">
+      <header>
+        <h2>Community funds</h2>
+      </header>
+      <div class="content">
+        <BudgetBalances />
+      </div>
+    </section>
+  </div>
+
+  <div id="content">
+    {{#if this.reimbursementsUnconfirmed}}
+      <section id="expenses-unconfirmed">
+        <header class="with-nav">
+          <h2>Proposed Reimbursements</h2>
+          <nav>
+            <button type="button" class="button small green"
+                    title="Submit a reimbursement"
+                    {{on "click" this.addReimbursement}}>
+              add
+            </button>
+          </nav>
+        </header>
+        <div class="content">
+          <ReimbursementList @items={{this.reimbursementsUnconfirmed}} />
+        </div>
+      </section>
+    {{/if}}
+
+    {{#if this.reimbursementsConfirmed}}
+      <section id="expenses-confirmed">
+        <header class="with-nav">
+          <h2>Confirmed Reimbursements</h2>
+          <nav>
+            <button type="button" class="button small green"
+                    title="Submit a reimbursement"
+                    {{on "click" this.addReimbursement}}>
+              add
+            </button>
+          </nav>
+        </header>
+        <div class="content">
+          <ReimbursementList @items={{this.reimbursementsConfirmed}} />
+        </div>
+      </section>
+    {{/if}}
+  </div>
+
+  <div id="empty">
+  </div>
+
+</main>

app/templates/budget/expenses.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/components/icon-tag.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>

app/templates/contributions/new.hbs

@@ -6,8 +6,7 @@
     </header>
 
     <div class="content">
-      <AddContribution @contributors={{this.sortedContributors}}
-                       @attributes={{this.model.params}}
+      <AddContribution @attributes={{this.model.params}}
                        @save={{action "save"}} />
     </div>
   </section>

app/templates/dashboard.hbs

@@ -1,19 +1,3 @@
-{{#if this.showIntroText}}
-  <div id="intro" class={{if this.showDetailsPane "with-details"}}>
-    <h2>
-      Welcome to the contribution dashboard of the
-      <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a> project!
-    </h2>
-    <p>
-      If you want to learn more about what the numbers mean and how this works,
-      check out the
-      <a href="https://wiki.kosmos.org/Kredits" target="_blank" rel="noreferrer noopener">Kredits documentation</a>.
-      If you want to start earning kredits for your contributions,
-      <LinkTo @route="signup">create a contributor profile</LinkTo>.
-    </p>
-  </div>
-{{/if}}
-
 <main id="dashboard" class={{if this.showDetailsPane "with-details"}}>
 
   <div id="stats">
@@ -29,7 +13,8 @@
       <div class="content">
         <ContributorList @contributorList={{this.kreditsToplist}}
                          @showUnconfirmedKredits={{this.showUnconfirmedKredits}}
-                         @selectedContributorId={{this.selectedContributorId}} />
+                         @selectedContributorId={{this.selectedContributorId}}
+                         @loading={{this.kredits.syncContributors.isRunning}} />
 
         <p class="stats">
           <span class="number">{{await this.kredits.totalKreditsEarned}}</span> kredits confirmed and issued to
@@ -44,21 +29,25 @@
       </div>
     </section>
 
-    <section id="contributions-by-type">
-      <header>
-        <h2>Contributions by type</h2>
-      </header>
-      <div class="content">
-        <ChartContributionsByType @contributions={{this.contributions}} />
-      </div>
-    </section>
+    {{#if this.contributionsConfirmed}}
+      <section id="contributions-by-type">
+        <header>
+          <h2>Contributions by type</h2>
+        </header>
+        <div class="content">
+          <ChartContributionsByType @contributions={{this.contributions}} />
+        </div>
+      </section>
+    {{/if}}
   </div>
 
   <div id="contributions">
     {{#if this.contributionsUnconfirmed}}
       <section id="contributions-unconfirmed">
         <header class="with-nav">
-          <h2>Latest Contributions</h2>
+          <h2>
+            Latest Contributions
+          </h2>
           <nav>
             <button type="button"
                     onclick={{action "toggleQuickFilterUnconfirmed"}}
@@ -78,29 +67,58 @@
                             @vetoContribution={{action "vetoContribution"}}
                             @contractInteractionEnabled={{this.kredits.hasAccounts}}
                             @selectedContributionId={{this.selectedContributionId}}
-                            @showQuickFilter={{this.showQuickFilterUnconfirmed}} />
+                            @showQuickFilter={{this.showQuickFilterUnconfirmed}}
+                            @loading={{this.kredits.syncContributions.isRunning}}/>
         </div>
       </section>
     {{/if}}
 
-    <section id="contributions-confirmed">
-      <header class="with-nav">
-        <h2>Confirmed Contributions</h2>
-        <nav>
-          <button type="button"
-                  onclick={{action "toggleQuickFilterConfirmed"}}
-                  class="small {{if this.showQuickFilterConfirmed "active"}}">
-            filter
+    {{#if this.contributionsConfirmed}}
+      <section id="contributions-confirmed">
+        <header class="with-nav">
+          <h2>Confirmed Contributions</h2>
+          <nav>
+            <button type="button"
+                    onclick={{action "toggleQuickFilterConfirmed"}}
+                    class="small {{if this.showQuickFilterConfirmed "active"}}">
+              filter
+            </button>
+          </nav>
+        </header>
+        <div class="content">
+          <ContributionList @contributions={{this.contributionsConfirmedSorted}}
+                            @vetoContribution={{action "vetoContribution"}}
+                            @selectedContributionId={{this.selectedContributionId}}
+                            @showQuickFilter={{this.showQuickFilterConfirmed}} />
+        </div>
+      </section>
+    {{/if}}
+
+    {{#if this.showFullContributionSync}}
+    <section id="sync-all-contributions">
+      {{#if this.kredits.fetchMissingContributions.isIdle}}
+        <p class="mb-4">
+          There are
+          <strong>{{this.kredits.missingHistoricContributionsCount}}</strong>
+          earlier contributions, which are not currently loaded/displayed.
+        </p>
+        <p>
+          You can fetch all historic data in one go, and have it stored locally in
+          your browser:
+          <button type="button" {{on "click" (perform this.kredits.fetchMissingContributions)}} class="small">
+            fetch all data
           </button>
-        </nav>
-      </header>
-      <div class="content">
-        <ContributionList @contributions={{this.contributionsConfirmedSorted}}
-                          @vetoContribution={{action "vetoContribution"}}
-                          @selectedContributionId={{this.selectedContributionId}}
-                          @showQuickFilter={{this.showQuickFilterConfirmed}} />
-      </div>
+        </p>
+      {{else}}
+        <p class="mb-4">
+          Syncing data. Please be patient...
+        </p>
+        <p>
+          (You can leave this website anytime and sync missing data when you come back.)
+        </p>
+      {{/if}}
     </section>
+    {{/if}}
   </div>
 
   <div id="details">

app/templates/dashboard/contributions/show.hbs

@@ -19,7 +19,7 @@
     <h3>{{this.model.description}}</h3>
     <p>
       Kind: {{this.model.kind}}
-      <br>Status: {{contribution-status this.model}}
+      <br>Status: {{item-status this.model}}
     </p>
     {{#if this.model.url}}
       <p>

app/templates/dashboard/contributors/show.hbs

@@ -31,7 +31,7 @@
 
   <div class="actions">
     <p>
-      <a href="https://rinkeby.etherscan.io/address/{{this.model.account}}" class="button small" target="_blank" rel="noopener noreferrer">Inspect Ethereum transactions</a>
+      <a href="https://explorer.testnet.rsk.co/address/{{this.model.account}}" class="button small" target="_blank" rel="noopener noreferrer">Inspect Rootstock transactions</a>
       {{#if this.model.ipfsHash}}
         <a href="{{this.ipfsGatewayUrl}}/{{this.model.ipfsHash}}" class="button small" target="_blank" rel="noopener noreferrer">Inspect IPFS profile</a>
       {{/if}}

app/templates/reimbursements/new.hbs

@@ -0,0 +1,13 @@
+<main class="center-column">
+
+  <section id="add-item">
+    <header>
+      <h2>Submit a Reimbursement</h2>
+    </header>
+
+    <div class="content">
+      <AddReimbursement @attributes={{this.model.params}} />
+    </div>
+  </section>
+
+</main>

app/templates/signup/account.hbs

@@ -0,0 +1,30 @@
+<header>
+  <h2>Complete your contributor profile</h2>
+</header>
+<div class="content text-lg">
+  <p class="mb-8">
+    Kredits allow you to to earn rewards for your contributions, in the form of
+    dynamic open-source grants. As a regular contributor, you can also take
+    part in the community's project governance and finances.
+  </p>
+  <p>
+    In order to interact with the system you will need a
+    <a href="https://rootstock.io" target="_blank" rel="noopener noreferrer">Rootstock</a>
+    wallet/account.
+  </p>
+  <form>
+    <p>
+      <label>
+        Rootstock address:<br>
+        <Input @type="text" @value={{this.accountAddress}} placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4" class={{if this.isValidEthAccount "valid" ""}} />
+      </label>
+    </p>
+  </form>
+  <p class="actions">
+    <button {{on "click" (fn this.completeSignup)}}
+            disabled={{this.signupButtonDisabled}}
+            type="button">
+      Complete my profile
+    </button>
+  </p>
+</div>

app/templates/signup/complete.hbs

@@ -7,7 +7,8 @@
   </p>
   <p>
     Why not say hi to your fellow contributors
-    <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved">in one of our chat rooms</a>?.
+    <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved"
+       target="_blank" rel="noopener noreferrer">in one of our chat rooms</a>?.
   </p>
   <p class="actions">
     <LinkTo @route="dashboard" class="button small">Return to dashboard</LinkTo>

app/templates/signup/eth-account.hbs

@@ -1,24 +0,0 @@
-<header>
-  <h2>Complete your contributor profile</h2>
-</header>
-<div class="content text-lg">
-  <p class="mg-bottom-md">
-    Kredits allow you to take part in project governance, and to earn rewards for
-    your contributions. For both, you will need an Ethereum wallet/account.
-  </p>
-  <form>
-    <p>
-      <label>
-        Ethereum account:<br>
-        <Input @type="text" @value={{this.ethAddress}} placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4" class={{if this.isValidEthAccount "valid" ""}} />
-      </label>
-    </p>
-  </form>
-  <p class="actions">
-    <button disabled={{this.signupButtonDisabled}}
-            onclick={{action "completeSignup"}}
-            type="button">
-      Complete my profile
-    </button>
-  </p>
-</div>

app/utils/cps/bignumber.js

@@ -1,20 +0,0 @@
-import { computed } from '@ember/object';
-import ethers from 'ethers';
-
-export default function(dependentKey, converterMethod) {
-  return computed(dependentKey, {
-    get () {
-      let value = this.get(dependentKey);
-      if (value && ethers.utils.BigNumber.isBigNumber(value)) {
-        return value[converterMethod]();
-      } else {
-        return value;
-      }
-    },
-    set (key, value) {
-      const bnValue = ethers.utils.bigNumberify(value);
-      this.set(dependentKey, bnValue);
-      return bnValue[converterMethod]();
-    }
-  });
-}

app/utils/cps/kredits.js

@@ -1,17 +0,0 @@
-import { computed } from '@ember/object';
-import ethers from 'ethers';
-import formatKredits from 'kredits-web/utils/format-kredits';
-
-export default function(dependentKey, options = {}) {
-  return computed(dependentKey, {
-    get () {
-      const value = this.get(dependentKey);
-      return formatKredits(value, options);
-    },
-    set (key, value) {
-      const bnValue = ethers.utils.bigNumberify(value);
-      this.set(dependentKey, bnValue);
-      return formatKredits(bnValue, options);
-    }
-  });
-}

app/utils/get-locale.js

@@ -0,0 +1,5 @@
+export default function() {
+  return (navigator.languages && navigator.languages.length) ?
+    navigator.languages[0] :
+    navigator.language;
+}

app/utils/group-by.js

@@ -2,7 +2,6 @@
 // Code from https://github.com/HeroicEric/ember-group-by (MIT licensed)
 //
 import { A } from '@ember/array';
-import { get } from '@ember/object';
 import { isPresent } from '@ember/utils';
 
 export default function groupBy (collection, property) {
@@ -11,11 +10,11 @@ export default function groupBy (collection, property) {
 
   if (items) {
     items.forEach(function(item) {
-      let value = get(item, property);
+      let value = item[property];
       let group = groups.findBy('value', value);
 
       if (isPresent(group)) {
-        get(group, 'items').push(item);
+        group.items.push(item);
       } else {
         group = { property: property, value: value, items: [item] };
         groups.push(group);

app/utils/is-valid-amount.js

@@ -0,0 +1,8 @@
+export default function isValidAmount(inputAmount) {
+  const amount = parseFloat(inputAmount);
+  if (Number.isNaN(amount)) {
+    return false;
+  } else {
+    return amount > 0;
+  }
+}

app/utils/process-contribution-data.js

@@ -0,0 +1,24 @@
+export default function processContributionData(data, options={}) {
+  const processed = {}
+
+  if (data.confirmedAtBlock && (typeof data.confirmedAtBlock.toNumber === 'function')) {
+    processed.confirmedAt = data.confirmedAtBlock.toNumber();
+  } else if (data.confirmedAt !== 'undefined') {
+    processed.confirmedAt = data.confirmedAt;
+  }
+
+  const otherProperties = [
+    'id', 'contributorId', 'amount', 'vetoed', 'ipfsHash', 'kind',
+    'description', 'url', 'date', 'time', 'pendingTx'
+  ];
+
+  otherProperties.forEach(prop => {
+    processed[prop] = data[prop];
+  });
+
+  if (options.includeDetails) {
+    processed.details = data.details;
+  }
+
+  return processed;
+}

app/utils/process-contributor-data.js

@@ -0,0 +1,18 @@
+export default function processContributorData(data) {
+  const processed = {
+    balance: data.balanceInt,
+    totalKreditsEarned: data.totalKreditsEarned,
+    contributionsCount: data.contributionsCount?.toNumber()
+  }
+
+  const otherProperties = [
+    'id', 'account', 'accounts', 'ipfsHash', 'isCore', 'kind', 'name', 'url',
+    'github_username', 'github_uid', 'wiki_username', 'zoom_display_name'
+  ];
+
+  otherProperties.forEach(prop => {
+    processed[prop] = data[prop];
+  });
+
+  return processed;
+}

app/utils/process-reimbursement-data.js

@@ -0,0 +1,22 @@
+export default function processReimbursementData(data) {
+  const processed = {
+    amount: data.amount.toNumber()
+  }
+
+  if (data.confirmedAtBlock && (typeof data.confirmedAtBlock.toNumber === 'function')) {
+    processed.confirmedAt = data.confirmedAtBlock.toNumber();
+  } else if (data.confirmedAt !== 'undefined') {
+    processed.confirmedAt = data.confirmedAt;
+  }
+
+  const otherProperties = [
+    'id', 'recipientId', 'token', 'vetoed', 'ipfsHash',
+    'expenses', 'pendingTx'
+  ];
+
+  otherProperties.forEach(prop => {
+    processed[prop] = data[prop];
+  });
+
+  return processed;
+}