From bd4d80f5b1a2c1c34be77ee680486ef504ed6ad5 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Thu, 3 Sep 2020 18:21:59 +0300
Subject: [PATCH 01/14] Frontend: Fix font config

---
 vue-app/src/styles/_fonts.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/vue-app/src/styles/_fonts.scss b/vue-app/src/styles/_fonts.scss
index a92fc3c0b..7b9dc5488 100644
--- a/vue-app/src/styles/_fonts.scss
+++ b/vue-app/src/styles/_fonts.scss
@@ -2,7 +2,15 @@
 
 @font-face {
   font-family: 'Glacial Indifference';
-  src: url('assets/fonts/GlacialIndifference-Regular.otf') format('otf');
-  font-weight: medium;
   font-style: normal;
+  font-weight: normal;
+  src: url('~@/assets/fonts/GlacialIndifference-Regular.otf') format('opentype');
 }
+
+@font-face {
+  font-family: 'Glacial Indifference';
+  font-style: normal;
+  font-weight: bold;
+  src: url('~@/assets/fonts/GlacialIndifference-Bold.otf') format('opentype');
+}
+

From 54d3667e4b830f8beb3e680d689d6916b998da05 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Thu, 3 Sep 2020 18:23:05 +0300
Subject: [PATCH 02/14] Frontend: Switch router to hash mode

The 'history' mode doesn't work well with relative urls.
---
 vue-app/src/router/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
index fe292a017..7cc7ff7ad 100644
--- a/vue-app/src/router/index.ts
+++ b/vue-app/src/router/index.ts
@@ -8,18 +8,17 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'Home',
+    name: 'home',
     component: Home,
   },
   {
     path: '/about',
-    name: 'About',
+    name: 'about',
     component: About,
   },
 ]
 
 const router = new VueRouter({
-  mode: 'history',
   base: window.location.pathname,
   routes,
 })

From e72d7ed66f94acd0a60df210237276f122a8bc56 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Thu, 3 Sep 2020 19:08:59 +0300
Subject: [PATCH 03/14] Frontend: Add project page

---
 vue-app/src/App.vue                    | 11 +++--
 vue-app/src/api/projects.ts            | 43 ++++++++++++------
 vue-app/src/components/ProjectItem.vue |  7 ++-
 vue-app/src/router/index.ts            |  6 +++
 vue-app/src/views/About.vue            | 11 ++++-
 vue-app/src/views/Home.vue             |  7 +--
 vue-app/src/views/Project.vue          | 62 ++++++++++++++++++++++++++
 7 files changed, 123 insertions(+), 24 deletions(-)
 create mode 100644 vue-app/src/views/Project.vue

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 01fc74d56..2345ca68f 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -45,6 +45,11 @@ html {
   color: $text-color;
 }
 
