feat(console-lite): enabling navigation from market to trade (#498)

* feat(console-lite): enabling navigation from market to trade

* feat(console-lite): add review changes

* feat(console-lite): fix broken test

* feat(console-lite): change import hierarchy external libraries

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

@@ -1,12 +1,15 @@
-import type { DealTicketContainerProps } from '@vegaprotocol/deal-ticket';
+import { useParams } from 'react-router-dom';
 import {
   DealTicketManager,
   DealTicketContainer as Container,
 } from '@vegaprotocol/deal-ticket';
 import { DealTicketSteps } from './deal-ticket-steps';
 
-export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
-  return (
+const tempEmptyText = <p>Please select a market from the markets page</p>;
+
+export const DealTicketContainer = () => {
+  const { marketId } = useParams<{ marketId: string }>();
+  return marketId ? (
     <Container marketId={marketId}>
       {(data) => (
         <DealTicketManager market={data.market}>
@@ -14,5 +17,7 @@ export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
         </DealTicketManager>
       )}
     </Container>
+  ) : (
+    tempEmptyText
   );
 };

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

@@ -70,7 +70,7 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
     {
       label: 'Select Asset',
       description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
-      component: <div />,
+      component: <h1 className="font-bold mb-16">{market.name}</h1>,
     },
     {
       label: 'Select Order Type',

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

@@ -5,6 +5,13 @@ import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketList from './simple-market-list';
 import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate,
+}));
+
 jest.mock('./data-provider', () => jest.fn());
 
 jest.mock('@vegaprotocol/react-helpers', () => ({

apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, Lozenge, Splash } from '@vegaprotocol/ui-toolkit';
@@ -9,6 +10,7 @@ import DataProvider from './data-provider';
 import { MARKET_STATUS } from './constants';
 
 const SimpleMarketList = () => {
+  const navigate = useNavigate();
   const variables = useMemo(
     () => ({
       CandleInterval: 'I1H',
@@ -21,10 +23,13 @@ const SimpleMarketList = () => {
     undefined, // @TODO - if we need a live update in the future
     variables
   );
-  const onClick = useCallback((marketId) => {
-    // @TODO - let's try to have navigation first
-    console.log('trigger market', marketId);
-  }, []);
+  const onClick = useCallback(
+    (marketId) => {
+      navigate(`/trading/${marketId}`);
+    },
+    [navigate]
+  );
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
       {data && data.length > 0 ? (

apps/simple-trading-app/src/app/routes/router-config.tsx

@@ -28,13 +28,13 @@ export const routerConfig = [
     path: ROUTES.TRADING,
     name: 'Trading',
     text: t('Trading'),
-    element: (
-      <DealTicketContainer
-        marketId={
-          '41013c28d53a72225c07cf2660cdd415d9dd0e9317ec4574e77592332db35596'
-        }
-      />
-    ),
+    element: <DealTicketContainer />,
+    children: [
+      {
+        path: ':marketId',
+        element: <DealTicketContainer />,
+      },
+    ],
   },
   {
     path: ROUTES.LIQUIDITY,

apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts

@@ -9,6 +9,7 @@ export const generateDealTicketQuery = (
   const defaultResult: DealTicketQuery = {
     market: {
       id: 'market-id',
+      name: 'ETHBTC Quarterly (30 Jun 2022)',
       decimalPlaces: 2,
       positionDecimalPlaces: 1,
       state: MarketState.Active,

libs/deal-ticket/src/__generated__/DealTicketQuery.ts

@@ -55,6 +55,10 @@ export interface DealTicketQuery_market {
    * Market ID
    */
   id: string;
+  /**
+   * Market full name
+   */
+  name: string;
   /**
    * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct
    * number denominated in the currency of the Market. (uint64)

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

@@ -1,5 +1,5 @@
-import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { gql, useQuery } from '@apollo/client';
+import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { DealTicketManager } from './deal-ticket-manager';
 import type {
   DealTicketQuery,
@@ -11,6 +11,7 @@ const DEAL_TICKET_QUERY = gql`
   query DealTicketQuery($marketId: ID!) {
     market(id: $marketId) {
       id
+      name
       decimalPlaces
       positionDecimalPlaces
       state