wip

src/common/ui/components/radio-group.tsx

@@ -59,15 +59,15 @@ export const RadioGroupItem = forwardRef<
       <RadioGroupPrimitive.Item
         ref={ref}
         className={cn(
-          "aspect-square h-4 w-4 rounded-full border border-inherit text-current",
+          "aspect-square h-5 w-5 rounded-full border border-inherit text-current",
           "ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...inputProps}
       >
         <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-          <Circle className="h-2.5 w-2.5 fill-current text-current" />
+          <Circle className="h-3.5 w-3.5 fill-current text-current" />
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
 
@@ -79,8 +79,7 @@ export const RadioGroupItem = forwardRef<
 
         {hint && (
           <span
-            un-font="500"
-            className={cn({
+            className={cn("font-500", {
               "text-neutral-400": disabled,
               "text-neutral-500": !disabled,
             })}

src/modules/donation/components/DonationPotAllocation.tsx

@@ -1,11 +1,12 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { values } from "remeda";
 
 import { ByPotId, potlock } from "@/common/api/potlock";
 import { NearIcon } from "@/common/assets/svgs";
 import { NEAR_TOKEN_DENOM } from "@/common/constants";
 import { yoctoNearToFloat } from "@/common/lib";
+import { ByAccountId } from "@/common/types";
 import {
   DialogDescription,
   DialogHeader,
@@ -37,6 +38,7 @@ import { DonationVerificationWarning } from "./DonationVerificationWarning";
 import { DONATION_INSUFFICIENT_BALANCE_ERROR } from "../constants";
 import {
   DonationAllocationInputs,
+  DonationInputs,
   donationPotDistributionStrategies,
 } from "../models";
 
@@ -49,11 +51,13 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
   balanceFloat,
   potId,
 }) => {
-  const [amount, tokenId, potDistributionStrategy] = form.watch([
-    "amount",
-    "tokenId",
-    "potDistributionStrategy",
-  ]);
+  const [amount, tokenId, potDistributionStrategy, potDonationPlan] =
+    form.watch([
+      "amount",
+      "tokenId",
+      "potDistributionStrategy",
+      "potDonationPlan",
+    ]);
 
   const {
     isLoading: isPotLoading,
@@ -71,6 +75,32 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
   const error = potError ?? potApplicationsError;
   const nearAmountUsdDisplayValue = useNearUsdDisplayValue(amount);
 
+  const handleDonationPlanChange = useCallback(
+    ({ accountId }: ByAccountId): React.ChangeEventHandler<HTMLInputElement> =>
+      ({ target: { value } }) =>
+        form.setValue(
+          "potDonationPlan",
+
+          potDonationPlan?.reduce(
+            (entries, entry) => {
+              if (entry.account_id === accountId) {
+                return entries?.concat([
+                  {
+                    ...entry,
+                    account_id: accountId,
+                    amount: parseFloat(value),
+                  },
+                ]);
+              } else return entries ?? [];
+            },
+
+            [] as DonationInputs["potDonationPlan"],
+          ),
+        ),
+
+    [form, potDonationPlan],
+  );
+
   const generalSection = useMemo(
     () =>
       pot ? (
@@ -220,10 +250,10 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
                   <FormField
                     name="potDonationPlan"
                     control={form.control}
-                    render={({ field: { onChange, value = [], ...field } }) => {
-                      const perRecipientAmount = value.find(
+                    render={({ field: { value = [], ...field } }) => {
+                      const recipientEntry = value.find(
                         ({ account_id }) => account_id === applicant.id,
-                      )?.amount;
+                      );
 
                       return (
                         <TextField
@@ -235,8 +265,10 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
                           )}
                           max={balanceFloat ?? undefined}
                           step={0.01}
-                          value={perRecipientAmount}
-                          onChange={(number) => onChange(number)}
+                          defaultValue={recipientEntry?.amount}
+                          onChange={handleDonationPlanChange({
+                            accountId: applicant.id,
+                          })}
                           appendix={<NearIcon width={24} height={24} />}
                           customErrorMessage={
                             isBalanceSufficient
@@ -256,6 +288,7 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
     [
       balanceFloat,
       form.control,
+      handleDonationPlanChange,
       isBalanceSufficient,
       pot,
       potApplications,

src/modules/donation/hooks/forms.ts

@@ -8,6 +8,7 @@ import { walletApi } from "@/common/api/near";
 import { PotApplicationStatusEnum, potlock } from "@/common/api/potlock";
 import { NEAR_TOKEN_DENOM } from "@/common/constants";
 import { toChronologicalOrder } from "@/common/lib";
+import { ByAccountId } from "@/common/types";
 import { useAvailableBalance } from "@/modules/core";
 import useIsHuman from "@/modules/core/hooks/useIsHuman";
 import { dispatch } from "@/store";

src/modules/donation/models/index.ts

@@ -40,11 +40,13 @@ export const donationPotDistributionStrategies: Record<
 > = {
   evenly: {
     label: "Evenly",
+    hint: "(Allocate funds evenly across multiple projects)",
     value: DonationPotDistributionStrategyEnum.evenly,
   },
 
   manually: {
     label: "Manually",
+    hint: "(Specify amount for each project)",
     value: DonationPotDistributionStrategyEnum.manually,
   },
 };