From 9760995d27675e3fbb953e2bf42fa2ee1f6ce857 Mon Sep 17 00:00:00 2001
From: kevinw-binary <kevin@regentmarkets.com>
Date: Mon, 19 Jul 2021 15:03:17 +0800
Subject: [PATCH 1/2] show contractsize

---
 src/pages/trader-tools/pip-calculator/_pip-calculator.js   | 2 +-
 src/pages/trader-tools/swap-calculator/_swap-calculator.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/trader-tools/pip-calculator/_pip-calculator.js b/src/pages/trader-tools/pip-calculator/_pip-calculator.js
index 1cad2aa7f5c..c5dcef02126 100644
--- a/src/pages/trader-tools/pip-calculator/_pip-calculator.js
+++ b/src/pages/trader-tools/pip-calculator/_pip-calculator.js
@@ -209,7 +209,7 @@ const PipCalculator = () => {
                                             error={touched.symbol && errors.symbol}
                                             onBlur={handleBlur}
                                             autocomplete="off"
-                                            contractSize={values.contractSize}
+                                            contract_size={values.contractSize}
                                         />
 
                                         <InputGroup>
diff --git a/src/pages/trader-tools/swap-calculator/_swap-calculator.js b/src/pages/trader-tools/swap-calculator/_swap-calculator.js
index 44c576984c1..b679bf2ed7c 100644
--- a/src/pages/trader-tools/swap-calculator/_swap-calculator.js
+++ b/src/pages/trader-tools/swap-calculator/_swap-calculator.js
@@ -516,6 +516,7 @@ const SwapCalculator = () => {
 
                                             <CalculatorBody>
                                                 <Dropdown
+                                                    mb="3.6rem"
                                                     default_option={optionItemDefault}
                                                     option_list={values.optionList}
                                                     label={localize('Symbol')}
@@ -532,7 +533,7 @@ const SwapCalculator = () => {
                                                         )
                                                         setFieldValue('symbol', value)
                                                     }}
-                                                    contractSize={values.contractSize}
+                                                    contract_size={values.contractSize}
                                                     error={touched.symbol && errors.symbol}
                                                     onBlur={handleBlur}
                                                 />

From 8e94469da7e85802c9d2381959071a25a6f70377 Mon Sep 17 00:00:00 2001
From: kevinw-binary <kevin@regentmarkets.com>
Date: Mon, 19 Jul 2021 15:09:29 +0800
Subject: [PATCH 2/2] refactor

---
 src/components/elements/dropdown-search.js         | 11 +++++------
 src/components/elements/dropdown.js                | 14 +++++++-------
 .../margin-calculator/_margin-calculator.js        |  2 +-
 .../trader-tools/pip-calculator/_pip-calculator.js |  2 +-
 .../swap-calculator/_swap-calculator.js            |  4 ++--
 5 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/elements/dropdown-search.js b/src/components/elements/dropdown-search.js
