From b6286cd0f3a769ae61f2f359b8fcbc49c21b4d55 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Thu, 8 Jun 2023 22:30:25 -0700 Subject: [PATCH] fix(deal-ticket): make ticket submit button always enabled (#4055) --- .../trading-deal-ticket-basics.cy.ts | 3 ++- .../trading-deal-ticket-order.cy.ts | 6 +++-- .../trading-deal-ticket-submit-account.cy.ts | 5 +++-- ...trading-deal-ticket-submit-suspended.cy.ts | 6 ++--- .../deal-ticket-validation/margin-warning.tsx | 1 + .../zero-balance-error.tsx | 10 ++++++--- .../deal-ticket/deal-ticket-button.tsx | 14 ++---------- .../deal-ticket/deal-ticket.spec.tsx | 3 +++ .../components/deal-ticket/deal-ticket.tsx | 5 +++-- .../src/utils/validate-market-state.ts | 22 +++++++++---------- .../src/utils/validate-market-trading-mode.ts | 6 ++--- 11 files changed, 42 insertions(+), 39 deletions(-) diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts index f3af62e90..aa5fa7a0c 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts @@ -88,7 +88,8 @@ describe( .pop() ?.toLowerCase()} and not accepting orders` ); - cy.getByTestId('place-order').should('be.disabled'); + // 7002-SORD-060 + cy.getByTestId('place-order').should('be.enabled'); }); }); }); diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts index 5ac9b5133..9e3030f10 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts @@ -77,7 +77,8 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => { it('must warn if order size input has too many digits after the decimal place', function () { // 7002-SORD-016 cy.getByTestId(orderSizeField).clear().type('1.234'); - cy.getByTestId(placeOrderBtn).should('be.disabled'); + // 7002-SORD-060 + cy.getByTestId(placeOrderBtn).should('be.enabled'); cy.getByTestId('dealticket-error-message-size-market').should( 'have.text', 'Size must be whole numbers for this market' @@ -86,12 +87,13 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => { it('must warn if order size is set to 0', function () { cy.getByTestId(orderSizeField).clear().type('0'); - cy.getByTestId(placeOrderBtn).should('be.disabled'); + cy.getByTestId(placeOrderBtn).should('be.enabled'); cy.getByTestId('dealticket-error-message-size-market').should( 'have.text', 'Size cannot be lower than 1' ); }); + it('must have total margin available', () => { // 7001-COLL-011 cy.getByTestId('tab-ticket') diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts index dd6c8f04e..fb703229b 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts @@ -23,13 +23,14 @@ describe( }); it('should show an error if your balance is zero', () => { - cy.getByTestId('place-order').should('be.disabled'); + // 7002-SORD-060 + cy.getByTestId('place-order').should('be.enabled'); // 7002-SORD-003 cy.getByTestId('dealticket-error-message-zero-balance').should( 'have.text', 'You need ' + 'tDAI' + - ' in your wallet to trade in this market.See all your collateral.Make a deposit' + ' in your wallet to trade in this market. See all your collateral.Make a deposit' ); cy.getByTestId('deal-ticket-deposit-dialog-button').should('exist'); }); diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket-submit-suspended.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket-submit-suspended.cy.ts index e766410e9..18405b4e9 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket-submit-suspended.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket-submit-suspended.cy.ts @@ -34,9 +34,9 @@ describe('suspended market validation', { tags: '@regression' }, () => { it('should show warning for market order', function () { cy.getByTestId(toggleMarket).click(); - cy.getByTestId(placeOrderBtn).should('not.be.disabled'); + // 7002-SORD-060 + cy.getByTestId(placeOrderBtn).should('be.enabled'); cy.getByTestId(placeOrderBtn).click(); - cy.getByTestId(placeOrderBtn).should('be.disabled'); cy.getByTestId('dealticket-error-message-type').should( 'have.text', 'This market is in auction until it reaches sufficient liquidity. Only limit orders are permitted when market is in auction' @@ -59,7 +59,7 @@ describe('suspended market validation', { tags: '@regression' }, () => { cy.getByTestId(orderTIFDropDown).select( TIFlist.filter((item) => item.code === 'FOK')[0].value ); - cy.getByTestId(placeOrderBtn).should('be.disabled'); + cy.getByTestId(placeOrderBtn).should('be.enabled'); cy.getByTestId('dealticket-error-message-tif').should( 'have.text', 'This market is in auction until it reaches sufficient liquidity. Until the auction ends, you can only place GFA, GTT, or GTC limit orders' diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx index 6fca7ea94..86efe1982 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx @@ -31,6 +31,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => { text: t(`Deposit ${asset.symbol}`), action: () => openDepositDialog(asset.id), dataTestId: 'deal-ticket-deposit-dialog-button', + size: 'sm', }} /> ); diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx index aca37b255..5866a2ea6 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx @@ -21,10 +21,14 @@ export const ZeroBalanceError = ({ testId="dealticket-error-message-zero-balance" message={ <> - You need {asset.symbol} in your wallet to trade in this market. + {t( + 'You need %s in your wallet to trade in this market. ', + asset.symbol + )} {onClickCollateral && ( <> - See all your collateral. + {t('See all your')}{' '} + collateral. )} @@ -33,7 +37,7 @@ export const ZeroBalanceError = ({ text: t(`Make a deposit`), action: () => openDepositDialog(asset.id), dataTestId: 'deal-ticket-deposit-dialog-button', - size: 'md', + size: 'sm', }} /> ); diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx index a7e84fcfa..361b2fc0c 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx @@ -1,25 +1,15 @@ import { t } from '@vegaprotocol/i18n'; import type { ButtonVariant } from '@vegaprotocol/ui-toolkit'; import { Button } from '@vegaprotocol/ui-toolkit'; -import { useVegaWallet } from '@vegaprotocol/wallet'; interface Props { - disabled: boolean; variant: ButtonVariant; } -export const DealTicketButton = ({ disabled, variant }: Props) => { - const { pubKey, isReadOnly } = useVegaWallet(); - const isDisabled = !pubKey || isReadOnly || disabled; +export const DealTicketButton = ({ variant }: Props) => { return (
-
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx index 548b04679..89c0b6c00 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx @@ -42,6 +42,9 @@ describe('DealTicket', () => { it('should display ticket defaults', () => { const { container } = render(generateJsx()); + // place order button should always be enabled + expect(screen.getByTestId('place-order')).toBeEnabled(); + // Assert defaults are used expect( screen.getByTestId(`order-type-${Schema.OrderType.TYPE_MARKET}`) diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx index 708b67d6e..d568afb57 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx @@ -217,6 +217,8 @@ export const DealTicket = ({ }); return; } + + // No error found above clear the error in case it was active on a previous render clearErrors('summary'); }, [ marketState, @@ -480,7 +482,6 @@ export const DealTicket = ({ onClickCollateral={onClickCollateral} /> = 1 || isReadOnly} variant={ order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary' } @@ -562,7 +563,7 @@ const SummaryMessage = memo( text: t('Connect wallet'), action: openVegaWalletDialog, dataTestId: 'order-connect-wallet', - size: 'md', + size: 'sm', }} /> diff --git a/libs/deal-ticket/src/utils/validate-market-state.ts b/libs/deal-ticket/src/utils/validate-market-state.ts index 0208ab973..4e87c55d2 100644 --- a/libs/deal-ticket/src/utils/validate-market-state.ts +++ b/libs/deal-ticket/src/utils/validate-market-state.ts @@ -1,14 +1,14 @@ import { t } from '@vegaprotocol/i18n'; -import * as Schema from '@vegaprotocol/types'; +import { MarketState, MarketStateMapping } from '@vegaprotocol/types'; -export const validateMarketState = (state: Schema.MarketState) => { +export const validateMarketState = (state: MarketState) => { if ( [ - Schema.MarketState.STATE_SETTLED, - Schema.MarketState.STATE_REJECTED, - Schema.MarketState.STATE_TRADING_TERMINATED, - Schema.MarketState.STATE_CANCELLED, - Schema.MarketState.STATE_CLOSED, + MarketState.STATE_SETTLED, + MarketState.STATE_REJECTED, + MarketState.STATE_TRADING_TERMINATED, + MarketState.STATE_CANCELLED, + MarketState.STATE_CLOSED, ].includes(state) ) { return t( @@ -16,7 +16,7 @@ export const validateMarketState = (state: Schema.MarketState) => { ); } - if (state === Schema.MarketState.STATE_PROPOSED) { + if (state === MarketState.STATE_PROPOSED) { return t( `This market is ${marketTranslations( state @@ -27,11 +27,11 @@ export const validateMarketState = (state: Schema.MarketState) => { return true; }; -const marketTranslations = (marketState: Schema.MarketState) => { +const marketTranslations = (marketState: MarketState) => { switch (marketState) { - case Schema.MarketState.STATE_TRADING_TERMINATED: + case MarketState.STATE_TRADING_TERMINATED: return t('terminated'); default: - return t(Schema.MarketStateMapping[marketState]).toLowerCase(); + return t(MarketStateMapping[marketState]).toLowerCase(); } }; diff --git a/libs/deal-ticket/src/utils/validate-market-trading-mode.ts b/libs/deal-ticket/src/utils/validate-market-trading-mode.ts index 687de02d0..7bff037a6 100644 --- a/libs/deal-ticket/src/utils/validate-market-trading-mode.ts +++ b/libs/deal-ticket/src/utils/validate-market-trading-mode.ts @@ -1,10 +1,10 @@ import { t } from '@vegaprotocol/i18n'; -import * as Schema from '@vegaprotocol/types'; +import { MarketTradingMode } from '@vegaprotocol/types'; export const validateMarketTradingMode = ( - marketTradingMode: Schema.MarketTradingMode + marketTradingMode: MarketTradingMode ) => { - if (marketTradingMode === Schema.MarketTradingMode.TRADING_MODE_NO_TRADING) { + if (marketTradingMode === MarketTradingMode.TRADING_MODE_NO_TRADING) { return t('Trading terminated'); }