Kate/87536/add existing Duration & Amount(Stake) components to Turbos Trade params

[kate-deriv]

Changes:

• Add new TurbosInfo component, which is based on existing MultipliersInfo component. It was necessary to create a new component as MultipliersInfo has too much extra properties, functions and child components (tooltips and etc.). Only for desktop.
• Add Min. stake and Max. stake values to the trade store, but they are temporary hardcoded as we should receive them from BE. Do not forget to clean them up in future!
• Add tabs for ticks and stake for mobile version based in existing component.

What is negotiable:

• In the existing code we have 'header_content' attribute for div tag, but this attribute do not exist in official documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes. It's also not a custom attribute, as all of them should start with 'data-'. Suggestion: we should rename all custom tags according to international agreement (with 'data-' prefix).
  Example of usage:
  <div header_content={getHeaderContent('duration')}>

When you need to add unit test

• If this change disrupt current flow
• If this change is adding new flow

When you need to add integration test

• If components from external libraries are being used to define the flow, e.g. @deriv/components
• If it relies on a very specific set of props with no default behavior for the current component.

Test coverage checklist (for reviewer)

• Ensure utility / function has a test case
• Ensure all the tests are passing

Type of change

• Bug fix
• New feature
• Update feature
• Refactor code
• Translation to code
• Translation to crowdin
• Script configuration
• Improve performance
• Style only
• Dependency update
• Documentation update
• Release

[kate-deriv]

I think it will be possible to reuse min_stake_text for max_stake_text, so I'm going to improve it today

[kate-deriv]

Because the only difference between them is default text and amount

[matin-deriv]

Use rem

[kate-deriv]

No problem, I've just tried to do as in code above, where for width and height % or px were used

[matin-deriv]

You can even move this outside of TurbosInfo to line no.7

[kate-deriv]

I removed function and make it pure, thank you for suggestion

[maryia-deriv]

@matin-deriv @kate-deriv it might not update its translation when it's moved outside and the user is changing the platform language. faced it earlier. please check by adding some existing translated string and switching the language while the component is outside.

[kate-deriv]

We check it up with Maryia, everything works as it should be

[matin-deriv]

Why do you define the variables in the store and give them a default value in the props?
Keep them in one place only to have only a single source or truth.

[kate-deriv]

Because currently we do not get these values from BE, so I hardcoded them in store and also add default value in component just to be sure. When we able to get those values from BE, I'll remove all hard coded parts, but it a good idea to clean up default props values right now

[matin-deriv]

Ok then leave a todo comment to update it once you get the values from BE

[yashim-deriv]

comments

[yashim-deriv]

Suggested change

	const getTextForStake = (amount_of_stake, className, currency, text) => (
	const TextStake = ({ amount_of_stake, className, currency, text }) => (

This should be a component.

[kate-deriv]

I'll rebuild it in component

[yashim-deriv]

Suggested change

	{getTextForStake(min_stake, className, currency, 'Min. stake <0/>')}
	{<TextForStake amount_of_stake={min_stake} className={className} currency={currency} text="Min. stake <0/>" />}

I think it looks better as a component

[yashim-deriv]

Why there's a fallback here? Default fallback should be done on the component for better readability.

[kate-deriv]

I cleaned all the unnecessary props

[yashim-deriv]

Same here. There's already a default value set in the trader-store 🤔 Is this fallback necessary?

[yashim-deriv]

Suggested change

	render={({ value: v, className }) => {
	render={({ value, className }) => {

I think using value is more readable than v ✌🏼

[kate-deriv]

Yes, sorry, it was in original code, I'll remove it

[yashim-deriv]

Suggested change

	margin: 0.4rem 0 -0.7rem;
	margin: 0.4rem 0 -0.7rem;

👀 negative rem? why? can it be solved by using a positive value on opposite side?

[kate-deriv]

I'm sorry, but below there is a trade-params__amount-keypad with margin-top 0.8 rem and I can't change this value as it will affect all trade types on mobile with this keypad (because in all the other trade types keypad will be closure to the top, then it should be)

[yashim-deriv]

Ah i see. LGTM