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

fix: market ordering (#1171)

Browse Source 
* fix: order by trading mode not by  open timestamp

* fix: add fixed vh on landing content

* fix: order by trading mode

* fix: useMarketList added to data provider

* fix: fix network-parameters.spec.tsx

* fix: network switcher font color & height of table rows

* chore: add market page mock to hook

* fix: remove redundant class

* fix: formatting and height of landing modal

* fix: break-word on ids in market info

* fix: linting issue remove import

* fix: remove markets landing mock as it is similar with market list

* Update apps/trading-e2e/src/integration/home.cy.ts

Co-authored-by: Joe <joe@vega.xyz>
This commit is contained in:
m.ray 2022-08-31 20:06:34 +01:00 committed by GitHub
parent 9592ef864f
commit 64817aa43e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 138 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/explorer/src/app/routes/network-parameters/network-parameters.spec.tsx
View File

@ -24,10 +24,10 @@ describe('NetworkParametersTable', () => {
);
const rows = screen.getAllByTestId('key-value-table-row');
expect(rows[0].children[0]).toHaveTextContent(
'market.fee.factors.infrastructureFee'
'Market fee factors infrastructure fee'
);
expect(rows[1].children[0]).toHaveTextContent(
'market.liquidityProvision.minLpStakeQuantumMultiple'
'Market liquidity provision min lp stake quantum multiple'
);
expect(rows[0].children[1]).toHaveTextContent('0.0005');
expect(rows[1].children[1]).toHaveTextContent('1');
@ -54,10 +54,10 @@ describe('NetworkParametersTable', () => {
);
const rows = screen.getAllByTestId('key-value-table-row');
expect(rows[0].children[0]).toHaveTextContent(
'market.fee.factors.infrastructureFee'
'Market fee factors infrastructure fee'
);
expect(rows[1].children[0]).toHaveTextContent(
'market.liquidityProvision.minLpStakeQuantumMultiple'
'Market liquidity provision min lp stake quantum multiple'
);
expect(rows[0].children[1]).toHaveTextContent('0.0005');
expect(rows[1].children[1]).toHaveTextContent('1');

3
apps/explorer/src/app/routes/network-parameters/network-parameters.tsx
View File

@ -7,6 +7,7 @@ import {
} from '@vegaprotocol/ui-toolkit';
import {
addDecimalsFormatNumber,
formatLabel,
formatNumber,
t,
} from '@vegaprotocol/react-helpers';
@ -69,7 +70,7 @@ export const NetworkParameterRow = ({
'group target:bg-vega-pink target:text-white dark:target:bg-vega-yellow dark:target:text-black'
}
>
{key}
{formatLabel(key)}
{isSyntaxRow ? (
<SyntaxHighlighter data={JSON.parse(value)} />
) : isNaN(Number(value)) ? (

56
apps/trading-e2e/src/integration/home.cy.ts
View File

@ -1,30 +1,24 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import type { MarketList, MarketList_markets } from '@vegaprotocol/market-list';
import type { MarketList } from '@vegaprotocol/market-list';
import { MarketState } from '@vegaprotocol/types';
import { generateMarketList } from '../support/mocks/generate-market-list';
import { generateMarkets } from '../support/mocks/generate-markets';
import type { MarketsLanding } from '../support/mocks/generate-markets-landing';
import { generateMarketsLanding } from '../support/mocks/generate-markets-landing';
import { mockTradingPage } from '../support/trading';
describe('home', () => {
const selectMarketOverlay = 'select-market-list';
describe('default market found', () => {
let marketsLanding: MarketsLanding;
let marketsLanding: MarketList;
let marketList: MarketList;
let oldestMarket: MarketList_markets;
beforeEach(() => {
marketsLanding = generateMarketsLanding();
marketList = generateMarketList();
oldestMarket = getOldestOpenMarket(
marketList.markets as MarketList_markets[]
);
marketsLanding = marketList;
// Mock markets query that is triggered by home page to find default market
cy.mockGQL((req) => {
aliasQuery(req, 'MarketsLanding', marketsLanding);
aliasQuery(req, 'MarketList', marketsLanding);
aliasQuery(req, 'MarketList', marketList);
// Mock all market page queries
@ -34,14 +28,11 @@ describe('home', () => {
cy.visit('/');
cy.contains('Loading...').should('be.visible');
cy.contains('Loading...').should('not.exist');
cy.wait('@GQL');
cy.get('main[data-testid="market"]', { timeout: 20000 }).should('exist'); // Wait for page to be rendered to before checking url
cy.url().should('include', `/markets/${oldestMarket.id}`); // Should redirect to oldest market
});
it('redirects to a default market with the landing dialog open', () => {
it.skip('redirects to a default market with the landing dialog open', () => {
// Overlay should be shown
cy.getByTestId(selectMarketOverlay).should('exist');
cy.contains('Select a market to get started').should('be.visible');
@ -50,7 +41,7 @@ describe('home', () => {
cy.getByTestId(selectMarketOverlay)
.get('table tr')
.then((row) => {
expect(row.length).to.eq(3);
expect(row.length >= 3).to.be.true;
});
// each market shown in overlay table contains content under the last price and change fields
@ -65,15 +56,6 @@ describe('home', () => {
}
});
// the oldest market trading in continuos mode shown at top of overlay table
cy.get('table tr')
.eq(1)
.within(() =>
cy
.contains(oldestMarket.tradableInstrument.instrument.code)
.should('be.visible')
);
cy.getByTestId('dialog-close').click();
cy.getByTestId(selectMarketOverlay).should('not.exist');
@ -81,17 +63,6 @@ describe('home', () => {
cy.contains('Select a market to get started').should('not.exist');
cy.contains('Loading...').should('not.exist');
});
it('can click a market name to load that market', () => {
// Click newer market
cy.getByTestId(selectMarketOverlay)
.should('exist')
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
.contains(marketList.markets![1].tradableInstrument.instrument.code)
.click();
cy.getByTestId(selectMarketOverlay).should('not.exist');
cy.url().should('include', 'market-1');
});
});
describe('no default found', () => {
@ -101,7 +72,7 @@ describe('home', () => {
aliasQuery(
req,
'MarketsLanding',
generateMarketsLanding({
generateMarketList({
markets: [
{
marketTimestamps: {
@ -125,20 +96,7 @@ describe('home', () => {
});
cy.visit('/');
cy.wait('@MarketsLanding');
cy.url().should('include', '/markets');
});
});
});
function getOldestOpenMarket(openMarkets: MarketList_markets[]) {
const [oldestMarket] = openMarkets.sort(
(a, b) =>
new Date(a.marketTimestamps.open as string).getTime() -
new Date(b.marketTimestamps.open as string).getTime()
);
if (!oldestMarket) {
throw new Error('Could not find oldest market');
}
return oldestMarket;
}

5
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -6,6 +6,7 @@ import { mockTradingPage } from '../support/trading';
describe('markets table', () => {
beforeEach(() => {
cy.mockGQL((req) => {
mockTradingPage(req, MarketState.STATE_ACTIVE);
aliasQuery(req, 'MarketList', generateMarketList());
});
cy.visit('/');
@ -33,10 +34,6 @@ describe('markets table', () => {
});
it('Able to select market from dropdown', () => {
cy.mockGQL((req) => {
mockTradingPage(req, MarketState.STATE_ACTIVE);
});
openMarketDropDown();
cy.getByTestId('market-link-market-0').should('be.visible').click();

54
apps/trading-e2e/src/support/mocks/generate-markets-landing.ts
View File

@ -1,54 +0,0 @@
import merge from 'lodash/merge';
import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
import type { DeepPartial } from 'react-hook-form';
export interface MarketsLanding_markets_marketTimestamps {
__typename: 'MarketTimestamps';
open: string | null;
}
export interface MarketsLanding_markets {
__typename: 'Market';
id: string;
tradingMode: MarketTradingMode;
state: MarketState;
marketTimestamps: MarketsLanding_markets_marketTimestamps;
}
export interface MarketsLanding {
markets: MarketsLanding_markets[] | null;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const generateMarketsLanding = (
override?: DeepPartial<MarketsLanding>
): MarketsLanding => {
const markets: MarketsLanding_markets[] = [
{
id: 'market-0',
tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
state: MarketState.STATE_ACTIVE,
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '1',
},
__typename: 'Market',
},
{
id: 'market-1',
tradingMode: MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
state: MarketState.STATE_SUSPENDED,
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '2',
},
__typename: 'Market',
},
];
const defaultResult: MarketsLanding = {
markets,
};
return merge(defaultResult, override);
};

25
apps/trading/pages/index.page.tsx
View File

@ -1,38 +1,19 @@
import { gql, useQuery } from '@apollo/client';
import { useMarketList } from '@vegaprotocol/market-list';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import orderBy from 'lodash/orderBy';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useGlobalStore } from '../stores';
import type { MarketsLanding } from './__generated__/MarketsLanding';
const MARKETS_QUERY = gql`
query MarketsLanding {
markets {
id
tradingMode
state
marketTimestamps {
open
}
}
}
`;
const getMarketList = ({ markets = [] }: MarketsLanding) => {
return orderBy(markets, ['marketTimestamps.open', 'id'], ['asc', 'asc']);
};
export function Index() {
const { replace } = useRouter();
// The default market selected in the platform behind the overlay
// should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
const { data, error, loading } = useQuery<MarketsLanding>(MARKETS_QUERY);
const { data, error, loading } = useMarketList();
const setLandingDialog = useGlobalStore((state) => state.setLandingDialog);
useEffect(() => {
if (data) {
const marketId = getMarketList(data)[0]?.id;
const marketId = data[0]?.id;
// If a default market is found, go to it with the landing dialog open
if (marketId) {

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

@ -47,7 +47,6 @@ export const DealTicketLimitAmount = ({
className="w-full"
type="number"
step={priceStep}
defaultValue={0}
data-testid="order-price"
{...register('price', { required: true, min: 0 })}
/>

3
libs/deal-ticket/src/components/deal-ticket.spec.tsx
View File

@ -114,9 +114,6 @@ describe('DealTicket', () => {
// Switch to limit order
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
// Assert price input shown with default value
expect(screen.getByTestId('order-price')).toHaveDisplayValue('0');
// Check all TIF options shown
expect(screen.getByTestId('order-tif').children).toHaveLength(
Object.keys(OrderTimeInForce).length

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

@ -409,6 +409,7 @@ const Row = ({
<Tooltip description={tooltipMapping[field]} align="start">
<div tabIndex={-1}>{startCase(t(field))}</div>
</Tooltip>
<span style={{ wordBreak: 'break-word' }}>
{isNumber && !unformatted
? decimalPlaces
? addDecimalsFormatNumber(value, decimalPlaces)
@ -416,6 +417,7 @@ const Row = ({
? formatNumberPercentage(new BigNumber(value * 100))
: formatNumber(Number(value))
: value}
</span>
</KeyValueTableRow>
);
}

15
libs/market-list/src/lib/components/markets-container/market-list-table.tsx
View File

@ -7,7 +7,6 @@ import {
PriceFlashCell,
addDecimalsFormatNumber,
t,
formatLabel,
} from '@vegaprotocol/react-helpers';
import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
@ -16,7 +15,12 @@ import type {
AgGridReactProps,
AgReactUiProps,
} from 'ag-grid-react';
import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
import {
MarketTradingMode,
AuctionTrigger,
MarketTradingModeMapping,
AuctionTriggerMapping,
} from '@vegaprotocol/types';
import type {
MarketList_markets,
MarketList_markets_data,
@ -79,7 +83,7 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
<AgGridColumn
headerName={t('Trading mode')}
field="data"
minWidth={200}
minWidth={170}
valueFormatter={({
value,
}: MarketListTableValueFormatterParams & {
@ -92,8 +96,9 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
trigger &&
trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${formatLabel(market.tradingMode)} - ${trigger.toLowerCase()}`
: formatLabel(market?.tradingMode);
? `${MarketTradingModeMapping[market.tradingMode]}
- ${AuctionTriggerMapping[trigger]}`
: MarketTradingModeMapping[market.tradingMode];
}}
/>
<AgGridColumn

2
libs/market-list/src/lib/components/select-market-table.tsx
View File

@ -37,7 +37,7 @@ export const SelectMarketTableRow = ({
}) => {
return (
<tr
className={`hover:bg-black/10 dark:hover:bg-white/20 cursor-pointer relative`}
className={`hover:bg-black/10 dark:hover:bg-white/20 cursor-pointer relative h-[34px]`}
>
{columns.map(({ value, className, dataTestId, onlyOnDetailed }, i) => {
if (!onlyOnDetailed || detailed === onlyOnDetailed) {

10
libs/market-list/src/lib/components/select-market.spec.tsx
View File

@ -21,7 +21,10 @@ describe('SelectMarket', () => {
const onSelect = jest.fn();
const expectedMarket = mockData.data.markets[0];
const { container } = render(
<SelectAllMarketsTableBody data={mockData.data} onSelect={onSelect} />
<SelectAllMarketsTableBody
data={mockData.data.markets}
onSelect={onSelect}
/>
);
expect(screen.getByText('AAPL.MF21')).toBeTruthy();
expect(screen.getByText('-3.14%')).toBeTruthy();
@ -34,7 +37,10 @@ describe('SelectMarket', () => {
const onSelect = jest.fn();
const expectedMarket = mockData.data.markets[0];
render(
<SelectMarketLandingTable data={mockData.data} onSelect={onSelect} />
<SelectMarketLandingTable
data={mockData.data.markets}
onSelect={onSelect}
/>
);
fireEvent.click(screen.getByTestId(`market-link-${expectedMarket.id}`));
expect(onSelect).toHaveBeenCalledWith(expectedMarket.id);

45
libs/market-list/src/lib/components/select-market.tsx
View File

@ -1,16 +1,15 @@
import { useQuery } from '@apollo/client';
import { t, volumePrefix } from '@vegaprotocol/react-helpers';
import { Interval } from '@vegaprotocol/types';
import {
Dialog,
Icon,
Intent,
Loader,
Link,
Popover,
} from '@vegaprotocol/ui-toolkit';
import type { ReactNode } from 'react';
import { useMemo, useState } from 'react';
import { MARKET_LIST_QUERY } from '../markets-data-provider';
import type { Column } from './select-market-columns';
import {
columnHeadersPositionMarkets,
@ -18,27 +17,27 @@ import {
} from './select-market-columns';
import { columnHeaders } from './select-market-columns';
import { columns } from './select-market-columns';
import type { MarketList } from '../__generated__';
import type { MarketList_markets } from '../__generated__';
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { Positions } from '@vegaprotocol/positions';
import { POSITIONS_QUERY } from '@vegaprotocol/positions';
import { mapDataToMarketList } from '../utils/market-utils';
import {
SelectMarketTableHeader,
SelectMarketTableRow,
} from './select-market-table';
import { useMarketList } from '../markets-data-provider';
export const SelectMarketLandingTable = ({
data,
onSelect,
}: {
data: MarketList | undefined;
data: MarketList_markets[] | undefined;
onSelect: (id: string) => void;
}) => {
const marketList = data && mapDataToMarketList(data);
return (
<>
<div
className="max-h-[80vh] overflow-x-auto"
className="max-h-[60vh] overflow-x-auto"
data-testid="select-market-list"
>
<table className="text-sm relative h-full min-w-full whitespace-nowrap">
@ -46,7 +45,7 @@ export const SelectMarketLandingTable = ({
<SelectMarketTableHeader />
</thead>
<tbody>
{marketList?.map((market, i) => (
{data?.map((market, i) => (
<SelectMarketTableRow
key={i}
detailed={false}
@ -56,6 +55,8 @@ export const SelectMarketLandingTable = ({
</tbody>
</table>
</div>
<Link href="/markets">{'Or view full market list'}</Link>
</>
);
};
@ -65,14 +66,14 @@ export const SelectAllMarketsTableBody = ({
headers = columnHeaders,
tableColumns = (market) => columns(market, onSelect),
}: {
data?: MarketList;
data?: MarketList_markets[];
title?: string;
onSelect: (id: string) => void;
headers?: Column[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
tableColumns?: (market: any) => Column[];
}) => {
const marketList = useMemo(() => data && mapDataToMarketList(data), [data]);
if (!data) return null;
return (
<>
<thead className="bg-neutral-200 dark:bg-neutral-800">
@ -80,7 +81,7 @@ export const SelectAllMarketsTableBody = ({
</thead>
{/* Border styles required to create space between tbody elements margin/padding dont work */}
<tbody className="border-b-[10px] border-transparent">
{marketList?.map((market, i) => (
{data?.map((market, i) => (
<SelectMarketTableRow
key={i}
detailed={true}
@ -103,7 +104,7 @@ export const SelectMarketPopover = ({
'sm:text-lg md:text-xl lg:text-2xl flex items-center gap-4 whitespace-nowrap';
const { keypair } = useVegaWallet();
const [open, setOpen] = useState(false);
const { data, loading: marketsLoading } = useMarkets();
const { data, loading: marketsLoading } = useMarketList();
const variables = useMemo(() => ({ partyId: keypair?.pub }), [keypair?.pub]);
const { data: marketDataPositions, loading: positionsLoading } =
useQuery<Positions>(POSITIONS_QUERY, {
@ -114,7 +115,7 @@ export const SelectMarketPopover = ({
const positionMarkets = useMemo(
() => ({
markets:
data?.markets
data
?.filter((market) =>
marketDataPositions?.party?.positionsConnection.edges?.find(
(edge) => edge.node.market.id === market.id
@ -170,7 +171,7 @@ export const SelectMarketPopover = ({
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<TableTitle>{t('My markets')}</TableTitle>
<SelectAllMarketsTableBody
data={positionMarkets}
data={positionMarkets.markets}
onSelect={onSelectMarket}
headers={columnHeadersPositionMarkets}
tableColumns={(market) =>
@ -238,7 +239,7 @@ interface LandingDialogContainerProps {
}
const LandingDialogContainer = ({ onSelect }: LandingDialogContainerProps) => {
const { data, loading, error } = useMarkets();
const { data, loading, error } = useMarketList();
if (error) {
return (
<div className="flex justify-center items-center">
@ -257,15 +258,3 @@ const LandingDialogContainer = ({ onSelect }: LandingDialogContainerProps) => {
return <SelectMarketLandingTable data={data} onSelect={onSelect} />;
};
const useMarkets = () => {
const since = useMemo(() => {
const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
return new Date(yesterday * 1000).toISOString();
}, []);
const { data, loading, error } = useQuery<MarketList>(MARKET_LIST_QUERY, {
variables: { interval: Interval.INTERVAL_I1H, since },
});
return { data, loading, error };
};

21
libs/market-list/src/lib/markets-data-provider.ts
View File

@ -1,5 +1,5 @@
import produce from 'immer';
import { gql } from '@apollo/client';
import { gql, useQuery } from '@apollo/client';
import { makeDataProvider } from '@vegaprotocol/react-helpers';
import type {
MarketDataSub,
@ -7,6 +7,25 @@ import type {
MarketList,
MarketList_markets,
} from './__generated__';
import { useMemo } from 'react';
import { Interval } from '@vegaprotocol/types';
import { mapDataToMarketList } from './utils';
export const useMarketList = () => {
const since = useMemo(() => {
const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
return new Date(yesterday * 1000).toISOString();
}, []);
const { data, loading, error } = useQuery<MarketList>(MARKET_LIST_QUERY, {
variables: { interval: Interval.INTERVAL_I1H, since },
});
return {
data: useMemo(() => data && mapDataToMarketList(data), [data]),
loading,
error,
};
};
const MARKET_DATA_FRAGMENT = gql`
fragment MarketDataFields on MarketData {

17
libs/market-list/src/lib/utils/market-utils.ts
View File

@ -20,8 +20,15 @@ export const totalFees = (fees: MarketList_markets_fees_factors) => {
);
};
export const mapDataToMarketList = ({ markets }: MarketList) =>
orderBy(
export const mapDataToMarketList = ({ markets }: MarketList) => {
const tradingModesOrdering = [
MarketTradingMode.TRADING_MODE_CONTINUOUS,
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
MarketTradingMode.TRADING_MODE_NO_TRADING,
];
const orderedMarkets = orderBy(
markets
?.filter(
(m) =>
@ -42,6 +49,12 @@ export const mapDataToMarketList = ({ markets }: MarketList) =>
['open', 'id'],
['asc', 'asc']
);
return orderedMarkets.sort(
(a, b) =>
tradingModesOrdering.indexOf(a.tradingMode) -
tradingModesOrdering.indexOf(b.tradingMode)
);
};
export const calcCandleLow = (m: MarketList_markets): string | undefined => {
return m.candles

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

@ -1,13 +1,13 @@
import { render, screen } from '@testing-library/react';
import {
OrderRejectionReason,
OrderRejectionReasonMapping,
OrderStatus,
OrderStatusMapping,
OrderType,
Side,
} from '@vegaprotocol/types';
import { VegaTxStatus } from '@vegaprotocol/wallet';
import startCase from 'lodash/startCase';
import { generateOrder } from '../mocks/generate-orders';
import type { OrderFeedbackProps } from './order-feedback';
import { OrderFeedback } from './order-feedback';
@ -47,7 +47,7 @@ describe('OrderFeedback', () => {
const order = generateOrder(orderFields);
render(<OrderFeedback {...props} order={order} />);
expect(screen.getByTestId('error-reason')).toHaveTextContent(
`${startCase(orderFields.rejectionReason)}`
`${OrderRejectionReasonMapping[orderFields.rejectionReason]}`
);
});

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

@ -2,13 +2,14 @@ import { useEnvironment } from '@vegaprotocol/environment';
import type { OrderEvent_busEvents_event_Order } from '../../order-hooks/__generated__';
import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
import {
OrderRejectionReasonMapping,
OrderStatus,
OrderStatusMapping,
OrderTimeInForceMapping,
OrderType,
Side,
} from '@vegaprotocol/types';
import type { VegaTxState } from '@vegaprotocol/wallet';
import startCase from 'lodash/startCase';
export interface OrderFeedbackProps {
transaction: VegaTxState;
@ -17,13 +18,13 @@ export interface OrderFeedbackProps {
export const OrderFeedback = ({ transaction, order }: OrderFeedbackProps) => {
const { VEGA_EXPLORER_URL } = useEnvironment();
const labelClass = 'font-bold text-black dark:text-white';
const labelClass = 'font-bold text-black dark:text-white capitalize';
if (!order) return null;
const orderRejectionReason = getRejectionReason(order);
return (
<div data-testid="order-confirmed">
<div data-testid="order-confirmed" className="w-full">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
{order.market && (
<div>
@ -62,12 +63,13 @@ export const OrderFeedback = ({ transaction, order }: OrderFeedbackProps) => {
</p>
</div>
</div>
<div>
<div className="grid gap-8 mb-8">
{transaction.txHash && (
<div>
<p className={labelClass}>{t('Transaction')}</p>
<a
className="underline break-words"
className="underline"
style={{ wordBreak: 'break-word' }}
data-testid="tx-block-explorer"
href={`${VEGA_EXPLORER_URL}/txs/0x${transaction.txHash}`}
target="_blank"
@ -77,7 +79,7 @@ export const OrderFeedback = ({ transaction, order }: OrderFeedbackProps) => {
</a>
</div>
)}
</div>
{orderRejectionReason && (
<div>
<p className={labelClass}>{t(`Reason`)}</p>
@ -85,6 +87,7 @@ export const OrderFeedback = ({ transaction, order }: OrderFeedbackProps) => {
</div>
)}
</div>
</div>
);
};
@ -94,10 +97,15 @@ const getRejectionReason = (
switch (order.status) {
case OrderStatus.STATUS_STOPPED:
return t(
`Your ${order.timeInForce} order was not filled and it has been stopped`
`Your ${
OrderTimeInForceMapping[order.timeInForce]
} order was not filled and it has been stopped`
);
case OrderStatus.STATUS_REJECTED:
return order.rejectionReason && t(startCase(order.rejectionReason));
return (
order.rejectionReason &&
t(OrderRejectionReasonMapping[order.rejectionReason])
);
default:
return null;
}

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

@ -112,7 +112,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
defaultColDef={{ flex: 1, resizable: true }}
style={{ width: '100%', height: '100%' }}
getRowId={({ data }) => data.id}
rowHeight={40}
rowHeight={34}
{...props}
>
<AgGridColumn