Fix: Only allow a transaction item to be clicked when it is a successful transaction

[rumzledz]

Description

We will now only allow transactions to be clicked if they are Successful and if their transaction hash has been processed.

Testing

1. Bring up the Action Form
2. Set the Action type to Transfer funds
3. Transfer 0.01 CREDS
4. As soon as the Pending button comes up, click it
5. The UserHub should come up and and you should automatically land on the Transactions tab
6. Click your Transaction while it's in a Pending state
7. Verify that you are not able to
8. Verify that the click is successful only when the Transaction exits the Pending state

Resolves #2738

[mmioana]

Hey @rumzledz nice fix for this one! 🎉

I tested using meta-mask and can confirm the pending transaction is not clickable in the user hub transaction's list

Screen.Recording.2024-08-14.at.09.20.42.mov

However I did notice the not found action is shown for a split second after clicking the succeeded transaction. Is there anything we can do about it?

[rumzledz]

However I did notice the not found action is shown for a split second after clicking the succeeded transaction. Is there anything we can do about it?

Aw man 😕 All right I'll see what I can do thanks for spotting this! 👌

[rumzledz]

@mmioana can you please try this again when you get the chance? Thank you 😄

EDIT: I know how to replicate this now, I'll put it back in draft! @mmioana

[Nortsova]

Hey @rumzledz , it works great! Thanks for this fix and for the 'not found' fix as well!

[Nortsova]

Nice fix, but in terms of the single responsibility principle, wouldn’t it be better to move this check to where it’s used and just pass the prop as isClickable={status === TransactionStatus.Succeeded}?

[rumzledz]

Hey @Nortsova thanks for reviewing! I actually have multiple versions of this. I had a version where I wanted to move it outside but it doesn't make sense to just move this single boolean outside, you'd have to deal with the entire lot because why stop at status === TransactionStatus.Succeeded ? 😂

const canLinkToAction =
  isClickable &&
  values.group?.key &&
  !GROUP_KEYS_WHICH_CANNOT_LINK.includes(
    values.group.key as TRANSACTION_METHODS,
  )

I also have another version where this component is stripped down to the point that it only has a few hooks. Would have to move around stuff outside the component etc. etc. If we really wanted to do proper SRP, you'd also have to group up every logical piece of responsibility in the component like the Header, the bit that handles the accordion-like behaviour etc. because simply moving the boolean isn't gonna cut it. It could easily turn into a rabbithole 🐰 and I've been trying my best not to overdo it in my PRs lately 😂 Maybe someday we are free enough to audit our components and see which ones to refactor 👌

[rdig]

All good. I can confirm I can click a successful action, yet cannot cannot click a link to an action if the transaction is in a pending or failed state

Nicely done!

[bassgeta]

Nice work 👌 Connected with metamask and tried to click it, nothing happens, as intended 😎