How LikeCoin brings her mobile UX to the next level

In LikeCoin foundation, when we design https://like.co, one core principle is security comes first.

Users are identified by their Ethereum wallet address, and all sensitive actions should be authenticated by user private signing the payload. We achieve this by using web3.js interface.

Things worked quite smoothly on desktop, like all other DApps, we guide new users to install Metamask.

seems to be a very poor UX.

We ended up sending the user back to desktop instead.

However, as our marketing campaign launched, we came to the shocking realisation that world indeed runs on mobile now, and more than 40% of our users are on mobile browsers. Blocking them with a popup doesn’t seem to be a good idea.

Trust Wallet + Deep link to the rescue

Using the dynamic deep link feature provided by Trust Wallet, we are now able to refine the UX to a much more friendly one, now it is:

1. Detect mobile user, pops up Trust Wallet installation dialog
2. User click on the deep link button in the dialog. Trust Wallet will be triggered and open the page automatically if installed; if not:
3. User will be redirected to Google Play/iTunes to install Trust Wallet. After installation and setup wallet steps are complete, user are automatically redirected to the page where they came in from, in the Trust Wallet DApp browser.

Actual Implementation

The implementation is surprisingly simple, since Trust Wallet is using Branch.io for deep-linking, there are multiple ways to create deep link. More details can be found at Trust Wallet article.

Here I will focus on how like.co generate dynamic deeplink on-the-fly, without calling any Branch.io api.

export const TRUST_URL = 'https://links.trustwalletapp.com/a/key_live_lfvIpVeI9TFWxPCqwU8rZnogFqhnzs4D?&event=openURL&url=';const currentURI = window.location.href;const deepLink = `${TRUST_URL}${encodeURIComponent(currentURI)}`;

The above code formats a long URL. In fact given any branch dynamic link domain, we can format any payload required by appending suitable query string. Here we put in two payloads event=openURL and url=${window.location.href}defined in Trust Wallet source code here.

For more customised behaviour, you can also define more options like fallback URL on different platforms. Read Branch.io’s documentation for more examples.

Thanks Trust Wallet team for the great work.

Further Reading:
https://trustwallet.medium.com/mobile-dapps-with-deep-linking-and-trust-wallet-6a4712b9b9a4
https://docs.branch.io/pages/links/integrate/

#trust wallet deeplink #trust wallet browser #dapp trust wallet #deeplink not supported metamask