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

fix(trading): condense deal ticket & market info price range snags (#3012)

Browse Source
This commit is contained in:
m.ray 2023-02-27 13:04:13 -05:00 committed by GitHub
parent a02100b079
commit 4eb6e09bd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 96 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/explorer/src/app/components/markets/market-details.tsx
View File

@ -184,9 +184,8 @@ export const MarketDetails = ({
content: (
<>
<p className="text-xs mb-4">
{`For liquidity orders count towards a commitment they have to be
within either the liquidity or price monitoring bounds (whichever is
tighter).`}
{`For liquidity orders to count towards a commitment, they must be
within the liquidity monitoring bounds.`}
</p>
<p className="text-xs mb-4">
{`The liquidity price range is a ${liquidityPriceRange} difference from the mid

2
libs/assets/src/lib/asset-details-dialog.tsx
View File

@ -98,7 +98,7 @@ export const AssetDetailsDialog = ({
}}
>
{content}
<p className="text-sm mb-4">
<p className="text-sm my-4">
{t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
[assetSymbol]

2
libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
View File

@ -12,7 +12,7 @@ export const DealTicketButton = ({ disabled, variant }: Props) => {
const { pubKey, isReadOnly } = useVegaWallet();
const isDisabled = !pubKey || isReadOnly || disabled;
return (
<div className="mb-4">
<div className="mb-2">
<Button
variant={variant}
fill

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

@ -31,7 +31,7 @@ export const DealTicketFeeDetails = ({
<div>
{details.map(({ label, value, labelDescription, symbol }) => (
<div
key={label}
key={typeof label === 'string' ? label : 'value-dropdown'}
className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap"
>
<div>

2
libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
View File

@ -38,7 +38,7 @@ export const DealTicketLimitAmount = ({
};
return (
<div className="mb-6">
<div className="mb-2">
<div className="flex items-center gap-4">
<div className="flex-1">
<FormGroup

4
libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
View File

@ -29,9 +29,9 @@ export const DealTicketMarketAmount = ({
: undefined;
return (
<div className="mb-6">
<div className="mb-2">
<div className="flex items-end gap-4 mb-2">
<div className="flex-1 text-sm">Size</div>
<div className="flex-1 text-sm">{t('Size')}</div>
<div />
<div className="flex-2 text-sm text-right">
{isMarketInAuction(marketData.marketTradingMode) && (

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

@ -307,7 +307,7 @@ const SummaryMessage = memo(
);
if (isReadOnly) {
return (
<div className="mb-4">
<div className="mb-2">
<InputError testId="dealticket-error-message-summary">
{
'You need to connect your own wallet to start trading on this market'
@ -318,7 +318,7 @@ const SummaryMessage = memo(
}
if (!pubKey) {
return (
<div className="mb-4">
<div className="mb-2">
<Notification
testId={'deal-ticket-connect-wallet'}
intent={Intent.Warning}
@ -343,7 +343,7 @@ const SummaryMessage = memo(
}
if (errorMessage === SummaryValidationType.NoCollateral) {
return (
<div className="mb-4">
<div className="mb-2">
<ZeroBalanceError
asset={market.tradableInstrument.instrument.product.settlementAsset}
onClickCollateral={onClickCollateral}
@ -356,7 +356,7 @@ const SummaryMessage = memo(
// submission render that first
if (errorMessage) {
return (
<div className="mb-4">
<div className="mb-2">
<InputError testId="dealticket-error-message-summary">
{errorMessage}
</InputError>
@ -368,7 +368,7 @@ const SummaryMessage = memo(
// balance render the margin warning, but still allow submission
if (balanceError) {
return (
<div className="mb-4">
<div className="mb-2">
<MarginWarning balance={balance} margin={margin} asset={asset} />;
</div>
);
@ -383,7 +383,7 @@ const SummaryMessage = memo(
].includes(marketData.marketTradingMode)
) {
return (
<div className="mb-4">
<div className="mb-2">
<Notification
intent={Intent.Warning}
testId={'dealticket-warning-auction'}

110
libs/market-info/src/components/market-info/info-market.tsx
View File

@ -145,7 +145,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
}}
decimalPlaces={market.decimalPlaces}
/>
<p className="text-xs">
<p className="text-xs mt-4">
{t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
[assetSymbol, quoteUnit]
@ -249,7 +249,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
/>
<p className="text-xs">
<p className="text-xs mt-4">
{t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
[assetSymbol, quoteUnit]
@ -309,27 +309,40 @@ export const Info = ({ market, onSelect }: InfoProps) => {
),
},
...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
(trigger, i) => ({
title: t(`Price monitoring trigger ${i + 1}`),
content: <MarketInfoTable data={trigger} />,
})
(trigger, i) => {
const bounds = market.data?.priceMonitoringBounds?.[i];
return {
title: t(`Price monitoring bounds ${i + 1}`),
content: (
<div className="text-xs">
<div className="grid grid-cols-2 text-xs mb-4">
<p className="col-span-1">
{t('%s% probability of trading', [
formatNumber(trigger.probability * 100),
])}
</p>
<p className="col-span-1 text-right">
{t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
</p>
</div>
<div className="pl-2 pb-0 text-xs border-l-2">
{bounds && (
<MarketInfoTable
data={{
highestPrice: bounds.maxValidPrice,
lowestPrice: bounds.minValidPrice,
referencePrice: bounds.referencePrice,
}}
decimalPlaces={assetDecimals}
assetSymbol={quoteUnit}
/>
)}
</div>
</div>
),
};
}
),
...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
title: t(`Price monitoring bound ${i + 1}`),
content: (
<>
<MarketInfoTable
data={trigger}
decimalPlaces={market.decimalPlaces}
omits={['referencePrice', '__typename']}
/>
<MarketInfoTable
data={{ referencePrice: trigger.referencePrice }}
decimalPlaces={assetDecimals}
/>
</>
),
})),
{
title: t('Liquidity monitoring parameters'),
content: (
@ -369,37 +382,38 @@ export const Info = ({ market, onSelect }: InfoProps) => {
content: (
<>
<p className="text-xs mb-4">
{`For liquidity orders count towards a commitment they have to be
within either the liquidity or price monitoring bounds (whichever is
tighter).`}
{`For liquidity orders to count towards a commitment, they must be
within the liquidity monitoring bounds.`}
</p>
<p className="text-xs mb-4">
{`The liquidity price range is a ${liquidityPriceRange} difference from the mid
price.`}
</p>
<MarketInfoTable
data={{
liquidityPriceRange: `${liquidityPriceRange} of mid price`,
lowestPrice:
market.data?.midPrice &&
`${addDecimalsFormatNumber(
new BigNumber(1)
.minus(market.lpPriceRange)
.times(market.data.midPrice)
.toString(),
market.decimalPlaces
)} ${quoteUnit}`,
highestPrice:
market.data?.midPrice &&
`${addDecimalsFormatNumber(
new BigNumber(1)
.plus(market.lpPriceRange)
.times(market.data.midPrice)
.toString(),
market.decimalPlaces
)} ${quoteUnit}`,
}}
></MarketInfoTable>
<div className="pl-2 pb-0 text-xs border-l-2">
<MarketInfoTable
data={{
liquidityPriceRange: `${liquidityPriceRange} of mid price`,
lowestPrice:
market.data?.midPrice &&
`${addDecimalsFormatNumber(
new BigNumber(1)
.minus(market.lpPriceRange)
.times(market.data.midPrice)
.toString(),
market.decimalPlaces
)} ${quoteUnit}`,
highestPrice:
market.data?.midPrice &&
`${addDecimalsFormatNumber(
new BigNumber(1)
.plus(market.lpPriceRange)
.times(market.data.midPrice)
.toString(),
market.decimalPlaces
)} ${quoteUnit}`,
}}
></MarketInfoTable>
</div>
</>
),
},

18
libs/react-helpers/src/lib/format/number.spec.tsx
View File

@ -6,6 +6,7 @@ import {
formatNumber,
formatNumberPercentage,
isNumeric,
toDecimal,
toNumberParts,
} from './number';
@ -197,3 +198,20 @@ describe('compactNumber', () => {
}
);
});
describe('toDecimal', () => {
it.each([
{ v: 0, o: '1' },
{ v: 1, o: '0.1' },
{ v: 2, o: '0.01' },
{ v: 3, o: '0.001' },
{ v: 4, o: '0.0001' },
{ v: 5, o: '0.00001' },
{ v: 6, o: '0.000001' },
{ v: 7, o: '0.0000001' },
{ v: 8, o: '0.00000001' },
{ v: 9, o: '0.000000001' },
])('formats with toNumber given number correctly', ({ v, o }) => {
expect(toDecimal(v)).toStrictEqual(o);
});
});

2
libs/ui-toolkit/src/components/form-group/form-group.tsx
View File

@ -20,7 +20,7 @@ export const FormGroup = ({
labelAlign = 'left',
hideLabel = false,
}: FormGroupProps) => {
const wrapperClasses = classNames('relative mb-6', className);
const wrapperClasses = classNames('relative mb-2', className);
const labelClasses = classNames('block mb-2 text-sm', {
'text-right': labelAlign === 'right',
'sr-only': hideLabel,

6
libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx
View File

@ -24,11 +24,7 @@ export const KeyValueTable = ({
return (
<React.Fragment>
{title && <TitleTag className={`text-xl my-2`}>{title}</TitleTag>}
<div
data-testid="key-value-table"
{...rest}
className={classNames('mb-4', className)}
>
<div data-testid="key-value-table" {...rest} className={className}>
<div>
{children &&
React.Children.map(