Merge pull request #8 from niloo-fs/niloo/75857/convert-shared-to-TS

Niloofar Sadeghi / Convert brand, browser, cfd, config to TS [shared-utiles] binary-com#6429

packages/shared/brand.config.json

@@ -1,5 +1,5 @@
 {
-    "brand_name" : "Deriv",
+    "brand_name": "Deriv",
     "domain_name": "Deriv.com",
     "legal_entities": {
         "fx": "Deriv (FX) Ltd",
@@ -39,5 +39,4 @@
             "name": "Deriv Go"
         }
     }
-
 }

packages/shared/package.json

@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@deriv/translations": "^1.0.0",
+        "@deriv/api-types": "1.0.48",
         "@types/js-cookie": "^3.0.1",
         "@types/moment": "^2.13.0",
         "@types/react-loadable": "^5.5.6",

packages/shared/src/utils/brand/brand.ts

@@ -0,0 +1,42 @@
+import config_data from '../../../brand.config.json';
+
+type TLandingCompany = {
+    fx: string;
+    malta: string;
+    maltainvest: string;
+    mx: string;
+    samoa: string;
+    svg: string;
+    v: string;
+};
+
+type TPlatform = {
+    name: string;
+    icon?: string;
+};
+
+type TPlatforms = {
+    trader: TPlatform;
+    dbot: TPlatform;
+    mt5: TPlatform;
+    dxtrade: TPlatform;
+    smarttrader: TPlatform;
+    bbot: TPlatform;
+    go: TPlatform;
+};
+
+export const getBrandName = () => {
+    return config_data.brand_name;
+};
+
+export const getLegalEntityName = (landing_company: keyof TLandingCompany) => {
+    return config_data.legal_entities[landing_company];
+};
+
+export const getBrandWebsiteName = () => {
+    return config_data.domain_name;
+};
+
+export const getPlatformSettings = (platform_key: keyof TPlatforms): TPlatform => {
+    return config_data.platforms[platform_key];
+};

packages/shared/src/utils/browser/browser_detect.js → packages/shared/src/utils/browser/browser_detect.ts

@@ -1,8 +1,15 @@
+declare global {
+    interface Window {
+        safari?: any;
+        HTMLElement: any;
+    }
+}
+
 export const isSafari = () => {
     return (
         /constructor/i.test(window.HTMLElement) ||
         (function (p) {
             return p.toString() === '[object SafariRemoteNotification]';
-        })(!window.safari || (typeof safari !== 'undefined' && window.safari.pushNotification))
+        })(!window.safari || (typeof window.safari !== 'undefined' && window.safari.pushNotification))
     );
 };

packages/shared/src/utils/cfd/cfd.js → packages/shared/src/utils/cfd/cfd.ts

@@ -1,9 +1,11 @@
 import { CFD_PLATFORMS } from '../platform';
+import { LandingCompany, GetAccountStatus, DetailsOfEachMT5Loginid } from '@deriv/api-types';
 
-let CFD_text_translated;
+let CFD_text_translated: { [key: string]: () => void };
 
 // TODO: add swap_free to this file when ready
