Best Practices
Connect Wallet#
The following best practice outlines recommendations for the user interface to create a uniform user experience across dApps in the ecosystem.
Before being able to interact with a wallet through Beacon, the user first needs to perform an action to trigger the wallet connection.
Button Content#
Within the default Beacon configuration where multiple wallets are supported, the connection button should be labeled "Connect Wallet".
In some communities the term "sync" has been established and can also be used, but "Connect Wallet" should be preferred.
- Button is clearly visible e.g. distinct border, background color or drop shadow
- Button is labeled with "Connect Wallet"
Button States And Actions#
The following two states should be supported: "unconnected" and "connected"
Unconnected#
Button label has the wording "Connect Wallet" (or "sync").
Connected#
- The button has a connection indicator e.g. a green dot
- The button label is the shortened Tezos address of the connected account e.g. tz1Mj...UAdtT
- A click on the button prompts a dropdown:
- Disconnect Wallet (or "unsync", if "sync" is used instead of "Connect Wallet") - Disconnects the wallet from the dApp, resetting the button state and prompting a new Beacon Connection request when the user clicks again
- Open Blockexplorer - Opens a link to the address on a blockexplorer in a new tab
Button Placement#
The button should be placed that the connection state and the connected address always remains visible.
A recommended position would be on the top right in the header of the application.