Merge pull request #111 from shontzu-deriv/shontzu/TRAH-3015/ui-for-s…

…eamless-MT5-mobile-login-integration

[TRAH] shontzu/TRAH-3015/ui-for-seamless-MT5-mobile-login-integration

src/cfd/constants/constants.tsx

@@ -10,7 +10,10 @@ import MacOSIcon from '@/assets/svgs/ic-macos-logo.svg?react';
 import MT5Icon from '@/assets/svgs/ic-mt5.svg?react';
 import WindowsIcon from '@/assets/svgs/ic-windows-logo.svg?react';
 import { IconComponent } from '@/components';
-import { TJurisdiction, TMarketTypes, TPlatforms } from '@/types';
+import { THooks, TJurisdiction, TMarketTypes, TPlatforms } from '@/types';
+import { mobileOsDetect } from '@/utils';
+
+import { ctrader_links, dxtrade_links, white_label_links } from './urlConfig';
 
 type TAppContent = {
     description: string;
@@ -163,29 +166,29 @@ export const companyNamesAndUrls: TcompanyNamesAndUrls = {
 
 export const LinksMapper: Record<TPlatforms.All, TAppLinks> = {
     ctrader: {
-        android: 'https://play.google.com/store/apps/details?id=com.deriv.ct',
-        ios: 'https://apps.apple.com/us/app/deriv-ctrader/id6466996509',
+        android: ctrader_links.android,
+        ios: ctrader_links.ios,
     },
     dxtrade: {
-        android: 'https://play.google.com/store/apps/details?id=com.deriv.dx',
-        huawei: 'https://appgallery.huawei.com/app/C104633219',
-        ios: 'https://apps.apple.com/us/app/deriv-x/id1563337503',
+        android: dxtrade_links.android,
+        huawei: dxtrade_links.huawei,
+        ios: dxtrade_links.ios,
     },
     mt5: {
-        android: 'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server,Deriv-Server-02',
-        huawei: 'https://appgallery.huawei.com/#/app/C102015329',
-        ios: 'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server,Deriv-Server-02',
+        android: white_label_links.android,
+        huawei: white_label_links.huawei,
+        ios: white_label_links.ios,
     },
 };
 
 export const PlatformUrls: TPlatformUrls = {
     ctrader: {
-        live: 'https://ct.deriv.com',
-        staging: 'https://ct-uat.deriv.com',
+        live: ctrader_links.live,
+        staging: ctrader_links.staging,
     },
     dxtrade: {
-        demo: 'https://dx-demo.deriv.com',
-        live: 'https://dx.deriv.com',
+        demo: dxtrade_links.demo,
+        live: dxtrade_links.live,
     },
 };
 
@@ -209,25 +212,25 @@ export const AppToContentMapper: TAppToContentMapper = {
     },
     ctrader_windows: {
         icon: <WindowsIcon />,
-        link: 'https://getctrader.com/deriv/ctrader-deriv-setup.exe',
+        link: ctrader_links.windows,
         text: 'Download',
         title: 'cTrader Windows App',
     },
     ctrader_mac: {
         icon: <MacOSIcon />,
-        link: 'https://getctradermac.com/deriv/ctrader-deriv-setup.dmg',
+        link: ctrader_links.mac,
         text: 'Download',
         title: 'cTrader MacOS App',
     },
     mt5_linux: {
         icon: <LinuxIcon />,
-        link: 'https://www.metatrader5.com/en/terminal/help/start_advanced/install_linux',
+        link: white_label_links.linux,
         text: 'Learn more',
         title: 'MetaTrader 5 Linux app',
     },
     mt5_macos: {
         icon: <MacOSIcon />,
-        link: 'https://download.mql5.com/cdn/web/metaquotes.software.corp/mt5/MetaTrader5.dmg',
+        link: white_label_links.macos,
         text: 'Download',
         title: 'MetaTrader 5 MacOS app',
     },
@@ -239,7 +242,7 @@ export const AppToContentMapper: TAppToContentMapper = {
     },
     mt5_windows: {
         icon: <WindowsIcon />,
-        link: 'https://download.mql5.com/cdn/web/deriv.com.limited/mt5/deriv5setup.exe',
+        link: white_label_links.windows,
         text: 'Download',
         title: 'MetaTrader 5 Windows app',
     },
@@ -250,3 +253,21 @@ export const AppToIconMapper: Record<string, ComponentType<SVGAttributes<SVGElem
     huawei: InstallationHuaweiIcon,
     ios: InstallationAppleIcon,
 };
+
+export const getWebtraderUrl = ({ details }: { details: THooks.MT5AccountsList }) => {
+    return `${details?.white_label_links?.webtrader_url}?login=${details?.display_login}&server=${details?.server_info?.environment}`;
+};
+
+export const getDeeplinkUrl = ({ details }: { details: THooks.MT5AccountsList }) => {
+    return `metatrader5://account?login=${details?.display_login}&server=${details?.server_info?.environment}`;
+};
+
+export const getMobileAppInstallerUrl = async ({ details }: { details: THooks.MT5AccountsList }) => {
+    const os = await mobileOsDetect();
+    if (os === 'iOS') {
+        return details?.white_label_links?.ios;
+    } else if (os === 'huawei') {
+        return white_label_links.huawei;
+    }
+    return details?.white_label_links?.android;
+};

src/cfd/constants/urlConfig.ts

@@ -0,0 +1,40 @@
+/**
+ * This file contains the URLs for different platforms and environments.
+ * urlConfig will be sent as a proposal to the backend.
+ */
+
+/**
+ * URLs for the cTrader platform.
+ */
+export const ctrader_links = {
+    android: 'https://play.google.com/store/apps/details?id=com.deriv.ct',
+    ios: 'https://apps.apple.com/us/app/deriv-ctrader/id6466996509',
+    live: 'https://ct.deriv.com',
+    staging: 'https://ct-uat.deriv.com',
+    windows: 'https://getctrader.com/deriv/ctrader-deriv-setup.exe',
+    mac: 'https://getctradermac.com/deriv/ctrader-deriv-setup.dmg',
+};
+
+/**
+ * URLs for the dxTrade platform.
+ */
+export const dxtrade_links = {
+    android: 'https://play.google.com/store/apps/details?id=com.deriv.dx',
+    huawei: 'https://appgallery.huawei.com/app/C104633219',
+    ios: 'https://apps.apple.com/us/app/deriv-x/id1563337503',
+    demo: 'https://dx-demo.deriv.com',
+    live: 'https://dx.deriv.com',
+};
+
+/**
+ * URLs for the mt5 platform.
+ */
+export const white_label_links = {
+    android: 'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server,Deriv-Server-02',
+    huawei: 'https://appgallery.huawei.com/#/app/C102015329',
+    ios: 'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server,Deriv-Server-02',
+    linux: 'https://www.metatrader5.com/en/terminal/help/start_advanced/install_linux',
+    macos: 'https://download.mql5.com/cdn/web/metaquotes.software.corp/mt5/MetaTrader5.dmg',
+    windows: 'https://download.mql5.com/cdn/web/deriv.com.limited/mt5/deriv5setup.exe',
+    webtrader_url: 'https://mt5-real01-web-svg.deriv.com/terminal',
+};

src/cfd/modals/TradeModal/TradeModal.tsx

@@ -34,41 +34,44 @@ export const TradeModal = () => {
             <Modal.Body className='w-auto h-auto'>
                 <TradeScreen account={account} />
             </Modal.Body>
-            <Modal.Footer>
-                <div className='pt-0 min-h-[190px] flex justify-center items-center flex-col h-fit w-full gap-16'>
-                    <Text align='center' size='xs' weight='bold'>
-                        Download {PlatformDetails[platform]?.title} on your phone to trade with the{' '}
-                        {PlatformDetails[platform].title} account
-                    </Text>
-                    <div className='flex gap-16'>
-                        <div className='flex flex-col justify-center gap-8'>
-                            {appOrder.map(app => {
-                                const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks];
-                                if (AppsLinkMapper) {
-                                    const AppIcon = AppToIconMapper[app];
-                                    const appLink = AppsLinkMapper;
-                                    return (
-                                        <AppIcon
-                                            className='w-[137px] h-[40px] cursor-pointer'
-                                            key={app}
-                                            onClick={() => window.open(appLink)}
-                                        />
-                                    );
-                                }
-                                return null;
-                            })}
-                        </div>
-                        {isDesktop && (
-                            <div className='border-1 border-solid border-system-light-hover-background rounded-xs flex flex-col justify-center items-center w-[150px] gap-[5px] p-8'>
-                                <QRCode size={80} value={PlatformDetails[platform].link} />
-                                <Text align='center' size='xs'>
-                                    Scan the QR code to download {PlatformDetails[platform].title}
-                                </Text>
+            {platform !== PlatformDetails.mt5.platform ||
+                (isDesktop && (
+                    <Modal.Footer>
+                        <div className='pt-0 min-h-[190px] flex justify-center items-center flex-col h-fit w-full gap-16'>
+                            <Text align='center' size='xs' weight='bold'>
+                                Download {PlatformDetails[platform]?.title} on your phone to trade with the{' '}
+                                {PlatformDetails[platform].title} account
+                            </Text>
+                            <div className='flex gap-16'>
+                                <div className='flex flex-col justify-center gap-8'>
+                                    {appOrder.map(app => {
+                                        const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks];
+                                        if (AppsLinkMapper) {
+                                            const AppIcon = AppToIconMapper[app];
+                                            const appLink = AppsLinkMapper;
+                                            return (
+                                                <AppIcon
+                                                    className='w-[137px] h-[40px] cursor-pointer'
+                                                    key={app}
+                                                    onClick={() => window.open(appLink)}
+                                                />
+                                            );
+                                        }
+                                        return null;
+                                    })}
+                                </div>
+                                {isDesktop && (
+                                    <div className='border-1 border-solid border-system-light-hover-background rounded-xs flex flex-col justify-center items-center w-[150px] gap-[5px] p-8'>
+                                        <QRCode size={80} value={PlatformDetails[platform].link} />
+                                        <Text align='center' size='xs'>
+                                            Scan the QR code to download {PlatformDetails[platform].title}
+                                        </Text>
+                                    </div>
+                                )}
                             </div>
-                        )}
-                    </div>
-                </div>
-            </Modal.Footer>
+                        </div>
+                    </Modal.Footer>
+                ))}
         </Modal>
     );
 };

