From 5adbf8241ec7fe838a18dbb9cea5c352e459579a Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Wed, 27 Jul 2022 17:10:26 -0400
Subject: [PATCH 01/20] allow owner to add recipient for simple recipient type

---
 vue-app/src/components/CriteriaModal.vue      |  2 +-
 vue-app/src/store/getters.ts                  | 10 +++++++--
 vue-app/src/views/Join.vue                    |  9 ++------
 vue-app/src/views/JoinLanding.vue             | 14 ++++++++++---
 vue-app/src/views/JoinOptimistic.vue          |  4 ++--
 vue-app/src/views/Landing.vue                 |  3 ++-
 vue-app/src/views/MetadataForm.vue            | 19 -----------------
 .../src/views/MetadataTransactionSuccess.vue  | 21 ++++++++++---------
 vue-app/src/views/ProjectList.vue             | 15 +++++++++++--
 vue-app/src/views/RecipientRegistry.vue       |  8 -------
 10 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/vue-app/src/components/CriteriaModal.vue b/vue-app/src/components/CriteriaModal.vue
index f903d132b..9662a47a4 100644
--- a/vue-app/src/components/CriteriaModal.vue
+++ b/vue-app/src/components/CriteriaModal.vue
@@ -35,7 +35,7 @@
       </div>
       <links
         v-if="$store.getters.isRecipientRegistrationOpen"
-        :to="$store.getters.addProjectUrl"
+        :to="$store.getters.joinFormUrl()"
         class="btn-primary fit-content"
         >Add project</links
       >
