wip

src/modules/donation/components/DonationBreakdown.tsx

@@ -1,32 +1,28 @@
-import { UseFormReturn } from "react-hook-form";
-
 import { NEAR_TOKEN_DENOM } from "@/common/constants";
+import { ByTokenId } from "@/common/types";
 import { TokenIcon } from "@/modules/core";
 
-import { useDonationFees } from "../hooks/fees";
-import { DonationInputs } from "../models";
+import { DonationFees } from "../hooks/fees";
 
-export type DonationBreakdownProps = {
-  form: UseFormReturn<DonationInputs>;
+export type DonationBreakdownProps = ByTokenId & {
+  fees: DonationFees;
 };
 
 export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
-  form,
-}) => {
-  const values = form.watch();
-
-  const {
+  fees: {
     projectAllocationAmount,
     projectAllocationPercent,
     protocolFeeAmount,
     protocolFeePercent,
-    referrerFeeAmount,
-    referrerFeePercent,
+    referralFeeAmount,
+    referralFeePercent,
     chefFeeAmount,
     chefFeePercent,
-  } = useDonationFees(values);
+  },
 
-  const computedTotalFees = [
+  ...props
+}) => {
+  const totalFees = [
     {
       label: "Project allocation",
       amount: projectAllocationAmount,
@@ -49,9 +45,9 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
 
     {
       label: "Referral fees",
-      amount: referrerFeeAmount,
-      percentage: referrerFeePercent,
-      display: referrerFeeAmount > 0,
+      amount: referralFeeAmount,
+      percentage: referralFeePercent,
+      display: referralFeeAmount > 0,
     },
 
     {
@@ -69,21 +65,21 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
 
       <div
         un-flex="~ col"
-        un-gap="2"
+        un-gap="3"
         un-p="4"
         un-border="~ neutral-300 rounded-lg"
       >
-        {computedTotalFees.map(
+        {totalFees.map(
           ({
             display = true,
             label,
             amount,
             percentage,
-            tokenId = values.tokenId,
+            tokenId = props.tokenId,
           }) =>
             display && (
               <div un-flex="~" un-justify="between" un-gap="4" key={label}>
-                <span className="prose">
+                <span className="prose line-height-none" un-mt="0.6">
                   {label + (percentage ? ` (${percentage}%)` : "")}
                 </span>
 

src/modules/donation/components/DonationConfirmation.tsx

@@ -32,11 +32,9 @@ export type DonationConfirmationProps = {
 export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
   form,
 }) => {
-  const values = form.watch();
   const [isMessageFieldVisible, setIsMessageFieldVisible] = useState(false);
-
-  const { protocolFeePercent, protocolFeeRecipientAccountId, chefFeePercent } =
-    useDonationFees(values);
+  const values = form.watch();
+  const fees = useDonationFees(values);
 
   const onAddNoteClick = useCallback(() => {
     setIsMessageFieldVisible(true);
@@ -63,6 +61,9 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
   const totalAmountUsdDisplayValue =
     values.tokenId === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
 
+  const { protocolFeeRecipientAccountId, protocolFeePercent, chefFeePercent } =
+    fees;
+
   console.table(values);
 
   return (
@@ -81,23 +82,28 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
             <TokenIcon tokenId={values.tokenId} />
 
             <span
-              className="prose"
+              className="prose line-height-none"
+              un-mt="0.7"
               un-text="xl"
               un-font="600"
             >{`${totalAmount} ${selectedTokenMetadata?.symbol ?? "⋯"}`}</span>
 
             {totalAmountUsdDisplayValue && (
-              <span className="prose" un-text="gray-500 xl">
+              <span
+                className="prose line-height-none"
+                un-mt="0.7"
+                un-text="gray-500 xl"
+              >
                 {totalAmountUsdDisplayValue}
               </span>
             )}
           </div>
         </div>
 
-        <DonationBreakdown {...{ form }} />
+        <DonationBreakdown tokenId={values.tokenId} {...{ fees }} />
 
         <div className="flex flex-col gap-2">
-          {protocolFeeRecipientAccountId && (
+          {protocolFeeRecipientAccountId !== undefined && (
             <FormField
               control={form.control}
               name="bypassProtocolFee"

src/modules/donation/components/DonationFlow.tsx

@@ -76,7 +76,7 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
 
   return (
     <Form {...form}>
-      <form {...{ onSubmit }}>
+      <form un-flex="~ col" un-h="full" {...{ onSubmit }}>
         {content}
 
         <DialogFooter>
@@ -92,11 +92,11 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
           )}
 
           <Button
-            type={currentStep === "confirmation" ? "submit" : "button"}
+            type="button"
             variant="brand-filled"
             onClick={
               currentStep === "confirmation"
-                ? undefined
+                ? onSubmit
                 : dispatch.donation.nextStep
             }
             disabled={isDisabled}

src/modules/donation/components/DonationModal.tsx

@@ -32,7 +32,7 @@ export const DonationModal = create((props: DonationModalProps) => {
   }, [close]);
 
   return (
-    <Dialog open={self.visible} onOpenChange={dispatch.donation.reset}>
+    <Dialog open={self.visible}>
       <DialogContent
         onBackClick={
           state.currentStep !== "allocation" && state.currentStep !== "success"

src/modules/donation/hooks/fees.ts

@@ -11,8 +11,8 @@ export type DonationFees = {
   protocolFeeAmount: number;
   protocolFeePercent: number;
   protocolFeeRecipientAccountId?: string;
-  referrerFeeAmount: number;
-  referrerFeePercent: number;
+  referralFeeAmount: number;
+  referralFeePercent: number;
   chefFeeAmount: number;
   chefFeePercent: number;
 };
@@ -27,54 +27,84 @@ export const useDonationFees = ({
   bypassChefFee,
 }: DonationFeeInputs): DonationFees => {
   const { data: potlockDonationConfig } = potlock.useDonationConfig();
+  const { data: potData } = potlock.usePot({ potId: potAccountId ?? "" });
+
+  /**
+   *? Protocol fee:
+   */
+
+  const protocolFeeInitialBasisPoints =
+    potlockDonationConfig?.protocol_fee_basis_points ?? 0;
 
   const protocolFeeBasisPoints = bypassProtocolFee
     ? 0
-    : potlockDonationConfig?.protocol_fee_basis_points ?? 0;
+    : protocolFeeInitialBasisPoints;
+
+  const protocolFeeAmount =
+    (amount * protocolFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS;
+
+  const protocolFeePercent = basisPointsToPercent(
+    protocolFeeInitialBasisPoints,
+  );
+
+  const protocolFeeRecipientAccountId =
+    potlockDonationConfig?.protocol_fee_recipient_account;
+
+  /**
+   *? Referral fee:
+   */
 
   const potlockReferralFeeBasisPoints =
     potlockDonationConfig?.referral_fee_basis_points ?? 0;
 
-  const { data: potData } = potlock.usePot({ potId: potAccountId ?? "" });
+  const referralFeeInitialBasisPoints =
+    potData?.referral_fee_public_round_basis_points ??
+    potlockReferralFeeBasisPoints;
 
   const referralFeeBasisPoints = referrerAccountId
-    ? 0
-    : potData?.referral_fee_public_round_basis_points ??
-      potlockReferralFeeBasisPoints;
+    ? referralFeeInitialBasisPoints
+    : 0;
 
-  const chefFeeBasisPoints = bypassChefFee
-    ? 0
-    : potData?.chef_fee_basis_points ?? 0;
+  const referralFeeAmount =
+    (amount * referralFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS;
+
+  const referralFeePercent = basisPointsToPercent(referralFeeBasisPoints);
+
+  /**
+   *? Chef fee:
+   */
+
+  const chefFeeInitialBasisPoints = potData?.chef_fee_basis_points ?? 0;
+  const chefFeeBasisPoints = bypassChefFee ? 0 : chefFeeInitialBasisPoints;
+  const chefFeeAmount = (amount * chefFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS;
+  const chefFeePercent = basisPointsToPercent(chefFeeInitialBasisPoints);
+
+  /**
+   *? Project allocation:
+   */
 
   const projectAllocationBasisPoints =
     TOTAL_FEE_BASIS_POINTS -
     protocolFeeBasisPoints -
     chefFeeBasisPoints -
     referralFeeBasisPoints;
 
-  return {
-    projectAllocationAmount:
-      (amount * projectAllocationBasisPoints) / TOTAL_FEE_BASIS_POINTS,
-
-    projectAllocationPercent: basisPointsToPercent(
-      projectAllocationBasisPoints,
-    ),
-
-    protocolFeeAmount:
-      (amount * protocolFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
+  const projectAllocationAmount =
+    (amount * projectAllocationBasisPoints) / TOTAL_FEE_BASIS_POINTS;
 
-    protocolFeePercent: basisPointsToPercent(protocolFeeBasisPoints),
+  const projectAllocationPercent = basisPointsToPercent(
+    projectAllocationBasisPoints,
+  );
 
-    protocolFeeRecipientAccountId:
-      potlockDonationConfig?.protocol_fee_recipient_account,
-
-    referrerFeeAmount:
-      (amount * referralFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
-
-    referrerFeePercent: basisPointsToPercent(referralFeeBasisPoints),
-
-    chefFeeAmount: (amount * chefFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
-
-    chefFeePercent: basisPointsToPercent(chefFeeBasisPoints),
+  return {
+    projectAllocationAmount,
+    projectAllocationPercent,
+    protocolFeeAmount,
+    protocolFeePercent,
+    protocolFeeRecipientAccountId,
+    referralFeeAmount,
+    referralFeePercent,
+    chefFeeAmount,
+    chefFeePercent,
   };
 };

src/modules/donation/hooks/forms.ts

@@ -9,7 +9,10 @@ import { walletApi } from "@/common/contracts";
 import { useAvailableBalance } from "@/modules/core";
 import useIsHuman from "@/modules/core/hooks/useIsHuman";
 
-import { DONATION_MIN_NEAR_AMOUNT_ERROR } from "../constants";
+import {
+  DONATION_MIN_NEAR_AMOUNT,
+  DONATION_MIN_NEAR_AMOUNT_ERROR,
+} from "../constants";
 import {
   DonationAllocationStrategyEnum,
   DonationInputs,
@@ -87,8 +90,6 @@ export const useDonationForm = ({
     [params],
   );
 
-  console.table({ isDisabled, hasChanges });
-
   return {
     hasChanges,
     isBalanceSufficient,

src/modules/donation/index.ts

@@ -2,6 +2,8 @@ import { useCallback } from "react";
 
 import { useModal } from "@ebay/nice-modal-react";
 
+import { dispatch } from "@/app/_store";
+
 import { DonationModal } from "./components/DonationModal";
 import { DonationParameters } from "./models";
 
@@ -15,6 +17,7 @@ export const useDonation = (props: DonationParameters) => {
       (event: React.MouseEvent) => {
         event.preventDefault();
         event.stopPropagation();
+        dispatch.donation.reset();
         modal.show(props);
       },
 

src/modules/donation/models.ts

@@ -209,15 +209,15 @@ export const donationModel = createModel<RootModel>()({
               .catch((error) => dispatch.donation.failure(error));
 
           case DonationAllocationStrategyEnum.pot:
-            return dispatch.failure;
+            return void dispatch.donation.failure;
         }
       } else if ("potId" in props) {
         switch (potDistributionStrategy) {
           case DonationPotDistributionStrategy.evenly:
-            return dispatch.failure;
+            return void dispatch.donation.failure;
 
           case DonationPotDistributionStrategy.manually:
-            return dispatch.failure;
+            return void dispatch.donation.failure;
         }
       }
     },