Description
Background
At Dynamic, we have partnered with StarkWare to build a bridge component as seen on https://starkgate.starknet.io/. We aim to create a smooth login experience for end users. We use get-starknet-core
to connect users' starknet wallet, whether it's Braavos or ArgentX.
Problem
There are two scenarios that could have improved UX, and they both begin at a state where the user has already connected a starknet wallet:
- The user explicitly locks their wallet while it is connected to a dapp and the dapp is open in a browser tab
- The user locks their wallet while the dapp is not open (either via a browser restart, or by closing the dapp window and explicitly locking their wallet)
Additionally, when dealing with wallets in a locked state, we want to avoid uninitiated wallet popups – meaning, there should not be any wallet popups without the user explicitly clicking on a connect button.
The starknet window object (accessed via get-starknet-core
) has a lot of useful properties and methods like isConnected
and isPreauthorized
, however these cannot be used for accurately detecting wallet locked state while avoiding popups. The main reason for this is that isConnected
is always false until enable
is called. However, when enable
is called, it will prompt the user to unlock the wallet if it's locked, so we have a chicken-and-egg problem.
Proposed solution
There are two parts, each addressing the problems above, respectively:
- Emit an
accountsChanged
event withundefined
account address when the wallet is locked - Add a flag to
enable
that states the dapp doesn't want to show a popup/UI in case the wallet is locked and/or not preauthorized
Alternate solution
- Emit a
disconnect
event when the wallet is locked - Expose an
isLocked
(orisUnlocked
, whichever is preferred) value that represents the current locked status of the wallet, whether or notenable
has been called.
Disconnect event
When the user explicitly locks their wallet, the wallet should emit a disconnect
event that can be handled via the on
method, similar to accountsChanged
and networkChanged
. This will solve the first UX scenario because in our disconnect
event handler, we can disconnect the wallet from our app state.
isLocked
There should be a boolean value isLocked accessible via get-starknet-core
similar to isConnected
that is:
true
when the wallet is lockedfalse
when the wallet is locked
Additionally, this boolean should have a value before calling enable – it should not be necessary to call enable for this property to have the correct value. This will solve the second UX scenario because our SDK can read this value and determine if it needs to remove the wallet from its connected state. For a reproduction of the UX problem we aim to solve, see: https://codesandbox.io/s/purple-glade-l3llkm?file=/src/App.js. The problem is with the automatic popup – since we have to call enable
first to check if isConnected
is true, there is a wallet connection popup on page load. If we were able to check isLocked
, then we would know to simply "disconnect" the user (reset their connection state in our app), and then show them the connect button again.