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

chore(deal-ticket,markets): dont show margin estimate for perps (#5305)

Browse Source
This commit is contained in:
Matthew Russell 2023-11-17 10:33:24 -08:00 committed by GitHub
parent 2983c6c6ba
commit 4b7338ed94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 119 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
View File

@ -1,6 +1,6 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { getAsset, getQuoteName } from '@vegaprotocol/markets'; import { getAsset, getProductType, getQuoteName } from '@vegaprotocol/markets';
import type { OrderSubmissionBody } from '@vegaprotocol/wallet'; import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
@ -286,99 +286,115 @@ export const DealTicketMarginDetails = ({
); );
const quoteName = getQuoteName(market); const quoteName = getQuoteName(market);
const productType = getProductType(market);
return ( return (
<div className="flex flex-col w-full gap-2"> <div className="flex flex-col w-full gap-2 pt-2">
<Accordion> {/*
<AccordionPanel TODO: remove this conditional check once the following PRs are deployed
itemId="margin" and the estimatePosition query is working for perps
trigger={
<AccordionPrimitive.Trigger
data-testid="accordion-toggle"
className={classNames(
'w-full pt-2',
'flex items-center gap-2 text-xs',
'group'
)}
>
<div
data-testid={`deal-ticket-fee-margin-required`}
key={'value-dropdown'}
className="flex items-center justify-between w-full gap-2"
>
<div className="flex items-center text-left gap-1">
<Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
<span className="text-muted">{t('Margin required')}</span>
</Tooltip>
<AccordionChevron size={10} /> - https://github.com/vegaprotocol/vega/pull/10119
</div> - https://github.com/vegaprotocol/vega/pull/10122
<Tooltip */}
description={ {productType === 'Future' && (
formatRange( <>
marginRequiredBestCase, <Accordion>
marginRequiredWorstCase, <AccordionPanel
assetDecimals itemId="margin"
) ?? '-' trigger={
} <AccordionPrimitive.Trigger
data-testid="accordion-toggle"
className={classNames(
'w-full',
'flex items-center gap-2 text-xs',
'group'
)}
> >
<div className="font-mono text-right"> <div
{formatValue( data-testid={`deal-ticket-fee-margin-required`}
marginRequiredWorstCase, key={'value-dropdown'}
className="flex items-center justify-between w-full gap-2"
>
<div className="flex items-center text-left gap-1">
<Tooltip
description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
>
<span className="text-muted">
{t('Margin required')}
</span>
</Tooltip>
<AccordionChevron size={10} />
</div>
<Tooltip
description={
formatRange(
marginRequiredBestCase,
marginRequiredWorstCase,
assetDecimals
) ?? '-'
}
>
<div className="font-mono text-right">
{formatValue(
marginRequiredWorstCase,
assetDecimals,
quantum
)}{' '}
{assetSymbol || ''}
</div>
</Tooltip>
</div>
</AccordionPrimitive.Trigger>
}
>
<div className="flex flex-col w-full gap-2">
<KeyValue
label={t('Total margin available')}
indent
value={formatValue(totalMarginAvailable, assetDecimals)}
formattedValue={formatValue(
totalMarginAvailable,
assetDecimals,
quantum
)}
symbol={assetSymbol}
labelDescription={TOTAL_MARGIN_AVAILABLE(
formatValue(generalAccountBalance, assetDecimals, quantum),
formatValue(marginAccountBalance, assetDecimals, quantum),
formatValue(
currentMargins?.maintenanceLevel,
assetDecimals, assetDecimals,
quantum quantum
)}{' '} ),
{assetSymbol || ''} assetSymbol
</div> )}
</Tooltip> />
{deductionFromCollateral}
<KeyValue
label={t('Current margin allocation')}
indent
onClick={
generalAccountBalance
? () => setBreakdownDialog(true)
: undefined
}
value={formatValue(marginAccountBalance, assetDecimals)}
symbol={assetSymbol}
labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
formattedValue={formatValue(
marginAccountBalance,
assetDecimals,
quantum
)}
/>
</div> </div>
</AccordionPrimitive.Trigger> </AccordionPanel>
} </Accordion>
> {projectedMargin}
<div className="flex flex-col w-full gap-2"> </>
<KeyValue )}
label={t('Total margin available')}
indent
value={formatValue(totalMarginAvailable, assetDecimals)}
formattedValue={formatValue(
totalMarginAvailable,
assetDecimals,
quantum
)}
symbol={assetSymbol}
labelDescription={TOTAL_MARGIN_AVAILABLE(
formatValue(generalAccountBalance, assetDecimals, quantum),
formatValue(marginAccountBalance, assetDecimals, quantum),
formatValue(
currentMargins?.maintenanceLevel,
assetDecimals,
quantum
),
assetSymbol
)}
/>
{deductionFromCollateral}
<KeyValue
label={t('Current margin allocation')}
indent
onClick={
generalAccountBalance
? () => setBreakdownDialog(true)
: undefined
}
value={formatValue(marginAccountBalance, assetDecimals)}
symbol={assetSymbol}
labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
formattedValue={formatValue(
marginAccountBalance,
assetDecimals,
quantum
)}
/>
</div>
</AccordionPanel>
</Accordion>
{projectedMargin}
<KeyValue <KeyValue
label={t('Liquidation')} label={t('Liquidation')}
value={liquidationPriceEstimateRange} value={liquidationPriceEstimateRange}

16
libs/markets/src/lib/market-utils.ts
View File

@ -28,6 +28,22 @@ export const getAsset = (market: Partial<Market>) => {
throw new Error('Failed to retrieve asset. Invalid product type'); throw new Error('Failed to retrieve asset. Invalid product type');
}; };
export const getProductType = (market: Partial<Market>) => {
if (!market.tradableInstrument?.instrument.product) {
throw new Error(
'Failed to retrieve product type. Invalid tradable instrument'
);
}
const type = market.tradableInstrument.instrument.product.__typename;
if (!type) {
throw new Error('Failed to retrieve asset. Invalid product type');
}
return type;
};
export const getQuoteName = (market: Partial<Market>) => { export const getQuoteName = (market: Partial<Market>) => {
if (!market.tradableInstrument?.instrument.product) { if (!market.tradableInstrument?.instrument.product) {
throw new Error( throw new Error(