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.
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.
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.
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.
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.
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.
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",
});
}
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.