Fix: memoize finalize step transform to avoid pending button getting stuck

Author: jakubcolony

src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx

@@ -101,19 +101,6 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
     }
   }, [isMotionAgreement, isMotionFinalized, actionData, refetchColony]);
 
-  let action = {
-    actionType: ActionTypes.MOTION_FINALIZE,
-    transform: finalizePayload,
-    onSuccess: handleSuccess,
-  };
-  if (isMotionClaimable) {
-    action = {
-      actionType: ActionTypes.MOTION_CLAIM,
-      transform: claimPayload,
-      onSuccess: handleClaimSuccess,
-    };
-  }
-
   /*
    * @NOTE This is just needed until we properly save motion data in the db
    * For now, we just fetch it live from chain, so when we uninstall the extension
@@ -168,7 +155,15 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
         {
           key: FinalizeStepSections.Finalize,
           content: (
-            <ActionForm {...action} onSuccess={handleSuccess}>
+            <ActionForm
+              actionType={
+                isMotionClaimable
+                  ? ActionTypes.MOTION_CLAIM
+                  : ActionTypes.MOTION_FINALIZE
+              }
+              transform={isMotionClaimable ? claimPayload : finalizePayload}
+              onSuccess={isMotionClaimable ? handleClaimSuccess : handleSuccess}
+            >
               {({ formState: { isSubmitting } }) => (
                 <>
                   {items.length > 0 && (

src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/hooks.tsx

@@ -12,7 +12,6 @@ import useExtensionData from '~hooks/useExtensionData.ts';
 import { type ClaimMotionRewardsPayload } from '~redux/sagas/motions/claimMotionRewards.ts';
 import { type MotionFinalizePayload } from '~redux/types/actions/motion.ts';
 import Numeral from '~shared/Numeral/index.ts';
-import { type InstalledExtensionData } from '~types/extensions.ts';
 import { type MotionAction } from '~types/motions.ts';
 import { mapPayload } from '~utils/actions.ts';
 import { getIsMotionOlderThanAWeek } from '~utils/dates.ts';
@@ -66,13 +65,17 @@ export const useFinalizeStep = (actionData: MotionAction) => {
   const isFinalizable =
     hasEnoughFundsToFinalize && !motionStateHistory.hasFailedNotFinalizable;
 
-  const transform = mapPayload(
-    (): MotionFinalizePayload => ({
-      colonyAddress,
-      userAddress: user?.walletAddress || '',
-      motionId,
-      canMotionFail: isMotionOlderThanWeek,
-    }),
+  const transform = useMemo(
+    () =>
+      mapPayload(
+        (): MotionFinalizePayload => ({
+          colonyAddress,
+          userAddress: user?.walletAddress || '',
+          motionId,
+          canMotionFail: isMotionOlderThanWeek,
+        }),
+      ),
+    [colonyAddress, isMotionOlderThanWeek, motionId, user?.walletAddress],
   );
 
   return {
@@ -102,13 +105,11 @@ export const useClaimConfig = (
   const {
     colony: { colonyAddress, nativeToken, motionsWithUnclaimedStakes },
   } = useColonyContext();
-  const extension = useExtensionData(Extension.VotingReputation);
+  const { extensionData } = useExtensionData(Extension.VotingReputation);
   const { pollLockedTokenBalance } = useUserTokenBalanceContext();
 
   const [isClaimed, setIsClaimed] = useState(false);
 
-  const extensionData = extension?.extensionData as InstalledExtensionData;
-
   const userAddress = user?.walletAddress;
   const nativeTokenDecimals = nativeToken.decimals;
   const nativeTokenSymbol = ` ${nativeToken.symbol}`;
@@ -202,15 +203,20 @@ export const useClaimConfig = (
     pollLockedTokenBalance();
   };
 
-  const claimPayload = mapPayload(
-    (): ClaimMotionRewardsPayload => ({
-      userAddress: userAddress || '',
-      colonyAddress: colonyAddress || '',
-      transactionHash: transactionHash || '',
-      extensionAddress: isInstalledExtensionData(extensionData)
-        ? extensionData.address
-        : ADDRESS_ZERO,
-    }),
+  const claimPayload = useMemo(
+    () =>
+      mapPayload(
+        (): ClaimMotionRewardsPayload => ({
+          userAddress: userAddress || '',
+          colonyAddress: colonyAddress || '',
+          transactionHash: transactionHash || '',
+          extensionAddress:
+            extensionData && isInstalledExtensionData(extensionData)
+              ? extensionData.address
+              : ADDRESS_ZERO,
+        }),
+      ),
+    [userAddress, colonyAddress, transactionHash, extensionData],
   );
 
   const getDescriptionItems = (): DescriptionListItem[] => {