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

fix(deal-ticket): make ticket submit button always enabled (#4055)

Browse Source
This commit is contained in:
Matthew Russell 2023-06-08 22:30:25 -07:00 committed by GitHub
parent f66e976b66
commit b6286cd0f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts
View File

@ -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');
});
});
});

6
apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts
View File

@ -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')

3
apps/trading-e2e/src/integration/trading-deal-ticket-submit-account.cy.ts
View File

@ -23,7 +23,8 @@ 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',

6
apps/trading-e2e/src/integration/trading-deal-ticket-submit-suspended.cy.ts
View File

@ -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'

1
libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
View File

@ -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',
}}
/>
);

10
libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx
View File

@ -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 <Link onClick={onClickCollateral}>collateral</Link>.
{t('See all your')}{' '}
<Link onClick={onClickCollateral}>collateral</Link>.
</>
)}
</>
@ -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',
}}
/>
);

14
libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
View File

@ -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 (
<div className="mb-2">
<Button
variant={variant}
fill
type="submit"
disabled={isDisabled}
data-testid="place-order"
>
<Button variant={variant} fill type="submit" data-testid="place-order">
{t('Place order')}
</Button>
</div>

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

@ -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}`)

5
libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
View File

@ -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}
/>
<DealTicketButton
disabled={Object.keys(errors).length >= 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',
}}
/>
</div>

22
libs/deal-ticket/src/utils/validate-market-state.ts
View File

@ -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();
}
};

6
libs/deal-ticket/src/utils/validate-market-trading-mode.ts
View File

@ -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');
}