feat(deal-ticket): make margin values section expandable (#4664)
This commit is contained in:
parent
d268088e60
commit
467ed5d53d
@ -24,6 +24,9 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
|
||||
|
||||
beforeEach(() => {
|
||||
cy.mockTradingPage();
|
||||
cy.getByTestId('deal-ticket-fee-margin-required').within(() => {
|
||||
cy.get('button').click();
|
||||
});
|
||||
});
|
||||
|
||||
describe('limit order', () => {
|
||||
|
@ -12,6 +12,8 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
|
||||
import { marketMarginDataProvider } from '@vegaprotocol/accounts';
|
||||
import { useDataProvider } from '@vegaprotocol/data-provider';
|
||||
|
||||
import * as Accordion from '@radix-ui/react-accordion';
|
||||
|
||||
import {
|
||||
MARGIN_DIFF_TOOLTIP_TEXT,
|
||||
DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
|
||||
@ -22,6 +24,7 @@ import {
|
||||
} from '../../constants';
|
||||
import { useEstimateFees } from '../../hooks';
|
||||
import { KeyValue } from './key-value';
|
||||
import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit';
|
||||
|
||||
const emptyValue = '-';
|
||||
|
||||
@ -244,8 +247,15 @@ export const DealTicketMarginDetails = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Accordion.Root type="single" collapsible>
|
||||
<Accordion.Item value="margin">
|
||||
<KeyValue
|
||||
label={t('Margin required')}
|
||||
id="margin-required"
|
||||
label={
|
||||
<Accordion.Trigger className={TOOLTIP_TRIGGER_CLASS_NAME}>
|
||||
{t('Margin required')}
|
||||
</Accordion.Trigger>
|
||||
}
|
||||
value={formatRange(
|
||||
marginRequiredBestCase,
|
||||
marginRequiredWorstCase,
|
||||
@ -260,6 +270,7 @@ export const DealTicketMarginDetails = ({
|
||||
labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
|
||||
symbol={assetSymbol}
|
||||
/>
|
||||
<Accordion.Content>
|
||||
<KeyValue
|
||||
label={t('Total margin available')}
|
||||
indent
|
||||
@ -273,7 +284,11 @@ export const DealTicketMarginDetails = ({
|
||||
labelDescription={TOTAL_MARGIN_AVAILABLE(
|
||||
formatValue(generalAccountBalance, assetDecimals, quantum),
|
||||
formatValue(marginAccountBalance, assetDecimals, quantum),
|
||||
formatValue(currentMargins?.maintenanceLevel, assetDecimals, quantum),
|
||||
formatValue(
|
||||
currentMargins?.maintenanceLevel,
|
||||
assetDecimals,
|
||||
quantum
|
||||
),
|
||||
assetSymbol
|
||||
)}
|
||||
/>
|
||||
@ -282,7 +297,9 @@ export const DealTicketMarginDetails = ({
|
||||
label={t('Current margin allocation')}
|
||||
indent
|
||||
onClick={
|
||||
generalAccountBalance ? () => setBreakdownDialog(true) : undefined
|
||||
generalAccountBalance
|
||||
? () => setBreakdownDialog(true)
|
||||
: undefined
|
||||
}
|
||||
value={formatValue(marginAccountBalance, assetDecimals)}
|
||||
symbol={assetSymbol}
|
||||
@ -293,6 +310,9 @@ export const DealTicketMarginDetails = ({
|
||||
quantum
|
||||
)}
|
||||
/>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
{projectedMargin}
|
||||
<KeyValue
|
||||
label={t('Liquidation price estimate')}
|
||||
|
@ -3,7 +3,8 @@ import classnames from 'classnames';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface KeyValuePros {
|
||||
label: string;
|
||||
id?: string;
|
||||
label: ReactNode;
|
||||
value?: string | null | undefined;
|
||||
symbol: string;
|
||||
indent?: boolean | undefined;
|
||||
@ -13,6 +14,7 @@ export interface KeyValuePros {
|
||||
}
|
||||
|
||||
export const KeyValue = ({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
labelDescription,
|
||||
@ -31,9 +33,11 @@ export const KeyValue = ({
|
||||
);
|
||||
return (
|
||||
<div
|
||||
data-testid={
|
||||
'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
|
||||
}
|
||||
data-testid={`deal-ticket-fee-${
|
||||
!id && typeof label === 'string'
|
||||
? label.toLocaleLowerCase().replace(/\s/g, '-')
|
||||
: id
|
||||
}`}
|
||||
key={typeof label === 'string' ? label : 'value-dropdown'}
|
||||
className={classnames(
|
||||
'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
|
||||
|
@ -20,6 +20,9 @@ export interface TooltipProps {
|
||||
sideOffset?: number;
|
||||
}
|
||||
|
||||
export const TOOLTIP_TRIGGER_CLASS_NAME =
|
||||
'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed';
|
||||
|
||||
// Conditionally rendered tooltip if description content is provided.
|
||||
export const Tooltip = ({
|
||||
children,
|
||||
@ -32,10 +35,7 @@ export const Tooltip = ({
|
||||
description ? (
|
||||
<Provider delayDuration={200} skipDelayDuration={100}>
|
||||
<Root open={open}>
|
||||
<Trigger
|
||||
asChild
|
||||
className="underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed"
|
||||
>
|
||||
<Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME}>
|
||||
{children}
|
||||
</Trigger>
|
||||
{description && (
|
||||
|
Loading…
Reference in New Issue
Block a user