Merge pull request #220 from DAOmasons/voteDisplay

Vote display

src/components/Banner.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import classes from '../pages/PageStyles.module.css';
 import { useGameManager } from '../hooks/useGameMangers';
 import { ContestStatus, GameStatus, VotingStage } from '../types/common';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { useMobile } from '../hooks/useBreakpoint';
 import { useVoting } from '../hooks/useVoting';
 import { secondsToLongDate } from '../utils/time';
@@ -211,26 +211,7 @@ export const Banner = () => {
   if (voteIsActive) {
     return (
       <BannerBG>
-        <Innards
-          statusText="Grant Ships voting is live! "
-          ctaText="Cast your vote now."
-          ctaButton={
-            <Button component={Link} to="/vote" size={isMobile ? 'xs' : 'sm'}>
-              Vote Now
-            </Button>
-          }
-          infoBtn={
-            <Button
-              component="a"
-              href="https://rules.grantships.fun/how-to-play/as-a-dao-mem.html"
-              variant="transparent"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              What am I voting on?
-            </Button>
-          }
-        />
+        <VoteCountdown />
       </BannerBG>
     );
   }
@@ -320,14 +301,19 @@ export const Innards = ({
           <Text fz={fz} fw={700} c="white" mr={8}>
             {statusText}
           </Text>
-          <Text fz={fz} fw={700} c="white">
+          <Text fz={fz} fw={400} c="white">
             {ctaText}
           </Text>
         </>
       ) : (
-        <Text fz={fz} fw={700} c="white" mr={8}>
-          {statusText} {ctaText}
-        </Text>
+        <Group>
+          <Text fz={fz} fw={700} c="white">
+            {statusText}
+          </Text>
+          <Text fz={fz} fw={400} c="white">
+            {ctaText}
+          </Text>
+        </Group>
       )}
       <Group mt={isMobile ? 8 : 'md'} gap={isMobile ? 4 : 'md'}>
         {ctaButton}
@@ -336,3 +322,62 @@ export const Innards = ({
     </>
   );
 };
+
+const VoteCountdown = () => {
+  const { contest } = useVoting();
+  const [timeLeft, setTimeLeft] = useState<string | null>(null);
+  const isMobile = useMobile();
+
+  useEffect(() => {
+    const postTime = (futureDate: Date, onComplete: () => void) => {
+      const now = new Date().getTime();
+
+      const distance = futureDate.getTime() - now;
+
+      if (distance < 0) {
+        onComplete();
+      } else {
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((distance / (1000 * 60 * 60)) % 24);
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        setTimeLeft(`${days}d ${hours}h ${minutes}m ${seconds}s`);
+      }
+    };
+
+    if (contest?.endTime) {
+      const futureDate = new Date(contest.endTime * 1000);
+
+      postTime(futureDate, () => setTimeLeft(null));
+
+      const interval = setInterval(() => {
+        postTime(futureDate, () => setTimeLeft(null));
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [contest]);
+  return (
+    <Innards
+      statusText="Voting is live! "
+      ctaText={timeLeft ? `Vote Ends in ${timeLeft}` : ''}
+      ctaButton={
+        <Button component={Link} to="/vote" size={isMobile ? 'xs' : 'sm'}>
+          Vote Now
+        </Button>
+      }
+      infoBtn={
+        <Button
+          component="a"
+          href="https://rules.grantships.fun/how-to-play/as-a-dao-mem.html"
+          variant="transparent"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          What am I voting on?
+        </Button>
+      }
+    />
+  );
+};

src/components/voting/VoteResultsPanel.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionIcon,
   Avatar,
   Box,
   Divider,
@@ -19,8 +20,17 @@ import { getContestVoters } from '../../queries/getVoters';
 import { VoteCard } from './VoteCard';
 import { useQuery } from '@tanstack/react-query';
 import { formatBalance } from '../../types/common';
-
-export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
+import { IconArrowNarrowLeft } from '@tabler/icons-react';
+
+export const VoteResultsPanel = ({
+  ships,
+  isPeeking,
+  setSeeResults,
+}: {
+  ships: ShipsCardUI[];
+  isPeeking: boolean;
+  setSeeResults: (see: boolean) => void;
+}) => {
   const { contest, userVotes, tokenData } = useVoting();
 
   const theme = useMantineTheme();
@@ -77,7 +87,18 @@ export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
 
   return (
     <MainSection maw={850}>
-      <PageTitle title="Vote" />
+      {isPeeking ? (
+        <Group w="100%" mb="lg">
+          <ActionIcon variant="subtle" onClick={() => setSeeResults(false)}>
+            <IconArrowNarrowLeft />
+          </ActionIcon>
+          <Text fz={20} fw={500}>
+            See Portfolios
+          </Text>
+        </Group>
+      ) : (
+        <PageTitle title="Vote" />
+      )}
       <Text fz={32} fw={600} mt="xl">
         {hasUserVoted ? 'Your vote has been submitted!' : 'Voting is Complete!'}
       </Text>

src/pages/Vote.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { MainSection, PageTitle } from '../layout/Sections';
 import {
+  ActionIcon,
   Box,
   Button,
   Flex,
@@ -10,6 +11,7 @@ import {
   Stack,
   Stepper,
   Text,
+  Tooltip,
   useMantineTheme,
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
@@ -37,7 +39,7 @@ import { PreVoting } from '../components/voting/PreVoting';
 import { useGameManager } from '../hooks/useGameMangers';
 import Logo from '../assets/Logo.svg?react';
 
-import { IconExclamationCircle } from '@tabler/icons-react';
+import { IconExclamationCircle, IconEye } from '@tabler/icons-react';
 import { DashGrant } from '../resolvers/grantResolvers';
 import { useAccount } from 'wagmi';
 
@@ -77,7 +79,7 @@ export const Vote = () => {
     queryKey: ['ships-page'],
     queryFn: bigVoteQuery,
   });
-
+  const [seeResults, setSeeResults] = useState(false);
   const { userVotes, votingStage, contestStatus } = useVoting();
   const { currentRound } = useGameManager();
 
@@ -111,16 +113,24 @@ export const Vote = () => {
     return <AppAlert title="No Ships Found" description="No ships found" />;
   }
 
-  if (hasVotes || votingStage >= VotingStage.Closed) {
-    return <VoteResultsPanel ships={ships} />;
+  if (hasVotes || votingStage >= VotingStage.Closed || seeResults) {
+    return (
+      <VoteResultsPanel
+        ships={ships}
+        isPeeking={seeResults}
+        setSeeResults={setSeeResults}
+      />
+    );
   }
 
-  return <VotingOpen ships={ships} />;
+  return <VotingOpen ships={ships} setSeeResults={setSeeResults} />;
 };
 
 const VotingOpen = ({
   ships,
+  setSeeResults,
 }: {
+  setSeeResults: (value: boolean) => void;
   ships: {
     grants: DashGrant[] | null;
     recentRecord: PostedRecord | null;
@@ -194,16 +204,25 @@ const VotingOpen = ({
           {isConnected && <VoteAffix formValues={form.values} />}
 
           <PageTitle title="Vote" />
-          <Button
-            variant="light"
-            pos="absolute"
-            top={0}
-            right={0}
-            rightSection={<IconExclamationCircle size={20} />}
-            onClick={() => setModalOpen(true)}
-          >
-            Help
-          </Button>
+          <Group pos="absolute" top={0} right={0} gap={'sm'}>
+            <Tooltip label="See Results">
+              <ActionIcon
+                variant="light"
+                h={36}
+                w={36}
+                onClick={() => setSeeResults(true)}
+              >
+                <IconEye size={20} />
+              </ActionIcon>
+            </Tooltip>
+            <Button
+              variant="light"
+              rightSection={<IconExclamationCircle size={20} />}
+              onClick={() => setModalOpen(true)}
+            >
+              Help
+            </Button>
+          </Group>
           <Stepper
             active={step}
             maw={600}