add proposal start time (#2738)

src/pages/Vote/VotePage.tsx

@@ -122,6 +122,21 @@ const ProposerAddressLink = styled(ExternalLink)`
   word-break: break-all;
 `
 
+function getDateFromBlock(
+  targetBlock: number | undefined,
+  currentBlock: number | undefined,
+  averageBlockTimeInSeconds: number | undefined,
+  currentTimestamp: BigNumber | undefined
+): DateTime | undefined {
+  return targetBlock && currentBlock && averageBlockTimeInSeconds && currentTimestamp
+    ? DateTime.fromSeconds(
+        currentTimestamp
+          .add(BigNumber.from(averageBlockTimeInSeconds).mul(BigNumber.from(targetBlock - currentBlock)))
+          .toNumber()
+      )
+    : undefined
+}
+
 export default function VotePage({
   match: {
     params: { governorIndex, id },
@@ -146,18 +161,18 @@ export default function VotePage({
   // get and format date from data
   const currentTimestamp = useCurrentBlockTimestamp()
   const currentBlock = useBlockNumber()
-  const endDate: DateTime | undefined =
-    proposalData && currentTimestamp && currentBlock
-      ? DateTime.fromSeconds(
-          currentTimestamp
-            .add(
-              BigNumber.from(
-                (chainId && AVERAGE_BLOCK_TIME_IN_SECS[chainId]) ?? DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS
-              ).mul(BigNumber.from(proposalData.endBlock - currentBlock))
-            )
-            .toNumber()
-        )
-      : undefined
+  const startDate: DateTime | undefined = getDateFromBlock(
+    proposalData?.startBlock,
+    currentBlock,
+    (chainId && AVERAGE_BLOCK_TIME_IN_SECS[chainId]) ?? DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS,
+    currentTimestamp
+  )
+  const endDate: DateTime | undefined = getDateFromBlock(
+    proposalData?.endBlock,
+    currentBlock,
+    (chainId && AVERAGE_BLOCK_TIME_IN_SECS[chainId]) ?? DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS,
+    currentTimestamp
+  )
   const now: DateTime = DateTime.local()
 
   // get total votes and format percentages for UI
@@ -223,14 +238,21 @@ export default function VotePage({
           </RowBetween>
           <AutoColumn gap="10px" style={{ width: '100%' }}>
             <TYPE.largeHeader style={{ marginBottom: '.5rem' }}>{proposalData?.title}</TYPE.largeHeader>
+            <RowBetween>
+              <TYPE.main>
+                {startDate && startDate > now ? (
+                  <Trans>
+                    Voting starts approximately {startDate && startDate.toLocaleString(DateTime.DATETIME_FULL)}
+                  </Trans>
+                ) : null}
+              </TYPE.main>
+            </RowBetween>
             <RowBetween>
               <TYPE.main>
                 {endDate && endDate < now ? (
                   <Trans>Voting ended {endDate && endDate.toLocaleString(DateTime.DATETIME_FULL)}</Trans>
-                ) : proposalData ? (
-                  <Trans>Voting ends approximately {endDate && endDate.toLocaleString(DateTime.DATETIME_FULL)}</Trans>
                 ) : (
-                  ''
+                  <Trans>Voting ends approximately {endDate && endDate.toLocaleString(DateTime.DATETIME_FULL)}</Trans>
                 )}
               </TYPE.main>
             </RowBetween>