perf: Optimizing Loading time for Injected Wallets

[HarisSQA]

Description

This PR is about reducing the amout of time for the setupWalletSelector when all wallets are included in the modules array.

Went for many small commits only to clarify why and where the changes were necessary.

• Changed the default timeout from 200ms to 100ms for waitFor helper function.
• Check for isSignedIn() on Sender and Finer Wallet only if the wallet is installed this speeds up the loading time up to 300ms when wallet is not installed.
• Fixed bug in the isInstalled function for Nightly and xDefi
• Used waitFor helper function for the isInstalled function for Narwallets (by default this function used to wait up to 2s when wallet was not installed).
• Removed waitFor from places where it was not needed.
• Changed the timeout in detectEthereumProvider in Neth Account to 100ms.
• Moved the check for if mobile before checking for isInstalled in injected wallets since we return null for these wallets in mobile devices anyway so we don't have to wait and check for isInstalled function.

Demo

To see the difference disable all wallet extensions and try to load these two examples:

Live Demo including these changes https://kujtimprenkusqa.github.io/wallet-selector/
Live Demo of current change in main branch: https://near.github.io/wallet-selector/

Conclusion

(On Desktop) These changes when all wallets are included in the modules array speed up the setupWalletSelector up to 90%.
(On Mobile) There's no delay/waiting anymore.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

Type of change.

• FIX - a PR of this type patches a bug.
• FEATURE - a PR of this type introduces a new feature.
• BUILD - a PR of this type introduces build changes.
• CI - a PR of this type introduces CI changes.
• DOCS - a PR of this type introduces DOCS improvement.
• STYLE - a PR of this type introduces style changes.
• REFACTOR - a PR of this type introduces refactoring.
• PERFORMANCE - a PR of this type introduces performance changes.
• TEST - a PR of this type adds more tests.
• CHORE - a PR introduces other changes than the specified above.

[AZbang]

@HarisSQA @kujtimprenkuSQA
In general, I also noticed that Wallet-selector has long time for initializing when loading the web page.
And this happens even if the desired wallet was already chosen in the previous session.

I suggest if the user already has a selected wallet - only it is initialized, and the rest are initialized in the background. This should accelerate the load until the application has API selected wallet in the last session

[kujtimprenkuSQA]

@HarisSQA @kujtimprenkuSQA In general, I also noticed that Wallet-selector has long time for initializing when loading the web page. And this happens even if the desired wallet was already chosen in the previous session.

I suggest if the user already has a selected wallet - only it is initialized, and the rest are initialized in the background. This should accelerate the load until the application has API selected wallet in the last session

Thank you for your feedback, the loading time in Desktop is heavily impacted by the extensions some of the injected (extension) wallets take some time to be added on the window object, and when we check too soon for window.walletname the isInstalled() method would sometimes return false.

At least the idea of this PR is to improve the loading time in general and also on mobile devices for example for injected (extension) wallets we don't need to wait and check if these wallets are installed because by default they will never be available there.

[AZbang]

@kujtimprenkuSQA But why we need wait until all wallets are injected, if this can be done during a direct call to a specific wallet?

const selector = await setupWalletSelector([ ... ]) // very fast!
// And then we wait if necessary
await selector.wallet("sender")