feat: reveal vote tab + tweaks

derivexyz · May 25, 2023 · e1bb6ad · e1bb6ad
1 parent 8678817
commit e1bb6ad
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 143 deletions.
diff --git a/app/src/constants/layout.ts b/app/src/constants/layout.ts
@@ -5,7 +5,7 @@ export const MOBILE_HEADER_HEIGHT = 42
 export const PAGE_WIDTH = 1300
 export const PAGE_FULL_WIDTH = 1800
 
-export const HEADER_CARD_HEIGHT = 200
+export const HEADER_CARD_HEIGHT = [180, 200]
 
 export const VAULTS_CHART_HEIGHT = [120, 250]
 export const VAULTS_INDEX_CHART_HEIGHT = [120, 250]

diff --git a/app/src/constants/tabs.ts b/app/src/constants/tabs.ts
@@ -36,12 +36,12 @@ const TABS: Tab[] = [
     name: 'Airdrop',
     logEvent: LogEvent.NavLeaderboardTabClick,
   },
-  // {
-  //   path: getPagePath({ page: PageId.VoteIndex }),
-  //   rootPageId: PageId.VoteIndex,
-  //   name: 'Vote',
-  //   logEvent: LogEvent.NavVoteTabClick,
-  // },
+  {
+    path: getPagePath({ page: PageId.VoteIndex }),
+    rootPageId: PageId.VoteIndex,
+    name: 'Vote',
+    logEvent: LogEvent.NavVoteTabClick,
+  },
 ]
 
 export default TABS
