fix(trading): dont show connect wallet message in deal ticket (#4482)

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

@@ -22,9 +22,8 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
   it('must show place order button and connect wallet if wallet is not connected', () => {
     // 0003-WTXN-001
     cy.getByTestId('connect-vega-wallet'); // Not connected
-    cy.getByTestId('order-connect-wallet').should('exist');
     cy.getByTestId(placeOrderBtn).should('exist');
-    cy.getByTestId('deal-ticket-connect-wallet').should('exist');
+    cy.getByTestId('get-started-button').should('exist');
   });
 
   it('must be able to select order direction - long/short', function () {
@@ -45,7 +44,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('order-connect-wallet').click();
+    cy.getByTestId('get-started-button').click();
     cy.getByTestId('dialog-content').should('be.visible');
     cy.getByTestId('connectors-list')
       .find('[data-testid="connector-jsonRpc"]')

apps/trading/components/welcome-dialog/get-started.tsx

@@ -33,18 +33,18 @@ export const GetStarted = ({ lead }: Props) => {
     setOnboardingViewed('true');
   };
 
-  if (!pubKey && !isBrowserWalletInstalled()) {
+  const wrapperClasses = classNames(
+    'flex flex-col py-4 px-6 gap-4 rounded',
+    'bg-vega-blue-300 dark:bg-vega-blue-700',
+    'border border-vega-blue-350 dark:border-vega-blue-650',
+    { 'mt-8': !lead }
+  );
+
+  if (!isBrowserWalletInstalled()) {
     return (
-      <div
+      <div className={wrapperClasses} data-testid="get-started-banner">
-        className={classNames(
-          'flex flex-col bg-vega-blue-300 dark:bg-vega-blue-700 border border-vega-blue-350 dark:border-vega-blue-650 px-6 gap-4',
-          { 'py-4': lead },
-          { 'mt-8 py-6': !lead }
-        )}
-        data-testid="get-started-banner"
-      >
         {lead && <h2>{lead}</h2>}
-        <h3>{t('Get started')}</h3>
+        <h3 className="text-lg">{t('Get started')}</h3>
         <div>
           <ul className="list-decimal list-inside">
             <li>{t('Get a Vega wallet')}</li>
@@ -57,7 +57,6 @@ export const GetStarted = ({ lead }: Props) => {
           <TradingButton
             intent={Intent.Info}
             onClick={onButtonClick}
-            className="block w-full"
             data-testid="get-started-button"
           >
             {t('Get started')}
@@ -82,5 +81,28 @@ export const GetStarted = ({ lead }: Props) => {
       </div>
     );
   }
+
+  if (!pubKey) {
+    return (
+      <div className={wrapperClasses}>
+        <p className="text-sm mb-1">
+          You need a{' '}
+          <ExternalLink href="https://vega.xyz/wallet">
+            Vega wallet
+          </ExternalLink>{' '}
+          to start trading in this market.
+        </p>
+        <TradingButton
+          onClick={openVegaWalletDialog}
+          size="small"
+          data-testid="order-connect-wallet"
+          intent={Intent.Info}
+        >
+          {t('Connect wallet')}
+        </TradingButton>
+      </div>
+    );
+  }
+
   return null;
 };

apps/trading/components/welcome-dialog/welcome-dialog-content.tsx

@@ -31,12 +31,12 @@ export const WelcomeDialogContent = () => {
         <ul className="ml-0">
           <ListItemContent
             icon={<NonCustodialIcon />}
-            title={t('Non-cutodial and pseudonymous')}
+            title={t('Non-custodial and pseudonymous')}
             text={t('No third party has access to your funds.')}
           />
           <ListItemContent
             icon={<PurposeBuiltIcon />}
-            title={t('Purpose built proof of stake blockhain')}
+            title={t('Purpose built proof of stake blockchain')}
             text={t(
               'Fully decentralised high performance peer-to-network trading.'
             )}

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.spec.tsx

@@ -158,16 +158,13 @@ describe('StopOrder', () => {
     );
   });
 
-  it('shows no wallet warning and do not submit if no wallet connected', async () => {
+  it('does not submit if no wallet connected', async () => {
     render(generateJsx(null));
     await userEvent.type(screen.getByTestId(sizeInput), '1');
     await userEvent.type(screen.getByTestId(priceInput), '1');
     await userEvent.type(screen.getByTestId(triggerPriceInput), '1');
     await userEvent.click(screen.getByTestId(submitButton));
     expect(submit).not.toBeCalled();
-    expect(
-      screen.getByTestId('deal-ticket-connect-wallet')
-    ).toBeInTheDocument();
   });
 
   it('calls submit if form is valid', async () => {

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx

@@ -568,7 +568,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </div>
         </>
       )}
-      <NoWalletWarning pubKey={pubKey} isReadOnly={isReadOnly} asset={asset} />
+      <NoWalletWarning isReadOnly={isReadOnly} />
       <DealTicketButton side={side} label={t('Submit Stop Order')} />
       <DealTicketFeeDetails
         order={{

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -13,14 +13,9 @@ import { SideSelector } from './side-selector';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
-import {
+import { normalizeOrderSubmission, useVegaWallet } from '@vegaprotocol/wallet';
-  normalizeOrderSubmission,
-  useVegaWallet,
-  useVegaWalletDialogStore,
-} from '@vegaprotocol/wallet';
 import {
   Checkbox,
-  ExternalLink,
   InputError,
   Intent,
   Notification,
@@ -637,13 +632,7 @@ interface SummaryMessageProps {
 
 export const NoWalletWarning = ({
   isReadOnly,
-  pubKey,
+}: Pick<SummaryMessageProps, 'isReadOnly'>) => {
-  asset,
-}: Pick<SummaryMessageProps, 'isReadOnly' | 'pubKey' | 'asset'>) => {
-  const assetSymbol = asset.symbol;
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
   if (isReadOnly) {
     return (
       <div className="mb-2">
@@ -655,31 +644,6 @@ export const NoWalletWarning = ({
       </div>
     );
   }
-  if (!pubKey) {
-    return (
-      <div className="mb-2">
-        <Notification
-          testId={'deal-ticket-connect-wallet'}
-          intent={Intent.Warning}
-          message={
-            <p className="text-sm pb-2">
-              You need a{' '}
-              <ExternalLink href="https://vega.xyz/wallet">
-                Vega wallet
-              </ExternalLink>{' '}
-              with {assetSymbol} to start trading in this market.
-            </p>
-          }
-          buttonProps={{
-            text: t('Connect wallet'),
-            action: openVegaWalletDialog,
-            dataTestId: 'order-connect-wallet',
-            size: 'small',
-          }}
-        />
-      </div>
-    );
-  }
   return null;
 };
 
@@ -698,13 +662,7 @@ const SummaryMessage = memo(
     // Specific error UI for if balance is so we can
     // render a deposit dialog
     if (isReadOnly || !pubKey) {
-      return (
+      return <NoWalletWarning isReadOnly={isReadOnly} />;
-        <NoWalletWarning
-          isReadOnly={isReadOnly}
-          asset={asset}
-          pubKey={pubKey}
-        />
-      );
     }
 
     if (errorMessage === SummaryValidationType.NoCollateral) {