2.0.0-beta.2

Finish Reimbursement UI (MVP)

.bowerrc

@@ -1,4 +0,0 @@
-{
-  "directory": "bower_components",
-  "analytics": false
-}

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.ember-cli

@@ -5,5 +5,5 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": true
 }

.eslintignore

@@ -0,0 +1,21 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+/release/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

.eslintrc.js

@@ -0,0 +1,77 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    },
+    babelOptions: {
+      babelrc: false,
+      configFile: false,
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+      ],
+    },
+  },
+  globals: {
+    console: true
+  },
+  plugins: [
+    'ember'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended'
+  ],
+  env: {
+    browser: true
+  },
+  rules: {
+    'ember/avoid-leaking-state-in-ember-objects': 'warn',
+    'no-console': 'off',
+    'ember/no-jquery': 'error',
+    'ember/require-computed-property-dependencies': '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
+    {
+      files: [
+        '.eslintrc.js',
+        '.template-lintrc.js',
+        'ember-cli-build.js',
+        'testem.js',
+        'blueprints/*/index.js',
+        'config/**/*.js',
+        'lib/*/index.js',
+        'server/**/*.js'
+      ],
+      parserOptions: {
+        sourceType: 'script'
+      },
+      env: {
+        browser: false,
+        node: true
+      },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        // add your custom rules and overrides for node files here
+
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off'
+      })
+    }
+  ]
+};

.github/release-drafter.yml

@@ -0,0 +1,4 @@
+template: |
+  ## Changes
+
+  $CHANGES

.gitignore

@@ -1,17 +1,26 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/tmp
+/dist/
+/tmp/
 
 # dependencies
-/node_modules
-/bower_components
+/bower_components/
+/node_modules/
 
 # misc
+/.env*
+/.pnp*
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage/
 /libpeerconnection.log
-npm-debug.log*
-testem.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+.tm_properties
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

.jshintrc

@@ -1,32 +0,0 @@
-{
-  "predef": [
-    "document",
-    "window",
-    "-Promise"
-  ],
-  "browser": true,
-  "boss": true,
-  "curly": true,
-  "debug": false,
-  "devel": true,
-  "eqeqeq": true,
-  "evil": true,
-  "forin": false,
-  "immed": false,
-  "laxbreak": false,
-  "newcap": true,
-  "noarg": true,
-  "noempty": false,
-  "nonew": false,
-  "nomen": false,
-  "onevar": false,
-  "plusplus": false,
-  "regexp": false,
-  "undef": true,
-  "sub": true,
-  "strict": false,
-  "white": false,
-  "eqnull": true,
-  "esversion": 6,
-  "unused": true
-}

.template-lintrc.js

@@ -0,0 +1,94 @@
+'use strict';
+
+module.exports = {
+  extends: 'octane',
+
+  rules: {
+    'simple-unless': false,
+    'no-nested-interactive': false,
+    'no-html-comments': false
+  },
+
+  ignore: [
+    'kredits-web/templates/components/**',
+    'app/templates/components/**'
+  ],
+
+	pending: [
+		{
+			"moduleId": "app/templates/dashboard",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/components/add-contribution/template",
+			"only": [
+				"no-action",
+				"no-curly-component-invocation"
+			]
+		},
+		{
+			"moduleId": "app/components/add-contributor/template",
+			"only": [
+				"no-action",
+				"no-curly-component-invocation"
+			]
+		},
+		{
+			"moduleId": "app/components/contribution-list/template",
+			"only": [
+				"no-action",
+				"no-curly-component-invocation"
+			]
+		},
+		{
+			"moduleId": "app/components/contributor-list/template",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/components/topbar-account-panel/template",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/contributions/new",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/contributions/resubmit",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/contributors/edit",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/contributors/new",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/signup/eth-account",
+			"only": [
+				"no-action"
+			]
+		},
+		{
+			"moduleId": "app/templates/signup/index",
+			"only": [
+				"no-action"
+			]
+		}
+	]
+};

.travis.yml

@@ -1,25 +1,21 @@
 ---
 language: node_js
 node_js:
-  - "6"
+  - "14"
+  - "16"
 
 sudo: false
+dist: precise
+
+notifications:
+  email: false
+
+addons:
+  chrome: stable
 
 cache:
-  directories:
-    - $HOME/.npm
-    - $HOME/.cache # includes bowers cache
+  npm: false
 
-before_install:
-  - npm config set spin false
-  - npm install -g bower
-  - bower --version
-  - npm install phantomjs-prebuilt
-  - node_modules/phantomjs-prebuilt/bin/phantomjs --version
-
-install:
-  - npm install
-  - bower install
-
-script:
-  - npm test
+branches:
+  only:
+    - master

README.md

@@ -5,37 +5,46 @@
 This README outlines the details of collaborating on this Ember application.
 A short introduction of this app could easily go here.
 
