Prince/Purchase section refactor

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

@@ -10,9 +10,9 @@ import { useContractChange } from '../../hooks/events.js';
 
 export const Explanation = ({ explanationOnly = false }) => {
 
-    const [formName,setFormName] = useState(null);
+    const [form_name,setFormName] = useState(null);
 
-    const hasContractChanges = useContractChange();
+    const has_contract_changes = useContractChange();
 
     useEffect(() => {
         const actualFormName = dataManager.getContract('explanationFormName');
@@ -22,7 +22,7 @@ export const Explanation = ({ explanationOnly = false }) => {
             setFormName(actualFormName);
         }, 500);
 
-    }, [hasContractChanges]);
+    }, [has_contract_changes]);
 
     const language = Language.get();
     const image_path = Url.urlForStatic(
@@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => {
     const Notes = () => (
         <>
             <strong>{localize('Note')}: </strong>
-            {contractExplanationData.note[formName].content.map((data, idx) => (
+            {contractExplanationData.note[form_name].content.map((data, idx) => (
                 <span key={idx}>{parse(data)}</span>
             ))}
         </>
@@ -93,19 +93,19 @@ export const Explanation = ({ explanationOnly = false }) => {
         },
     };
 
-    if (formName) {
+    if (form_name) {
         return (
             <div className='tab-explanation'>
                 {/* ========== Winning ========== */}
                 {!explanationOnly && (
                     <>
                         <div id='explanation_winning'>
-                            <div id={`winning_${formName}`}>
+                            <div id={`winning_${form_name}`}>
                                 <div className='explanation-heading'>
                                     <Text size='lg' bold >{localize('Winning the contract')}</Text>
                                 </div>
                                 <div className='explanation-content'>
-                                    {contractExplanationData.winning[formName].content.map(
+                                    {contractExplanationData.winning[form_name].content.map(
                                         (data, idx) => (
                                             <Text size='md' key={idx}>{parse(data)}</Text>
                                         )
@@ -116,7 +116,7 @@ export const Explanation = ({ explanationOnly = false }) => {
                         </div>
 
                         {/* ========== Image ========== */}
-                        {images[formName] && (
+                        {images[form_name] && (
                             <div id='explanation_image'>
                                 <div className='gr-row'>
                                     <div className='gr-2 hide-mobile' />
@@ -127,15 +127,15 @@ export const Explanation = ({ explanationOnly = false }) => {
                                         <img
                                             id='explanation_image_1'
                                             className='responsive'
-                                            src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
+                                            src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
                                         />
                                     </div>
-                                    {images[formName].image2 && (
+                                    {images[form_name].image2 && (
                                         <div className='gr-4 gr-12-m padding-left'>
                                             <img
                                                 id='explanation_image_2'
                                                 className='responsive'
-                                                src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
+                                                src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
                                             />
                                         </div>
                                     )}
@@ -149,29 +149,29 @@ export const Explanation = ({ explanationOnly = false }) => {
 
                 {/* ========== Explain ========== */}
                 <div id='explanation_explain' className='gr-child'>
-                    <div id={`explain_${formName}`}  >
+                    <div id={`explain_${form_name}`}  >
                         <div className='explanation-heading'>
-                            <Text size='lg' bold >{contractExplanationData.explain[formName].title}</Text>
+                            <Text size='lg' bold >{contractExplanationData.explain[form_name].title}</Text>
                         </div>
                         <div className='explanation-content'>
-                            {contractExplanationData.explain[formName].content.map(
+                            {contractExplanationData.explain[form_name].content.map(
                                 (data, idx) => (
                                     <Text size='md' key={idx}>{parse(data)}</Text>
                                 )
                             )}
                         </div>
 
-                        {contractExplanationData.explain[formName].title_secondary && (
+                        {contractExplanationData.explain[form_name].title_secondary && (
                             <div className='explanation-heading secondary-heading'>
                                 <Text size='lg' bold>
-                                    {contractExplanationData.explain[formName].title_secondary}
+                                    {contractExplanationData.explain[form_name].title_secondary}
                                 </Text>
                             </div>
                         )}
 
-                        {contractExplanationData.explain[formName].content_secondary && (
+                        {contractExplanationData.explain[form_name].content_secondary && (
                             <div className='explanation-content'>
-                                {contractExplanationData.explain[formName].content_secondary.map(
+                                {contractExplanationData.explain[form_name].content_secondary.map(
                                     (data, idx) => (
                                         <Text size='md' key={idx}>{parse(data)}</Text>
                                     )
@@ -184,7 +184,7 @@ export const Explanation = ({ explanationOnly = false }) => {
 
                 {/* ========== Note ========== */}
                 {!explanationOnly && (
-                    contractExplanationData.note[formName] && (
+                    contractExplanationData.note[form_name] && (
                         <SectionMessage status='info' message={<Notes />} size='sm' />
                     )
                 )}

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

@@ -11,14 +11,14 @@ import dataManager from '../../common/data_manager.js';
 import LastDigit from '../trade/last_digit.jsx';
 
 const BottomTabs = () => {
-    const hasMarketChange = useMarketChange();
-    const [selectedTab, setSelectedTab] = useState(1);
-    const [hasLastDigit, setHasLastDigit] = useState(false);
-    const [formName, setFormName] = useState('');
-    const hasContractChange = useContractChange();
-    const savedTab = sessionStorage.getItem('currentTab');
+    const has_market_change = useMarketChange();
+    const [selected_tab, setSelectedTab] = useState(1);
+    const [has_last_digit, setHasLastDigit] = useState(false);
+    const [form_name, setFormName] = useState('');
+    const has_contract_change = useContractChange();
+    const saved_tab = sessionStorage.getItem('currentTab');
+    const [is_show_graph, setIsShowGraph] = useState(false);
     const triggerOldTabTimer = useRef();
-    const [isShowGraph, setIsShowGraph] = useState(false);
 
     const handleChange = (e) => {
         setSelectedTab(e);
@@ -31,40 +31,40 @@ const BottomTabs = () => {
 
     const tabs = [{ label: localize('Chart') }, { label: localize('Explanation') }];
 
-    const bottomTabOptions = hasLastDigit
+    const bottom_tab_options = has_last_digit
         ? [...tabs, { label: localize('Last Digit Stats') }]
         : tabs;
 
     useEffect(() => {
         setFormName(dataManager.getContract('explanationFormName'));
-    }, [hasContractChange, hasMarketChange]);
+    }, [has_contract_change, has_market_change]);
 
     useEffect(() => {
-        setHasLastDigit(formName === 'digits' || formName === 'evenodd' || formName === 'overunder');
-    }, [formName]);
+        setHasLastDigit(form_name === 'digits' || form_name === 'evenodd' || form_name === 'overunder');
+    }, [form_name]);
 
     useEffect(() => {
-        if (savedTab !== null) {
-            const tabIndex = parseInt(savedTab);
-            if (tabIndex === 2 && !hasLastDigit) {
+        if (saved_tab !== null) {
+            const tab_index = parseInt(saved_tab);
+            if (tab_index === 2 && !has_last_digit) {
                 setSelectedTab(1);
             } else {
-                setSelectedTab(tabIndex);
+                setSelectedTab(tab_index);
             }
         } else {
             setSelectedTab(1);
         }
-    }, [hasLastDigit]);
+    }, [has_last_digit]);
 
     useEffect(() => {
-        const oppositeTab = (selectedTab + 1) > 2 ? 0 : (selectedTab + 1);
+        const opposite_tab = (selected_tab + 1) > 2 ? 0 : (selected_tab + 1);
 
-        triggerOldTab(oppositeTab);
+        triggerOldTab(opposite_tab);
 
         triggerOldTabTimer.current = setTimeout(() => {
-            triggerOldTab(selectedTab);
+            triggerOldTab(selected_tab);
         }, 100);
-    }, [selectedTab, savedTab]);
+    }, [selected_tab, saved_tab]);
 
     useEffect(() => () => {
         clearTimeout(triggerOldTabTimer.current);
@@ -76,20 +76,20 @@ const BottomTabs = () => {
         <>
             <div className='quill-container-centered'>
                 <SegmentedControlSingleChoice
-                    options={bottomTabOptions}
-                    selectedItemIndex={selectedTab}
+                    options={bottom_tab_options}
+                    selectedItemIndex={selected_tab}
                     onChange={handleChange}
                 />
             </div>
             <div className='bottom-content-section'>
-                {selectedTab === 0 && <Graph
+                {selected_tab === 0 && <Graph
                     onUnload={() => setIsShowGraph(false)}
                     onLoad={() => setIsShowGraph(true)}
                 />}
-                {selectedTab === 1 && <Explanation />}
-                {selectedTab === 2 && hasLastDigit && <LastDigit />}
+                {selected_tab === 1 && <Explanation />}
+                {selected_tab === 2 && has_last_digit && <LastDigit />}
 
-                <div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'grap-hide'}`}>
+                <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'grap-hide'}`}>
                     <p className='error-msg' id='chart-error' />
                     <div id='trade_live_chart'>
                         <div id='webtrader_chart' />

src/javascript/app/pages/form/form-component.jsx

@@ -30,17 +30,17 @@ import { isCryptocurrency } from '../../../_common/base/currency_base.js';
 export const FormComponent = () => {
     const [tradeData, setTradeData] = useState({});
 
-    const hasTradeChange = useTradeChange();
-    const hasMarketChange = useMarketChange();
-    const hasContractChange = useContractChange();
-    const hasSessionChange = useSessionChange();
+    const has_trade_change = useTradeChange();
+    const has_market_change = useMarketChange();
+    const has_contract_change = useContractChange();
+    const has_session_change = useSessionChange();
 
     useEffect(() => {
         setTradeData((oldData) => ({
             ...oldData,
             ...dataManager.getAllTrades(),
         }));
-    }, [hasMarketChange, hasContractChange, hasTradeChange, hasSessionChange]);
+    }, [has_market_change, has_contract_change, has_trade_change, has_session_change]);
 
     const form_name = Defaults.get(PARAM_NAMES.FORM_NAME);
     const expiry_type = Defaults.get(PARAM_NAMES.EXPIRY_TYPE);

src/javascript/app/pages/loader.jsx

@@ -36,7 +36,7 @@ const pageTypes = [
 ];
 
 const Loader = () => {
-    const hasContractChange  = useContractChange();
+    const has_contract_change  = useContractChange();
 
     const [loading, setLoading] = useState(true);
 
@@ -51,7 +51,7 @@ const Loader = () => {
             setLoading(false);
         }
 
-    }, [hasContractChange]);
+    }, [has_contract_change]);
 
     useEffect(() => {
         const handleLoad = () => {

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

@@ -52,10 +52,10 @@ const commonTrading = (() => {
 
         if (!contracts_element) {
             dataManager.setContract({
-                contractsTree  : contracts_tree,
-                contracts      : all_contracts,
-                formName       : selected || Defaults.get('formname'),
-                contractElement: getElementById('contract'),
+                contractsTree   : contracts_tree,
+                contracts       : all_contracts,
+                form_name       : selected || Defaults.get('formname'),
+                contract_element: getElementById('contract'),
             });
         } else { // Update the component.
             contracts_element.updater.enqueueSetState(contracts_element, {
@@ -158,7 +158,7 @@ const commonTrading = (() => {
         showHideOverlay('contracts_list', 'flex');
         $('.purchase_button').text(localize('Purchase'));
         dataManager.setPurchase({
-            showPurchaseResults: false,
+            show_purchase_results: false,
         });
     };
 
@@ -254,7 +254,7 @@ const commonTrading = (() => {
                 node.show();
                 elementInnerHtml(node, comment);
                 dataManager.setPurchase({
-                    [`${position}Comment`]: comment,
+                    [`${position}_comment`]: comment,
                 });
             }
         }
@@ -476,13 +476,13 @@ const commonTrading = (() => {
         showPriceOverlay: () => {
             showHideOverlay('loading_container2', 'block');
             dataManager.setPurchase({
-                isPurchaseFormDisabled: true,
+                is_purchase_form_disabled: true,
             });
         },
         hidePriceOverlay: () => {
             showHideOverlay('loading_container2', 'none');
             dataManager.setPurchase({
-                isPurchaseFormDisabled: false,
+                is_purchase_form_disabled: false,
             });
         },
         hideFormOverlay: () => { showHideOverlay('loading_container3', 'none'); },

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

@@ -6,30 +6,30 @@ import Defaults, { PARAM_NAMES } from '../defaults';
 
 export const ContractDropdown = () => {
     const { close } = useDropdown();
-    const hasContractChange  = useContractChange();
+    const has_contract_change  = useContractChange();
     const [data, setData] = useState(dataManager.getAllContracts());
     const selectedRef = useRef(null);
     const containerRef = useRef(null);
     const closeDropdownTimer = useRef();
 
-    const onContractClick = (formName) => {
-        if (formName === data?.formName) {
+    const onContractClick = (form_name) => {
+        if (form_name === data?.form_name) {
             close();
             return;
         }
 
-        const contractElement = data?.contractElement;
+        const contract_element = data?.contract_element;
 
-        if (contractElement) {
+        if (contract_element) {
             const event = new Event('change');
-            contractElement.value = formName;
-            contractElement.dispatchEvent(event);
+            contract_element.value = form_name;
+            contract_element.dispatchEvent(event);
         }
 
-        Defaults.set(PARAM_NAMES.FORM_NAME, formName);
+        Defaults.set(PARAM_NAMES.FORM_NAME, form_name);
 
         dataManager.setContract({
-            formName,
+            form_name,
         });
 
         triggerContractChange();
@@ -46,7 +46,7 @@ export const ContractDropdown = () => {
             ...oldData,
             ...dataManager.getAllContracts(),
         }));
-    }, [hasContractChange]);
+    }, [has_contract_change]);
 
     useEffect(() => {
         if (selectedRef.current && containerRef.current) {
@@ -75,10 +75,10 @@ export const ContractDropdown = () => {
                                         key={i}
                                         onClick={() => onContractClick(subtype)}
                                         label={data?.contracts[subtype]}
-                                        selected={subtype === data?.formName}
+                                        selected={subtype === data?.form_name}
                                         size='md'
                                         className='trade-item-selected'
-                                        ref={subtype === data?.formName ? selectedRef : null}
+                                        ref={subtype === data?.form_name ? selectedRef : null}
                                     />
                                 )
                                 )}
@@ -93,10 +93,10 @@ export const ContractDropdown = () => {
                             <DropdownItem
                                 onClick={() => onContractClick(contract)}
                                 label={data?.contracts[contract]}
-                                selected={contract === data?.formName}
+                                selected={contract === data?.form_name}
                                 size='md'
                                 className='contract-item-clickables'
-                                ref={contract === data?.formName ? selectedRef : null}
+                                ref={contract === data?.form_name ? selectedRef : null}
                             />
                             <Divider />
                         </React.Fragment>