diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx index cbfbdd00..25c6cab3 100644 --- a/components/trade/AdvancedTradeForm.tsx +++ b/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) => { - set((s) => { - s.tradeForm.postOnly = postOnly - if (s.tradeForm.ioc === true) { - s.tradeForm.ioc = !postOnly + const handlePostOnlyChange = useCallback( + (postOnly: boolean) => { + let ioc = tradeForm.ioc + if (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 = !ioc - } + s.tradeForm.postOnly = post }) }, []) @@ -174,15 +213,21 @@ const AdvancedTradeForm = () => { }) }, []) - const handleSetMargin = useCallback((e: ChangeEvent) => { - if (!e.target.checked) { - set((s) => { - s.tradeForm.quoteSize = '' - s.tradeForm.baseSize = '' + const handleSetMargin = useCallback( + (e: ChangeEvent) => { + if (!e.target.checked) { + set((s) => { + 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 = () => {
@@ -503,13 +548,13 @@ const AdvancedTradeForm = () => { minOrderDecimals={minOrderDecimals} tickDecimals={tickDecimals} step={tradeForm.side === 'buy' ? tickSize : minOrderSize} - useMargin={useMargin} + useMargin={savedCheckboxSettings.margin} /> ) : ( ) ) : tradeFormSizeUi === 'slider' ? ( @@ -535,7 +580,7 @@ const AdvancedTradeForm = () => { content={t('trade:tooltip-post')} > handlePostOnlyChange(e.target.checked)} > {t('trade:post')} @@ -551,7 +596,7 @@ const AdvancedTradeForm = () => { >
handleIocChange(e.target.checked)} > IOC @@ -569,7 +614,10 @@ const AdvancedTradeForm = () => { placement="left" content={t('trade:tooltip-enable-margin')} > - + {t('trade:margin')} @@ -648,7 +696,10 @@ const AdvancedTradeForm = () => { />
) : null} - +
) } diff --git a/utils/constants.ts b/utils/constants.ts index 2af5df69..bbe86b7b 100644 --- a/utils/constants.ts +++ b/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'