feat: [console-lite] - refactor wallet connector (#1126)

* feat: [console-lite] - refactor wallet connector

* feat: [console-lite] - refactor wallet connector

* feat: [console-lite] - refactor market selector focusing - review feedback

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -93,6 +93,27 @@ describe('market selector', () => {
     }
   });
 
+  it('keyboard navigation should work well', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('input[placeholder="Search"]').type('{backspace}');
+      cy.get('input[placeholder="Search"]').clear();
+      cy.get('body').realPress('ArrowDown');
+      cy.focused().eq(0).should('contain.text', 'AAVEDAI Monthly');
+      cy.get('body').realPress('ArrowDown');
+      cy.focused().eq(0).should('contain.text', 'ETHBTC').realPress('Enter');
+      cy.location('pathname').should('eq', '/trading/ethbtc-quaterly');
+
+      cy.get('input[placeholder="Search"]').type('{backspace}');
+      cy.get('input[placeholder="Search"]').clear();
+      cy.getByTestId('market-pane').should('be.visible');
+      cy.get('body').realPress('ArrowDown');
+      cy.get('body').realPress('Tab');
+      cy.getByTestId('market-pane').should('not.be.visible');
+    }
+  });
+
   it('mobile view', () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');

apps/console-lite-e2e/src/integration/portfolio-page.test.ts

@@ -11,9 +11,9 @@ describe('Portfolio page', () => {
   it('button for wallet connect should work', () => {
     cy.visit('/');
     cy.get('[href="/portfolio"]').eq(0).click();
-    cy.getByTestId('connect-vega-wallet-text').should('be.visible');
+    cy.getByTestId('trading-connect-wallet').should('be.visible');
     connectVegaWallet();
-    cy.getByTestId('connect-vega-wallet-text').should('not.exist');
+    cy.getByTestId('trading-connect-wallet').should('not.exist');
   });
 
   it('certain tabs should exist', () => {

apps/console-lite-e2e/src/support/mocks/generate-market-names.ts

@@ -82,7 +82,7 @@ export const generateMarketNames = () => {
         __typename: 'Market',
       },
       {
-        id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423',
+        id: 'ethbtc-quaterly',
         name: 'ETHBTC Quarterly (30 Jun 2022)',
         state: 'STATE_ACTIVE',
         tradableInstrument: {

apps/console-lite/src/app/components/deal-ticket/deal-ticket-container.tsx

@@ -1,19 +1,18 @@
 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 { Button, Loader } from '@vegaprotocol/ui-toolkit';
+import { Loader } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { DealTicketSteps } from './deal-ticket-steps';
 import { DealTicketBalance } from './deal-ticket-balance';
 import Baubles from './baubles-decor';
-import LocalContext from '../../context/local-context';
 import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
+import ConnectWallet from '../wallet-connector';
 
 const tempEmptyText = (
   <p>{t('Please select a market from the markets page')}</p>
@@ -39,9 +38,6 @@ 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,
@@ -79,38 +75,10 @@ export const DealTicketContainer = () => {
     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 (
     <section className="flex">
       <section className="w-full md:w-1/2 md:min-w-[500px]">
-        {keypair ? container : connectWallet}
+        {keypair ? container : <ConnectWallet />}
       </section>
       <Baubles />
     </section>

apps/console-lite/src/app/components/portfolio/portfolio.tsx

@@ -1,34 +1,17 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { AccountsContainer } from '@vegaprotocol/accounts';
 import { t } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { Button, Splash, Tabs, Tab } from '@vegaprotocol/ui-toolkit';
-import LocalContext from '../../context/local-context';
+import { Tabs, Tab } from '@vegaprotocol/ui-toolkit';
 import { OrderListContainer } from '@vegaprotocol/orders';
 import { PositionsContainer } from '@vegaprotocol/positions';
 import { FillsContainer } from '@vegaprotocol/fills';
+import ConnectWallet from '../wallet-connector';
 
 export const Portfolio = () => {
   const { keypair } = useVegaWallet();
-  const {
-    vegaWalletDialog: { setConnect },
-  } = useContext(LocalContext);
   if (!keypair) {
-    return (
-      <Splash>
-        <div className="text-center">
-          <p className="mb-12" data-testid="connect-vega-wallet-text">
-            {t('Connect your Vega wallet')}
-          </p>
-          <Button
-            onClick={() => setConnect(true)}
-            data-testid="vega-wallet-connect"
-          >
-            {t('Connect')}
-          </Button>
-        </div>
-      </Splash>
-    );
+    return <ConnectWallet />;
   }
   return (
     <Tabs>

apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx

@@ -131,7 +131,6 @@ describe('SimpleMarketList', () => {
         document.querySelector('.ag-center-cols-container')
       ).toBeInTheDocument();
     });
-    screen.debug();
     await waitFor(() => {
       const container = document.querySelector('.ag-center-cols-container');
       expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);

apps/console-lite/src/app/components/wallet-connector/index.tsx

@@ -0,0 +1,40 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import * as React from 'react';
+import { useContext } from 'react';
+import LocalContext from '../../context/local-context';
+
+const ConnectWallet = () => {
+  const {
+    vegaWalletDialog: { setConnect },
+  } = useContext(LocalContext);
+  return (
+    <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>
+  );
+};
+
+export default ConnectWallet;

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

@@ -136,8 +136,12 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
           break;
 
         case 'Enter':
+          event.preventDefault();
           handleMarketSelect(market);
           break;
+        default:
+          setShowPane(false);
+          setLookup(market.name);
       }
     },
     [results, handleMarketSelect]