chore(orders): get rid of unnecessary stores (#4231)

apps/trading/client-pages/market/trade-grid.tsx

@@ -9,10 +9,7 @@ import { t } from '@vegaprotocol/i18n';
 import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
-import {
-  usePaneLayout,
-  useScreenDimensions,
-} from '@vegaprotocol/react-helpers';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import {
   Tab,
   LocalStoragePersistTabs as Tabs,
@@ -25,6 +22,7 @@ import { HeaderTitle } from '../../components/header';
 import {
   ResizableGrid,
   ResizableGridPanel,
+  usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
 import { MarketSelector } from './market-selector';

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -4,7 +4,6 @@ import { LayoutPriority } from 'allotment';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
-import { usePaneLayout } from '@vegaprotocol/react-helpers';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
@@ -20,6 +19,7 @@ import { AccountHistoryContainer } from './account-history-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
+  usePaneLayout,
 } from '../../components/resizable-grid';
 
 const WithdrawalsIndicator = () => {

apps/trading/components/resizable-grid/index.ts

@@ -1 +1,2 @@
 export * from './resizable-grid';
+export * from './use-pane-layout';

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

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
 import { MockedProvider } from '@apollo/client/testing';
 import { addDecimal } from '@vegaprotocol/utils';
-import { useOrderStore } from '@vegaprotocol/orders';
+import { useCreateOrderStore } from '@vegaprotocol/orders';
 
 jest.mock('zustand');
 jest.mock('./deal-ticket-fee-details', () => ({
@@ -30,6 +30,9 @@ function generateJsx() {
 }
 
 describe('DealTicket', () => {
+  const { result } = renderHook(() => useCreateOrderStore());
+  const useOrderStore = result.current;
+
   beforeEach(() => {
     localStorage.clear();
   });
@@ -138,7 +141,6 @@ describe('DealTicket', () => {
       reduceOnly: true,
       postOnly: false,
     };
-
     useOrderStore.setState({
       orders: {
         [expectedOrder.marketId]: expectedOrder,

libs/deal-ticket/src/hooks/use-order-form.spec.ts

@@ -1,6 +1,6 @@
 import omit from 'lodash/omit';
 import { act, renderHook } from '@testing-library/react';
-import { getDefaultOrder, useOrderStore } from '@vegaprotocol/orders';
+import { getDefaultOrder, useCreateOrderStore } from '@vegaprotocol/orders';
 import { useOrderForm } from './use-order-form';
 
 jest.mock('zustand');
@@ -10,6 +10,8 @@ describe('useOrderForm', () => {
   const setup = (marketId: string) => {
     return renderHook(() => useOrderForm(marketId));
   };
+  const { result } = renderHook(() => useCreateOrderStore());
+  const useOrderStore = result.current;
 
   it('updates form fields when the order changes', async () => {
     const order = getDefaultOrder(marketId);

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -9,7 +9,7 @@ import type {
   MarketDepthUpdateSubscription,
   PriceLevelFieldsFragment,
 } from './__generated__/MarketDepth';
-import { useOrderStore } from '@vegaprotocol/orders';
+import { useCreateOrderStore } from '@vegaprotocol/orders';
 
 export type OrderbookData = {
   asks: PriceLevelFieldsFragment[];
@@ -50,8 +50,8 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
     dataProvider: marketDataProvider,
     variables,
   });
-
-  const updateOrder = useOrderStore((store) => store.update);
+  const useOrderStoreRef = useCreateOrderStore();
+  const updateOrder = useOrderStoreRef((store) => store.update);
 
   return (
     <AsyncRenderer

libs/orders/src/lib/order-hooks/use-order-store.spec.ts

@@ -2,16 +2,17 @@ import {
   getDefaultOrder,
   STORAGE_KEY,
   useOrder,
-  useOrderStore,
+  useCreateOrderStore,
 } from './use-order-store';
 import { act, renderHook } from '@testing-library/react';
 import { OrderType } from '@vegaprotocol/types';
 
 jest.mock('zustand');
 
-describe('useOrderStore', () => {
+describe('useCreateOrderStore', () => {
   const setup = () => {
-    return renderHook(() => useOrderStore());
+    const { result } = renderHook(() => useCreateOrderStore());
+    return renderHook(() => result.current());
   };
 
   afterEach(() => {

libs/orders/src/lib/order-hooks/use-order-store.ts

@@ -1,6 +1,7 @@
 import { OrderTimeInForce, Side } from '@vegaprotocol/types';
 import { OrderType } from '@vegaprotocol/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import type { StateCreator, UseBoundStore, Mutate, StoreApi } from 'zustand';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
@@ -31,58 +32,69 @@ interface Store {
 
 export const STORAGE_KEY = 'vega_order_store';
 
-export const useOrderStore = create<Store>()(
-  persist(
-    subscribeWithSelector((set) => ({
-      orders: {},
-      update: (marketId, order, persist = true) => {
-        set((state) => {
-          const curr = state.orders[marketId];
-          const defaultOrder = getDefaultOrder(marketId);
+const orderStateCreator: StateCreator<Store> = (set) => ({
+  orders: {},
+  update: (marketId, order, persist = true) => {
+    set((state) => {
+      const curr = state.orders[marketId];
+      const defaultOrder = getDefaultOrder(marketId);
+
+      return {
+        orders: {
+          ...state.orders,
+          [marketId]: {
+            ...defaultOrder,
+            ...curr,
+            ...order,
+            persist,
+          },
+        },
+      };
+    });
+  },
+});
+
+let store: UseBoundStore<Mutate<StoreApi<Store>, []>> | null = null;
+const getOrderStore = () => {
+  if (!store) {
+    store = create<Store>()(
+      persist(subscribeWithSelector(orderStateCreator), {
+        name: STORAGE_KEY,
+        partialize: (state) => {
+          // only store the order in localStorage if user has edited, this avoids
+          // bloating localStorage if a user just visits the page but does not
+          // edit the ticket
+          const partializedOrders: OrderMap = {};
+          for (const o in state.orders) {
+            const order = state.orders[o];
+            if (order && order.persist) {
+              partializedOrders[order.marketId] = order;
+            }
+          }
 
           return {
-            orders: {
-              ...state.orders,
-              [marketId]: {
-                ...defaultOrder,
-                ...curr,
-                ...order,
-                persist,
-              },
-            },
+            ...state,
+            orders: partializedOrders,
           };
-        });
-      },
-    })),
-    {
-      name: STORAGE_KEY,
-      partialize: (state) => {
-        // only store the order in localStorage if user has edited, this avoids
-        // bloating localStorage if a user just visits the page but does not
-        // edit the ticket
-        const partializedOrders: OrderMap = {};
-        for (const o in state.orders) {
-          const order = state.orders[o];
-          if (order && order.persist) {
-            partializedOrders[order.marketId] = order;
-          }
-        }
+        },
+      })
+    );
+  }
+  return store as UseBoundStore<Mutate<StoreApi<Store>, []>>;
+};
 
-        return {
-          ...state,
-          orders: partializedOrders,
-        };
-      },
-    }
-  )
-);
+export const useCreateOrderStore = () => {
+  const useOrderStoreRef = useRef(getOrderStore());
+  return useOrderStoreRef.current;
+};
 
 /**
  * Retrieves an order from the store for a market and
  * creates one if it doesn't already exist
  */
 export const useOrder = (marketId: string) => {
-  const [order, _update] = useOrderStore((store) => {
+  const useOrderStoreRef = useCreateOrderStore();
+  const [order, _update] = useOrderStoreRef((store) => {
     return [store.orders[marketId], store.update];
   });
 

libs/react-helpers/src/hooks/index.ts

@@ -11,5 +11,4 @@ export * from './use-theme-switcher';
 export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
-export * from './use-pane-layout';
 export * from './use-copy-timeout';

libs/trades/src/lib/trades-container.tsx

@@ -3,7 +3,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import { useRef } from 'react';
 import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
-import { useOrderStore } from '@vegaprotocol/orders';
+import { useCreateOrderStore } from '@vegaprotocol/orders';
 import { t } from '@vegaprotocol/i18n';
 
 interface TradesContainerProps {
@@ -12,7 +12,8 @@ interface TradesContainerProps {
 
 export const TradesContainer = ({ marketId }: TradesContainerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const updateOrder = useOrderStore((store) => store.update);
+  const useOrderStoreRef = useCreateOrderStore();
+  const updateOrder = useOrderStoreRef((store) => store.update);
 
   const { data, error } = useDataProvider({
     dataProvider: tradesWithMarketProvider,