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

Chore/953: Rename amount to size (#983)

Browse Source 
* chore: change amount label to size

* chore: colour-coding size cell

* feat: add colors to the order table size column

* fix: format

* fix: broken fills tests

* fix: lint

* fix: simple market test imports

Co-authored-by: PeteWilliams <me@petewilliams.info>
This commit is contained in:
botond 2022-08-11 09:10:20 +01:00 committed by GitHub
parent db3aa7c17b
commit 8f0898385f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 127 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ export const DealTicketLimitAmount = ({
return (
<div className="flex items-center gap-8">
<div className="flex-1">
<FormGroup label={t('Amount')} labelFor="input-order-size-limit">
<FormGroup label={t('Size')} labelFor="input-order-size-limit">
<Input
id="input-order-size-limit"
className="w-full"

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

@ -17,7 +17,7 @@ export const DealTicketMarketAmount = ({
return (
<div className="flex items-center gap-8">
<div className="flex-1">
<FormGroup label={t('Amount')} labelFor="input-order-size-market">
<FormGroup label={t('Size')} labelFor="input-order-size-market">
<Input
id="input-order-size-market"
className="w-full"

119
libs/fills/src/lib/fills-table.spec.tsx
View File

@ -46,17 +46,17 @@ describe('FillsTable', () => {
};
});
it('should render correct columns', async () => {
act(async () => {
render(<FillsTable partyId="party-id" rowData={[generateFill()]} />);
await waitForGridToBeInTheDOM();
await waitForDataToHaveLoaded();
it('correct columns are rendered', async () => {
render(<FillsTable partyId="party-id" rowData={[generateFill()]} />);
await waitForGridToBeInTheDOM();
await waitForDataToHaveLoaded();
await waitFor(() => {
const headers = screen.getAllByRole('columnheader');
expect(headers).toHaveLength(7);
expect(headers.map((h) => h.textContent?.trim())).toEqual([
'Market',
'Amount',
'Size',
'Value',
'Filled value',
'Role',
@ -66,43 +66,78 @@ describe('FillsTable', () => {
});
});
it('should format cells correctly for buyer fill', async () => {
act(async () => {
const partyId = 'party-id';
const buyerFill = generateFill({
...defaultFill,
buyer: {
id: partyId,
},
aggressor: Side.Sell,
buyerFee: {
makerFee: '2',
infrastructureFee: '2',
liquidityFee: '2',
},
});
render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
await waitForGridToBeInTheDOM();
await waitForDataToHaveLoaded();
const cells = screen.getAllByRole('gridcell');
const expectedValues = [
buyerFill.market.name,
'+3.00000',
'1.00 BTC',
'3.00 BTC',
'Maker',
'0.06 BTC',
getDateTimeFormat().format(new Date(buyerFill.createdAt)),
];
cells.forEach((cell, i) => {
expect(cell).toHaveTextContent(expectedValues[i]);
});
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
expect(amountCell).toHaveClass('text-vega-green');
it('formats cells correctly for buyer fill', async () => {
const partyId = 'party-id';
const buyerFill = generateFill({
...defaultFill,
buyer: {
id: partyId,
},
aggressor: Side.Sell,
buyerFee: {
makerFee: '2',
infrastructureFee: '2',
liquidityFee: '2',
},
});
render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
await waitForGridToBeInTheDOM();
await waitForDataToHaveLoaded();
const cells = screen.getAllByRole('gridcell');
const expectedValues = [
buyerFill.market.name,
'+3.00000',
'1.00 BTC',
'3.00 BTC',
'Maker',
'0.06 BTC',
getDateTimeFormat().format(new Date(buyerFill.createdAt)),
];
cells.forEach((cell, i) => {
expect(cell).toHaveTextContent(expectedValues[i]);
});
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
expect(amountCell).toHaveClass('text-vega-green-dark');
});
it('should format cells correctly for buyer fill', async () => {
const partyId = 'party-id';
const buyerFill = generateFill({
...defaultFill,
buyer: {
id: partyId,
},
aggressor: Side.Sell,
buyerFee: {
makerFee: '2',
infrastructureFee: '2',
liquidityFee: '2',
},
});
render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
await waitForGridToBeInTheDOM();
await waitForDataToHaveLoaded();
const cells = screen.getAllByRole('gridcell');
const expectedValues = [
buyerFill.market.name,
'+3.00000',
'1.00 BTC',
'3.00 BTC',
'Maker',
'0.06 BTC',
getDateTimeFormat().format(new Date(buyerFill.createdAt)),
];
cells.forEach((cell, i) => {
expect(cell).toHaveTextContent(expectedValues[i]);
});
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
expect(amountCell).toHaveClass('text-vega-green-dark');
});
it('should format cells correctly for seller fill', async () => {

6
libs/fills/src/lib/fills-table.tsx
View File

@ -43,14 +43,14 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
>
<AgGridColumn headerName={t('Market')} field="market.name" />
<AgGridColumn
headerName={t('Amount')}
headerName={t('Size')}
field="size"
cellClass={({ data }: { data: FillFields }) => {
let className = '';
if (data?.buyer.id === partyId) {
className = 'text-vega-green';
className = 'text-vega-green-dark dark:text-vega-green';
} else if (data?.seller.id) {
className = 'text-vega-red';
className = 'text-vega-red-dark dark:text-vega-red';
}
return className;
}}

2
libs/orders/src/lib/components/order-feedback/order-feedback.spec.tsx
View File

@ -80,7 +80,7 @@ describe('OrderFeedback', () => {
expect(screen.getByText('Price').nextElementSibling).toHaveTextContent(
'1.00'
);
expect(screen.getByText('Amount').nextElementSibling).toHaveTextContent(
expect(screen.getByText('Size').nextElementSibling).toHaveTextContent(
`+ 200`
);
});

6
libs/orders/src/lib/components/order-feedback/order-feedback.tsx
View File

@ -81,10 +81,12 @@ export const OrderFeedback = ({ transaction, order }: OrderFeedbackProps) => {
</div>
)}
<div>
<p className={labelClass}>{t(`Amount`)}</p>
<p className={labelClass}>{t(`Size`)}</p>
<p
className={
order.side === Side.Buy ? 'text-vega-green' : 'text-vega-red'
order.side === Side.Buy
? 'text-vega-green-dark dark:text-vega-green'
: 'text-vega-red-dark dark:text-vega-red'
}
>
{`${order.side === Side.Buy ? '+' : '-'} ${addDecimalsFormatNumber(

2
libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
View File

@ -70,7 +70,7 @@ export const OrderEditDialog = ({
</div>
)}
<div>
<p className={headerClassName}>{t(`Amount remaining`)}</p>
<p className={headerClassName}>{t(`Remaining size`)}</p>
<p
className={
order.side === 'Buy'

2
libs/orders/src/lib/components/order-list/order-list.spec.tsx
View File

@ -49,7 +49,7 @@ describe('OrderListTable', () => {
expect(headers).toHaveLength(11);
expect(headers.map((h) => h.textContent?.trim())).toEqual([
'Market',
'Amount',
'Size',
'Type',
'Status',
'Filled',

14
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -114,9 +114,21 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
field="market.tradableInstrument.instrument.code"
/>
<AgGridColumn
headerName={t('Amount')}
headerName={t('Size')}
field="size"
cellClass="font-mono"
cellClassRules={{
'text-vega-green-dark dark:text-vega-green': ({
data,
}: {
data: Orders_party_ordersConnection_edges_node;
}) => data.side === Side.Buy,
'text-vega-red-dark dark:text-vega-red': ({
data,
}: {
data: Orders_party_ordersConnection_edges_node;
}) => data.side === Side.Sell,
}}
valueFormatter={({
value,
data,

4
libs/positions/src/lib/positions-table.spec.tsx
View File

@ -72,7 +72,7 @@ describe('PositionsTable', () => {
expect(headers).toHaveLength(5);
expect(headers.map((h) => h.textContent?.trim())).toEqual([
'Market',
'Amount',
'Size',
'Average Entry Price',
'Mark Price',
'Realised PNL',
@ -96,7 +96,7 @@ describe('PositionsTable', () => {
cells.forEach((cell, i) => {
expect(cell).toHaveTextContent(expectedValues[i]);
});
expect(cells[cells.length - 1]).toHaveClass('color-vega-green');
expect(cells[cells.length - 1]).toHaveClass('text-vega-green-dark');
});
});
});

28
libs/positions/src/lib/positions-table.tsx
View File

@ -102,8 +102,20 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
sortable
/>
<AgGridColumn
headerName={t('Amount')}
headerName={t('Size')}
field="openVolume"
cellClassRules={{
'text-vega-green-dark dark:text-vega-green': ({
value,
}: {
value: string;
}) => Number(value) > 0,
'text-vega-red-dark dark:text-vega-red': ({
value,
}: {
value: string;
}) => Number(value) < 0,
}}
valueFormatter={({
value,
data,
@ -148,10 +160,16 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
tooltipContent: t('P&L excludes any fees paid.'),
}}
cellClassRules={{
'color-vega-green': ({ value }: { value: string }) =>
Number(value) > 0,
'color-vega-red': ({ value }: { value: string }) =>
Number(value) < 0,
'text-vega-green-dark dark:text-vega-green': ({
value,
}: {
value: string;
}) => Number(value) > 0,
'text-vega-red-dark dark:text-vega-red': ({
value,
}: {
value: string;
}) => Number(value) < 0,
}}
valueFormatter={({ value, data }: ValueFormatterParams) =>
volumePrefix(