src/cfd/screens/TradeScreen/MT5MobileRedirectOption.tsx

@@ -0,0 +1,59 @@
+import { getDeeplinkUrl, getMobileAppInstallerUrl, getWebtraderUrl } from '@cfd/constants';
+import { Text } from '@deriv-com/ui';
+
+import { IconComponent } from '@/components';
+import { THooks } from '@/types';
+import { isSafariBrowser } from '@/utils';
+
+export const MT5MobileRedirectOption = ({ details }: { details: THooks.MT5AccountsList }) => {
+    const getMobileUrl = () => {
+        window.location.replace(getDeeplinkUrl({ details }));
+
+        const timeout = setTimeout(async () => {
+            const url = await getMobileAppInstallerUrl({ details });
+            if (url) window.location.replace(url);
+        }, 1500);
+
+        if (!isSafariBrowser() || (isSafariBrowser() && /Version\/17/.test(navigator.userAgent))) {
+            window.onblur = () => {
+                clearTimeout(timeout);
+            };
+        }
+    };
+
+    return (
+        <div className='flex flex-col gap-4 align-center'>
+            <a
+                className='flex justify-between w-full gap-2 p-8 bg-gray-200 rounded-md text-decoration-none'
+                href={getWebtraderUrl({ details })}
+                rel='noopener noreferrer'
+                target='_blank'
+            >
+                <div className='flex justify-between w-full gap-5 align-center'>
+                    <IconComponent height={16} icon='Laptop' width={16} />
+                    <Text align='left' className='flex-1' size='xs' weight='bold'>
+                        MetaTrader5 web terminal
+                    </Text>
+                    <IconComponent height={16} icon='ChevronRight' width={16} />
+                </div>
+            </a>
+            <button
+                className='flex justify-between w-full gap-2 p-8 bg-blue-600 rounded-md align-center text-decoration-none'
+                onClick={getMobileUrl}
+            >
+                <div className='flex justify-between w-full gap-5 align-center'>
+                    <IconComponent height={16} icon='Mobile' width={16} />
+                    <Text align='left' className='flex-1 text-white' size='xs' weight='bold'>
+                        Trade with MT5 mobile app
+                    </Text>
+                    <IconComponent height={16} icon='ChevronRight' width={16} />
+                </div>
+            </button>
+
+            <Text as='p' size='2xs'>
+                Note: Don&apos;t have the MT5 app? Tap the <span>Trade with MT5 mobile app</span> button to download.
+                Once you have installed the app, return to this screen and hit the same button to log in.
+            </Text>
+        </div>
+    );
+};

