feat: add edit to payment builder action

[CzarekDryl]

Description

This PR adds the ability to edit actions after the locked state during the Funding, Release steps. Editing in Payment step is not possible for now.

• Edit Mode:

  • Displays yellow border and Edit Pill.
  • Disables stepper buttons and hides Kebab menu.
  • Makes Recipients, Amounts, and Claim Delays editable.
  • Change payment button opens modal, disabled until changes are made.

• Change Payment Modal:

  • Dropdown for execution options (Reputation and Permissions).

• Changes Step in Stepper:

  • Changes pill appears after edits in Funding, Release step.
  • Shows details on edits, permissions, and a change counter.

• If there is funding needed after editing, new pill should show after changes one

Testing

• Install Lazy Consensus extension to test funding with motion
• Create advanced payment action and lock it
• Play around with funding and editing

Design

Resolves #2238

[arrenv]

@CzarekDryl Nice one, a lot of work here, thank you for tackling it. I spent some time testing and came across a few things:

1. Change payment modal is showing two rows of buttons as well as a red button. There should only be the Confirm changes button and it should not be red.
   

2. Clicking on the "Confirm changes" button did not do anything other than close the modal.

3. Making a change in the Review stage showed the changes step after it, which I was not able to click on. While in the Review stage, the changes pill should appear before review and be clickable so that you can see who made changes, when and how (i.e. as the Payment creator), and be able to handle multiple.
   

4. There are some formatting issues with the edit mode, the recipients change to being unverified and the inputs change width, also, is there anyway to make the yellow border coming in not impact the content width?

   Read only

   

   Edit mode

   

5. Confirm details button should be disabled while in edit mode, and while the edit transaction is happening in order to prevent a clash.
   

6. It seems the changes count and change history is not working fully it seems to only count the amount changes, in the following screenshot I had edited the following, a total of 5 changes but it only shows 2 changes, changes included:

   • 1st Row: Amount was changed from 2 to 1, claim delay was changed from 1 to 0.
   • 2nd Row: Recipient was changed from amy to leela, amount was changed from 3 to 1, claim delay was changed from 2 to 0.

   

7. Trying to fund the payment crashed the app with the following error and I could not continue testing any further.
   

[CzarekDryl]

@arrenv

1. Fixed
2. Fixed
3. and 5. in this issue I'm taking care of editing after the locked state
4. Which browser are you testing this on? On my end, the gaps aren't that large — it works like when creating actions

6. It's working fine for me

7. Fixed