feat(console-lite): add wallet connect dialog before trading steps (#1063)

* feat(console-lite): add wallet connect dialog before trading steps

* chore(console-lite): review fixes

* fix(console-lite): fix failing tests

apps/simple-trading-app-e2e/src/integration/market-selector.test.ts

@@ -1,3 +1,5 @@
+import { connectVegaWallet } from '../support/connect-wallet';
+
 describe('market selector', () => {
   let markets;
   before(() => {
@@ -18,6 +20,7 @@ describe('market selector', () => {
   it('should be properly rendered', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
       cy.get('input[placeholder="Search"]').should(
         'have.value',
         markets[0].name
@@ -41,6 +44,7 @@ describe('market selector', () => {
   it('typing should change list', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
       cy.get('input[placeholder="Search"]').type('{backspace}');
       cy.getByTestId('market-pane')
         .children()
@@ -73,6 +77,7 @@ describe('market selector', () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
       cy.get('[role="dialog"]').should('not.exist');
       cy.getByTestId('arrow-button').click();
       cy.get('[role="dialog"]').should('be.visible');

apps/simple-trading-app-e2e/src/integration/market-trade.test.ts

@@ -30,9 +30,23 @@ describe('Market trade', () => {
     });
   });
 
+  it('should not display steps if wallet is disconnected', () => {
+    cy.visit(`/trading/${markets[0].id}`);
+    cy.getByTestId('trading-connect-wallet')
+      .find('h3')
+      .should('have.text', 'Please connect your Vega wallet to make a trade');
+    cy.getByTestId('trading-connect-wallet')
+      .find('button')
+      .should('have.text', 'Connect Vega wallet');
+    cy.getByTestId('trading-connect-wallet')
+      .find('a')
+      .should('have.text', 'https://vega.xyz/wallet');
+  });
+
   it('side selector should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').should(
         'have.text',
         'Long'
@@ -51,6 +65,7 @@ describe('Market trade', () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
       cy.getByTestId('next-button').scrollIntoView().click();
 
       cy.get('button[aria-label="Open long position"]').should(
@@ -204,7 +219,7 @@ describe('Market trade', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
       connectVegaWallet();
-      cy.get('h3').contains('Review Trade').click();
+      cy.get('#step-3-control').click();
 
       cy.getByTestId('review-trade')
         .get('#contracts_tooltip_trigger')
@@ -237,7 +252,9 @@ describe('Market trade', () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
-      cy.get('h3').contains('Review Trade').click();
+      connectVegaWallet();
+      cy.get('#step-3-control').click();
+
       cy.getByTestId('review-trade')
         .get('#contracts_tooltip_trigger')
         .realTouch();

apps/simple-trading-app/src/app/components/deal-ticket/baubles-decor.tsx

@@ -5,7 +5,7 @@ import Star from '../icons/star';
 
 const Baubles = () => {
   return (
-    <div className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
+    <aside className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
       <div className="absolute top-[100px] w-[393px] left-[19%] h-[517px]">
         <div className="absolute top-[82px] right-[34px] w-[100px] h-[100px] clip-path-rounded">
           <Video />
@@ -29,7 +29,7 @@ const Baubles = () => {
           <Star />
         </div>
       </div>
-    </div>
+    </aside>
   );
 };
 

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
+import { useContext } from 'react';
 import { useParams } from 'react-router-dom';
+import { gql, useQuery } from '@apollo/client';
 import {
   DealTicketManager,
   DealTicketContainer as Container,
 } from '@vegaprotocol/deal-ticket';
-import { DealTicketSteps } from './deal-ticket-steps';
+import { Button, Loader } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { gql, useQuery } from '@apollo/client';
+import { DealTicketSteps } from './deal-ticket-steps';
 import { DealTicketBalance } from './deal-ticket-balance';
-import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
 import Baubles from './baubles-decor';
+import LocalContext from '../../context/local-context';
+import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
 
-const tempEmptyText = <p>Please select a market from the markets page</p>;
+const tempEmptyText = (
+  <p>{t('Please select a market from the markets page')}</p>
+);
 
 const PARTY_BALANCE_QUERY = gql`
   query PartyBalanceQuery($partyId: ID!) {
@@ -33,6 +39,9 @@ const PARTY_BALANCE_QUERY = gql`
 export const DealTicketContainer = () => {
   const { marketId } = useParams<{ marketId: string }>();
   const { keypair } = useVegaWallet();
+  const {
+    vegaWalletDialog: { setConnect },
+  } = useContext(LocalContext);
 
   const { data: partyData, loading } = useQuery<PartyBalanceQuery>(
     PARTY_BALANCE_QUERY,
@@ -42,35 +51,68 @@ export const DealTicketContainer = () => {
     }
   );
 
+  const loader = <Loader />;
+
+  const container = marketId ? (
+    <Container marketId={marketId}>
+      {(data) => {
+        const balance = (
+          <DealTicketBalance
+            className="mb-16"
+            settlementAsset={
+              data.market.tradableInstrument.instrument.product?.settlementAsset
+            }
+            accounts={partyData?.party?.accounts || []}
+            isWalletConnected={!!keypair?.pub}
+          />
+        );
+
+        return (
+          <DealTicketManager market={data.market}>
+            {loading ? loader : balance}
+            <DealTicketSteps market={data.market} partyData={partyData} />
+          </DealTicketManager>
+        );
+      }}
+    </Container>
+  ) : (
+    tempEmptyText
+  );
+
+  const connectWallet = (
+    <section
+      className="p-32 bg-white-normal dark:bg-offBlack"
+      data-testid="trading-connect-wallet"
+    >
+      <h3 className="mb-16 text-2xl text-offBlack dark:text-white">
+        {t('Please connect your Vega wallet to make a trade')}
+      </h3>
+      <Button
+        variant="primary"
+        onClick={() => setConnect(true)}
+        className="h-[50px] mb-16"
+      >
+        {t('Connect Vega wallet')}
+      </Button>
+      <h4 className="text-lg text-offBlack dark:text-white">
+        {t("Don't have a wallet?")}
+      </h4>
+      <p>
+        {t('Head over to ')}
+        <a className="text-blue" href="https://vega.xyz/wallet">
+          https://vega.xyz/wallet
+        </a>
+        {t(' and follow the steps to create one.')}
+      </p>
+    </section>
+  );
+
   return (
-    <div className="flex">
-      <div className="w-full md:w-1/2 md:min-w-[500px]">
-        {marketId ? (
-          <Container marketId={marketId}>
-            {(data) => (
-              <DealTicketManager market={data.market}>
-                {loading ? (
-                  'Loading...'
-                ) : (
-                  <DealTicketBalance
-                    className="mb-16"
-                    settlementAsset={
-                      data.market.tradableInstrument.instrument.product
-                        ?.settlementAsset
-                    }
-                    accounts={partyData?.party?.accounts || []}
-                    isWalletConnected={!!keypair?.pub}
-                  />
-                )}
-                <DealTicketSteps market={data.market} partyData={partyData} />
-              </DealTicketManager>
-            )}
-          </Container>
-        ) : (
-          tempEmptyText
-        )}
-      </div>
+    <section className="flex">
+      <section className="w-full md:w-1/2 md:min-w-[500px]">
+        {keypair ? container : connectWallet}
+      </section>
       <Baubles />
-    </div>
+    </section>
   );
 };