src/cfd/screens/TradeScreen/TradeLink/TradeLink.tsx

@@ -1,20 +1,22 @@
 import { Fragment } from 'react';
 
+import { Button, Text } from '@deriv-com/ui';
+
+import { getPlatformFromUrl } from '@/helpers';
+import { useActiveDerivTradingAccount, useCtraderServiceToken } from '@/hooks';
+import { THooks, TPlatforms } from '@/types';
+
 import {
     AppToContentMapper,
     DesktopLinks,
     PlatformDetails,
     PlatformToLabelIconMapper,
     PlatformUrls,
-} from '@cfd/constants';
-import { Button, Text } from '@deriv-com/ui';
-
-import { getPlatformFromUrl } from '@/helpers';
-import { useActiveDerivTradingAccount, useCtraderServiceToken } from '@/hooks';
-import { THooks, TPlatforms } from '@/types';
+} from '../../../constants';
 
 type TTradeLinkProps = {
     app: keyof typeof AppToContentMapper;
+    isDemo?: boolean;
     platform?: TPlatforms.All;
     webtraderUrl?: THooks.MT5AccountsList['webtrader_url'];
 };

src/cfd/screens/TradeScreen/TradeScreen.tsx

@@ -1,9 +1,9 @@
 import { Fragment, useMemo } from 'react';
 
