Elastos Documentation
Search…
A nice "Connect wallet" flow
Even without talking about the connectivity SDK, many Web3 dApps - including popular ones - still struggle to provide the perfect "connect wallet" experience for their DeFi projects.
You will sometimes see "connect with Metamask" when you are in a mobile wallet built-in browser (which doesn't make sense, and actually means "use the injected provider"). Or "Wallet connect", when you are in a built-in browser as well (which also doesn't make sense, as built-in browsers use injected web3 providers, they don't need wallet connect).
To try to help you as a dApp developer, here is a suggested pseudo-algorithm to let your app decide what should be shown when.
Use case 1: Optional DID, mandatory crypto address
If your dApp needs users to provide a EVM address (ethereum compatible) and a DID, but it can live without a provided DID:
1
if (mobile) {
2
if (window.ethereum) {
3
// you are in a mobile wallet
4
if (window.elastos) {
5
// The mobile wallet has DID / elastos capabilities (Essentials)
6
// -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands
7
}
8
else {
9
// The mobile wallet has no elastos capability (token pocket, trust wallet, MM mobile)
10
// -> show "You cannot use DIDs" (because mobile wallets usually intercept the wallet connect requests and keep them for themselves)
11
// -> show "Connect" (this will use the injected window.ethereum for ethereum transactions)
12
}
13
}
14
else {
15
// You are in a standard mobile browser like chrome or safari mobile
16
// -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands
17
// -> show "Wallet connect" -> any mobile wallet can be used. But this will bind the eth address only, not the DID
18
}
19
}
20
else {
21
// Desktop
22
if (window.ethereum) {
23
// MM plugin is installed
24
// -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands
25
// -> show "Connect" (this will use the injected window.ethereum for ethereum transactions)
26
}
27
else {
28
// no crypto plugin
29
// -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands
30
// -> show "Wallet connect" -> any mobile wallet can be used. But this will bind the eth address only, not the DID
31
}
32
}
Copied!
Use case 2: crypto address only, no connectivity SDK
For your reference as well as for comparison of the 2 use cases, even if this is not part of the connectivity SDK, here is the flow f your dApp needs users to provide only an EVM address (Ethereum compatible):
1
if (mobile) {
2
if (window.ethereum) {
3
// you are in a mobile wallet
4
// -> show "Direct connect" (this will use the injected window.ethereum for ethereum transactions)
5
}
6
else {
7
// You are in a standard mobile browser like chrome or safari mobile
8
// -> show "Wallet connect" -> any mobile wallet can be used.
9
}
10
}
11
else {
12
// Desktop
13
if (window.ethereum) {
14
// MM plugin is installed
15
// -> show "Direct connect" (this will use the injected window.ethereum for ethereum transactions)
16
// -> show "Wallet connect" -> any mobile wallet can be used.
17
}
18
else {
19
// No crypto plugin on the desktop browser
20
// -> show "Wallet connect" -> any mobile wallet can be used.
21
}
22
}
Copied!
Don't forget to use the right web3 instance after connection
Here is a code that shows how to avoid common developers mistakes, who are used to use "window.ethereum" and are sometimes confused when web3 provider instances coming from other locations are involved:
1
let web3;
2
​
3
connectPopup() {
4
doConnectionProcess();
5
if (connectedThroughInjectedWeb3)
6
web3 = window.ethereum;
7
else {
8
// Case 1: if using the connectivity SDK
9
web3 = connectivity.getActiveConnector().getWeb3Provider();
10
// Case 2: if using wallet connect directly
11
web3 = [Your wallet connect provider];
12
}
13
}
14
​
15
// Example of further call to the web3 instance
16
getBalance() {
17
web3.getBalance(); // DO
18
window.ethereum.getBalance() // DON'T
19
}
Copied!
Wallet connect connectivity issues
When adding a "connect with wallet connect" button in your dApp, it's advised to always kill the current wallet connect session first, to force a new connection. This is particularly useful in case the remote wallet app and the dApp get disconnected or desynchronised somehow.
By killing the session, this gives a "fresh start" to the wallet connect connectivity.
Last modified 1mo ago