wip

PotLock · Jun 19, 2024 · 7d033e8 · 7d033e8
1 parent 06b3b92
commit 7d033e8
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 45 deletions.
diff --git a/src/modules/donation/components/DonationConfirmation.tsx b/src/modules/donation/components/DonationConfirmation.tsx
@@ -1,37 +1,53 @@
+import { useCallback, useState } from "react";
+
 import { Pencil } from "lucide-react";
 import { UseFormReturn } from "react-hook-form";
 
 import { NEAR_TOKEN_DENOM } from "@/common/constants";
 import {
+  Button,
   Checkbox,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
-  Input,
   Textarea,
 } from "@/common/ui/components";
+import { cn } from "@/common/ui/utils";
 import { useNearUsdDisplayValue } from "@/modules/core";
 
 import { DonationBreakdown } from "./DonationBreakdown";
 import { DonationInputs } from "../models";
 
 export type DonationConfirmationProps = {
+  allowNotes?: boolean;
   form: UseFormReturn<DonationInputs>;
 };
 
-export const DonationConfirmation = ({ form }: DonationConfirmationProps) => {
+export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
+  allowNotes = false,
+  form,
+}) => {
   const values = form.watch();
+  const [isMessageFieldVisible, setIsMessageFieldVisible] = useState(false);
+
+  const onAddNoteClick = useCallback(() => {
+    setIsMessageFieldVisible(true);
+    form.setValue("message", "", { shouldDirty: true });
+  }, [form]);
+
+  const onDeleteNoteClick = useCallback(() => {
+    setIsMessageFieldVisible(false);
+    form.resetField("message");
+  }, [form]);
 
   const totalNearAmountUsdDisplayValue = useNearUsdDisplayValue(values.amount);
 
   const totalAmountUsdDisplayValue =
-    values.tokenId === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
+    values.token === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
 
   console.table(values);
 
@@ -49,6 +65,7 @@ export const DonationConfirmation = ({ form }: DonationConfirmationProps) => {
 
           <div un-flex="~" un-items="center" un-gap="2">
             <span>N</span>
+
             <span
               className="prose"
               un-text="xl"
@@ -98,25 +115,41 @@ export const DonationConfirmation = ({ form }: DonationConfirmationProps) => {
           </div>
         </div>
 
-        {values.allocationStrategy === "direct" ||
-          (values.potDistributionStrategy === "manually" && (
-            <FormField
-              control={form.control}
-              name="message"
-              render={({ field }) => (
-                <FormItem className="flex w-full flex-col items-start gap-3 border-t border-t-neutral-200 pt-5">
-                  <FormLabel className="flex justify-center gap-3.5">
-                    <Pencil className="color-neutral-500 h-3.5 w-3.5" />
-                    <span un-font="500">Add Note</span>
-                  </FormLabel>
+        {allowNotes && (
+          <FormField
+            control={form.control}
+            name="message"
+            render={({ field }) => {
+              const isSpecified = typeof field.value === "string";
 
-                  <FormControl>
+              return (
+                <FormItem className="flex w-full flex-col items-start gap-3 border-t border-t-neutral-200 pt-5">
+                  <Button
+                    onClick={isSpecified ? onDeleteNoteClick : onAddNoteClick}
+                    variant="brand-plain"
+                    className={cn("p-0", {
+                      "color-neutral-500": !isSpecified,
+                      "color-destructive": isSpecified,
+                    })}
+                    asChild
+                  >
+                    <FormLabel className="flex justify-center gap-3.5">
+                      <Pencil width={14} height={14} />
+
+                      <span un-font="500">{`${isSpecified ? "Delete" : "Add"} Note`}</span>
+                    </FormLabel>
+                  </Button>
+
+                  <FormControl
+                    className={cn({ hidden: !isMessageFieldVisible })}
+                  >
                     <Textarea className="resize-none" {...field} />
                   </FormControl>
                 </FormItem>
-              )}
-            />
-          ))}
+              );
+            }}
+          />
+        )}
       </DialogDescription>
     </>
   );

diff --git a/src/modules/donation/components/DonationFlow.tsx b/src/modules/donation/components/DonationFlow.tsx
@@ -42,7 +42,12 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
         );
 
       case "confirmation":
-        return <DonationConfirmation {...{ form }} />;
+        return (
+          <DonationConfirmation
+            allowNotes={"accountId" in props}
+            {...{ form }}
+          />
+        );
 
       case "success":
         return <DonationSuccess {...{ closeModal }} />;

diff --git a/src/modules/donation/components/DonationPotAllocation.tsx b/src/modules/donation/components/DonationPotAllocation.tsx
@@ -33,8 +33,8 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
   potId,
   form,
 }) => {
-  const tokenId = form.watch("tokenId");
-  const isFtDonation = tokenId !== NEAR_TOKEN_DENOM;
+  const token = form.watch("token");
+  const isFtDonation = token !== NEAR_TOKEN_DENOM;
 
   const {
     isLoading: isPotLoading,
@@ -56,11 +56,11 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
     () =>
       (isFtDonation
         ? availableFtBalances?.find(
-            (ftBalance) => ftBalance.contract_account_id === tokenId,
+            (ftBalance) => ftBalance.contract_account_id === token,
           )
         : availableNearBalance) ?? null,
 
-    [availableFtBalances, availableNearBalance, isFtDonation, tokenId],
+    [availableFtBalances, availableNearBalance, isFtDonation, token],
   );
 
   return isPotLoading || availableBalance === null ? (
@@ -125,7 +125,7 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
                 </div>
               }
               fieldExtension={
-                <Select defaultValue={tokenId}>
+                <Select defaultValue={token}>
                   <SelectTrigger className="h-full w-min rounded-r-none shadow-none">
                     <SelectValue />
                   </SelectTrigger>
@@ -140,9 +140,7 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
               }
               type="number"
               placeholder="0.00"
-              min={
-                tokenId === NEAR_TOKEN_DENOM ? DONATION_MIN_NEAR_AMOUNT : 0.0
-              }
+              min={token === NEAR_TOKEN_DENOM ? DONATION_MIN_NEAR_AMOUNT : 0.0}
               step={0.01}
               appendix="$ 0.00"
             />

diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx
@@ -46,10 +46,10 @@ export type DonationProjectAllocationProps = ByAccountId & {
 export const DonationProjectAllocation: React.FC<
   DonationProjectAllocationProps
 > = ({ accountId, form }) => {
-  const [amount, tokenId] = form.watch(["amount", "tokenId"]);
+  const [amount, token] = form.watch(["amount", "token"]);
   const { data: activePots } = potlock.useAccountActivePots({ accountId });
   const hasMatchingPots = (activePots?.length ?? 0) > 0;
-  const isFtDonation = tokenId !== NEAR_TOKEN_DENOM;
+  const isFtDonation = token !== NEAR_TOKEN_DENOM;
 
   const {
     isLoading: isAccountLoading,
@@ -79,11 +79,11 @@ export const DonationProjectAllocation: React.FC<
     () =>
       (isFtDonation
         ? availableFtBalances?.find(
-            (ftBalance) => ftBalance.contract_account_id === tokenId,
+            (ftBalance) => ftBalance.contract_account_id === token,
           )
         : availableNearBalance) ?? null,
 
-    [availableFtBalances, availableNearBalance, isFtDonation, tokenId],
+    [availableFtBalances, availableNearBalance, isFtDonation, token],
   );
 
   const availableBalanceFloat = useMemo(
@@ -196,7 +196,7 @@ export const DonationProjectAllocation: React.FC<
                   fieldExtension={
                     <FormField
                       control={form.control}
-                      name="tokenId"
+                      name="token"
                       render={({ field: fieldExtension }) => (
                         <Select
                           defaultValue={fieldExtension.value}
@@ -236,9 +236,7 @@ export const DonationProjectAllocation: React.FC<
                   type="number"
                   placeholder="0.00"
                   min={
-                    tokenId === NEAR_TOKEN_DENOM
-                      ? DONATION_MIN_NEAR_AMOUNT
-                      : 0.0
+                    token === NEAR_TOKEN_DENOM ? DONATION_MIN_NEAR_AMOUNT : 0.0
                   }
                   max={availableBalanceFloat ?? undefined}
                   step={0.01}

diff --git a/src/modules/donation/hooks/forms.ts b/src/modules/donation/hooks/forms.ts
@@ -13,18 +13,26 @@ import {
   DonationPotDistributionStrategy,
   DonationSubmissionInputs,
   donationSchema,
-  tokenIdSchema,
+  tokenSchema,
 } from "../models";
 
 export const useDonationForm = (params: DonationSubmissionInputs) => {
   const form = useForm<DonationInputs>({
     resolver: zodResolver(donationSchema),
 
     defaultValues: {
-      allocationStrategy: DonationAllocationStrategyEnum.direct,
+      allocationStrategy:
+        DonationAllocationStrategyEnum[
+          "accountId" in params ? "direct" : "pot"
+        ],
+
       amount: 0.1,
-      tokenId: tokenIdSchema.parse(undefined),
-      potDistributionStrategy: DonationPotDistributionStrategy.manually,
+      token: tokenSchema.parse(undefined),
+
+      potDistributionStrategy:
+        DonationPotDistributionStrategy[
+          "accountId" in params ? "manually" : "evenly"
+        ],
     },
   });
 

diff --git a/src/modules/donation/models.ts b/src/modules/donation/models.ts
@@ -63,7 +63,7 @@ export const donationAllocationStrategies: Record<
 
 export type DonationStep = "allocation" | "confirmation" | "success";
 
-export const tokenIdSchema = literal(NEAR_TOKEN_DENOM)
+export const tokenSchema = literal(NEAR_TOKEN_DENOM)
   .or(string().min(6))
   .default(NEAR_TOKEN_DENOM)
   .describe('Either "NEAR" or FT contract account id.');
@@ -77,7 +77,7 @@ export const donationSchema = object({
     message: "Incorrect donation distribution strategy.",
   }).default(DonationPotDistributionStrategy.evenly),
 
-  tokenId: tokenIdSchema,
+  token: tokenSchema,
 
   amount: number()
     .positive()
@@ -99,8 +99,8 @@ export const donationSchema = object({
 
   bypassChefFee: boolean().default(false),
 }).refine(
-  ({ tokenId, amount }) =>
-    tokenId === NEAR_TOKEN_DENOM
+  ({ token, amount }) =>
+    token === NEAR_TOKEN_DENOM
       ? amount > DONATION_MIN_NEAR_AMOUNT
       : amount > 0.0,