diff --git a/src/modules/core/components/AccountAvatar.tsx b/src/modules/core/components/AccountAvatar.tsx index 5c9366a5..bfc08c06 100644 --- 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 index 2639abbc..dc49f8be 100644 --- a/src/modules/donation/components/DonationConfirmation.tsx +++ b/src/modules/donation/components/DonationConfirmation.tsx @@ -32,9 +32,9 @@ export const DonationConfirmation: React.FC = ({ 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 = ({ }, [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 = ({ Total amount - + - +
{protocolFeePercent > 0 && ( @@ -97,7 +97,7 @@ export const DonationConfirmation: React.FC = ({ /> )} - {values.potAccountId && chefFeePercent > 0 && ( + {inputs.potAccountId && chefFeePercent > 0 && ( = ({ )}
- {values.recipientAccountId && ( + {inputs.recipientAccountId && ( = ({ } = useRouteQuery(); const { + form, isBalanceSufficient, matchingPots, minAmountError, - form, isDisabled, onSubmit, } = useDonationForm({ @@ -46,16 +46,16 @@ export const DonationFlow: React.FC = ({ : 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 = ({ closeModal, currentStep, form, + inputs, isBalanceSufficient, matchingPots, minAmountError, @@ -124,9 +125,7 @@ export const DonationFlow: React.FC = ({ : 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 index f748fa2f..77714a81 100644 --- 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 = ({ + 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 = ({ 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 = ({ const projectList = useMemo( () => - potApplications.map(({ applicant }) => ( - } - /> - ) : ( - } - /> - ) - } - /> - )), - - [potApplications, potDistributionStrategy], + pot + ? potApplications.map(({ applicant }) => ( + ( + account_id === applicant.id, + )} + onCheckedChange={(checked) => + onChange( + checked + ? value.concat([{ account_id: applicant.id }]) + : value.filter( + ({ account_id }) => + account_id !== applicant.id, + ), + ) + } + /> + )} + /> + ) : ( + ( + + )} + /> + ) + } + /> + )) + : 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 index c0b51787..7867d92c 100644 --- 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 index d1af97b7..16b9b0a7 100644 --- 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>( () => ({ + 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 = 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 index 34d93e88..5160d6e0 100644 --- 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";