diff --git a/vue-app/src/store/getters.ts b/vue-app/src/store/getters.ts
index a9bd06562..97f494017 100644
--- a/vue-app/src/store/getters.ts
+++ b/vue-app/src/store/getters.ts
@@ -231,9 +231,15 @@ const getters = {
   requireRegistrationDeposit: (state: RootState): boolean => {
     return !!state.recipientRegistryInfo?.requireRegistrationDeposit
   },
-  addProjectUrl: (): string => {
-    return '/join/project'
+  canAddProject: (_, getters): boolean => {
+    const { requireRegistrationDeposit, isRecipientRegistryOwner } = getters
+    return requireRegistrationDeposit || isRecipientRegistryOwner
   },
+  joinFormUrl:
+    () =>
+    (metadataId?: string): string => {
+      return metadataId ? `/join/metadata/${metadataId}` : '/join/project'
+    },
   maxRecipients: (state: RootState): number | undefined => {
     const { currentRound, maciFactory } = state
     if (currentRound) {
diff --git a/vue-app/src/views/Join.vue b/vue-app/src/views/Join.vue
index ac5e3f0e6..86163733c 100644
--- a/vue-app/src/views/Join.vue
+++ b/vue-app/src/views/Join.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <join-optimistic v-if="isOptimisticRegistry" />
+    <join-optimistic v-if="$store.getters.canAddProject" />
     <not-found v-else />
   </div>
 </template>
@@ -10,7 +10,6 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import NotFound from '@/views/NotFound.vue'
 import JoinOptimistic from '@/views/JoinOptimistic.vue'
-import { recipientRegistryType, RecipientRegistryType } from '@/api/core'
 
 @Component({
   components: {
@@ -18,9 +17,5 @@ import { recipientRegistryType, RecipientRegistryType } from '@/api/core'
     NotFound,
   },
 })
-export default class JoinView extends Vue {
-  get isOptimisticRegistry(): boolean {
-    return recipientRegistryType === RecipientRegistryType.OPTIMISTIC
-  }
-}
+export default class JoinView extends Vue {}
 </script>
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index bf57e6f04..2375a7504 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="join-landing">
+  <not-found id="not-found" v-if="!$store.getters.canAddProject" />
+  <div v-else id="join-landing">
     <div class="gradient">
       <div class="hero">
         <image-responsive title="core" />
@@ -11,6 +12,7 @@
     <div class="breadcrumbs">
       <breadcrumbs />
     </div>
+
     <div class="content" v-if="loading">
       <h1>Fetching round data...</h1>
       <loader />
@@ -111,7 +113,7 @@
         </button>
         <links
           v-if="$store.getters.isRecipientRegistrationOpen"
-          :to="$store.getters.addProjectUrl"
+          :to="$store.getters.joinFormUrl()"
           class="btn-primary"
           >Add project</links
         >
@@ -145,7 +147,7 @@
         </button>
         <links
           v-if="$store.getters.isRecipientRegistrationOpen"
-          :to="$store.getters.addProjectUrl"
+          :to="$store.getters.joinFormUrl()"
           class="btn-primary"
           >Add project</links
         >
@@ -173,6 +175,7 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 
 import { getCurrentRound } from '@/api/round'
 import { formatAmount } from '@/utils/amounts'
+import NotFound from '@/views/NotFound.vue'
 
 @Component({
   components: {
@@ -183,6 +186,7 @@ import { formatAmount } from '@/utils/amounts'
     TimeLeft,
     ImageResponsive,
     Breadcrumbs,
+    NotFound,
   },
 })
 export default class JoinLanding extends Vue {
@@ -433,4 +437,8 @@ h1 {
 .btn-container {
   margin-top: 2.5rem;
 }
+
+#not-found {
+  width: 100%;
+}
 </style>
diff --git a/vue-app/src/views/JoinOptimistic.vue b/vue-app/src/views/JoinOptimistic.vue
index b54beb437..e0bcecd77 100644
--- a/vue-app/src/views/JoinOptimistic.vue
+++ b/vue-app/src/views/JoinOptimistic.vue
@@ -11,13 +11,13 @@
         :isStepValid="isStepValid"
         :handleStepNav="handleStepNav"
         :saveFormData="saveFormData"
-        cancelRedirectUrl="/join"
+        cancelRedirectUrl="/projects"
       />
       <div class="title-area">
         <h1>Join the round</h1>
       </div>
       <div class="cancel-area desktop">
-        <links class="cancel-link" to="/join"> Cancel </links>
+        <links class="cancel-link" to="/projects"> Cancel </links>
       </div>
       <loader v-if="loading" />
       <div v-if="!loading" class="form-area">
diff --git a/vue-app/src/views/Landing.vue b/vue-app/src/views/Landing.vue
index e03c66064..1c23832f5 100644
--- a/vue-app/src/views/Landing.vue
+++ b/vue-app/src/views/Landing.vue
@@ -24,7 +24,8 @@
             class="apply-callout"
             v-if="
               $store.getters.isRoundJoinPhase &&
-              !$store.getters.isRecipientRegistryFull
+              !$store.getters.isRecipientRegistryFull &&
+              $store.getters.requireRegistrationDeposit
             "
           >
             <div class="column">
diff --git a/vue-app/src/views/MetadataForm.vue b/vue-app/src/views/MetadataForm.vue
index 0ed4d443c..41ac17992 100644
--- a/vue-app/src/views/MetadataForm.vue
+++ b/vue-app/src/views/MetadataForm.vue
@@ -829,25 +829,6 @@ export default class MetadataForm extends mixins(validationMixin) {
     return this.toMetadata(this.form)
   }
 
-  get redirectButtons(): LinkInfo[] {
-    const id = this.receipt?.id || ''
-    const links: Array<{ url: string; text: string }> = []
-
-    if (!this.projectExists) {
-      links.push({
-        url: `/join/summary/${id}`,
-        text: 'Add project',
-      })
-    }
-
-    links.push({
-      url: `/metadata/${id}`,
-      text: 'View metadata',
-    })
-
-    return links
-  }
-
   get projectInterface(): Project {
     return this.metadataInterface.toProject()
   }
diff --git a/vue-app/src/views/MetadataTransactionSuccess.vue b/vue-app/src/views/MetadataTransactionSuccess.vue
index 2398e2d93..19c308477 100644
--- a/vue-app/src/views/MetadataTransactionSuccess.vue
+++ b/vue-app/src/views/MetadataTransactionSuccess.vue
@@ -9,18 +9,25 @@
         <div class="content">
           <span class="emoji">🎉</span>
           <div class="flex-title">
-            <h1>Ready to add project!</h1>
+            <h1>Congratulations!</h1>
             <transaction-receipt
               v-if="$route.params.hash"
               :hash="$route.params.hash"
             />
           </div>
           <div class="subtitle">
-            Your project metadata has been added successfully.
+            The project metadata has been added successfully.
           </div>
-          <p>You can now add your project as a grant recipient.</p>
+          <p v-if="$store.getters.canAddProject">
+            The project can now be added as a grant recipient.
+          </p>
           <div class="mt2 button-spacing">
-            <links :to="addProjectUrl" class="btn-primary">Add project</links>
+            <links
+              v-if="$store.getters.canAddProject"
+              :to="$store.getters.joinFormUrl($route.params.id)"
+              class="btn-primary"
+              >Add project</links
+            >
             <links :to="metadataUrl" class="btn-secondary">View metadata</links>
           </div>
         </div>
@@ -51,12 +58,6 @@ export default class Verified extends Vue {
   get metadataUrl(): string {
     return `/metadata/${this.$route.params.id}`
   }
-
-  get addProjectUrl(): string {
-    return this.$route.params.id
-      ? `/join/summary/${this.$route.params.id}`
-      : '/join/project'
-  }
 }
 </script>
 
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index 4b19a953f..633d67f76 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -38,8 +38,8 @@
             class="pointer"
           />
         </div>
-        <div class="add-project">
-          <links to="/join" class="btn-primary">Add project</links>
+        <div v-if="$store.getters.canAddProject" class="add-project">
+          <links :to="addProjectUrl" class="btn-primary">Add project</links>
         </div>
         <div class="hr" />
       </div>
@@ -201,6 +201,17 @@ export default class ProjectList extends Vue {
   clearSearch(): void {
     this.search = ''
   }
+
+  get showAddProjectButton(): boolean {
+    const { requireRegistrationDeposit, isRecipientRegistryOwner } =
+      this.$store.getters
+    return requireRegistrationDeposit || isRecipientRegistryOwner
+  }
+
+  get addProjectUrl(): string {
+    const { requireRegistrationDeposit } = this.$store.getters
+    return requireRegistrationDeposit ? '/join' : '/join/project'
+  }
 }
 </script>
 
diff --git a/vue-app/src/views/RecipientRegistry.vue b/vue-app/src/views/RecipientRegistry.vue
index 33252c37c..7853ae18c 100644
--- a/vue-app/src/views/RecipientRegistry.vue
+++ b/vue-app/src/views/RecipientRegistry.vue
@@ -153,20 +153,12 @@ import { LOAD_RECIPIENT_REGISTRY_INFO } from '@/store/action-types'
 import { RegistryInfo } from '@/api/types'
 import TransactionModal from '@/components/TransactionModal.vue'
 
-// currently only show the registry view for these types
-const showList = [RecipientRegistryType.OPTIMISTIC]
-
 @Component({ components: { CopyButton, Loader, Links } })
 export default class RecipientRegistryView extends Vue {
   requests: Request[] = []
   isLoading = true
 
   async created() {
-    if (!showList.includes(recipientRegistryType as RecipientRegistryType)) {
-      this.$router.push({ name: 'not-found' })
-      return
-    }
-
     await this.$store.dispatch(LOAD_RECIPIENT_REGISTRY_INFO)
     await this.loadRequests()
     this.isLoading = false

From 5667a5ea70a85c1fe0dc37b8705d15bbe93e632a Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Wed, 27 Jul 2022 17:12:01 -0400
Subject: [PATCH 02/20] fix lint warning

---
 vue-app/src/views/MetadataForm.vue      | 1 -
 vue-app/src/views/RecipientRegistry.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/vue-app/src/views/MetadataForm.vue b/vue-app/src/views/MetadataForm.vue
index 41ac17992..1a0bd150b 100644
--- a/vue-app/src/views/MetadataForm.vue
+++ b/vue-app/src/views/MetadataForm.vue
@@ -531,7 +531,6 @@ import {
   MetadataFormData,
   MetadataFormValidations,
 } from '@/api/metadata'
-import { LinkInfo } from '@/api/types'
 import { ReceivingAddress } from '@/api/receiving-address'
 import { Prop, Watch } from 'vue-property-decorator'
 import { chain, TransactionProgress } from '@/api/core'
diff --git a/vue-app/src/views/RecipientRegistry.vue b/vue-app/src/views/RecipientRegistry.vue
index 7853ae18c..46b778b0a 100644
--- a/vue-app/src/views/RecipientRegistry.vue
+++ b/vue-app/src/views/RecipientRegistry.vue
@@ -138,7 +138,7 @@ import * as humanizeDuration from 'humanize-duration'
 import { DateTime } from 'luxon'
 import CopyButton from '@/components/CopyButton.vue'
 
-import { recipientRegistryType, RecipientRegistryType } from '@/api/core'
+import { recipientRegistryType } from '@/api/core'
 import {
   RecipientRegistryRequestType as RequestType,
   RecipientRegistryRequestStatus as RequestStatus,

From 9ab7c5a44041a1ef5a00ed21010abc87b25d139d Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 01:00:41 -0400
Subject: [PATCH 03/20] fix typo

---
 subgraph/src/recipientRegistry/RecipientRegistryType.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/subgraph/src/recipientRegistry/RecipientRegistryType.ts b/subgraph/src/recipientRegistry/RecipientRegistryType.ts
index 40a6a702d..29cc86204 100644
--- a/subgraph/src/recipientRegistry/RecipientRegistryType.ts
+++ b/subgraph/src/recipientRegistry/RecipientRegistryType.ts
@@ -11,7 +11,7 @@ export enum RecipientRegistryType {
 
 let registryTypeMap = new TypedMap<string, RecipientRegistryType>()
 registryTypeMap.set('simple', RecipientRegistryType.Simple)
-registryTypeMap.set('klerso', RecipientRegistryType.Kleros)
+registryTypeMap.set('kleros', RecipientRegistryType.Kleros)
 registryTypeMap.set('optimistic', RecipientRegistryType.Optimistic)
 
 /**

From 4673419892704e9ba8d63f2036d4c9beda92045e Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 01:01:34 -0400
Subject: [PATCH 04/20] fix subgraph build warning

---
 subgraph/src/MACIMapping.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/subgraph/src/MACIMapping.ts b/subgraph/src/MACIMapping.ts
index fa76a8ef3..bf84663c3 100644
--- a/subgraph/src/MACIMapping.ts
+++ b/subgraph/src/MACIMapping.ts
@@ -20,7 +20,7 @@ import { FundingRound, Message, PublicKey } from '../generated/schema'
 // - contract.verifier(...)
 
 export function handlePublishMessage(event: PublishMessage): void {
-  const fundingRoundId = event.transaction.to.toHexString()
+  let fundingRoundId = event.transaction.to.toHexString()
   if (fundingRoundId == null) {
     log.error(
       'Error: handlePublishMessage failed fundingRound not registered',
@@ -28,7 +28,7 @@ export function handlePublishMessage(event: PublishMessage): void {
     )
     return
   }
-  const fundingRound = FundingRound.load(fundingRoundId)
+  let fundingRound = FundingRound.load(fundingRoundId)
   if (fundingRound == null) {
     log.error(
       'Error: handlePublishMessage failed fundingRound not registered',
@@ -37,23 +37,23 @@ export function handlePublishMessage(event: PublishMessage): void {
     return
   }
 
-  const messageID = event.transaction.hash.toHexString()
+  let messageID = event.transaction.hash.toHexString()
 
-  const timestamp = event.block.timestamp.toString()
-  const message = new Message(messageID)
+  let timestamp = event.block.timestamp.toString()
+  let message = new Message(messageID)
   message.data = event.params._message.data
   message.iv = event.params._message.iv
 
-  const publicKeyId = event.transaction.from.toHexString()
-  const publicKey = PublicKey.load(publicKeyId)
+  let publicKeyId = event.transaction.from.toHexString()
+  let publicKey = PublicKey.load(publicKeyId)
 
   //NOTE: If the public keys aren't being tracked initialize them
   if (publicKey == null) {
-    const publicKey = new PublicKey(publicKeyId)
+    let publicKey = new PublicKey(publicKeyId)
     publicKey.x = event.params._encPubKey.x
     publicKey.y = event.params._encPubKey.y
 
-    const _messages = [messageID] as string[]
+    let _messages = [messageID] as string[]
     publicKey.messages = _messages
     publicKey.fundingRound = fundingRoundId
 
@@ -68,12 +68,12 @@ export function handlePublishMessage(event: PublishMessage): void {
 }
 
 export function handleSignUp(event: SignUp): void {
-  const publicKeyId = event.transaction.from.toHexString()
-  const publicKey = PublicKey.load(publicKeyId)
+  let publicKeyId = event.transaction.from.toHexString()
+  let publicKey = PublicKey.load(publicKeyId)
 
   //NOTE: If the public keys aren't being tracked initialize them
   if (publicKey == null) {
-    const publicKey = new PublicKey(publicKeyId)
+    let publicKey = new PublicKey(publicKeyId)
     publicKey.x = event.params._userPubKey.x
     publicKey.y = event.params._userPubKey.y
     publicKey.stateIndex = event.params._stateIndex

From efae44cec2277b93ac78781a339378f1f644eb22 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 01:02:06 -0400
Subject: [PATCH 05/20] allow coordinator to add recipient for simple recipient
 registry

---
 subgraph/src/RecipientMapping.ts              |  6 ++++--
 .../KlerosRecipientRegistryMapping.ts         |  8 ++++++-
 .../SimpleRecipientRegistryMapping.ts         |  8 ++++++-
 vue-app/src/api/projects.ts                   |  8 ++-----
 vue-app/src/api/recipient-registry-simple.ts  | 16 +++++++++++---
 vue-app/src/api/recipient-registry.ts         | 21 ++++++++++++++++---
 vue-app/src/views/JoinLanding.vue             | 10 ++-------
 vue-app/src/views/JoinOptimistic.vue          | 14 ++++++-------
 vue-app/src/views/MetadataList.vue            |  2 +-
 vue-app/src/views/ProjectAdded.vue            |  9 ++++++--
 10 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/subgraph/src/RecipientMapping.ts b/subgraph/src/RecipientMapping.ts
index 64b48ef0e..614bdb305 100644
--- a/subgraph/src/RecipientMapping.ts
+++ b/subgraph/src/RecipientMapping.ts
@@ -1,10 +1,12 @@
 import { Recipient } from '../generated/schema'
 
+export const RECIPIENT_REQUEST_TYPE_REGISTRATION = '0'
+export const RECIPIENT_REQUEST_TYPE_REMOVAL = '1'
+
 export function removeRecipient(id: string, timestamp: string): void {
   let recipient = Recipient.load(id)
   if (recipient) {
-    // TODO: should we hard delete the recipient record?
-    recipient.rejected = true
+    recipient.requestType = RECIPIENT_REQUEST_TYPE_REMOVAL
     recipient.lastUpdatedAt = timestamp
     recipient.save()
   }
diff --git a/subgraph/src/recipientRegistry/KlerosRecipientRegistryMapping.ts b/subgraph/src/recipientRegistry/KlerosRecipientRegistryMapping.ts
index 6f04d3792..b09b88964 100644
--- a/subgraph/src/recipientRegistry/KlerosRecipientRegistryMapping.ts
+++ b/subgraph/src/recipientRegistry/KlerosRecipientRegistryMapping.ts
@@ -4,13 +4,19 @@ import {
 } from '../../generated/templates/KlerosRecipientRegistry/KlerosRecipientRegistry'
 
 import { Recipient } from '../../generated/schema'
-import { removeRecipient } from '../RecipientMapping'
+import {
+  removeRecipient,
+  RECIPIENT_REQUEST_TYPE_REGISTRATION,
+} from '../RecipientMapping'
 
 export function handleRecipientAdded(event: RecipientAdded): void {
   let recipientRegistryId = event.address.toHexString()
 
   let recipientId = event.params._tcrItemId.toHexString()
   let recipient = new Recipient(recipientId)
+  recipient.requestType = RECIPIENT_REQUEST_TYPE_REGISTRATION
+  // recipient was verified by kleros
+  recipient.verified = true
   recipient.recipientRegistry = recipientRegistryId
   recipient.createdAt = event.block.timestamp.toString()
   recipient.recipientIndex = event.params._index
diff --git a/subgraph/src/recipientRegistry/SimpleRecipientRegistryMapping.ts b/subgraph/src/recipientRegistry/SimpleRecipientRegistryMapping.ts
index 583f0826c..9bbc6e9e9 100644
--- a/subgraph/src/recipientRegistry/SimpleRecipientRegistryMapping.ts
+++ b/subgraph/src/recipientRegistry/SimpleRecipientRegistryMapping.ts
@@ -4,7 +4,10 @@ import {
 } from '../../generated/templates/SimpleRecipientRegistry/SimpleRecipientRegistry'
 
 import { Recipient } from '../../generated/schema'
-import { removeRecipient } from '../RecipientMapping'
+import {
+  removeRecipient,
+  RECIPIENT_REQUEST_TYPE_REGISTRATION,
+} from '../RecipientMapping'
 
 export function handleRecipientAdded(event: RecipientAdded): void {
   let recipientRegistryId = event.address.toHexString()
@@ -13,12 +16,15 @@ export function handleRecipientAdded(event: RecipientAdded): void {
   let recipient = new Recipient(recipientId)
 
   recipient.requester = event.transaction.from.toHexString()
+  recipient.requestType = RECIPIENT_REQUEST_TYPE_REGISTRATION
   recipient.recipientRegistry = recipientRegistryId
   recipient.recipientMetadata = event.params._metadata
   recipient.recipientIndex = event.params._index
   recipient.recipientAddress = event.params._recipient
   recipient.submissionTime = event.params._timestamp.toString()
   recipient.requestResolvedHash = event.transaction.hash
+  // recipients are verified as they are added by the admin
+  recipient.verified = true
   recipient.createdAt = event.block.timestamp.toString()
 
   recipient.save()
diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
index 358e0a944..b86684a3e 100644
--- a/vue-app/src/api/projects.ts
+++ b/vue-app/src/api/projects.ts
@@ -57,9 +57,7 @@ export async function getProjects(
   startTime?: number,
   endTime?: number
 ): Promise<Project[]> {
-  if (recipientRegistryType === 'simple') {
-    return await SimpleRegistry.getProjects(registryAddress, startTime, endTime)
-  } else if (recipientRegistryType === 'kleros') {
+  if (recipientRegistryType === 'kleros') {
     return await KlerosRegistry.getProjects(registryAddress, startTime, endTime)
   } else {
     return await RecipientRegistry.getProjects(
@@ -74,9 +72,7 @@ export async function getProject(
   registryAddress: string,
   recipientId: string
 ): Promise<Project | null> {
-  if (recipientRegistryType === 'simple') {
-    return await SimpleRegistry.getProject(registryAddress, recipientId)
-  } else if (recipientRegistryType === 'kleros') {
+  if (recipientRegistryType === 'kleros') {
     return await KlerosRegistry.getProject(registryAddress, recipientId)
   } else {
     return await RecipientRegistry.getProject(recipientId)
diff --git a/vue-app/src/api/recipient-registry-simple.ts b/vue-app/src/api/recipient-registry-simple.ts
index 0e12dd0fa..6ea353309 100644
--- a/vue-app/src/api/recipient-registry-simple.ts
+++ b/vue-app/src/api/recipient-registry-simple.ts
@@ -3,7 +3,7 @@ import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { isHexString } from '@ethersproject/bytes'
 
 import { SimpleRecipientRegistry } from './abi'
-import { provider, ipfsGatewayUrl } from './core'
+import { provider, ipfsGatewayUrl, chain } from './core'
 import { RecipientRegistryInterface } from './types'
 import { Project, toProjectInterface } from './projects'
 
@@ -128,8 +128,18 @@ export function addRecipient(
     SimpleRecipientRegistry,
     signer
   )
-  const { address, ...metadata } = recipientData
-  return registry.addRecipient(address, JSON.stringify(metadata))
+  const { id, fund } = recipientData
+  if (!id) {
+    throw new Error('Missing metadata id')
+  }
+
+  const { currentChainReceivingAddress: address } = fund
+  if (!address) {
+    throw new Error(`Missing recipient address for the ${chain.name} network`)
+  }
+
+  const json = { id }
+  return registry.addRecipient(address, JSON.stringify(json))
 }
 
 function removeProject() {
diff --git a/vue-app/src/api/recipient-registry.ts b/vue-app/src/api/recipient-registry.ts
index 4a27d63e7..9c447053f 100644
--- a/vue-app/src/api/recipient-registry.ts
+++ b/vue-app/src/api/recipient-registry.ts
@@ -1,4 +1,4 @@
-import { BigNumber, Contract } from 'ethers'
+import { BigNumber, Contract, Signer } from 'ethers'
 import sdk from '@/graphql/sdk'
 import { BaseRecipientRegistry } from './abi'
 import {
@@ -23,7 +23,7 @@ import KlerosRegistry from './recipient-registry-kleros'
 import { isHexString } from '@ethersproject/bytes'
 import { Recipient } from '@/graphql/API'
 import { Project } from './projects'
-import { Metadata } from './metadata'
+import { Metadata, MetadataFormData } from './metadata'
 import { DateTime } from 'luxon'
 
 const registryLookup: Record<RecipientRegistryType, Function> = {
@@ -393,4 +393,19 @@ export async function getRequests(
   return Object.keys(requests).map((recipientId) => requests[recipientId])
 }
 
-export default { getProject, getProjects, projectExists }
+export async function addRecipient(
+  registryAddress: string,
+  recipientMetadata: MetadataFormData,
+  deposit: BigNumber,
+  signer: Signer
+) {
+  const registry = RecipientRegistry.create(recipientRegistryType)
+  return registry.addRecipient(
+    registryAddress,
+    recipientMetadata,
+    deposit,
+    signer
+  )
+}
+
+export default { addRecipient, getProject, getProjects, projectExists }
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index 2375a7504..df49a7f1f 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -111,10 +111,7 @@
         <button class="btn-secondary" @click="toggleCriteria">
           See round criteria
         </button>
-        <links
-          v-if="$store.getters.isRecipientRegistrationOpen"
-          :to="$store.getters.joinFormUrl()"
-          class="btn-primary"
+        <links :to="$store.getters.joinFormUrl()" class="btn-primary"
           >Add project</links
         >
       </div>
@@ -145,10 +142,7 @@
         <button class="btn-secondary" @click="toggleCriteria">
           See round criteria
         </button>
-        <links
-          v-if="$store.getters.isRecipientRegistrationOpen"
-          :to="$store.getters.joinFormUrl()"
-          class="btn-primary"
+        <links :to="$store.getters.joinFormUrl()" class="btn-primary"
           >Add project</links
         >
       </div>
diff --git a/vue-app/src/views/JoinOptimistic.vue b/vue-app/src/views/JoinOptimistic.vue
index e0bcecd77..ac92db443 100644
--- a/vue-app/src/views/JoinOptimistic.vue
+++ b/vue-app/src/views/JoinOptimistic.vue
@@ -115,7 +115,7 @@ import {
 import { Project } from '@/api/projects'
 import { Metadata, MetadataFormValidations } from '@/api/metadata'
 import { DateTime } from 'luxon'
-import { addRecipient } from '@/api/recipient-registry-optimistic'
+import { addRecipient } from '@/api/recipient-registry'
 import { waitForTransaction } from '@/utils/contracts'
 import { required, email } from 'vuelidate/lib/validators'
 
@@ -225,6 +225,12 @@ export default class JoinView extends mixins(validationMixin) {
     if (updateFurthest && this.currentStep + 1 > this.furthestStep) {
       this.form.furthestStep = this.currentStep + 1
     }
+
+    if (this.steps[this.currentStep] === 'email') {
+      // save the email for sending application data to google spreadsheet
+      this.form.team.email = this.email
+    }
+
     this.$store.commit(SET_RECIPIENT_DATA, {
       updatedData: this.form,
     })
@@ -263,12 +269,6 @@ export default class JoinView extends mixins(validationMixin) {
     // If isNavDisabled => disable quick-links
     if (this.isNavDisabled) return
 
-    if (this.steps[step] === 'email') {
-      // save the email in metadata for later use
-      this.form.team.email = this.email
-      this.$v.form.$touch()
-    }
-
     // Save form data
     this.saveFormData(updateFurthest)
 
diff --git a/vue-app/src/views/MetadataList.vue b/vue-app/src/views/MetadataList.vue
index 3421e45c6..bfca92cda 100644
--- a/vue-app/src/views/MetadataList.vue
+++ b/vue-app/src/views/MetadataList.vue
@@ -254,7 +254,7 @@ export default class MetadataList extends Vue {
   font-size: 16px;
   overflow: hidden;
   margin: 1rem 10px;
-  color: #f7f7f7;
+  color: var(--text-body);
   opacity: 0.8;
 }
 </style>
diff --git a/vue-app/src/views/ProjectAdded.vue b/vue-app/src/views/ProjectAdded.vue
index 61c6754a5..3e5f4d847 100644
--- a/vue-app/src/views/ProjectAdded.vue
+++ b/vue-app/src/views/ProjectAdded.vue
@@ -11,8 +11,13 @@
             <h1>Project submitted!</h1>
             <transaction-receipt :hash="$route.params.hash" />
           </div>
-          <div class="subtitle">You’re almost on board this funding round.</div>
-          <ul>
+          <div
+            v-if="$store.getters.requireRegistrationDeposit"
+            class="subtitle"
+          >
+            You’re almost on board this funding round.
+          </div>
+          <ul v-if="$store.getters.requireRegistrationDeposit">
             <li>
               Your project just needs to go through some final checks to ensure
               it meets round criteria. You can

From a8fa9bd161906d8960534226131905cdccd4d892 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 10:54:58 -0400
Subject: [PATCH 06/20] fix lint warning

---
 vue-app/src/api/projects.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
index b86684a3e..0ab238d6d 100644
--- a/vue-app/src/api/projects.ts
+++ b/vue-app/src/api/projects.ts
@@ -7,7 +7,6 @@ import {
   recipientRegistryType,
 } from './core'
 
-import SimpleRegistry from './recipient-registry-simple'
 import KlerosRegistry from './recipient-registry-kleros'
 import RecipientRegistry from './recipient-registry'
 

From ed17365e8e66a2cb6c8092ad6df74b2436f5b6fe Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 10:57:33 -0400
Subject: [PATCH 07/20] hide deposit information if deposit is not required

---
 .../components/RecipientSubmissionWidget.vue  | 65 +++++++++++++------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/vue-app/src/components/RecipientSubmissionWidget.vue b/vue-app/src/components/RecipientSubmissionWidget.vue
index e9355d087..bdc8ce8c5 100644
--- a/vue-app/src/components/RecipientSubmissionWidget.vue
+++ b/vue-app/src/components/RecipientSubmissionWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tx-container">
+  <div class="tx-container" v-if="visible">
     <div
       :class="
         isWaiting
@@ -8,13 +8,7 @@
       "
     >
       <loader v-if="isLoading" />
-      <div
-        :class="
-          isWaiting || txError
-            ? 'tx-progress-area'
-            : 'tx-progress-area-no-notice'
-        "
-      >
+      <div :class="progressClass">
         <loader class="button-loader" v-if="isWaiting" />
         <div v-if="isWaiting" class="tx-notice">
           <div v-if="!!txHash">Waiting for transaction to be mined...</div>
@@ -26,7 +20,7 @@
           Check your wallet or {{ blockExplorerLabel }} for more info.
         </div>
       </div>
-      <div class="connected">
+      <div class="connected" v-if="$store.getters.requireRegistrationDeposit">
         <div class="total-title">
           Total to submit
           <img
@@ -92,7 +86,9 @@ export default class RecipientSubmissionWidget extends Vue {
   fiatSign = '$'
 
   async created() {
-    this.ethPrice = await fetchCurrentEthPrice()
+    if (this.$store.getters.requireRegistrationDeposit) {
+      this.ethPrice = await fetchCurrentEthPrice()
+    }
     this.isLoading = false
   }
 
@@ -108,6 +104,14 @@ export default class RecipientSubmissionWidget extends Vue {
     return !!this.$store.state.recipientRegistryInfo?.deposit
   }
 
+  get visible(): boolean {
+    return (
+      this.$store.getters.requireRegistrationDeposit ||
+      this.hasTxError ||
+      this.isWaiting
+    )
+  }
+
   get depositAmount(): string {
     return this.$store.state.recipientRegistryInfo
       ? formatAmount(this.$store.state.recipientRegistryInfo.deposit, 18)
@@ -135,6 +139,21 @@ export default class RecipientSubmissionWidget extends Vue {
     }
     return '-'
   }
+
+  get progressClass(): string {
+    const { requireRegistrationDeposit } = this.$store.getters
+    const classes = ['tx-progress-area']
+
+    if (requireRegistrationDeposit && (this.isWaiting || this.txError)) {
+      classes.push('error-and-info')
+    } else if (requireRegistrationDeposit) {
+      classes.push('info-only')
+    } else {
+      classes.push('error-only')
+    }
+
+    return classes.join(' ')
+  }
 }
 </script>
 
@@ -201,13 +220,16 @@ export default class RecipientSubmissionWidget extends Vue {
   padding-bottom: 2rem;
 }
 
+.no-deposit {
+  border-radius: calc(1rem - 1px);
+  margin-bottom: 0rem;
+}
+
 .tx-progress-area {
   background: var(--bg-inactive);
   text-align: center;
-  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
   padding: 1.5rem;
   width: -webkit-fill-available;
-  margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -215,17 +237,18 @@ export default class RecipientSubmissionWidget extends Vue {
   font-weight: 500;
 }
 
-.tx-progress-area-no-notice {
-  background: var(--bg-inactive);
-  text-align: center;
+.error-only {
+  border-radius: calc(1rem - 1px);
+}
+
+.error-and-info {
+  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
+  margin-bottom: 2rem;
+}
+
+.info-only {
   border-radius: calc(3rem - 1px) calc(3rem - 1px) 0 0;
-  width: -webkit-fill-available;
   margin-bottom: 2rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  justify-content: center;
-  font-weight: 500;
   height: 1rem;
 }
 

From 85255b6a46e32ae7e5c52c232ab7994b329fc3a8 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 12:26:20 -0400
Subject: [PATCH 08/20] set challenge period and deposit to 0 for simple
 registry

---
 contracts/scripts/deployRecipientRegistry.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/contracts/scripts/deployRecipientRegistry.ts b/contracts/scripts/deployRecipientRegistry.ts
index 0ed29b470..f8a2a2639 100644
--- a/contracts/scripts/deployRecipientRegistry.ts
+++ b/contracts/scripts/deployRecipientRegistry.ts
@@ -2,6 +2,10 @@ import { ethers } from 'hardhat'
 import { UNIT } from '../utils/constants'
 import { RecipientRegistryFactory } from '../utils/recipient-registry-factory'
 
+function isSimpleRegistry(registryType: string): boolean {
+  return registryType === 'simple'
+}
+
 /*
  * Deploy a new recipient registry.
  * The following environment variables must be set to run the script
@@ -19,8 +23,12 @@ import { RecipientRegistryFactory } from '../utils/recipient-registry-factory'
 async function main() {
   const recipientRegistryType = process.env.RECIPIENT_REGISTRY_TYPE || 'simple'
   const fundingRoundFactoryAddress = process.env.FUNDING_ROUND_FACTORY_ADDRESS
-  const challengePeriodDuration = process.env.CHALLENGE_PERIOD_IN_SECONDS || 300
-  const baseDeposit = process.env.BASE_DEPOSIT || UNIT.div(10).toString()
+  const challengePeriodDuration = isSimpleRegistry(recipientRegistryType)
+    ? 0
+    : process.env.CHALLENGE_PERIOD_IN_SECONDS || 300
+  const baseDeposit = isSimpleRegistry(recipientRegistryType)
+    ? 0
+    : process.env.BASE_DEPOSIT || UNIT.div(10).toString()
 
   if (!fundingRoundFactoryAddress) {
     console.log('Environment variable FUNDING_ROUND_FACTORY_ADDRESS not set')

From 39fabbd9dd77f488f3da98727799d80fbc7aa47c Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 12:39:07 -0400
Subject: [PATCH 09/20] simplify code

---
 contracts/scripts/deployRecipientRegistry.ts | 23 +++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/contracts/scripts/deployRecipientRegistry.ts b/contracts/scripts/deployRecipientRegistry.ts
index f8a2a2639..582bdbaf2 100644
--- a/contracts/scripts/deployRecipientRegistry.ts
+++ b/contracts/scripts/deployRecipientRegistry.ts
@@ -2,10 +2,6 @@ import { ethers } from 'hardhat'
 import { UNIT } from '../utils/constants'
 import { RecipientRegistryFactory } from '../utils/recipient-registry-factory'
 
-function isSimpleRegistry(registryType: string): boolean {
-  return registryType === 'simple'
-}
-
 /*
  * Deploy a new recipient registry.
  * The following environment variables must be set to run the script
@@ -23,12 +19,13 @@ function isSimpleRegistry(registryType: string): boolean {
 async function main() {
   const recipientRegistryType = process.env.RECIPIENT_REGISTRY_TYPE || 'simple'
   const fundingRoundFactoryAddress = process.env.FUNDING_ROUND_FACTORY_ADDRESS
-  const challengePeriodDuration = isSimpleRegistry(recipientRegistryType)
-    ? 0
-    : process.env.CHALLENGE_PERIOD_IN_SECONDS || 300
-  const baseDeposit = isSimpleRegistry(recipientRegistryType)
-    ? 0
-    : process.env.BASE_DEPOSIT || UNIT.div(10).toString()
+  let challengePeriodDuration = '0'
+  let baseDeposit = '0'
+
+  if (recipientRegistryType === 'optimistic') {
+    challengePeriodDuration = process.env.CHALLENGE_PERIOD_IN_SECONDS || '300'
+    baseDeposit = process.env.BASE_DEPOSIT || UNIT.div(10).toString()
+  }
 
   if (!fundingRoundFactoryAddress) {
     console.log('Environment variable FUNDING_ROUND_FACTORY_ADDRESS not set')
@@ -43,9 +40,9 @@ async function main() {
   console.log('*******************')
   console.log(`Deploying a new ${recipientRegistryType} recipient registry!`)
   console.log(` challenge period in seconds: ${challengePeriodDuration}`)
-  console.log(` baseDeposit ${baseDeposit}`)
-  console.log(` fundingRoundFactoryAddress ${fundingRoundFactoryAddress}`)
-  console.log(` fundingRoundFactoryOwner ${factoryOwner}`)
+  console.log(` baseDeposit: ${baseDeposit}`)
+  console.log(` fundingRoundFactoryAddress: ${fundingRoundFactoryAddress}`)
+  console.log(` fundingRoundFactoryOwner: ${factoryOwner}`)
   const [deployer] = await ethers.getSigners()
 
   const recipientRegistry = await RecipientRegistryFactory.deploy(

From d35dc05f2a856313430630104c419e0b96b5e253 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 12:39:41 -0400
Subject: [PATCH 10/20] styling recipient submission widget

---
 vue-app/src/components/RecipientSubmissionWidget.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/vue-app/src/components/RecipientSubmissionWidget.vue b/vue-app/src/components/RecipientSubmissionWidget.vue
index bdc8ce8c5..e4f88f5c0 100644
--- a/vue-app/src/components/RecipientSubmissionWidget.vue
+++ b/vue-app/src/components/RecipientSubmissionWidget.vue
@@ -228,7 +228,6 @@ export default class RecipientSubmissionWidget extends Vue {
 .tx-progress-area {
   background: var(--bg-inactive);
   text-align: center;
-  padding: 1.5rem;
   width: -webkit-fill-available;
   display: flex;
   align-items: center;
@@ -239,11 +238,13 @@ export default class RecipientSubmissionWidget extends Vue {
 
 .error-only {
   border-radius: calc(1rem - 1px);
+  padding: 1.5rem;
 }
 
 .error-and-info {
   border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
   margin-bottom: 2rem;
+  padding: 1.5rem;
 }
 
 .info-only {

From 82c061cd24c307af0daae9af3c72e37d5594e9f5 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 12:40:42 -0400
Subject: [PATCH 11/20] disable navigation if metadata is not selected

---
 vue-app/src/views/JoinOptimistic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-app/src/views/JoinOptimistic.vue b/vue-app/src/views/JoinOptimistic.vue
index ac92db443..3cab47ae1 100644
--- a/vue-app/src/views/JoinOptimistic.vue
+++ b/vue-app/src/views/JoinOptimistic.vue
@@ -206,7 +206,7 @@ export default class JoinView extends mixins(validationMixin) {
       return false
     }
 
-    let isValid = true
+    let isValid = this.hasMetadata
     const stepName = this.steps[step]
     if (stepName === 'summary') {
       isValid = this.isLinkStepValid() && !this.$v.form.$invalid

From 39c40288a94328503ba8b173ded8ae9e270e19ff Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 22:58:44 -0400
Subject: [PATCH 12/20] fix typo

---
 vue-app/src/views/AboutHowItWorks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-app/src/views/AboutHowItWorks.vue b/vue-app/src/views/AboutHowItWorks.vue
index 091e0cce5..b2481f0ed 100644
--- a/vue-app/src/views/AboutHowItWorks.vue
+++ b/vue-app/src/views/AboutHowItWorks.vue
@@ -83,7 +83,7 @@
     </ul>
 
     <p>
-      If you dont contribute in the contribution phase, the round is over for
+      If you don't contribute in the contribution phase, the round is over for
       you once this phase ends.
     </p>
 

From 30f99afe619e6c3ec06b7e3c0ecd62375fa15a0f Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 2 Aug 2022 23:02:03 -0400
Subject: [PATCH 13/20] refactor and do not show add project button for
 previous rounds

---
 vue-app/src/api/recipient-registry-kleros.ts  |  4 +--
 .../src/api/recipient-registry-optimistic.ts  |  2 +-
 vue-app/src/api/recipient-registry-simple.ts  |  2 +-
 vue-app/src/api/recipient-registry.ts         |  2 +-
 vue-app/src/api/types.ts                      |  4 +--
 vue-app/src/components/TransactionModal.vue   | 21 ++++++++++-----
 vue-app/src/store/getters.ts                  | 25 +++++++++--------
 vue-app/src/views/Join.vue                    | 17 +++++++-----
 .../{JoinOptimistic.vue => JoinForm.vue}      |  2 +-
 vue-app/src/views/JoinLanding.vue             | 27 +++++++++++++------
 vue-app/src/views/ProjectList.vue             | 24 ++++++++++-------
 11 files changed, 79 insertions(+), 51 deletions(-)
 rename vue-app/src/views/{JoinOptimistic.vue => JoinForm.vue} (99%)

diff --git a/vue-app/src/api/recipient-registry-kleros.ts b/vue-app/src/api/recipient-registry-kleros.ts
index 1c2285378..694ca736b 100644
--- a/vue-app/src/api/recipient-registry-kleros.ts
+++ b/vue-app/src/api/recipient-registry-kleros.ts
@@ -226,8 +226,8 @@ export function create(): RecipientRegistryInterface {
     removeProject,
     registerProject,
     rejectProject,
-    isRegistrationOpen: true,
-    requireRegistrationDeposit: true,
+    isSelfRegistration: false, //TODO: add support for self registration
+    requireRegistrationDeposit: false,
   }
 }
 
diff --git a/vue-app/src/api/recipient-registry-optimistic.ts b/vue-app/src/api/recipient-registry-optimistic.ts
index 0499caf2c..a8c7d6682 100644
--- a/vue-app/src/api/recipient-registry-optimistic.ts
+++ b/vue-app/src/api/recipient-registry-optimistic.ts
@@ -127,7 +127,7 @@ export function create(): RecipientRegistryInterface {
     registerProject,
     removeProject,
     rejectProject,
-    isRegistrationOpen: true,
+    isSelfRegistration: true,
     requireRegistrationDeposit: true,
   }
 }
diff --git a/vue-app/src/api/recipient-registry-simple.ts b/vue-app/src/api/recipient-registry-simple.ts
index 6ea353309..687568c36 100644
--- a/vue-app/src/api/recipient-registry-simple.ts
+++ b/vue-app/src/api/recipient-registry-simple.ts
@@ -160,7 +160,7 @@ export function create(): RecipientRegistryInterface {
     removeProject,
     registerProject,
     rejectProject,
-    isRegistrationOpen: false,
+    isSelfRegistration: false,
     requireRegistrationDeposit: false,
   }
 }
diff --git a/vue-app/src/api/recipient-registry.ts b/vue-app/src/api/recipient-registry.ts
index 9c447053f..10761c902 100644
--- a/vue-app/src/api/recipient-registry.ts
+++ b/vue-app/src/api/recipient-registry.ts
@@ -74,7 +74,7 @@ export async function getRegistryInfo(
     listingPolicyUrl: `${ipfsGatewayUrl}/ipfs/${recipientRegistryPolicy}`,
     recipientCount: recipientCount.toNumber(),
     owner,
-    isRegistrationOpen: registry.isRegistrationOpen,
+    isSelfRegistration: registry.isSelfRegistration,
     requireRegistrationDeposit: registry.requireRegistrationDeposit,
   }
 }
diff --git a/vue-app/src/api/types.ts b/vue-app/src/api/types.ts
index 6649bb368..2e2f708b2 100644
--- a/vue-app/src/api/types.ts
+++ b/vue-app/src/api/types.ts
@@ -8,7 +8,7 @@ export interface RegistryInfo {
   listingPolicyUrl: string
   recipientCount: number
   owner: string
-  isRegistrationOpen: boolean
+  isSelfRegistration: boolean
   requireRegistrationDeposit: boolean
 }
 
@@ -17,7 +17,7 @@ export interface RecipientRegistryInterface {
   registerProject: Function
   rejectProject: Function
   removeProject: Function
-  isRegistrationOpen?: boolean
+  isSelfRegistration?: boolean
   requireRegistrationDeposit?: boolean
 }
 
diff --git a/vue-app/src/components/TransactionModal.vue b/vue-app/src/components/TransactionModal.vue
index a303356e7..60e0a8ad9 100644
--- a/vue-app/src/components/TransactionModal.vue
+++ b/vue-app/src/components/TransactionModal.vue
@@ -12,13 +12,15 @@
         }
       "
     ></transaction>
-    <button
-      v-if="txHash"
-      class="btn-secondary close-btn"
-      @click="$emit('close')"
-    >
-      Close
-    </button>
+    <div class="btn-row">
+      <button
+        v-if="txHash"
+        class="btn-secondary close-btn"
+        @click="$emit('close')"
+      >
+        Close
+      </button>
+    </div>
   </div>
 </template>
 
@@ -71,6 +73,11 @@ export default class TransactionModal extends Vue {
   padding: 1.5rem;
 }
 
+.btn-row {
+  display: flex;
+  justify-content: center;
+}
+
 .close-btn {
   margin-top: $modal-space;
 }
diff --git a/vue-app/src/store/getters.ts b/vue-app/src/store/getters.ts
index 97f494017..323072821 100644
--- a/vue-app/src/store/getters.ts
+++ b/vue-app/src/store/getters.ts
@@ -79,13 +79,6 @@ const getters = {
       getters.recipientSpacesRemaining < 20
     )
   },
-  isRoundBufferPhase: (state: RootState, getters): boolean => {
-    return (
-      !!state.currentRound &&
-      !getters.isJoinPhase &&
-      !hasDateElapsed(state.currentRound.signUpDeadline)
-    )
-  },
   isRoundContributionPhase: (state: RootState): boolean => {
     return (
       !!state.currentRound &&
@@ -225,15 +218,25 @@ const getters = {
 
     return nativeTokenDecimals
   },
-  isRecipientRegistrationOpen: (state: RootState): boolean => {
-    return !!state.recipientRegistryInfo?.isRegistrationOpen
+  isSelfRegistration: (state: RootState): boolean => {
+    return !!state.recipientRegistryInfo?.isSelfRegistration
   },
   requireRegistrationDeposit: (state: RootState): boolean => {
     return !!state.recipientRegistryInfo?.requireRegistrationDeposit
   },
   canAddProject: (_, getters): boolean => {
-    const { requireRegistrationDeposit, isRecipientRegistryOwner } = getters
-    return requireRegistrationDeposit || isRecipientRegistryOwner
+    const {
+      requireRegistrationDeposit,
+      isRecipientRegistryOwner,
+      isRecipientRegistryFull,
+      isRoundJoinPhase,
+    } = getters
+
+    return (
+      (requireRegistrationDeposit || isRecipientRegistryOwner) &&
+      !isRecipientRegistryFull &&
+      isRoundJoinPhase
+    )
   },
   joinFormUrl:
     () =>
diff --git a/vue-app/src/views/Join.vue b/vue-app/src/views/Join.vue
index 86163733c..5a3f79bd6 100644
--- a/vue-app/src/views/Join.vue
+++ b/vue-app/src/views/Join.vue
@@ -1,20 +1,23 @@
 <template>
-  <div>
-    <join-optimistic v-if="$store.getters.canAddProject" />
-    <not-found v-else />
+  <div v-if="$store.state.currentRound && $store.state.recipientRegistryInfo">
+    <join-form v-if="$store.getters.canAddProject" />
+    <join-landing v-else />
   </div>
+  <loader v-else />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import NotFound from '@/views/NotFound.vue'
-import JoinOptimistic from '@/views/JoinOptimistic.vue'
+import JoinLanding from '@/views/JoinLanding.vue'
+import JoinForm from '@/views/JoinForm.vue'
+import Loader from '@/components/Loader.vue'
 
 @Component({
   components: {
-    JoinOptimistic,
-    NotFound,
+    JoinForm,
+    JoinLanding,
+    Loader,
   },
 })
 export default class JoinView extends Vue {}
diff --git a/vue-app/src/views/JoinOptimistic.vue b/vue-app/src/views/JoinForm.vue
similarity index 99%
rename from vue-app/src/views/JoinOptimistic.vue
rename to vue-app/src/views/JoinForm.vue
index 3cab47ae1..df4bb812b 100644
--- a/vue-app/src/views/JoinOptimistic.vue
+++ b/vue-app/src/views/JoinForm.vue
@@ -141,7 +141,7 @@ import { required, email } from 'vuelidate/lib/validators'
     },
   },
 })
-export default class JoinView extends mixins(validationMixin) {
+export default class JoinForm extends mixins(validationMixin) {
   currentStep = 0
   steps = this.isEmailRequired
     ? ['project', 'summary', 'email', 'submit']
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index df49a7f1f..876e18f53 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -1,6 +1,5 @@
 <template>
-  <not-found id="not-found" v-if="!$store.getters.canAddProject" />
-  <div v-else id="join-landing">
+  <div id="join-landing">
     <div class="gradient">
       <div class="hero">
         <image-responsive title="core" />
@@ -18,6 +17,11 @@
       <loader />
     </div>
 
+    <div class="content" v-else-if="!registryInfo">
+      <h1>Fetching recipient registry data...</h1>
+      <loader />
+    </div>
+
     <div class="content" v-else-if="$store.getters.hasContributionPhaseEnded">
       <div class="big-emoji">☹</div>
       <h1>Sorry, it's too late to join</h1>
@@ -61,12 +65,15 @@
       <h1>Join the funding round</h1>
       <div class="subtitle">
         We’ll need some information about your project<span
-          v-if="$store.state.requireRegistrationDeposit"
+          v-if="$store.getters.requireRegistrationDeposit"
         >
           and a
           <strong>{{ formatAmount(deposit) }} {{ depositToken }}</strong>
           security deposit</span
         >.
+        <span v-if="!$store.getters.isSelfRegistration"
+          >Contact the round coordinator to submit your application.</span
+        >
       </div>
       <div class="subtitle mt2">
         The round only accepts a total of {{ maxRecipients }} projects, so apply
@@ -111,7 +118,10 @@
         <button class="btn-secondary" @click="toggleCriteria">
           See round criteria
         </button>
-        <links :to="$store.getters.joinFormUrl()" class="btn-primary"
+        <links
+          v-if="$store.getters.canAddProject"
+          :to="$store.getters.joinFormUrl()"
+          class="btn-primary"
           >Add project</links
         >
       </div>
@@ -121,7 +131,7 @@
       <h1>Join the next funding round</h1>
       <div class="subtitle">
         We’ll need some information about your project<span
-          v-if="$store.state.requireRegistrationDeposit"
+          v-if="$store.getters.requireRegistrationDeposit"
         >
           and a
           <strong>{{ formatAmount(deposit) }} {{ depositToken }}</strong>
@@ -142,7 +152,10 @@
         <button class="btn-secondary" @click="toggleCriteria">
           See round criteria
         </button>
-        <links :to="$store.getters.joinFormUrl()" class="btn-primary"
+        <links
+          v-if="$store.getters.canAddProject"
+          :to="$store.getters.joinFormUrl()"
+          class="btn-primary"
           >Add project</links
         >
       </div>
@@ -169,7 +182,6 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 
 import { getCurrentRound } from '@/api/round'
 import { formatAmount } from '@/utils/amounts'
-import NotFound from '@/views/NotFound.vue'
 
 @Component({
   components: {
@@ -180,7 +192,6 @@ import NotFound from '@/views/NotFound.vue'
     TimeLeft,
     ImageResponsive,
     Breadcrumbs,
-    NotFound,
   },
 })
 export default class JoinLanding extends Vue {
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index 633d67f76..68c5e4cc0 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="project-container">
-    <div class="projects">
+    <loader v-if="isLoading" />
+    <div v-else class="projects">
       <div
         :class="{
           title: true,
@@ -38,8 +39,8 @@
             class="pointer"
           />
         </div>
-        <div v-if="$store.getters.canAddProject" class="add-project">
-          <links :to="addProjectUrl" class="btn-primary">Add project</links>
+        <div v-if="canAddProject" class="add-project">
+          <links to="/join" class="btn-primary">Add project</links>
         </div>
         <div class="hr" />
       </div>
@@ -88,6 +89,7 @@ import RoundInformation from '@/components/RoundInformation.vue'
 import FilterDropdown from '@/components/FilterDropdown.vue'
 import Links from '@/components/Links.vue'
 import Panel from '@/components/Panel.vue'
+import Loader from '@/components/Loader.vue'
 
 const SHUFFLE_RANDOM_SEED = Math.random()
 
@@ -115,6 +117,7 @@ function shuffleArray(array: any[]) {
     FilterDropdown,
     Links,
     Panel,
+    Loader,
   },
 })
 export default class ProjectList extends Vue {
@@ -202,15 +205,16 @@ export default class ProjectList extends Vue {
     this.search = ''
   }
 
-  get showAddProjectButton(): boolean {
-    const { requireRegistrationDeposit, isRecipientRegistryOwner } =
+  get canAddProject(): boolean {
+    const { isCurrentRound, isRecipientRegistryOwner, isSelfRegistration } =
       this.$store.getters
-    return requireRegistrationDeposit || isRecipientRegistryOwner
-  }
 
-  get addProjectUrl(): string {
-    const { requireRegistrationDeposit } = this.$store.getters
-    return requireRegistrationDeposit ? '/join' : '/join/project'
+    // do minimal checks here and redirect users to the join landing page
+    // to do more checks and give reasons if the round is not open for registration
+    return (
+      isCurrentRound(this.roundAddress) &&
+      (isSelfRegistration || isRecipientRegistryOwner)
+    )
   }
 }
 </script>

From cba88c82e7c981f1e78d13106845593c26f099d3 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Wed, 3 Aug 2022 11:35:59 -0400
Subject: [PATCH 14/20] css styling

---
 vue-app/src/views/MetadataList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-app/src/views/MetadataList.vue b/vue-app/src/views/MetadataList.vue
index bfca92cda..711eaf1fa 100644
--- a/vue-app/src/views/MetadataList.vue
+++ b/vue-app/src/views/MetadataList.vue
@@ -243,7 +243,7 @@ export default class MetadataList extends Vue {
   margin: 1.5rem 10px;
   font-size: 20px;
   * {
-    color: #f7f7f7;
+    color: var(--text-body);
   }
 }
 

From 7e998835e8130bc7d377c1e1f39409dd4e6dd00d Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Wed, 3 Aug 2022 11:36:39 -0400
Subject: [PATCH 15/20] make the metadata list in join form responsive

---
 vue-app/src/views/JoinForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-app/src/views/JoinForm.vue b/vue-app/src/views/JoinForm.vue
index df4bb812b..3cd87df12 100644
--- a/vue-app/src/views/JoinForm.vue
+++ b/vue-app/src/views/JoinForm.vue
@@ -383,7 +383,7 @@ export default class JoinForm extends mixins(validationMixin) {
 @import '../styles/theme';
 
 .container {
-  width: clamp(calc(800px - 4rem), calc(100% - 4rem), 1100px);
+  width: clamp(calc(500px - 4rem), calc(100% - 4rem), 1100px);
   margin: 0 auto;
   @media (max-width: $breakpoint-m) {
     width: 100%;

From 8cb066161486760f7e8360eef859e18990894de0 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Thu, 4 Aug 2022 15:38:40 -0400
Subject: [PATCH 16/20] change recipient menu dropdown icon to diamond and
 rearrange items

---
 vue-app/src/components/NavBar.vue | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/vue-app/src/components/NavBar.vue b/vue-app/src/components/NavBar.vue
index d9bee75a9..a9bf16244 100644
--- a/vue-app/src/components/NavBar.vue
+++ b/vue-app/src/components/NavBar.vue
@@ -71,6 +71,7 @@ export default class NavBar extends Vue {
     { to: '/about/how-it-works', text: 'How it works', emoji: '⚙️' },
     { to: '/about/maci', text: 'Bribery protection', emoji: '🤑' },
     { to: '/about/sybil-resistance', text: 'Sybil resistance', emoji: '👤' },
+    { to: '/about/layer-2', text: 'Layer 2', emoji: '🚀' },
     {
       to: 'https://github.com/clrfund/monorepo/',
       text: 'Code',
@@ -79,27 +80,21 @@ export default class NavBar extends Vue {
     {
       to: '/recipients',
       text: 'Recipients',
-      emoji: '🚀',
+      emoji: '💎',
     },
     {
       to: '/metadata',
       text: 'Metadata',
       emoji: '📃',
     },
-  ]
+  ].filter((item) => {
+    return chain.isLayer2 || item.text !== 'Layer 2'
+  })
 
   created() {
     const savedTheme = lsGet(this.themeKey)
     const theme = isValidTheme(savedTheme) ? savedTheme : getOsColorScheme()
     this.$store.commit(TOGGLE_THEME, theme)
-
-    if (chain.isLayer2) {
-      this.dropdownItems.splice(-1, 0, {
-        to: '/about/layer-2',
-        text: 'Layer 2',
-        emoji: '🚀',
-      })
-    }
   }
 
   closeHelpDropdown(): void {

From d4078500f1a024e56034a3035d1f983f397b53f8 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Thu, 4 Aug 2022 15:39:41 -0400
Subject: [PATCH 17/20] use consistent environment variable prefix

---
 vue-app/.env.example    | 8 ++++----
 vue-app/src/api/core.ts | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/vue-app/.env.example b/vue-app/.env.example
index 367d59b19..c3b1bdd93 100644
--- a/vue-app/.env.example
+++ b/vue-app/.env.example
@@ -44,16 +44,16 @@ VUE_APP_GOOGLE_SPREADSHEET_ID=
 
 # metadata registry configurations
 # The networks where metadata is stored; as comma separated strings
-# i.e. rinkeby,ropsten,mainnet
+# i.e. arbitrum-rinkeby,ropsten,mainnet
 VUE_APP_METADATA_NETWORKS=
 
 # metadata registry subgraph url prefix
 # Add the network part (VUE_APP_METADATA_NETWORKS) to form the complete url
-# i.e. https://api.thegraph.com/subgraphs/name/yuetloo/metadata-
-METADATA_SUBGRAPH_URL_PREFIX=
+# i.e. https://api.thegraph.com/subgraphs/name/clrfund/metadata-
+VUE_APP_METADATA_SUBGRAPH_URL_PREFIX=
 
 # subgraph query batch size, default to 30
-QUERY_BATCH_SIZE=
+VUE_APP_QUERY_BATCH_SIZE=
 
 # Select the sheet's name to write the data, by default 'Raw'
 GOOGLE_SHEET_NAME=
diff --git a/vue-app/src/api/core.ts b/vue-app/src/api/core.ts
index 242335ce3..244cf7838 100644
--- a/vue-app/src/api/core.ts
+++ b/vue-app/src/api/core.ts
@@ -70,7 +70,8 @@ export const METADATA_NETWORKS = process.env.VUE_APP_METADATA_NETWORKS
   ? process.env.VUE_APP_METADATA_NETWORKS.split(',')
   : ['rinkeby']
 
-export const QUERY_BATCH_SIZE = Number(process.env.QUERY_BATCH_SIZE) || 30
+export const QUERY_BATCH_SIZE =
+  Number(process.env.VUE_APP_QUERY_BATCH_SIZE) || 30
 
 export const MAX_RETRIES = Number(process.env.VUE_APP_MAX_RETRIES) || 10
 

From fb702be68ba55beb970c864627b4fbba3b61c4d6 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Thu, 4 Aug 2022 18:02:07 -0400
Subject: [PATCH 18/20] add missing bannerImageHash

---
 vue-app/src/api/recipient-registry.ts | 10 +++++++++-
 vue-app/src/api/types.ts              |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/vue-app/src/api/recipient-registry.ts b/vue-app/src/api/recipient-registry.ts
index 10761c902..6c53b1333 100644
--- a/vue-app/src/api/recipient-registry.ts
+++ b/vue-app/src/api/recipient-registry.ts
@@ -342,11 +342,19 @@ export async function getRequests(
     const requestType = Number(recipient.requestType)
     if (requestType === RequestTypeCode.Registration) {
       // Registration request
-      const { name, description, imageHash, thumbnailImageHash } = metadata
+      const {
+        name,
+        description,
+        imageHash,
+        bannerImageHash,
+        thumbnailImageHash,
+      } = metadata
+
       metadata = {
         name,
         description,
         imageUrl: `${ipfsGatewayUrl}/ipfs/${imageHash}`,
+        bannerImageUrl: `${ipfsGatewayUrl}/ipfs/${bannerImageHash}`,
         thumbnailImageUrl: thumbnailImageHash
           ? `${ipfsGatewayUrl}/ipfs/${thumbnailImageHash}`
           : `${ipfsGatewayUrl}/ipfs/${imageHash}`,
diff --git a/vue-app/src/api/types.ts b/vue-app/src/api/types.ts
index 2e2f708b2..0f5a57927 100644
--- a/vue-app/src/api/types.ts
+++ b/vue-app/src/api/types.ts
@@ -43,6 +43,7 @@ interface RecipientMetadata {
   name: string
   description: string
   imageUrl: string
+  thumbnailImageUrl: string
 }
 
 export interface RecipientRegistryRequest {

From 6f332d0ccf6e08242eca69eaf1f3f2c6fe629036 Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Thu, 4 Aug 2022 18:02:52 -0400
Subject: [PATCH 19/20] allow simple recipient registry owner to remove
 recipient

---
 vue-app/src/api/recipient-registry-simple.ts | 18 ++++++++++++----
 vue-app/src/views/RecipientRegistry.vue      | 22 +++++++++++++-------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/vue-app/src/api/recipient-registry-simple.ts b/vue-app/src/api/recipient-registry-simple.ts
index 687568c36..fc835e4f5 100644
--- a/vue-app/src/api/recipient-registry-simple.ts
+++ b/vue-app/src/api/recipient-registry-simple.ts
@@ -1,5 +1,6 @@
 import { BigNumber, Contract, Event, Signer } from 'ethers'
-import { TransactionResponse } from '@ethersproject/abstract-provider'
+import { ContractTransaction } from '@ethersproject/contracts'
+
 import { isHexString } from '@ethersproject/bytes'
 
 import { SimpleRecipientRegistry } from './abi'
@@ -122,7 +123,7 @@ export function addRecipient(
   recipientData: any,
   _deposit: BigNumber,
   signer: Signer
-): Promise<TransactionResponse> {
+): Promise<ContractTransaction> {
   const registry = new Contract(
     registryAddress,
     SimpleRecipientRegistry,
@@ -142,8 +143,17 @@ export function addRecipient(
   return registry.addRecipient(address, JSON.stringify(json))
 }
 
-function removeProject() {
-  throw new Error('removeProject not implemented')
+function removeProject(
+  registryAddress: string,
+  recipientId: string,
+  signer: Signer
+): Promise<ContractTransaction> {
+  const registry = new Contract(
+    registryAddress,
+    SimpleRecipientRegistry,
+    signer
+  )
+  return registry.removeRecipient(recipientId)
 }
 
 function rejectProject() {
diff --git a/vue-app/src/views/RecipientRegistry.vue b/vue-app/src/views/RecipientRegistry.vue
index 46b778b0a..57985e8dc 100644
--- a/vue-app/src/views/RecipientRegistry.vue
+++ b/vue-app/src/views/RecipientRegistry.vue
@@ -96,14 +96,15 @@
             </td>
             <td>
               <div class="actions" v-if="isUserConnected">
-                <!-- TODO: to implement this feature, it requires to send a baseDeposit (see contract)
-              <div
-                class="btn-warning"
-                @click="remove(request)"
-                v-if="isExecuted(request)"
-              >
-                Remove
-              </div> -->
+                <!-- TODO: to implement remove for optimistic registry, it requires to send a baseDeposit (see contract)-->
+                <!-- Only implement remove for simple registry -->
+                <div
+                  class="btn-warning"
+                  @click="remove(request)"
+                  v-if="isOwner && canRemove && isExecuted(request)"
+                >
+                  Remove
+                </div>
                 <div
                   class="icon-btn-approve"
                   v-if="
@@ -181,6 +182,11 @@ export default class RecipientRegistryView extends Vue {
     )
   }
 
+  get canRemove(): boolean {
+    // only allow remove for simple recipient registry
+    return this.registryInfo && !this.registryInfo.isSelfRegistration
+  }
+
   get registryInfo(): RegistryInfo {
     return this.$store.state.recipientRegistryInfo
   }

From ee70287c33a81c9ade6c4534baecc21a0cc084ad Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Thu, 4 Aug 2022 18:03:29 -0400
Subject: [PATCH 20/20] update about recipient for simple recipient registry

---
 vue-app/src/views/AboutRecipients.vue | 28 +++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/vue-app/src/views/AboutRecipients.vue b/vue-app/src/views/AboutRecipients.vue
index a47a9b635..f80bd1b13 100644
--- a/vue-app/src/views/AboutRecipients.vue
+++ b/vue-app/src/views/AboutRecipients.vue
@@ -37,9 +37,14 @@
     </div>
     <h2>Register your project</h2>
     <p>
-      In order to participate in a funding round as a project, you'll need to
-      submit an application to join the recipient registry (via an on-chain
-      transaction).
+      In order to participate in a funding round as a project,
+      <span v-if="$store.getters.isSelfRegistration"
+        >you'll need to submit an application to join the recipient registry
+        (via an on-chain transaction)</span
+      ><span v-else
+        >you'll need to contact the round coordinator to submit an
+        application</span
+      >.
     </p>
     <p>
       MACI, our anti-bribery tech, currently limits the amount of projects
@@ -58,12 +63,19 @@
         Click "See round criteria" and familiarize yourself with the criteria
         for projects.
       </li>
+      <li>
+        Once you're familiar with the criteria and you're sure your project
+        meets them,
+        <span v-if="$store.getters.selfRegistration"
+          >click "Add project." You'll see a series of forms to fill out asking
+          for more information about your project</span
+        >
+        <span v-else
+          >contact the round coordinator to add your project to the recipient
+          registry.</span
+        >
+      </li>
       <template v-if="$store.getters.requireRegistrationDeposit">
-        <li>
-          Once you're familiar with the criteria and you're sure your project
-          meets them, click "Add project." You'll see a series of forms to fill
-          out asking for more information about your project.
-        </li>
         <li>
           With the forms finished, you can finish your submission:
           <ol>