Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package #43

kate-deriv · 2023-10-20T12:54:52Z

Changes:

TS migration and refactoring of:
--advanced-duration.jsx file
--duration-mobile.jsx file
--duration-toggle.jsx file
--duration-wrapper.jsx file
--duration.jsx file
--expiry-text.jsx file
--index.js file
--simple-duration.jsx file
Screenshot of tests (locally):

Screenshots:

kate-deriv · 2023-10-20T13:04:02Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-toggle.tsx

-                <Icon
-                    icon='IcChevronDown'
-                    className={icon_className}
-                    classNamePath={'advanced-simple-toggle__icon-path'}


In <Icon /> there is no such prop as classNamePath.

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx

kate-deriv · 2023-10-24T06:11:12Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx

@@ -91,7 +133,7 @@ const AdvancedDuration = observer(
                                />
                            )}
                            {advanced_duration_unit === 't' && contract_expiry_type === 'tick' && (
-                                <RangeSlider name='duration' ticks={10} value={duration_t} {...shared_input_props} />


<RangeSlider /> do not have such prop as ticks

kate-deriv · 2023-10-24T06:17:58Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx

@@ -107,7 +149,7 @@ const AdvancedDuration = observer(
                                    classNameInput='trade-container__input'
                                    current_focus={current_focus}
                                    error_messages={validation_errors.duration}
-                                    label={duration_units_list.length === 1 ? duration_units_list[0].text : null}
+                                    label={duration_units_list.length === 1 ? duration_units_list[0].text : undefined}


In <InputField /> label's type is string or undefined

kate-deriv · 2023-10-24T06:25:37Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.tsx

            setDurationTabIdx(index);
            const { value: unit } = duration_units_list[index];
-            setSelectedDuration(unit, duration_values[`${unit}_duration`]);
+            setSelectedDuration(unit, duration_values[`${unit as 't' | 's' | 'm' | 'h' | 'd'}_duration`]);


duration_values keys are t_duration ant etc (line 307), so it's not possible to use something like keyof typeof duration_values

kate-deriv · 2023-10-24T06:28:35Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.tsx

@@ -27,7 +30,6 @@ const DurationWrapper = observer(() => {
        expiry_epoch,
        expiry_time,
        start_date,
-        market_open_times,


Non of the children were using market_open_times

@kate-deriv could this be used in order to trigger the re-render of AdvancedDuration and Duration when this prop gets updated? Please check if the component is still re-rendered properly without it :)

Yep, you are right, I noticed that Expiry text is not updated properly without receiving market_open_times. Should I add some comment that this prop is needed to trigger re-render?

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.tsx

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/simple-duration.tsx

packages/components/src/components/dropdown/dropdown.tsx

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.tsx

maryia-deriv · 2023-10-25T05:37:23Z

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.tsx

@@ -27,7 +30,6 @@ const DurationWrapper = observer(() => {
        expiry_epoch,
        expiry_time,
        start_date,
-        market_open_times,


@kate-deriv could this be used in order to trigger the re-render of AdvancedDuration and Duration when this prop gets updated? Please check if the component is still re-rendered properly without it :)

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.tsx

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/simple-duration.tsx

packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx

maryia-deriv

Great job👍🏻

…ctoring (binary-com#10848) * chore: empty commit * Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package (#43) * refactor: ts of expity text * refactor: ts of duration toggle * refactor: ts of simple duration * fix: types * feat: ts of duration wrapper * refactor: ts of daration * refactor: add ts for advanced duration * refactor: ts of duration mobile * refactor: unit test * refactor: apply suggestions * chore: add fallback for simple duration unit * refactor: apply suggestions * chore: refactor type * refactor: remove code smells * Kate / DTRA-421 / TS migration: Contract + ContractReplay in Trader package (#44) * refactor: ts of contract file * refactor: ts of contract replay * refactor: add more types for contract store * chore: expand type * refactor: apply suggestions * refactor: separate replay chart from contract replay * refactor: add ternary rendering * fix: revert latest changes * refactor: remove code smells * Maryia/DTRA-324/refactor: TS migration of trade.jsx and refactoring (#45) * chore: migrate trade to ts * chore: remove unnecessary line * chore: migrate to ts - test and init-store * chore: remove unused test component * chore: more files to ts * chore: add types to trade * chore: trade-chart to ts * refactor: is_mobile * chore: add types to SmartChartSwitcher * chore: ToolbarWidgetsBeta to ts * fix: a type * fix: ws type * chore: remove unused setting * refactor: alphabetical order * chore: index.js to index.ts * refactor: address comments * chore: remove code smells * chore: change type * refactor: apply suggestions * fix: add missing string * refactor: apply suggestions * chore: add math trunc method * chore: remove extra ui mocked prop --------- Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>

…ce (binary-com#14723) * chore: [UPM-923]/evgeniy/error message for passkey not supported device * fix: read of undefined * chore: added new button text and action for not supported * fix: error variable name * chore: update content in passkey-config (#42) * fix: content for unsupported error * Suisin/solve passkey header issue (#43) * chore: fix header not bold issue * chore: update passkey creation fail content * chore: refactor error content * chore: added comment to remove is_tour_open * chore: remove close icon for error modal * chore: remove close icon for error modal --------- Co-authored-by: Sui Sin <103026762+suisin-deriv@users.noreply.github.com>

…binary-com#16135) * [WALL] george / WALL-4519 / Support XRP Deposits and Withdrawals in Wallets (#42) * refactor(wallets): ♻️ refactor wallets deposit/withdraw visibility * fix(wallets): 🚑 fix playwright tests * feat(wallets): ✨ add UI elements for XRP integration (#43) * feat(wallets): ✨ add UI elements for XRP integration * style: 💄 remove dark background * fix: 🚑 prevent crypto_config call for doughflow providers * fix: hardcode min withdrawal value for xrp * fix: withdrawalCryptoValidator min value * fix: withdrawalCryptoValidators min withdrawal value * fix: get min value from fractional digits --------- Co-authored-by: lubega-deriv <lubega@deriv.com>

kate-deriv added 2 commits October 20, 2023 15:51

refactor: ts of expity text

7bcf826

refactor: ts of duration toggle

446f389

kate-deriv commented Oct 20, 2023

View reviewed changes

kate-deriv added 7 commits October 20, 2023 16:27

refactor: ts of simple duration

cbc1275

fix: types

46ddb20

feat: ts of duration wrapper

aa39568

refactor: ts of daration

bd72c75

refactor: add ts for advanced duration

f6f9195

refactor: ts of duration mobile

7f49b77

refactor: unit test

1c622fa

kate-deriv commented Oct 24, 2023

View reviewed changes

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx Outdated Show resolved Hide resolved

kate-deriv commented Oct 24, 2023

View reviewed changes

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.tsx Outdated Show resolved Hide resolved

kate-deriv commented Oct 24, 2023

View reviewed changes

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.tsx Outdated Show resolved Hide resolved

kate-deriv commented Oct 24, 2023

View reviewed changes

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/simple-duration.tsx Show resolved Hide resolved

maryia-deriv requested changes Oct 25, 2023

View reviewed changes

kate-deriv added 4 commits October 25, 2023 09:41

refactor: apply suggestions

7b1cf40

chore: add fallback for simple duration unit

5a4063e

refactor: apply suggestions

92410f0

chore: refactor type

5d3c4ac

maryia-deriv approved these changes Oct 25, 2023

View reviewed changes

henry-deriv approved these changes Oct 25, 2023

View reviewed changes

kate-deriv merged commit 3c97d7a into kate/DTRA-420/ts_migration_7 Oct 25, 2023
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package #43

Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package #43

kate-deriv commented Oct 20, 2023 •

edited

Loading

kate-deriv Oct 20, 2023

kate-deriv Oct 24, 2023

kate-deriv Oct 24, 2023

kate-deriv Oct 24, 2023

kate-deriv Oct 24, 2023

maryia-deriv Oct 25, 2023

kate-deriv Oct 25, 2023

maryia-deriv Oct 25, 2023

maryia-deriv left a comment

Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package #43

Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package #43

Conversation

kate-deriv commented Oct 20, 2023 • edited Loading

Changes:

Screenshots:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maryia-deriv left a comment

Choose a reason for hiding this comment

kate-deriv commented Oct 20, 2023 •

edited

Loading