+a {
+  color: $text-color;
+  text-decoration: none;
+}
+
 .btn {
   background-color: $button-color;
   border: none;
@@ -130,13 +135,13 @@ html {
   flex-grow: 1;
   padding: $content-space;
 
-  h1 {
-    border-bottom: $border;
+  .content-heading {
+    display: block;
     font-family: 'Glacial Indifference', sans-serif;
     font-size: 14px;
     font-weight: normal;
     letter-spacing: 6px;
-    margin: 0 0 $content-space;
+    margin: 0;
     padding-bottom: $content-space;
     text-transform: uppercase;
   }
diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
index c3a6c783b..4baa468df 100644
--- a/vue-app/src/api/projects.ts
+++ b/vue-app/src/api/projects.ts
@@ -1,3 +1,6 @@
+import { Event } from 'ethers'
+import { isAddress } from '@ethersproject/address'
+
 import { factory, ipfsGatewayUrl } from './core'
 
 export interface Project {
@@ -8,22 +11,36 @@ export interface Project {
   index: number;
 }
 
+function decodeRecipientAdded(event: Event): Project {
+  const args = event.args as any // eslint-disable-line @typescript-eslint/no-explicit-any
+  const metadata = JSON.parse(args._metadata)
+  return {
+    address: args._fundingAddress,
+    name: metadata.name,
+    description: metadata.description,
+    imageUrl: `${ipfsGatewayUrl}${metadata.imageHash}`,
+    index: args._index.toNumber(),
+  }
+}
+
 export async function getProjects(): Promise<Project[]> {
   const recipientFilter = factory.filters.RecipientAdded()
   const events = await factory.queryFilter(recipientFilter, 0)
   const projects: Project[] = []
-  events.forEach(event => {
-    if (!event.args) {
-      return
-    }
-    const metadata = JSON.parse(event.args._metadata)
-    projects.push({
-      address: event.args._fundingAddress,
-      name: metadata.name,
-      description: metadata.description,
-      imageUrl: `${ipfsGatewayUrl}${metadata.imageHash}`,
-      index: event.args._index.toNumber(),
-    })
-  })
+  for (const event of events) {
+    projects.push(decodeRecipientAdded(event))
+  }
   return projects
 }
+
+export async function getProject(address: string): Promise<Project | null> {
+  if (!isAddress(address)) {
+    return null
+  }
+  const recipientFilter = factory.filters.RecipientAdded(address)
+  const events = await factory.queryFilter(recipientFilter, 0)
+  if (events.length === 1) {
+    return decodeRecipientAdded(events[0])
+  }
+  return null
+}
diff --git a/vue-app/src/components/ProjectItem.vue b/vue-app/src/components/ProjectItem.vue
index 976f7e4b8..ad50628bb 100644
--- a/vue-app/src/components/ProjectItem.vue
+++ b/vue-app/src/components/ProjectItem.vue
@@ -2,7 +2,12 @@
   <div class="project-item">
     <img class="project-image" v-bind:src="project.imageUrl" v-bind:alt="project.name">
     <div class="project-info">
-      <div class="project-name">{{ project.name }}</div>
+      <router-link
+        class="project-name"
+        :to="{ name: 'project', params: { address: project.address }}"
+      >
+        {{ project.name }}
+      </router-link>
       <div class="project-description">{{ project.description }}</div>
       <button
         class="btn contribute-btn"
diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
index 7cc7ff7ad..cff0ee232 100644
--- a/vue-app/src/router/index.ts
+++ b/vue-app/src/router/index.ts
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import About from '../views/About.vue'
+import ProjectView from '../views/Project.vue'
 
 Vue.use(VueRouter)
 
@@ -16,6 +17,11 @@ const routes = [
     name: 'about',
     component: About,
   },
+  {
+    path: '/project/:address',
+    name: 'project',
+    component: ProjectView,
+  },
 ]
 
 const router = new VueRouter({
diff --git a/vue-app/src/views/About.vue b/vue-app/src/views/About.vue
index 1557b92d3..4c06fadb1 100644
--- a/vue-app/src/views/About.vue
+++ b/vue-app/src/views/About.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="about">
-    <h1>About</h1>
+    <h1 class="content-heading">About</h1>
     <p>Clr.fund is a protocol for efficiently allocating funds to public goods that benefit the Ethereum Network according to the preferences of the Ethereum Community. Clr.fund strives for credible neutrality, decentralization, permissionlessness, trustlessness, and pseudonymity.</p>
   </div>
 </template>
+
+<style scoped lang="scss">
+@import '../styles/vars';
+
+.content-heading {
+  border-bottom: $border;
+  margin-bottom: $content-space;
+}
+</style>
diff --git a/vue-app/src/views/Home.vue b/vue-app/src/views/Home.vue
index 31b33178e..8fd2cb51b 100644
--- a/vue-app/src/views/Home.vue
+++ b/vue-app/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <h1>Home</h1>
+    <h1 class="content-heading">Home</h1>
     <div v-if="currentRound" class="round-info">
       <div class="round-info-item">
         <div class="round-info-title">Current Round:</div>
@@ -108,11 +108,6 @@ export default class Home extends Vue {
 <style scoped lang="scss">
 @import '../styles/vars';
 
-#content h1 {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
 .round-info {
   display: flex;
   flex-wrap: wrap;
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
new file mode 100644
index 000000000..b99707473
--- /dev/null
+++ b/vue-app/src/views/Project.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="project">
+    <router-link class="content-heading" to="/">⟵ All projects</router-link>
+    <div v-if="project" class="project-page">
+      <img class="project-image" :src="project.imageUrl" :alt="project.name">
+      <h2 class="project-name">{{ project.name }}</h2>
+      <div class="project-description">{{ project.description }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { Project, getProject } from '@/api/projects'
+
+@Component({
+  name: 'ProjectView',
+})
+export default class ProjectView extends Vue {
+
+  project: Project | null = null
+
+  async created() {
+    const project = await getProject(this.$route.params.address)
+    if (project !== null) {
+      this.project = project
+    } else {
+      // Not found
+      this.$router.push({ name: 'home' })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/vars';
+
+.project-image {
+  border: $border;
+  border-radius: 20px;
+  display: block;
+  height: 300px;
+  object-fit: cover;
+  text-align: center;
+  width: 100%;
+}
+
+.project-name {
+  font-family: 'Glacial Indifference', sans-serif;
+  font-weight: bold;
+  font-size: 40px;
+  letter-spacing: -0.015em;
+}
+
+.project-description {
+  font-size: 20px;
+}
+
+
+</style>

From 3ea2baf8c08b1510adbadfc8a56c5ae9e1a82051 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Thu, 3 Sep 2020 19:11:00 +0300
Subject: [PATCH 04/14] Frontend: Rename ProjectItem component to
 ProjectListItem

---
 .../components/{ProjectItem.vue => ProjectListItem.vue}   | 2 +-
 vue-app/src/views/Home.vue                                | 8 ++++----
 vue-app/tests/unit/example.spec.ts                        | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename vue-app/src/components/{ProjectItem.vue => ProjectListItem.vue} (97%)

diff --git a/vue-app/src/components/ProjectItem.vue b/vue-app/src/components/ProjectListItem.vue
similarity index 97%
rename from vue-app/src/components/ProjectItem.vue
rename to vue-app/src/components/ProjectListItem.vue
index ad50628bb..f4688581c 100644
--- a/vue-app/src/components/ProjectItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -31,7 +31,7 @@ import { ADD_CART_ITEM } from '@/store/mutation-types'
 const CART_MAX_SIZE = 10
 
 @Component
-export default class ProjectItem extends Vue {
+export default class ProjectListItem extends Vue {
   @Prop()
   project!: Project;
 
diff --git a/vue-app/src/views/Home.vue b/vue-app/src/views/Home.vue
index 8fd2cb51b..39ff30e80 100644
--- a/vue-app/src/views/Home.vue
+++ b/vue-app/src/views/Home.vue
@@ -36,12 +36,12 @@
       </div>
     </div>
     <div class="project-list">
-      <ProjectItem
+      <project-list-item
         v-for="project in projects"
         v-bind:project="project"
         v-bind:key="project.address"
       >
-      </ProjectItem>
+      </project-list-item>
     </div>
   </div>
 </template>
@@ -55,14 +55,14 @@ import { getContributionAmount } from '@/api/contributions'
 import { RoundInfo } from '@/api/round'
 import { Project, getProjects } from '@/api/projects'
 
-import ProjectItem from '@/components/ProjectItem.vue'
+import ProjectListItem from '@/components/ProjectListItem.vue'
 import { LOAD_ROUND_INFO } from '@/store/action-types'
 import { SET_CONTRIBUTION } from '@/store/mutation-types'
 
 @Component({
   name: 'Home',
   components: {
-    ProjectItem,
+    ProjectListItem,
   },
 })
 export default class Home extends Vue {
diff --git a/vue-app/tests/unit/example.spec.ts b/vue-app/tests/unit/example.spec.ts
index b0483a789..574aeba5f 100644
--- a/vue-app/tests/unit/example.spec.ts
+++ b/vue-app/tests/unit/example.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import ProjectItem from '@/components/ProjectItem.vue'
+import ProjectListItem from '@/components/ProjectListItem.vue'
 
-describe('ProjectItem.vue', () => {
+describe('ProjectListItem.vue', () => {
   it('renders props.msg when passed', () => {
-    const wrapper = shallowMount(ProjectItem, {
+    const wrapper = shallowMount(ProjectListItem, {
       propsData: { project: {} },
     })
     expect(wrapper.text()).to.include('')

From 27a7244de6c55c327be9f6eb611b78684e837d6d Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Thu, 3 Sep 2020 19:18:41 +0300
Subject: [PATCH 05/14] Frontend: Add contribution button to project page

---
 vue-app/src/api/contributions.ts           |  3 +++
 vue-app/src/components/ProjectListItem.vue |  4 +---
 vue-app/src/views/Project.vue              | 23 ++++++++++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/vue-app/src/api/contributions.ts b/vue-app/src/api/contributions.ts
index 074a38898..d4adb7a33 100644
--- a/vue-app/src/api/contributions.ts
+++ b/vue-app/src/api/contributions.ts
@@ -4,6 +4,9 @@ import { FundingRound } from './abi'
 import { provider } from './core'
 import { Project } from './projects'
 
+// A size of message batch
+export const CART_MAX_SIZE = 10
+
 export interface CartItem extends Project {
   amount: number;
 }
diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index f4688581c..91cb09dfc 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -24,12 +24,10 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
+import { CART_MAX_SIZE } from '@/api/contributions'
 import { Project } from '@/api/projects'
 import { ADD_CART_ITEM } from '@/store/mutation-types'
 
-// A size of message batch
-const CART_MAX_SIZE = 10
-
 @Component
 export default class ProjectListItem extends Vue {
   @Prop()
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index b99707473..695cafb52 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -4,6 +4,13 @@
     <div v-if="project" class="project-page">
       <img class="project-image" :src="project.imageUrl" :alt="project.name">
       <h2 class="project-name">{{ project.name }}</h2>
+      <button
+        class="btn contribute-btn"
+        :disabled="!canContribute()"
+        @click="contribute()"
+      >
+        Contribute
+      </button>
       <div class="project-description">{{ project.description }}</div>
     </div>
   </div>
@@ -13,7 +20,9 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 
+import { CART_MAX_SIZE } from '@/api/contributions'
 import { Project, getProject } from '@/api/projects'
+import { ADD_CART_ITEM } from '@/store/mutation-types'
 
 @Component({
   name: 'ProjectView',
@@ -31,6 +40,14 @@ export default class ProjectView extends Vue {
       this.$router.push({ name: 'home' })
     }
   }
+
+  canContribute() {
+    return this.$store.state.cart.length < CART_MAX_SIZE
+  }
+
+  contribute() {
+    this.$store.commit(ADD_CART_ITEM, { ...this.project, amount: 0 })
+  }
 }
 </script>
 
@@ -52,6 +69,12 @@ export default class ProjectView extends Vue {
   font-weight: bold;
   font-size: 40px;
   letter-spacing: -0.015em;
+  margin: $content-space 0;
+}
+
+.contribute-btn {
+  margin: 0 0 $content-space;
+  width: 300px;
 }
 
 .project-description {

From 25362cca0f453043de1a96cc7f3194878d12a42a Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 4 Sep 2020 01:21:36 +0300
Subject: [PATCH 06/14] Frontend: Load round info on every page

---
 vue-app/src/App.vue                        | 13 ++++++++++-
 vue-app/src/components/Cart.vue            |  3 +--
 vue-app/src/components/ProjectListItem.vue |  2 +-
 vue-app/src/views/Home.vue                 | 27 ++++++++--------------
 vue-app/src/views/Project.vue              |  2 --
 5 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 2345ca68f..4e7968a33 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -18,15 +18,26 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
 import Cart from '@/components/Cart.vue'
 import Profile from '@/components/Profile.vue'
+import { LOAD_ROUND_INFO } from '@/store/action-types'
 
-export default {
+@Component({
   name: 'clr.fund',
   components: {
     Cart,
     Profile,
   },
+})
+export default class App extends Vue {
+
+  created() {
+    this.$store.dispatch(LOAD_ROUND_INFO)
+  }
+
 }
 </script>
 
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 0e763c6bb..232e49426 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -108,7 +108,7 @@ export default class Cart extends Vue {
     }, 0)
   }
 
-  async contribute() {
+  contribute() {
     this.$modal.show(
       ContributionModal,
       { },
@@ -122,7 +122,6 @@ export default class Cart extends Vue {
 }
 </script>
 
-
 <style scoped lang="scss">
 @import '../styles/vars';
 
diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index 91cb09dfc..5025f6239 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -33,7 +33,7 @@ export default class ProjectListItem extends Vue {
   @Prop()
   project!: Project;
 
-  canContribute() {
+  canContribute(): boolean {
     return this.$store.state.cart.length < CART_MAX_SIZE
   }
 
diff --git a/vue-app/src/views/Home.vue b/vue-app/src/views/Home.vue
index 39ff30e80..88a01984a 100644
--- a/vue-app/src/views/Home.vue
+++ b/vue-app/src/views/Home.vue
@@ -73,27 +73,20 @@ export default class Home extends Vue {
     return this.$store.state.currentRound
   }
 
-  private async updateCurrentRound() {
-    await this.$store.dispatch(LOAD_ROUND_INFO)
-    const walletAddress = this.$store.state.account
-    if (this.currentRound && walletAddress) {
-      const contribution = await getContributionAmount(
-        walletAddress,
-        this.currentRound.fundingRoundAddress,
-        this.currentRound.nativeTokenDecimals,
-      )
-      this.$store.commit(SET_CONTRIBUTION, contribution)
-    }
-  }
-
   async mounted() {
     this.projects = await getProjects()
-    this.updateCurrentRound()
     this.$store.watch(
       (state) => state.account,
-      async (account: string) => {
-        if (this.currentRound && account) {
-          this.updateCurrentRound()
+      async (walletAddress: string) => {
+        // Reload round info when user changes wallet account
+        await this.$store.dispatch(LOAD_ROUND_INFO)
+        if (this.currentRound && walletAddress) {
+          const contribution = await getContributionAmount(
+            walletAddress,
+            this.currentRound.fundingRoundAddress,
+            this.currentRound.nativeTokenDecimals,
+          )
+          this.$store.commit(SET_CONTRIBUTION, contribution)
         }
       },
     )
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index 695cafb52..909b7e2dd 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -80,6 +80,4 @@ export default class ProjectView extends Vue {
 .project-description {
   font-size: 20px;
 }
-
-
 </style>

From deb8c4129e904be7657aa3117b9b014efb3bd6e9 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 4 Sep 2020 12:37:04 +0300
Subject: [PATCH 07/14] Frontend: Move loader styles to main stylesheet

---
 vue-app/src/App.vue                          | 32 ++++++++++++++++++--
 vue-app/src/components/ContributionModal.vue | 32 +-------------------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 4e7968a33..c822a2d79 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -54,6 +54,8 @@ body {
 html {
   background-color: $bg-primary-color;
   color: $text-color;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
 }
 
 a {
@@ -85,8 +87,6 @@ a {
 
 #app {
   display: flex;
-  font-family: Inter, sans-serif;
-  font-size: 14px;
   height: 100%;
 }
 
@@ -166,4 +166,32 @@ a {
   min-width: 300px;
   width: 20%;
 }
+
+.loader {
+  display: block;
+  width: 40px;
+  height: 40px;
+  margin: 20px auto;
+}
+
+.loader:after {
+  content: " ";
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 4px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: loader 1.2s linear infinite;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/vue-app/src/components/ContributionModal.vue b/vue-app/src/components/ContributionModal.vue
index 717b47ace..99445f45d 100644
--- a/vue-app/src/components/ContributionModal.vue
+++ b/vue-app/src/components/ContributionModal.vue
@@ -154,40 +154,10 @@ export default class ContributionModal extends Vue {
 
 .modal-body {
   background-color: $bg-light-color;
-  font-family: Inter, sans-serif;
-  font-size: 14px;
-  padding: 10px 20px 20px;
+  padding: 20px;
   text-align: center;
 }
 
-.loader {
-  display: block;
-  width: 40px;
-  height: 40px;
-  margin: 20px auto;
-}
-
-.loader:after {
-  content: " ";
-  display: block;
-  width: 32px;
-  height: 32px;
-  margin: 4px;
-  border-radius: 50%;
-  border: 6px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: loader 1.2s linear infinite;
-}
-
-@keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .hex {
   background-color: #666;
   font-family: monospace;

From 86df727a1893ef3eff672d4b74501bd63bf58a3c Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 4 Sep 2020 13:48:08 +0300
Subject: [PATCH 08/14] Frontend: Allow to claim allocated funds

---
 vue-app/.eslintrc.js                         |  1 +
 vue-app/src/App.vue                          |  9 ++
 vue-app/src/components/Cart.vue              |  8 +-
 vue-app/src/components/ClaimModal.vue        | 94 ++++++++++++++++++++
 vue-app/src/components/ContributionModal.vue | 16 ++--
 vue-app/src/utils/maci.ts                    | 36 +++++++-
 vue-app/src/views/Project.vue                | 34 ++++++-
 7 files changed, 180 insertions(+), 18 deletions(-)
 create mode 100644 vue-app/src/components/ClaimModal.vue

diff --git a/vue-app/.eslintrc.js b/vue-app/.eslintrc.js
index 2d306d5dd..930dd967d 100644
--- a/vue-app/.eslintrc.js
+++ b/vue-app/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
       'error',
       'never',
     ],
+    '@typescript-eslint/no-explicit-any': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },
diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index c822a2d79..560d94a16 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -63,6 +63,15 @@ a {
   text-decoration: none;
 }
 
+.input {
+  background-color: $bg-light-color;
+  border: 2px solid $button-color;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: $text-color;
+  padding: 7px;
+}
+
 .btn {
   background-color: $button-color;
   border: none;
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 232e49426..631f3cac6 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -9,7 +9,7 @@
         <input
           :value="item.amount"
           @input="updateAmount(item, $event.target.value)"
-          class="contribution-amount"
+          class="input contribution-amount"
           name="amount"
           placeholder="Amount"
         >
@@ -173,13 +173,7 @@ $project-image-size: 50px;
   padding-left: $project-image-size + 15px;
 
   .contribution-amount {
-    background-color: $bg-light-color;
-    border: 2px solid $button-color;
-    border-radius: 2px;
-    box-sizing: border-box;
-    color: white;
     font-size: 12px;
-    padding: 7px;
     width: 60%;
   }
 
diff --git a/vue-app/src/components/ClaimModal.vue b/vue-app/src/components/ClaimModal.vue
new file mode 100644
index 000000000..127bcec9f
--- /dev/null
+++ b/vue-app/src/components/ClaimModal.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="modal-body">
+    <div v-if="step === 1">
+      <h3>Step 1 of 3: Provide URL of vote tally</h3>
+      <input
+        :value="tallyUrl"
+        @input="tallyUrl = $event.target.value"
+        class="input"
+        name="tally-url"
+      >
+      <button
+        class="btn"
+        :disabled="!tallyUrl"
+        @click="claim()"
+      >
+        Continue
+      </button>
+    </div>
+    <div v-if="step === 2">
+      <h3>Step 2 of 3: Claim funds</h3>
+      <div>Please confirm transaction in your wallet</div>
+      <div class="loader"></div>
+    </div>
+    <div v-if="step === 3">
+      <h3>Step 3 of 3: Success</h3>
+      <div>Funds has been sent to {{ project.address }}</div>
+      <button class="btn" @click="$emit('close')">OK</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
+import { Contract, Signer } from 'ethers'
+
+import { FundingRound } from '@/api/abi'
+import { Project } from '@/api/projects'
+import { getRecipientClaimData } from '@/utils/maci'
+
+@Component
+export default class ClaimModal extends Vue {
+
+  @Prop()
+  project!: Project
+
+  step = 1
+
+  tallyUrl = ''
+  tally: any
+
+  private getSigner(): Signer {
+    const provider = this.$store.state.walletProvider
+    return provider.getSigner()
+  }
+
+  async claim() {
+    const response = await fetch(this.tallyUrl)
+    this.tally = await response.json()
+    this.step += 1
+    const signer = this.getSigner()
+    const { fundingRoundAddress } = this.$store.state.currentRound
+    const fundingRound = new Contract(fundingRoundAddress, FundingRound, signer)
+    const recipientClaimData = getRecipientClaimData(
+      this.project.address,
+      this.project.index,
+      this.tally,
+    )
+    await fundingRound.claimFunds(...recipientClaimData)
+    this.step += 1
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/vars';
+
+.modal-body {
+  background-color: $bg-light-color;
+  padding: 20px;
+  text-align: center;
+}
+
+.input[name="tally-url"] {
+  display: block;
+  margin: 20px auto;
+  width: 100%;
+}
+
+.btn {
+  margin-top: 20px;
+}
+</style>
diff --git a/vue-app/src/components/ContributionModal.vue b/vue-app/src/components/ContributionModal.vue
index 99445f45d..8fbc7c00b 100644
--- a/vue-app/src/components/ContributionModal.vue
+++ b/vue-app/src/components/ContributionModal.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="modal-body">
-    <div v-if="contributionStep === 1">
+    <div v-if="step === 1">
       <h3>Step 1 of 4: Approve</h3>
       <div>Please confirm transaction in your wallet</div>
       <div class="loader"></div>
     </div>
-    <div v-if="contributionStep === 2">
+    <div v-if="step === 2">
       <h3>Step 2 of 4: Contribute</h3>
       <div>Please confirm transaction in your wallet</div>
       <div class="loader"></div>
     </div>
-    <div v-if="contributionStep === 3">
+    <div v-if="step === 3">
       <h3>Step 3 of 4: Are you being bribed?</h3>
       <button class="btn" @click="vote()">No</button>
     </div>
-    <div v-if="contributionStep === 4">
+    <div v-if="step === 4">
       <h3>Step 4 of 4: Vote</h3>
       <div>Please send this transaction to {{ currentRound.fundingRoundAddress }} after {{ currentRound.contributionDeadline | formatDate }}:</div>
       <div class="hex">{{ voteTxData }}</div>
@@ -51,7 +51,7 @@ interface Contributor {
 @Component
 export default class ContributionModal extends Vue {
 
-  contributionStep = 1
+  step = 1
 
   private amount: BigNumber = BigNumber.from(0)
   private votes: [number, BigNumber][] = []
@@ -92,7 +92,7 @@ export default class ContributionModal extends Vue {
     if (allowance < this.amount) {
       await token.approve(fundingRoundAddress, this.amount)
     }
-    this.contributionStep += 1
+    this.step += 1
     // Contribute
     const contributorKeypair = new Keypair()
     const fundingRound = new Contract(fundingRoundAddress, FundingRound, signer)
@@ -104,7 +104,7 @@ export default class ContributionModal extends Vue {
     const maci = new Contract(maciAddress, MACI, signer)
     const stateIndex = await getEventArg(contributionTx, maci, 'SignUp', '_stateIndex')
     const voiceCredits = await getEventArg(contributionTx, maci, 'SignUp', '_voiceCreditBalance')
-    this.contributionStep += 1
+    this.step += 1
     this.contributor = {
       keypair: contributorKeypair,
       stateIndex,
@@ -123,7 +123,7 @@ export default class ContributionModal extends Vue {
     if (!this.contributor) {
       return
     }
-    this.contributionStep += 1
+    this.step += 1
     const { coordinatorPubKey, fundingRoundAddress } = this.currentRound
     const messages: Message[] = []
     const encPubKeys: PubKey[] = []
diff --git a/vue-app/src/utils/maci.ts b/vue-app/src/utils/maci.ts
index 7e79fd924..d2959db2c 100644
--- a/vue-app/src/utils/maci.ts
+++ b/vue-app/src/utils/maci.ts
@@ -1,5 +1,5 @@
 import { BigNumber } from 'ethers'
-import { bigInt, genRandomSalt } from 'maci-crypto'
+import { bigInt, SnarkBigInt, genRandomSalt, IncrementalQuinTree } from 'maci-crypto'
 import { Keypair, PubKey, Command, Message } from 'maci-domainobjs'
 
 function bnSqrt(a: BigNumber): BigNumber {
@@ -47,3 +47,37 @@ export function createMessage(
   )
   return [message, encKeypair.pubKey]
 }
+
+export function getRecipientClaimData(
+  recipientAddress: string,
+  recipientIndex: number,
+  tally: any,
+): any[] {
+  const TREE_DEPTH = 2
+  // Create proof for tally result
+  const result = tally.results.tally[recipientIndex]
+  const resultSalt = tally.results.salt
+  const resultTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  for (const leaf of tally.results.tally) {
+    resultTree.insert(leaf)
+  }
+  const resultProof = resultTree.genMerklePath(recipientIndex)
+  // Create proof for total amount of spent voice credits
+  const spent = tally.totalVoiceCreditsPerVoteOption.tally[recipientIndex]
+  const spentSalt = tally.totalVoiceCreditsPerVoteOption.salt
+  const spentTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  for (const leaf of tally.totalVoiceCreditsPerVoteOption.tally) {
+    spentTree.insert(leaf)
+  }
+  const spentProof = spentTree.genMerklePath(recipientIndex)
+
+  return [
+    recipientAddress,
+    result,
+    resultProof.pathElements.map((x) => x.map((y: SnarkBigInt) => y.toString())),
+    resultSalt,
+    spent,
+    spentProof.pathElements.map((x) => x.map((y: SnarkBigInt) => y.toString())),
+    spentSalt,
+  ]
+}
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index 909b7e2dd..997b3bb99 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -11,6 +11,13 @@
       >
         Contribute
       </button>
+      <button
+        class="btn claim-btn"
+        :disabled="!canClaim()"
+        @click="claim()"
+      >
+        Claim
+      </button>
       <div class="project-description">{{ project.description }}</div>
     </div>
   </div>
@@ -22,6 +29,8 @@ import Component from 'vue-class-component'
 
 import { CART_MAX_SIZE } from '@/api/contributions'
 import { Project, getProject } from '@/api/projects'
+import { RoundStatus } from '@/api/round'
+import ClaimModal from '@/components/ClaimModal.vue'
 import { ADD_CART_ITEM } from '@/store/mutation-types'
 
 @Component({
@@ -48,6 +57,26 @@ export default class ProjectView extends Vue {
   contribute() {
     this.$store.commit(ADD_CART_ITEM, { ...this.project, amount: 0 })
   }
+
+  canClaim(): boolean {
+    const currentRound = this.$store.state.currentRound
+    if (currentRound) {
+      return currentRound.status === RoundStatus.Finalized
+    }
+    return false
+  }
+
+  claim() {
+    this.$modal.show(
+      ClaimModal,
+      { project: this.project },
+      {
+        clickToClose: false,
+        height: 'auto',
+        width: 450,
+      },
+    )
+  }
 }
 </script>
 
@@ -72,8 +101,9 @@ export default class ProjectView extends Vue {
   margin: $content-space 0;
 }
 
-.contribute-btn {
-  margin: 0 0 $content-space;
+.contribute-btn,
+.claim-btn {
+  margin: 0 $content-space $content-space 0;
   width: 300px;
 }
 

From 9b9bd021cbe849c70f64a5580eb00fad7a2bb74e Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 4 Sep 2020 13:51:34 +0300
Subject: [PATCH 09/14] Contracts: Finalize round when running tally script

---
 contracts/scripts/claim.ts | 6 ------
 contracts/scripts/tally.ts | 8 ++++++++
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/contracts/scripts/claim.ts b/contracts/scripts/claim.ts
index bfa9b0209..077ef02fc 100644
--- a/contracts/scripts/claim.ts
+++ b/contracts/scripts/claim.ts
@@ -6,14 +6,8 @@ import { getRecipientClaimData } from '../utils/maci'
 
 async function main() {
   const [,,, recipient1, recipient2] = await ethers.getSigners()
-  // Finalize the round
   const state = JSON.parse(fs.readFileSync('state.json').toString())
-  const factory = await ethers.getContractAt('FundingRoundFactory', state.factory)
   const tally = JSON.parse(fs.readFileSync('tally.json').toString())
-  const totalSpent = parseInt(tally.totalVoiceCredits.spent)
-  const totalSpentSalt = tally.totalVoiceCredits.salt
-  await factory.transferMatchingFunds(totalSpent, totalSpentSalt)
-  console.log('Round finalized, totals verified.')
 
   const fundingRound = await ethers.getContractAt('FundingRound', state.fundingRound)
   // Claim funds
diff --git a/contracts/scripts/tally.ts b/contracts/scripts/tally.ts
index 70cadbda9..c80ba372f 100644
--- a/contracts/scripts/tally.ts
+++ b/contracts/scripts/tally.ts
@@ -63,6 +63,14 @@ async function main() {
     yarn maci-cli verify --tally-file tally.json
   `)
   console.log(verifyCmdOutput)
+
+  // Finalize the round
+  const factory = await ethers.getContractAt('FundingRoundFactory', state.factory)
+  const tally = JSON.parse(fs.readFileSync('tally.json').toString())
+  const totalSpent = parseInt(tally.totalVoiceCredits.spent)
+  const totalSpentSalt = tally.totalVoiceCredits.salt
+  await factory.transferMatchingFunds(totalSpent, totalSpentSalt)
+  console.log('Round finalized, totals verified.')
 }
 
 main()

From 0ac5a753af26ec0b29ae55338244ef6d535d1a6e Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 4 Sep 2020 15:01:36 +0300
Subject: [PATCH 10/14] Frontend: Show the amount of claimed tokens

---
 vue-app/src/components/ClaimModal.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/vue-app/src/components/ClaimModal.vue b/vue-app/src/components/ClaimModal.vue
index 127bcec9f..eb00846be 100644
--- a/vue-app/src/components/ClaimModal.vue
+++ b/vue-app/src/components/ClaimModal.vue
@@ -23,7 +23,7 @@
     </div>
     <div v-if="step === 3">
       <h3>Step 3 of 3: Success</h3>
-      <div>Funds has been sent to {{ project.address }}</div>
+      <div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to {{ project.address }}</div>
       <button class="btn" @click="$emit('close')">OK</button>
     </div>
   </div>
@@ -33,10 +33,12 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Prop } from 'vue-property-decorator'
-import { Contract, Signer } from 'ethers'
+import { Contract, FixedNumber, Signer } from 'ethers'
 
 import { FundingRound } from '@/api/abi'
 import { Project } from '@/api/projects'
+import { RoundInfo } from '@/api/round'
+import { getEventArg } from '@/utils/contracts'
 import { getRecipientClaimData } from '@/utils/maci'
 
 @Component
@@ -49,6 +51,11 @@ export default class ClaimModal extends Vue {
 
   tallyUrl = ''
   tally: any
+  amount = FixedNumber.from(0)
+
+  get currentRound(): RoundInfo {
+    return this.$store.state.currentRound
+  }
 
   private getSigner(): Signer {
     const provider = this.$store.state.walletProvider
@@ -60,14 +67,18 @@ export default class ClaimModal extends Vue {
     this.tally = await response.json()
     this.step += 1
     const signer = this.getSigner()
-    const { fundingRoundAddress } = this.$store.state.currentRound
+    const { fundingRoundAddress, nativeTokenDecimals } = this.currentRound
     const fundingRound = new Contract(fundingRoundAddress, FundingRound, signer)
     const recipientClaimData = getRecipientClaimData(
       this.project.address,
       this.project.index,
       this.tally,
     )
-    await fundingRound.claimFunds(...recipientClaimData)
+    const claimTx = await fundingRound.claimFunds(...recipientClaimData)
+    this.amount = FixedNumber.fromValue(
+      await getEventArg(claimTx, fundingRound, 'FundsClaimed', '_amount'),
+      nativeTokenDecimals,
+    )
     this.step += 1
   }
 }

From 5f5d9c247610de00567114f43f05deb9d3257d7d Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Sat, 5 Sep 2020 00:20:43 +0300
Subject: [PATCH 11/14] Frontend: Deactivate 'claim' button if funds has been
 already claimed

---
 vue-app/src/api/claims.ts          | 23 +++++++++++++++++
 vue-app/src/views/Project.vue      | 40 +++++++++++++++++++++++++-----
 vue-app/tests/unit/example.spec.ts |  3 +++
 3 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 vue-app/src/api/claims.ts

diff --git a/vue-app/src/api/claims.ts b/vue-app/src/api/claims.ts
new file mode 100644
index 000000000..e1cbbd964
--- /dev/null
+++ b/vue-app/src/api/claims.ts
@@ -0,0 +1,23 @@
+import { BigNumber, Contract } from 'ethers'
+
+import { FundingRound } from './abi'
+import { provider } from './core'
+
+export async function getClaimedAmount(
+  fundingRoundAddress: string,
+  recipientAddress: string,
+): Promise<BigNumber | null> {
+  const fundingRound = new Contract(fundingRoundAddress, FundingRound, provider)
+  // TODO: filter by recipient
+  const eventFilter = fundingRound.filters.FundsClaimed()
+  const events = await fundingRound.queryFilter(eventFilter, 0)
+  for (const event of events) {
+    if (!event.args) {
+      continue
+    }
+    if (event.args._recipient.toLowerCase() === recipientAddress.toLowerCase()) {
+      return event.args._amount
+    }
+  }
+  return null
+}
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index 997b3bb99..c82ef4e39 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -27,9 +27,11 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 
+
+import { getClaimedAmount } from '@/api/claims'
 import { CART_MAX_SIZE } from '@/api/contributions'
 import { Project, getProject } from '@/api/projects'
-import { RoundStatus } from '@/api/round'
+import { RoundInfo, RoundStatus } from '@/api/round'
 import ClaimModal from '@/components/ClaimModal.vue'
 import { ADD_CART_ITEM } from '@/store/mutation-types'
 
@@ -39,15 +41,34 @@ import { ADD_CART_ITEM } from '@/store/mutation-types'
 export default class ProjectView extends Vue {
 
   project: Project | null = null
+  claimedFunds: boolean | null = null
+
+  private async checkClaim(round: RoundInfo) {
+    if (!this.project || !round) {
+      return
+    }
+    const claimedAmount = await getClaimedAmount(
+      round.fundingRoundAddress,
+      this.project.address,
+    )
+    this.claimedFunds = claimedAmount !== null
+  }
 
   async created() {
     const project = await getProject(this.$route.params.address)
     if (project !== null) {
       this.project = project
     } else {
-      // Not found
+      // Project not found
       this.$router.push({ name: 'home' })
+      return
     }
+    // Wait for round info to load and get claim status
+    this.$store.watch(
+      (state) => state.currentRound,
+      this.checkClaim,
+    )
+    this.checkClaim(this.$store.state.currentRound)
   }
 
   canContribute() {
@@ -60,10 +81,12 @@ export default class ProjectView extends Vue {
 
   canClaim(): boolean {
     const currentRound = this.$store.state.currentRound
-    if (currentRound) {
-      return currentRound.status === RoundStatus.Finalized
-    }
-    return false
+    return (
+      currentRound &&
+      currentRound.status === RoundStatus.Finalized &&
+      this.$store.state.account &&
+      this.claimedFunds === false
+    )
   }
 
   claim() {
@@ -75,6 +98,11 @@ export default class ProjectView extends Vue {
         height: 'auto',
         width: 450,
       },
+      {
+        closed: () => {
+          this.checkClaim(this.$store.state.currentRound)
+        },
+      },
     )
   }
 }
diff --git a/vue-app/tests/unit/example.spec.ts b/vue-app/tests/unit/example.spec.ts
index 574aeba5f..a9e83ae0b 100644
--- a/vue-app/tests/unit/example.spec.ts
+++ b/vue-app/tests/unit/example.spec.ts
@@ -6,6 +6,9 @@ describe('ProjectListItem.vue', () => {
   it('renders props.msg when passed', () => {
     const wrapper = shallowMount(ProjectListItem, {
       propsData: { project: {} },
+      mocks: {
+        $store: { state: { cart: [] } },
+      },
     })
     expect(wrapper.text()).to.include('')
   })

From 0230db8b0726720554d079c512d16f71d455db42 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Mon, 7 Sep 2020 22:01:24 +0300
Subject: [PATCH 12/14] Frontend: Read recipient tree depth from MACI contract

---
 contracts/e2e/index.ts                |  2 ++
 contracts/scripts/claim.ts            |  6 ++++++
 contracts/utils/maci.ts               |  6 +++---
 vue-app/src/api/round.ts              | 12 ++++++++----
 vue-app/src/components/ClaimModal.vue |  3 ++-
 vue-app/src/utils/maci.ts             |  6 +++---
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/contracts/e2e/index.ts b/contracts/e2e/index.ts
index ae8f1127f..2a97ce0ca 100644
--- a/contracts/e2e/index.ts
+++ b/contracts/e2e/index.ts
@@ -167,12 +167,14 @@ describe('End-to-end Tests', function () {
 
     // Claim funds
     tally.claims = {}
+    const recipientTreeDepth = (await maci.treeDepths()).voteOptionTreeDepth
     for (const recipientIndex of [1, 2]) {
       const recipient = recipientIndex === 1 ? recipient1 : recipient2
       const recipientAddress = await recipient.getAddress()
       const recipientClaimData = getRecipientClaimData(
         recipientAddress,
         recipientIndex,
+        recipientTreeDepth,
         tally,
       )
       const claimTx = await fundingRound.connect(recipient).claimFunds(...recipientClaimData)
diff --git a/contracts/scripts/claim.ts b/contracts/scripts/claim.ts
index 077ef02fc..d6a76bd0b 100644
--- a/contracts/scripts/claim.ts
+++ b/contracts/scripts/claim.ts
@@ -1,6 +1,7 @@
 import fs from 'fs'
 import { ethers } from '@nomiclabs/buidler'
 
+import MACIArtifact from '../build/contracts/MACI.json'
 import { getEventArg } from '../utils/contracts'
 import { getRecipientClaimData } from '../utils/maci'
 
@@ -10,12 +11,17 @@ async function main() {
   const tally = JSON.parse(fs.readFileSync('tally.json').toString())
 
   const fundingRound = await ethers.getContractAt('FundingRound', state.fundingRound)
+  const maciAddress = await fundingRound.maci()
+  const maci = await ethers.getContractAt(MACIArtifact.abi, maciAddress)
+  const recipientTreeDepth = (await maci.treeDepths()).voteOptionTreeDepth
+
   // Claim funds
   for (const recipientIndex of [1, 2]) {
     const recipient = recipientIndex === 1 ? recipient1 : recipient2
     const recipientClaimData = getRecipientClaimData(
       await recipient.getAddress(),
       recipientIndex,
+      recipientTreeDepth,
       tally,
     )
     const fundingRoundAsRecipient = fundingRound.connect(recipient)
diff --git a/contracts/utils/maci.ts b/contracts/utils/maci.ts
index 302f1f755..54a023f0c 100644
--- a/contracts/utils/maci.ts
+++ b/contracts/utils/maci.ts
@@ -82,13 +82,13 @@ export function createMessage(
 export function getRecipientClaimData(
   recipientAddress: string,
   recipientIndex: number,
+  recipientTreeDepth: number,
   tally: any,
 ): any[] {
-  const TREE_DEPTH = 2
   // Create proof for tally result
   const result = tally.results.tally[recipientIndex]
   const resultSalt = tally.results.salt
-  const resultTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  const resultTree = new IncrementalQuinTree(recipientTreeDepth, bigInt(0))
   for (const leaf of tally.results.tally) {
     resultTree.insert(leaf)
   }
@@ -96,7 +96,7 @@ export function getRecipientClaimData(
   // Create proof for total amount of spent voice credits
   const spent = tally.totalVoiceCreditsPerVoteOption.tally[recipientIndex]
   const spentSalt = tally.totalVoiceCreditsPerVoteOption.salt
-  const spentTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  const spentTree = new IncrementalQuinTree(recipientTreeDepth, bigInt(0))
   for (const leaf of tally.totalVoiceCreditsPerVoteOption.tally) {
     spentTree.insert(leaf)
   }
diff --git a/vue-app/src/api/round.ts b/vue-app/src/api/round.ts
index 0df5666ea..8d6c2488d 100644
--- a/vue-app/src/api/round.ts
+++ b/vue-app/src/api/round.ts
@@ -1,14 +1,15 @@
-import { ethers, BigNumber, FixedNumber } from 'ethers'
+import { BigNumber, Contract, FixedNumber } from 'ethers'
 import { DateTime } from 'luxon'
 import { bigInt } from 'maci-crypto'
 import { PubKey } from 'maci-domainobjs'
 
-import { FundingRound, ERC20 } from './abi'
+import { FundingRound, MACI, ERC20 } from './abi'
 import { provider, factory } from './core'
 
 export interface RoundInfo {
   fundingRoundAddress: string;
   maciAddress: string;
+  recipientTreeDepth: number;
   coordinatorPubKey: PubKey;
   nativeTokenAddress: string;
   nativeTokenSymbol: string;
@@ -34,19 +35,21 @@ export async function getRoundInfo(): Promise<RoundInfo | null> {
   if (fundingRoundAddress === '0x0000000000000000000000000000000000000000') {
     return null
   }
-  const fundingRound = new ethers.Contract(
+  const fundingRound = new Contract(
     fundingRoundAddress,
     FundingRound,
     provider,
   )
   const maciAddress = await fundingRound.maci()
+  const maci = new Contract(maciAddress, MACI, provider)
+  const recipientTreeDepth = (await maci.treeDepths()).voteOptionTreeDepth
   const coordinatorPubKeyRaw = await fundingRound.coordinatorPubKey()
   const coordinatorPubKey = new PubKey([
     bigInt(coordinatorPubKeyRaw.x),
     bigInt(coordinatorPubKeyRaw.y),
   ])
   const nativeTokenAddress = await fundingRound.nativeToken()
-  const nativeToken = new ethers.Contract(
+  const nativeToken = new Contract(
     nativeTokenAddress,
     ERC20,
     provider,
@@ -96,6 +99,7 @@ export async function getRoundInfo(): Promise<RoundInfo | null> {
   return {
     fundingRoundAddress,
     maciAddress,
+    recipientTreeDepth,
     coordinatorPubKey,
     nativeTokenAddress,
     nativeTokenSymbol,
diff --git a/vue-app/src/components/ClaimModal.vue b/vue-app/src/components/ClaimModal.vue
index eb00846be..ea0097a9d 100644
--- a/vue-app/src/components/ClaimModal.vue
+++ b/vue-app/src/components/ClaimModal.vue
@@ -67,11 +67,12 @@ export default class ClaimModal extends Vue {
     this.tally = await response.json()
     this.step += 1
     const signer = this.getSigner()
-    const { fundingRoundAddress, nativeTokenDecimals } = this.currentRound
+    const { fundingRoundAddress, recipientTreeDepth, nativeTokenDecimals } = this.currentRound
     const fundingRound = new Contract(fundingRoundAddress, FundingRound, signer)
     const recipientClaimData = getRecipientClaimData(
       this.project.address,
       this.project.index,
+      recipientTreeDepth,
       this.tally,
     )
     const claimTx = await fundingRound.claimFunds(...recipientClaimData)
diff --git a/vue-app/src/utils/maci.ts b/vue-app/src/utils/maci.ts
index d2959db2c..0d68cc143 100644
--- a/vue-app/src/utils/maci.ts
+++ b/vue-app/src/utils/maci.ts
@@ -51,13 +51,13 @@ export function createMessage(
 export function getRecipientClaimData(
   recipientAddress: string,
   recipientIndex: number,
+  recipientTreeDepth: number,
   tally: any,
 ): any[] {
-  const TREE_DEPTH = 2
   // Create proof for tally result
   const result = tally.results.tally[recipientIndex]
   const resultSalt = tally.results.salt
-  const resultTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  const resultTree = new IncrementalQuinTree(recipientTreeDepth, bigInt(0))
   for (const leaf of tally.results.tally) {
     resultTree.insert(leaf)
   }
@@ -65,7 +65,7 @@ export function getRecipientClaimData(
   // Create proof for total amount of spent voice credits
   const spent = tally.totalVoiceCreditsPerVoteOption.tally[recipientIndex]
   const spentSalt = tally.totalVoiceCreditsPerVoteOption.salt
-  const spentTree = new IncrementalQuinTree(TREE_DEPTH, bigInt(0))
+  const spentTree = new IncrementalQuinTree(recipientTreeDepth, bigInt(0))
   for (const leaf of tally.totalVoiceCreditsPerVoteOption.tally) {
     spentTree.insert(leaf)
   }

From 0e125f3bab6f82328903bd9c2145a531c538c75e Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Wed, 9 Sep 2020 00:20:26 +0300
Subject: [PATCH 13/14] Frontend: Wait for transactions to confirm

---
 vue-app/src/components/ContributionModal.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/vue-app/src/components/ContributionModal.vue b/vue-app/src/components/ContributionModal.vue
index 8fbc7c00b..c0d55a1cf 100644
--- a/vue-app/src/components/ContributionModal.vue
+++ b/vue-app/src/components/ContributionModal.vue
@@ -2,12 +2,14 @@
   <div class="modal-body">
     <div v-if="step === 1">
       <h3>Step 1 of 4: Approve</h3>
-      <div>Please confirm transaction in your wallet</div>
+      <div v-if="!approvalTx">Please approve transaction in your wallet</div>
+      <div v-if="approvalTx">Waiting for confirmation...</div>
       <div class="loader"></div>
     </div>
     <div v-if="step === 2">
       <h3>Step 2 of 4: Contribute</h3>
-      <div>Please confirm transaction in your wallet</div>
+      <div v-if="!contributionTx">Please approve transaction in your wallet</div>
+      <div v-if="contributionTx">Waiting for confirmation...</div>
       <div class="loader"></div>
     </div>
     <div v-if="step === 3">
@@ -27,6 +29,7 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { BigNumber, Contract, FixedNumber, Signer } from 'ethers'
+import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { parseFixed } from '@ethersproject/bignumber'
 import { Keypair, PubKey, Message } from 'maci-domainobjs'
 
@@ -56,6 +59,9 @@ export default class ContributionModal extends Vue {
   private amount: BigNumber = BigNumber.from(0)
   private votes: [number, BigNumber][] = []
   private contributor?: Contributor
+
+  approvalTx: TransactionResponse | null = null
+  contributionTx: TransactionResponse | null = null
   voteTxData = ''
 
   mounted() {
@@ -90,7 +96,9 @@ export default class ContributionModal extends Vue {
     // Approve transfer
     const allowance = await token.allowance(signer.getAddress(), fundingRoundAddress)
     if (allowance < this.amount) {
-      await token.approve(fundingRoundAddress, this.amount)
+      const approvalTx = await token.approve(fundingRoundAddress, this.amount)
+      this.approvalTx = approvalTx
+      await approvalTx.wait()
     }
     this.step += 1
     // Contribute
@@ -100,6 +108,7 @@ export default class ContributionModal extends Vue {
       contributorKeypair.pubKey.asContractParam(),
       this.amount,
     )
+    this.contributionTx = contributionTx
     // Get state index and amount of voice credits
     const maci = new Contract(maciAddress, MACI, signer)
     const stateIndex = await getEventArg(contributionTx, maci, 'SignUp', '_stateIndex')

From 04b3df451ef7dfdbb6e7895f4d6f0fc034a1e346 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Wed, 9 Sep 2020 01:07:56 +0300
Subject: [PATCH 14/14] Frontend: Fix styles

---
 vue-app/src/App.vue             | 4 +---
 vue-app/src/components/Cart.vue | 4 +++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 560d94a16..16cd4b3aa 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -96,7 +96,7 @@ a {
 
 #app {
   display: flex;
-  height: 100%;
+  min-height: 100%;
 }
 
 #nav-bar {
@@ -169,8 +169,6 @@ a {
 
 #user-bar {
   background-color: $bg-light-color;
-  display: flex;
-  flex-direction: column;
   flex-shrink: 0;
   min-width: 300px;
   width: 20%;
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 631f3cac6..632a13d9a 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -128,7 +128,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  height: calc(100vh - 110px);
 }
 
 .cart-item {
@@ -184,6 +184,8 @@ $project-image-size: 50px;
 
   .remove-cart-item {
     cursor: pointer;
+    margin-left: 7px;
+    min-width: 20px;
     width: 20px;
 
     &:hover {