Merge pull request #96 from hansmrtn/ui-refresh

UI refresh
moonshotcollective · Jan 5, 2022 · 3dce976 · 3dce976
2 parents 427b4e9 + 73a64c1
commit 3dce976
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 172 deletions.
diff --git a/packages/react-app/.sample.env b/packages/react-app/.sample.env
@@ -1,4 +1,7 @@
-REACT_APP_NETWORK_NAME=<YOUR_NETWORK>
-REACT_APP_PROVIDER=<YOUR_APP_PROVIDER>
-REACT_APP_API_URL=<YOUR_API_URL>
-REACT_APP_ETHERSCAN_KEY=<YOUR_ETHERSCAN_API_KEY>
+REACT_APP_NETWORK_NAME=<NETWROK_NAME>
+REACT_APP_PROVIDER=<PROVIDER_URL>
+REACT_APP_API_URL=<API_URL>
+REACT_APP_ETHERSCAN_KEY=<ETHERSCAN_KEY>
+REACT_APP_VERSION=<APP_VERSION>
+REACT_APP_INFURA_ID=<INFURA_ID>
+REACT_APP_BLOCKNATIVE_DAPPID=<BN_DAPPID>
diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -37,6 +37,8 @@ import {
   MenuItemOption,
   MenuOptionGroup,
   Divider,
+  Wrap, 
+  WrapItem
 } from "@chakra-ui/react";
 import NotConnectedCard from "./components/Cards/NotConnectedCard";
 import CenteredFrame from "./components/layout/CenteredFrame";
