Hirad: adding deep-linking (#12840)

* feat: adding deep-linking

* fix: added android to the condition as well

* fix: removed the redundant re-renders

* fix: improved the code

* fix: fixed the issue of the mt5 for desktop

* fix: changed the inconsistency of the is_mobile

* fix: fixing the sonarCloud issues

* fix: trying the onBlur

* fix: fixing the sonar cloud issue

* fix: changing the onClick component

* fix: fixing the sonar cloud issue

* fix: fixed the type of the window.location

* fix: added comment to get the type fixed

* fix: made the code more consistent

* fix: improved the quality of the code

* fix: improved the quality of the code

* fix: changed the namings

* fix: made is_mobile condition more readable

* fix: fixing the issue of the iOS users

Author: hirad-deriv

packages/cfd/src/Containers/dmt5-trade-modal.tsx

@@ -9,6 +9,7 @@ import {
     getPlatformSettings,
     getUrlBase,
     MT5_ACCOUNT_STATUS,
+    mobileOSDetect,
 } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
@@ -61,6 +62,28 @@ const DMT5TradeModal = observer(
             return undefined;
         };
 
+        const getMobileAppInstallerURL = () => {
+            if (mobileOSDetect() === 'iOS') {
+                return getPlatformMt5DownloadLink('ios');
+            } else if (/huawei/i.test(navigator.userAgent)) {
+                return getPlatformMt5DownloadLink('huawei');
+            }
+            return getPlatformMt5DownloadLink('android');
+        };
+
+        let mobile_url;
+        const mobileURLSet = () => {
+            mobile_url = window.location.replace(deepLink);
+            const timeout = setTimeout(() => {
+                mobile_url = window.location.replace(getMobileAppInstallerURL());
+            }, 3000);
+            if (!/safari/i.test(navigator.userAgent)) {
+                window.onblur = () => {
+                    clearTimeout(timeout);
+                };
+            }
+        };
+
         const getHeadingTitle = () =>
             getCFDAccountDisplay({
                 market_type: mt5_trade_account.market_type,
@@ -93,6 +116,10 @@ const DMT5TradeModal = observer(
             MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION,
         ].includes(mt5_trade_account?.status);
 
+        const deepLink = `metatrader5://account?login=${
+            (mt5_trade_account as TTradingPlatformAccounts)?.display_login
+        }&server=${(mt5_trade_account as DetailsOfEachMT5Loginid)?.server_info?.environment}`;
+
         return (
             <div className='cfd-trade-modal-container'>
                 <div className='cfd-trade-modal'>
@@ -193,9 +220,10 @@ const DMT5TradeModal = observer(
                         <a
                             className='dc-btn cfd-trade-modal__download-center-app--option-link'
                             type='button'
-                            href={mt5_trade_account.webtrader_url}
-                            target='_blank'
-                            rel='noopener noreferrer'
+                            onClick={is_mobile ? mobileURLSet : undefined}
+                            href={is_mobile ? mobile_url : mt5_trade_account.webtrader_url}
+                            target={is_mobile ? '' : '_blank'}
+                            rel={is_mobile ? '' : 'noopener noreferrer'}
                         >
                             <Text size='xxs' weight='bold' color='prominent'>
                                 {localize('Open')}