-## Prerequisites
+## 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)
-* [Bower](https://bower.io/)
+* [Node.js](https://nodejs.org/) (with npm)
 * [Ember CLI](https://ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
+* [Google Chrome](https://google.com/chrome/) (only for running tests)
 
-## Installation
+### Installation
 
-* `git clone <repository-url>` this repository
+* `git clone git@github.com:67P/kredits-web.git` this repository
 * `cd kredits-web`
 * `npm install`
-* `bower install`
 
-## Running / Development
+### Building/running for development
 
-* `ember serve`
+* `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).
 
-### Code Generators
+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
 
 Make use of the many generators for code, try `ember help generate` for more details
 
-### Running Tests
+### Running tests
 
 * `ember test`
 * `ember test --server`
 
+### Linting
+
+* `npm run lint:hbs`
+* `npm run lint:js`
+* `npm run lint:js -- --fix`
+
 ### Building
 
 * `ember build` (development)
@@ -43,11 +52,66 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Deploying
 
-Specify what it takes to deploy your app.
+_(You need collaborator permissions on the 5apps Deploy project.)_
+
+`npm run deploy`
+
+### 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
+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:
+
+#### 1. IPFS
+
+Run a local IPFS deamon.
+
+  * Make sure CORS headers are configured. See [IPFS](#ipfs) for more info.
+  * `ipfs daemon`
+
+#### 2. kredits-contracts
+
+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` - 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 the local devchain running, you can now link the contracts and
+start the Ember app:
+
+  * `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
+
+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
+
+If you haven't configured your IPFS node for CORS yet, you can do so by running
+the following commands:
+
+    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"]'
+    ipfs config Addresses.Gateway /ip4/127.0.0.1/tcp/8080
 
 ## Further Reading / Useful Links
 
-* [ember.js](http://emberjs.com/)
+* [ember.js](https://emberjs.com/)
 * [ember-cli](https://ember-cli.com/)
 * Development Browser Extensions
   * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)

app/app.js

@@ -1,18 +1,12 @@
-import Ember from 'ember';
-import Resolver from './resolver';
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
-
-Ember.MODEL_FACTORY_INJECTIONS = true;
-
-App = Ember.Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

app/components/add-contribution/component.js

@@ -0,0 +1,88 @@
+import Component from '@ember/component';
+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: computed('kredits.contributorsSorted.[]', function() {
+    return this.kredits.contributorsSorted.map(c => {
+      return {
+        id: c.id.toString(),
+        name: c.name
+      }
+    })
+  }),
+
+  isValidContributor: notEmpty('contributorId'),
+  isValidKind: notEmpty('kind'),
+  isValidAmount: computed('amount', function() {
+    return parseInt(this.amount, 10) > 0;
+  }),
+  isValidDescription: notEmpty('description'),
+  isValidUrl: notEmpty('url'),
+  isValid: and('isValidContributor',
+               'isValidKind',
+               'isValidAmount',
+               'isValidDescription'),
+
+  init () {
+    this._super(...arguments);
+    this.set('defaultDate', moment().startOf('hour').toDate());
+    this.set('defaultAttr', {
+      contributorId: null,
+      kind: null,
+      date: this.defaultDate,
+      amount: null,
+      description: null,
+      url: null,
+      details: null
+    });
+
+    this.set('attributes', assign({}, this.defaultAttr, this.attributes));
+
+    this.reset();
+  },
+
+  reset () {
+    this.setProperties(this.attributes);
+  },
+
+  actions: {
+
+    submit (evt) {
+      evt.preventDefault();
+
+      if (!this.isValid) {
+        alert('Invalid data. Please review and try again.');
+        return;
+      }
+
+      const attributes = this.getProperties(Object.keys(this.attributes));
+
+      attributes.contributorId = parseInt(this.contributorId);
+
+      let dateInput = (attributes.date instanceof Array) ?
+        attributes.date[0] : attributes.date;
+
+      const [ date, time ] = dateInput.toISOString().split('T');
+      [ attributes.date, attributes.time ] = [ date, time ];
+
+      this.set('inProgress', true);
+
+      this.save(attributes)
+        .then((/*contribution*/) => {
+          this.reset();
+        }, err => {
+          console.warn(err);
+          window.alert('Something went wrong. Check the browser console for details.');
+        })
+        .finally(() => this.set('inProgress', false));
+    }
+  }
+});

app/components/add-contribution/template.hbs

@@ -0,0 +1,86 @@
+<form onsubmit={{action "submit"}}>
+  <label>
+    <p class="label">Contributor:</p>
+    <p>
+      <select required onchange={{action (mut this.contributorId) value="target.value"}}>
+        <option value="" selected disabled hidden></option>
+        {{#each this.contributors as |contributor|}}
+          <option value={{contributor.id}} selected={{eq this.contributorId contributor.id}}>{{contributor.name}}</option>
+        {{/each}}
+      </select>
+    </p>
+  </label>
+  <label>
+    <p class="label">Kind:</p>
+    <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>
+  </label>
+  <label>
+    <p class="label">Date:</p>
+    <p>
+      {{ember-flatpickr
+        date=this.date
+        defaultDate=this.defaultDate
+        maxDate=this.defaultDate
+        enableTime=true
+        time_24hr=true
+        onChange=(action (mut this.date))
+      }}
+    </p>
+  </label>
+  <label>
+    <p class="label">Amount:</p>
+    <p>
+      {{input type="text"
+              placeholder="500"
+              value=this.amount
+              class=(if this.isValidAmount "valid" "")}}
+    </p>
+  </label>
+  <label>
+    <p class="label">Description:</p>
+    <p>
+      {{input type="text"
+              value=this.description
+              class=(if this.isValidDescription "valid" "")}}
+    </p>
+  </label>
+  <label>
+    <p class="label">URL (optional):</p>
+    <p>
+      {{input type="text"
+              value=this.url
+              class=(if this.isValidUrl "valid" "")}}
+    </p>
+  </label>
+
+  {{#if this.details}}
+    <label>
+      <p class="label">Details:</p>
+      <p>
+        <pre>
+          {{this.details}}
+        </pre>
+      </p>
+    </label>
+  {{/if}}
+
+  <p class="actions">
+    {{input type="submit"
+            disabled=this.inProgress
+            value=(if this.inProgress "Processing" "Save")}}
+  </p>
+</form>
+

app/components/add-contributor/component.js

@@ -1,68 +1,91 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { and, notEmpty } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import { isPresent } from '@ember/utils';
+import { isAddress } from 'web3-utils';
 
-export default Ember.Component.extend({
+export default Component.extend({
 
-  id: null,
-  realName: null,
-  address: null,
-  ipfsHash: null,
-  isCore: true,
+  router: service(),
+  kredits: service(),
+
+  attributes: null,
+
+  isValidAccount: computed('account', function() {
+    return isAddress(this.account);
+  }),
+
+  isValidName: notEmpty('name'),
+  isValidURL: notEmpty('url'),
+  isValidGithubUID: notEmpty('github_uid'),
+  isValidGithubUsername: notEmpty('github_username'),
+  isValidGiteaUsername: notEmpty('gitea_username'),
+  isValidWikiUsername: notEmpty('wiki_username'),
+  isValidZoomDisplayName: notEmpty('zoom_display_name'),
+
+  isValid: and(
+    'isValidAccount',
+    'isValidName',
+    'isValidGithubUID'
+  ),
 
   inProgress: false,
 
-  isValidId: function() {
-    return Ember.isPresent(this.get('id'));
-  }.property('id'),
+  init () {
+    this._super(...arguments);
+    this.setDefaultAttributes();
+    this.reset();
+  },
 
-  isValidRealName: function() {
-    return Ember.isPresent(this.get('realName'));
-  }.property('realName'),
+  setDefaultAttributes () {
+    if (isPresent(this.attributes)) { return; }
 
-  isValidAddress: function() {
-    return this.get('kredits.web3Instance').isAddress(this.get('address'));
-  }.property('address'),
-
-  isValid: function() {
-    return this.get('isValidId') && this.get('isValidRealName') && this.get('isValidAddress');
-  }.property('isValidAddress', 'isValidId', 'isValidRealName'),
+    this.set('attributes', {
+      account: null,
+      name: null,
+      kind: 'person',
+      url: null,
+      github_username: null,
+      github_uid: null,
+      gitea_username: null,
+      wiki_username: null,
+      zoom_display_name: null
+    });
+  },
 
   reset: function() {
-    this.setProperties({
-      id: null,
-      realName: null,
-      address: null,
-      ipfsHash: null,
-      isCore: true,
-      inProgress: false
-    });
-
+    this.setProperties(this.attributes);
   },
 
   actions: {
 
-    save() {
-      if (!this.get('contractInteractionEnabled')) {
-        alert('Only core team members can add new contributors. Please ask someone to set you up.');
+    submit (evt) {
+      evt.preventDefault();
+
+      if (!this.kredits.currentUserIsCore) {
+        window.alert('Only core team members can edit profiles. Please ask someone to set you up.');
+        return;
+      }
+      if (!this.isValid) {
+        window.alert('Invalid data. Please review and try again.');
         return;
       }
 
-      if (this.get('isValid')) {
-        this.set('inProgress', true);
+      const attributes = Object.keys(this.attributes);
+      const contributor = this.getProperties(attributes);
 
-        this.get('kredits').addContributor(
-          this.get('address'),
-          this.get('realName'),
-          '', // TODO: this.get('ipfsHash')
-          this.get('isCore'),
-          this.get('id')
-        ).then(contributor => {
-          this.reset();
-          this.get('contributors').pushObject(contributor);
-          window.scroll(0,0);
-        });
-      } else {
-        alert('Invalid data. Please review and try again.');
-      }
+      this.set('inProgress', true);
+
+      this.save(contributor).then(() => {
+        this.reset();
+      }).catch(err => {
+        console.warn(err);
+        window.alert('Something went wrong. Please check the browser console.');
+      }).finally(() => {
+        this.set('inProgress', false);
+        this.router.transitionTo('dashboard');
+      });
     }
 
   }

app/components/add-contributor/template.hbs

@@ -1,26 +1,56 @@
-<form {{action "save" on="submit"}}>
+<form onsubmit={{action "submit"}}>
   <p>
-    {{input name="id"
-            type="text"
-            placeholder="GitHub UID (123)"
-            value=id
-            class=(if isValidId 'valid' '')}}
+    <label for="c-account">Ethereum account</label>
+      <Input @type="text"
+             @value={{this.account}}
+             name="account" id="c-account"
+             placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
+             class={{if this.isValidAccount "valid" ""}} />
   </p>
   <p>
-    {{input name="realname"
-            type="text"
-            placeholder="Carl Sagan"
-            value=realName
-            class=(if isValidRealName 'valid' '')}}
+    <label for="c-kind">Kind</label>
+    <select required onchange={{action (mut this.kind) value="target.value"}} id="c-kind">
+      <option value="person" selected={{eq this.kind "person"}}>Person</option>
+      <option value="organization" selected={{eq this.kind "organization"}}>Organization</option>
+    </select>
   </p>
   <p>
-    {{input name="address"
-            type="text"
-            placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
-            value=address
-            class=(if isValidAddress 'valid' '')}}
+    <label for="c-name">Name</label>
+    {{input name="name" type="text" value=this.name placeholder="Zero Cool"
+            class=(if this.isValidName "valid" "") id="c-name"}}
+  </p>
+  <p>
+    <label for="c-url">URL</label>
+    {{input name="url" type="text" value=this.url placeholder="http://zerocool.bit"
+            class=(if this.isValidURL "valid" "") id="c-url"}}
+  </p>
+  <p>
+    <label for="c-github-uid">GitHub UID</label>
+    {{input name="github_uid" type="text" value=this.github_uid placeholder="2342"
+            class=(if this.isValidGithubUID "valid" "") id="c-github-uid"}}
+  </p>
+  <p>
+    <label for="c-github-username">GitHub username</label>
+    {{input name="github_username" type="text" value=this.github_username placeholder="zerocool"
+            class=(if this.isValidGithubUsername "valid" "") id="c-github-username"}}
+  </p>
+  <p>
+    <label for="c-gitea-username">Gitea username</label>
+    {{input name="gitea_username" type="text" value=this.gitea_username placeholder="zerocool"
+            class=(if this.isValidGiteaUsername "valid" "") id="c-gitea-username"}}
+  </p>
+  <p>
+    <label for="c-wiki-username">Wiki username</label>
+    {{input name="wiki_username" type="text" value=this.wiki_username placeholder="ZeroCool"
+            class=(if this.isValidWikiUsername "valid" "") id="c-wiki-username"}}
+  </p>
+  <p>
+    <label for="c-zoom-display-name">Zoom display name</label>
+    {{input name="zoom_display_name" type="text" value=this.zoom_display_name placeholder="Zero Cool"
+            class=(if this.isValidZoomDisplayName "valid" "") id="c-zoom-display-name"}}
   </p>
   <p class="actions">
-    {{input type="submit" value=(if inProgress 'Processing' 'Save') disabled=inProgress}}
+    {{input type="submit" disabled=this.inProgress
+            value=(if this.inProgress "Processing" "Save")}}
   </p>
 </form>

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,165 @@
+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 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 = parseFloat(this.total);
+
+    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 = 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', parseInt(this.recipientId));
+
+    const attributes = {
+      amount: parseInt(parseFloat(this.total) * 100000000), // convert to sats
+      token: config.tokens['BTC'],
+      recipientId: parseInt(this.recipientId),
+      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,95 @@
+<form {{on "submit" this.submit}} novalidate>
+  <label>
+    <p class="label">Contributor:</p>
+    <p>
+      <select required {{on "change" this.updateContributor}}>
+        <option value="" selected disabled hidden></option>
+        {{#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"
+               @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}}
+    <ul class="expense-list">
+      {{#each this.expenses as |expense|}}
+        <li>
+          <div class="description" rowspan="2">
+            <h4>
+              <span class="date">{{expense.date}}:</span>
+              <span class="title">{{expense.title}}</span>
+            </h4>
+            <p class="description">{{expense.description}}</p>
+          </div>
+          <div class="amount">
+            {{fmt-fiat-currency expense.amount expense.currency}}
+          </div>
+          <div class="actions">
+            <button {{on "click" (fn this.removeExpenseItem expense)}}
+              class="danger small" type="button">delete</button>
+          </div>
+        </li>
+      {{/each}}
+    </ul>
+    <p class="actions">
+      <button {{on "click" this.showExpenseForm}}
+        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,12 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+
+export default class BudgetBalancesComponent extends Component {
+  @service communityFunds;
+  @alias('communityFunds.balances') balances;
+
+  get loading () {
+    return !this.communityFunds.balancesLoaded;
+  }
+}

app/components/budget-balances/template.hbs

@@ -0,0 +1,18 @@
+<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.balances as |balance|}}
+      <tr>
+        <th>{{balance.token.symbol}}</th>
+        <td class="amount">{{balance.confirmed_balance}}</td>
+        <td class="fiat-amount">~{{balance.balanceUSD}} USD</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

app/components/chart-contributions-by-type/component.js

@@ -0,0 +1,64 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+let categoryColors = {
+  community: "#fb6868",
+  design: "#fbe468",
+  dev: "#e068fb",
+  docs: "#97fb68",
+  ops: "#8f68fb",
+}
+
+export default Component.extend({
+
+  contributions: null,
+  chartOptions: Object.freeze({
+    legend: {
+      display: false
+    }
+  }),
+
+  chartData: computed('contributions', function() {
+    let kredits = this.contributions
+                      .filterBy('vetoed', false)
+                      .map(c => {
+                        return { kind: c.kind, amount: c.amount }
+                      })
+                      .reduce(function (kinds, c) {
+                        if (c.kind in kinds) {
+                          kinds[c.kind] = kinds[c.kind] + c.amount
+                        } else {
+                          kinds[c.kind] = c.amount;
+                        }
+                        return kinds;
+                      }, {});
+
+    return {
+      datasets: [{
+        data: [
+          kredits['community'],
+          kredits['design'],
+          kredits['dev'],
+          kredits['ops'],
+          kredits['docs'],
+        ],
+        borderColor: [
+          categoryColors.community,
+          categoryColors.design,
+          categoryColors.dev,
+          categoryColors.ops,
+          categoryColors.docs,
+        ],
+        borderWidth: 1
+      }],
+      labels: [
+        'Community',
+        'Design',
+        'Development',
+        'Operations & Infrastructure',
+        'Documentation'
+      ],
+    }
+  })
+
+});

app/components/chart-contributions-by-type/template.hbs

@@ -0,0 +1,6 @@
+<div class="chart">
+  <EmberChart @type="doughnut"
+              @data={{this.chartData}}
+              @options={{this.chartOptions}}
+              @width="200" @height="200" />
+</div>

app/components/contribution-list/component.js

@@ -0,0 +1,69 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { sort } from '@ember/object/computed';
+import { isPresent } from '@ember/utils';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+
+  router: service(),
+
+  tagName: 'div',
+  classNames: ['contributions'],
+
+  selectedContribution: null,
+
+  showQuickFilter: false,
+  hideSmallContributions: false,
+  contributorId: null,
+  contributionKind: null,
+
+  kredits: service(),
+
+  contributorsSorting: Object.freeze(['name:asc']),
+  contributors: sort('kredits.contributors', 'contributorsSorting'),
+
+  contributorsActive: computed('contributors.[]', 'contributions', function() {
+    const activeIds = new Set(this.contributions.mapBy('contributorId'));
+
+    return this.contributors.filter(c => activeIds.has(c.id));
+  }),
+
+  contributionKinds: computed('contributions.[]', function() {
+    return this.contributions.mapBy('kind').uniq();
+  }),
+
+  contributionsFiltered: computed('contributions.[]', 'hideSmallContributions', 'contributorId', 'contributionKind', function() {
+    return this.contributions.filter(c => {
+      let included = true;
+
+      if (this.hideSmallContributions &&
+          c.amount <= 500) { included = false; }
+
+      if (isPresent(this.contributorId) &&
+          c.contributorId !== parseInt(this.contributorId)) { included = false; }
+
+      if (isPresent(this.contributionKind) &&
+          c.kind !== this.contributionKind) { included = false; }
+
+      return included;
+    });
+  }),
+
+  actions: {
+
+    veto (contributionId) {
+      if (this.contractInteractionEnabled) {
+        this.vetoContribution(contributionId);
+      } else {
+        window.alert('Only members can veto contributions. Please ask someone to set you up.');
+      }
+    },
+
+    openContributionDetails(contribution) {
+      this.router.transitionTo('dashboard.contributions.show', contribution);
+    }
+
+  }
+
+});

app/components/contribution-list/template.hbs

@@ -0,0 +1,56 @@
+{{#if @showQuickFilter}}
+  <div class="quick-filter">
+    <p>
+      <label class="filter-contributor">
+        Contributor:
+        <select onchange={{action (mut this.contributorId) value="target.value"}}>
+          <option value="" selected>all</option>
+          {{#each this.contributorsActive as |contributor|}}
+            <option value={{contributor.id}} selected={{eq this.contributorId contributor.id}}>{{contributor.name}}</option>
+          {{/each}}
+        </select>
+      </label>
+
+      <label class="filter-contribution-kind">
+        Kind:
+        <select onchange={{action (mut this.contributionKind) value="target.value"}}>
+          <option value="" selected>all</option>
+          {{#each this.contributionKinds as |kind|}}
+            <option value={{kind}} selected={{eq this.contributionKind kind}}>{{capitalize-string kind}}</option>
+          {{/each}}
+        </select>
+      </label>
+
+      <label class="filter-contribution-size">
+        <Input @type="checkbox" @checked={{this.hideSmallContributions}} />
+        Hide small contributions
+      </label>
+    </p>
+  </div>
+{{/if}}
+
+<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="{{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>
+        <span class="title">{{contribution.description}}</span>
+      </p>
+      <p class="kredits-amount">
+        <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
+      </p>
+      {{#unless contribution.vetoed}}
+        {{#unless (is-confirmed-contribution contribution)}}
+          <p class="voting">
+            {{input type="button" class="button small danger" value="veto"
+                    click=(action "veto" contribution.id)
+                    disabled=contribution.hasPendingChanges}}
+          </p>
+        {{/unless}}
+      {{/unless}}
+    </li>
+  {{/each}}
+</ul>

app/components/contributor-list/component.js

@@ -1,8 +1,18 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
-export default Ember.Component.extend({
+export default Component.extend({
+  tagName: '',
 
-  tagName: 'table',
-  classNames: 'contributor-list'
+  router: service(),
 
+  selectedContributorId: null,
+
+  actions: {
+
+    openContributorDetails(contributor) {
+      this.router.transitionTo('dashboard.contributors.show', contributor);
+    }
+
+  }
 });

app/components/contributor-list/template.hbs

@@ -1,14 +1,25 @@
-<tbody>
-  {{#each contributors as |contributor|}}
-    <tr class="{{if contributor.isCurrentUser 'current-user'}}">
-      <td class="person">
-        <img class="avatar" src={{contributor.avatarURL}}>
-        {{contributor.github_username}}
-      </td>
-      <td class="kredits">
-        <span class="amount">{{contributor.kredits}}</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/external-account-link/component.js

@@ -0,0 +1,15 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  tagName: "",
+  account: null,
+
+  iconComponentName: computed('account.site', function() {
+    if (this.account.site.match(/github|gitea|wiki|zoom/)) {
+      return 'icon-account-' + this.account.site.replace(/\./g, '-');
+    } else {
+      return 'icon-web-globe';
+    }
+  })
+});

app/components/external-account-link/template.hbs

@@ -0,0 +1,5 @@
+<a href={{this.account.url}} target="_blank" rel="noopener noreferrer"
+   title="{{this.account.username}} on {{this.account.site}}">
+  <span class="site">{{this.account.site}}</span>
+  {{component this.iconComponentName}}
+</a>

app/components/loading-spinner/component.js

@@ -1,6 +1,6 @@
-import Ember from 'ember';
+import Component from '@ember/component';
 
-export default Ember.Component.extend({
+export default Component.extend({
 
   classNames: ['loading-spinner']
 

app/components/loading-spinner/template.hbs

@@ -2,7 +2,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1" x="0px" y="0px" viewBox="0 0 132 100"
        enable-background="new 0 0 100 100" xml:space="preserve">
-    <path id="path-comet" 
+    <path id="path-comet"
           d="M79.062,24.173L79.062,24.173l-0.021-0.011c-0.068-0.03-0.137-0.062-0.204-0.093L42.392,7.337
              c0,0,3.065,14.104,4.458,18.019l0,0c0,0-41.754-12.481-46.85-13.67c1.67,6.52,30.607,62.492,30.607,62.492
              c5.848,11.873,19.394,18.485,33.522,18.485c19.811,0,35.87-16.059,35.87-35.869C100,42.313,91.418,29.837,79.062,24.173z">
@@ -10,5 +10,5 @@
   </svg>
 </p>
 <p>
-  Loading data from Ethereum...
+  Loading data...
 </p>

app/components/proposal-list/component.js

@@ -1,20 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-
-  tagName: 'ul',
-  classNames: ['proposal-list'],
-
-  actions: {
-
-    confirm(proposalId) {
-      if (this.get('contractInteractionEnabled')) {
-        this.sendAction('confirmAction', proposalId);
-      } else {
-        window.alert('Only members can vote on proposals. Please ask someone to set you up.');
-      }
-    }
-
-  }
-
-});

app/components/proposal-list/template.hbs

@@ -1,11 +0,0 @@
-{{#each proposals as |proposal|}}
-  <li>
-    <span class="id">#{{proposal.id}}</span>
-    Issue{{#if proposal.executed}}d{{/if}}
-    <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
-    to <span class="recipient" title="{{proposal.recipientAddress}}">{{proposal.recipientName}}</span>
-    <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
-
-    {{#unless proposal.executed}}<button {{action "confirm" proposal.id}}>+1</button>{{/unless}}
-  </li>
-{{/each}}

app/components/reimbursement-list/component.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { sort } from '@ember/object/computed';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import config from 'kredits-web/config/environment';
+
+export default class ReimbursementListComponent extends Component {
+  @service kredits;
+
+  itemSorting = Object.freeze(['pendingStatus:asc', 'id:desc']);
+  @sort('args.items', 'itemSorting') itemsSorted;
+
+  get ipfsGatewayUrl () {
+    return config.ipfs.gatewayUrl;
+  }
+
+  @action
+  veto (id) {
+    this.kredits.vetoReimbursement(id).then(transaction => {
+      console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
+    });
+  }
+}

app/components/reimbursement-list/template.hbs

@@ -0,0 +1,46 @@
+<ul class="item-list spaced reimbursement-list {{if @loading 'loading'}}">
+  {{#each this.itemsSorted as |reimbursement|}}
+    <li data-reimbursement-id={{reimbursement.id}}
+        class="{{item-status reimbursement}}">
+      <p class="meta">
+        <span class="title">
+          Expenses covered by {{reimbursement.contributor.name}}
+        </span>
+        <span class="recipient">
+          <UserAvatar @contributor={{reimbursement.contributor}} />
+        </span>
+      </p>
+      <p class="token-amount">
+        <span class="amount">
+          {{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
+      </p>
+      <ul class="expense-list">
+        {{#each reimbursement.expenses as |expense|}}
+          <li>
+            <div class="description" rowspan="2">
+              <h4>
+                <span class="date">{{expense.date}}:</span>
+                <span class="title">{{expense.title}}</span>
+              </h4>
+              <p class="description">{{expense.description}}</p>
+            </div>
+            <div class="amount">
+              {{fmt-fiat-currency expense.amount expense.currency}}
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+      {{#if this.kredits.currentUserIsCore}}
+        <p>
+          <a href="{{this.ipfsGatewayUrl}}/{{reimbursement.ipfsHash}}"
+             class="button small" target="_blank" rel="noopener noreferrer">
+            Inspect IPFS data
+          </a>
+          <button {{on "click" (fn this.veto reimbursement.id)}}
+                  disabled={{reimbursement.vetoed}}
+                  class="button small danger" type="button">veto</button>
+        </p>
+      {{/if}}
+    </li>
+  {{/each}}
+</ul>

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

@@ -0,0 +1,45 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { isPresent } from '@ember/utils';
+
+export default Component.extend({
+
+  tagName: '',
+
+  kredits: service(),
+  router: service(),
+
+  setupInProgress: false,
+
+  userHasEthereumWallet: computed(function() {
+    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);
+      } catch (error) {
+        this.set('setupInProgress', false);
+        console.log('Opening Ethereum wallet failed:', error);
+      }
+    }
+
+  }
+
+});

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

@@ -0,0 +1,18 @@
+<section id="user-account">
+  {{#if this.setupInProgress}}
+    Connecting account...
+  {{else}}
+    {{#if (and this.kredits.hasAccounts 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>
+      {{/if}}
+    {{/if}}
+  {{/if}}
+</section>

app/components/user-avatar/component.js

@@ -0,0 +1,33 @@
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
+
+const SIZES = {
+  'small':  '128', // pixels
+  'medium': '256',
+  'large':  '512'
+}
+
+export default Component.extend({
+  contributor: null,
+  tagName: 'img',
+  classNames: ['avatar'],
+  classNameBindings: ['size'],
+  attributeBindings: ['src', 'title'],
+  size: 'small',
+
+  src: alias('avatarURL'),
+  title: alias('contributor.name'),
+
+  avatarURL: computed('contributor.github_uid', 'size', function() {
+    const github_uid = this.contributor.github_uid;
+
+    if (github_uid) {
+      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=${SIZES[this.size]}`;
+    } else {
+      // TODO use custom avatar
+      return '';
+    }
+  })
+
+});

