From 9cb84df35c4eb3dd647526f6c621d40d32efb243 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 5 Sep 2022 07:25:33 -0700
Subject: [PATCH] chore: refactor global store (#1241)

---
 apps/trading/components/navbar/navbar.tsx     | 13 +++---
 .../risk-notice-dialog.spec.tsx               |  2 +-
 .../risk-notice-dialog/risk-notice-dialog.tsx | 17 ++++----
 .../vega-wallet-container.tsx                 |  4 +-
 apps/trading/pages/_app.page.tsx              | 19 ++++-----
 apps/trading/pages/index.page.tsx             | 12 +++---
 .../trading/pages/markets/[marketId].page.tsx | 18 ++++++---
 apps/trading/pages/markets/index.page.tsx     |  4 +-
 apps/trading/pages/markets/trade-grid.tsx     | 25 +++++++-----
 apps/trading/stores/global.ts                 | 40 +++++--------------
 tools/executors/next/build/impl.ts            |  6 ++-
 11 files changed, 72 insertions(+), 88 deletions(-)

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index c2d0a2bac..57d748361 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -13,10 +13,11 @@ interface NavbarProps {
 }
 
 export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
-  const store = useGlobalStore();
-  const tradingPath = store.marketId
-    ? `/markets/${store.marketId}`
-    : '/markets';
+  const { marketId, update } = useGlobalStore((store) => ({
+    marketId: store.marketId,
+    update: store.update,
+  }));
+  const tradingPath = marketId ? `/markets/${marketId}` : '/markets';
   return (
     <div className="px-4 flex items-stretch border-b border-neutral-300 dark:border-neutral-700 bg-black">
       <div className="flex gap-4 mr-4 items-center h-full">
@@ -48,9 +49,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
           fixedBg="dark"
         />
         <VegaWalletConnectButton
-          setConnectDialog={(open) => {
-            store.setVegaWalletConnectDialog(open);
-          }}
+          setConnectDialog={(open) => update({ connectDialog: open })}
         />
       </div>
     </div>
diff --git a/apps/trading/components/risk-notice-dialog/risk-notice-dialog.spec.tsx b/apps/trading/components/risk-notice-dialog/risk-notice-dialog.spec.tsx
index d335afd13..280fa89d7 100644
--- a/apps/trading/components/risk-notice-dialog/risk-notice-dialog.spec.tsx
+++ b/apps/trading/components/risk-notice-dialog/risk-notice-dialog.spec.tsx
@@ -7,7 +7,7 @@ beforeEach(() => {
   localStorage.clear();
   useGlobalStore.setState((state) => ({
     ...state,
-    vegaRiskNoticeDialog: false,
+    riskNoticeDialog: false,
   }));
 });
 
diff --git a/apps/trading/components/risk-notice-dialog/risk-notice-dialog.tsx b/apps/trading/components/risk-notice-dialog/risk-notice-dialog.tsx
index bcccfab5b..de3acecad 100644
--- a/apps/trading/components/risk-notice-dialog/risk-notice-dialog.tsx
+++ b/apps/trading/components/risk-notice-dialog/risk-notice-dialog.tsx
@@ -8,28 +8,27 @@ import { useGlobalStore } from '../../stores';
 export const RISK_ACCEPTED_KEY = 'vega-risk-accepted';
 
 export const RiskNoticeDialog = () => {
-  const store = useGlobalStore();
+  const { riskNoticeDialog, update } = useGlobalStore((store) => ({
+    riskNoticeDialog: store.riskNoticeDialog,
+    update: store.update,
+  }));
   const { VEGA_ENV } = useEnvironment();
 
   useEffect(() => {
     const isRiskAccepted = LocalStorage.getItem(RISK_ACCEPTED_KEY) === 'true';
     if (!isRiskAccepted && VEGA_ENV === Networks.MAINNET) {
-      store.setVegaRiskNoticeDialog(true);
+      update({ riskNoticeDialog: true });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store.setVegaRiskNoticeDialog, VEGA_ENV]);
+  }, [update, VEGA_ENV]);
 
   const handleAcceptRisk = () => {
-    store.setVegaRiskNoticeDialog(false);
+    update({ riskNoticeDialog: false });
     LocalStorage.setItem(RISK_ACCEPTED_KEY, 'true');
   };
 
   return (
-    <Dialog
-      open={store.vegaRiskNoticeDialog}
-      title={t('WARNING')}
-      size="medium"
-    >
+    <Dialog open={riskNoticeDialog} title={t('WARNING')} size="medium">
       <h4 className="text-xl mb-2 mt-4">
         {t('Regulation may apply to use of this app')}
       </h4>
diff --git a/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx b/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx
index 4dd834652..b7be659e7 100644
--- a/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx
+++ b/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx
@@ -9,7 +9,7 @@ interface VegaWalletContainerProps {
 }
 
 export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
-  const store = useGlobalStore();
+  const { update } = useGlobalStore((store) => ({ update: store.update }));
   const { keypair } = useVegaWallet();
 
   if (!keypair) {
@@ -20,7 +20,7 @@ export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
             {t('Connect your Vega wallet')}
           </p>
           <Button
-            onClick={() => store.setVegaWalletConnectDialog(true)}
+            onClick={() => update({ connectDialog: true })}
             data-testid="vega-wallet-connect"
           >
             {t('Connect')}
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index 0d5d529c0..0a8e7f03a 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -2,11 +2,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Navbar } from '../components/navbar';
 import { t, ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers';
-import {
-  VegaConnectDialog,
-  VegaManageDialog,
-  VegaWalletProvider,
-} from '@vegaprotocol/wallet';
+import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet';
 import { EnvironmentProvider } from '@vegaprotocol/environment';
 import { Connectors } from '../lib/vega-connectors';
 import { AppLoader } from '../components/app-loader';
@@ -20,7 +16,10 @@ import {
 import { Footer } from '../components/footer';
 
 function AppBody({ Component, pageProps }: AppProps) {
-  const store = useGlobalStore();
+  const { connectDialog, update } = useGlobalStore((store) => ({
+    connectDialog: store.connectDialog,
+    update: store.update,
+  }));
   const {
     isAssetDetailsDialogOpen,
     assetDetailsDialogSymbol,
@@ -43,12 +42,8 @@ function AppBody({ Component, pageProps }: AppProps) {
           <Footer />
           <VegaConnectDialog
             connectors={Connectors}
-            dialogOpen={store.vegaWalletConnectDialog}
-            setDialogOpen={(open) => store.setVegaWalletConnectDialog(open)}
-          />
-          <VegaManageDialog
-            dialogOpen={store.vegaWalletManageDialog}
-            setDialogOpen={(open) => store.setVegaWalletManageDialog(open)}
+            dialogOpen={connectDialog}
+            setDialogOpen={(open) => update({ connectDialog: open })}
           />
           <AssetDetailsDialog
             assetSymbol={assetDetailsDialogSymbol}
diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx
index 9e88aad53..63e4dfd80 100644
--- a/apps/trading/pages/index.page.tsx
+++ b/apps/trading/pages/index.page.tsx
@@ -9,18 +9,18 @@ export function Index() {
   // The default market selected in the platform behind the overlay
   // should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
   const { data, error, loading } = useMarketList();
-  const { vegaRiskNoticeDialog, setLandingDialog } = useGlobalStore(
-    (store) => store
-  );
+  const { riskNoticeDialog, update } = useGlobalStore((store) => ({
+    riskNoticeDialog: store.riskNoticeDialog,
+    update: store.update,
+  }));
 
   useEffect(() => {
-    setLandingDialog(true);
+    update({ landingDialog: true });
 
     if (data) {
       const marketId = data[0]?.id;
 
       if (marketId) {
-        setLandingDialog(true);
         replace(`/markets/${marketId}`);
       }
       // Fallback to the markets list page
@@ -28,7 +28,7 @@ export function Index() {
         replace('/markets');
       }
     }
-  }, [data, replace, vegaRiskNoticeDialog, setLandingDialog]);
+  }, [data, replace, riskNoticeDialog, update]);
 
   return (
     <AsyncRenderer data={data} loading={loading} error={error}>
diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx
index edc86031b..0bdbbd385 100644
--- a/apps/trading/pages/markets/[marketId].page.tsx
+++ b/apps/trading/pages/markets/[marketId].page.tsx
@@ -9,8 +9,8 @@ import React, { useEffect, useState } from 'react';
 import { PageQueryContainer } from '../../components/page-query-container';
 import { useGlobalStore } from '../../stores';
 import { TradeGrid, TradePanels } from './trade-grid';
-
 import type { Market, MarketVariables } from './__generated__/Market';
+
 // Top level page query
 const MARKET_QUERY = gql`
   query Market($marketId: ID!, $interval: Interval!, $since: String!) {
@@ -77,7 +77,13 @@ const MARKET_QUERY = gql`
 const MarketPage = ({ id }: { id?: string }) => {
   const { query } = useRouter();
   const { w } = useWindowSize();
-  const store = useGlobalStore();
+  const { landingDialog, riskNoticeDialog, update } = useGlobalStore(
+    (store) => ({
+      landingDialog: store.landingDialog,
+      riskNoticeDialog: store.riskNoticeDialog,
+      update: store.update,
+    })
+  );
 
   // Default to first marketId query item if found
   const marketId =
@@ -123,13 +129,13 @@ const MarketPage = ({ id }: { id?: string }) => {
               <TradePanels market={market} />
             )}
             <SelectMarketDialog
-              dialogOpen={store.landingDialog && !store.vegaRiskNoticeDialog}
+              dialogOpen={landingDialog && !riskNoticeDialog}
               setDialogOpen={(isOpen: boolean) =>
-                store.setLandingDialog(isOpen)
+                update({ landingDialog: isOpen })
               }
               onSelect={(marketId: string) => {
-                if (marketId && store.marketId !== marketId) {
-                  store.setMarketId(marketId);
+                if (marketId && marketId !== marketId) {
+                  update({ marketId });
                 }
               }}
             />
diff --git a/apps/trading/pages/markets/index.page.tsx b/apps/trading/pages/markets/index.page.tsx
index ba41fd21f..a05668497 100644
--- a/apps/trading/pages/markets/index.page.tsx
+++ b/apps/trading/pages/markets/index.page.tsx
@@ -3,12 +3,12 @@ import { MarketsContainer } from '@vegaprotocol/market-list';
 import { useGlobalStore } from '../../stores';
 
 const Markets = () => {
-  const store = useGlobalStore();
+  const { update } = useGlobalStore((store) => ({ update: store.update }));
   const router = useRouter();
   return (
     <MarketsContainer
       onSelect={(marketId) => {
-        store.setMarketId(marketId);
+        update({ marketId });
         router.push(`/markets/${marketId}`);
       }}
     />
diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx
index 07a794310..c8d8ec216 100644
--- a/apps/trading/pages/markets/trade-grid.tsx
+++ b/apps/trading/pages/markets/trade-grid.tsx
@@ -117,23 +117,26 @@ export const TradeMarketHeader = ({ market }: TradeMarketHeaderProps) => {
   const { VEGA_EXPLORER_URL } = useEnvironment();
   const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } =
     useAssetDetailsDialogStore();
-  const candlesClose: string[] = (market?.candles || [])
-    .map((candle) => candle?.close)
-    .filter((c): c is CandleClose => c !== null);
-  const symbol =
-    market.tradableInstrument.instrument.product?.settlementAsset?.symbol;
-  const itemClass =
-    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
-  const itemHeading = 'text-neutral-400';
+  const { update } = useGlobalStore((store) => ({
+    update: store.update,
+  }));
 
-  const store = useGlobalStore();
   const onSelect = (marketId: string) => {
-    if (marketId && store.marketId !== marketId) {
-      store.setMarketId(marketId);
+    if (marketId && marketId !== marketId) {
+      update({ marketId });
     }
   };
 
+  const candlesClose: string[] = (market?.candles || [])
+    .map((candle) => candle?.close)
+    .filter((c): c is CandleClose => c !== null);
   const hasExpiry = market.marketTimestamps.close !== null;
+  const symbol =
+    market.tradableInstrument.instrument.product?.settlementAsset?.symbol;
+
+  const itemClass =
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
+  const itemHeading = 'text-neutral-400';
 
   return (
     <header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-700">
diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts
index 518b29232..4f68662e4 100644
--- a/apps/trading/stores/global.ts
+++ b/apps/trading/stores/global.ts
@@ -1,43 +1,21 @@
 import create from 'zustand';
 
 interface GlobalStore {
-  vegaWalletConnectDialog: boolean;
-  setVegaWalletConnectDialog: (isOpen: boolean) => void;
-  vegaWalletManageDialog: boolean;
-  setVegaWalletManageDialog: (isOpen: boolean) => void;
-  vegaNetworkSwitcherDialog: boolean;
-  setVegaNetworkSwitcherDialog: (isOpen: boolean) => void;
+  connectDialog: boolean;
+  networkSwitcherDialog: boolean;
   landingDialog: boolean;
-  setLandingDialog: (isOpen: boolean) => void;
-  vegaRiskNoticeDialog: boolean;
-  setVegaRiskNoticeDialog: (isOpen: boolean) => void;
+  riskNoticeDialog: boolean;
   marketId: string | null;
-  setMarketId: (marketId: string) => void;
+  update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
 }
 
 export const useGlobalStore = create<GlobalStore>((set) => ({
-  vegaWalletConnectDialog: false,
-  setVegaWalletConnectDialog: (isOpen: boolean) => {
-    set({ vegaWalletConnectDialog: isOpen });
-  },
-  vegaWalletManageDialog: false,
-  setVegaWalletManageDialog: (isOpen: boolean) => {
-    set({ vegaWalletManageDialog: isOpen });
-  },
-  vegaNetworkSwitcherDialog: false,
-  setVegaNetworkSwitcherDialog: (isOpen: boolean) => {
-    set({ vegaNetworkSwitcherDialog: isOpen });
-  },
+  connectDialog: false,
+  networkSwitcherDialog: false,
   landingDialog: false,
-  setLandingDialog: (isOpen: boolean) => {
-    set({ landingDialog: isOpen });
-  },
-  vegaRiskNoticeDialog: false,
-  setVegaRiskNoticeDialog: (isOpen: boolean) => {
-    set({ vegaRiskNoticeDialog: isOpen });
-  },
+  riskNoticeDialog: false,
   marketId: null,
-  setMarketId: (id: string) => {
-    set({ marketId: id });
+  update: (state) => {
+    set(state);
   },
 }));
diff --git a/tools/executors/next/build/impl.ts b/tools/executors/next/build/impl.ts
index 2675a0d11..96ade60bb 100644
--- a/tools/executors/next/build/impl.ts
+++ b/tools/executors/next/build/impl.ts
@@ -14,5 +14,9 @@ export default async function build(
   const { env, ...nextOptions } = options;
   await setup(env, context, 'tools/executors/next/build');
 
-  return await nextBuildExecutor(nextOptions, context);
+  try {
+    return await nextBuildExecutor(nextOptions, context);
+  } catch (err) {
+    console.error(err);
+  }
 }