Injected wallet discovery

[fracek]

Background

This is a continuation of the discussion started on the new wallet snip.

/cc @avimak @janek26

Problem

At the moment, the only way to check what browser wallet are available is by checking for starknet_* objects in the window context. This creates an issue when the wallet is slow in injecting itself in the page because it may be unavailable when the user checks for it. The most common bug caused by this is that the wallet won't autoconnect on page load.

Proposed solution

The solution is to have an event mechanism for listening to wallets being injected into the window. There are two APIs that we can leverage:

• MutationObserver: all browsers implement script injection by adding a script element to the dom, so we can use this API to listen for that.
• window.dispatchEvent/window.addEventListener (EventTarget): we define a new event type for wallet being registered (similar to EIP 6963).

I prefer the second option because it's more explicit.

MutationObserver

This solution requires the least amount of work. If we decide to go down this route, I propose wallets use their wallet id (starknet_*) as the id of the injected script so that it's easy to detect them.

What makes me uncomfortable is that it requires a callback invoked for all mutations to the DOM.

EventTarget

The idea is that when the wallet is injected, it emits an event to signal that to the dapp.

interface AnnounceWalletEvent extends Event {
  type: "starknet:announceWallet"
  detail: Wallet // from get-starknet
}

// on the wallet side
window.dispatchEvent(new CustomEvent("starknet:announceWallet", { detail: this }))


// on the dapp side
window.addEventListener("starknet:announceWallet", loadWallets)
loadWallets() // load already injected wallets

[tabaktoni]

Like the EventTarget approach, it seems a cleaner solution.
I think get-starknet UI should implement a listener and update UI when the event arrives.

[avimak]

@naorye2 did you start working on it?