Added to aliasSettings

Good point, made two key changes regarding this.

1. Updated this block to set the interval id returned from the setInterval call into localForage , so that the next time useEffect() runs, it checks this interval id in localForage and skips the interval creation block if the interval ID already exists, so there will only ever be one interval task running at any time.

2. The change in 1. created an issue whereby the interval Id will still exist when reopening the browser thus not starting the interval task, hence the loadCashtabSettings function in useWallet will reset it upon the initial loading of the app.

Internal state variables were not used to track this intervalId as this ID must not be reset upon reloading/navigating back to the Alias page.

I thought about moving the whole interval block into useWallet which runs upon app startup, but useWallet does not have access to Alias.js' functions (pendingAliasCheck) and state variables to update the pending dropdown list.

initialize it is as false and then, instead of setting it to true, every time you trigger it, set it to !pendingAliasRefreshTrigger

Updated

don't want to trigger a state change 10 times

That was the reason I used a dedicated refresh trigger to avoid unintended state refreshes.

this was duplicated as there was already a passLoadingStatus(false); at the bottom of this function. This call removes the grey layer that locks the screen whilst the logic is executed. Since there's a pending alias check below it makes sense for it to be lifted once the pending check is completed.

Added comments above function

the validated part refers to the fact the pending alias has been validated as still pending. I've updated the comment above the array declaration to be clearer.

No this is unintentional, have removed this redundant call.

yea this is shimmed in here to trigger on app startup. I originally had it in useWallet's useEffect block but at that point in the lifecycle localForage has not been initialized yet hence won't be able to reset this interval id.

Updated function name and references in useWallet.js and Alias.js

Updated function name and references in useWallet.js and Alias.js

Updated function name and references in useWallet.js and Alias.js

don't see clearInterval called anywhere

clearInterval isn't called because the interval task is meant to be permanently running every 30 seconds whilst cashtab is open. Clearing it stops the periodic checks.

why are we saving this intervalId?

Yea the ID itself is not relevant but I needed a way to check if there is already an interval running to avoid creating duplicated intervals each time you navigate away and back to the Alias.js page

on app startup -- if there are pending aliases, create an intervalId to watch them

on app startup, even if there are no pending aliases we still want to create the interval so it can keep polling for changes to the pending aliases every 30 seconds.

should also be calling clearInterval on the intervalId after the lifecycle is complete

As above, when the component lifecycle is complete we still want the interval to keep ticking along every 30 seconds

The interval id should be stored in state in Alias.js, not in local storage.

The issue with storing it in state in Alias.js is that it gets reset every time you re-render the Alias page.

Or keep it simple and just do it unconditionally.

yea that's the current approach. On app startup it clears the intervalid so that it will create it unconditionally, unless the pending list is empty in which case it returns immediately. Otherwise it ticks along in the background.