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 {
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-  usePaneLayout,
-  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 useOrderStoreRef = useCreateOrderStore();
-  const updateOrder = useOrderStore((store) => store.update);
+  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,9 +32,7 @@ interface Store {
 
 export const STORAGE_KEY = 'vega_order_store';
 
-export const useOrderStore = create<Store>()(
+const orderStateCreator: StateCreator<Store> = (set) => ({
-  persist(
-    subscribeWithSelector((set) => ({
   orders: {},
   update: (marketId, order, persist = true) => {
     set((state) => {
@@ -53,8 +52,13 @@ export const useOrderStore = create<Store>()(
       };
     });
   },
-    })),
+});
-    {
+
+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
@@ -73,16 +77,24 @@ export const useOrderStore = create<Store>()(
             orders: partializedOrders,
           };
         },
-    }
+      })
-  )
     );
+  }
+  return store as UseBoundStore<Mutate<StoreApi<Store>, []>>;
+};
+
+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,