Merge pull request #660 from deriv-com/redesign

SmartTrader Redesign

build/config/constants.js

@@ -39,6 +39,7 @@ const release_config = {
 
 const node_modules_paths = {
     binary_style: 'node_modules/@binary-com/binary-style',
+    quill       : 'node_modules/@deriv-com/quill-ui',
 };
 
 const config = {

build/cssmin.js

@@ -12,6 +12,7 @@ module.exports = {
                 ],
                 dest: `${global.dist}/css/common.min.css`,
             },
+            { src: `${global.dist}/css/reset.css`,                              dest: `${global.dist}/css/reset.min.css` },
             { src: `${global.dist}/css/app.css`,                                dest: `${global.dist}/css/app.min.css` },
             { src: `${global.dist}/css/static.css`,                             dest: `${global.dist}/css/static.min.css` },
         ],

build/postcss.js

@@ -12,7 +12,7 @@ module.exports = function (grunt) {
             ],
         },
         dist: {
-            src: `${global.dist}/css/{app,common,static}.css`,
+            src: `${global.dist}/css/{app,common,static,reset}.css`,
         },
     };
 };

build/webpack/config_common.js

@@ -62,6 +62,10 @@ const commonConfig = (grunt) => ({
                     },
                 ],
             },
+            {
+                test: /\.css$/,
+                use : ['style-loader', 'css-loader'],
+            },
         ],
     },
     watch       : false,

package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@babel/core": "7.24.0",
     "@babel/eslint-parser": "7.23.10",
-    "@babel/parser": "7.1.2",
+    "@babel/parser": "7.25.0",
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-class-properties": "^7.24.7",
@@ -44,6 +44,7 @@
     "commander": "2.12.2",
     "connect-livereload": "0.6.0",
     "connect-modrewrite": "^0.10.2",
+    "css-loader": "^7.1.2",
     "deep-diff": "0.3.8",
     "emphasize": "7.0.0",
     "enzyme": "3.3.0",
@@ -87,6 +88,7 @@
     "react-render-html": "0.6.0",
     "sass": "^1.77.6",
     "sitemap": "1.13.0",
+    "style-loader": "^4.0.0",
     "stylelint": "15.11.0",
     "stylelint-formatter-pretty": "1.0.3",
     "stylelint-selector-bem-pattern": "3.0.1",
@@ -103,7 +105,9 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.1",
+    "@deriv-com/quill-ui": "^1.13.44",
     "@deriv/deriv-api": "^1.0.15",
+    "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",
     "canvas-toBlob": "1.0.0",
     "classnames": "2.2.5",
@@ -112,6 +116,7 @@
     "davidshimjs-qrcodejs": "0.0.2",
     "event-source-polyfill": "0.0.9",
     "highstock-release": "5.0.14",
+    "html-react-parser": "^5.1.10",
     "jquery": "3.5.1",
     "jquery.scrollto": "2.1.2",
     "js-cookie": "2.2.0",
@@ -131,6 +136,11 @@
   "peerDependencies": {
     "circular-dependency-plugin": "5.2.2"
   },
+  "overrides": {
+    "braces": "^3.0.3",
+    "@babel/parser": "7.25.0",
+    "@babel/plugin-proposal-optional-chaining": "7.22.5"
+  },
   "engines": {
     "node": "18.x"
   },

scripts/common.js

@@ -21,7 +21,7 @@ exports.sections_config = {
     '': { // '' is the default section when no 'section' specified in pages.js (to avoid adding 'app' as section for all)
         path     : '',
         js_files : ['vendor', 'binary'],
-        css_files: ['common.min', 'app.min', 'static.min'],
+        css_files: ['common.min', 'app.min', 'static.min', 'reset.min'],
         has_pjax : true,
     },
 };

src/javascript/_common/localize.js

@@ -1,4 +1,5 @@
 const moment   = require('moment');
+const { urlLang } = require('./language');
 require('moment/min/locales');
 const template = require('./utility').template;
 
