Merge pull request #155 from hmrtn/fixes-1

Bugfixes and minor UI tweaks
moonshotcollective · Mar 3, 2022 · a9c1c4c · a9c1c4c
2 parents 75a9053 + 7583a5b
commit a9c1c4c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 88 deletions.
diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -300,8 +300,10 @@ function App(props) {
           </WrapItem>
           <Spacer />
           <WrapItem>
-            <Box pt={5}>{networkSelect}</Box>
-            <Box pt={5}>
+            <Box pt={8} pr={2}>
+              {networkSelect}
+            </Box>
+            <Box pt={8} pr={2}>
               <Account
                 address={address}
                 localProvider={localProvider}
@@ -314,7 +316,7 @@ function App(props) {
                 blockExplorer={blockExplorer}
               />
             </Box>
-            <Box pt={5}>
+            <Box pt={8}>
               <IconButton
                 variant="ghost"
                 icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}

diff --git a/packages/react-app/src/routes/home/Home.jsx b/packages/react-app/src/routes/home/Home.jsx
@@ -83,17 +83,20 @@ function Home({
     <Center pt={10}>
       <Box borderWidth={1} borderRadius={24} shadow="xl" pl={10} pr={10} pb={6} pt={2}>
         <Center>
-          <Text fontSize="xl" fontWeight="semibold" p={6}>
+          <Text fontSize="xl" fontWeight="semibold" pt={6} pb={6} pr={3}>
             Join the party
           </Text>
+          <Text fontSize="2xl" fontWeight="semibold" pt={1}>
+            🎊
+          </Text>
         </Center>
         <Box bg={useColorModeValue("whiteAlpha.900", "purple.900")} borderRadius={24}>
           {alertInvalidId()}
           <Input
             variant="unstyled"
             p={6}
             isInvalid={isInvalidId}
-            placeholder="Party Name/ID"
+            placeholder="Party Name or UID"
             onChange={e => setId(e.target.value)}
           ></Input>
         </Box>

diff --git a/packages/react-app/src/routes/party/components/Metadata.jsx b/packages/react-app/src/routes/party/components/Metadata.jsx
@@ -3,7 +3,7 @@ import { QuestionOutlineIcon, CopyIcon } from "@chakra-ui/icons";
 import React, { useState } from "react";
 
 export const Metadata = ({ partyData, mainnetProvider, votesData, distribution, strategy }) => {
-  const [cpText, setCpText] = useState("Copy URL");
+  const [cpText, setCpText] = useState("Copy Party URL");
   const toast = useToast();
   return (
     <Box>
@@ -25,7 +25,7 @@ export const Metadata = ({ partyData, mainnetProvider, votesData, distribution,
               navigator.clipboard.writeText(window.location.href);
             }}
           >
-            {window.location.href}
+            Share Party
           </Button>
         </Tooltip>
       </Center>

diff --git a/packages/react-app/src/routes/party/components/VoteTable.jsx b/packages/react-app/src/routes/party/components/VoteTable.jsx
@@ -20,29 +20,25 @@ import {
 import React, { useState, useMemo, useEffect } from "react";
 import AddressChakra from "../../../components/AddressChakra";
 
-export const VoteTable = ({
-  partyData,
-  address,
-  userSigner,
-  targetNetwork,
-  readContracts,
-  mainnetProvider,
-}) => {
+export const VoteTable = ({ partyData, address, userSigner, targetNetwork, readContracts, mainnetProvider }) => {
   // Init votes data to 0 votes for each candidate
   const [votesData, setVotesData] = useState(null);
   // Init votes left to nvotes
   const [votesLeft, setVotesLeft] = useState(null);
   const [invalidVotesLeft, setInvalidVotesLeft] = useState(false);
 
-  useEffect(() => {
-    try {
-      setVotesData(partyData.candidates.reduce((o, key) => ({ ...o, [key]: 0 }), {}));
-      setVotesLeft(partyData.config.nvotes);
-    } catch (error) {
-      // Do something?
-      console.log(error);
-    }
-  }, [partyData]);
+  useEffect(
+    _ => {
+      try {
+        setVotesData(partyData.candidates.reduce((o, key) => ({ ...o, [key]: 0 }), {}));
+        setVotesLeft(partyData.config.nvotes);
+      } catch (error) {
+        // Do something?
+        console.log(error);
+      }
+    },
+    [partyData],
+  );
 
   const handleVotesChange = (event, adr) => {
     votesData[adr] = Number(event);
@@ -51,7 +47,7 @@ export const VoteTable = ({
     setInvalidVotesLeft(spent > partyData.config.nvotes);
   };
 
-  const vote = async () => {
+  const vote = async _ => {
     try {
       // EIP-712 Typed Data
       // See: https://eips.ethereum.org/EIPS/eip-712
@@ -85,26 +81,24 @@ export const VoteTable = ({
         const ballots = partyData.ballots;
         const cast = ballots.valueOf(address).filter(d => d.data.ballot.address === address);
         if (cast.length === 0) {
-          return (
-            userSigner
-              ?._signTypedData(domain, types, ballot)
-              .then(sig => {
-                return { signature: sig, data: ballot };
-              })
-              .then(b => {
-                fetch(`${process.env.REACT_APP_API_URL}/party/${partyData.id}/vote`, {
-                  method: "put",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify(b),
-                });
-              })
-              .then(async _ => {
-                window.location.reload(false);
-              })
-              .catch(err => {
-                console.log(err);
-              })
-          );
+          return userSigner
+            ?._signTypedData(domain, types, ballot)
+            .then(sig => {
+              return { signature: sig, data: ballot };
+            })
+            .then(async b => {
+              await fetch(`${process.env.REACT_APP_API_URL}/party/${partyData.id}/vote`, {
+                method: "put",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(b),
+              });
+            })
+            .then(_ => {
+              window.location.reload(false);
+            })
+            .catch(err => {
+              console.log(err);
+            });
         } else {
           throw "Error: Account already voted!";
         }
@@ -117,49 +111,52 @@ export const VoteTable = ({
     }
   };
 
-  const candidates = useMemo(() => {
-    let c;
-    try {
-      c = partyData.candidates.map(d => {
-        return (
-          <Tbody key={`vote-row-${d}`}>
-            <Tr>
-              <Td>
-                <AddressChakra
-                  address={d}
-                  ensProvider={mainnetProvider}
-                  // blockExplorer={blockExplorer}
-                />
-              </Td>
-              <Td>
-                <NumberInput
-                  defaultValue={0}
-                  min={0}
-                  max={partyData.config.nvotes}
-                  onChange={e => {
-                    handleVotesChange(e, d);
-                  }}
-                  width="6em"
-                  size="lg"
-                  isInvalid={invalidVotesLeft}
-                >
-                  <NumberInputField />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-              </Td>
-            </Tr>
-          </Tbody>
-        );
-      });
-    } catch (error) {
-      console.log(error);
-      c = [];
-    }
-    return c;
-  }, [partyData, votesLeft]);
+  const candidates = useMemo(
+    _ => {
+      let c;
+      try {
+        c = partyData.candidates.map(d => {
+          return (
+            <Tbody key={`vote-row-${d}`}>
+              <Tr>
+                <Td>
+                  <AddressChakra
+                    address={d}
+                    ensProvider={mainnetProvider}
+                    // blockExplorer={blockExplorer}
+                  />
+                </Td>
+                <Td>
+                  <NumberInput
+                    defaultValue={0}
+                    min={0}
+                    max={partyData.config.nvotes}
+                    onChange={e => {
+                      handleVotesChange(e, d);
+                    }}
+                    width="6em"
+                    size="lg"
+                    isInvalid={invalidVotesLeft}
+                  >
+                    <NumberInputField />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper />
+                      <NumberDecrementStepper />
+                    </NumberInputStepper>
+                  </NumberInput>
+                </Td>
+              </Tr>
+            </Tbody>
+          );
+        });
+      } catch (error) {
+        console.log(error);
+        c = [];
+      }
+      return c;
+    },
+    [partyData, votesLeft],
+  );
 
   return (
     <Box>