Skip to content

Commit

Permalink
Merge pull request #63 from bitbeckers/fix/updates_and_stuff
Browse files Browse the repository at this point in the history 
fix(ui): ui polish
  • Loading branch information
@bitbeckers
bitbeckers authored Oct 2, 2023
2 parents d22ab95 + 6661c63 commit 65ad442
Show file tree
Hide file tree
Showing 7 changed files with 332 additions and 297 deletions.
2 changes: 1 addition & 1 deletion app/components/Contributor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const Contributor: React.FC<{
<StatNumber>--%</StatNumber>
</Stat>
</StatGroup>
{coordinator ?? <StarIcon mr={"1em"} />}
{coordinator ?? <StarIcon mr={"1em"} color={"yellow"} />}
</Flex>
);
};
2 changes: 1 addition & 1 deletion app/components/ContributorOverview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const ContributorOverview: React.FC<{
{workstream.coordinator?.id.toLowerCase() ===
cont.contributor.id.toLowerCase() ? (
<Tooltip label="Coordinator">
<StarIcon ml={"1em"} />
<StarIcon ml={"1em"} color={"yellow"} />
</Tooltip>
) : undefined}
</Flex>
Expand Down
40 changes: 23 additions & 17 deletions app/components/FormComponents/ControlledNumberInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ import { RiInformationLine } from "react-icons/ri";

const ControlledNumberInput: React.FC<{
fieldName: string;
helperText: string;
tooltipText: string;
placeholder?: string;
helperText?: string;
tooltipText?: string;
units?: string;
precision?: number;
step?: number;
Expand All @@ -31,6 +32,7 @@ const ControlledNumberInput: React.FC<{
config?: RegisterOptions<FieldValues, string>;
}> = ({
fieldName,
placeholder = "0",
helperText,
tooltipText,
units,
Expand All @@ -54,15 +56,17 @@ const ControlledNumberInput: React.FC<{
rules={config}
key={fieldName}
render={({ field: { ref, onChange, ...restField } }) => (
<>
<FormHelperText textColor={"white"} w={"100%"} display={"flex"}>
{helperText}
<Tooltip label={tooltipText}>
<Box ml={2}>
<RiInformationLine />
</Box>
</Tooltip>
</FormHelperText>
<Box>
{helperText && tooltipText && (
<FormHelperText textColor={"white"} w={"100%"} display={"flex"}>
{helperText}
<Tooltip label={tooltipText}>
<Box ml={2}>
<RiInformationLine />
</Box>
</Tooltip>
</FormHelperText>
)}
<InputGroup>
<NumberInput
precision={precision}
Expand All @@ -81,24 +85,26 @@ const ControlledNumberInput: React.FC<{
<NumberInputField
ref={ref}
name={restField.name}
borderRightRadius={0}
placeholder={"0"}
borderRightRadius={units ? 0 : "base"}
placeholder={placeholder}
/>
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<InputRightAddon bg={"#8E4EC6"} fontWeight={"bold"}>
{units}
</InputRightAddon>
{units && (
<InputRightAddon bg={"#8E4EC6"} fontWeight={"bold"}>
{units}
</InputRightAddon>
)}
</InputGroup>
{errors[fieldName] && (
<Text color="red.500" fontSize="sm">
{`${fieldName} is required`}
</Text>
)}
</>
</Box>
)}
/>
);
Expand Down
1 change: 1 addition & 0 deletions app/components/ValueHeader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const ValueHeader: React.FC<{ name?: string }> = ({ name }) => {
bg="#221527"
justifyContent="center"
align="center"
pt={"2em"}
pb={"2em"}
>
<Heading>{`Evaluate ${name ? name : ""}`}</Heading>
Expand Down
190 changes: 97 additions & 93 deletions app/components/ValueReviewForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useBlockTx } from "../../hooks/useBlockTx";
import { useCustomToasts } from "../../hooks/useCustomToasts";
import { contractAddresses, contractABI } from "../../utils/constants";
import { CloseButton } from "../CloseButton";
import { ControlledNumberInput } from "../FormComponents/ControlledNumberInput";
import User from "../User";
import { StarIcon } from "@chakra-ui/icons";
import {
Expand All @@ -27,7 +28,7 @@ import {
import _ from "lodash";
import { useRouter } from "next/router";
import React, { Fragment } from "react";
import { Controller, useForm } from "react-hook-form";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useAccount, useContractWrite, usePrepareContractWrite } from "wagmi";

type FormData = {
Expand Down Expand Up @@ -73,15 +74,16 @@ const ValueReviewForm: React.FC<{
user || ("" as `0x${string}`)
);

const formMethods = useForm<FormData>({
defaultValues: { ratings: { ...currentEvaluations } },
});

const {
handleSubmit,
reset,
watch,
control,
formState: { errors, isSubmitting },
} = useForm<FormData>({
defaultValues: { ratings: { ...currentEvaluations } },
});
} = formMethods;

const formData = watch();
const ratings = watch("ratings");
Expand All @@ -99,9 +101,10 @@ const ValueReviewForm: React.FC<{
abi: contractABI.fux,
functionName: "submitEvaluation",
args: [workstreamWithContributor?.id, _contributors, _ratings],
enabled: !!workstreamWithContributor?.id,
});

console.log({ wsID: workstreamWithContributor?.id, _contributors, _ratings, config });

const { write } = useContractWrite({
...config,
onError(e) {
Expand Down Expand Up @@ -135,6 +138,11 @@ const ValueReviewForm: React.FC<{
}

if (checkChain()) {
toast.success(
"Submitting evaluation",
"Please validate and sign transaction"
);
console.log(write);
write?.();
}
};
Expand Down Expand Up @@ -164,95 +172,91 @@ const ValueReviewForm: React.FC<{
}

const reviewForm = (
<form onSubmit={handleSubmit(onSubmit)}>
<Center>
<Text paddingBottom={"2em"} paddingTop={"2em"} textAlign={"center"}>
Distribute 100 points to rate value contribution
</Text>
</Center>
<FormControl>
<Grid gap={2} templateColumns="repeat(12, 1fr)">
<GridItem colSpan={8}>
<Text>User</Text>
</GridItem>
<GridItem colSpan={2}>
<Text>Committed</Text>
</GridItem>
<GridItem colSpan={2}>
<Text>Rating</Text>
</GridItem>
{filtered.map((contributor, index) => {
const address = contributor.contributor.id as `0x${string}`;
return (
<Fragment key={index}>
<GridItem colSpan={8}>
<Flex direction={"row"} alignItems={"center"} gap={"2"}>
<User
address={address as `0x${string}`}
direction="horizontal"
displayAvatar={true}
<FormProvider {...formMethods}>
<form onSubmit={handleSubmit(onSubmit)}>
<Center>
<Text paddingBottom={"2em"} paddingTop={"2em"} textAlign={"center"}>
Distribute 100 points to rate value contribution
</Text>
</Center>
<FormControl>
<Grid gap={2} templateColumns="repeat(12, 1fr)">
<GridItem colSpan={8}>
<Text>User</Text>
</GridItem>
<GridItem colSpan={2}>
<Text>Committed</Text>
</GridItem>
<GridItem colSpan={2}>
<Text>Rating</Text>
</GridItem>
{filtered.map((contributor, index) => {
const address = contributor.contributor.id as `0x${string}`;
return (
<Fragment key={index}>
<GridItem colSpan={8}>
<Flex direction={"row"} alignItems={"center"} gap={"2"}>
<User
address={address as `0x${string}`}
direction="horizontal"
displayAvatar={true}
/>
{coordinator?.id?.toLowerCase() ===
address.toLowerCase() ? (
<StarIcon color={"yellow"} />
) : undefined}
</Flex>
</GridItem>
<GridItem colSpan={2}>
<Stat>
<StatNumber>{`${
contributor.commitment || 0
}%`}</StatNumber>
</Stat>
</GridItem>
<GridItem display={"inline-grid"} colSpan={2}>
<ControlledNumberInput
fieldName={`ratings.${address}`}
precision={0}
step={1}
min={0}
max={100}
placeholder={
formData.ratings[
address.toLowerCase() as `0x${string}`
]?.toString() ?? "0"
}
/>
{coordinator?.id?.toLowerCase() ===
address.toLowerCase() ? (
<StarIcon color={"yellow"} />
) : undefined}
</Flex>
</GridItem>
<GridItem colSpan={2}>
<Stat>
<StatNumber>{`${contributor.commitment || 0}%`}</StatNumber>
</Stat>
</GridItem>
<GridItem bg="#301A3A" display={"inline-grid"} colSpan={2}>
<Controller
name={`ratings.${address}`}
control={control}
rules={{ required: true }}
key={`ratings.${address}`}
render={({ field: { ref, ...restField } }) => (
<NumberInput min={0} max={100} step={1} {...restField}>
<NumberInputField
ref={ref}
name={restField.name}
borderRadius={0}
placeholder={
formData.ratings[
address.toLowerCase() as `0x${string}`
]?.toString() ?? "0"
}
/>
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
)}
/>
</GridItem>
</Fragment>
);
})}
</Grid>
</FormControl>
</GridItem>
</Fragment>
);
})}
</Grid>
</FormControl>

<VStack w={"100%"} pt={4}>
<ButtonGroup>
<Button isLoading={isSubmitting} type="reset" onClick={() => reset()}>
Reset
</Button>
<Spacer />
<Button
isDisabled={total != 100}
isLoading={isSubmitting}
type="submit"
>
{total && total != 100
? `${100 - total} / 100`
: "Submit evaluation"}
</Button>
</ButtonGroup>
</VStack>
</form>
<VStack w={"100%"} pt={4}>
<ButtonGroup>
<Button
isLoading={isSubmitting}
type="reset"
onClick={() => reset()}
>
Reset
</Button>
<Spacer />
<Button
isDisabled={total != 100}
isLoading={isSubmitting}
type="submit"
>
{total && total != 100
? `${100 - total} / 100`
: "Submit evaluation"}
</Button>
</ButtonGroup>
</VStack>
</form>
</FormProvider>
);

return reviewForm;
Expand Down
9 changes: 4 additions & 5 deletions app/components/WorkstreamCard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import {
Evaluation,
WorkstreamContributor,
} from "../../.graphclient";
import { Evaluation, WorkstreamContributor } from "../../.graphclient";
import { useConstants } from "../../utils/constants";
import { ContributorOverview } from "../ContributorOverview";
import TokenBalance from "../TokenBalance";
Expand Down Expand Up @@ -107,7 +104,9 @@ const WorkstreamCard: React.FC<{
</AccordionButton>
<AccordionPanel pb={4}>
<Flex direction="column" alignItems={"flex-start"} py={3}>
<Link href={"/workstream/" + _workstream?.id}>View Workstream</Link>
<Link href={"/workstream/" + _workstream?.id} fontWeight={"bold"}>
View Workstream
</Link>
<Text>
Deadline:{" "}
{DateTime.fromSeconds(
Expand Down
Loading

1 comment on commit 65ad442

@vercel
Copy link

@vercel vercel bot commented on 65ad442 Oct 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fux-dapp-app-gcry – ./

app.fux.gg
fux-dapp-app-gcry.vercel.app
fux.gg
fux-dapp-app-gcry-bitbeckers.vercel.app
fux-dapp-app-gcry-git-main-bitbeckers.vercel.app
dao.fux.gg

Please sign in to comment.