LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(trading): align deal ticket checkboxes (#6082)

Browse Source
This commit is contained in:
m.ray 2024-03-22 18:54:45 +02:00 committed by GitHub
parent aed45e419d
commit f13307aa77
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 116 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
View File

@ -662,44 +662,31 @@ export const DealTicket = ({
)} )}
/> />
)} )}
<div className="flex justify-between gap-2 pb-2">
<Controller <div className="grid grid-cols-2 gap-2 pb-2">
name="postOnly" {featureFlags.TAKE_PROFIT_STOP_LOSS && (
control={control} <Controller
render={({ field }) => ( name="tpSl"
<Tooltip control={control}
description={ render={({ field }) => (
<> <Tooltip
<span> description={
{disablePostOnlyCheckbox <p>{t('TP_SL_TOOLTIP', 'Take profit / Stop loss')}</p>
? t( }
'"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.' >
) <div>
: t( <Checkbox
'"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.' name="tpSl"
)} checked={field.value}
</span>{' '} onCheckedChange={field.onChange}
<ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}> disabled={false}
{t('Find out more')} label={t('TP / SL')}
</ExternalLink> />
</> </div>
} </Tooltip>
> )}
<div> />
<Checkbox )}
name="post-only"
checked={!disablePostOnlyCheckbox && field.value}
disabled={disablePostOnlyCheckbox}
onCheckedChange={(postOnly) => {
field.onChange(postOnly);
setValue('reduceOnly', false);
}}
label={t('Post only')}
/>
</div>
</Tooltip>
)}
/>
<Controller <Controller
name="reduceOnly" name="reduceOnly"
control={control} control={control}
@ -736,85 +723,99 @@ export const DealTicket = ({
)} )}
/> />
</div> </div>
{
<> {isLimitType && (
<div className="flex justify-between gap-2 pb-2"> <div className="grid grid-cols-2 gap-2 pb-2">
{isLimitType && ( <Controller
<Controller name="iceberg"
name="iceberg" control={control}
control={control} render={({ field }) => (
render={({ field }) => ( <Tooltip
<Tooltip description={
description={ <p>
<p> {t(
{t( 'ICEBERG_TOOLTIP',
'ICEBERG_TOOLTIP', 'Trade only a fraction of the order size at once. After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away. For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each. Note that the full volume of the order is not hidden and is still reflected in the order book.'
'Trade only a fraction of the order size at once. After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away. For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each. Note that the full volume of the order is not hidden and is still reflected in the order book.' )}{' '}
)}{' '} <ExternalLink href={DocsLinks?.ICEBERG_ORDERS}>
<ExternalLink href={DocsLinks?.ICEBERG_ORDERS}> {t('Find out more')}
{t('Find out more')} </ExternalLink>{' '}
</ExternalLink>{' '} </p>
</p> }
} >
> <div>
<div> <Checkbox
<Checkbox name="iceberg"
name="iceberg" checked={field.value}
checked={field.value} onCheckedChange={field.onChange}
onCheckedChange={field.onChange} disabled={disableIcebergCheckbox}
disabled={disableIcebergCheckbox} label={t('Iceberg')}
label={t('Iceberg')} />
/> </div>
</div> </Tooltip>
</Tooltip>
)}
/>
)} )}
{featureFlags.TAKE_PROFIT_STOP_LOSS && ( />
<Controller
name="tpSl" <Controller
control={control} name="postOnly"
render={({ field }) => ( control={control}
<Tooltip render={({ field }) => (
description={ <Tooltip
<p>{t('TP_SL_TOOLTIP', 'Take profit / Stop loss')}</p> description={
} <>
> <span>
<div> {disablePostOnlyCheckbox
<Checkbox ? t(
name="tpSl" '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.'
checked={field.value} )
onCheckedChange={field.onChange} : t(
disabled={false} '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.'
label={t('TP / SL')} )}
/> </span>{' '}
</div> <ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
</Tooltip> {t('Find out more')}
)} </ExternalLink>
/> </>
}
>
<div>
<Checkbox
name="post-only"
checked={!disablePostOnlyCheckbox && field.value}
disabled={disablePostOnlyCheckbox}
onCheckedChange={(postOnly) => {
field.onChange(postOnly);
setValue('reduceOnly', false);
}}
label={t('Post only')}
/>
</div>
</Tooltip>
)} )}
</div> />
{isLimitType && iceberg && ( </div>
<DealTicketSizeIceberg )}
market={market}
peakSizeError={errors.peakSize?.message} {isLimitType && iceberg && (
minimumVisibleSizeError={errors.minimumVisibleSize?.message} <DealTicketSizeIceberg
control={control} market={market}
size={rawSize} peakSizeError={errors.peakSize?.message}
peakSize={peakSize} minimumVisibleSizeError={errors.minimumVisibleSize?.message}
/> control={control}
)} size={rawSize}
{featureFlags.TAKE_PROFIT_STOP_LOSS && tpSl && ( peakSize={peakSize}
<DealTicketPriceTakeProfitStopLoss />
market={market} )}
takeProfitError={errors.takeProfit?.message}
stopLossError={errors.stopLoss?.message} {featureFlags.TAKE_PROFIT_STOP_LOSS && tpSl && (
control={control} <DealTicketPriceTakeProfitStopLoss
quoteName={quoteName} market={market}
/> takeProfitError={errors.takeProfit?.message}
)} stopLossError={errors.stopLoss?.message}
</> control={control}
} quoteName={quoteName}
/>
)}
<SummaryMessage <SummaryMessage
error={summaryError} error={summaryError}