app/controllers/application.js

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

app/controllers/budget.js

@@ -0,0 +1,10 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+
+export default class BudgetController extends Controller {
+  @service kredits;
+
+  @alias('kredits.reimbursementsUnconfirmed') reimbursementsUnconfirmed;
+  @alias('kredits.reimbursementsConfirmed') reimbursementsConfirmed;
+}

app/controllers/contributions/new.js

@@ -0,0 +1,32 @@
+import Controller from '@ember/controller';
+import { alias, filterBy, sort } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+
+  kredits: service(),
+
+  queryParams: ['contributorId', 'kind', 'amount'],
+
+  contributors: alias('kredits.contributors'),
+  minedContributors: filterBy('contributors', 'id'),
+
+  contributorsSorting: Object.freeze(['name:asc']),
+  sortedContributors: sort('minedContributors', 'contributorsSorting'),
+
+  actions: {
+
+    save (contribution) {
+      const contributor = this.contributors.findBy('id', contribution.contributorId);
+      contribution.contributorIpfsHash = contributor.ipfsHash;
+
+      return this.kredits.addContribution(contribution)
+        .then(contribution => {
+          this.transitionToRoute('index');
+          return contribution;
+        });
+    }
+
+  }
+
+});

app/controllers/contributions/resubmit.js

