From 888ea7df1f68f91f706d15863fedab903560efa5 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 11 Jul 2023 10:40:34 +0100
Subject: [PATCH] feat: remove init flag in sidebar store, use persist

---
 apps/trading/client-pages/market/market.tsx   |  6 ++--
 .../client-pages/portfolio/portfolio.tsx      |  6 ++--
 apps/trading/components/sidebar/sidebar.tsx   | 30 ++++++++++++-------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx
index f4f53971d..98d5f7d08 100644
--- a/apps/trading/client-pages/market/market.tsx
+++ b/apps/trading/client-pages/market/market.tsx
@@ -62,7 +62,7 @@ const TitleUpdater = ({
 export const MarketPage = () => {
   const { marketId } = useParams();
   const navigate = useNavigate();
-  const { init, view, setView } = useSidebar();
+  const { view, setView } = useSidebar();
   const { screenSize } = useScreenDimensions();
   const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const update = useGlobalStore((store) => store.update);
@@ -84,10 +84,10 @@ export const MarketPage = () => {
 
   // Make sidebar open on deal ticket by default
   useEffect(() => {
-    if (init && view === null) {
+    if (view === null) {
       setView({ type: ViewType.Order });
     }
-  }, [init, view, setView]);
+  }, [view, setView]);
 
   const tradeView = useMemo(() => {
     if (largeScreen) {
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index c8b9c3419..036ed00a9 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -36,7 +36,7 @@ const WithdrawalsIndicator = () => {
 };
 
 export const Portfolio = () => {
-  const { init, view, setView } = useSidebar();
+  const { view, setView } = useSidebar();
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
@@ -47,10 +47,10 @@ export const Portfolio = () => {
 
   // Make transfer sidebar open by default
   useEffect(() => {
-    if (init && view === null) {
+    if (view === null) {
       setView({ type: ViewType.Transfer });
     }
-  }, [init, view, setView]);
+  }, [view, setView]);
 
   const onMarketClick = useMarketClickHandler(true);
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 7857b66e6..3ea642ecc 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -14,6 +14,9 @@ import { Settings } from '../settings';
 import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
+import { persist } from 'zustand/middleware';
+
+const STORAGE_KEY = 'vega_sidebar_store';
 
 export enum ViewType {
   Order = 'Order',
@@ -265,18 +268,23 @@ const CloseSidebar = () => {
 };
 
 export const useSidebar = create<{
-  init: boolean;
   view: SidebarView | null;
   setView: (view: SidebarView | null) => void;
-}>()((set) => ({
-  init: true,
-  view: null,
-  setView: (x) =>
-    set(() => {
-      if (x === null) {
-        return { view: null, init: false };
-      }
+}>()(
+  persist(
+    (set) => ({
+      view: null,
+      setView: (x) =>
+        set(() => {
+          if (x === null) {
+            return { view: null };
+          }
 
-      return { view: x, init: false };
+          return { view: x };
+        }),
     }),
-}));
+    {
+      name: STORAGE_KEY,
+    }
+  )
+);