-import { DesktopLinks, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants';
+import { DesktopLinks, getWebtraderUrl, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants';
 import { Text, useDevice } from '@deriv-com/ui';
 
-import ImportantIcon from '@/assets/svgs/ic-important.svg?react';
+import { IconComponent } from '@/components';
 import {
     useActiveDerivTradingAccount,
     useCtraderAccountsList,
@@ -13,6 +13,7 @@ import {
 import { useCFDContext } from '@/providers';
 import { THooks, TPlatforms } from '@/types';
 
+import { MT5MobileRedirectOption } from './MT5MobileRedirectOption';
 import { TradeDetailsItem } from './TradeDetailsItem';
 import { TradeLink } from './TradeLink';
 
@@ -129,7 +130,8 @@ export const TradeScreen = ({ account }: TradeScreenProps) => {
                     )}
                 </div>
                 <div className='flex items-center gap-8'>
-                    <ImportantIcon
+                    <IconComponent
+                        icon='ImportantIcon'
                         height={platform === mt5Platform ? 16 : 20}
                         width={platform === mt5Platform ? 16 : 20}
                     />
@@ -138,23 +140,24 @@ export const TradeScreen = ({ account }: TradeScreenProps) => {
                     </Text>
                 </div>
             </div>
-            <div className='w-full'>
-                {platform === mt5Platform && (
-                    <Fragment>
-                        <TradeLink
-                            app={DesktopLinks.MT5_WEB}
-                            platform={mt5Platform}
-                            webtraderUrl={(details as THooks.MT5AccountsList)?.webtrader_url}
-                        />
-                        {isDesktop && (
-                            <Fragment>
-                                <TradeLink app={DesktopLinks.MT5_WINDOWS} platform={mt5Platform} />
-                                <TradeLink app={DesktopLinks.MT5_MACOS} platform={mt5Platform} />
-                                <TradeLink app={DesktopLinks.MT5_LINUX} platform={mt5Platform} />
-                            </Fragment>
-                        )}
-                    </Fragment>
-                )}
+            <div className='w-full p-24'>
+                {platform === mt5Platform &&
+                    (isDesktop ? (
+                        <Fragment>
+                            <TradeLink
+                                app={DesktopLinks.MT5_WEB}
+                                platform={mt5Platform}
+                                webtraderUrl={getWebtraderUrl({ details } as { details: THooks.MT5AccountsList })}
+                            />
+
+                            <TradeLink app={DesktopLinks.MT5_WINDOWS} platform={mt5Platform} />
+                            <TradeLink app={DesktopLinks.MT5_MACOS} platform={mt5Platform} />
+                            <TradeLink app={DesktopLinks.MT5_LINUX} platform={mt5Platform} />
+                        </Fragment>
+                    ) : (
+                        <MT5MobileRedirectOption details={details as THooks.MT5AccountsList} />
+                    ))}
+
                 {platform === dxtradePlatform && (
                     <TradeLink app={DesktopLinks.DXTRADE_WEB} platform={dxtradePlatform} />
                 )}