Merge pull request #700 from clrfund/fix/leaderboard-project-profile

Fix missing fields and claim button on the leaderboard project profile

vue-app/src/api/projects.ts

@@ -214,9 +214,9 @@ export async function getLeaderboardProject(
   const project = data.projects.find(project => project.id === projectId)
 
   const metadata = project.metadata
-  const thumbnailHash = metadata.imageHash
+  const thumbnailHash = metadata.thumbnailImageHash || metadata.imageHash
   const thumbnailImageUrl = thumbnailHash ? `${ipfsGatewayUrl}/ipfs/${thumbnailHash}` : undefined
-  const bannerHash = metadata.imageHash
+  const bannerHash = metadata.bannerImageHash || metadata.imageHash
   const bannerImageUrl = bannerHash ? `${ipfsGatewayUrl}/ipfs/${bannerHash}` : undefined
 
   return {
@@ -225,6 +225,16 @@ export async function getLeaderboardProject(
     name: project.name,
     description: metadata.description,
     tagline: metadata.tagline,
+    category: metadata.category,
+    problemSpace: metadata.problemSpace,
+    plans: metadata.plans,
+    teamName: metadata.teamName,
+    teamDescription: metadata.teamDescription,
+    githubUrl: metadata.githubUrl,
+    radicleUrl: metadata.radicleUrl,
+    websiteUrl: metadata.websiteUrl,
+    twitterUrl: metadata.twitterUrl,
+    discordUrl: metadata.discordUrl,
     thumbnailImageUrl,
     bannerImageUrl,
     index: project.recipientIndex,

vue-app/src/api/round.ts

@@ -62,7 +62,7 @@ export async function getCurrentRound(): Promise<string | null> {
   const rounds = await getRounds()
   const roundIndex = rounds.findIndex(round => isSameAddress(round.address, fundingRoundAddress))
 
-  if (roundIndex >= Number(import.meta.env.VITE_FIRST_ROUND || 0)) {
+  if (roundIndex >= 0) {
     return fundingRoundAddress
   }
   return null

vue-app/src/api/rounds.ts

@@ -1,11 +1,17 @@
 import sdk from '@/graphql/sdk'
 import extraRounds from '@/rounds/rounds.json'
+import { chain } from './core'
 
 export interface Round {
   index: number
   address: string
   network?: string
   hasLeaderboard: boolean
+  startTime: number
+}
+
+function toRoundId({ network, address }: { network: string; address: string }): string {
+  return `${network}-${address}`.toLowerCase()
 }
 
 //TODO: update to take factory address as a parameter
@@ -14,16 +20,42 @@ export async function getRounds(): Promise<Round[]> {
   //NOTE: why not instantiate the sdk here?
   const data = await sdk.GetRounds()
 
-  const rounds: Round[] = extraRounds.map(({ address, network }, index): Round => {
-    return { index, address, network, hasLeaderboard: true }
+  const rounds: Round[] = extraRounds.map(({ address, network, startTime }, index): Round => {
+    return { index, address, network, hasLeaderboard: true, startTime }
   })
 
-  for (const fundingRound of data.fundingRounds) {
-    rounds.push({
-      index: rounds.length,
-      address: fundingRound.id,
-      hasLeaderboard: false,
-    })
+  const leaderboardRounds = new Set(rounds.map(r => toRoundId({ network: r.network || '', address: r.address })))
+
+  const firstRound = Number(import.meta.env.VITE_FIRST_ROUND || 0)
+
+  for (let roundIndex = 0; roundIndex < data.fundingRounds.length; roundIndex++) {
+    if (roundIndex < firstRound) {
+      // filter out cancelled or test rounds
+      continue
+    }
+
+    const fundingRound = data.fundingRounds[roundIndex]
+    const address = fundingRound.id
+    const isLeaderboardRound = leaderboardRounds.has(toRoundId({ network: chain.label, address }))
+    if (!isLeaderboardRound) {
+      rounds.push({
+        index: rounds.length,
+        address,
+        hasLeaderboard: false,
+        startTime: Number(fundingRound.startTime),
+      })
+    }
   }
+
   return rounds
+    .sort((a, b) => a.startTime - b.startTime)
+    .map((r, index) => {
+      return {
+        index,
+        address: r.address,
+        hasLeaderboard: r.hasLeaderboard,
+        startTime: r.startTime,
+        network: r.network,
+      }
+    })
 }

vue-app/src/components/ProjectProfile.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="mobile mb2">
         <add-to-cart-button v-if="shouldShowCartInput && hasContributeBtn()" :project="project" />
-        <claim-button :project="project" />
+        <claim-button v-if="isCurrentRound" :project="project" />
         <p v-if="hasUserContributed && !canUserReallocate">
           {{ $t('projectProfile.p1') }}
         </p>

vue-app/src/views/LeaderboardProject.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
     <loader v-if="isLoading"></loader>
-    <div :class="`grid`" v-if="project">
+    <div :class="`grid ${showCartPanel ? 'cart-open' : 'cart-closed'}`" v-if="project">
       <img class="project-image banner" :src="project.bannerImageUrl" :alt="project.name" />
       <project-profile class="details" :project="project" :previewMode="false" />
       <div class="sticky-column">
+        <div class="desktop">
+          <claim-button v-if="showClaimButton" :project="project" />
+        </div>
         <link-box :project="project" />
       </div>
     </div>
@@ -23,6 +26,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { operator } from '@/api/core'
 import { getLeaderboardProject } from '@/api/projects'
 import { getRouteParamValue } from '@/utils/route'
+import { useAppStore } from '@/stores'
+
+const appStore = useAppStore()
+const { isAppReady, showCartPanel } = storeToRefs(appStore)
 
 const route = useRoute()
 const router = useRouter()
@@ -63,6 +70,8 @@ useMeta(
     }
   }),
 )
+
+const showClaimButton = computed(() => isAppReady.value && appStore.isCurrentRound(roundAddress.value))
 </script>
 
 <style scoped lang="scss">