From 1f8f54617b3c2467a2dd8a9f27c0fa31445625c2 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 4 Oct 2022 21:00:06 -0700 Subject: [PATCH] chore: misc quick wins (#1596) * fix: make sparkline appear after change cell * fix: make price come after expiry in market header * fix: refer to size rather than amount in validation * fix: radio colors in light theme * fix: remove orange border from vega tx pending state * chore: combine deposit and withdraw buttons into single cell * chore: update accounts table test, remove console warning from breakdown tests * chore: update order validation test * chore: place market table header in correct position * chore: use actual change id to avoid clash * fix: remove assertion in fills table that is flakey * chore: render fills table with act * fix: add a wait time for infura queries to resolve --- apps/console-lite-e2e/src/support/index.js | 5 +- apps/token-e2e/src/support/index.js | 5 +- .../src/integration/withdraw.cy.ts | 17 +++-- apps/trading-e2e/src/support/index.js | 2 +- .../select-market/select-market-columns.tsx | 64 +++++++++---------- apps/trading/pages/markets/trade-grid.tsx | 20 +++--- libs/accounts/src/lib/accounts-table.spec.tsx | 21 ++---- libs/accounts/src/lib/accounts-table.tsx | 57 +++++++---------- .../accounts/src/lib/breakdown-table.spec.tsx | 9 +-- .../use-order-validation.spec.tsx | 18 ++++-- .../use-order-validation.tsx | 6 +- libs/fills/src/lib/fills-table.spec.tsx | 7 +- .../components/radio-group/radio-group.tsx | 4 +- .../vega-transaction-dialog.tsx | 2 +- 14 files changed, 119 insertions(+), 118 deletions(-) diff --git a/apps/console-lite-e2e/src/support/index.js b/apps/console-lite-e2e/src/support/index.js index 6cd3f555b..a0de3bf58 100644 --- a/apps/console-lite-e2e/src/support/index.js +++ b/apps/console-lite-e2e/src/support/index.js @@ -25,7 +25,10 @@ before(() => { // Mock chainId fetch which happens on every page for wallet connection cy.mockGQL((req) => { aliasQuery(req, 'ChainId', { - statistics: { __typename: 'Statistics', chainId: 'test-chain-id' }, + statistics: { + __typename: 'Statistics', + chainId: 'vega-fairground-202210041151', + }, }); }); }); diff --git a/apps/token-e2e/src/support/index.js b/apps/token-e2e/src/support/index.js index 08cd5067a..59a6e87b4 100644 --- a/apps/token-e2e/src/support/index.js +++ b/apps/token-e2e/src/support/index.js @@ -24,7 +24,10 @@ before(() => { // Mock chainId fetch which happens on every page for wallet connection cy.mockGQL((req) => { aliasQuery(req, 'ChainId', { - statistics: { __typename: 'Statistics', chainId: 'test-chain-id' }, + statistics: { + __typename: 'Statistics', + chainId: 'vega-fairground-202210041151', + }, }); }); }); diff --git a/apps/trading-e2e/src/integration/withdraw.cy.ts b/apps/trading-e2e/src/integration/withdraw.cy.ts index 7deb4a17a..2002be06e 100644 --- a/apps/trading-e2e/src/integration/withdraw.cy.ts +++ b/apps/trading-e2e/src/integration/withdraw.cy.ts @@ -53,7 +53,7 @@ describe('withdraw', { tags: '@smoke' }, () => { cy.get(toAddressField).should('have.value', ethAddressValue); }); it('min amount', () => { - cy.get(assetSelectField).select(asset1Name); // Select asset so we have a min viable amount calculated + selectAsset(asset1Name); cy.get(amountField).clear().type('0'); cy.getByTestId(submitWithdrawBtn).click(); cy.get('[data-testid="input-error-text"]').should( @@ -62,7 +62,7 @@ describe('withdraw', { tags: '@smoke' }, () => { ); }); it('max amount', () => { - cy.get(assetSelectField).select(asset2Name); // Will be above maximum because the vega wallet doesnt have any collateral + selectAsset(asset2Name); // Will be above maximum because the vega wallet doesnt have any collateral cy.get(amountField).clear().type('1'); cy.getByTestId(submitWithdrawBtn).click(); cy.get('[data-testid="input-error-text"]').should( @@ -72,7 +72,7 @@ describe('withdraw', { tags: '@smoke' }, () => { }); it('can set amount using use maximum button', () => { - cy.get(assetSelectField).select(asset1Name); + selectAsset(asset1Name); cy.getByTestId(useMaximumAmount).click(); cy.get(amountField).should('have.value', '1000.00000'); }); @@ -87,7 +87,7 @@ describe('withdraw', { tags: '@smoke' }, () => { }, }, }); - cy.get(assetSelectField).select(asset1Name); + selectAsset(asset1Name); cy.getByTestId('balance-available') .should('contain.text', 'Balance available') .find('td') @@ -110,4 +110,13 @@ describe('withdraw', { tags: '@smoke' }, () => { it.skip('creates a withdrawal on submit'); // Needs capsule it.skip('creates a withdrawal on submit and prompts to complete withdrawal'); // Needs capsule + + const selectAsset = (assetName: string) => { + cy.get(assetSelectField).select(assetName); + // The asset only gets set once the queries (getWithdrawThreshold, getDelay) + // against the Ethereum change resolve, we should fix this but for now just force + // some wait time + // eslint-disable-next-line + cy.wait(1000); + }; }); diff --git a/apps/trading-e2e/src/support/index.js b/apps/trading-e2e/src/support/index.js index 8799c2317..d1ea36278 100644 --- a/apps/trading-e2e/src/support/index.js +++ b/apps/trading-e2e/src/support/index.js @@ -6,7 +6,7 @@ import { generateChainId } from './mocks/generate-chain-id'; registerCypressGrep(); before(() => { - // Mock chainId fetch which happens on every page for wallet connection + // Mock chainId fetch which happens on every page wallet connection cy.mockGQL((req) => { aliasQuery(req, 'ChainId', generateChainId()); }); diff --git a/apps/trading/components/select-market/select-market-columns.tsx b/apps/trading/components/select-market/select-market-columns.tsx index c887c53a9..8f6b4c87c 100644 --- a/apps/trading/components/select-market/select-market-columns.tsx +++ b/apps/trading/components/select-market/select-market-columns.tsx @@ -94,18 +94,18 @@ const headers: Column[] = [ className: cellClassNames, onlyOnDetailed: false, }, - { - kind: ColumnKind.Asset, - value: t('Settlement asset'), - className: `${cellClassNames} hidden sm:table-cell`, - onlyOnDetailed: false, - }, { kind: ColumnKind.Sparkline, value: t(''), className: `${cellClassNames} hidden lg:table-cell`, onlyOnDetailed: false, }, + { + kind: ColumnKind.Asset, + value: t('Settlement asset'), + className: `${cellClassNames} hidden sm:table-cell`, + onlyOnDetailed: false, + }, { kind: ColumnKind.High24, value: t('24h high'), @@ -209,6 +209,19 @@ export const columns = ( className: cellClassNames, onlyOnDetailed: false, }, + { + kind: ColumnKind.Sparkline, + value: market.candles && ( + Number(c)) || []} + /> + ), + className: `${cellClassNames} hidden lg:table-cell`, + onlyOnDetailed: false && candlesClose, + }, { kind: ColumnKind.Asset, value: ( @@ -231,19 +244,6 @@ export const columns = ( className: `${cellClassNames} hidden sm:table-cell`, onlyOnDetailed: false, }, - { - kind: ColumnKind.Sparkline, - value: market.candles && ( - Number(c)) || []} - /> - ), - className: `${cellClassNames} hidden lg:table-cell`, - onlyOnDetailed: false && candlesClose, - }, { kind: ColumnKind.High24, value: candleHigh ? ( @@ -390,6 +390,19 @@ export const columnsPositionMarkets = ( className: cellClassNames, onlyOnDetailed: false, }, + { + kind: ColumnKind.Sparkline, + value: candlesClose && ( + Number(c))} + /> + ), + className: `${cellClassNames} hidden lg:table-cell`, + onlyOnDetailed: false, + }, { kind: ColumnKind.Asset, value: ( @@ -412,19 +425,6 @@ export const columnsPositionMarkets = ( className: `${cellClassNames} hidden sm:table-cell`, onlyOnDetailed: false, }, - { - kind: ColumnKind.Sparkline, - value: candlesClose && ( - Number(c))} - /> - ), - className: `${cellClassNames} hidden lg:table-cell`, - onlyOnDetailed: false, - }, { kind: ColumnKind.High24, value: candleHigh ? ( diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index d68f5c623..d7c0eea2c 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -158,6 +158,16 @@ export const TradeMarketHeader = ({ > + +
+ {market.data && market.data.markPrice !== '0' + ? addDecimalsFormatNumber( + market.data.markPrice, + market.decimalPlaces + ) + : '-'} +
+ - -
- {market.data && market.data.markPrice !== '0' - ? addDecimalsFormatNumber( - market.data.markPrice, - market.decimalPlaces - ) - : '-'} -
- {symbol ? (
diff --git a/libs/accounts/src/lib/accounts-table.spec.tsx b/libs/accounts/src/lib/accounts-table.spec.tsx index e2496e96b..3a7fcb152 100644 --- a/libs/accounts/src/lib/accounts-table.spec.tsx +++ b/libs/accounts/src/lib/accounts-table.spec.tsx @@ -32,28 +32,18 @@ const singleRow = { const singleRowData = [singleRow]; describe('AccountsTable', () => { - it('should render successfully', async () => { - await act(async () => { - render( null} />); - }); - const headers = await screen.getAllByRole('columnheader'); - expect(headers).toHaveLength(6); - expect( - headers?.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim()) - ).toEqual(['Asset', 'Deposited', 'Used', '', '', '']); - }); - it('should render correct columns', async () => { await act(async () => { render( null} /> ); }); - const headers = await screen.getAllByRole('columnheader'); - expect(headers).toHaveLength(6); + const expectedHeaders = ['Asset', 'Deposited', 'Used', '', '']; + const headers = await screen.findAllByRole('columnheader'); + expect(headers).toHaveLength(expectedHeaders.length); expect( headers?.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim()) - ).toEqual(['Asset', 'Deposited', 'Used', '', '', '']); + ).toEqual(expectedHeaders); }); it('should apply correct formatting', async () => { @@ -62,14 +52,13 @@ describe('AccountsTable', () => { null} /> ); }); - const cells = await screen.getAllByRole('gridcell'); + const cells = await screen.findAllByRole('gridcell'); const expectedValues = [ 'tBTC', '1,256.00000', '1,256.00001,256.0000', 'Collateral breakdown', 'Deposit', - 'Withdraw', ]; cells.forEach((cell, i) => { expect(cell).toHaveTextContent(expectedValues[i]); diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx index ef0dbd621..5c52f00db 100644 --- a/libs/accounts/src/lib/accounts-table.tsx +++ b/libs/accounts/src/lib/accounts-table.tsx @@ -151,43 +151,34 @@ export const AccountTable = forwardRef( }} /> ) => { - return ( - - ); - }} - /> - ) => { + }: VegaICellRendererParams) => { return ( - +
+ + + +
); }} /> diff --git a/libs/accounts/src/lib/breakdown-table.spec.tsx b/libs/accounts/src/lib/breakdown-table.spec.tsx index 9c9fadcf2..36be0d297 100644 --- a/libs/accounts/src/lib/breakdown-table.spec.tsx +++ b/libs/accounts/src/lib/breakdown-table.spec.tsx @@ -32,16 +32,11 @@ const singleRow = { const singleRowData = [singleRow]; describe('BreakdownTable', () => { - it('should render successfully', async () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); - it('should render correct columns', async () => { await act(async () => { render(); }); - const headers = await screen.getAllByRole('columnheader'); + const headers = await screen.findAllByRole('columnheader'); expect(headers).toHaveLength(5); expect( headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim()) @@ -52,7 +47,7 @@ describe('BreakdownTable', () => { await act(async () => { render(); }); - const cells = await screen.getAllByRole('gridcell'); + const cells = await screen.findAllByRole('gridcell'); const expectedValues = [ 'Margin', 'BTCUSD Monthly (30 Jun 2022)', diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.spec.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.spec.tsx index 9ebaf76ab..8af04873f 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.spec.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.spec.tsx @@ -12,10 +12,11 @@ import type { ValidationProps } from './use-order-validation'; import { marketTranslations } from './use-order-validation'; import { useOrderValidation } from './use-order-validation'; import { ERROR_SIZE_DECIMAL } from './validate-size'; +import type { DealTicketMarketFragment } from '../deal-ticket/__generated__/DealTicket'; jest.mock('@vegaprotocol/wallet'); -const market = { +const market: DealTicketMarketFragment = { id: 'market-id', decimalPlaces: 2, positionDecimalPlaces: 1, @@ -25,9 +26,18 @@ const market = { __typename: 'TradableInstrument', instrument: { __typename: 'Instrument', + id: 'instrument-id', + name: 'instrument-name', product: { __typename: 'Future', quoteName: 'quote-name', + settlementAsset: { + __typename: 'Asset', + id: 'asset-id', + symbol: 'asset-symbol', + name: 'asset-name', + decimals: 2, + }, }, }, }, @@ -67,12 +77,12 @@ const ERROR = { 'Only limit orders are permitted when market is in auction', MARKET_CONTINUOUS_TIF: 'Until the auction ends, you can only place GFA, GTT, or GTC limit orders', - FIELD_SIZE_REQ: 'You need to provide an amount', - FIELD_SIZE_MIN: `The amount cannot be lower than "${defaultOrder.step}"`, + FIELD_SIZE_REQ: 'You need to provide a size', + FIELD_SIZE_MIN: `Size cannot be lower than "${defaultOrder.step}"`, FIELD_PRICE_REQ: 'You need to provide a price', FIELD_PRICE_MIN: 'The price cannot be negative', FIELD_PRICE_STEP_NULL: 'Order sizes must be in whole numbers for this market', - FIELD_PRICE_STEP_DECIMAL: `The amount field accepts up to ${market.positionDecimalPlaces} decimal places`, + FIELD_PRICE_STEP_DECIMAL: `The size field accepts up to ${market.positionDecimalPlaces} decimal places`, }; function setup( diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.tsx index f03abb4ff..66933303b 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-validation/use-order-validation.tsx @@ -218,14 +218,14 @@ export const useOrderValidation = ({ if (fieldErrors?.size?.type === 'required') { return { isDisabled: true, - message: t('You need to provide an amount'), + message: t('You need to provide a size'), }; } if (fieldErrors?.size?.type === 'min') { return { isDisabled: true, - message: t(`The amount cannot be lower than "${minSize}"`), + message: t(`Size cannot be lower than "${minSize}"`), }; } @@ -262,7 +262,7 @@ export const useOrderValidation = ({ return { isDisabled: true, message: t( - `The amount field accepts up to ${market.positionDecimalPlaces} decimal places` + `The size field accepts up to ${market.positionDecimalPlaces} decimal places` ), }; } diff --git a/libs/fills/src/lib/fills-table.spec.tsx b/libs/fills/src/lib/fills-table.spec.tsx index a8686b446..b05c4aab5 100644 --- a/libs/fills/src/lib/fills-table.spec.tsx +++ b/libs/fills/src/lib/fills-table.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { act, render, screen, waitFor } from '@testing-library/react'; import { getDateTimeFormat } from '@vegaprotocol/react-helpers'; import { Side } from '@vegaprotocol/types'; import type { PartialDeep } from 'type-fest'; @@ -47,11 +47,12 @@ describe('FillsTable', () => { }); it('correct columns are rendered', async () => { - render(); + await act(async () => { + render(); + }); await waitForGridToBeInTheDOM(); await waitForDataToHaveLoaded(); - await screen.findByText('Market'); const headers = screen.getAllByRole('columnheader'); const expectedHeaders = [ 'Market', diff --git a/libs/ui-toolkit/src/components/radio-group/radio-group.tsx b/libs/ui-toolkit/src/components/radio-group/radio-group.tsx index a42cb3cbb..cd0ddff22 100644 --- a/libs/ui-toolkit/src/components/radio-group/radio-group.tsx +++ b/libs/ui-toolkit/src/components/radio-group/radio-group.tsx @@ -54,8 +54,8 @@ export const Radio = ({ id, value, label, disabled }: RadioProps) => { ); const indicatorClasses = classNames( 'block w-[13px] h-[13px] border-4 rounded-full', - 'border-white dark:bg-black', - 'dark:border-white dark:bg-black' + 'bg-white dark:bg-black', + 'border-black dark:border-white' ); return (
diff --git a/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx b/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx index 448ef6098..2a849196e 100644 --- a/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx +++ b/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx @@ -132,7 +132,7 @@ const getIntent = (transaction: VegaTxState) => { case VegaTxStatus.Requested: return Intent.Warning; case VegaTxStatus.Pending: - return Intent.Warning; + return Intent.None; case VegaTxStatus.Error: return Intent.Danger; case VegaTxStatus.Complete: