From 9601622a406c2ccaee033131447a557bfef4de74 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Fri, 30 Jun 2023 19:25:59 -0700
Subject: [PATCH] feat: set default view for trading and portfolio page

---
 apps/trading/client-pages/market/market.tsx   |  9 +++-
 .../client-pages/portfolio/portfolio.tsx      |  8 ++++
 apps/trading/components/navbar/navbar.tsx     | 13 -----
 apps/trading/components/sidebar/sidebar.tsx   |  7 ++-
 .../market-info/market-info-accordion.tsx     | 48 +++++++++++--------
 5 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx
index 798c4b5d3..e9c709a13 100644
--- a/apps/trading/client-pages/market/market.tsx
+++ b/apps/trading/client-pages/market/market.tsx
@@ -14,6 +14,7 @@ import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { useSidebar } from '../../components/sidebar';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
   return markPrice && decimalPlaces
@@ -61,7 +62,7 @@ const TitleUpdater = ({
 export const MarketPage = () => {
   const { marketId } = useParams();
   const navigate = useNavigate();
-
+  const { view, setView } = useSidebar();
   const { screenSize } = useScreenDimensions();
   const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const update = useGlobalStore((store) => store.update);
@@ -81,6 +82,12 @@ export const MarketPage = () => {
     }
   }, [update, lastMarketId, data?.id]);
 
+  useEffect(() => {
+    if (view === null) {
+      setView('order');
+    }
+  }, [view, setView]);
+
   const tradeView = useMemo(() => {
     if (largeScreen) {
       return (
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index cc4dee63b..6e6f72c44 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -21,6 +21,7 @@ import {
   ResizableGridPanel,
   usePaneLayout,
 } from '../../components/resizable-grid';
+import { useSidebar } from '../../components/sidebar';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -35,6 +36,7 @@ const WithdrawalsIndicator = () => {
 };
 
 export const Portfolio = () => {
+  const { view, setView } = useSidebar();
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
@@ -43,6 +45,12 @@ export const Portfolio = () => {
     updateTitle(titlefy([t('Portfolio')]));
   }, [updateTitle]);
 
+  useEffect(() => {
+    if (view === 'order' || view === null) {
+      setView('transfer');
+    }
+  }, [view, setView]);
+
   const onMarketClick = useMarketClickHandler(true);
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'h-full max-h-full flex flex-col';
diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index ae2c2e88f..bb823d595 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -29,7 +29,6 @@ import {
   ProtocolUpgradeCountdown,
   ProtocolUpgradeCountdownMode,
 } from '@vegaprotocol/proposals';
-import { Link, NavLink } from 'react-router-dom';
 
 export const Navbar = ({
   theme = 'system',
@@ -44,17 +43,6 @@ export const Navbar = ({
     ? Links[Routes.MARKET](marketId)
     : Links[Routes.MARKET]();
 
-  // return (
-  //   <nav className="flex items-center gap-4 py-2">
-  //     <div>Network switcher</div>
-  //     <NavLink to={Links[Routes.MARKETS]()}>Markets</NavLink>
-  //     <NavLink to={tradingPath} end>
-  //       Trading
-  //     </NavLink>
-  //     <NavLink to={Links[Routes.PORTFOLIO]()}>Portfolio</NavLink>
-  //   </nav>
-  // );
-
   return (
     <Navigation
       theme={theme}
@@ -63,7 +51,6 @@ export const Navbar = ({
           <ProtocolUpgradeCountdown
             mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
           />
-          {/* <SettingsButton /> */}
           <VegaWalletConnectButton />
         </>
       }
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index d5e74afd2..cf064b028 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -14,6 +14,7 @@ import { Settings } from '../settings';
 import classNames from 'classnames';
 import { NodeHealthContainer } from '../node-health';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
+import { t } from '@vegaprotocol/i18n';
 
 type SidebarView =
   | 'order'
@@ -114,14 +115,16 @@ const SidebarDivider = () => {
 };
 
 export const SidebarContent = () => {
-  const { view } = useSidebar();
   const params = useParams();
+  const { view } = useSidebar();
 
   let content = null;
 
   if (view === 'order') {
     if (params.marketId) {
       content = <TradingViews.ticket.component marketId={params.marketId} />;
+    } else {
+      content = <p>{t('No market selected')}</p>;
     }
   }
 
@@ -144,6 +147,8 @@ export const SidebarContent = () => {
   if (view === 'info') {
     if (params.marketId) {
       content = <MarketInfoAccordionContainer marketId={params.marketId} />;
+    } else {
+      content = <p>{t('No market selected')}</p>;
     }
   }
 
diff --git a/libs/markets/src/lib/components/market-info/market-info-accordion.tsx b/libs/markets/src/lib/components/market-info/market-info-accordion.tsx
index 01452be03..737660596 100644
--- a/libs/markets/src/lib/components/market-info/market-info-accordion.tsx
+++ b/libs/markets/src/lib/components/market-info/market-info-accordion.tsx
@@ -127,13 +127,19 @@ export const MarketInfoAccordion = ({
           />
           {marketAccounts
             .filter((a) => a.type === Schema.AccountType.ACCOUNT_TYPE_INSURANCE)
-            .map((a) => (
-              <AccordionItem
-                itemId={`${a.type}:${a.asset.id}`}
-                title={t('Insurance pool')}
-                content={<InsurancePoolInfoPanel market={market} account={a} />}
-              />
-            ))}
+            .map((a) => {
+              const id = `${a.type}:${a.asset.id}`;
+              return (
+                <AccordionItem
+                  key={id}
+                  itemId={id}
+                  title={t('Insurance pool')}
+                  content={
+                    <InsurancePoolInfoPanel market={market} account={a} />
+                  }
+                />
+              );
+            })}
         </Accordion>
       </div>
       <div className="mb-8">
@@ -201,18 +207,22 @@ export const MarketInfoAccordion = ({
             content={<RiskFactorsInfoPanel market={market} />}
           />
           {(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-            (_, triggerIndex) => (
-              <AccordionItem
-                itemId={`trigger-${triggerIndex}`}
-                title={t(`Price monitoring bounds ${triggerIndex + 1}`)}
-                content={
-                  <PriceMonitoringBoundsInfoPanel
-                    market={market}
-                    triggerIndex={triggerIndex}
-                  />
-                }
-              />
-            )
+            (_, triggerIndex) => {
+              const id = `trigger-${triggerIndex}`;
+              return (
+                <AccordionItem
+                  key={id}
+                  itemId={id}
+                  title={t(`Price monitoring bounds ${triggerIndex + 1}`)}
+                  content={
+                    <PriceMonitoringBoundsInfoPanel
+                      market={market}
+                      triggerIndex={triggerIndex}
+                    />
+                  }
+                />
+              );
+            }
           )}
           <AccordionItem
             itemId="liqudity-monitoring-parameters"