Add funding round start and end dates to leaderboard and round information

contracts/tasks/exportRound.ts

@@ -23,6 +23,7 @@ type RoundListEntry = {
   network: string
   address: string
   startTime: number
+  votingDeadline: number
   isFinalized: boolean
 }
 
@@ -378,6 +379,7 @@ task('export-round', 'Export round data for the leaderboard')
         network: network.name,
         address: round.address,
         startTime: round.startTime,
+        votingDeadline: round.endTime,
         isFinalized: round.isFinalized && !round.isCancelled,
       })
     }

vue-app/src/api/round.ts

@@ -63,7 +63,7 @@ export async function getCurrentRound(): Promise<string | null> {
   return isVoidedRound(fundingRoundAddress) ? null : fundingRoundAddress
 }
 
-function toRoundInfo(data: any, network: string): RoundInfo {
+export function toRoundInfo(data: any, network: string): RoundInfo {
   const nativeTokenDecimals = Number(data.nativeTokenDecimals)
   // leaderboard does not need coordinator key, generate a dummy number
   const keypair = Keypair.createFromSeed(utils.hexlify(utils.randomBytes(32)))
@@ -97,7 +97,9 @@ function toRoundInfo(data: any, network: string): RoundInfo {
     status,
     startTime: DateTime.fromSeconds(data.startTime),
     signUpDeadline: DateTime.fromSeconds(Number(data.startTime) + Number(data.signUpDuration)),
-    votingDeadline: DateTime.fromSeconds(Number(data.startTime) + Number(data.votingDuration)),
+    votingDeadline: DateTime.fromSeconds(
+      Number(data.startTime) + Number(data.signUpDuration) + Number(data.votingDuration),
+    ),
     totalFunds,
     matchingPool,
     contributions,

vue-app/src/api/rounds.ts

@@ -8,6 +8,7 @@ export interface Round {
   network?: string
   hasLeaderboard: boolean
   startTime: number
+  votingDeadline: number
 }
 
 export function isVoidedRound(address: string): boolean {
@@ -29,8 +30,8 @@ export async function getRounds(): Promise<Round[]> {
     return []
   }
 
-  const rounds: Round[] = extraRounds.map(({ address, network, startTime }, index): Round => {
-    return { index, address, network, hasLeaderboard: true, startTime }
+  const rounds: Round[] = extraRounds.map(({ address, network, startTime, votingDeadline }, index): Round => {
+    return { index, address, network, hasLeaderboard: true, startTime, votingDeadline }
   })
 
   const leaderboardRounds = new Set(rounds.map(r => toRoundId({ network: r.network || '', address: r.address })))
@@ -50,6 +51,7 @@ export async function getRounds(): Promise<Round[]> {
         address,
         hasLeaderboard: false,
         startTime: Number(fundingRound.startTime),
+        votingDeadline: Number(fundingRound.votingDeadline),
       })
     }
   }
@@ -62,6 +64,7 @@ export async function getRounds(): Promise<Round[]> {
         address: r.address,
         hasLeaderboard: r.hasLeaderboard,
         startTime: r.startTime,
+        votingDeadline: r.votingDeadline,
         network: r.network,
       }
     })

vue-app/src/components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     ContributionModal: typeof import('./components/ContributionModal.vue')['default']
     CopyButton: typeof import('./components/CopyButton.vue')['default']
     CriteriaModal: typeof import('./components/CriteriaModal.vue')['default']
+    DateRange: typeof import('./components/DateRange.vue')['default']
     ErrorModal: typeof import('./components/ErrorModal.vue')['default']
     FilterDropdown: typeof import('./components/FilterDropdown.vue')['default']
     FormNavigation: typeof import('./components/FormNavigation.vue')['default']

vue-app/src/components/DateRange.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    {{ $d(startDate.toJSDate(), 'short') }}
+    &ndash;
+    {{ $d(endDate.toJSDate(), 'short') }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DateTime } from 'luxon'
+
+interface Props {
+  startDate: DateTime
+  endDate: DateTime
+}
+
+defineProps<Props>()
+</script>

vue-app/src/components/RoundInformation.vue

@@ -166,6 +166,12 @@
             </div>
           </div>
         </template>
+        <div v-if="roundInfo && hasDateElapsed(roundInfo.votingDeadline)" class="round-info-item">
+          <div class="round-info-title">{{ $t('roundInfo.round_period') }}</div>
+          <div class="round-info-value">
+            <date-range :start-date="roundInfo.startTime" :end-date="roundInfo.votingDeadline" />
+          </div>
+        </div>
         <div class="round-value-info">
           <div class="round-value-info-item">
             <div class="full-width">
@@ -280,8 +286,9 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from 'vue'
-import type { BigNumber, FixedNumber } from 'ethers'
+import type { BigNumber } from 'ethers'
 import { DateTime } from 'luxon'
+import { hasDateElapsed } from '@/utils/dates'
 import { type RoundInfo, getRoundInfo, getLeaderboardRoundInfo } from '@/api/round'
 import { chain } from '@/api/core'
 import { lsGet, lsSet } from '@/utils/localStorage'

vue-app/src/graphql/API.ts

@@ -3252,7 +3252,7 @@ export type GetRoundInfoQuery = { __typename?: 'Query', fundingRound: { __typena
 export type GetRoundsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetRoundsQuery = { __typename?: 'Query', fundingRounds: Array<{ __typename?: 'FundingRound', id: string, isFinalized: boolean | null, isCancelled: boolean | null, startTime: any | null }> };
+export type GetRoundsQuery = { __typename?: 'Query', fundingRounds: Array<{ __typename?: 'FundingRound', id: string, isFinalized: boolean | null, isCancelled: boolean | null, startTime: any | null, votingDeadline: any | null }> };
 
 export type GetTokenInfoQueryVariables = Exact<{
   fundingRoundAddress: Scalars['ID'];
@@ -3473,6 +3473,7 @@ export const GetRoundsDocument = gql`
     isFinalized
     isCancelled
     startTime
+    votingDeadline
   }
 }
     `;

vue-app/src/graphql/queries/GetRounds.graphql

@@ -4,5 +4,6 @@ query GetRounds {
     isFinalized
     isCancelled
     startTime
+    votingDeadline
   }
 }

vue-app/src/locales/cn.json

@@ -1035,6 +1035,7 @@
     "p1": "安全押金"
   },
   "roundInfo": {
+    "round_period": "筹款日期",
     "link1": "查看 {blockExplorer}",
     "div1": "取消",
     "div2": "开放",

vue-app/src/locales/en.json

@@ -1035,6 +1035,7 @@
     "p1": "Security deposit"
   },
   "roundInfo": {
+    "round_period": "Round Period",
     "link1": "View on {blockExplorer}",
     "div1": "Cancelled",
     "div2": "Open",

vue-app/src/locales/es.json

@@ -1035,6 +1035,7 @@
     "p1": "Depósito de seguridad"
   },
   "roundInfo": {
+    "round_period": "período de ronda",
     "link1": "Ver en {blockExplorer}",
     "div1": "Cancelado",
     "div2": "Abierto",

vue-app/src/plugins/i18n/index.ts

@@ -14,6 +14,14 @@ export const languages = [
    */
 ]
 
+const defaultShortDateTimeFormat = {
+  short: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  },
+}
+
 const supportedLocales = languages.map(entry => entry.locale)
 export function isLocaleSupported(locale) {
   return supportedLocales.includes(locale)
@@ -25,6 +33,11 @@ const i18n = createI18n<[MessageSchema], 'zh-CN' | 'es' | 'en'>({
   locale: defaultLocale,
   fallbackLocale: defaultLocale,
   globalInjection: true,
+  datetimeFormats: {
+    'zh-CN': defaultShortDateTimeFormat,
+    es: defaultShortDateTimeFormat,
+    en: defaultShortDateTimeFormat,
+  },
   messages: {
     'zh-CN': cn,
     es,

vue-app/src/views/Leaderboard.vue

@@ -9,6 +9,12 @@
           <div class="header">
             <div>
               <h2>{{ $t('leaderboard.header') }}</h2>
+              <date-range
+                class="round-period"
+                v-if="round"
+                :start-date="round.startTime"
+                :end-date="round.votingDeadline"
+              />
             </div>
             <button class="btn-secondary" @click="appStore.toggleLeaderboardView()">
               <div v-if="showSimpleLeaderboard">{{ $t('leaderboard.more') }}</div>
@@ -40,6 +46,7 @@
 import { useAppStore } from '@/stores'
 import { useRouter, useRoute } from 'vue-router'
 import type { RoundInfo } from '@/api/round'
+import { toRoundInfo } from '@/api/round'
 import type { LeaderboardProject } from '@/api/projects'
 import { toLeaderboardProject } from '@/api/projects'
 import { getLeaderboardData } from '@/api/leaderboard'
@@ -81,7 +88,7 @@ onMounted(async () => {
     .map(project => toLeaderboardProject(project))
     .sort((p1: LeaderboardProject, p2: LeaderboardProject) => p2.allocatedAmount.sub(p1.allocatedAmount))
 
-  round.value = { ...data.round, fundingRoundAddress: data.round.address, network }
+  round.value = toRoundInfo(data.round, network)
 
   isLoading.value = false
 })
@@ -114,4 +121,8 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
 }
+
+.round-period {
+  font-size: 14px;
+}
 </style>

vue-app/src/views/RoundList.vue

@@ -11,6 +11,11 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
+        <date-range
+          class="period"
+          :start-date="DateTime.fromSeconds(round.startTime)"
+          :end-date="DateTime.fromSeconds(round.votingDeadline)"
+        />
       </links>
       <links
         v-else
@@ -21,6 +26,11 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
+        <date-range
+          class="period"
+          :start-date="DateTime.fromSeconds(round.startTime)"
+          :end-date="DateTime.fromSeconds(round.votingDeadline)"
+        />
       </links>
     </div>
   </div>
@@ -30,6 +40,7 @@
 import { onMounted, ref } from 'vue'
 import { type Round, getRounds } from '@/api/rounds'
 import Links from '@/components/Links.vue'
+import { DateTime } from 'luxon'
 
 const rounds = ref<Round[]>([])
 
@@ -57,5 +68,11 @@ onMounted(async () => {
     color: var(--text-body);
     font-size: 16px;
   }
+
+  .period {
+    padding-top: 10px;
+    font-size: 14px;
+    opacity: 0.6;
+  }
 }
 </style>