wip

src/features/proportional-funding/components/actions.tsx

@@ -1,23 +1,45 @@
+import { useCallback } from "react";
+
 import Link from "next/link";
 import { MdOutlineWarningAmber } from "react-icons/md";
 
 import { Alert, AlertDescription, AlertTitle, Button } from "@/common/ui/components";
 import { useToast } from "@/common/ui/hooks";
 
 import {
-  type PFPayoutJustificationLookupParams,
+  type PFPayoutJustificationParams,
   usePFPayoutJustification,
 } from "../hooks/payout-justification";
 
-export type PFPayoutJustificationPublicationActionProps = PFPayoutJustificationLookupParams & {
+export type PFPayoutJustificationPublicationActionProps = PFPayoutJustificationParams & {
   href?: string;
 };
 
 export const PFPayoutJustificationPublicationAction: React.FC<
   PFPayoutJustificationPublicationActionProps
 > = ({ potId, href }) => {
   const { toast } = useToast();
-  const pfJustification = usePFPayoutJustification({ potId });
+
+  const onPublishSuccess = useCallback(() => {
+    toast({
+      title: "Success!",
+      description: "Payout justification has been published successfully.",
+    });
+  }, [toast]);
+
+  const onPublishError = useCallback(
+    (message: string) => {
+      toast({
+        title: "Unable to publish payout justification",
+        description: message,
+        variant: "destructive",
+      });
+    },
+
+    [toast],
+  );
+
+  const pfJustification = usePFPayoutJustification({ potId, onPublishSuccess, onPublishError });
 
   return typeof pfJustification.publish === "function" ? (
     <Alert variant="warning">

src/features/proportional-funding/hooks/payout-justification.ts

@@ -3,34 +3,33 @@ import { useCallback, useMemo } from "react";
 import { isNonNullish } from "remeda";
 
 import type { ByPotId } from "@/common/api/indexer";
-import { type Challenge, potContractHooks } from "@/common/contracts/core/pot";
+import { potContractHooks } from "@/common/contracts/core/pot";
 import { useWalletUserSession } from "@/common/wallet";
 import { usePotAuthorization } from "@/entities/pot";
 import { useVotingRoundResults } from "@/entities/voting-round";
 
 import { publishPayoutJustification } from "../model/effects";
+import { challengeToJustification } from "../utils/converters";
 
-export type PFPayoutJustificationLookupParams = ByPotId & {};
-
-export const challengeToJustification = (challenge: Challenge) => {
-  try {
-    const data = JSON.parse(challenge.reason) as Record<string, unknown>;
-
-    return "PayoutJustification" in data && typeof data.PayoutJustification === "string"
-      ? data.PayoutJustification
-      : null;
-  } catch {
-    return null;
-  }
+export type PFPayoutJustificationParams = ByPotId & {
+  onPublishSuccess?: () => void;
+  onPublishError?: (message: string) => void;
 };
 
-export const usePFPayoutJustification = ({ potId }: PFPayoutJustificationLookupParams) => {
+export const usePFPayoutJustification = ({
+  potId,
+  onPublishSuccess,
+  onPublishError,
+}: PFPayoutJustificationParams) => {
   const viewer = useWalletUserSession();
   const viewerPower = usePotAuthorization({ potId, accountId: viewer.accountId });
   const votingRound = useVotingRoundResults({ potId });
 
-  const { isLoading: isPayoutChallengeListLoading, data: potPayoutChallengeList } =
-    potContractHooks.usePayoutChallenges({ potId });
+  const {
+    isLoading: isPayoutChallengeListLoading,
+    data: potPayoutChallengeList,
+    mutate: refetchPayoutChallenges,
+  } = potContractHooks.usePayoutChallenges({ potId });
 
   const currentJustification = useMemo(
     () => potPayoutChallengeList?.map(challengeToJustification).find(isNonNullish),
@@ -45,9 +44,25 @@ export const usePFPayoutJustification = ({ potId }: PFPayoutJustificationLookupP
         potId,
         data: votingRound.data,
         challengerAccountId: viewer.accountId,
-      });
+      })
+        .then(() => {
+          onPublishSuccess?.();
+          refetchPayoutChallenges();
+        })
+        .catch((error) => {
+          console.error(error);
+          onPublishError?.(error.message);
+        });
     }
-  }, [potId, viewer.accountId, viewer.isSignedIn, votingRound.data]);
+  }, [
+    onPublishError,
+    onPublishSuccess,
+    potId,
+    refetchPayoutChallenges,
+    viewer.accountId,
+    viewer.isSignedIn,
+    votingRound.data,
+  ]);
 
   return !viewer.isSignedIn || (!votingRound.isLoading && votingRound.data === undefined)
     ? {

src/features/proportional-funding/utils/converters.ts

@@ -0,0 +1,13 @@
+import type { Challenge } from "@/common/contracts/core/pot";
+
+export const challengeToJustification = (challenge: Challenge) => {
+  try {
+    const data = JSON.parse(challenge.reason) as Record<string, unknown>;
+
+    return "PayoutJustification" in data && typeof data.PayoutJustification === "string"
+      ? data.PayoutJustification
+      : null;
+  } catch {
+    return null;
+  }
+};

src/layout/pot/components/layout.tsx

@@ -91,7 +91,14 @@ export const PotLayout: React.FC<PotLayoutProps> = ({ children }) => {
         </>
       )}
 
-      <div className="flex flex-col gap-4 pb-4">
+      <PotLayoutHero
+        onApplyClick={openApplicationModal}
+        onChallengePayoutsClick={openChallengeModal}
+        onFundMatchingPoolClick={openMatchingPoolContributionModal}
+        {...{ potId }}
+      />
+
+      <div className="mt-4 flex flex-col gap-4">
         {activeTab?.tag !== PotLayoutTabTag.Payouts && (
           <PFPayoutJustificationPublicationAction
             href={`${rootPathnames.pot}/${potId}/payouts`}
@@ -102,13 +109,6 @@ export const PotLayout: React.FC<PotLayoutProps> = ({ children }) => {
         <DonationSybilWarning classNames={{ root: "w-full mb-4 md:mb-8" }} {...{ potId }} />
       </div>
 
-      <PotLayoutHero
-        onApplyClick={openApplicationModal}
-        onChallengePayoutsClick={openChallengeModal}
-        onFundMatchingPoolClick={openMatchingPoolContributionModal}
-        {...{ potId }}
-      />
-
       <div className="mb-6 flex w-full flex-row flex-wrap gap-2 md:mb-12">
         <div
           className={cn(