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

Merge branch 'main' into chore/update-develop-with-mainnet-fixes

Browse Source
This commit is contained in:
Matthew Russell 2023-09-26 15:06:07 -04:00
commit 60d7cf3029
No known key found for this signature in database
11 changed files with 161 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/trading/components/header/header.tsx
View File

@ -53,7 +53,7 @@ export const HeaderStat = ({
<div data-testid="item-header" id={id}>
{heading}
</div>
<Tooltip description={description}>
<Tooltip description={description} underline>
<div
data-testid="item-value"
aria-labelledby={id}

6
apps/trading/pages/styles.css
View File

@ -110,8 +110,8 @@ html [data-theme='light'] {
--pennant-color-depth-sell-fill: theme(colors.market.red.DEFAULT);
--pennant-color-depth-sell-stroke: theme(colors.market.red.650);
--pennant-color-volume-buy: theme(colors.market.green.300);
--pennant-color-volume-sell: theme(colors.market.red.300);
--pennant-color-volume-buy: theme(colors.market.green.DEFAULT);
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
}
html [data-theme='dark'] {
@ -132,7 +132,7 @@ html [data-theme='dark'] {
--pennant-color-depth-sell-stroke: theme(colors.market.red.DEFAULT);
--pennant-color-volume-buy: theme(colors.market.green.600);
--pennant-color-volume-sell: theme(colors.market.red.650);
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
}
/**

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

@ -12,6 +12,7 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
import { marketMarginDataProvider } from '@vegaprotocol/accounts';
import { useDataProvider } from '@vegaprotocol/data-provider';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import * as Schema from '@vegaprotocol/types';
import {
MARGIN_DIFF_TOOLTIP_TEXT,
@ -37,14 +38,16 @@ export interface DealTicketFeeDetailsProps {
assetSymbol: string;
order: OrderSubmissionBody['orderSubmission'];
market: Market;
isMarketInAuction?: boolean;
}
export const DealTicketFeeDetails = ({
assetSymbol,
order,
market,
isMarketInAuction,
}: DealTicketFeeDetailsProps) => {
const feeEstimate = useEstimateFees(order);
const feeEstimate = useEstimateFees(order, isMarketInAuction);
const asset = getAsset(market);
const { decimals: assetDecimals, quantum } = asset;
@ -63,7 +66,7 @@ export const DealTicketFeeDetails = ({
<>
<span>
{t(
`An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
`An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}. Fees estimated are "taker" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.`
)}
</span>
<FeesBreakdown
@ -86,6 +89,7 @@ export interface DealTicketMarginDetailsProps {
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
assetSymbol: string;
positionEstimate: EstimatePositionQuery['estimatePosition'];
side: Schema.Side;
}
export const DealTicketMarginDetails = ({
@ -95,6 +99,7 @@ export const DealTicketMarginDetails = ({
market,
onMarketClick,
positionEstimate,
side,
}: DealTicketMarginDetailsProps) => {
const [breakdownDialog, setBreakdownDialog] = useState(false);
const { pubKey: partyId } = useVegaWallet();
@ -163,10 +168,7 @@ export const DealTicketMarginDetails = ({
: '0',
assetDecimals
)}
formattedValue={formatRange(
deductionFromCollateralBestCase > 0
? deductionFromCollateralBestCase.toString()
: '0',
formattedValue={formatValue(
deductionFromCollateralWorstCase > 0
? deductionFromCollateralWorstCase.toString()
: '0',
@ -185,8 +187,7 @@ export const DealTicketMarginDetails = ({
marginEstimate?.worstCase.initialLevel,
assetDecimals
)}
formattedValue={formatRange(
marginEstimate?.bestCase.initialLevel,
formattedValue={formatValue(
marginEstimate?.worstCase.initialLevel,
assetDecimals,
quantum
@ -198,6 +199,7 @@ export const DealTicketMarginDetails = ({
}
let liquidationPriceEstimate = emptyValue;
let liquidationPriceEstimateRange = emptyValue;
if (liquidationEstimate) {
const liquidationEstimateBestCaseIncludingBuyOrders = BigInt(
@ -207,8 +209,7 @@ export const DealTicketMarginDetails = ({
liquidationEstimate.bestCase.including_sell_orders.replace(/\..*/, '')
);
const liquidationEstimateBestCase =
liquidationEstimateBestCaseIncludingBuyOrders >
liquidationEstimateBestCaseIncludingSellOrders
side === Schema.Side.SIDE_BUY
? liquidationEstimateBestCaseIncludingBuyOrders
: liquidationEstimateBestCaseIncludingSellOrders;
@ -219,14 +220,19 @@ export const DealTicketMarginDetails = ({
liquidationEstimate.worstCase.including_sell_orders.replace(/\..*/, '')
);
const liquidationEstimateWorstCase =
liquidationEstimateWorstCaseIncludingBuyOrders >
liquidationEstimateWorstCaseIncludingSellOrders
side === Schema.Side.SIDE_BUY
? liquidationEstimateWorstCaseIncludingBuyOrders
: liquidationEstimateWorstCaseIncludingSellOrders;
// The estimate order query API gives us the liquidation price in formatted by asset decimals.
// We need to calculate it with asset decimals, but display it with market decimals precision until the API changes.
liquidationPriceEstimate = formatRange(
liquidationPriceEstimate = formatValue(
liquidationEstimateWorstCase.toString(),
assetDecimals,
undefined,
market.decimalPlaces
);
liquidationPriceEstimateRange = formatRange(
(liquidationEstimateBestCase < liquidationEstimateWorstCase
? liquidationEstimateBestCase
: liquidationEstimateWorstCase
@ -249,7 +255,7 @@ export const DealTicketMarginDetails = ({
const quoteName = getQuoteName(market);
return (
<div className="flex flex-col gap-2 w-full">
<div className="flex flex-col w-full gap-2">
<Accordion>
<AccordionPanel
itemId="margin"
@ -265,7 +271,7 @@ export const DealTicketMarginDetails = ({
<div
data-testid={`deal-ticket-fee-margin-required`}
key={'value-dropdown'}
className="flex items-center gap-2 justify-between w-full"
className="flex items-center justify-between w-full gap-2"
>
<div className="flex items-center gap-1">
<Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
@ -282,11 +288,9 @@ export const DealTicketMarginDetails = ({
assetDecimals
) ?? '-'
}
noUnderline
>
<div className="font-mono text-right">
{formatRange(
marginRequiredBestCase,
{formatValue(
marginRequiredWorstCase,
assetDecimals,
quantum
@ -298,7 +302,7 @@ export const DealTicketMarginDetails = ({
</AccordionPrimitive.Trigger>
}
>
<div className="flex flex-col gap-2 w-full">
<div className="flex flex-col w-full gap-2">
<KeyValue
label={t('Total margin available')}
indent
@ -344,7 +348,7 @@ export const DealTicketMarginDetails = ({
{projectedMargin}
<KeyValue
label={t('Liquidation')}
value={liquidationPriceEstimate}
value={liquidationPriceEstimateRange}
formattedValue={liquidationPriceEstimate}
symbol={quoteName}
labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}

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

@ -36,7 +36,12 @@ import {
formatValue,
} from '@vegaprotocol/utils';
import { activeOrdersProvider } from '@vegaprotocol/orders';
import { getAsset, getDerivedPrice, getQuoteName } from '@vegaprotocol/markets';
import {
getAsset,
getDerivedPrice,
getQuoteName,
isMarketInAuction,
} from '@vegaprotocol/markets';
import {
validateExpiration,
validateMarketState,
@ -182,6 +187,7 @@ export const DealTicket = ({
const iceberg = watch('iceberg');
const peakSize = watch('peakSize');
const expiresAt = watch('expiresAt');
const postOnly = watch('postOnly');
useEffect(() => {
const size = storedFormValues?.[dealTicketType]?.size;
@ -198,7 +204,7 @@ export const DealTicket = ({
}, [storedFormValues, dealTicketType, rawPrice, setValue]);
useEffect(() => {
const subscription = watch((value, { name, type }) => {
const subscription = watch((value) => {
updateStoredFormValues(market.id, value);
});
return () => subscription.unsubscribe();
@ -211,6 +217,7 @@ export const DealTicket = ({
size: rawSize,
timeInForce,
type,
postOnly,
},
market.id,
market.decimalPlaces,
@ -219,8 +226,7 @@ export const DealTicket = ({
const price =
normalizedOrder &&
marketPrice &&
getDerivedPrice(normalizedOrder, marketPrice);
getDerivedPrice(normalizedOrder, marketPrice ?? undefined);
const notionalSize = getNotionalSize(
price,
@ -459,7 +465,7 @@ export const DealTicket = ({
)}
/>
)}
<div className="mb-4 flex flex-col gap-2 w-full">
<div className="flex flex-col w-full mb-4 gap-2">
<KeyValue
label={t('Notional')}
value={formatValue(notionalSize, market.decimalPlaces)}
@ -473,6 +479,7 @@ export const DealTicket = ({
}
assetSymbol={assetSymbol}
market={market}
isMarketInAuction={isMarketInAuction(marketData.marketTradingMode)}
/>
</div>
<Controller
@ -675,6 +682,7 @@ export const DealTicket = ({
)}
</Button>
<DealTicketMarginDetails
side={normalizedOrder.side}
onMarketClick={onMarketClick}
assetSymbol={asset.symbol}
marginAccountBalance={marginAccountBalance}

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

@ -47,7 +47,7 @@ export const KeyValue = ({
<Tooltip description={labelDescription}>
<div className="text-muted">{label}</div>
</Tooltip>
<Tooltip description={`${value ?? '-'} ${symbol || ''}`} noUnderline>
<Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
{valueElement}
</Tooltip>
</div>

78
libs/deal-ticket/src/hooks/use-estimate-fees.spec.tsx Normal file
View File

@ -0,0 +1,78 @@
import { renderHook } from '@testing-library/react';
import { useEstimateFees } from './use-estimate-fees';
import { Side, OrderTimeInForce, OrderType } from '@vegaprotocol/types';
import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
const data: EstimateFeesQuery = {
estimateFees: {
totalFeeAmount: '12',
fees: {
infrastructureFee: '2',
liquidityFee: '4',
makerFee: '6',
},
},
};
const mockUseEstimateFeesQuery = jest.fn((...args) => ({
data,
}));
jest.mock('./__generated__/EstimateOrder', () => ({
...jest.requireActual('@vegaprotocol/data-provider'),
useEstimateFeesQuery: jest.fn((...args) => mockUseEstimateFeesQuery(...args)),
}));
jest.mock('@vegaprotocol/wallet', () => ({
useVegaWallet: () => ({ pubKey: 'pubKey' }),
}));
describe('useEstimateFees', () => {
it('returns 0 as estimated values if order is postOnly', () => {
const { result } = renderHook(() =>
useEstimateFees({
marketId: 'marketId',
side: Side.SIDE_BUY,
size: '1',
price: '1',
timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
type: OrderType.TYPE_LIMIT,
postOnly: true,
})
);
expect(result.current).toEqual({
totalFeeAmount: '0',
fees: {
infrastructureFee: '0',
liquidityFee: '0',
makerFee: '0',
},
});
expect(mockUseEstimateFeesQuery.mock.lastCall?.[0].skip).toBeTruthy();
});
it('divide values by 2 if market is in auction', () => {
const { result } = renderHook(() =>
useEstimateFees(
{
marketId: 'marketId',
side: Side.SIDE_BUY,
size: '1',
price: '1',
timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
type: OrderType.TYPE_LIMIT,
},
true
)
);
expect(result.current).toEqual({
totalFeeAmount: '6',
fees: {
infrastructureFee: '1',
liquidityFee: '2',
makerFee: '3',
},
});
});
});

36
libs/deal-ticket/src/hooks/use-estimate-fees.tsx
View File

@ -1,13 +1,16 @@
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
import type { EstimateFeesQuery } from './__generated__/EstimateOrder';
import { useEstimateFeesQuery } from './__generated__/EstimateOrder';
export const useEstimateFees = (
order?: OrderSubmissionBody['orderSubmission']
) => {
const { pubKey } = useVegaWallet();
const divideByTwo = (n: string) => (BigInt(n) / BigInt(2)).toString();
export const useEstimateFees = (
order?: OrderSubmissionBody['orderSubmission'],
isMarketInAuction?: boolean
): EstimateFeesQuery['estimateFees'] | undefined => {
const { pubKey } = useVegaWallet();
const { data } = useEstimateFeesQuery({
variables: order && {
marketId: order.marketId,
@ -19,7 +22,28 @@ export const useEstimateFees = (
type: order.type,
},
fetchPolicy: 'no-cache',
skip: !pubKey || !order?.size || !order?.price,
skip: !pubKey || !order?.size || !order?.price || order.postOnly,
});
return data?.estimateFees;
if (order?.postOnly) {
return {
totalFeeAmount: '0',
fees: {
infrastructureFee: '0',
liquidityFee: '0',
makerFee: '0',
},
};
}
return isMarketInAuction && data?.estimateFees
? {
totalFeeAmount: divideByTwo(data.estimateFees.totalFeeAmount),
fees: {
infrastructureFee: divideByTwo(
data.estimateFees.fees.infrastructureFee
),
liquidityFee: divideByTwo(data.estimateFees.fees.liquidityFee),
makerFee: divideByTwo(data.estimateFees.fees.makerFee),
},
}
: data?.estimateFees;
};

2
libs/market-depth/src/lib/orderbook.tsx
View File

@ -175,7 +175,7 @@ export const Orderbook = ({
);
return (
<div className="h-full text-xs grid grid-rows-[1fr_min-content]">
<div className="h-full text-xs grid grid-rows-[1fr_min-content] overflow-hidden">
<div>
<ReactVirtualizedAutoSizer>
{({ width, height }) => {

1
libs/markets/src/lib/components/fees-breakdown/fees-breakdown.tsx
View File

@ -60,6 +60,7 @@ export const FeesBreakdown = ({
.plus(fees.infrastructureFee)
.plus(fees.liquidityFee)
.toString();
if (totalFees === '0') return null;
const formatValue = (value: string | number | null | undefined): string => {
return value && !isNaN(Number(value))
? addDecimalsFormatNumber(value, decimals)

2
libs/markets/src/lib/get-price.ts
View File

@ -33,7 +33,7 @@ export const getDerivedPrice = (
type: Schema.OrderType;
price?: string | undefined;
},
marketPrice: string
marketPrice?: string
) => {
// If order type is market we should use either the mark price
// or the uncrossing price. If order type is limit use the price

16
libs/ui-toolkit/src/components/tooltip/tooltip.tsx
View File

@ -19,14 +19,14 @@ export interface TooltipProps {
align?: 'start' | 'center' | 'end';
side?: 'top' | 'right' | 'bottom' | 'left';
sideOffset?: number;
noUnderline?: boolean;
underline?: boolean;
}
export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) =>
classNames(
{ 'underline underline-offset-2': !noUnderline },
'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'
);
export const TOOLTIP_TRIGGER_CLASS_NAME = (underline?: boolean) =>
classNames({
'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed':
underline,
});
// Conditionally rendered tooltip if description content is provided.
export const Tooltip = ({
@ -36,12 +36,12 @@ export const Tooltip = ({
sideOffset,
align = 'start',
side = 'bottom',
noUnderline,
underline,
}: TooltipProps) =>
description ? (
<Provider delayDuration={200} skipDelayDuration={100}>
<Root open={open}>
<Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(noUnderline)}>
<Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}>
{children}
</Trigger>
{description && (