@@ -0,0 +1,7 @@
+import ContributionsNewController from 'kredits-web/controllers/contributions/new';
+
+export default ContributionsNewController.extend({
+
+  attributes: null,
+
+});

app/controllers/contributors/edit.js

@@ -0,0 +1,16 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+
+  kredits: service(),
+
+  actions: {
+
+    save (attributes) {
+      return this.kredits.updateContributor(this.model.id, attributes);
+    }
+
+  }
+
+});

app/controllers/contributors/new.js

@@ -0,0 +1,16 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+
+  kredits: service(),
+
+  actions: {
+
+    save (contributor) {
+      return this.kredits.addContributor(contributor);
+    }
+
+  }
+
+});

app/controllers/dashboard.js

@@ -0,0 +1,57 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { alias, not, sort } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+  kredits: service(),
+
+  showDetailsPane: false,
+  selectedContributorId: null,
+  selectedContributionId: null,
+
+  currentBlock: alias('kredits.currentBlock'),
+
+  contributions: alias('kredits.contributions'),
+  contributionsConfirmed: alias('kredits.contributionsConfirmed'),
+  contributionsUnconfirmed: alias('kredits.contributionsUnconfirmed'),
+
+  contributionsSorting: Object.freeze(['date:desc', 'time:desc', 'id:desc']),
+  contributionsUnconfirmedSorted: sort('contributionsUnconfirmed', 'contributionsSorting'),
+  contributionsConfirmedSorted: sort('contributionsConfirmed', 'contributionsSorting'),
+
+  kreditsByContributor: alias('kredits.kreditsByContributor'),
+
+  kreditsToplistSorting: computed('showUnconfirmedKredits', function(){
+    return this.showUnconfirmedKredits ? ['amountTotal:desc'] : ['amountConfirmed:desc'];
+  }),
+  kreditsToplist: sort('kreditsByContributor', 'kreditsToplistSorting'),
+
+  showUnconfirmedKredits: true,
+  hideUnconfirmedKredits: not('showUnconfirmedKredits'),
+
+  showQuickFilterUnconfirmed: false,
+  showQuickFilterConfirmed: false,
+
+  showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){
+    return (!this.kredits.hasAccounts || !this.kredits.currentUser);
+  }),
+
+  actions: {
+
+    vetoContribution (contributionId) {
+      this.kredits.veto(contributionId).then(transaction => {
+        console.debug('[controllers:index] Veto submitted to chain: '+transaction.hash);
+      });
+    },
+
+    toggleQuickFilterUnconfirmed () {
+      this.toggleProperty('showQuickFilterUnconfirmed');
+    },
+
+    toggleQuickFilterConfirmed () {
+      this.toggleProperty('showQuickFilterConfirmed');
+    }
+
+  }
+});

app/controllers/dashboard/contributions/show.js

@@ -0,0 +1,12 @@
+
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import config from 'kredits-web/config/environment';
+
+export default Controller.extend({
+
+  ipfsGatewayUrl: computed(function() {
+    return config.ipfs.gatewayUrl;
+  })
+
+});

app/controllers/dashboard/contributors/show.js

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import config from 'kredits-web/config/environment';
+
+export default Controller.extend({
+
+  roleName: computed('model.isCore', 'totalKreditsEarned', function() {
+    if (this.model.isCore) return 'Core Contributor';
+    if (this.model.totalKreditsEarned <= 5000) return 'Newcomer';
+    return 'Contributor';
+  }),
+
+  ipfsGatewayUrl: computed(function() {
+    return config.ipfs.gatewayUrl;
+  })
+
+});

app/controllers/index.js

@@ -1,142 +0,0 @@
-import Ember from 'ember';
-import Proposal from 'kredits-web/models/proposal';
-
-const {
-  computed,
-  inject: {
-    service
-  }
-} = Ember;
-
-export default Ember.Controller.extend({
-
-  kredits: service(),
-
-  contractInteractionEnabled: computed.alias('kredits.web3Provided'),
-
-  findContributorByAddress(address) {
-    return this.get('model.contributors')
-               .findBy('address', address);
-  },
-
-  proposalsOpen: function() {
-    let proposals = this.get('model.proposals')
-                        .filterBy('executed', false)
-                        .map(p => {
-                          p.set('recipientName', this.findContributorByAddress(p.get('recipientAddress')).github_username);
-                          return p;
-                        });
-    return proposals;
-  }.property('model.proposals.[]', 'model.proposals.@each.executed', 'model.contributors.[]'),
-
-  proposalsClosed: function() {
-    let proposals = this.get('model.proposals')
-                        .filterBy('executed', true)
-                        .map(p => {
-                          p.set('recipientName', this.findContributorByAddress(p.get('recipientAddress')).github_username);
-                          return p;
-                        });
-    return proposals;
-  }.property('model.proposals.[]', 'model.proposals.@each.executed', 'model.contributors.[]'),
-
-  proposalsSorting: ['id:desc'],
-  proposalsClosedSorted: Ember.computed.sort('proposalsClosed', 'proposalsSorting'),
-  proposalsOpenSorted: Ember.computed.sort('proposalsOpen', 'proposalsSorting'),
-
-  contributorsSorting: ['kredits:desc'],
-  contributorsSorted: Ember.computed.sort('model.contributors', 'contributorsSorting'),
-
-  watchContractEvents: function() {
-    let events = this.get('kredits.kreditsContract')
-                     .allEvents(/* [additionalFilterObject], */);
-
-    events.watch((error, data) => {
-      Ember.Logger.debug('[index] Received contract event', data);
-
-      switch (data.event) {
-        case 'ProposalCreated':
-          this._handleProposalCreated(data);
-          break;
-        case 'ProposalExecuted':
-          this._handleProposalExecuted(data);
-          break;
-        case 'ProposalVoted':
-          this._handleProposalVoted(data);
-          break;
-        case 'Transfer':
-          this._handleTransfer(data);
-          break;
-      }
-    });
-  }.on('init'),
-
-  _handleProposalCreated(data) {
-    if (Ember.isPresent(this.get('model.proposals')
-             .findBy('id', data.args.id.toNumber()))) {
-      Ember.Logger.debug('[index] proposal exists, not adding from event');
-      return false;
-    }
-
-    let proposal = Proposal.create({
-      id: data.args.id.toNumber(),
-      creatorAddress: data.args.creator,
-      recipientAddress: data.args.recipient,
-      recipientName: null,
-      votesCount: 0,
-      votesNeeded: 2,
-      amount: data.args.amount.toNumber(),
-      executed: false,
-      url: data.args.url,
-      ipfsHash: data.args.ipfsHash
-    });
-
-    this.get('model.proposals').pushObject(proposal);
-  },
-
-  _handleProposalExecuted(data) {
-    if (this.get('model.proposals')
-            .findBy('id', data.args.id.toNumber())
-            .get('executed')) {
-      Ember.Logger.debug('[index] proposal already executed, not adding from event');
-      return false;
-    }
-
-    this.get('model.proposals')
-        .findBy('id', data.args.id.toNumber())
-        .setProperties({
-          'executed': true,
-          'votesCount': 2 // TODO use real count
-        });
-
-    this.get('model.contributors')
-        .findBy('address', data.args.recipient)
-        .incrementProperty('kredits', data.args.amount.toNumber());
-  },
-
-  _handleProposalVoted(data) {
-    this.get('model.proposals')
-        .findBy('id', data.args.id.toNumber())
-        .incrementProperty('votesCount', 1);
-  },
-
-  _handleTransfer(data) {
-    this.get('model.contributors')
-        .findBy('address', data.args.from)
-        .incrementProperty('kredits', - data.args.value.toNumber());
-    this.get('model.contributors')
-        .findBy('address', data.args.to)
-        .incrementProperty('kredits', data.args.value.toNumber());
-  },
-
-
-  actions: {
-
-    confirmProposal(proposalId) {
-      this.get('kredits').vote(proposalId).then(transactionId => {
-        window.confirm('Vote submitted to Ethereum blockhain: '+transactionId);
-      });
-    }
-
-  }
-
-});