-const CFD_text = {
+
+const CFD_text: { [key: string]: string } = {
     dxtrade: 'Deriv X',
     mt5: 'MT5',
     mt5_cfds: 'MT5 CFDs',
@@ -23,7 +25,20 @@ const CFD_text = {
 // sub_account_type: "financial" | "financial_stp" | "swap_free"
 // *
 // sub_account_type financial_stp only happens in "financial" market_type
-export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shortcode }) => {
+type TPlatform = 'dxtrade' | 'mt5';
+type TMarketType = 'financial' | 'synthetic' | 'gaming' | undefined;
+type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu';
+type TGetAccount = {
+    market_type: TMarketType;
+    sub_account_type?: 'financial' | 'financial_stp' | 'swap_free' | undefined;
+    platform: TPlatform;
+};
+
+type TGetCFDAccountKey = TGetAccount & {
+    shortcode?: TShortcode;
+};
+
+export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shortcode }: TGetCFDAccountKey) => {
     if (market_type === 'gaming' || market_type === 'synthetic') {
         if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') {
             switch (shortcode) {
@@ -66,8 +81,28 @@ export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shor
  * @param {string} type [synthetic, financial, financial_stp]
  * @return {string}
  */
-export const getAccountTypeFields = ({ category, type }) => {
-    const map_mode = {
+type TGetAccountTypeFields = {
+    category: 'real' | 'demo';
+    type: 'financial' | 'synthetic';
+};
+
+type TAccountType = {
+    account_type: string;
+    mt5_account_type?: string;
+};
+
+type TAccountTypes = {
+    synthetic: TAccountType;
+    financial: TAccountType;
+};
+
+type TMapMode = {
+    real: TAccountTypes;
+    demo: TAccountTypes;
+};
+
+export const getAccountTypeFields = ({ category, type }: TGetAccountTypeFields) => {
+    const map_mode: TMapMode = {
         real: {
             synthetic: {
                 account_type: 'gaming',
@@ -91,15 +126,20 @@ export const getAccountTypeFields = ({ category, type }) => {
     return map_mode[category][type];
 };
 
+type TGetCFDAccountDisplay = TGetCFDAccountKey & {
+    is_eu: boolean;
+    is_mt5_trade_modal?: boolean;
+};
+
 export const getCFDAccountDisplay = ({
     market_type,
     sub_account_type,
     platform,
     is_eu,
     shortcode,
     is_mt5_trade_modal,
-}) => {
-    let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode });
+}: TGetCFDAccountDisplay) => {
+    let cfd_account_key: string | undefined = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode });
     if (!cfd_account_key) return undefined;
 
     if (cfd_account_key === 'financial' && is_eu) {
@@ -110,8 +150,12 @@ export const getCFDAccountDisplay = ({
     return CFD_text_translated[cfd_account_key]();
 };
 
-export const getCFDAccount = ({ market_type, sub_account_type, platform, is_eu }) => {
-    let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform });
+type TGetCFDAccount = TGetAccount & {
+    is_eu?: boolean;
+};
+
+export const getCFDAccount = ({ market_type, sub_account_type, platform, is_eu }: TGetCFDAccount) => {
+    let cfd_account_key: string | undefined = getCFDAccountKey({ market_type, sub_account_type, platform });
     if (!cfd_account_key) return undefined;
 
     if (cfd_account_key === 'financial' && is_eu) {
@@ -121,11 +165,12 @@ export const getCFDAccount = ({ market_type, sub_account_type, platform, is_eu }
     return CFD_text[cfd_account_key];
 };
 
-export const setSharedCFDText = all_shared_CFD_text => {
+export const setSharedCFDText = (all_shared_CFD_text: { [key: string]: () => void }) => {
     CFD_text_translated = all_shared_CFD_text;
 };
 
-export const getAccountListKey = (account, platform, shortcode) => {
+type TAccount = DetailsOfEachMT5Loginid & { platform: string };
+export const getAccountListKey = (account: TAccount, platform: TPlatform, shortcode?: TShortcode) => {
     return `${account.platform || platform}.${account.account_type}.${getCFDAccountKey({
         market_type: account.market_type,
         sub_account_type: account.sub_account_type,
@@ -134,7 +179,7 @@ export const getAccountListKey = (account, platform, shortcode) => {
     })}@${platform === CFD_PLATFORMS.DXTRADE ? account.market_type : account.server}`;
 };
 
-export const getCFDPlatformLabel = platform => {
+export const getCFDPlatformLabel = (platform: TPlatform) => {
     switch (platform) {
         case CFD_PLATFORMS.MT5:
             return 'DMT5';
@@ -145,7 +190,13 @@ export const getCFDPlatformLabel = platform => {
     }
 };
 
-export const isLandingCompanyEnabled = ({ landing_companies, platform, type }) => {
+type TIsLandingCompanyEnabled = {
+    landing_companies: LandingCompany;
+    platform: TPlatform;
+    type: TMarketType | 'financial_stp';
+};
+
+export const isLandingCompanyEnabled = ({ landing_companies, platform, type }: TIsLandingCompanyEnabled) => {
     if (platform === CFD_PLATFORMS.MT5) {
         if (type === 'gaming') return !!landing_companies?.mt_gaming_company?.financial;
         if (type === 'financial') return !!landing_companies?.mt_financial_company?.financial;
@@ -157,9 +208,9 @@ export const isLandingCompanyEnabled = ({ landing_companies, platform, type }) =
     return false;
 };
 
-export const getIdentityStatusInfo = account_status => {
-    const poa_status = account_status?.authentication?.document?.status;
-    const poi_status = account_status?.authentication?.identity?.status;
+export const getIdentityStatusInfo = (account_status: GetAccountStatus) => {
+    const poa_status = account_status?.authentication?.document?.status || '';
+    const poi_status = account_status?.authentication?.identity?.status || '';
 
     const idv_status = account_status?.authentication?.identity?.services?.idv?.status;
     const onfido_status = account_status?.authentication?.identity?.services?.onfido?.status;

packages/shared/src/utils/config/config.js → packages/shared/src/utils/config/config.ts

@@ -13,7 +13,7 @@ import { isStaging } from '../url/helpers';
 export const livechat_license_id = 12049137;
 export const livechat_client_id = '66aa088aad5a414484c1fd1fa8a5ace7';
 
-export const domain_app_ids = {
+export const domain_app_ids: { [key: string]: number } = {
     // these domains as supported "production domains"
     'deriv.app': 16929, // TODO: [app-link-refactor] - Remove backwards compatibility for `deriv.app`
     'app.deriv.com': 16929,
@@ -25,7 +25,7 @@ export const domain_app_ids = {
     'binary.com': 1,
 };
 
-export const platform_app_ids = {
+export const platform_app_ids: { [key: string]: number } = {
     derivgo: 23789,
 };
 
@@ -34,7 +34,7 @@ export const getCurrentProductionDomain = () =>
     Object.keys(domain_app_ids).find(domain => window.location.hostname === domain);
 
 export const isProduction = () => {
-    const all_domains = Object.keys(domain_app_ids).map(domain => `(www\\.)?${domain.replace('.', '\\.')}`);
+    const all_domains: string[] = Object.keys(domain_app_ids).map(domain => `(www\\.)?${domain.replace('.', '\\.')}`);
     return new RegExp(`^(${all_domains.join('|')})$`, 'i').test(window.location.hostname);
 };
 
@@ -46,7 +46,7 @@ export const getAppId = () => {
     let app_id = null;
     const user_app_id = ''; // you can insert Application ID of your registered application here
     const config_app_id = window.localStorage.getItem('config.app_id');
-    const current_domain = getCurrentProductionDomain();
+    const current_domain: string = getCurrentProductionDomain() || '';
     const platform = new URLSearchParams(window.location.search).get('platform');
 
     // Added platform at the top since this should take precedence over the config_app_id
@@ -71,32 +71,32 @@ export const getAppId = () => {
 };
 
 export const getSocketURL = () => {
-    const local_storage_server_url = window.localStorage.getItem('config.server_url');
+    const local_storage_server_url: string | null = window.localStorage.getItem('config.server_url');
     if (local_storage_server_url) return local_storage_server_url;
 
     let active_loginid_from_url;
-    const search = window.location.search;
+    const search: string = window.location.search;
     if (search) {
-        const params = new URLSearchParams(document.location.search.substring(1));
+        const params: URLSearchParams = new URLSearchParams(document.location.search.substring(1));
         active_loginid_from_url = params.get('acct1');
     }
 
-    const loginid = window.localStorage.getItem('active_loginid') || active_loginid_from_url;
-    const is_real = loginid && !/^VRT/.test(loginid);
+    const loginid: string | null | undefined = window.localStorage.getItem('active_loginid') || active_loginid_from_url;
+    const is_real: boolean | '' | null | undefined = loginid && !/^VRT/.test(loginid);
 
-    const server = is_real ? 'green' : 'blue';
+    const server: 'green' | 'blue' = is_real ? 'green' : 'blue';
     const server_url = `${server}.binaryws.com`;
 
     return server_url;
 };
 
 export const checkAndSetEndpointFromUrl = () => {
     if (isTestLink()) {
-        const url_params = new URLSearchParams(location.search.slice(1));
+        const url_params: URLSearchParams = new URLSearchParams(location.search.slice(1));
 
         if (url_params.has('qa_server') && url_params.has('app_id')) {
-            const qa_server = url_params.get('qa_server');
-            const app_id = url_params.get('app_id');
+            const qa_server: string = url_params.get('qa_server') || '';
+            const app_id: string = url_params.get('app_id') || '';
 
             url_params.delete('qa_server');
             url_params.delete('app_id');
@@ -111,8 +111,8 @@ export const checkAndSetEndpointFromUrl = () => {
                 localStorage.setItem('config.server_url', qa_server);
             }
 
-            const params = url_params.toString();
-            const hash = location.hash;
+            const params: string = url_params.toString();
+            const hash: string = location.hash;
 
             location.href = `${location.protocol}//${location.hostname}${location.pathname}${
                 params ? `?${params}` : ''
@@ -126,7 +126,7 @@ export const checkAndSetEndpointFromUrl = () => {
 };
 
 export const getDebugServiceWorker = () => {
-    const debug_service_worker_flag = window.localStorage.getItem('debug_service_worker');
+    const debug_service_worker_flag: string | null = window.localStorage.getItem('debug_service_worker');
     if (debug_service_worker_flag) return !!parseInt(debug_service_worker_flag);
 
     return false;

packages/shared/src/utils/config/platform-config.js → packages/shared/src/utils/config/platform-config.ts

@@ -4,8 +4,21 @@ import { getInitialLanguage } from '@deriv/translations';
 import { initMoment } from '../date';
 import { routes } from '../routes';
 
+type TPlatform = {
+    icon_text: undefined;
+    is_hard_redirect: boolean;
+    platform_name: string;
+    route_to_path: string;
+    url: string;
+};
+
+type TPlatforms = {
+    p2p: TPlatform;
+    derivgo: TPlatform;
+};
+
 // TODO: This should be moved to PlatformContext
-export const platforms = {
+export const platforms: TPlatforms = {
     p2p: {
         icon_text: undefined,
         is_hard_redirect: true,