Skip to content

Commit

Permalink
Fix: memoize finalize step transform to avoid pending button getting …
Browse files Browse the repository at this point in the history
…stuck
  • Loading branch information
jakubcolony committed Oct 14, 2024
1 parent 24c780c commit c60c833
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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}`;
Expand Down Expand Up @@ -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[] => {
Expand Down

0 comments on commit c60c833

Please sign in to comment.