wip

PotLock · Sep 19, 2024 · a5f0033 · a5f0033
1 parent 4eae6c4
commit a5f0033
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 70 deletions.
diff --git a/src/modules/core/components/AccountAvatar.tsx b/src/modules/core/components/AccountAvatar.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 
-import useProfileData from "@/modules/profile/hooks/data";
+import { useProfileData } from "@/modules/profile";
 
 export const AccountAvatar = ({
   accountId,

diff --git a/src/modules/donation/components/DonationConfirmation.tsx b/src/modules/donation/components/DonationConfirmation.tsx
@@ -32,9 +32,9 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
   form,
 }) => {
   const [isMessageFieldVisible, setIsMessageFieldVisible] = useState(false);
-  const values = form.watch();
-  const { data: pot } = potlock.usePot({ potId: values.potAccountId });
-  const fees = useDonationFees({ ...values, pot });
+  const inputs = form.watch();
+  const { data: pot } = potlock.usePot({ potId: inputs.potAccountId });
+  const fees = useDonationFees({ ...inputs, pot });
 
   const onAddNoteClick = useCallback(() => {
     setIsMessageFieldVisible(true);
@@ -47,10 +47,10 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
   }, [form]);
 
   const totalAmount =
-    values.potDonationRecipients?.reduce(
+    inputs.potDonationRecipients?.reduce(
       (total, { amount }) => total + (amount ?? 0.0),
       0.0,
-    ) ?? values.amount;
+    ) ?? inputs.amount;
 
   const { protocolFeeRecipientAccountId, protocolFeePercent, chefFeePercent } =
     fees;
@@ -67,10 +67,10 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
             Total amount
           </span>
 
-          <TotalTokenValue tokenId={values.tokenId} amountFloat={totalAmount} />
+          <TotalTokenValue tokenId={inputs.tokenId} amountFloat={totalAmount} />
         </div>
 
-        <DonationBreakdown tokenId={values.tokenId} {...{ fees }} />
+        <DonationBreakdown tokenId={inputs.tokenId} {...{ fees }} />
 
         <div className="flex flex-col gap-2">
           {protocolFeePercent > 0 && (
@@ -97,7 +97,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
             />
           )}
 
-          {values.potAccountId && chefFeePercent > 0 && (
+          {inputs.potAccountId && chefFeePercent > 0 && (
             <FormField
               control={form.control}
               name="bypassChefFee"
@@ -120,7 +120,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
           )}
         </div>
 
-        {values.recipientAccountId && (
+        {inputs.recipientAccountId && (
           <FormField
             control={form.control}
             name="message"

diff --git a/src/modules/donation/components/DonationFlow.tsx b/src/modules/donation/components/DonationFlow.tsx
@@ -31,10 +31,10 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
   } = useRouteQuery();
 
   const {
+    form,
     isBalanceSufficient,
     matchingPots,
     minAmountError,
-    form,
     isDisabled,
     onSubmit,
   } = useDonationForm({
@@ -46,16 +46,16 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
         : result?.referrer_id ?? undefined,
   });
 
-  const [tokenId] = form.watch(["tokenId"]);
-
-  const { balanceFloat } = useAvailableBalance({ tokenId });
+  const inputs = form.watch();
+  const { balanceFloat } = useAvailableBalance(inputs);
 
   const content = useMemo(() => {
     const staticAllocationProps = {
+      form,
       isBalanceSufficient,
       minAmountError,
       balanceFloat,
-      form,
+      ...inputs,
     };
 
     const staticSuccessProps = { form, result, transactionHash, closeModal };
@@ -89,6 +89,7 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
     closeModal,
     currentStep,
     form,
+    inputs,
     isBalanceSufficient,
     matchingPots,
     minAmountError,
@@ -124,9 +125,7 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
                   : dispatch.donation.nextStep
               }
               disabled={isDisabled}
-              className={cn({
-                "w-full": currentStep === "confirmation",
-              })}
+              className={cn({ "w-full": currentStep === "confirmation" })}
             >
               {currentStep === "confirmation"
                 ? "Confirm donation"

diff --git a/src/modules/donation/components/DonationPotAllocation.tsx b/src/modules/donation/components/DonationPotAllocation.tsx
@@ -43,11 +43,17 @@ export type DonationPotAllocationProps = ByPotId &
   DonationAllocationInputs & {};
 
 export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
+  form,
   isBalanceSufficient,
   balanceFloat,
   potId,
-  form,
 }) => {
+  const [amount, tokenId, potDistributionStrategy] = form.watch([
+    "amount",
+    "tokenId",
+    "potDistributionStrategy",
+  ]);
+
   const {
     isLoading: isPotLoading,
     data: pot,
@@ -58,20 +64,11 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
     isLoading: isPotApplicationListLoading,
     data: { results: potApplications } = { results: [] },
     error: potApplicationsError,
-  } = potlock.usePotApplications({
-    potId,
-    page_size: 100,
-  });
+  } = potlock.usePotApplications({ potId, page_size: 100 });
 
   const isLoading = isPotLoading || isPotApplicationListLoading;
   const error = potError ?? potApplicationsError;
 
-  const [amount, tokenId, potDistributionStrategy] = form.watch([
-    "amount",
-    "tokenId",
-    "potDistributionStrategy",
-  ]);
-
   const nearAmountUsdDisplayValue = useNearUsdDisplayValue(amount);
 
   const generalSection = useMemo(
@@ -189,27 +186,72 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
 
   const projectList = useMemo(
     () =>
-      potApplications.map(({ applicant }) => (
-        <AccountOption
-          key={applicant.id}
-          accountId={applicant.id}
-          secondaryAction={
-            potDistributionStrategy === "evenly" ? (
-              <FormField
-                name="potDistribution"
-                render={({ field }) => <CheckboxField {...field} />}
-              />
-            ) : (
-              <FormField
-                name="potDistribution"
-                render={({ field }) => <CheckboxField {...field} />}
-              />
-            )
-          }
-        />
-      )),
-
-    [potApplications, potDistributionStrategy],
+      pot
+        ? potApplications.map(({ applicant }) => (
+            <AccountOption
+              key={applicant.id}
+              accountId={applicant.id}
+              secondaryAction={
+                potDistributionStrategy === "evenly" ? (
+                  <FormField
+                    name="potDonationRecipients"
+                    control={form.control}
+                    render={({ field: { onChange, value = [], ...field } }) => (
+                      <CheckboxField
+                        {...field}
+                        checked={value.some(
+                          ({ account_id }) => account_id === applicant.id,
+                        )}
+                        onCheckedChange={(checked) =>
+                          onChange(
+                            checked
+                              ? value.concat([{ account_id: applicant.id }])
+                              : value.filter(
+                                  ({ account_id }) =>
+                                    account_id !== applicant.id,
+                                ),
+                          )
+                        }
+                      />
+                    )}
+                  />
+                ) : (
+                  <FormField
+                    name="potDistribution"
+                    render={({ field }) => (
+                      <TextField
+                        type="number"
+                        placeholder="0.00"
+                        min={yoctoNearToFloat(
+                          pot.min_matching_pool_donation_amount,
+                        )}
+                        max={balanceFloat ?? undefined}
+                        step={0.01}
+                        appendix={nearAmountUsdDisplayValue}
+                        customErrorMessage={
+                          isBalanceSufficient
+                            ? null
+                            : DONATION_INSUFFICIENT_BALANCE_ERROR
+                        }
+                        {...field}
+                      />
+                    )}
+                  />
+                )
+              }
+            />
+          ))
+        : null,
+
+    [
+      balanceFloat,
+      form.control,
+      isBalanceSufficient,
+      nearAmountUsdDisplayValue,
+      pot,
+      potApplications,
+      potDistributionStrategy,
+    ],
   );
 
   return error ? (

diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx
@@ -48,13 +48,19 @@ export type DonationProjectAllocationProps = ByAccountId &
 export const DonationProjectAllocation: React.FC<
   DonationProjectAllocationProps
 > = ({
+  form,
   isBalanceSufficient,
   minAmountError,
   accountId,
   balanceFloat,
   matchingPots,
-  form,
 }) => {
+  const [amount, tokenId, allocationStrategy] = form.watch([
+    "amount",
+    "tokenId",
+    "allocationStrategy",
+  ]);
+
   const { data: availableFts } = pagoda.useFtAccountBalances({
     accountId: walletApi.accountId,
   });
@@ -65,12 +71,6 @@ export const DonationProjectAllocation: React.FC<
     error: recipientDataError,
   } = potlock.useAccount({ accountId });
 
-  const [amount, tokenId, allocationStrategy] = form.watch([
-    "amount",
-    "tokenId",
-    "allocationStrategy",
-  ]);
-
   const isFtDonation =
     allocationStrategy !== "pot" && tokenId !== NEAR_TOKEN_DENOM;
 

diff --git a/src/modules/donation/hooks/forms.ts b/src/modules/donation/hooks/forms.ts
@@ -12,7 +12,10 @@ import { useAvailableBalance } from "@/modules/core";
 import useIsHuman from "@/modules/core/hooks/useIsHuman";
 import { dispatch } from "@/store";
 
-import { DONATION_MIN_NEAR_AMOUNT_ERROR } from "../constants";
+import {
+  DONATION_MIN_NEAR_AMOUNT,
+  DONATION_MIN_NEAR_AMOUNT_ERROR,
+} from "../constants";
 import { DonationInputs, donationSchema, donationTokenSchema } from "../models";
 import {
   DonationAllocationStrategyEnum,
@@ -46,6 +49,8 @@ export const useDonationForm = ({
 
   const defaultValues = useMemo<Partial<DonationInputs>>(
     () => ({
+      amount: DONATION_MIN_NEAR_AMOUNT,
+
       allocationStrategy:
         "accountId" in params
           ? DonationAllocationStrategyEnum[
@@ -80,14 +85,14 @@ export const useDonationForm = ({
     resetOptions: { keepDirtyValues: true },
   });
 
-  const currentValues = useWatch({ control: self.control });
-  const amount = currentValues.amount ?? 0;
-  const tokenId = currentValues.tokenId ?? NEAR_TOKEN_DENOM;
+  const values = useWatch(self);
+  const amount = values.amount ?? 0;
+  const tokenId = values.tokenId ?? NEAR_TOKEN_DENOM;
   const { balanceFloat } = useAvailableBalance({ tokenId });
 
-  const hasChanges = Object.keys(currentValues).some((key) => {
+  const hasChanges = Object.keys(values).some((key) => {
     const defaultValue = defaultValues[key as keyof DonationInputs];
-    const currentValue = currentValues[key as keyof DonationInputs];
+    const currentValue = values[key as keyof DonationInputs];
 
     return currentValue !== defaultValue;
   });
@@ -108,7 +113,7 @@ export const useDonationForm = ({
       : null;
 
   const onSubmit: SubmitHandler<DonationInputs> = useCallback(
-    (values) => dispatch.donation.submit({ ...values, ...params }),
+    (inputs) => dispatch.donation.submit({ ...inputs, ...params }),
     [params],
   );
 
@@ -119,23 +124,25 @@ export const useDonationForm = ({
      */
     if (
       "accountId" in params &&
-      currentValues.potAccountId === undefined &&
+      values.potAccountId === undefined &&
       defaultPotAccountId
     ) {
       self.setValue("potAccountId", defaultPotAccountId);
     }
-  }, [currentValues, defaultPotAccountId, self, hasChanges, params]);
+  }, [values, defaultPotAccountId, self, hasChanges, params]);
 
-  console.table(omit(currentValues, ["potAccountId"]));
+  console.table(omit(values, ["potAccountId"]));
 
   return {
+    form: self,
+    defaultValues,
     hasChanges,
     isBalanceSufficient,
     isDisabled,
     isSenderHumanVerified,
+    onSubmit: self.handleSubmit(onSubmit),
     matchingPots,
-    form: self,
     minAmountError,
-    onSubmit: self.handleSubmit(onSubmit),
+    inputs: values,
   };
 };
diff --git a/src/modules/donation/models/effects.ts b/src/modules/donation/models/effects.ts
@@ -14,7 +14,6 @@ import { AppDispatcher } from "@/store";
 import { DonationInputs } from "./schemas";
 import {
   DonationAllocationStrategyEnum,
-  DonationPotBatchCallDraft,
   DonationSubmissionInputs,
 } from "../types";
 import { potDonationInputsToBatchDonationDraft } from "../utils/normalization";