fix: refetch action data after the motion countdown timer is finished

[rumzledz]

Description

Special shoutouts to @davecreaser for helping me figure out that there was a little bit of delay on Contract side when it comes to the motion state updates 💯

So I ended up changing my solution to using the safe polling timeout as the interval delay for refetching the motion state. And it works like a charm ✨

Testing

Note

There is a bug on master whereby if you don't stake the motion and you just allow the motion countdown timer to finish, then the button gets stuck to Pending. We'll fix this in a separate PR.

1. Install the Reputation extension
2. On the Reputation extension's config page, select "Custom (Advanced)
3. Set the following fields to 0.005 (this will make your life easier)

• Staking Phase Duration
• Voting Phase Duration
• Reveal Phase Duration

4. Enable the Reputation extension
5. Bring up the Advanced Payment form
6. Set the Decision method to Staking
7. Fill in all other required fields
8. Submit the form
9. Wait for the Payment Builder Widget to come up
10. Confirm the details
11. Click Fund
12. [IMPORTANT] On the Funding modal, choose the Reputation decision method:

13. Support the motion and fully stake it
14. Wait for the countdown timer to finish
15. Verify that eventually:

• the motion progresses to the next step
• you can see the Finalize button

Resolves #3729

[mmioana]

Nice work fixing this issue @rumzledz 🙌

Installed the Reputation extension

Created an Advanced Payment using staking

Selected Reputation for the funding step

And the motion state updates without getting stuck 🎉

Screen.Recording.2024-12-16.at.10.21.38.mov

@rumzledz I tried to check what is actually happening in the code after reading your expanded description, and noticed that once the timer finishes actually this effect doesn't get triggered

  /* Ensures motion state is kept in sync with motion data */
  useEffect(() => {
    if (action?.motionData) {
      refetchMotionState();
    }
  }, [action?.motionData, refetchMotionState]);

Maybe it's worth investigating in a future issue why this is happening, but for the time being, your solution is good 🙌

[davecreaser]

Nice investigation @rumzledz! It looks like it's still slightly flaky though, for me it's still getting stuck once in a while. Maybe take a look at what @mmioana suggested before, and if not or if it's still being weird then we can pair up on it if you like. Also if this is only happening to me and it's working every time for others then just ignore me :)

[rumzledz]

Hey @davecreaser what @mmioana has said is practically what I explained on my description 😅 She's basically saying that the useEffect hook isn't running and the reason for that is due to how our queries are not resolving.

The useEffect hook she mentioned:

useEffect(() => {
  if (action?.motionData) {
    refetchMotionState();
  }
}, [action?.motionData, refetchMotionState]);

Runs based on action?.motionData. The issue is that the query in charge of fetching action is not resolving. Here's the part of my description that explains this:

I'll jump on a call with you to see what's going on with your local 👌

[rumzledz]

@davecreaser @mmioana actually on 2nd look at Ioana's comment, the useEffect hook she mentioned is not the actual hook that needs to run in this scenario.

The hook that needs to resolve in this scenario is useGetMotionStateQuery and it's not resolving. It's basically being called after the Motion countdown timer finishes. But after it's called, it's not resolving, and so its onCompleted callback is not running. This callback is supposed to be the one that refetches the action data which would then update the Payment builder widget

[rumzledz]

@mmioana @davecreaser I've updated the code and I'm pretty confident about this one 🙌 (famous last words 😂 ) Can you please check again when you get the chance? obrigado & grazie! 🙏

[mmioana]

Really big thumbs up both to you @rumzledz and @davecreaser for this solution 🙌

Installed the extension

Created an advanced payment using Staking

Selected Reputation as the funding method

And it all works flawlessly ✨

Screen.Recording.2024-12-18.at.21.54.55.mov

Nice job!!!