app/controllers/signup/eth-account.js

@@ -0,0 +1,49 @@
+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

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

app/helpers/capitalize-string.js

@@ -0,0 +1,7 @@
+import Helper from '@ember/component/helper';
+
+export default Helper.extend({
+  compute([string]) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+});

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-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/is-confirmed-contribution.js

@@ -0,0 +1,15 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+
+export default Helper.extend({
+
+  kredits: service(),
+  currentBlock: alias('kredits.currentBlock'),
+
+  compute([contribution]) {
+    return !contribution.vetoed &&
+           (contribution.confirmedAt <= this.currentBlock);
+  }
+
+});

app/helpers/is-current-user.js

@@ -0,0 +1,16 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { isPresent } from '@ember/utils';
+
+export default Helper.extend({
+
+  kredits: service(),
+  currentUser: alias('kredits.currentUser'),
+
+  compute([contributor]) {
+    return isPresent(contributor) && isPresent(this.currentUser) &&
+            contributor.account === this.currentUser.account;
+  }
+
+});

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/index.html

@@ -3,16 +3,22 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Kredits</title>
+    <title>Kosmos Kredits</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     {{content-for "head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/kredits-web.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/kredits-web.css">
 
     {{content-for "head-footer"}}
+
+    <script>
+      window.addEventListener('load', function() {
+        window.windowLoadComplete = true;
+      });
+    </script>
   </head>
   <body>
     {{content-for "body"}}

app/models/contribution.js

@@ -0,0 +1,50 @@
+import EmberObject, { computed } from '@ember/object';
+import { isEmpty, isPresent } from '@ember/utils';
+import moment from 'moment';
+
+export default EmberObject.extend({
+  // Contract
+  id: null,
+  contributorId: null,
+  amount: null,
+  confirmedAt: null,
+  vetoed: null,
+  ipfsHash: null,
+
+  // contributor model instance
+  contributor: null,
+
+  // TODO contributor who submitted the contribution
+  // submittedBy: null,
+
+  // IPFS
+  kind: null,
+  description: null,
+  details: null,
+  url: null,
+  date: null,
+  time: null,
+
+  pendingTx: null,
+
+  init () {
+    this._super(...arguments);
+    if (isEmpty(this.details)) this.set('details', {});
+  },
+
+  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);
+  }),
+
+  serialize () {
+    return JSON.stringify(this);
+  }
+});

app/models/contributor.js

@@ -1,16 +1,25 @@
-import Ember from 'ember';
+import EmberObject from '@ember/object';
 
-export default Ember.Object.extend({
+export default EmberObject.extend({
+  // Contract
+  id: null,
+  account: null,
+  balance: 0,
+  totalKreditsEarned: 0,
+  contributionsCount: 0,
+  isCore: false,
+  ipfsHash: null,
 
-  address: null,
+  // IPFS
+  kind: null,
+  name: null,
+  url: null,
   github_username: null,
   github_uid: null,
-  ipfsHash: null,
-  kredits: null,
-  isCurrentUser: false,
-
-  avatarURL: function() {
-    return `https\:\/\/avatars2.githubusercontent.com/u/${this.get('github_uid')}?v=3&s=128`;
-  }.property('github_uid')
+  wiki_username: null,
+  zoom_display_name: null,
 
+  serialize () {
+    return JSON.stringify(this);
+  }
 });

app/models/proposal.js

@@ -1,16 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Object.extend({
-
-  id: null,
-  creatorAddress: null,
-  recipientAddress: null,
-  recipientName: null,
-  votesCount: null,
-  votesNeeded: null,
-  amount: null,
-  executed: null,
-  url: null,
-  ipfsHash: null
-
-});

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/resolver.js

@@ -1,3 +0,0 @@
-import Resolver from 'ember-resolver';
-
-export default Resolver;

app/router.js

@@ -1,13 +1,41 @@
-import Ember from 'ember';
+import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-const Router = Ember.Router.extend({
-  location: config.locationType,
-  rootURL: config.rootURL
-});
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
 
 Router.map(function() {
-  this.route('spinner');
-});
+  this.route('dashboard', function() {
+    this.route('contributors', function() {
+      this.route('show', { path: ':id' });
+    });
 
-export default Router;
+    this.route('contributions', function() {
+      this.route('show', { path: ':id' });
+    });
+  });
+  this.route('contributions', function() {
+    this.route('new', { queryParams: ['contributorId', 'kind', 'amount'] });
+    this.route('resubmit', { path: ':id/resubmit' });
+  });
+  this.route('contributors', function() {
+    this.route('new');
+    this.route('edit', { path: ':id/edit' });
+  });
+  this.route('signup', function() {
+    this.route('github');
+    this.route('eth-account');
+    this.route('complete');
+  });
+  this.route('budget', function() {
+    this.route('expenses');
+
+    this.route('reimbursements', function() {});
+  });
+
+  this.route('reimbursements', function() {
+    this.route('new');
+  });
+});

app/routes/application.js

@@ -1,4 +1,35 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { schedule } from '@ember/runloop';
 
-export default Ember.Route.extend({
-});
+export default class ApplicationRoute extends Route {
+  @service kredits;
+  @service communityFunds;
+
+  beforeModel(/* transition */) {
+    return this.kredits.setup().then(() => {
+      this.kredits.kredits.preflightChecks().catch(error => {
+        console.error('Kredits preflight check failed!');
+        console.error(error);
+      });
+    }).catch(error => {
+      console.log('Error initializing Kredits', error);
+    });
+  }
+
+  model() {
+    return this.kredits.loadInitialData().then(() => {
+      this.kredits.addContractEventHandlers()
+    });
+  }
+
+  afterModel() {
+    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

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

app/routes/contributions/resubmit.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+
+  kredits: service(),
+
+  model(params) {
+    return this.kredits.contributions.findBy('id', parseInt(params.id));
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    controller.set('attributes', model.getProperties([
+      'contributorId', 'kind', 'amount', 'description', 'url', 'details'
+    ]));
+    controller.set('attributes.date', model.jsDate);
+  }
+
+});

app/routes/contributors/edit.js

@@ -0,0 +1,30 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributors: alias('kredits.contributors'),
+
+  model(params) {
+    return this.kredits.contributors.findBy('id', params.id);
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    controller.set('attributes', {
+      account: model.account,
+      name: model.name,
+      kind: model.kind,
+      url: model.url,
+      github_username: model.github_username,
+      github_uid: model.github_uid,
+      gitea_username: model.gitea_username,
+      wiki_username: model.wiki_username,
+      zoom_display_name: model.zoom_display_name
+    });
+  }
+
+});

app/routes/dashboard.js

@@ -0,0 +1,18 @@
+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);
+    }
+    schedule('afterRender', this.kredits.fetchMissingContributions,
+      this.kredits.fetchMissingContributions.perform);
+  }
+
+}

app/routes/dashboard/contributions/show.js

@@ -0,0 +1,32 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributions: alias('kredits.contributions'),
+
+  model (params) {
+    return this.contributions.findBy('id', parseInt(params.id));
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: true,
+          selectedContributionId: model.id
+        });
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: false,
+          selectedContributionId: null
+        });
+  }
+
+});

app/routes/dashboard/contributors/show.js

@@ -0,0 +1,32 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributors: alias('kredits.contributors'),
+
+  model (params) {
+    return this.contributors.findBy('id', params.id);
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: true,
+          selectedContributorId: model.id
+        });
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: false,
+          selectedContributorId: null
+        });
+  }
+
+});

app/routes/index.js

@@ -1,18 +1,9 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
 
-export default Ember.Route.extend({
+export default Route.extend({
 
-  kredits: Ember.inject.service(),
-
-  model() {
-    let kredits = this.get('kredits');
-
-    return Ember.RSVP.hash({
-      contributors: kredits.getContributors(),
-      totalSupply: kredits.getValueFromContract('totalSupply'),
-      contributorsCount: kredits.getValueFromContract('contributorsCount'),
-      proposals: kredits.getProposals()
-    });
+  redirect () {
+    this.transitionTo('dashboard');
   }
 
 });

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.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/signup/complete.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/signup/eth-account.js

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,29 @@
+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);
+
+    let accessToken;
+    try {
+      accessToken = window.location.hash.match(/access_token=(.+)/)[1];
+    } catch (error) { /* ignore */ }
+
+    if (isEmpty(accessToken) || accessToken === 'undefined') {
+      console.error('No GitHub access token found.');
+      this.transitionTo('signup');
+      return;
+    }
+
+    this.kredits.set('githubAccessToken', accessToken);
+
+    this.transitionTo('signup.eth-account');
+  }
+
+});
+

app/routes/spinner.js

