Nuzhy/nit picks (#791)

* fix: pr-nitpicks

* fix: undo changes

* fix: undo changes

src/javascript/app/common/active_symbols.js

@@ -33,7 +33,7 @@ const marketOrder = [
     'synthetics',
 ];
 
-const derived = ['baskets','synthetics'];
+const derived = ['baskets', 'synthetics'];
 
 const ActiveSymbols = (() => {
     const groupBy = (xs, key) => (

src/javascript/app/pages/bottom/data/explanation.js

@@ -225,11 +225,11 @@ export const contractExplanationData = {
             content: [
                 localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
                 localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
-                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.',['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
             ],
             title_secondary  : localize('Contract period') ,
             content_secondary: [
-                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].',['<strong>', '</strong>']),
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
                 localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
                 localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
             ],
@@ -239,11 +239,11 @@ export const contractExplanationData = {
             content: [
                 localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
                 localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
-                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.',['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
             ],
             title_secondary  : localize('Contract period') ,
             content_secondary: [
-                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].',['<strong>', '</strong>']),
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
                 localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
                 localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
             ],
@@ -253,11 +253,11 @@ export const contractExplanationData = {
             content: [
                 localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
                 localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
-                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.',['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
             ],
             title_secondary  : localize('Contract period') ,
             content_secondary: [
-                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].',['<strong>', '</strong>']),
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
                 localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
                 localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
             ],

src/javascript/app/pages/bottom/explanation.jsx

@@ -22,7 +22,7 @@ export const Explanation = ({ explanationOnly = false }) => {
             setFormName(actualFormName);
         }, 500);
 
-    },[hasContractChanges]);
+    }, [hasContractChanges]);
 
     const language = Language.get();
     const image_path = Url.urlForStatic(
@@ -192,7 +192,7 @@ export const Explanation = ({ explanationOnly = false }) => {
         );
     }
 
