GRWT-3133 / Kate / [DTrader-V2] Tech Debt: Refactor Stake component [WIP]

[kate-deriv]

Changes:

Stake validation refactoring:
Instead of executing onChange function from trade store (that will change store values and send new proposal with them) when user is typing, we are going to use useDtraderQuery hook without subscription. It will allow us to validate the new values + we can extract more information from response. Because we are not subscribing, the store values won't be changed and we won't form a new proposal request with subscription. That will also allow us to restore original values in case of page reload & clicking on back arrow & closing without saving, so there is no need in stake in v2_params_initial_values. Only when user clicks on 'Save' button we'll call onChange.

Stake error snackbar refactoring:
Refactoring the logic of snackbar executing should include removing it outside of the Stake component.
Current problems:
Each trade param has it's own logic for triggering a snackbar (code duplications)
Because at the same moment we have 2 instances of the same component at the page (e.g. stake big and stake minimized), BOTH of them triggers snackbar. As a result there are a lot of bugs, where same error is shown twice.
Suggested:
To create a component for trade param error snackbar (TradeParamErrorSnackbar) and keep all the logic of triggering/showing the snackbar there. Not in multiple places across all the trade params.
To render this component in top level, in trade.tsx for e.g. In this case, even if we have 2 instances of the same component with the same error, we will have only one snackbar.
To create a hook (useTradeParamError), which will incapsulate the logic of errors checking. We will just pass fields, which it should track (e.g. ['take_profit', 'stop_loss', 'stake']) and get from hook info if this field has error and what is the error text.

Acceptance Criteria

• Add useDtraderQuery hook usage in Stake component (mainly for validation)
• Reduce the usage of onChange function from trade store. It should be called only on 'Save' button click.
• Do not allow user to Save the value before the validation from BE comes
• Removed stake from v2_params_initial_values if possible
• Remove error snackbar logic outside of the Stake component. Create a separate component for trade params snackbar and a helper-hook for data transformation
• Covered changes with tests

Screenshots:

Please provide some screenshots of the change.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Nov 22, 2024 8:15am

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: GRWT-3133 / Kate / [DTrader-V2] Tech Debt: Refactor Stake component [WIP] #17620
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx?qa_server=red.derivws.com&app_id=32920
  • Original: https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx
• App ID: 32920

Click here to copy & paste above information.

- **PR**: [https://github.com/deriv-com/deriv-app/pull/17620](https://github.com/deriv-com/deriv-app/pull/17620)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx?qa_server=red.derivws.com&app_id=32920
    - **Original**: https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx
- **App ID**: `32920`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	37
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx/

[coveralls]

Pull Request Test Coverage Report for Build 11968611107

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 5 of 82 (6.1%) changed or added relevant lines in 4 files are covered.
• 59 unchanged lines in 11 files lost coverage.
• Overall coverage decreased (-0.09%) to 53.807%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/trader/src/AppV2/Components/TradeParameters/Stake/stake_2.tsx	1	6	16.67%
packages/trader/src/AppV2/Components/TradeParameters/Stake/stake-input.tsx	1	73	1.37%

Files with Coverage Reduction	New Missed Lines	%
packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx	1	91.11%
packages/wallets/src/features/cfd/modals/TradingPlatformStatusModal/TradingPlatformStatusModal.tsx	1	50.0%
packages/shared/src/utils/constants/contract.ts	3	81.25%
packages/account/src/Configs/user-profile-validation-config.ts	4	83.02%
packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx	4	12.5%
packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAmountInput/TransferFormAmountInput.tsx	5	92.16%
packages/components/stories/contract-card/statics/contract.js	6	0.0%
packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx	6	15.38%
packages/api-v2/src/hooks/useTradingPlatformStatus.ts	7	7.69%
packages/account/src/Containers/employment-tax-details-container/employment-tax-details-container.tsx	11	67.03%

Totals
Change from base Build 11949842438:	-0.09%
Covered Lines:	32672
Relevant Lines:	56654

---

💛 - Coveralls

[github-actions]

⏳ Generating Lighthouse report...