Merge pull request #13 from bitbeckers/polish0

Polish0

app/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/components/FUX/AssignFuxModal/index.tsx

@@ -18,6 +18,7 @@ import {
   NumberInputField,
   NumberInputStepper,
   Spacer,
+  Tooltip,
 } from "@chakra-ui/react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -95,11 +96,13 @@ const AssignFuxModal: React.FC<{
 
   return (
     <>
-      <IconButton
-        onClick={onOpen}
-        aria-label="Give FUX"
-        icon={<AddIcon />}
-      ></IconButton>
+      <Tooltip hasArrow label="Update FUX Given" aria-label="Update FUX Given">
+        <IconButton
+          onClick={onOpen}
+          aria-label="Give FUX"
+          icon={<AddIcon />}
+        ></IconButton>
+      </Tooltip>
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay bg="#1D131D" />

app/components/FUX/ContributorModal/index.tsx

@@ -1,6 +1,7 @@
 import { useAddContributors } from "../../../hooks/workstream";
 import { ContributorRow } from "../ContributorRow";
 import {
+  Box,
   Button,
   ButtonGroup,
   Input,
@@ -16,6 +17,8 @@ import {
   InputRightElement,
   Spacer,
   Icon,
+  Text,
+  Tooltip,
 } from "@chakra-ui/react";
 import { isAddress } from "ethers/lib/utils";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -28,8 +31,9 @@ type FormData = {
 
 const ContributorModal: React.FC<{
   workstreamID: number;
+  workstreamName: string;
   contributors?: { user: { id: string } }[];
-}> = ({ workstreamID, contributors }) => {
+}> = ({ workstreamID, workstreamName, contributors }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const addContributors = useAddContributors();
 
@@ -66,10 +70,14 @@ const ContributorModal: React.FC<{
   };
 
   const input = (
+    <>
+    <Text mb={3}>Contributors</Text>
     <form onSubmit={handleSubmit(onSubmit)}>
       {contributors?.map(({ user }, index) => (
         <ContributorRow key={index} address={user.id} />
       ))}
+      <Box mt={6}><hr /></Box>
+      <Text mt={6}>Invite Contributors</Text>
 
       {fields.map((field, index) => (
         <InputGroup key={field.id} marginTop={"1em"}>
@@ -80,11 +88,13 @@ const ContributorModal: React.FC<{
           />
           {index == fields.length - 1 ? (
             <InputRightElement>
-              <IconButton
-                aria-label="Add contributor"
-                onClick={() => append({ address: "" })}
-                icon={<Icon as={BsFillPersonPlusFill} />}
-              />
+              <Tooltip hasArrow label="Add Another Contributor" aria-label="Add Another Contributor">
+                <IconButton
+                  aria-label="Add another contributor"
+                  onClick={() => append({ address: "" })}
+                  icon={<Icon as={BsFillPersonPlusFill} />}
+                />
+              </Tooltip>
             </InputRightElement>
           ) : undefined}
         </InputGroup>
@@ -95,24 +105,27 @@ const ContributorModal: React.FC<{
         </Button>
         <Spacer />
         <Button isLoading={isSubmitting} type="submit">
-          Store
+          Submit
         </Button>
       </ButtonGroup>
     </form>
+    </>
   );
 
   return (
     <>
-      <IconButton
-        onClick={onOpen}
-        aria-label="Manage contributors"
-        icon={<Icon as={BsFillPersonPlusFill} />}
-      ></IconButton>
+      <Tooltip hasArrow label="Manage Contributors" aria-label="Manage Contributors">
+        <IconButton
+          onClick={onOpen}
+          aria-label="Manage contributors"
+          icon={<Icon as={BsFillPersonPlusFill} />}
+        ></IconButton>
+      </Tooltip>
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay bg="#1D131D" />
         <ModalContent bg="#221527">
-          <ModalHeader>Workstream contributors</ModalHeader>
+          <ModalHeader>{workstreamName}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>{input}</ModalBody>
         </ModalContent>

app/components/FUX/ContributorRow/index.tsx

@@ -1,5 +1,6 @@
-import { HStack, Avatar, Text, Button, useToast } from "@chakra-ui/react";
+import { HStack, Avatar, Icon, Text, Button, useToast } from "@chakra-ui/react";
 import { formatAddress, useENS } from "@raidguild/quiver";
+import { CopyIcon }from "@chakra-ui/icons";
 
 export const ContributorRow: React.FC<{ address: string }> = ({ address }) => {
   const { address: _address, ens, avatar } = useENS({ address });
@@ -14,17 +15,19 @@ export const ContributorRow: React.FC<{ address: string }> = ({ address }) => {
   };
 
   return ens ? (
-    <HStack>
+    <HStack spacing={3} mb={3}>
       <Avatar name={ens} src={avatar} />
       <Button variant={"link"} onClick={() => handleClick()}>
-        <Text>{ens}</Text>
+        <Text mr={2}>{ens}</Text>
+        <CopyIcon />
       </Button>
     </HStack>
   ) : (
-    <HStack>
+    <HStack spacing={3} mb={3}>
       <Avatar name={address} src={avatar} />
       <Button variant={"link"} onClick={() => handleClick()}>
-        <Text>{formatAddress(address)}</Text>
+        <Text mr={2}>{formatAddress(address)}</Text>
+        <CopyIcon />
       </Button>
     </HStack>
   );

app/components/FUX/WorkstreamModal/index.tsx

@@ -152,22 +152,24 @@ const WorkstreamModal: React.FC<{ onCloseAction: () => void }> = ({
           </VStack>
 
           <VStack>
+
             <Controller
-              name={`funding`}
+              name={`fuxGiven`}
               control={control}
               rules={{ required: true }}
-              key={`funding`}
+              key={`fuxGiven`}
               render={({ field: { ref, onChange, ...restField } }) => (
                 <>
                   <FormHelperText textColor={"white"} w={"100%"}>
-                    Fund workstream
+                    How many FUX do you give?
                   </FormHelperText>
                   <InputGroup>
                     <NumberInput
-                      precision={2}
-                      step={0.05}
+                      precision={0}
+                      step={1}
                       onChange={onChange}
                       min={0}
+                      max={fuxBalance}
                       {...restField}
                     >
                       <NumberInputField
@@ -181,34 +183,32 @@ const WorkstreamModal: React.FC<{ onCloseAction: () => void }> = ({
                       </NumberInputStepper>
                     </NumberInput>
                     <InputRightAddon bg={"#8E4EC6"} fontWeight={"bold"}>
-                      <Text>{`${nativeToken}`}</Text>
+                      <Text>FUX</Text>
                     </InputRightAddon>
                   </InputGroup>
                   <FormHelperText textColor={"white"} w={"100%"}>
-                    {`Balance: ${parseFloat(
-                      ethers.utils.formatEther(ethBalance)
-                    ).toFixed(2)} ${nativeToken}`}
+                    {`${fuxBalance} FUX to give`}
                   </FormHelperText>
                 </>
               )}
             />
+
             <Controller
-              name={`fuxGiven`}
+              name={`funding`}
               control={control}
               rules={{ required: true }}
-              key={`fuxGiven`}
+              key={`funding`}
               render={({ field: { ref, onChange, ...restField } }) => (
                 <>
                   <FormHelperText textColor={"white"} w={"100%"}>
-                    How many FUX do you give?
+                    Fund workstream
                   </FormHelperText>
                   <InputGroup>
                     <NumberInput
-                      precision={0}
-                      step={1}
+                      precision={2}
+                      step={0.05}
                       onChange={onChange}
                       min={0}
-                      max={fuxBalance}
                       {...restField}
                     >
                       <NumberInputField
@@ -222,15 +222,18 @@ const WorkstreamModal: React.FC<{ onCloseAction: () => void }> = ({
                       </NumberInputStepper>
                     </NumberInput>
                     <InputRightAddon bg={"#8E4EC6"} fontWeight={"bold"}>
-                      <Text>FUX</Text>
+                      <Text>{`${nativeToken}`}</Text>
                     </InputRightAddon>
                   </InputGroup>
                   <FormHelperText textColor={"white"} w={"100%"}>
-                    {`${fuxBalance} FUX to give`}
+                    {`Balance: ${parseFloat(
+                      ethers.utils.formatEther(ethBalance)
+                    ).toFixed(2)} ${nativeToken}`}
                   </FormHelperText>
                 </>
               )}
             />
+
           </VStack>
         </HStack>
       </FormControl>
@@ -240,7 +243,7 @@ const WorkstreamModal: React.FC<{ onCloseAction: () => void }> = ({
         </Button>
         <Spacer />
         <Button isLoading={isSubmitting} type="submit">
-          Create workstream
+          Create Workstream
         </Button>
       </ButtonGroup>
     </form>
@@ -249,13 +252,13 @@ const WorkstreamModal: React.FC<{ onCloseAction: () => void }> = ({
   return (
     <>
       <Button onClick={onOpen} leftIcon={<AddIcon />}>
-        Add workstream
+        Add Workstream
       </Button>
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay bg="#1D131D" />
         <ModalContent bg="#221527">
-          <ModalHeader>Add workstream</ModalHeader>
+          <ModalHeader>Add Workstream</ModalHeader>
           <ModalCloseButton />
           <ModalBody>{input}</ModalBody>
         </ModalContent>

app/components/FUX/WorkstreamRow/index.tsx

@@ -8,6 +8,7 @@ import {
   GridItem,
   IconButton,
   Text,
+  Tooltip,
   useToast,
 } from "@chakra-ui/react";
 import { ethers } from "ethers";
@@ -44,10 +45,17 @@ const WorkstreamRow: React.FC<{
 
   return _workstream ? (
     <>
-      <GridItem display={"flex"} alignItems={"center"} bg="#301A3A" colSpan={7}>
-        <Checkbox alignContent="center" pl={"1em"}>
+      <GridItem
+        display={"flex"}
+        alignItems={"center"}
+        bg="#301A3A"
+        colSpan={7}
+        pl={5}
+      >
+        {/* <Checkbox alignContent="center" pl={"1em"}>
           {_workstream.name}
-        </Checkbox>
+        </Checkbox> */}
+        {_workstream.name}
       </GridItem>
       <GridItem
         display={"flex"}
@@ -81,6 +89,7 @@ const WorkstreamRow: React.FC<{
       <GridItem display={"flex"} alignItems={"center"} colSpan={1}>
         <ContributorModal
           workstreamID={workstreamID}
+          workstreamName={_workstream.name || "N/A"}
           contributors={_workstream.contributors?.filter(
             (contributor) => contributor
           )}
@@ -95,17 +104,21 @@ const WorkstreamRow: React.FC<{
               query: { workstreamID },
             }}
           >
+            <Tooltip hasArrow label="Evaluate" aria-label="Evaluate">
+              <IconButton
+                aria-label="resolve workstream"
+                icon={<ArrowRightIcon />}
+              />
+            </Tooltip>
+          </NextLink>
+        ) : (
+          <Tooltip hasArrow label="Evaluate" aria-label="Evaluate">
             <IconButton
+              onClick={handleClick}
               aria-label="resolve workstream"
               icon={<ArrowRightIcon />}
             />
-          </NextLink>
-        ) : (
-          <IconButton
-            onClick={handleClick}
-            aria-label="resolve workstream"
-            icon={<ArrowRightIcon />}
-          />
+          </Tooltip>
         )}
       </GridItem>
     </>

app/components/Header/index.tsx

@@ -27,7 +27,7 @@ const Header: React.FC<{}> = () => {
       direction={["column", "row"]}
       as="nav"
       w="100%"
-      p="5"
+      p="10"
       justify="space-around"
       align="center"
       bg="#221527"

app/package.json

@@ -28,7 +28,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.33.1",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "summon-evm": "*",
     "urql": "^3.0.3",
     "web3modal": "^1.9.8"

app/pages/index.tsx

@@ -1,5 +1,5 @@
-import type { NextPage } from "next";
 import { Box, Button, VStack, Text, Link } from "@chakra-ui/react";
+import type { NextPage } from "next";
 import NextLink from "next/link";
 
 const Home: NextPage = () => {
@@ -17,9 +17,7 @@ const Home: NextPage = () => {
 
       <NextLink href="/start" passHref>
         <Button p={"1em"}>
-          <Link>
-            Get started
-          </Link>
+          <Link>Get started</Link>
         </Button>
       </NextLink>
 
@@ -29,7 +27,7 @@ const Home: NextPage = () => {
           amount of time between here and there, you have a limited amount of
           fucks to give. Very few, in fact. And if you go around giving a fuck
           about everything and everyone without conscious thought or
-          choice—well, then you&aposre going to get fucked.”
+          choice—well, then you&apos;re going to get fucked.”
         </Text>
         <Text fontSize="sm" fontWeight="bold" p={"2em"}>
           Mark Manson, The Subtle Art of Not Giving a F*ck: A Counterintuitive