peek at results

DAOmasons · Jun 15, 2024 · 5fb3826 · 5fb3826
1 parent 248c226
commit 5fb3826
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 18 deletions.
diff --git a/src/components/voting/VoteResultsPanel.tsx b/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>

diff --git a/src/pages/Vote.tsx b/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}