index 6ada3c86c9f..9c9696b1a08 100644
--- a/src/components/elements/dropdown-search.js
+++ b/src/components/elements/dropdown-search.js
@@ -37,7 +37,7 @@ const DropdownInput = styled.input`
 `
 
 const DropdownSearch = ({
-    contract_size,
+    contractSize,
     error,
     has_short_name,
     items,
@@ -48,9 +48,8 @@ const DropdownSearch = ({
 }) => {
     const [input_value, setInputValue] = useState('')
     const [dropdown_items, setDropdownItems] = useState([...items])
-    const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(
-        onChange,
-    )
+    const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] =
+        useDropdown(onChange)
 
     const handleInputChange = (e) => {
         setInputValue(e.target.value)
@@ -116,13 +115,13 @@ const DropdownSearch = ({
                     selected_option={selected_item}
                 />
             </DropdownContainer>
-            <BottomLabel contract_size={contract_size} error={error} />
+            <BottomLabel contractSize={contractSize} error={error} />
         </>
     )
 }
 
 DropdownSearch.propTypes = {
-    contract_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    contractSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     default_item: PropTypes.any,
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     has_short_name: PropTypes.bool,
diff --git a/src/components/elements/dropdown.js b/src/components/elements/dropdown.js
index 584fbdceda1..37194f030fb 100644
--- a/src/components/elements/dropdown.js
+++ b/src/components/elements/dropdown.js
@@ -304,16 +304,16 @@ ItemList.propTypes = {
     selected_option: PropTypes.any,
 }
 
-export const BottomLabel = ({ error, contract_size }) => {
+export const BottomLabel = ({ error, contractSize }) => {
     return (
         <StyledDiv>
             <ErrorMessages lh="1.4" align="left" color="red-1">
                 {error}
             </ErrorMessages>
 
-            {contract_size && (
+            {contractSize && (
                 <ContractSizeWrapper lh="1.4" align="left">
-                    Contract size : {getCommaSeparatedNumber(contract_size)}
+                    Contract size : {getCommaSeparatedNumber(contractSize)}
                 </ContractSizeWrapper>
             )}
         </StyledDiv>
@@ -321,7 +321,7 @@ export const BottomLabel = ({ error, contract_size }) => {
 }
 
 BottomLabel.propTypes = {
-    contract_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    contractSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 }
 
@@ -333,7 +333,7 @@ const Dropdown = ({
     label,
     error,
     selected_option,
-    contract_size,
+    contractSize,
     ...props
 }) => {
     const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility] = useDropdown(onChange)
@@ -374,13 +374,13 @@ const Dropdown = ({
                     selected_option={selected_option}
                 />
             </DropdownContainer>
-            <BottomLabel contract_size={contract_size} error={error} />
+            <BottomLabel contractSize={contractSize} error={error} />
         </>
     )
 }
 
 Dropdown.propTypes = {
-    contract_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    contractSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     default_option: PropTypes.any,
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     has_short_name: PropTypes.bool,
diff --git a/src/pages/trader-tools/margin-calculator/_margin-calculator.js b/src/pages/trader-tools/margin-calculator/_margin-calculator.js
index 3ad2a4a97ed..488a22a37ef 100644
--- a/src/pages/trader-tools/margin-calculator/_margin-calculator.js
+++ b/src/pages/trader-tools/margin-calculator/_margin-calculator.js
@@ -188,7 +188,7 @@ const MarginCalculator = () => {
                                         <DropdownSearch
                                             id="symbol"
                                             key={tab}
-                                            contract_size={values.contractSize}
+                                            contractSize={values.contractSize}
                                             default_item={optionItemDefault}
                                             error={touched.symbol && errors.symbol}
                                             items={values.optionList}
diff --git a/src/pages/trader-tools/pip-calculator/_pip-calculator.js b/src/pages/trader-tools/pip-calculator/_pip-calculator.js
index c5dcef02126..1cad2aa7f5c 100644
--- a/src/pages/trader-tools/pip-calculator/_pip-calculator.js
+++ b/src/pages/trader-tools/pip-calculator/_pip-calculator.js
@@ -209,7 +209,7 @@ const PipCalculator = () => {
                                             error={touched.symbol && errors.symbol}
                                             onBlur={handleBlur}
                                             autocomplete="off"
-                                            contract_size={values.contractSize}
+                                            contractSize={values.contractSize}
                                         />
 
                                         <InputGroup>
diff --git a/src/pages/trader-tools/swap-calculator/_swap-calculator.js b/src/pages/trader-tools/swap-calculator/_swap-calculator.js
index b679bf2ed7c..0d4eaaa1a3c 100644
--- a/src/pages/trader-tools/swap-calculator/_swap-calculator.js
+++ b/src/pages/trader-tools/swap-calculator/_swap-calculator.js
@@ -207,7 +207,7 @@ const SwapCalculator = () => {
                                                         )
                                                         setFieldValue('symbol', value)
                                                     }}
-                                                    contract_size={values.contractSize}
+                                                    contractSize={values.contractSize}
                                                     error={touched.symbol && errors.symbol}
                                                     onBlur={handleBlur}
                                                 />
@@ -533,7 +533,7 @@ const SwapCalculator = () => {
                                                         )
                                                         setFieldValue('symbol', value)
                                                     }}
-                                                    contract_size={values.contractSize}
+                                                    contractSize={values.contractSize}
                                                     error={touched.symbol && errors.symbol}
                                                     onBlur={handleBlur}
                                                 />