From ce2d9c4aa837b2a75acd854d371cf0576b35e87c Mon Sep 17 00:00:00 2001
From: yuetloo <contact@yuetloo.com>
Date: Tue, 14 Nov 2023 00:35:26 -0500
Subject: [PATCH] add dates to round and leaderboard

---
 contracts/tasks/exportRound.ts                |  2 ++
 vue-app/src/api/round.ts                      |  6 ++++--
 vue-app/src/api/rounds.ts                     |  7 +++++--
 vue-app/src/components.d.ts                   |  1 +
 vue-app/src/components/DatePeriod.vue         | 18 +++++++++++++++++
 vue-app/src/components/RoundInformation.vue   |  9 ++++++++-
 vue-app/src/graphql/API.ts                    |  3 ++-
 vue-app/src/graphql/queries/GetRounds.graphql |  1 +
 vue-app/src/locales/cn.json                   |  1 +
 vue-app/src/locales/en.json                   |  1 +
 vue-app/src/locales/es.json                   |  1 +
 vue-app/src/plugins/i18n/index.ts             | 13 ++++++++++++
 vue-app/src/views/Leaderboard.vue             | 13 +++++++++++-
 vue-app/src/views/RoundList.vue               | 20 +++++++++++++++++++
 14 files changed, 89 insertions(+), 7 deletions(-)
 create mode 100644 vue-app/src/components/DatePeriod.vue

diff --git a/contracts/tasks/exportRound.ts b/contracts/tasks/exportRound.ts
index ae4993bf3..83304385b 100644
--- a/contracts/tasks/exportRound.ts
+++ b/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,
       })
     }
diff --git a/vue-app/src/api/round.ts b/vue-app/src/api/round.ts
index 44865c682..006a0e501 100644
--- a/vue-app/src/api/round.ts
+++ b/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,
diff --git a/vue-app/src/api/rounds.ts b/vue-app/src/api/rounds.ts
index 2d036752f..05f5d18c4 100644
--- a/vue-app/src/api/rounds.ts
+++ b/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,
       }
     })
diff --git a/vue-app/src/components.d.ts b/vue-app/src/components.d.ts
index 7ccfb0c87..a96a5cb24 100644
--- a/vue-app/src/components.d.ts
+++ b/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']
+    DatePeriod: typeof import('./components/DatePeriod.vue')['default']
     ErrorModal: typeof import('./components/ErrorModal.vue')['default']
     FilterDropdown: typeof import('./components/FilterDropdown.vue')['default']
     FormNavigation: typeof import('./components/FormNavigation.vue')['default']
diff --git a/vue-app/src/components/DatePeriod.vue b/vue-app/src/components/DatePeriod.vue
new file mode 100644
index 000000000..2ad28955f
--- /dev/null
+++ b/vue-app/src/components/DatePeriod.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>
diff --git a/vue-app/src/components/RoundInformation.vue b/vue-app/src/components/RoundInformation.vue
index 020980fbe..d0c9a2b16 100644
--- a/vue-app/src/components/RoundInformation.vue
+++ b/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-period :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'
diff --git a/vue-app/src/graphql/API.ts b/vue-app/src/graphql/API.ts
index c157faa3e..c007dd1dc 100644
--- a/vue-app/src/graphql/API.ts
+++ b/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
   }
 }
     `;
diff --git a/vue-app/src/graphql/queries/GetRounds.graphql b/vue-app/src/graphql/queries/GetRounds.graphql
index 32c732159..e13bdceb3 100644
--- a/vue-app/src/graphql/queries/GetRounds.graphql
+++ b/vue-app/src/graphql/queries/GetRounds.graphql
@@ -4,5 +4,6 @@ query GetRounds {
     isFinalized
     isCancelled
     startTime
+    votingDeadline
   }
 }
diff --git a/vue-app/src/locales/cn.json b/vue-app/src/locales/cn.json
index 38a12e621..693ba2260 100644
--- a/vue-app/src/locales/cn.json
+++ b/vue-app/src/locales/cn.json
@@ -1035,6 +1035,7 @@
     "p1": "安全押金"
   },
   "roundInfo": {
+    "round_period": "筹款日期",
     "link1": "查看 {blockExplorer}",
     "div1": "取消",
     "div2": "开放",
diff --git a/vue-app/src/locales/en.json b/vue-app/src/locales/en.json
index 1ffb8ed7f..89dd5781e 100644
--- a/vue-app/src/locales/en.json
+++ b/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",
diff --git a/vue-app/src/locales/es.json b/vue-app/src/locales/es.json
index e350a4028..54b0f04dc 100644
--- a/vue-app/src/locales/es.json
+++ b/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",
diff --git a/vue-app/src/plugins/i18n/index.ts b/vue-app/src/plugins/i18n/index.ts
index e75abfa2b..9c8915ecb 100644
--- a/vue-app/src/plugins/i18n/index.ts
+++ b/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,
diff --git a/vue-app/src/views/Leaderboard.vue b/vue-app/src/views/Leaderboard.vue
index 1725cf57d..65b06b5e1 100644
--- a/vue-app/src/views/Leaderboard.vue
+++ b/vue-app/src/views/Leaderboard.vue
@@ -9,6 +9,12 @@
           <div class="header">
             <div>
               <h2>{{ $t('leaderboard.header') }}</h2>
+              <date-period
+                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>
diff --git a/vue-app/src/views/RoundList.vue b/vue-app/src/views/RoundList.vue
index 36a91d461..006bf0838 100644
--- a/vue-app/src/views/RoundList.vue
+++ b/vue-app/src/views/RoundList.vue
@@ -11,6 +11,12 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
+        <date-period
+          class="period"
+          :start-date="DateTime.fromSeconds(round.startTime)"
+          :end-date="DateTime.fromSeconds(round.votingDeadline)"
+        >
+        </date-period>
       </links>
       <links
         v-else
@@ -21,6 +27,12 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
+        <date-period
+          class="period"
+          :start-date="DateTime.fromSeconds(round.startTime)"
+          :end-date="DateTime.fromSeconds(round.votingDeadline)"
+        >
+        </date-period>
       </links>
     </div>
   </div>
@@ -30,6 +42,8 @@
 import { onMounted, ref } from 'vue'
 import { type Round, getRounds } from '@/api/rounds'
 import Links from '@/components/Links.vue'
+import DatePeriod from '@/components/DatePeriod.vue'
+import { DateTime } from 'luxon'
 
 const rounds = ref<Round[]>([])
 
@@ -57,5 +71,11 @@ onMounted(async () => {
     color: var(--text-body);
     font-size: 16px;
   }
+
+  .period {
+    padding-top: 10px;
+    font-size: 14px;
+    opacity: 0.6;
+  }
 }
 </style>