App Universal Link#

To enable users to easily interact with your DApp within a mobile app, you need to create a deep link in the mobile browser that directs them to the Discover page in the OKX App, where your DApp will be opened.

This tutorial will guide you through the process using JavaScript.

Step 1: Define the deep link parameters#

Open your JavaScript file or script, and define the URL you want to pass as a parameter in your deep link:

const dappUrl = "https://app.uniswap.org/";

Replace https://app.uniswap.org/ with the actual URL of your DApp.

Step 2: Encode the deep link parameters#

Use encodeURIComponent to encode the dappUrl:

const encodedDappUrl = encodeURIComponent(dappUrl);

This ensures that special characters in the URL are properly handled for inclusion in a web link.

Step 3: Construct the deep link#

Combine the encoded parameters to form the deep link:

const deepLink = "okx://wallet/dapp/url?dappUrl=" + encodedDappUrl;

This creates a deep link specific to your DApp on the OKX platform.

Step 4: Encode entire URL#

Encode the entire URL, including the deep link, to ensure proper formatting for web applications:

const encodedUrl = "https://www.okx.com/download?deeplink=" + encodeURIComponent(deepLink);

This results in the final encoded URL that users will interact with.

Step 5: Output or use#

You can print the encodedUrl to the console or use it as needed in your application:

console.log(encodedUrl);

This line is for demonstration purposes; in your actual application, you would use the encodedUrl as required.

Testing:#

This JavaScript code is a client-side script that checks the user's device and environment to determine whether the user is accessing a web page from a mobile device, specifically an iOS or Android device, or whether they are using the OKX app.

const ua = navigator.userAgent;
const isIOS = /iphone|ipad|ipod|ios/i.test(ua);
const isAndroid = /android|XiaoMi|MiuiBrowser/i.test(ua);
const isMobile = isIOS || isAndroid;
const isOKApp = /OKApp/i.test(ua);

if (isMobile && !isOKApp){
  const encodedUrl = "https://www.okx.com/download?deeplink=" + encodeURIComponent("okx://wallet/dapp/url?dappUrl=" + encodeURIComponent(location.href));
  window.location.href = encodedUrl;
} else if (window.okxwallet) {
  const accounts = await window.okxwallet.request({
        method: "eth_requestAccounts",
    }); 
}

Summary#

By following these steps, you have successfully created a deep link for your DApp within the Discover page of the OKX app. This link, when used, will seamlessly guide users to your DApp, opening up OKX Web3's millions of traffic to your DApp.