From e1ea94c827544f1cc170d2c9018b9e2cd6663b7a Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>
Date: Mon, 31 Jul 2023 12:22:24 +0800
Subject: [PATCH] chore: update the broker name in mt5 trade modal (#9498)

---
 .../src/components/cfds-listing/cfds-listing.scss    |  3 +++
 packages/cfd/src/Containers/dmt5-trade-modal.tsx     | 12 +++++++++---
 packages/cfd/src/Helpers/constants.ts                |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
index 1ce3319d8701..bba932feb054 100644
--- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss
+++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -449,6 +449,9 @@
     &__spec-text {
         font-family: 'Courier', monospace;
         overflow: hidden;
+        &-broker {
+            margin-left: 4rem;
+        }
     }
     &__download-center {
         border-top: 2px solid var(--general-section-1);
diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx
index 7a8753cacc8d..ff0edf8ad8b9 100644
--- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx
+++ b/packages/cfd/src/Containers/dmt5-trade-modal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Text, Button, Icon, Money, Popover } from '@deriv/components';
 import { TPasswordBoxProps, TTradingPlatformAccounts } from '../Components/props.types';
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
@@ -33,11 +34,16 @@ type TMT5TradeModalProps = {
 export type TSpecBoxProps = {
     value: string | undefined;
     is_bold?: boolean;
+    is_broker?: boolean;
 };
 
-const SpecBox = ({ value, is_bold }: TSpecBoxProps) => (
+const SpecBox = ({ value, is_bold, is_broker }: TSpecBoxProps) => (
     <div className='cfd-trade-modal__spec-box'>
-        <Text size='xs' weight={is_bold ? 'bold' : ''} className='cfd-trade-modal__spec-text'>
+        <Text
+            size='xs'
+            weight={is_bold ? 'bold' : ''}
+            className={classNames('cfd-trade-modal__spec-text', { 'cfd-trade-modal__spec-text-broker': is_broker })}
+        >
             {value}
         </Text>
         <CFDAccountCopy text={value} className='cfd-trade-modal__spec-copy' />
@@ -150,7 +156,7 @@ const DMT5TradeModal = ({
             <div className='cfd-trade-modal__login-specs'>
                 <div className='cfd-trade-modal__login-specs-item'>
                     <Text className='cfd-trade-modal--paragraph'>{localize('Broker')}</Text>
-                    <SpecBox is_bold value={'Deriv Limited'} />
+                    <SpecBox is_bold is_broker value={'Deriv Holdings (Guernsey) Limited'} />
                 </div>
                 <div className='cfd-trade-modal__login-specs-item'>
                     <Text className='cfd-trade-modal--paragraph'>{localize('Server')}</Text>
diff --git a/packages/cfd/src/Helpers/constants.ts b/packages/cfd/src/Helpers/constants.ts
index f887d5c0ce74..c272393ed11b 100644
--- a/packages/cfd/src/Helpers/constants.ts
+++ b/packages/cfd/src/Helpers/constants.ts
@@ -52,7 +52,7 @@ const DXTRADE_IOS_APP_URL = 'https://apps.apple.com/us/app/deriv-x/id1563337503'
 const DXTRADE_ANDROID_APP_URL = 'https://play.google.com/store/apps/details?id=com.deriv.dx';
 const DXTRADE_HUAWEI_APP_URL = 'https://appgallery.huawei.com/app/C104633219';
 
-const getBrokerName = () => 'Deriv Limited';
+const getBrokerName = () => 'Deriv Holdings (Guernsey) Limited';
 
 const getTopUpConfig = () => {
     return {