import type { AgGridReact } from 'ag-grid-react'; import { addDecimal, addDecimalsFormatNumber, formatNumber, getDateTimeFormat, positiveClassNames, negativeClassNames, t, isNumeric, } from '@vegaprotocol/react-helpers'; import { Side } from '@vegaprotocol/types'; import { AgGridColumn } from 'ag-grid-react'; import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit'; import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { forwardRef } from 'react'; import BigNumber from 'bignumber.js'; import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react'; import type { Trade } from './fills-data-provider'; export type Props = (AgGridReactProps | AgReactUiProps) & { partyId: string; }; export const FillsTable = forwardRef( ({ partyId, ...props }, ref) => { return ( data?.id} {...props} > { const partySide = getPartySide(data, partyId); return partySide === 'buyer'; }, [negativeClassNames]: ({ data }: { data: Trade }) => { const partySide = getPartySide(data, partyId); return partySide === 'seller'; }, }} valueFormatter={formatSize(partyId)} /> ) => { return value ? getDateTimeFormat().format(new Date(value)) : ''; }} /> ); } ); const formatPrice = ({ value, data, }: VegaValueFormatterParams) => { if (!data?.market || !isNumeric(value)) { return '-'; } const asset = data?.market.tradableInstrument.instrument.product.settlementAsset.symbol; const valueFormatted = addDecimalsFormatNumber( value, data?.market.decimalPlaces ); return `${valueFormatted} ${asset}`; }; const formatSize = (partyId: string) => { return ({ value, data }: VegaValueFormatterParams) => { if (!data?.market || !isNumeric(value)) { return '-'; } let prefix = ''; const partySide = getPartySide(data, partyId); if (partySide === 'buyer') { prefix = '+'; } else if (partySide === 'seller') { prefix = '-'; } const size = addDecimalsFormatNumber( value, data?.market.positionDecimalPlaces ); return `${prefix}${size}`; }; }; const getPartySide = ( data: Trade, partyId: string ): 'buyer' | 'seller' | undefined => { let result = undefined; if (data?.buyer.id === partyId) { result = 'buyer' as const; } else if (data?.seller.id === partyId) { result = 'seller' as const; } return result; }; const formatTotal = ({ value, data, }: VegaValueFormatterParams) => { if (!data?.market || !isNumeric(value)) { return '-'; } const asset = data?.market.tradableInstrument.instrument.product.settlementAsset.symbol; const size = new BigNumber( addDecimal(data?.size, data?.market.positionDecimalPlaces) ); const price = new BigNumber(addDecimal(value, data?.market.decimalPlaces)); const total = size.times(price).toString(); const valueFormatted = formatNumber(total, data?.market.decimalPlaces); return `${valueFormatted} ${asset}`; }; const formatRole = (partyId: string) => { return ({ value, data }: VegaValueFormatterParams) => { const taker = t('Taker'); const maker = t('Maker'); if (data?.buyer.id === partyId) { if (value === Side.SIDE_BUY) { return taker; } else { return maker; } } else if (data?.seller.id === partyId) { if (value === Side.SIDE_SELL) { return taker; } else { return maker; } } else { return '-'; } }; }; const formatFee = (partyId: string) => { return ({ value, data, }: VegaValueFormatterParams< Trade, 'market.tradableInstrument.instrument.product' >) => { if (!value?.settlementAsset || !data) { return '-'; } const asset = value.settlementAsset; let feesObj; if (data?.buyer.id === partyId) { feesObj = data?.buyerFee; } else if (data?.seller.id === partyId) { feesObj = data?.sellerFee; } else { return '-'; } const fee = new BigNumber(feesObj.makerFee) .plus(feesObj.infrastructureFee) .plus(feesObj.liquidityFee); const totalFees = addDecimalsFormatNumber(fee.toString(), asset.decimals); return `${totalFees} ${asset.symbol}`; }; };