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.
Network & Firewall Configuration
If you're deploying your dApp in a corporate environment or experiencing connection issues, you may need to configure your firewall settings. We maintain a detailed Firewall Configuration Guide that covers:
- Required domains and ports
- Firewall setup steps
- Common issues and solutions
- Enterprise deployment options