@@ -15,6 +16,12 @@ const Localize = (() => {
 
         const index = text.replace(/[\s|.]/g, '_');
 
+        const lang = urlLang().toUpperCase();
+
+        const strings = typeof texts_json !== 'undefined' ? texts_json : {};
+
+        localized_texts = strings[lang];
+
         text = (localized_texts && localized_texts[index]) || text;
 
         // only use template when explicitly required

src/javascript/app/base/binary_loader.js

@@ -20,6 +20,7 @@ const isStorageSupported = require('../../_common/storage').isStorageSupported;
 const ThirdPartyLinks = require('../../_common/third_party_links');
 const urlFor = require('../../_common/url').urlFor;
 const createElement = require('../../_common/utility').createElement;
+const NotAvailable = require('../pages/trade/not-available.jsx');
 
 const BinaryLoader = (() => {
     let container;
@@ -152,9 +153,9 @@ const BinaryLoader = (() => {
             if (config.no_blocked_country && Client.isLoggedIn() && Client.isOptionsBlocked()) {
                 displayMessage(error_messages.options_blocked());
             } else if (Client.isLoggedIn() && Client.isOfferingBlocked()) {
-                displayMessage(error_messages.offerings_blocked());
+                displayUnavailable({ body: error_messages.offerings_blocked() });
             } else if (config.no_mf && Client.isLoggedIn() && Client.isAccountOfType('financial')) {
-                displayUnavailable();
+                displayUnavailable({ body: localize('Unfortunately, this trading platform is not available for EU Deriv account. Please switch to a non-EU account to continue trading.') });
             }
         });
 
@@ -193,35 +194,13 @@ const BinaryLoader = (() => {
         }
     };
 
-    const displayUnavailable = () => {
+    const displayUnavailable = (props) => {
         const content = container.querySelector('#content .container');
         if (!content) {
             return;
         }
 
-        const div_container = createElement('div', { class: 'platform-unavailable' });
-        const inner_container = createElement('div', { class: 'platform-unavailable-inner' });
-        const h1_title = createElement('h1', { text: localize('SmartTrader is unavailable for this account'), class: 'platform-unavailable-inner-title' });
-        const message = createElement('div',
-            {
-                text: localize(
-                    'Unfortunately, this trading platform is not available for EU Deriv account. Please switch to a non-EU account to continue trading.'
-                ),
-                class: 'platform-unavailable-inner-message',
-            });
-        const button = createElement('button', { text: localize('Switch to another account'), class: 'platform-unavailable-inner-button' });
-
-        div_container.appendChild(inner_container);
-        inner_container.appendChild(h1_title);
-        inner_container.appendChild(message);
-        inner_container.appendChild(button);
-
-        button.addEventListener('click', (event) => {
-            document.getElementById('acc_switcher').click();
-            event.stopPropagation();
-        });
-
-        content.html(div_container);
+        NotAvailable.init({ title: localize('SmartTrader is unavailable for this account'), ...props });
     };
 
     const handleNotAuthenticated = () => {

src/javascript/app/base/clock.js

@@ -35,9 +35,17 @@ const Clock = (() => {
         });
     };
 
+    const getLocalTime = (time) => {
+        const gmt_time_str = time.replaceAll('\n', ' ');
+        const local_time   = moment.utc(gmt_time_str, 'YYYY-MM-DD HH:mm:ss').local();
+
+        return local_time.format('YYYY-MM-DD HH:mm:ss Z');
+    };
+
     return {
         startClock,
         showLocalTimeOnHover,
+        getLocalTime,
         setExternalTimer: (func) => { fncExternalTimer = func; },
     };
 })();

src/javascript/app/common/active_symbols.js

@@ -24,6 +24,17 @@ const submarket_order = {
     random_nightly : 20,
 };
 
+const marketOrder = [
+    'forex',
+    'indices',
+    'cryptocurrency',
+    'commodities',
+    'baskets',
+    'synthetics',
+];
+
+const derived = ['baskets', 'synthetics'];
+
 const ActiveSymbols = (() => {
     const groupBy = (xs, key) => (
         xs.reduce((rv, x) => {
@@ -218,6 +229,30 @@ const ActiveSymbols = (() => {
         return all_symbols;
     };
 
+    const sortObjectByKeys = (obj, order) => {
+        const orderedObj = {};
+        const remainingObj = {};
+
+        // Add keys in the specified order
+        order.forEach(key => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (obj.hasOwnProperty(key)) {
+                orderedObj[key] = obj[key];
+            }
+        });
+
+        // Add any remaining keys that were not specified in the order array
+        Object.keys(obj).forEach(key => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (!orderedObj.hasOwnProperty(key)) {
+                remainingObj[key] = obj[key];
+            }
+        });
+
+        // Combine ordered keys and remaining keys
+        return { ...orderedObj, ...remainingObj };
+    };
+
     return {
         getMarkets,
         getSubmarkets,
@@ -229,6 +264,9 @@ const ActiveSymbols = (() => {
         getSymbolsForMarket,
         sortSubmarket,
         getAvailableUnderlyings,
+        marketOrder,
+        derived,
+        sortObjectByKeys,
     };
 })();
 

src/javascript/app/common/currency.js

@@ -1,9 +1,14 @@
+const dataManager  = require('./data_manager').default;
 const CurrencyBase = require('../../_common/base/currency_base');
 const localize     = require('../../_common/localize').localize;
 
 const getCurrencyFullName = (currency) => CurrencyBase.isCryptocurrency(currency) ? `${CurrencyBase.getCurrencyName(currency)} (${CurrencyBase.getCurrencyDisplayCode(currency)})` : currency;
 
 const getCurrencyList = (currencies) => {
+    const currency_list = {
+        fiat  : [],
+        crypto: [],
+    };
     const $currencies       = $('<select/>');
     const $fiat_currencies  = $('<optgroup/>', { label: localize('Fiat') });
     const $cryptocurrencies = $('<optgroup/>', { label: localize('Crypto') });
@@ -12,6 +17,14 @@ const getCurrencyList = (currencies) => {
         const currency_name = getCurrencyFullName(currency);
         (CurrencyBase.isCryptocurrency(currency) ? $cryptocurrencies : $fiat_currencies)
             .append($('<option/>', { value: currency, text: currency_name }));
+        if (CurrencyBase.isCryptocurrency(currency)) {
+            currency_list.crypto.push({ value: currency, text: currency_name });
+        } else {
+            currency_list.fiat.push({ value: currency, text: currency_name });
+        }
+    });
+    dataManager.setTrade({
+        currency_list,
     });
 
     return $currencies.append($fiat_currencies.children().length ? $fiat_currencies : '').append($cryptocurrencies.children().length ? $cryptocurrencies : '');