@@ -1,4 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-});

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.web3RequiredNetworkName) {
+    networkName = config.web3RequiredNetworkName.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,39 @@
+import Service, { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { A } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+import config from 'kredits-web/config/environment';
+
+export default class CommunityFundsService extends Service {
+  @service exchangeRates;
+
+  @tracked balancesLoaded = false;
+  @tracked balances = A([]);
+
+  @task
+  *fetchBalances () {
+    yield fetch(config.btcBalanceAPI).then(res => res.json())
+      .then(res => {
+        return this.processBalances(res);
+      })
+      .catch(err => {
+        console.log(`[community-funds] Fetching balances failed:`);
+        console.error(err);
+      });
+  }
+
+  async processBalances (res) {
+    await this.exchangeRates.fetchRates();
+    // Format and round the approximate USD value
+    const lang = navigator.language || navigator.userLanguage;
+    const balanceUSD = res.confirmed_balance * this.exchangeRates.btcusd;
+    res.balanceUSD = Math.round(balanceUSD).toLocaleString(lang);
+
+    this.balances.pushObject({
+      ...res,
+      ...{ token: { name: 'BTC', symbol: 'BTC'} }
+    });
+
+    this.balancesLoaded = true;
+  }
+}

app/services/exchange-rates.js

@@ -0,0 +1,29 @@
+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;
+
+  async fetchRates (source='bitstamp') {
+    switch(source) {
+      case 'bitstamp':
+        this.btceur = await fetchFromBitstamp('btceur');
+        this.btcusd = await fetchFromBitstamp('btcusd');
+    }
+  }
+}

app/services/ipfs.js

@@ -1,31 +0,0 @@
-import Ember from 'ember';
-import ipfsAPI from 'npm:ipfs-api';
-import config from 'kredits-web/config/environment';
-
-export default Ember.Service.extend({
-
-  ipfsInstance: null,
-
-  ipfs: function() {
-    if (this.get('ipfsInstance')) {
-      return this.get('ipfsInstance');
-    }
-    let ipfs = ipfsAPI(config.ipfs);
-    this.set('ipfsInstance', ipfs);
-    return ipfs;
-  }.property('ipfsInstance'),
-
-  storeFile(content) {
-    let ipfs = this.get('ipfs');
-    return ipfs.add(new ipfs.Buffer(content)).then(res => {
-      return res[0].hash;
-    });
-  },
-
-  getFile(hash) {
-    return this.get('ipfs').cat(hash, { buffer: true }).then(res => {
-      return res.toString();
-    });
-  }
-
-});

app/services/kredits.js

@@ -1,164 +1,742 @@
-import Ember from 'ember';
-import Web3 from 'npm:web3';
+import ethers from 'ethers';
+import Kredits from '@kredits/contracts';
+
+import Service from '@ember/service';
+import EmberObject from '@ember/object';
+import { computed } from '@ember/object';
+import { alias, filterBy, notEmpty, sort } from '@ember/object/computed';
+import { isEmpty, isPresent } 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 config from 'kredits-web/config/environment';
 import Contributor from 'kredits-web/models/contributor';
-import Proposal from 'kredits-web/models/proposal';
-import kreditsContracts from 'npm:kredits-contracts';
+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 Ember.Service.extend({
+export default Service.extend({
 
-  ipfs: Ember.inject.service(),
+  browserCache: service(),
 
-  web3Instance: null,
-  web3Provided: false, // Web3 provided (using Mist Browser, Metamask et al.)
+  currentBlock: null,
+  currentUserAccounts: null, // default to not having an account. this is the wen web3 is loaded.
+  currentUser: null,
+  contributors: null,
+  contributions: null,
+  reimbursements: null,
+  githubAccessToken: null,
 
-  web3: function() {
-    if (this.get('web3Instance')) {
-      return this.get('web3Instance');
-    }
+  currentUserIsContributor: notEmpty('currentUser'),
+  currentUserIsCore: alias('currentUser.isCore'),
+  hasAccounts: notEmpty('currentUserAccounts'),
 
-    let web3Instance;
+  contributorsMined: filterBy('contributors', 'id'),
+  contributorsSorting: Object.freeze(['name:asc']),
+  contributorsSorted: sort('contributorsMined', 'contributorsSorting'),
 
-    if (typeof window.web3 !== 'undefined') {
-      Ember.Logger.debug('[kredits] Using user-provided instance, e.g. from Mist browser or Metamask');
-      web3Instance = window.web3;
-      this.set('web3Provided', true);
-    } else {
-      Ember.Logger.debug('[kredits] Creating new instance from npm module class');
-      let provider = new Web3.providers.HttpProvider(config.web3ProviderUrl);
-      web3Instance = new Web3(provider);
-    }
+  // When data was loaded from cache, we need to fetch updates from the network
+  contributorsNeedSync: false,
+  contributionsNeedSync: false,
+  reimbursementsNeedSync: false,
 
-    this.set('web3Instance', web3Instance);
-    window.web3 = web3Instance;
-
-    return web3Instance;
-  }.property('web3Instance'),
-
-  currentUserAccounts: function() {
-    return (this.get('web3Provided') && this.get('web3').eth.accounts) || [];
-  }.property('web3', 'web3Provided'),
-
-  kreditsContract: function() {
-    if (this.get('kreditsContractInstance')) {
-      return this.get('kreditsContractInstance');
-    }
-
-    console.log(config.ethereumChain);
-    let contract = kreditsContracts(this.get('web3'), config.ethereumChain)['Kredits'];
-
-    this.set('kreditsContractInstance', contract);
-    return contract;
-  }.property('web3'),
-
-  getValueFromContract(contractMethod, ...args) {
-    return new Ember.RSVP.Promise((resolve, reject) => {
-      this.get('kreditsContract')[contractMethod](...args, (err, data) => {
-        if (err) { reject(err); }
-        resolve(data);
-      });
-    });
+  init () {
+    this._super(...arguments);
+    this.set('contributors', []);
+    this.set('contributions', []);
+    this.set('reimbursements', []);
   },
 
-  getContributorData(i) {
-    let promise = new Ember.RSVP.Promise((resolve, reject) => {
-      this.getValueFromContract('contributorAddresses', i).then(address => {
-        this.getValueFromContract('contributors', address).then(person => {
-          this.getValueFromContract('balanceOf', address).then(balance => {
-            let contributor = Contributor.create({
-              address: address,
-              github_username: person[1],
-              github_uid: person[0],
-              ipfsHash: person[3],
-              kredits: balance.toNumber(),
-              isCurrentUser: this.get('currentUserAccounts').includes(address)
-            });
-            Ember.Logger.debug('[kredits] contributor', contributor);
-            resolve(contributor);
+  // 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 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 Web3 instance, e.g. from Metamask');
+        ethProvider = new ethers.providers.Web3Provider(web3Provider);
+
+        const network = await ethProvider.getNetwork();
+        if (isPresent(config.web3RequiredChainId) &&
+            network.chainId !== config.web3RequiredChainId) {
+          return instantiateWithoutAccount();
+        }
+
+        ethProvider.listAccounts().then(accounts => {
+          context.set('currentUserAccounts', accounts);
+          const ethSigner = accounts.length === 0 ? null : ethProvider.getSigner();
+          resolve({
+            ethProvider,
+            ethSigner
           });
         });
-      }).catch(err => reject(err));
-    });
-    return promise;
-  },
-
-  getContributors() {
-    return this.getValueFromContract('contributorsCount').then(contributorsCount => {
-      let contributors = [];
-
-      for(var i = 0; i < contributorsCount.toNumber(); i++) {
-        contributors.push(this.getContributorData(i));
       }
 
-      return Ember.RSVP.all(contributors);
-    });
-  },
-
-  getProposalData(i) {
-    let promise = new Ember.RSVP.Promise((resolve, reject) => {
-      this.getValueFromContract('proposals', i).then(p => {
-        let proposal = Proposal.create({
-          id               : i,
-          creatorAddress   : p[0],
-          recipientAddress : p[1],
-          votesCount       : p[2].toNumber(),
-          votesNeeded      : p[3].toNumber(),
-          amount           : p[4].toNumber(),
-          executed         : p[5],
-          url              : p[6],
-          ipfsHash         : p[7]
-        });
-        Ember.Logger.debug('[kredits] proposal', proposal);
-        resolve(proposal);
-      }).catch(err => reject(err));
-    });
-    return promise;
-  },
-
-  getProposals() {
-    return this.getValueFromContract('proposalsCount').then(proposalsCount => {
-      let proposals = [];
-
-      for(var i = 0; i < proposalsCount.toNumber(); i++) {
-        proposals.push(this.getProposalData(i));
+      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();
       }
-
-      return Ember.RSVP.all(proposals);
     });
   },
 
-  vote(proposalId) {
-    Ember.Logger.debug('[kredits] vote for', proposalId);
-    return new Ember.RSVP.Promise((resolve, reject) => {
-      this.get('kreditsContract').vote(proposalId, (err, data) => {
-        if (err) { reject(err); }
-        Ember.Logger.debug('[kredits] vote response', data);
-        resolve(data);
+  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 kredits.provider.getBlockNumber());
+
+    if (this.currentUserAccounts && this.currentUserAccounts.length > 0) {
+      this.getCurrentUser.then(contributorData => {
+        this.set('currentUser', contributorData);
+      });
+    }
+
+    return kredits;
   },
 
-  addContributor(address, name, ipfsHash, isCore, id) {
-    Ember.Logger.debug('[kredits] add contributor', name, address);
-    return new Ember.RSVP.Promise((resolve, reject) => {
-      this.get('kreditsContract').addContributor(address, name, ipfsHash, isCore, id, (err, data) => {
-        if (err) { reject(err); }
-        Ember.Logger.debug('[kredits] add contributor response', data);
-        let contributor = Contributor.create({
-          address: address,
-          github_username: name,
-          github_uid: id,
-          ipfsHash: ipfsHash,
-          kredits: 0,
-          isCurrentUser: this.get('currentUserAccounts').includes(address)
+  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);
+        }
+      });
+  }),
+
+  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);
+    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);
+
+      return EmberObject.create({
+        contributor: contributor,
+        amountUnconfirmed: amountUnconfirmed,
+        amountConfirmed: contributor.totalKreditsEarned,
+        amountTotal: contributor.totalKreditsEarned + amountUnconfirmed
+      })
+    });
+
+    contributorsWithOnlyConfirmed.forEach(c => {
+      kreditsByContributor.push(EmberObject.create({
+        contributor: c,
+        amountUnconfirmed: 0,
+        amountConfirmed: c.totalKreditsEarned,
+        amountTotal: c.totalKreditsEarned
+      }));
+    })
+
+    return kreditsByContributor;
+  }),
+
+  contributionsUnconfirmed: computed('contributions.[]', 'currentBlock', function() {
+    return this.contributions
+               .filter(c => c.confirmedAt > this.currentBlock);
+  }),
+
+  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);
+  }),
+
+  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: 30 } });
+    }
+
+    return Promise.resolve();
+  },
+
+  addContributor (attributes) {
+    if (attributes.github_uid) {
+      const uidInt = parseInt(attributes.github_uid);
+      attributes.github_uid = uidInt;
+    }
+
+    console.debug('[kredits] add contributor', attributes);
+
+    return this.kredits.Contributor.add(attributes, { gasLimit: 350000 })
+      .then(data => {
+        console.debug('[kredits] add contributor response', data);
+      });
+  },
+
+  updateContributor (id, attributes) {
+    if (attributes.github_uid) {
+      const uidInt = parseInt(attributes.github_uid);
+      attributes.github_uid = uidInt;
+    }
+
+    console.debug('[kredits] update contributor', attributes);
+
+    return this.kredits.Contributor.updateProfile(id, attributes, { gasLimit: 350000 })
+      .then(data => {
+        console.debug('[kredits] updateProfile response', data);
+      });
+  },
+
+  fetchContributors () {
+    console.debug(`[kredits] Fetching all contributors from the network`);
+    return this.kredits.Contributor.all()
+      .then(contributors => {
+        return contributors.forEach(data => {
+          this.loadContributorFromData(data);
+          return;
         });
-        resolve(contributor);
+      })
+      .then(() => {
+        return this.cacheLoadedContributors();
       });
+  },
+
+  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;
+  },
+
+  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`);
     });
   },
 
-  logKreditsContract: function() {
-    Ember.Logger.debug('[kredits] kreditsContract', this.get('kreditsContract'));
-  }.on('init')
+  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] Contribution.add response', data);
+        attributes.contributor = this.contributors.findBy('id', attributes.contributorId);
+        const contribution = Contribution.create(attributes);
+        contribution.set('pendingTx', data);
+        contribution.set('confirmedAtBlock', this.currentBlock + 40320);
+        this.contributions.pushObject(contribution);
+        return contribution;
+      });
+  },
+
+  fetchContributions (options = { page: { size: 200 } }) {
+    console.debug(`[kredits] Fetching contributions from the network`);
+    return this.kredits.Contribution.all(options)
+      .then(contributions => {
+        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();
+    this.set('contributionsNeedSync', false);
+  }).group('contributionTasks'),
+
+  fetchNewContributions: task(function * () {
+    const count = yield this.kredits.Contribution.functions.contributionsCount();
+    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.functions.contributionsCount();
+    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);
+
+    return this.kredits.Contribution.functions.veto(contributionId, { gasLimit: 300000 })
+      .then(data => {
+        console.debug('[kredits] veto response', data);
+        contribution.set('pendingTx', data);
+        return data;
+      });
+  },
+
+  //
+  // 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))
+      .on('ContributorAccountUpdated', this.handleContributorChange.bind(this))
+      .on('ContributorAdded', this.handleContributorChange.bind(this))
+
+    this.kredits.Contribution
+      .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));
+  },
+
+  async handleContributorChange (contributorId, ...args) {
+    console.debug('[kredits] Contributor add/update event received for ID', contributorId);
+    console.debug('[kredits] Event data:', args);
+    const contributorData = await this.kredits.Contributor.getById(contributorId);
+    const newContributor = Contributor.create(contributorData);
+
+    // TODO check for actual differences in the contributor data first
+
+    const oldContributor = this.contributors.findBy('id', contributorId);
+    if (oldContributor) {
+      // console.debug('[kredits] cached contributor', oldContributor);
+      this.contributors.removeObject(oldContributor);
+    }
+
+    // console.debug('[kredits] incoming contributor data', newContributor);
+    this.contributors.pushObject(newContributor);
+  },
+
+  async handleContributionAdded (id, contributorId, amount) {
+    console.debug('[kredits] ContributionAdded event received', { id, contributorId, amount });
+
+    const pendingContribution = this.contributions.find(c => {
+      return (c.id === null) &&
+             (c.contributorId === contributorId) &&
+             (c.amount.toString() === amount.toString());
+    });
+
+    if (pendingContribution) {
+      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());
+    }
+  },
+
+  async handleReimbursementAdded (id, addedByAccount, amount) {
+    console.debug('[kredits] ReimbursementAdded event received', { id, addedByAccount, amount });
+
+    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());
+    }
+  },
+
+  handleTransfer (from, to, value) {
+    value = value.toNumber();
+
+    this.contributors
+        .findBy('address', from)
+        .decrementProperty('balance', value);
+
+    this.contributors
+        .findBy('address', to)
+        .incrementProperty('balance', value);
+  },
 });

app/styles/_buttons.scss

@@ -0,0 +1,74 @@
+button, input[type=submit], .button {
+  display: inline-block;
+  padding: 0.6rem 2rem;
+  background-color: rgba(22, 21, 40, 0.6);
+  border: 1px solid rgba(22, 21, 40, 1);
+  border-radius: 3px;
+  color: $primary-color;
+  font-weight: 500;
+  text-decoration: none;
+  text-transform: uppercase;
+  cursor: pointer;
+  letter-spacing: 0.1em;
+  -webkit-appearance: none;
+
+  &+button, &+input[type=submit], &+.button {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    background-color: rgba(22, 21, 40, 0.8);
+  }
+
+  &:focus, &:active, &.active {
+    border-color: $primary-color;
+  }
+
+  &[disabled] {
+    color: rgba(255,255,255,0.5);
+  }
+
+  &.small {
+    font-size: 0.86rem;
+    padding: 0.2rem 0.8rem;
+  }
+
+  &.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);
+    }
+    &: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;
+    }
+  }
+
+  &.icon {
+    svg {
+      width: 2rem;
+      height: 2rem;
+      vertical-align: middle;
+      margin-right: 1rem;
+
+      .fg {
+        fill: $primary-color;
+      }
+    }
+  }
+}

app/styles/_colors.scss

@@ -0,0 +1,14 @@
+$blue: #68d7fb;
+$purple: #8f68fb;
+$pink: #e068fb;
+$green: #97fb68;
+$yellow: #fbe468;
+$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

@@ -0,0 +1,155 @@
+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 {
+      font-size: 1.2rem;
+
+      &.mg-bottom-md {
+        margin-bottom: 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 {
+          color: $primary-color;
+          margin-left: 1rem;
+        }
+      }
+    }
+
+    label {
+      display: block;
+      margin-bottom: 0.5rem;
+      opacity: 0.7;
+
+      > p {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    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;
+      border-bottom: 1px solid rgba(255,255,255,0.2);
+      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 :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 {
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      appearance: none;
+      border-radius: 0;
+      background-color: rgba(22, 21, 40, 0.6);
+      background-image:
+        linear-gradient(45deg, transparent 50%, gray 50%),
+        linear-gradient(135deg, gray 50%, transparent 50%);
+      background-position:
+        calc(100% - 1.5rem) calc(1rem + 0.5rem),
+        calc(100% - 1rem) calc(1rem + 0.5rem);
+      background-size:
+        0.5rem 0.5rem,
+        0.5rem 0.5rem;
+      background-repeat: no-repeat;
+
+      &:invalid {
+        color: rgba(238, 238, 238, 0.5);
+      }
+    }
+
+    input[type=submit] {
+      padding: 0.6rem 2rem;
+      &:disabled {
+        background-color: transparent;
+      }
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    label.checkbox {
+      line-height: 3.2rem;
+      font-size: 1.2rem;
+      &::before {
+        display: inline-block;
+        margin-right: 0.8rem;
+        height: 3.2rem;
+        width: 3.2rem;
+        font-size: 2rem;
+        background-color: rgba(22, 21, 40, 0.3);
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+        text-align: center;
+        vertical-align: middle;
+        content: '✓';
+        color: rgba(255,255,255,0.2);
+      }
+    }
+
+    input[type=checkbox]:checked + label.checkbox {
+      &::before {
+        background-color: rgba(22, 21, 40, 0.6);
+        color: #fff;
+      }
+    }
+  }
+}

app/styles/_item-list.scss

@@ -0,0 +1,35 @@
+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;
+    }
+  }
+
+  &.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,31 +1,180 @@
-section {
-  @include outer-container;
-  margin-bottom: 8rem;
-  &:first-of-type {
-    margin-top: 6rem;
+main {
+  padding: 1rem 2rem;
+
+  @include media-max(small) {
+    padding: 1rem;
   }
 
-  @include media($mobile) {
-    margin-bottom: 5rem;
-    &:first-of-type {
-      margin-top: 2rem;
+  &#dashboard {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "stats"
+      "contributions";
+  }
+
+  &#budget {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "aside"
+      "content";
+  }
+
+  &.center-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    section {
+      width: 600px;
+      max-width: 100%;
+
+      header {
+        text-align: center;
+      }
     }
   }
 
-  header {
-    @include span-columns(12);
-    padding-bottom: 3rem;
-    text-align: center;
-    // background-color: purple;
-
-    @include media($mobile) {
-      @include span-columns(10);
-      @include shift(1);
-      padding-bottom: 2rem;
+  div#content {
+    section {
+      &:first-of-type {
+        @include media-max(small) {
+          margin-top: 0;
+        }
+      }
     }
+  }
 
-    div.content {
-      @include span-columns(12);
+  section {
+    .content {
+      a {
+        font-size: inherit;
+      }
+
+      &.text-lg {
+        p {
+          font-size: 1.2rem;
+          margin-bottom: 1em;
+          line-height: 1.5em;
+        }
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      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;
+
+  @include media-max(small) {
+    padding: 2rem 1rem;
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    font-size: inherit;
+    margin-bottom: 1em;
+  }
+
+  p {
+    margin-bottom: 1em;
+    line-height: 1.5em;
+    font-size: 1.2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+@media (min-width: 550px) {
+  main {
+    &#dashboard {
+      grid-column-gap: 4rem;
+      grid-row-gap: 2rem;
+      grid-template-columns: 2fr 4fr;
+      grid-template-areas:
+        "stats contributions";
+
+      &.with-details {
+        grid-column-gap: 3rem;
+        grid-template-columns: 2fr 4fr 2fr;
+        grid-template-areas:
+          "stats contributions details";
+      }
+    }
+
+    &#budget {
+      grid-column-gap: 3rem;
+      grid-template-columns: 2fr 4fr 2fr;
+      grid-template-areas:
+        "aside content empty";
+    }
+  }
+}
+
+main section {
+  margin-bottom: 5rem;
+
+  &:first-of-type {
+    margin-top: 2rem;
+  }
+
+  @include media-max(small) {
+    margin-bottom: 5rem;
+  }
+
+  header {
+    margin-bottom: 3rem;
+
+    &.with-nav {
+      display: grid;
+      grid-template-columns: auto 5rem;
+      grid-template-areas:
+        "title" "actions";
+    }
+
+    h2 {
+      display: inline-block;
+      // padding-left: 1.2rem;
+    }
+
+    nav {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    @include media-max(small) {
+      margin-bottom: 2rem;
     }
   }
 }

app/styles/_mediaqueries.scss

@@ -0,0 +1,33 @@
+$breakpoints-max: (
+  small: 600px,
+  medium: 960px,
+  large: 1280px
+);
+
+$breakpoints-min: (
+  small: 601px,
+  medium: 961px,
+  large: 1281px
+);
+
+@mixin media-max($screen-size) {
+  @if map-has-key($breakpoints-max, $screen-size) {
+    @media (max-width: map-get($breakpoints-max, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}
+
+@mixin media-min($screen-size) {
+  @if map-has-key($breakpoints-min, $screen-size) {
+    @media (min-width: map-get($breakpoints-min, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}

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

@@ -10,22 +10,23 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-@import "bourbon";
-@import "settings/neat";
-@import "neat";
-@import "settings/breakpoints";
+@import "mediaqueries";
 @import "layout";
+@import "colors";
 
 $font-family-sans: 'Open Sans', sans-serif;
 
+html, body {
+  font-family: $font-family-sans;
+  font-weight: 300;
+  font-size: 12px;
+  color: $body-text-color;
+}
+
 body {
-  background-image: url('/img/bg.jpg');
+  background-image: linear-gradient(to bottom, rgba(22, 21, 40, .4), rgba(0, 0, 0, .75)), url('/img/bg.jpg');
   background-repeat: none;
   background-attachment: fixed;
-  font-family: $font-family-sans;
-  font-size: 16px;
-  font-weight: 300;
-  color: #fff;
 }
 
 @media screen and (min-width: 900px) {
@@ -40,50 +41,65 @@ h1, h2, h3, h4, h5, input, button {
   font-weight: 300;
 }
 
+a {
+  color: $primary-color;
+}
+
 section {
   h2 {
-    font-size: 2.8rem;
-    color: lightblue;
-    @include media($mobile) {
-      font-size: 2rem;
-    }
+    font-size: 1.5rem;
+    color: $primary-color;
   }
 
-  &#contributors {
+  &#people {
     .content {
       p.stats {
-        padding-top: 3rem;
+        margin-bottom: 1rem;
         font-size: 1rem;
-        color: lightblue;
+        color: white;
         text-align: center;
         span.number {
           font-weight: 600;
         }
-        @include media($mobile) {
-          padding-top: 2rem;
-        }
+      }
+    }
+  }
+
+  &#contributions-by-type {
+    .chart {
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+
+      @include media-max(small) {
+        width: 75%;
       }
     }
   }
 }
 
-button, input[type=submit] {
-  display: inline-block;
-  border: 1px solid rgba(22, 21, 40, 1);
-  background-color: rgba(22, 21, 40, 0.6);
-  color: lightblue;
-  border-radius: 3px;
-  font-weight: 500;
-  text-transform: uppercase;
-  cursor: pointer;
-  letter-spacing: 0.1em;
-
-  &:hover {
-    background-color: rgba(22, 21, 40, 0.8);
+@media (min-width: 550px) {
+  section {
+    h2 {
+      font-size: 2rem;
+    }
   }
 }
 
-@import "components/loading-spinner";
+@import "buttons";
+@import "forms";
+@import "sugar";
+@import "item-list";
+
+@import "components/budget-balances";
+@import "components/contribution-details";
+@import "components/contribution-list";
 @import "components/contributor-list";
-@import "components/add-contributor";
-@import "components/proposal-list";
+@import "components/contributor-profile";
+@import "components/expense-list";
+@import "components/external-account-link";
+@import "components/loading-spinner";
+@import "components/reimbursement-list";
+@import "components/topbar";
+@import "components/topbar-account-panel";
+@import "components/user-avatar";

app/styles/components/_add-contributor.scss

@@ -1,36 +0,0 @@
-section#add-contributor {
-
-  form {
-
-    p {
-      margin-bottom: 1rem;
-
-      &.actions {
-        padding-top: 1rem;
-        text-align: center;
-      }
-    }
-
-    input[type=text] {
-      width: 100%;
-      padding: 1rem;
-      border: none;
-      border-bottom: 1px solid rgba(255,255,255,0.2);
-      background-color: rgba(22, 21, 40, 0.3);
-      color: #fff;
-      font-size: 1.2rem;
-      &:focus, &.valid {
-        background-color: rgba(22, 21, 40, 0.6);
-      }
-    }
-
-    input[type=submit] {
-      padding: 0.6rem 2rem;
-      &:disabled {
-        background-color: transparent;
-      }
-    }
-
-  }
-
-}

app/styles/components/_budget-balances.scss

@@ -0,0 +1,42 @@
+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 {
+      font-size: 1.2rem;
+      vertical-align: text-bottom;
+    }
+
+    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 {
+        color: rgba(255,255,255,0.8);
+      }
+    }
+  }
+}

app/styles/components/_contribution-details.scss

@@ -0,0 +1,100 @@
+section#contribution-details {
+  header {
+    nav {
+      .amount {
+        font-size: 1.5rem;
+      }
+
+      .symbol {
+        padding-left: 0.2rem;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin: 0 0 1.5rem;
+    padding: 2rem 2rem;
+
+    border-top: 1px solid $item-border-color;
+    border-bottom: 1px solid $item-border-color;
+    background-color: $item-background-color;
+
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    p {
+      margin-bottom: 2rem;
+
+      span {
+      }
+
+      &.who-what-when {
+        font-size: 1.2rem;
+        margin-bottom: 1.2rem;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    a:not(.button) {
+      color: $primary-color;
+      text-decoration: none;
+
+      &:not(.button):hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+
+  &.vetoed {
+    .content {
+      h3 {
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  .hint.vetoed {
+    overflow: auto;
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid $item-border-color;
+    font-size: 1.2rem;
+
+    .icon {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      float: left;
+      margin-right: 1rem;
+      margin-bottom: 1rem;
+
+      svg {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}
+
+// On small screens, hide intro text, contributor and contributions list when
+// showing details
+@include media-max(small) {
+  #dashboard.with-details {
+    #contributions, #stats {
+      display: none;
+    }
+  }
+  #intro.with-details {
+    display: none;
+  }
+}

app/styles/components/_contribution-list.scss

@@ -0,0 +1,103 @@
+main section {
+  @include media-max(small) {
+    &#contributions-unconfirmed, &#contributions-confirmed {
+      margin-top: 0;
+    }
+  }
+}
+
+.quick-filter {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+
+  p {
+    padding: 0.2rem 0 0;
+  }
+
+  label {
+    &+ label {
+      margin-left: 3.6rem;
+    }
+  }
+}
+
+ul.contribution-list {
+  clear: both;
+  width: 100%;
+
+  li {
+    display: grid;
+    grid-template-columns: auto 5rem 5rem;
+    grid-row-gap: 0.5rem;
+    cursor: pointer;
+
+    &.confirmed {
+      grid-template-columns: auto 5rem;
+    }
+
+    &.vetoed {
+      grid-template-columns: auto 5rem;
+      text-decoration: line-through;
+      opacity: 0.6;
+    }
+
+    p {
+      align-self: center;
+      margin: 0;
+      line-height: 2rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.kredits-amount, &.voting {
+        text-align: right;
+      }
+    }
+
+    span {
+      &.title {
+        a {
+          text-decoration: none;
+          color: $body-text-color;
+        }
+        a:hover, a:active {
+          color: $primary-color;
+        }
+      }
+    }
+
+    .description {
+      line-height: 1.4em;
+      font-size: 1rem;
+    }
+
+    .category {
+      color: $blue;
+      padding-right: 0.2rem;
+      &.community { color: $red; }
+      &.dev       { color: $pink; }
+      &.design    { color: $yellow; }
+      &.docs      { color: $green; }
+      &.ops       { color: $purple; }
+    }
+
+    .amount {
+      font-weight: 500;
+    }
+
+    .symbol {
+      font-size: 0.8rem;
+      padding-left: 0.2rem;
+    }
+
+    .recipient {
+      font-weight: 500;
+    }
+
+    .votes {
+      font-size: 1rem;
+      color: $primary-color;
+      margin-right: 0.5rem;
+    }
+  }
+}

app/styles/components/_contributor-list.scss

@@ -1,46 +1,59 @@
 table.contributor-list {
+  position: relative;
   width: 100%;
   border-collapse: collapse;
+  margin-bottom: 1.5rem;
 
   tr {
-    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: $item-highlighted-background-color;
+    }
+
+    &.current-user {
+      font-weight: 500;
     }
 
     td {
       padding: 0 1.2rem;
-      line-height: 4.2rem;
+      line-height: 3.6rem;
 
-      background-color: rgba(255,255,255,0.1);
       &.person {
         text-align: left;
-        font-size: 1.4rem;
+        font-size: 1.2rem;
+
         img.avatar {
-          width: 2rem;
-          height: 2rem;
-          vertical-align: middle;
           margin-right: 0.2rem;
-          border-radius: 1rem;
         }
       }
 
       &.kredits {
         text-align: right;
+
         .amount {
-          font-size: 1.4rem;
+          font-size: 1.2rem;
+          font-weight: 500;
         }
+
         .symbol {
-          font-size: 1rem;
+          font-size: 0.8rem;
           padding-left: 0.2rem;
         }
       }
     }
+  }
 
-    &.current-user {
-      td {
-        background-color: rgba(255,255,255,0.2);
-      }
+  &.loading {
+    @include loading-border-top;
+    &::before {
+      position: absolute;
     }
   }
 }