diff --git a/app/src/containers/common/TotalSupplyHeaderCard/index.tsx b/app/src/containers/common/TotalSupplyHeaderCard/index.tsx
@@ -27,23 +27,20 @@ const TotalSupplyHeaderCard = withSuspense(() => {
             tooltip={
               <Box width={200}>
                 <RowItem
-                  variant="small"
                   label="Mainnet"
                   value={`${formatTruncatedNumber(supply.mainnetCirculatingSupply)} (${formatPercentage(
                     supply.mainnetCirculatingSupply / supply.totalSupply,
                     true
                   )})`}
                 />
                 <RowItem
-                  variant="small"
                   label="Optimism"
                   value={`${formatTruncatedNumber(supply.optimismCirculatingSupply)} (${formatPercentage(
                     supply.optimismCirculatingSupply / supply.totalSupply,
                     true
                   )})`}
                 />
                 <RowItem
-                  variant="small"
                   label="Arbitrum"
                   value={`${formatTruncatedNumber(supply.arbitrumCirculatingSupply)} (${formatPercentage(
                     supply.arbitrumCirculatingSupply / supply.totalSupply,
@@ -53,14 +50,14 @@ const TotalSupplyHeaderCard = withSuspense(() => {
               </Box>
             }
           >
-            <Text variant="small">{formatNumber(supply.totalCirculatingSupply)}</Text>
+            <Text>{formatNumber(supply.totalCirculatingSupply)}</Text>
           </Tooltip>
-          <Text variant="small" color="secondaryText" ml="auto">
+          <Text color="secondaryText" ml="auto">
             {formatNumber(supply.totalSupply)}
           </Text>
         </Flex>
         <LinearProgress my={2} color="primaryText" progress={supply.totalCirculatingSupply / supply.totalSupply} />
-        <Text variant="small">{formatPercentage(circulatingSupplyPct, true)}</Text>
+        <Text>{formatPercentage(circulatingSupplyPct, true)}</Text>
       </CardBody>
     </Card>
   ) : null

diff --git a/app/src/containers/vote/VoteDetailsCard/index.tsx b/app/src/containers/vote/VoteDetailsCard/index.tsx
@@ -1,3 +1,4 @@
+import Box from '@lyra/ui/components/Box'
 import Button from '@lyra/ui/components/Button'
 import Card from '@lyra/ui/components/Card'
 import CardBody from '@lyra/ui/components/Card/CardBody'
@@ -28,7 +29,6 @@ const VoteDetailsCard = ({ data }: Props) => {
   const currentTimestamp = useRef(() => new Date().getTime() / 1000)
   const { proposal } = data
   const {
-    title,
     proposalState,
     startTimestamp,
     endTimestamp,
@@ -43,82 +43,111 @@ const VoteDetailsCard = ({ data }: Props) => {
     <Card>
       <CardBody>
         <Flex flexDirection="column">
-          <Text variant="cardHeading">{title}</Text>
-          <Flex flexDirection={isMobile ? 'column' : 'row'} justifyContent="space-between" mt={8}>
+          <Flex flexDirection={isMobile ? 'column' : 'row'} justifyContent="space-between">
             <Flex flexDirection="row" alignItems="center">
               <Token
+                minWidth={100}
                 label={proposalState.toUpperCase()}
                 variant={getProposalStateVariant(proposalState)}
-                sx={{
-                  height: 24,
-                  paddingTop: '2px',
-                  fontSize: 12,
-                  fontFamily: 'body',
-                  fontWeight: 'medium',
-                  lineHeight: '21px',
-                  letterSpacing: 'body',
-                }}
                 mr={4}
               />
               {proposalState !== ProposalState.Active ? (
                 <Text color="secondaryText">
                   {proposalState === ProposalState.Pending ? (
                     <Text color="secondaryText">
-                      Voting phase begins in <Countdown timestamp={startTimestamp} />
+                      Voting phase begins in <Countdown as="span" timestamp={startTimestamp} />
                     </Text>
                   ) : (
                     `Voting phase ended ${formatDate(endTimestamp)}`
                   )}
                 </Text>
               ) : (
-                <Flex flexDirection="row">
-                  <Text color="secondaryText" mr={2}>
-                    {currentTimestamp.current() >= endTimestamp ? '' : `Ends in${' '}`}
-                  </Text>
-                  <Countdown timestamp={endTimestamp} fallback="Voting phase has passed" color="secondaryText" />
-                </Flex>
+                <Text color="secondaryText" mr={2}>
+                  {currentTimestamp.current() >= endTimestamp ? '' : `Ends in${' '}`}
+                  <Countdown
+                    as="span"
+                    timestamp={endTimestamp}
+                    fallback="Voting phase has passed"
+                    color="secondaryText"
+                  />
+                </Text>
               )}
             </Flex>
             <Flex mt={[4, 0]}>
               <Button
                 label="IPFS"
-                size="sm"
                 leftIcon={IconType.Link2}
                 target="_blank"
                 href={`${getIPFSHashUrl(ipfsHash)}`}
                 mr={2}
               />
               <Button
                 label="Share"
-                size="sm"
                 leftIcon={IconType.Twitter}
                 target="_blank"
                 href={`${TWITTER_URL}/share?url=https://app.lyra.finance/vote/proposal/${proposalId}`}
                 mr={2}
               />
-              <Button label="Discuss" size="sm" leftIcon={IconType.PenTool} target="_blank" href={`${FORUMS_URL}`} />
+              <Button label="Discuss" leftIcon={IconType.PenTool} target="_blank" href={`${FORUMS_URL}`} />
             </Flex>
           </Flex>
-          <Text variant="cardHeading" mt={8} mb={4}>
+          <Text variant="cardHeading" mt={6}>
             Summary
           </Text>
-          <Text mb={4}>{summary}</Text>
-          <Text variant="cardHeading" mt={8} mb={4}>
+          <Box>
+            {summary
+              .split('\n')
+              .filter(chunk => chunk.length > 0)
+              .map(chunk => (
+                <Text key={chunk} mt={3}>
+                  {chunk}
+                </Text>
+              ))}
+          </Box>
+          <Text variant="cardHeading" mt={6}>
             Motivation
           </Text>
-          <Text mb={4}>{motivation}</Text>
-          <Text variant="cardHeading" mt={8} mb={4}>
+          <Box>
+            {motivation
+              .split('\n')
+              .filter(chunk => chunk.length > 0)
+              .map(chunk => (
+                <Text key={chunk} mt={3}>
+                  {chunk}
+                </Text>
+              ))}
+          </Box>
+          <Text variant="cardHeading" mt={6}>
             Specification
           </Text>
-          <Text mb={4}>{specification}</Text>
-          <Text variant="cardHeading" mt={8} mb={4}>
+          <Text>
+            {specification
+              .split('\n')
+              .filter(chunk => chunk.length > 0)
+              .map(chunk => (
+                <Text key={chunk} mt={3}>
+                  {chunk}
+                </Text>
+              ))}
+          </Text>
+          <Text variant="cardHeading" mt={6}>
             References
           </Text>
-          <Text mb={4}>{references}</Text>
-          <Text variant="cardHeading" mt={8} mb={4}>
+          <Text>
+            {references
+              .split('\n')
+              .filter(chunk => chunk.length > 0)
+              .map(chunk => (
+                <Text key={chunk} mt={3}>
+                  {chunk}
+                </Text>
+              ))}
+          </Text>
+          <Text variant="cardHeading" mt={6}>
             Copyright
           </Text>
-          <Text mb={4}>
+          {/* TODO: include in proposal IPFS */}
+          <Text mt={3}>
             Copyright and related rights waived via{' '}
             <Link href={CREATIVE_COMMONS_URL} showRightIcon target="_blank">
               CC0

diff --git a/app/src/containers/vote/VoteFormCard/index.tsx b/app/src/containers/vote/VoteFormCard/index.tsx
@@ -12,6 +12,7 @@ import { useState } from 'react'
 import { useEffect } from 'react'
 import { useMemo } from 'react'
 
+import RowItem from '@/app/components/common/RowItem'
 import { ProposalState, Vote } from '@/app/constants/governance'
 import useWallet from '@/app/hooks/account/useWallet'
 import { VoteDetailsPageData } from '@/app/hooks/vote/useVoteDetailsPageData'
@@ -55,17 +56,9 @@ const VoteFormCard = ({ data, ...marginProps }: Props) => {
     <Card {...marginProps}>
       <CardBody>
         <Text variant="cardHeading" mb={4}>
-          Your voting info
+          Your vote
         </Text>
-        <Flex flexDirection="row" justifyContent="space-between" my={2}>
-          <Flex flexDirection="column">
-            <Text color="secondaryText">Voting Power</Text>
-            <Text variant="small" color="secondaryText">
-              stkLYRA
-            </Text>
-          </Flex>
-          <Text color="text">{formatNumber(votingPower)} stkLYRA</Text>
-        </Flex>
+        <RowItem label="Voting Power" value={`${formatNumber(votingPower)} stkLYRA`} />
         {support && voteAmount > 0 ? (
           <Flex flexDirection="row" justifyContent="space-between" my={2}>
             <Text color="secondaryText">Your vote</Text>

diff --git a/app/src/containers/vote/VoteProposalCard/index.tsx b/app/src/containers/vote/VoteProposalCard/index.tsx
@@ -1,6 +1,6 @@
 import Card from '@lyra/ui/components/Card'
 import CardBody from '@lyra/ui/components/Card/CardBody'
-import Grid from '@lyra/ui/components/Grid'
+import Flex from '@lyra/ui/components/Flex'
 import Text from '@lyra/ui/components/Text'
 import Token from '@lyra/ui/components/Token'
 import { MarginProps } from '@lyra/ui/types'
@@ -9,7 +9,6 @@ import React from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { Proposal } from '@/app/constants/governance'
-import { VOTE_PROPOSALS_CARD_GRID_COLUMN_TEMPLATE } from '@/app/constants/layout'
 import { PageId } from '@/app/constants/pages'
 import getPagePath from '@/app/utils/getPagePath'
 import getProposalStateVariant from '@/app/utils/vote/getProposalStateVariant'
@@ -46,31 +45,20 @@ const VoteProposalCard = ({ proposal }: Props) => {
       }}
     >
       <CardBody>
-        <Grid
-          width="100%"
-          sx={{
-            gridTemplateColumns: VOTE_PROPOSALS_CARD_GRID_COLUMN_TEMPLATE,
-            gridColumnGap: 4,
-            gridRowGap: 6,
-            alignItems: 'center',
-          }}
-        >
-          <Text color="secondaryText">{formatDate(proposedTimestamp, false)}</Text>
-          <Text sx={{ fontWeight: 400 }}>{title}</Text>
+        <Flex alignItems="center">
+          <Flex mr={2} alignItems="center">
+            <Text width={125} color="secondaryText">
+              {formatDate(proposedTimestamp, false)}
+            </Text>
+            <Text>{title}</Text>
+          </Flex>
           <Token
+            minWidth={100}
+            ml="auto"
             label={proposalState.toUpperCase()}
             variant={getProposalStateVariant(proposalState)}
-            sx={{
-              height: '100%',
-              padding: 2,
-              fontSize: 16,
-              fontFamily: 'body',
-              fontWeight: 'medium',
-              lineHeight: 'body',
-              letterSpacing: 'body',
-            }}
           />
-        </Grid>
+        </Flex>
       </CardBody>
     </Card>
   )

diff --git a/app/src/hooks/vote/useVoteDetailsPageData.ts b/app/src/hooks/vote/useVoteDetailsPageData.ts
@@ -3,9 +3,10 @@ import { useCallback } from 'react'
 import { ContractId } from '@/app/constants/contracts'
 import { FetchId } from '@/app/constants/fetch'
 import { Proposal } from '@/app/constants/governance'
+import { AppNetwork } from '@/app/constants/networks'
 import { VoteQueryResult } from '@/app/constants/queries'
 import { getContractAddress } from '@/app/utils/common/getContract'
-import fetchMarkets from '@/app/utils/fetchMarkets'
+import getProvider from '@/app/utils/getProvider'
 import isMainnet from '@/app/utils/isMainnet'
 import fetchLongExecutorData, { LongExecutorData } from '@/app/utils/vote/fetchLongExecutorData'
 import fetchLyraGovernanceStrategyData, {
@@ -31,9 +32,10 @@ export const fetchVoteDetailsPageData = async (
   proposalId: string,
   account: string | null
 ): Promise<VoteDetailsPageData | null> => {
-  const markets = await fetchMarkets()
-  const blockTimestamp = markets[0].block.timestamp
-  const allProposals = await fetchProposalCreatedEventsData()
+  const [allProposals, block] = await Promise.all([
+    fetchProposalCreatedEventsData(),
+    getProvider(AppNetwork.Ethereum).getBlock('latest'),
+  ])
   const foundProposal = allProposals.find(proposal => proposal.id === proposalId)
   if (!foundProposal) {
     return null
@@ -53,7 +55,7 @@ export const fetchVoteDetailsPageData = async (
     executor,
     strategy,
     votes,
-    blockTimestamp,
+    blockTimestamp: block.timestamp,
   }
 }