App Universal Link#

Create a deep link for your DApp from mobile browser to the OKX app Discover section#

For users to seamlessly interact with your DApp within the Discover on OKX app, it is essential to create a deep link. 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 OKX discover app. This link, when utilized, will seamlessly direct users to your DApp, enhancing the overall user experience within the OKX ecosystem.