-    if (explanationOnly){
+    if (explanationOnly) {
         return (
             <div className='explanation-container-loader'>
                 <Skeleton.Square width={250} height={50} rounded />

src/javascript/app/pages/loader.jsx

@@ -47,11 +47,11 @@ const Loader = () => {
     useEffect(() => {
         const hidePageLoader = dataManager.getContract('hidePageLoader');
 
-        if (hidePageLoader){
+        if (hidePageLoader) {
             setLoading(false);
         }
 
-    },[hasContractChange]);
+    }, [hasContractChange]);
 
     useEffect(() => {
         const handleLoad = () => {
@@ -64,9 +64,9 @@ const Loader = () => {
         return () => {
             window.removeEventListener('load', handleLoad);
         };
-    },[]);
+    }, []);
 
-    if (loading){
+    if (loading) {
         return (
             <Portal>
                 <div className='quill-generic-popup'>

src/javascript/app/pages/trade/guide.jsx

@@ -14,7 +14,7 @@ const GuideBtn = () => {
         Guide.init({
             script: 'trading',
         });
-    },[]);
+    }, []);
 
     return (
         <Button

src/javascript/app/pages/trade/markets/contracts-dropdown.jsx

@@ -20,7 +20,7 @@ export const ContractDropdown = () => {
 
         const contractElement = data?.contractElement;
 
-        if (contractElement){
+        if (contractElement) {
             const event = new Event('change');
             contractElement.value = formName;
             contractElement.dispatchEvent(event);

src/javascript/app/pages/trade/markets/markets-dropdown.jsx

@@ -45,13 +45,13 @@ export const getContractName = () => {
     data?.contractsTree?.forEach((contract) => {
         if (typeof contract === 'object') {
             contract[1].forEach((subtype) => {
-                if (subtype === data?.actualFormName){
+                if (subtype === data?.actualFormName) {
                     name =  data?.contracts[subtype];
                 }
 
             });
 
-        } else if (contract === data?.actualFormName){
+        } else if (contract === data?.actualFormName) {
             name = data?.contracts[contract];
         }
 

src/javascript/app/pages/trade/price.js

@@ -461,14 +461,14 @@ const Price = (() => {
         Object.keys(position_is_visible).forEach(position => {
             const container = CommonFunctions.getElementById(`price_container_${position}`);
             if (position_is_visible[position]) {
-                if (position === 'middle'){
+                if (position === 'middle') {
                     dataManager.setPurchase({
                         showMidPurchase: true,
                     });
                 }
                 $(container).fadeIn(0);
             } else {
-                if (position === 'middle'){
+                if (position === 'middle') {
                     dataManager.setPurchase({
                         showMidPurchase: false,
                     });

src/javascript/app/pages/trade/process.js

@@ -63,7 +63,7 @@ const Process = (() => {
 
                 commonTrading.displayMarkets();
                 processMarket();
-            } else if (country === 'gb' || country === 'im'){
+            } else if (country === 'gb' || country === 'im') {
                 NotAvailable.init({ title: localize('SmartTrader is unavailable for this account'), body: localize('Sorry, options trading isn’t available in the United Kingdom and the Isle of Man.') });
             } else {
                 NotAvailable.init({ title: localize('SmartTrader is unavailable for this account'), body: localize('Unfortunately, this trading platform is not available for EU Deriv account. Please switch to a non-EU account to continue trading.') });

src/javascript/app/pages/trade/purchase/purchase.jsx

@@ -49,11 +49,11 @@ const Purchase = () => {
     useEffect(() => {
         const formName = Defaults.get(PARAM_NAMES.FORM_NAME);
 
-        const lookbacks = ['lookbacklow','lookbackhigh','lookbackhighlow'];
+        const lookbacks = ['lookbacklow', 'lookbackhigh', 'lookbackhighlow'];
 
         setIsLookBack(lookbacks.includes(formName));
 
-    },[hasContractChange]);
+    }, [hasContractChange]);
 
     useEffect(() => {
         document.body.style.overflow = showPopup ? 'hidden' : '';
@@ -66,7 +66,7 @@ const Purchase = () => {
     const displayCurrency = (referenceField) => referenceField !== '-' ? data?.currency : '';
 
     const ButtonTooltipWrapper = (button,description) => {
-        if (!description || description === '' || data?.isPurchaseFormDisabled){
+        if (!description || description === '' || data?.isPurchaseFormDisabled) {
             return button;
         }
         return (
@@ -84,11 +84,11 @@ const Purchase = () => {
         );
     };
 
-    if (showPopup){
+    if (showPopup) {
         return <ContractDetails />;
     }
 
-    if (isloading() || (!data?.showPurchaseResults && data?.isPurchaseFormDisabled)){
+    if (isloading() || (!data?.showPurchaseResults && data?.isPurchaseFormDisabled)) {
         return (
             <div className='quill-purchase-section'>
                 <Skeleton.Square rounded fullWidth height={30} />
@@ -102,7 +102,7 @@ const Purchase = () => {
             </div>);
     }
 
-    if (!data?.showPurchaseResults && !data?.error){
+    if (!data?.showPurchaseResults && !data?.error) {
         return (
             <div className={`quill-purchase-section ${data?.isPurchaseFormDisabled && 'disabled'}`}>
                 {data?.showMidPurchase ? (
@@ -194,7 +194,7 @@ const Purchase = () => {
         );
     }
 
-    if (data?.error){
+    if (data?.error) {
         return (
             <div className='quill-purchase-section-results'>
                 <div className='top-box'>
@@ -232,7 +232,7 @@ const Purchase = () => {
                                             <Text size='sm'>{data?.error?.message}</Text>
                                             <Text size='sm'>{
                                                 parse(
-                                                    localize('Do you want to top up for another [_1]? If not, you can do this later on the [_2]Cashier page[_3], too.',['$10,000.00', '<a id=\'top_up_cashier_redirect\' href=\'\'>', '</a>'])
+                                                    localize('Do you want to top up for another [_1]? If not, you can do this later on the [_2]Cashier page[_3], too.', ['$10,000.00', '<a id=\'top_up_cashier_redirect\' href=\'\'>', '</a>'])
                                                 )}
                                             </Text>
                                             <Button

src/javascript/app/pages/user/view_popup/view_popup.js

@@ -883,7 +883,7 @@ const ViewPopup = (() => {
             if ($loading.length) {
                 $loading.show();
             }
-        } else if ($loading){
+        } else if ($loading) {
             dataManager.setContract({
                 hidePageLoader: true,
             });

src/sass/_common/common.scss

@@ -437,7 +437,7 @@ label {
     flex: 1 1 auto;
     margin-top: 48px;
 
-    @media(max-width: 880px){
+    @media(max-width: 880px) {
         margin-top: 40px;
     }
 }