GRWT-3133 / Kate / [DTrader-V2] Tech Debt: Refactor Stake component [WIP] #17620
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
A production App ID was automatically generated for this PR. (log)
Click here to copy & paste above information. |
|
🚨 Lighthouse report for the changes in this PR:
Lighthouse ran with https://deriv-app-git-fork-kate-deriv-kate-dtra-2396stakerefactor.binary.sx/ |
Pull Request Test Coverage Report for Build 12081873869Warning: 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.
Details
💛 - Coveralls |
| @@ -1,4 +1,5 @@ | |||
| import Stake from './stake'; | |||
|
|
|||
There was a problem hiding this comment.
All this empty lines between imports is a result of running autofix to sort these imports because of eslint
|
|
||
| const [proposal_request_values, setNewValues] = React.useState<TNewValues>({ amount }); // contains information for creating proposal request: stake (amount), payout_per_point for Turbos and barrier_1 for Vanillas | ||
| const [stake_error, setStakeError] = React.useState(''); | ||
| const [fe_stake_error, setFEStakeError] = React.useState(''); |
There was a problem hiding this comment.
stake_error contains API error, fe_stake_error stands for cases when input in empty, user clicks on Save btn and we need to show him hardcoded on FE text
| trade_store, | ||
| trade_type: contract_types[0], | ||
| }); | ||
| const { data: response_1, is_fetching: is_fetching_1 } = useDtraderQuery<Parameters<TOnProposalResponse>[0]>( |
There was a problem hiding this comment.
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 using 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.
| } | ||
| ); | ||
|
|
||
| const proposal_req_2 = getProposalRequestObject({ |
There was a problem hiding this comment.
For Rise/Fall and Digits we need two proposal calls, e.g. one for Call and second for Put. They should be validate independently, because of scenarios, when payout is exceed for Call, but not for Put
| contract_payout: first_contract_payout, | ||
| max_payout, | ||
| error: first_payout_error, | ||
| } = getPayoutInfo(proposal_info[contract_types[0]]); |
There was a problem hiding this comment.
Created getPayoutInfo function for information extraction, you can check it in trade-params-utils.tsx file below. It contains some scary hardcoded stuff, that Maryia did and we will need to get rid of, when API will be updated
| } | ||
|
|
||
| // Edge cases for Vanilla and Turbos | ||
| if (is_vanilla && error?.details?.barrier_choices) { |
There was a problem hiding this comment.
Lines from 141 to 157 was taken from trade-store, where this cases were handled inside of onProposalResponse
| @@ -151,7 +152,7 @@ const useContractsForCompany = () => { | |||
| ? 'euro_atm' | |||
| : (contract.barrier_category as TConfig['barrier_category']); | |||
| config.default_stake = contract.default_stake; | |||
|
|
|||
| if (type === contract_type) setDefaultStake(contract.default_stake); | |||
There was a problem hiding this comment.
default stake for every trade type is coming in contract_for_ API response. Setting the default stake to the trade store for active (selected) trade type after receiving it
| @@ -463,3 +463,27 @@ export const getProposalRequestObject = ({ | |||
|
|
|||
| return request; | |||
| }; | |||
|
|
|||
| export const getPayoutInfo = (proposal_info: ReturnType<typeof getProposalInfo>) => { | |||
There was a problem hiding this comment.
Here we are extracting payout and max payout from proposal. In case if proposal contains error, we do not receive receive this fields. Instead we are extracting payout and max payout from error text with reg exp :(
Need future improvement: ask BE team to add fields in error details.
| @@ -1348,11 +1348,6 @@ export default class TradeStore extends BaseStore { | |||
|
|
|||
| if (has_currency_changed && should_reset_stake) { | |||
| obj_new_values.amount = obj_new_values.amount || getMinPayout(obj_new_values.currency ?? ''); | |||
| if (this.is_dtrader_v2_enabled) | |||
| this.setV2ParamsInitialValues({ | |||
There was a problem hiding this comment.
Removed stake from setV2ParamsInitialValues as now we are not setting new stake values to trade store before user save the results.
| @@ -131,7 +148,10 @@ const Trade = observer(() => { | |||
| )} | |||
| <ServiceErrorSheet /> | |||
| <ClosedMarketMessage /> | |||
| <TradeErrorSnackbar error_fields={['stop_loss', 'take_profit', 'date_start']} should_show_snackbar /> | |||
| <TradeErrorSnackbar | |||
There was a problem hiding this comment.
Removed hardcoded snackbar for Stake, but added stake errors to the array with observables
kate-deriv
requested review from
nijil-deriv,
vinu-deriv and
azmib-developer
as code owners
| second_contract_payout !== new_payout_2 || | ||
| stop_out_value !== new_stop_out || | ||
| max_payout !== new_max_payout | ||
| ) { | ||
| setDisplayedValues({ | ||
| commission: new_commission, | ||
| first_contract_payout: new_payout_1, | ||
| is_first_payout_exceed, |
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.
What was done, short: