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

fix(trading): align checkboxes tp/sl (#6088)

Browse Source
This commit is contained in:
m.ray 2024-03-22 19:21:39 +02:00 committed by GitHub
parent 678ba9c4f7
commit 2efe0a7aa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 108 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -663,7 +663,8 @@ export const DealTicket = ({
/>
)}
<div className="grid grid-cols-2 gap-2 pb-2">
<div className="flex justify-between gap-2 mb-4">
<div className="flex flex-col gap-2">
{featureFlags.TAKE_PROFIT_STOP_LOSS && (
<Controller
name="tpSl"
@ -687,6 +688,41 @@ export const DealTicket = ({
)}
/>
)}
{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>
)}
/>
)}
</div>
<div className="flex flex-col gap-2">
<Controller
name="reduceOnly"
control={control}
@ -722,40 +758,7 @@ export const DealTicket = ({
</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}
@ -793,8 +796,9 @@ export const DealTicket = ({
</Tooltip>
)}
/>
</div>
)}
</div>
</div>
{isLimitType && iceberg && (
<DealTicketSizeIceberg