Fix: Enable the Advanced Payment form's staking submission logic

[rumzledz]

Description

I found some time to refactor the ActionSidebarContent. I took out expenditure staking-specific logic and handled it in their respective forms instead.

I create a new hook called useShowCreateStakedExpenditureModal which encapsulates logic for showing/hiding the expenditure modal. Basically, we're meant to show this modal for the following actions if the decision method is set to DecisionMethod.Staking:

export const actionsWithStakingDecisionMethod = [
  Action.PaymentBuilder,
  Action.StagedPayment,
  Action.SplitPayment,
];

For future reference, you can control the Action Form's primary button type and onClick props via the useActionFormBaseHook hook i.e.

useActionFormBaseHook({
  ...otherOptions,
  primaryButton: { <<-- This one! 😄 
    type: shouldShowStakedExpenditureModal ? 'button' : 'submit',
    onClick: showStakedExpenditureModal,
  },
});

Testing

1. Bring up the Advanced Payment form
2. Set the decision method to Staking
3. Fill in all other required fields
4. Submit the form
5. Verify that the Staking Expenditure Modal shows up

Resolves #3628

[rumzledz]

However, upon rendering, the modal flashes an error for a brief moment I'm honestly fine with this as it is, as we can always come back and polish this later down the line

No you're right @rdig , that's really "yuck" 😂 I've pushed a fix to make it behave as intended -- pre-mounted so the logic/calculations are done already by the time the modal's isOpen is set to true.

Pushed! 🚀