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

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

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

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

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'

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

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

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) => {
+export const DealTicketButton = ({ variant }: Props) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const isDisabled = !pubKey || isReadOnly || disabled;
   return (
     <div className="mb-2">
-      <Button
+      <Button variant={variant} fill type="submit" data-testid="place-order">
-        variant={variant}
-        fill
-        type="submit"
-        disabled={isDisabled}
-        data-testid="place-order"
-      >
         {t('Place order')}
       </Button>
     </div>

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

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}
         />
         <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>

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,
+      MarketState.STATE_SETTLED,
-      Schema.MarketState.STATE_REJECTED,
+      MarketState.STATE_REJECTED,
-      Schema.MarketState.STATE_TRADING_TERMINATED,
+      MarketState.STATE_TRADING_TERMINATED,
-      Schema.MarketState.STATE_CANCELLED,
+      MarketState.STATE_CANCELLED,
-      Schema.MarketState.STATE_CLOSED,
+      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();
   }
 };

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