From cee98424bcb6ab9294bd38c4c5a373860180dba2 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 00:40:33 +0300
Subject: [PATCH 1/8] Frontend: Fix various UI bugs

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

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index ad57e8496..6044df84b 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -93,7 +93,7 @@ a {
 
   img {
     height: 1em;
-    margin: 0 10px;
+    margin: 0 10px 0 0;
     vertical-align: middle;
   }
 
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 2591be5a1..322074ec5 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -355,7 +355,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 110px);
+  min-height: calc(100vh - 110px);
 }
 
 .cart-item {
@@ -381,11 +381,12 @@ $project-image-size: 50px;
   }
 
   .project-name {
+    align-self: center;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     flex-grow: 1;
-    height: $project-image-size;
+    max-height: $project-image-size;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/vue-app/src/components/Profile.vue b/vue-app/src/components/Profile.vue
index f648475cc..3ebd86272 100644
--- a/vue-app/src/components/Profile.vue
+++ b/vue-app/src/components/Profile.vue
@@ -134,6 +134,10 @@ export default class Profile extends Vue {
   padding: $content-space;
 }
 
+.provider-error {
+  text-align: center;
+}
+
 .connect-btn {
   display: block;
   margin: 0 auto;

From 466a1ba3929ea088555b1ab9c470effe25e14ce7 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 01:14:59 +0300
Subject: [PATCH 2/8] Frontend: Show correct network name when working with
 xDai

---
 vue-app/src/components/Profile.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/vue-app/src/components/Profile.vue b/vue-app/src/components/Profile.vue
index 3ebd86272..0c85da19c 100644
--- a/vue-app/src/components/Profile.vue
+++ b/vue-app/src/components/Profile.vue
@@ -5,7 +5,7 @@
       v-else-if="walletProvider && !isCorrectNetwork()"
       class="provider-error"
     >
-      Please change network to {{ jsonRpcNetwork.name }}
+      Please change network to {{ networkName }}
     </div>
     <button
       v-else-if="walletProvider && !currentUser"
@@ -40,7 +40,7 @@ const LOGIN_MESSAGE = 'Sign this message to access clr.fund'
 @Component
 export default class Profile extends Vue {
 
-  jsonRpcNetwork: Network | null = null
+  private jsonRpcNetwork: Network | null = null
   private walletChainId = '0xNaN'
   profileImageUrl: string | null = null
 
@@ -89,6 +89,16 @@ export default class Profile extends Vue {
     return this.jsonRpcNetwork.chainId === parseInt(this.walletChainId, 16)
   }
 
+  get networkName(): string {
+    if (this.jsonRpcNetwork === null) {
+      return ''
+    } else if (this.jsonRpcNetwork.name === 'unknown' && this.jsonRpcNetwork.chainId === 100) {
+      return 'xdai'
+    } else {
+      return this.jsonRpcNetwork.name
+    }
+  }
+
   async connect(): Promise<void> {
     if (!this.walletProvider || !this.walletProvider.request) {
       return

From 34ceb53cb5a28fe0a798e7852b05be381d73f541 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 15:46:34 +0300
Subject: [PATCH 3/8] Frontend: Use css grid to align items in project list

---
 vue-app/src/components/ProjectListItem.vue | 3 ---
 vue-app/src/views/Home.vue                 | 8 ++++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index d5b8d39a5..dd2aa854a 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -74,9 +74,6 @@ export default class ProjectListItem extends Vue {
   border: $border;
   border-radius: 20px;
   box-sizing: border-box;
-  flex: 1 0 20%;
-  margin: 0 ($content-space / 2) $content-space;
-  min-width: 200px;
 
   &:hover {
     .project-image {
diff --git a/vue-app/src/views/Home.vue b/vue-app/src/views/Home.vue
index c0b8278ca..a08624e2e 100644
--- a/vue-app/src/views/Home.vue
+++ b/vue-app/src/views/Home.vue
@@ -101,6 +101,7 @@ export default class Home extends Vue {
   display: flex;
   flex-wrap: wrap;
   font-size: 12px;
+  margin-bottom: $content-space;
 
   .round-info-item {
     border-right: $border;
@@ -130,9 +131,8 @@ export default class Home extends Vue {
 }
 
 .project-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: $content-space (-$content-space / 2) 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: $content-space;
 }
 </style>

From 88c68644e361f74541194d18542ac34a4968bd38 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 17:09:53 +0300
Subject: [PATCH 4/8] Frontend: Rename home page to 'projects'

---
 vue-app/src/App.vue                             | 2 +-
 vue-app/src/router/index.ts                     | 6 +++---
 vue-app/src/views/{Home.vue => ProjectList.vue} | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename vue-app/src/views/{Home.vue => ProjectList.vue} (96%)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 6044df84b..5a95dfa05 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -3,7 +3,7 @@
     <div id="nav-bar">
       <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
       <div id="nav-menu">
-        <router-link to="/">Home</router-link>
+        <router-link to="/">Projects</router-link>
         <router-link to="/about">About</router-link>
         <a href="https://blog.clr.fund" target=_blank>Blog</a>
         <a href="https://forum.clr.fund" target=_blank>Forum</a>
diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
index cff0ee232..a58aa87a0 100644
--- a/vue-app/src/router/index.ts
+++ b/vue-app/src/router/index.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import ProjectList from '../views/ProjectList.vue'
 import About from '../views/About.vue'
 import ProjectView from '../views/Project.vue'
 
@@ -9,8 +9,8 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: Home,
+    name: 'projects',
+    component: ProjectList,
   },
   {
     path: '/about',
diff --git a/vue-app/src/views/Home.vue b/vue-app/src/views/ProjectList.vue
similarity index 96%
rename from vue-app/src/views/Home.vue
rename to vue-app/src/views/ProjectList.vue
index a08624e2e..f0fab9769 100644
--- a/vue-app/src/views/Home.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="home">
-    <h1 class="content-heading">Home</h1>
+  <div class="projects">
+    <h1 class="content-heading">Projects</h1>
     <div v-if="currentRound" class="round-info">
       <div class="round-info-item">
         <div class="round-info-title">Current Round:</div>
@@ -57,12 +57,12 @@ import { Project, getProjects } from '@/api/projects'
 import ProjectListItem from '@/components/ProjectListItem.vue'
 
 @Component({
-  name: 'Home',
+  name: 'project-list',
   components: {
     ProjectListItem,
   },
 })
-export default class Home extends Vue {
+export default class ProjectList extends Vue {
 
   projects: Project[] = []
 

From e1f4807edde828034a9cf36faad8e6a8964ac981 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 17:17:00 +0300
Subject: [PATCH 5/8] Frontend: Show project name in page title

---
 vue-app/package.json              |  1 +
 vue-app/public/index.html         |  2 +-
 vue-app/src/App.vue               |  4 ++++
 vue-app/src/main.ts               |  2 ++
 vue-app/src/views/About.vue       | 11 +++++++++++
 vue-app/src/views/Project.vue     |  3 +++
 vue-app/src/views/ProjectList.vue |  1 +
 yarn.lock                         | 12 ++++++++++++
 8 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/vue-app/package.json b/vue-app/package.json
index 5c092f36b..0c85258bb 100644
--- a/vue-app/package.json
+++ b/vue-app/package.json
@@ -20,6 +20,7 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
     "vue-js-modal": "^2.0.0-rc.6",
+    "vue-meta": "^2.4.0",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"
diff --git a/vue-app/public/index.html b/vue-app/public/index.html
index c91d31c2f..277c122d3 100644
--- a/vue-app/public/index.html
+++ b/vue-app/public/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <title>clr.fund</title>
+    <meta name="description" content="Permissionless quadtratic funding for public goods">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 5a95dfa05..eefde605a 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -29,6 +29,10 @@ import { LOAD_ROUND_INFO } from '@/store/action-types'
 
 @Component({
   name: 'clr.fund',
+  metaInfo: {
+    title: 'clr.fund',
+    titleTemplate: 'clr.fund - %s',
+  },
   components: {
     Cart,
     Profile,
diff --git a/vue-app/src/main.ts b/vue-app/src/main.ts
index 0bf199186..7ee9917ab 100644
--- a/vue-app/src/main.ts
+++ b/vue-app/src/main.ts
@@ -4,8 +4,10 @@ import router from './router'
 import store from './store'
 import './filters'
 
+import Meta from 'vue-meta'
 import VModal from 'vue-js-modal'
 
+Vue.use(Meta)
 Vue.use(VModal)
 
 Vue.config.productionTip = false
diff --git a/vue-app/src/views/About.vue b/vue-app/src/views/About.vue
index 1d0a9c366..375d0f7d3 100644
--- a/vue-app/src/views/About.vue
+++ b/vue-app/src/views/About.vue
@@ -25,6 +25,17 @@
   </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component({
+  name: 'about',
+  metaInfo: { title: 'About' },
+})
+export default class About extends Vue { }
+</script>
+
 <style scoped lang="scss">
 @import '../styles/vars';
 
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index a7bda5637..49c0c530c 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -52,6 +52,9 @@ import { ADD_CART_ITEM } from '@/store/mutation-types'
 
 @Component({
   name: 'ProjectView',
+  metaInfo() {
+    return { title: (this as any).project?.name || '' }
+  },
 })
 export default class ProjectView extends Vue {
 
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index f0fab9769..24c927d10 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -58,6 +58,7 @@ import ProjectListItem from '@/components/ProjectListItem.vue'
 
 @Component({
   name: 'project-list',
+  metaInfo: { title: 'Projects' },
   components: {
     ProjectListItem,
   },
diff --git a/yarn.lock b/yarn.lock
index f141041a9..cb9c2c508 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5355,6 +5355,11 @@ deepmerge@^2.1.0:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -17791,6 +17796,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-meta@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
+  integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
+  dependencies:
+    deepmerge "^4.2.2"
+
 vue-property-decorator@^8.3.0:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.1.tgz#fd8045b8678e1348fed57f9149279e00e404ed38"

From 3da8cc8b3e4473f822e194ad1da755a27f540795 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 17:58:09 +0300
Subject: [PATCH 6/8] Frontend: Apply rounding to allocated token amount

---
 vue-app/src/components/ClaimModal.vue | 2 +-
 vue-app/src/views/Project.vue         | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/vue-app/src/components/ClaimModal.vue b/vue-app/src/components/ClaimModal.vue
index 02b60b5b0..dfdb78641 100644
--- a/vue-app/src/components/ClaimModal.vue
+++ b/vue-app/src/components/ClaimModal.vue
@@ -8,7 +8,7 @@
     </div>
     <div v-if="step === 2">
       <h3>Step 2 of 2: Success</h3>
-      <div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to {{ project.address }}</div>
+      <div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to <code>{{ project.address }}</code></div>
       <button class="btn close-btn" @click="$emit('close')">OK</button>
     </div>
   </div>
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index 49c0c530c..7073344fb 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -26,10 +26,10 @@
         @click="claim()"
       >
         <template v-if="claimed">
-          Received {{ allocatedAmount | formatAmount }} {{ tokenSymbol }}
+          Received {{ formatAmount(allocatedAmount) }} {{ tokenSymbol }}
         </template>
         <template v-else>
-          Claim {{ allocatedAmount | formatAmount }} {{ tokenSymbol }}
+          Claim {{ formatAmount(allocatedAmount)  }} {{ tokenSymbol }}
         </template>
       </button>
       <div class="project-description">{{ project.description }}</div>
@@ -139,6 +139,11 @@ export default class ProjectView extends Vue {
     )
   }
 
+  formatAmount(value: FixedNumber | null): string {
+    const decimals = 6
+    return value ? value.toUnsafeFloat().toFixed(decimals) : ''
+  }
+
   claim() {
     this.$modal.show(
       ClaimModal,

From 22ab5a20f48af39450cd4a006dde0cbe61b2d9ea Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 18:34:24 +0300
Subject: [PATCH 7/8] Frontend: Make logo image clickable in project list item

---
 vue-app/src/components/ProjectListItem.vue | 24 ++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index dd2aa854a..ce0bb57b4 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="project-item">
-    <img class="project-image" v-bind:src="project.imageUrl" v-bind:alt="project.name">
+    <router-link
+      class="project-image"
+      :to="{ name: 'project', params: { address: project.address }}"
+    >
+      <img :src="project.imageUrl" :alt="project.name">
+    </router-link>
     <div class="project-info">
       <router-link
         class="project-name"
@@ -88,14 +93,17 @@ export default class ProjectListItem extends Vue {
 }
 
 .project-image {
-  border: none;
-  border-radius: 20px 20px 0 0;
   display: block;
-  height: 150px;
-  margin: 0 auto;
-  object-fit: cover;
-  text-align: center;
-  width: 100%;
+
+  img {
+    border: none;
+    border-radius: 20px 20px 0 0;
+    display: block;
+    height: 150px;
+    object-fit: cover;
+    text-align: center;
+    width: 100%;
+  }
 }
 
 .project-info {

From 05edf0385e763c833270f9483a1180d7bde83548 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Fri, 23 Oct 2020 19:05:15 +0300
Subject: [PATCH 8/8] Frontend: Handle invalid recipient metadata

Issue #163
---
 vue-app/src/api/projects.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
index 479e821c0..8dbe1f31d 100644
--- a/vue-app/src/api/projects.ts
+++ b/vue-app/src/api/projects.ts
@@ -32,7 +32,13 @@ export async function getProjects(atBlock?: number): Promise<Project[]> {
   const recipientRemovedEvents = await factory.queryFilter(recipientRemovedFilter, 0)
   const projects: Project[] = []
   for (const event of recipientAddedEvents) {
-    const project = decodeRecipientAdded(event)
+    let project
+    try {
+      project = decodeRecipientAdded(event)
+    } catch {
+      // Invalid metadata
+      continue
+    }
     const removed = recipientRemovedEvents.find((event) => {
       return (event.args as any)._recipient === project.address
     })
@@ -59,7 +65,12 @@ export async function getProject(address: string): Promise<Project | null> {
   if (recipientAddedEvents.length !== 1) {
     return null
   }
-  const project = decodeRecipientAdded(recipientAddedEvents[0])
+  let project
+  try {
+    project = decodeRecipientAdded(recipientAddedEvents[0])
+  } catch {
+    return null
+  }
   const recipientRemovedFilter = factory.filters.RecipientRemoved(address)
   const recipientRemovedEvents = await factory.queryFilter(recipientRemovedFilter, 0)
   if (recipientRemovedEvents.length !== 0) {