From 3fc75892ddc6d3726169fcab784f0bb2dbe6f225 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Thu, 13 Jun 2024 15:15:18 -0700
Subject: [PATCH] connect wallet in vote page

---
 src/components/voting/ShipVotingPanel.tsx | 53 ++++++++++++++++++++++-
 src/pages/Vote.tsx                        |  5 ++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/components/voting/ShipVotingPanel.tsx b/src/components/voting/ShipVotingPanel.tsx
index 1dc5dba1..75279ec3 100644
--- a/src/components/voting/ShipVotingPanel.tsx
+++ b/src/components/voting/ShipVotingPanel.tsx
@@ -6,12 +6,26 @@ import { useVoting } from '../../hooks/useVoting';
 import { useMemo } from 'react';
 import { PostedRecord } from '../../queries/getRecordsByTag';
 import { formatEther } from 'viem';
-import { Avatar, Box, Flex, Paper, Text, useMantineTheme } from '@mantine/core';
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Group,
+  Modal,
+  Paper,
+  Stack,
+  Text,
+  useMantineTheme,
+} from '@mantine/core';
 import { PortfolioReport } from '../dashboard/ship/PortfolioReport';
 import { ContestStatus, ReportStatus, VotingStage } from '../../types/common';
 import { VotingFooter } from './VotingFooter';
 import { FacilitatorFooter } from './FacilitatorFooter';
 import { DashGrant } from '../../resolvers/grantResolvers';
+import { useAccount, useConnect } from 'wagmi';
+import { useDisclosure } from '@mantine/hooks';
+import { IconExclamationCircle } from '@tabler/icons-react';
 
 export const ShipVotingPanel = ({
   ship,
@@ -36,6 +50,7 @@ export const ShipVotingPanel = ({
   const { contest, contestStatus, refetchGsVotes, votingStage } = useVoting();
   const theme = useMantineTheme();
   const { userData } = useUserData();
+  const { isConnected } = useAccount();
 
   const shipChoiceId = useMemo(() => {
     return contest?.choices.find((choice) => choice.shipId === ship.id)?.id;
@@ -103,6 +118,42 @@ export const ShipVotingPanel = ({
           isVotingActive={votingStage === VotingStage.Active}
         />
       )}
+      {!isConnected && <IsNotConnected />}
+    </Box>
+  );
+};
+
+const IsNotConnected = () => {
+  const [opened, { open, close }] = useDisclosure(false);
+  const { connect, connectors } = useConnect();
+
+  return (
+    <Box>
+      <Group justify="flex-end" w="100%" mt="xl">
+        <Button
+          onClick={open}
+          variant="light"
+          size="md"
+          leftSection={<IconExclamationCircle />}
+        >
+          Connect Wallet
+        </Button>
+      </Group>
+      <Modal opened={opened} onClose={close} centered title="Connect Wallet">
+        <Stack>
+          {[...connectors]?.reverse()?.map((connector) => (
+            <Button
+              key={connector.uid}
+              onClick={() => {
+                close();
+                connect({ connector });
+              }}
+            >
+              {connector.name}
+            </Button>
+          ))}
+        </Stack>
+      </Modal>
     </Box>
   );
 };
diff --git a/src/pages/Vote.tsx b/src/pages/Vote.tsx
index 85ee9dea..d3afb265 100644
--- a/src/pages/Vote.tsx
+++ b/src/pages/Vote.tsx
@@ -39,6 +39,7 @@ import Logo from '../assets/Logo.svg?react';
 
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { DashGrant } from '../resolvers/grantResolvers';
+import { useAccount } from 'wagmi';
 
 export type VotingFormValues = z.infer<typeof votingSchema>;
 
@@ -151,6 +152,8 @@ const VotingOpen = ({
 
   const isMobile = useMobile();
 
+  const { isConnected } = useAccount();
+
   useEffect(
     () => {
       if (!ships) return;
@@ -188,7 +191,7 @@ const VotingOpen = ({
     <Flex w="100%">
       <MainSection>
         <Box pos="relative">
-          <VoteAffix formValues={form.values} />
+          {isConnected && <VoteAffix formValues={form.values} />}
 
           <PageTitle title="Vote" />
           <Button