Merge pull request #98 from hansmrtn/strategy-selection

reworked strategy logic, split components

packages/react-app/src/routes/create/Create.jsx

@@ -144,15 +144,13 @@ const Create = ({ address, mainnetProvider, userSigner, tx, readContracts, write
             <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"
@@ -161,7 +159,6 @@ const Create = ({ address, mainnetProvider, userSigner, tx, readContracts, write
                 onChange={parseParticipants}
                 isInvalid={isInvalidParticipantInput}
               />
-
               <FormLabel>Candidates</FormLabel>
               <Textarea
                 size="lg"
@@ -170,12 +167,6 @@ const Create = ({ address, mainnetProvider, userSigner, tx, readContracts, write
                 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

packages/react-app/src/routes/party/Party.jsx

@@ -1,9 +1,21 @@
-import React, { useEffect, useState, useMemo } from "react";
-import { Button, Box, Divider, Center } from "@chakra-ui/react";
-import { ArrowBackIcon } from "@chakra-ui/icons";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Box,
+  Center,
+  Menu,
+  MenuOptionGroup,
+  MenuButton,
+  MenuList,
+  MenuItemOption,
+  Spacer,
+  Text,
+  HStack,
+} from "@chakra-ui/react";
+import { ArrowBackIcon, ChevronDownIcon } from "@chakra-ui/icons";
 import { useParams, useHistory } from "react-router-dom";
 import MongoDBController from "../../controllers/mongodbController";
-import { Vote, View, Distribute } from "./components";
+import { VoteTable, ViewTable, Distribute, Metadata } from "./components";
 
 export default function Party({
   address,
@@ -25,6 +37,7 @@ export default function Party({
   const [canVote, setCanVote] = useState(false);
   const [isParticipant, setIsParticipant] = useState(false);
   const [distribution, setDistribution] = useState();
+  const [strategy, setStrategy] = useState("linear");
 
   const db = new MongoDBController();
 
@@ -49,20 +62,20 @@ export default function Party({
       const votes = partyData.ballots.map(b => JSON.parse(b.data.ballot.votes.replace(/[ \n\r]/g, "")));
       let sum = 0;
       let processed = [];
-      let strategy = partyData.config.strategy;
+      // let strategy = partyData.config.strategy;
       if (!strategy || strategy === "") {
-        strategy = "Linear";
+        strategy = "linear";
         console.log("Reverted to linear strategy");
       }
       for (let i = 0; i < partyData.candidates.length; i++) {
         const candidate = partyData.candidates[i];
         // Strategy handling
         // TODO: Switch statement
-        if (strategy === "Linear") {
+        if (strategy === "linear") {
           let c = votes.reduce((total, vote) => vote[candidate] + total, 0);
           sum += c;
           processed.push({ address: candidate, reduced: c });
-        } else if (strategy === "Quadratic") {
+        } else if (strategy === "quadratic") {
           let c = votes.reduce((total, vote) => vote[candidate] ** 0.5 + total, 0);
           sum += c;
           processed.push({ address: candidate, reduced: c });
@@ -77,10 +90,31 @@ export default function Party({
     }
   };
 
+  const StrategySelect = () => {
+    return (
+      <Menu closeOnSelect={false}>
+        <MenuButton as={Button} variant="link" rightIcon={<ChevronDownIcon />}>
+          {strategy}
+        </MenuButton>
+        <MenuList>
+          <MenuOptionGroup title="select strategy" type="radio" onChange={e => setStrategy(e)}>
+            <MenuItemOption key="linear-select" value="linear">
+              Linear
+            </MenuItemOption>
+            ,
+            <MenuItemOption key="quadratic-select" value="quadratic">
+              Quadratic
+            </MenuItemOption>
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
+    );
+  };
+
   // Calculate the distribution on load
   useEffect(() => {
     calcDistribution();
-  }, [partyData]);
+  }, [partyData, strategy]);
 
   return (
     <Box>
@@ -103,11 +137,18 @@ export default function Party({
       >
         Debug
       </Button>
-      <Box>
-        {showDebug && <p>{JSON.stringify(partyData)}</p>}
-        <Center p="5">
+      <Center p="5">
+        <Box borderWidth={"1px"} shadow="xl" rounded="md" p="10" w="4xl">
+          {showDebug && <p>{JSON.stringify(partyData)}</p>}
+          <Metadata
+            partyData={partyData}
+            mainnetProvider={mainnetProvider}
+            votesData={accountVoteData}
+            distribution={distribution}
+            strategy={strategy}
+          />
           {canVote ? (
-            <Vote
+            <VoteTable
               dbInstance={db}
               partyData={partyData}
               address={address}
@@ -117,15 +158,20 @@ export default function Party({
               mainnetProvider={mainnetProvider}
             />
           ) : (
-            <View
-              partyData={partyData}
-              mainnetProvider={mainnetProvider}
-              votesData={accountVoteData}
-              distribution={distribution}
-            />
+            <Box>
+              <Center pb="1" pt="3">
+                <Text pr="3">Strategy:</Text>
+                <StrategySelect />
+              </Center>
+              <ViewTable
+                partyData={partyData}
+                mainnetProvider={mainnetProvider}
+                votesData={accountVoteData}
+                distribution={distribution}
+                strategy={strategy}
+              />
+            </Box>
           )}
-        </Center>
-        <Center p="5">
           <Distribute
             dbInstance={db}
             partyData={partyData}
@@ -135,9 +181,10 @@ export default function Party({
             readContracts={readContracts}
             tx={tx}
             distribution={distribution}
+            strategy={strategy}
           />
-        </Center>
-      </Box>
+        </Box>
+      </Center>
     </Box>
   );
 }

packages/react-app/src/routes/party/components/Distribute.jsx

@@ -1,5 +1,5 @@
 import { NumberInput, NumberInputField, Box, Button, Input, HStack, Spacer, Text, Center } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { toWei } from "web3-utils";
 import { BigNumber, ethers } from "ethers";
 import $ from "jquery";
@@ -13,6 +13,7 @@ export const Distribute = ({
   writeContracts,
   tx,
   distribution,
+  strategy,
 }) => {
   const [tokenInstance, setTokenInstance] = useState(null);
   const [amounts, setAmounts] = useState(null);
@@ -84,13 +85,12 @@ export const Distribute = ({
       const amts = [];
       let tot = BigNumber.from("0x00");
       for (let i = 0; i < validAdrs.length; i++) {
-        let pay = (validScores[i] * amt).toFixed(18).toString();
+        let pay = (validScores[i] * amt).toFixed(16).toString();
         const x = BigNumber.from(toWei(pay));
         amts.push(x);
         adrs.push(validAdrs[i]);
         tot = tot.add(x);
       }
-      console.log(adrs, amts);
       setTotal(tot);
       setAmounts(amts);
       setAddresses(adrs);
@@ -151,8 +151,8 @@ export const Distribute = ({
   };
 
   return (
-    <Box borderWidth={"1px"} shadow="xl" rounded="md" p="10" w="4xl" minW='lg'>
-      <Center pb='10'>
+    <Box>
+      <Center pb="10" pt="10">
         <Text fontSize="lg">Distribute Funds</Text>
       </Center>
       <HStack>
@@ -162,7 +162,7 @@ export const Distribute = ({
           Load Token
         </Button>
       </HStack>
-      <HStack  pt={4}>
+      <HStack pt={4}>
         <Spacer />
         <NumberInput onChange={handleAmountChange}>
           <NumberInputField placeholder="1" />

packages/react-app/src/routes/party/components/Metadata.jsx

@@ -0,0 +1,24 @@
+import { Box, Text, Center } from "@chakra-ui/react";
+import React from "react";
+
+export const Metadata = ({ partyData, mainnetProvider, votesData, distribution, strategy }) => {
+  return (
+    <Box>
+      <Center pt={4}>
+        <Text fontSize="lg">Party</Text>
+      </Center>
+      <Center pt={4}>
+        <Text fontSize="xl">{`${partyData.name}`}</Text>
+      </Center>
+      <Center pt={4} pl="5%" pr="5%">
+        <Text fontSize="sm">{`${partyData.description}`}</Text>
+      </Center>
+      <Center p="4">
+        <Text
+          fontWeight="semibold"
+          fontSize="lg"
+        >{`Voted: ${partyData?.ballots?.length}/${partyData?.participants?.length}`}</Text>
+      </Center>
+    </Box>
+  );
+};

packages/react-app/src/routes/party/components/View.jsx → packages/react-app/src/routes/party/components/ViewTable.jsx

@@ -17,7 +17,7 @@ import {
 import React, { useState, useMemo, useEffect } from "react";
 import AddressChakra from "../../../components/AddressChakra";
 
-export const View = ({ partyData, mainnetProvider, votesData, distribution }) => {
+export const ViewTable = ({ partyData, mainnetProvider, votesData, distribution, strategy }) => {
   const [castVotes, setCastVotes] = useState(null);
   const [currentDist, setCurrentDist] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -28,7 +28,7 @@ export const View = ({ partyData, mainnetProvider, votesData, distribution }) =>
     const dist =
       distribution && distribution.reduce((obj, item) => Object.assign(obj, { [item.address]: item.score }), {});
     setCurrentDist(dist);
-  }, [votesData]);
+  }, [votesData, distribution]);
 
   const candidateRows = useMemo(() => {
     const row =
@@ -52,34 +52,20 @@ export const View = ({ partyData, mainnetProvider, votesData, distribution }) =>
         );
       });
     return row;
-  }, [partyData, castVotes]);
+  }, [partyData, castVotes, distribution]);
 
   return (
-    <Box borderWidth={"1px"} shadow='xl' rounded='md' p='10' w='4xl'>
-      <Center pt={4}>
-        <Text fontSize="lg">Party</Text>
-      </Center>
-      <Center pt={4}>
-        <Text fontSize='xl'>{`${partyData?.name}`}</Text>
-      </Center>
-      <Center pt={4} pl="5%" pr="5%">
-        <Text fontSize="sm">{`${partyData?.description}`}</Text>
-      </Center>
-        <Center p='4'>
-        <Text fontWeight='semibold' fontSize='lg'>{`Voted: ${partyData?.ballots?.length}/${partyData?.participants?.length}`}</Text>
-      </Center>
-
-      <Table borderWidth='1px'>
+    <Box>
+      <Table borderWidth="1px">
         <Thead>
           <Tr>
             <Th>Address</Th>
             <Th>Your Vote</Th>
-            <Th>Current Distribution</Th>
+            <Th>{`Score (${strategy})`}</Th>
           </Tr>
         </Thead>
         {candidateRows}
-        <Tfoot>
-        </Tfoot>
+        <Tfoot></Tfoot>
       </Table>
     </Box>
   );

packages/react-app/src/routes/party/components/Vote.jsx → packages/react-app/src/routes/party/components/VoteTable.jsx

@@ -20,7 +20,15 @@ import {
 import React, { useState, useMemo } from "react";
 import AddressChakra from "../../../components/AddressChakra";
 
-export const Vote = ({ dbInstance, partyData, address, userSigner, targetNetwork, readContracts, mainnetProvider }) => {
+export const VoteTable = ({
+  dbInstance,
+  partyData,
+  address,
+  userSigner,
+  targetNetwork,
+  readContracts,
+  mainnetProvider,
+}) => {
   // Init votes data to 0 votes for each candidate
   const [votesData, setVotesData] = useState(partyData.candidates.reduce((o, key) => ({ ...o, [key]: 0 }), {}));
   // Init votes left to nvotes
@@ -126,16 +134,7 @@ export const Vote = ({ dbInstance, partyData, address, userSigner, targetNetwork
   }, [partyData, votesLeft]);
 
   return (
-    <Box borderWidth={"1px"} shadow="xl" rounded="md" p="10" w="4xl" minW="sm">
-      <Center pt={4}>
-        <Text fontSize="lg">Party</Text>
-      </Center>
-      <Center pt={4}>
-        <Text fontSize="xl">{`${partyData.name}`}</Text>
-      </Center>
-      <Center pt={4} pl="5%" pr="5%">
-        <Text fontSize="sm">{`${partyData.description}`}</Text>
-      </Center>
+    <Box>
       <Center pt={4}>
         <Text fontSize="lg">Cast Votes</Text>
       </Center>

packages/react-app/src/routes/party/components/index.js

@@ -1,3 +1,4 @@
-export { Vote } from "./Vote";
-export { View } from "./View";
+export { VoteTable } from "./VoteTable";
+export { Metadata } from "./Metadata";
+export { ViewTable } from "./ViewTable";
 export { Distribute } from "./Distribute";