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

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

@ -662,7 +662,100 @@ export const DealTicket = ({
)}
/>
)}
<div className="flex justify-between gap-2 pb-2">
<div className="grid grid-cols-2 gap-2 pb-2">
{featureFlags.TAKE_PROFIT_STOP_LOSS && (
<Controller
name="tpSl"
control={control}
render={({ field }) => (
<Tooltip
description={
<p>{t('TP_SL_TOOLTIP', 'Take profit / Stop loss')}</p>
}
>
<div>
<Checkbox
name="tpSl"
checked={field.value}
onCheckedChange={field.onChange}
disabled={false}
label={t('TP / SL')}
/>
</div>
</Tooltip>
)}
/>
)}
<Controller
name="reduceOnly"
control={control}
render={({ field }) => (
<Tooltip
description={
<>
<span>
{disableReduceOnlyCheckbox
? t(
'"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".'
)
: t(REDUCE_ONLY_TOOLTIP)}
</span>{' '}
<ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
{t('Find out more')}
</ExternalLink>
</>
}
>
<div>
<Checkbox
name="reduce-only"
checked={!disableReduceOnlyCheckbox && field.value}
disabled={disableReduceOnlyCheckbox}
onCheckedChange={(reduceOnly) => {
field.onChange(reduceOnly);
setValue('postOnly', false);
}}
label={t('Reduce only')}
/>
</div>
</Tooltip>
)}
/>
</div>
{isLimitType && (
<div className="grid grid-cols-2 gap-2 pb-2">
<Controller
name="iceberg"
control={control}
render={({ field }) => (
<Tooltip
description={
<p>
{t(
'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.'
)}{' '}
<ExternalLink href={DocsLinks?.ICEBERG_ORDERS}>
{t('Find out more')}
</ExternalLink>{' '}
</p>
}
>
<div>
<Checkbox
name="iceberg"
checked={field.value}
onCheckedChange={field.onChange}
disabled={disableIcebergCheckbox}
label={t('Iceberg')}
/>
</div>
</Tooltip>
)}
/>
<Controller
name="postOnly"
control={control}
@ -700,100 +793,9 @@ export const DealTicket = ({
</Tooltip>
)}
/>
<Controller
name="reduceOnly"
control={control}
render={({ field }) => (
<Tooltip
description={
<>
<span>
{disableReduceOnlyCheckbox
? t(
'"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".'
)
: t(REDUCE_ONLY_TOOLTIP)}
</span>{' '}
<ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
{t('Find out more')}
</ExternalLink>
</>
}
>
<div>
<Checkbox
name="reduce-only"
checked={!disableReduceOnlyCheckbox && field.value}
disabled={disableReduceOnlyCheckbox}
onCheckedChange={(reduceOnly) => {
field.onChange(reduceOnly);
setValue('postOnly', false);
}}
label={t('Reduce only')}
/>
</div>
</Tooltip>
)}
/>
</div>
{
<>
<div className="flex justify-between gap-2 pb-2">
{isLimitType && (
<Controller
name="iceberg"
control={control}
render={({ field }) => (
<Tooltip
description={
<p>
{t(
'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.'
)}{' '}
<ExternalLink href={DocsLinks?.ICEBERG_ORDERS}>
{t('Find out more')}
</ExternalLink>{' '}
</p>
}
>
<div>
<Checkbox
name="iceberg"
checked={field.value}
onCheckedChange={field.onChange}
disabled={disableIcebergCheckbox}
label={t('Iceberg')}
/>
</div>
</Tooltip>
)}
/>
)}
{featureFlags.TAKE_PROFIT_STOP_LOSS && (
<Controller
name="tpSl"
control={control}
render={({ field }) => (
<Tooltip
description={
<p>{t('TP_SL_TOOLTIP', 'Take profit / Stop loss')}</p>
}
>
<div>
<Checkbox
name="tpSl"
checked={field.value}
onCheckedChange={field.onChange}
disabled={false}
label={t('TP / SL')}
/>
</div>
</Tooltip>
)}
/>
)}
</div>
{isLimitType && iceberg && (
<DealTicketSizeIceberg
market={market}
@ -804,6 +806,7 @@ export const DealTicket = ({
peakSize={peakSize}
/>
)}
{featureFlags.TAKE_PROFIT_STOP_LOSS && tpSl && (
<DealTicketPriceTakeProfitStopLoss
market={market}
@ -813,8 +816,6 @@ export const DealTicket = ({
quoteName={quoteName}
/>
)}
</>
}
<SummaryMessage
error={summaryError}