@@ -506,14 +508,14 @@ function App(props) {
   return (
     <div>
       <Box mb={8} pl={"14vw"} pr={"14vw"}>
-        <Box pb={"6vh"}>
-          <HStack>
-            <Box>
+        <Wrap pb={"6vh"}>
+            <WrapItem>
               <a href="/">
                 <Header />
               </a>
-            </Box>
+            </WrapItem>
             <Spacer />
+            <WrapItem>
             <Box pt={5}>{networkSelect}</Box>
             <Box pt={5}>
               <Account
@@ -535,8 +537,8 @@ function App(props) {
                 onClick={toggleColorMode}
               />
             </Box>
-          </HStack>
-        </Box>
+            </WrapItem>
+        </Wrap>
         {address && address !== "" ? (
           <BrowserRouter>
             <Switch>

diff --git a/packages/react-app/src/constants.js b/packages/react-app/src/constants.js
@@ -1,11 +1,8 @@
-// MY INFURA_ID, SWAP IN YOURS FROM https://infura.io/dashboard/ethereum
-export const INFURA_ID = "bd19f29ceeb04aeb83009866f836474b"; //"460f40a260564ac4a4f4b3fffb032dad";
+require("dotenv").config();
 
-// MY ETHERSCAN_ID, SWAP IN YOURS FROM https://etherscan.io/myapikey
-export const ETHERSCAN_KEY = "PSW8C433Q667DVEX5BCRMGNAH9FSGFZ7Q8";
-
-// BLOCKNATIVE ID FOR Notify.js:
-export const BLOCKNATIVE_DAPPID = "0b58206a-f3c0-4701-a62f-73c7243e8c77";
+export const INFURA_ID = process.env.REACT_APP_INFURA_ID;
+export const ETHERSCAN_KEY = process.env.REACT_APP_ETHERSCAN_KEY;
+export const BLOCKNATIVE_DAPPID = process.env.REACT_APP_BLOCKNATIVE_DAPPID;
 
 export const NETWORKS = {
   localhost: {

diff --git a/packages/react-app/src/routes/create/Create.jsx b/packages/react-app/src/routes/create/Create.jsx
@@ -135,54 +135,56 @@ const Create = ({ address, mainnetProvider, userSigner, tx, readContracts, write
       >
         Back
       </Button>
-      <Box borderWidth={"1px"} padding={"4% 18% 6% 18%"} borderRadius={12}>
-        <Center>
-          <Text fontSize="lg">Create</Text>
-        </Center>
-        <form onSubmit={onSubmit}>
-          <FormControl id="create">
-            <FormLabel>Name</FormLabel>
-            <Input size="lg" placeholder="Party Name" onChange={e => (partyObj.name = e.currentTarget.value)} />
-
-            <FormLabel>Description</FormLabel>
-            <Textarea
-              size="lg"
-              placeholder="Describe your party"
-              rows={3}
-              onChange={e => (partyObj.description = e.currentTarget.value)}
-            />
-
-            <FormLabel>Participants</FormLabel>
-            <Textarea
-              size="lg"
-              placeholder="ex: alice.eth, 0x6b541b78349097714B9D1aB6A788dB5e0dCF21a3, ..."
-              rows={5}
-              onChange={parseParticipants}
-              isInvalid={isInvalidParticipantInput}
-            />
-
-            <FormLabel>Candidates</FormLabel>
-            <Textarea
-              size="lg"
-              placeholder="ex: 0x802999C71263f7B30927F720CF0AC10A76a0494C, bob.eth, ..."
-              rows={4}
-              onChange={parseCandidates}
-              isInvalid={isInvalidCandidateInput}
-            />
-            <FormLabel>Strategy</FormLabel>
-            <Select size="lg" onChange={e => (partyObj.config.strategy = e.target.value)}>
-              <option>Linear</option>
-              <option>Quadratic</option>
-            </Select>
-
-            <Center pt={10}>
-              <Button size="lg" type="submit" isLoading={isLoading} loadingText={loadingText}>
-                Submit Party
-              </Button>
-            </Center>
-          </FormControl>
-        </form>
-      </Box>
+      <Center p='5'>
+        <Box borderWidth={"1px"} shadow="xl" rounded="md" p="10" w="4xl" minW='sm'>
+          <Center p='5'>
+            <Text fontSize="lg">Create Party</Text>
+          </Center>
+          <form onSubmit={onSubmit}>
+            <FormControl id="create">
+              <FormLabel>Name</FormLabel>
+              <Input size="lg" placeholder="Party Name" onChange={e => (partyObj.name = e.currentTarget.value)} />
+
+              <FormLabel>Description</FormLabel>
+              <Textarea
+                size="lg"
+                placeholder="Describe your party"
+                rows={3}
+                onChange={e => (partyObj.description = e.currentTarget.value)}
+              />
+
+              <FormLabel>Participants</FormLabel>
+              <Textarea
+                size="lg"
+                placeholder="ex: alice.eth, 0x6b541b78349097714B9D1aB6A788dB5e0dCF21a3, ..."
+                rows={5}
+                onChange={parseParticipants}
+                isInvalid={isInvalidParticipantInput}
+              />
+
+              <FormLabel>Candidates</FormLabel>
+              <Textarea
+                size="lg"
+                placeholder="ex: 0x802999C71263f7B30927F720CF0AC10A76a0494C, bob.eth, ..."
+                rows={4}
+                onChange={parseCandidates}
+                isInvalid={isInvalidCandidateInput}
+              />
+              <FormLabel>Strategy</FormLabel>
+              <Select size="lg" onChange={e => (partyObj.config.strategy = e.target.value)}>
+                <option>Linear</option>
+                <option>Quadratic</option>
+              </Select>
+
+              <Center pt={10}>
+                <Button size="lg" type="submit" isLoading={isLoading} loadingText={loadingText}>
+                  Submit Party
+                </Button>
+              </Center>
+            </FormControl>
+          </form>
+        </Box>
+      </Center>
     </Box>
   );
 };

diff --git a/packages/react-app/src/routes/home/Home.jsx b/packages/react-app/src/routes/home/Home.jsx
@@ -1,10 +1,12 @@
 import { Button } from "@chakra-ui/button";
 import { AddIcon } from "@chakra-ui/icons";
-import { Box, Heading, HStack, Spacer } from "@chakra-ui/layout";
+import { Box, Heading, HStack, Spacer, Flex } from "@chakra-ui/layout";
 import { useColorModeValue } from "@chakra-ui/color-mode";
+import { Wrap, WrapItem } from '@chakra-ui/react'
 import React, { useEffect, useState, useMemo } from "react";
 import { useHistory, Link } from "react-router-dom";
 import MongoDbController from "../../controllers/mongodbController";
+import { PartyCard, EmptyCard } from "./components";
 
 function Home({ address, mainnetProvider, tx, readContracts, writeContracts, targetNetwork }) {
   /***** Load Data from db *****/
@@ -27,25 +29,7 @@ function Home({ address, mainnetProvider, tx, readContracts, writeContracts, tar
   const headingColor = useColorModeValue("gray.800", "whiteAlpha.900");
 
   const cards = useMemo(() => {
-    return (
-      data &&
-      data.map(d => (
-        <Box borderWidth="1px" key={`box-${d.id}`}>
-          <p>{`Id: ${d.id}`}</p>
-          <p>{d.name}</p>
-          <p>{d.desc}</p>
-          <Button
-            variant="link"
-            to={`/party/${d.id}`}
-            onClick={() => {
-              routeHistory.push(`/party/${d.id}`);
-            }}
-          >
-            View
-          </Button>
-        </Box>
-      ))
-    );
+    return data && data.map(d => <WrapItem p='2'><PartyCard name={d.name} desc={d.description} id={d.id} /></WrapItem>);
   }, [data]);
 
   const createElection = () => {
@@ -63,7 +47,15 @@ function Home({ address, mainnetProvider, tx, readContracts, writeContracts, tar
           Create Party
         </Button>
       </HStack>
-      <Box>{cards}</Box>
+      <Wrap>
+      {
+        cards && cards.length > 0 
+        ? 
+        cards 
+        : 
+        <EmptyCard />
+      }
+      </Wrap>
     </Box>
   );
 }

diff --git a/packages/react-app/src/routes/home/components/EmptyCard.jsx b/packages/react-app/src/routes/home/components/EmptyCard.jsx
@@ -0,0 +1,20 @@
+import {Box, Button, Text} from "@chakra-ui/react";
+import { useHistory, Link } from "react-router-dom";
+
+export const EmptyCard = ({}) => {
+const routeHistory = useHistory();
+    return ( 
+        <Box borderWidth="1px" rounded="md" shadow="xl" p="5" w="sm" key={`box-create`}>
+        <Text>No Parties</Text>
+        <Button
+          variant="link"
+          to={`/create`}
+          onClick={() => {
+            routeHistory.push(`/create`);
+          }}
+        >
+          Create a new party
+        </Button>
+      </Box>
+    )
+}
diff --git a/packages/react-app/src/routes/home/components/PartyCard.jsx b/packages/react-app/src/routes/home/components/PartyCard.jsx
@@ -0,0 +1,24 @@
+import { Box, Button, Text } from "@chakra-ui/react";
+import { useHistory, Link } from "react-router-dom";
+
+export const PartyCard = ({ name, desc, id }) => {
+  const routeHistory = useHistory();
+  return (
+    <Box borderWidth="1px" key={`box-${id}`} rounded="md" shadow="xl" p="5" w="sm">
+      <Text fontSize="lg" fontWeight="semibold">
+        {name}
+      </Text>
+      <Text fontSize="xs" color="gray.400">{`Id: ${id}`}</Text>
+      <Text isTruncated>{desc}</Text>
+      <Button
+        variant="link"
+        to={`/party/${id}`}
+        onClick={() => {
+          routeHistory.push(`/party/${id}`);
+        }}
+      >
+        View
+      </Button>
+    </Box>
+  );
+};
diff --git a/packages/react-app/src/routes/home/components/index.js b/packages/react-app/src/routes/home/components/index.js
@@ -0,0 +1,2 @@
+export { EmptyCard } from "./EmptyCard";
+export { PartyCard } from "./PartyCard";