Merge pull request #683 from clrfund/fix/recipients-view

Add recipient profile link on the Recipient Registry page

vue-app/src/api/projects.ts

@@ -59,6 +59,19 @@ export async function getRecipientRegistryAddress(roundAddress: string | null):
   }
 }
 
+export async function getCurrentRecipientRegistryAddress(): Promise<string> {
+  const data = await sdk.GetRecipientRegistryInfo({
+    factoryAddress: factory.address.toLowerCase(),
+  })
+
+  const registryAddress =
+    data.fundingRoundFactory?.currentRound?.recipientRegistry?.id ||
+    data.fundingRoundFactory?.recipientRegistry?.id ||
+    ''
+
+  return registryAddress
+}
+
 export async function getProjects(registryAddress: string, startTime?: number, endTime?: number): Promise<Project[]> {
   if (recipientRegistryType === 'simple') {
     return await SimpleRegistry.getProjects(registryAddress, startTime, endTime)
@@ -71,11 +84,21 @@ export async function getProjects(registryAddress: string, startTime?: number, e
   }
 }
 
-export async function getProject(registryAddress: string, recipientId: string): Promise<Project | null> {
+/**
+ * Get project information
+ *
+ * TODO: add subgraph event listener to track recipients from simple and kleros registries
+ *
+ * @param registryAddress recipient registry address
+ * @param recipientId  recipient id
+ * @param filter filter result by locked or verified status
+ * @returns project information
+ */
+export async function getProject(registryAddress: string, recipientId: string, filter = true): Promise<Project | null> {
   if (recipientRegistryType === 'simple') {
     return await SimpleRegistry.getProject(registryAddress, recipientId)
   } else if (recipientRegistryType === 'optimistic') {
-    return await OptimisticRegistry.getProject(recipientId)
+    return await OptimisticRegistry.getProject(recipientId, filter)
   } else if (recipientRegistryType === 'kleros') {
     return await KlerosRegistry.getProject(registryAddress, recipientId)
   } else {

vue-app/src/api/recipient-registry-optimistic.ts

@@ -374,7 +374,14 @@ export async function getProjects(registryAddress: string, startTime?: number, e
   return projects
 }
 
-export async function getProject(recipientId: string): Promise<Project | null> {
+/**
+ * Get project information
+ *
+ * @param recipientId recipient id
+ * @param filter default to always filter result by locked or verified status
+ * @returns project
+ */
+export async function getProject(recipientId: string, filter = true): Promise<Project | null> {
   if (!isHexString(recipientId, 32)) {
     return null
   }
@@ -398,6 +405,10 @@ export async function getProject(recipientId: string): Promise<Project | null> {
     return null
   }
 
+  if (!filter) {
+    return project
+  }
+
   const requestType = Number(recipient.requestType)
   if (requestType === RequestTypeCode.Registration) {
     if (recipient.verified) {

vue-app/src/components/CopyButton.vue

@@ -2,7 +2,6 @@
   <div
     v-tooltip="{
       content: isCopied ? $t('copyButton.tooltip1') : `${$t('copyButton.copy')}${text && ` ${text}`}`,
-      hideOnTargetClick: false,
     }"
     :class="`${myClass || 'copy-icon'} ${hasBorder && 'border'}`"
     @click="copyToClipboard"

vue-app/src/components/TransactionReceipt.vue

@@ -34,7 +34,7 @@ import { computed, onMounted, ref } from 'vue'
 import Loader from '@/components/Loader.vue'
 import CopyButton from '@/components/CopyButton.vue'
 import Links from '@/components/Links.vue'
-import { getBlockExplorer } from '@/utils/explorer'
+import { getBlockExplorerByHash } from '@/utils/explorer'
 import { isTransactionMined } from '@/utils/contracts'
 import { renderAddressOrHash } from '@/utils/accounts'
 
@@ -56,7 +56,7 @@ function updateIsCopied(value: boolean): void {
 }
 
 const blockExplorer = computed(() => {
-  return getBlockExplorer(props.hash)
+  return getBlockExplorerByHash(props.hash)
 })
 
 onMounted(() => {

vue-app/src/locales/cn.json

@@ -1198,7 +1198,7 @@
     "progress": {
       "step": {
         "project": "关于项目",
-        "donation": "捐款细节",
+        "fund": "捐款细节",
         "team": "团队",
         "links": "链接",
         "image": "图片",

vue-app/src/locales/en.json

@@ -1198,7 +1198,7 @@
     "progress": {
       "step": {
         "project": "About the project",
-        "donation": "Donation details",
+        "fund": "Donation details",
         "team": "Team details",
         "links": "Links",
         "image": "Images",

vue-app/src/locales/es.json

@@ -1198,7 +1198,7 @@
     "progress": {
       "step": {
         "project": "Acerca del proyecto",
-        "donation": "Detalles de la donación",
+        "fund": "Detalles de la donación",
         "team": "Detalles del equipo",
         "links": "Enlaces",
         "image": "Imágenes",

vue-app/src/router/index.ts

@@ -191,7 +191,7 @@ const routes: Array<RouteRecordRaw> = [
     },
   },
   {
-    path: '/recipients/:hash',
+    path: '/recipients/:id',
     name: 'recipient-profile',
     component: RecipientProfile,
     meta: {

vue-app/src/utils/explorer.ts

@@ -1,11 +1,29 @@
 import { chain } from '@/api/core'
 import { getAssetsUrl } from '@/utils/url'
 
-export function getBlockExplorer(hash: string): { label: string; url: string; logo: string; logoUrl: string } {
+export function getBlockExplorerByHash(hash: string): { label: string; url: string; logo: string; logoUrl: string } {
   return {
     label: chain.explorerLabel as string,
     url: `${chain.explorer}/tx/${hash}`,
     logo: chain.explorerLogo as string,
     logoUrl: getAssetsUrl(chain.explorerLogo),
   }
 }
+
+export function getBlockExplorerByAddress(address: string): {
+  label: string
+  url: string
+  logo: string
+  logoUrl: string
+} | null {
+  if (!address) {
+    return null
+  }
+
+  return {
+    label: chain.explorerLabel as string,
+    url: `${chain.explorer}/address/${address}`,
+    logo: chain.explorerLogo as string,
+    logoUrl: getAssetsUrl(chain.explorerLogo),
+  }
+}

vue-app/src/views/JoinView.vue

@@ -790,7 +790,7 @@ const rules = computed(() => {
 const v$ = useVuelidate(rules, form)
 
 const currentStep = ref<number>(0)
-const steps = ['project', 'donation', 'team', 'links', 'image', 'review', 'submit', 'confirm']
+const steps = ['project', 'fund', 'team', 'links', 'image', 'review', 'submit', 'confirm']
 const stepNames = steps.slice(0, steps.length - 1)
 const showSummaryPreview = ref(false)
 const isWaiting = ref(false)
@@ -884,7 +884,6 @@ function isStepValid(step: number): boolean {
     return isLinkStepValid()
   }
   const stepName: string = steps[step]
-
   return !v$.value[stepName]?.$invalid
 }
 

vue-app/src/views/ProjectAdded.vue

@@ -23,7 +23,9 @@
             </li>
           </ul>
           <div class="mt2 button-spacing">
-            <links :to="`/recipients/${hash}`" class="btn-primary">{{ $t('projectAdded.link2') }}</links>
+            <links v-if="recipientId" :to="`/recipients/${recipientId}`" class="btn-primary">{{
+              $t('projectAdded.link2')
+            }}</links>
             <links to="/" class="btn-secondary">{{ $t('projectAdded.link3') }}</links>
           </div>
         </div>
@@ -43,11 +45,21 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 import { useAppStore } from '@/stores'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
+import { getRecipientBySubmitHash } from '@/api/projects'
 
 const route = useRoute()
 const appStore = useAppStore()
 const { currentRound } = storeToRefs(appStore)
 const hash = computed(() => route.params.hash as string)
+
+const recipientId = ref('')
+
+onMounted(async () => {
+  const recipient = await getRecipientBySubmitHash(hash.value)
+  if (recipient) {
+    recipientId.value = recipient.id
+  }
+})
 </script>
 
 <style scoped lang="scss">

vue-app/src/views/RecipientProfile.vue

@@ -4,6 +4,7 @@
     {{ $t('recipientProfile.not_found') }}
   </div>
   <div v-else class="project-page">
+    <img class="project-image" :src="recipient.bannerImageUrl" :alt="recipient.name" />
     <div class="about">
       <h1 class="project-name" :title="addressName" :project-index="recipient.index">
         <span> {{ recipient.name }} </span>
@@ -51,6 +52,7 @@
             :hasBorder="true"
           />
           <links
+            v-if="blockExplorer"
             class="explorerLink"
             :to="blockExplorer.url"
             :title="$t('projectProfile.link1', { blockExplorer: blockExplorer.label })"
@@ -70,10 +72,10 @@
 </template>
 
 <script setup lang="ts">
-import { type Project, getRecipientBySubmitHash } from '@/api/projects'
+import { type Project, getProject, getCurrentRecipientRegistryAddress } from '@/api/projects'
 import { ensLookup } from '@/utils/accounts'
 import { useAppStore } from '@/stores'
-import { getBlockExplorer } from '@/utils/explorer'
+import { getBlockExplorerByAddress } from '@/utils/explorer'
 
 const route = useRoute()
 const appStore = useAppStore()
@@ -82,18 +84,22 @@ const recipient = ref<Project | null>(null)
 const ens = ref<string | null>(null)
 const loading = ref<boolean>(true)
 
-const hash = computed(() => (route.params.hash as string) || '')
-
 onMounted(async () => {
-  recipient.value = await getRecipientBySubmitHash(hash.value)
+  const recipientId = (route.params.id as string) || ''
+  const recipientRegistryAddress = await getCurrentRecipientRegistryAddress()
+
+  // retrieve the project information without filtering by the locked or verified status
+  const filter = false
+  recipient.value = await getProject(recipientRegistryAddress, recipientId, filter)
   if (recipient.value?.address) {
     ens.value = await ensLookup(recipient.value.address)
   }
   loading.value = false
 })
 
 const blockExplorer = computed(() => {
-  return getBlockExplorer(hash.value)
+  const recipientAddress = recipient.value?.address ?? ''
+  return getBlockExplorerByAddress(recipientAddress)
 })
 
 const addressName = computed(() => {

vue-app/src/views/RecipientRegistry.vue

@@ -36,6 +36,14 @@
                   }"
                   >-></links
                 >
+                <links
+                  v-else
+                  :to="{
+                    name: 'recipient-profile',
+                    params: { id: request.recipientId },
+                  }"
+                  >-></links
+                >
               </div>
               <details class="project-details">
                 <summary>{{ $t('recipientRegistry.summary') }}</summary>
@@ -123,9 +131,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import type { BigNumber } from 'ethers'
-import humanizeDuration from 'humanize-duration'
-import { DateTime } from 'luxon'
 import CopyButton from '@/components/CopyButton.vue'
 
 import { chainId, exportBatchSize, recipientRegistryType } from '@/api/core'
@@ -136,12 +141,9 @@ import {
   getRequests,
   registerProject,
   rejectProject,
-  removeProject,
 } from '@/api/recipient-registry-optimistic'
 import Loader from '@/components/Loader.vue'
 import Links from '@/components/Links.vue'
-import { formatAmount as _formatAmount } from '@/utils/amounts'
-import { markdown } from '@/utils/markdown'
 import TransactionModal from '@/components/TransactionModal.vue'
 import { useUserStore, useRecipientStore } from '@/stores'
 import { storeToRefs } from 'pinia'
@@ -177,22 +179,6 @@ async function loadRequests() {
   requests.value = _requests.filter(req => Boolean(req.requester))
 }
 
-function formatAmount(value: BigNumber): string {
-  return _formatAmount(value, 18)
-}
-
-function formatDuration(seconds: number): string {
-  return humanizeDuration(seconds * 1000)
-}
-
-function formatDate(date: DateTime): string {
-  return date.toLocaleString(DateTime.DATETIME_SHORT)
-}
-
-function renderDescription(request: Request): string {
-  return markdown.render(request.metadata.description)
-}
-
 function isPending(request: Request): boolean {
   return request.status === RequestStatus.Submitted
 }
@@ -225,10 +211,6 @@ async function reject(request: Request): Promise<void> {
   )
 }
 
-async function remove(request: Request): Promise<void> {
-  await waitForTransactionAndLoad(removeProject(recipientRegistryAddress.value!, request.recipientId, userStore.signer))
-}
-
 async function waitForTransactionAndLoad(transaction: Promise<TransactionResponse>) {
   const { open, close } = useModal({
     component: TransactionModal,