save trade checkboxes to local storage

components/trade/AdvancedTradeForm.tsx

@@ -34,7 +34,11 @@ import Loading from '@components/shared/Loading'
 import TabUnderline from '@components/shared/TabUnderline'
 import PerpSlider from './PerpSlider'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import { SIZE_INPUT_UI_KEY, SOUND_SETTINGS_KEY } from 'utils/constants'
+import {
+  SIZE_INPUT_UI_KEY,
+  SOUND_SETTINGS_KEY,
+  TRADE_CHECKBOXES_KEY,
+} from 'utils/constants'
 import SpotButtonGroup from './SpotButtonGroup'
 import PerpButtonGroup from './PerpButtonGroup'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
@@ -60,13 +64,20 @@ const successSound = new Howl({
   volume: 0.5,
 })
 
+const DEFAULT_CHECKBOX_SETTINGS = {
+  ioc: false,
+  post: false,
+  margin: true,
+}
+
 const AdvancedTradeForm = () => {
   const { t } = useTranslation(['common', 'trade'])
   const { mangoAccount } = useMangoAccount()
   const tradeForm = mangoStore((s) => s.tradeForm)
-  const [useMargin, setUseMargin] = useState(true)
   const [placingOrder, setPlacingOrder] = useState(false)
   const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
+  const [savedCheckboxSettings, setSavedCheckboxSettings] =
+    useLocalStorageState(TRADE_CHECKBOXES_KEY, DEFAULT_CHECKBOX_SETTINGS)
   const { ipAllowed, ipCountry } = useIpAddress()
   const [soundSettings] = useLocalStorageState(
     SOUND_SETTINGS_KEY,
@@ -144,21 +155,49 @@ const AdvancedTradeForm = () => {
     [oraclePrice]
   )
 
-  const handlePostOnlyChange = useCallback((postOnly: boolean) => {
+  const handlePostOnlyChange = useCallback(
-    set((s) => {
+    (postOnly: boolean) => {
-      s.tradeForm.postOnly = postOnly
+      let ioc = tradeForm.ioc
-      if (s.tradeForm.ioc === true) {
+      if (postOnly) {
-        s.tradeForm.ioc = !postOnly
+        ioc = !postOnly
       }
-    })
+      set((s) => {
-  }, [])
+        s.tradeForm.postOnly = postOnly
+        s.tradeForm.ioc = ioc
+      })
+      setSavedCheckboxSettings({
+        ...savedCheckboxSettings,
+        ioc: ioc,
+        post: postOnly,
+      })
+    },
+    [savedCheckboxSettings]
+  )
 
-  const handleIocChange = useCallback((ioc: boolean) => {
+  const handleIocChange = useCallback(
+    (ioc: boolean) => {
+      let postOnly = tradeForm.postOnly
+      if (ioc) {
+        postOnly = !ioc
+      }
+      set((s) => {
+        s.tradeForm.ioc = ioc
+        s.tradeForm.postOnly = postOnly
+      })
+      setSavedCheckboxSettings({
+        ...savedCheckboxSettings,
+        ioc: ioc,
+        post: postOnly,
+      })
+    },
+    [savedCheckboxSettings]
+  )
+
+  useEffect(() => {
+    const { ioc, post } = savedCheckboxSettings
     set((s) => {
       s.tradeForm.ioc = ioc
-      if (s.tradeForm.postOnly === true) {
+      s.tradeForm.postOnly = post
-        s.tradeForm.postOnly = !ioc
-      }
     })
   }, [])
 
@@ -174,15 +213,21 @@ const AdvancedTradeForm = () => {
     })
   }, [])
 
-  const handleSetMargin = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+  const handleSetMargin = useCallback(
-    if (!e.target.checked) {
+    (e: ChangeEvent<HTMLInputElement>) => {
-      set((s) => {
+      if (!e.target.checked) {
-        s.tradeForm.quoteSize = ''
+        set((s) => {
-        s.tradeForm.baseSize = ''
+          s.tradeForm.quoteSize = ''
+          s.tradeForm.baseSize = ''
+        })
+      }
+      setSavedCheckboxSettings({
+        ...savedCheckboxSettings,
+        margin: e.target.checked,
       })
-    }
+    },
-    setUseMargin(e.target.checked)
+    [savedCheckboxSettings]
-  }, [])
+  )
 
   const [tickDecimals, tickSize] = useMemo(() => {
     const group = mangoStore.getState().group
@@ -432,7 +477,7 @@ const AdvancedTradeForm = () => {
           <MaxSizeButton
             minOrderDecimals={minOrderDecimals}
             tickDecimals={tickDecimals}
-            useMargin={useMargin}
+            useMargin={savedCheckboxSettings.margin}
           />
           <div className="flex flex-col">
             <div className="default-transition flex items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 text-sm font-bold text-th-fgd-1 md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base">
@@ -503,13 +548,13 @@ const AdvancedTradeForm = () => {
                 minOrderDecimals={minOrderDecimals}
                 tickDecimals={tickDecimals}
                 step={tradeForm.side === 'buy' ? tickSize : minOrderSize}
-                useMargin={useMargin}
+                useMargin={savedCheckboxSettings.margin}
               />
             ) : (
               <SpotButtonGroup
                 minOrderDecimals={minOrderDecimals}
                 tickDecimals={tickDecimals}
-                useMargin={useMargin}
+                useMargin={savedCheckboxSettings.margin}
               />
             )
           ) : tradeFormSizeUi === 'slider' ? (
@@ -535,7 +580,7 @@ const AdvancedTradeForm = () => {
                   content={t('trade:tooltip-post')}
                 >
                   <Checkbox
-                    checked={tradeForm.postOnly}
+                    checked={savedCheckboxSettings.post}
                     onChange={(e) => handlePostOnlyChange(e.target.checked)}
                   >
                     {t('trade:post')}
@@ -551,7 +596,7 @@ const AdvancedTradeForm = () => {
                 >
                   <div className="flex items-center text-xs text-th-fgd-3">
                     <Checkbox
-                      checked={tradeForm.ioc}
+                      checked={savedCheckboxSettings.ioc}
                       onChange={(e) => handleIocChange(e.target.checked)}
                     >
                       IOC
@@ -569,7 +614,10 @@ const AdvancedTradeForm = () => {
                 placement="left"
                 content={t('trade:tooltip-enable-margin')}
               >
-                <Checkbox checked={useMargin} onChange={handleSetMargin}>
+                <Checkbox
+                  checked={savedCheckboxSettings.margin}
+                  onChange={handleSetMargin}
+                >
                   {t('trade:margin')}
                 </Checkbox>
               </Tooltip>
@@ -648,7 +696,10 @@ const AdvancedTradeForm = () => {
           />
         </div>
       ) : null}
-      <TradeSummary mangoAccount={mangoAccount} useMargin={useMargin} />
+      <TradeSummary
+        mangoAccount={mangoAccount}
+        useMargin={savedCheckboxSettings.margin}
+      />
     </div>
   )
 }

utils/constants.ts

@@ -29,6 +29,8 @@ export const SOUND_SETTINGS_KEY = 'soundSettings-0.1'
 
 export const SIZE_INPUT_UI_KEY = 'tradeFormUi-0.2'
 
+export const TRADE_CHECKBOXES_KEY = 'tradeCheckboxes-0.1'
+
 export const GRID_LAYOUT_KEY = 'savedLayouts-0.2'
 
 export const NOTIFICATION_POSITION_KEY = 'notificationPosition-0.2'