bug: Debug tabs behavior

[rin-st]

Is there an existing issue for this?

• I have looked through the existing issues

Which method was used to setup Scaffold-ETH 2 ?

git clone

Current Behavior

While working on #933 I found very strange behavior: whenever I click on tab with contract, it always change to YourContract tab.

Screen.Recording.2024-09-16.at.12.13.11.mov

It's not because of its index or alphabetical order, it's always YourContract (if you have that tab, of course). Clearing localstorage doesn't help

Expected Behavior

Clicked contract tab should be chosen

Steps To Reproduce

I debugged it and understood that it was because of my other browser tab, which had only YourContract.
So, steps:

• run default se-2 (with one contract - YourContract)
• stop your frontend app (but don't close browser tab [tab 1] )
• add another contract and deployment file for it
• yarn deploy --reset your contracts (or just yarn deploy if you re-run yarn chain)
• open new browser tab [tab 2]
• yarn start your app
• open it on new browser tab [tab 2]

Anything else?

Not sure if we need to fix it for now since it's relatively rare case and not so easy to fix. But at least we know what causes this

[rin-st]

The bug is not related to the mentioned PR, it also works on main

[technophile-04]

Thanks @rin-st!! So the summary is that if this problem occurs people need to make sure they close all other browser TABs with http://localhost:3000 and then refresh the latest one and it should start working. Just tried this and works nicely.

Umm I think instead of relying on usehooks-ts useLocalStorage logic maybe we should write a our custom simple logic for DebugContracts.

The reason I feel usehooks useLocalstorage have this problem is because they are listening to localstroage for all tabs and keeping them in sync :

But since the outdated tab doesn't have the new contract name, it updates the contractName to contractName[0] in outdated tab and latest tab listen to those changes and also updates it.