blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

save trade checkboxes to local storage

This commit is contained in:
saml33 2023-04-03 14:51:36 +10:00
parent e551280fa0
commit dbc3cb4f57
2 changed files with 81 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/trade/AdvancedTradeForm.tsx
View File

@ -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(
(postOnly: boolean) => {
let ioc = tradeForm.ioc
if (postOnly) {
ioc = !postOnly
}
set((s) => {
s.tradeForm.postOnly = postOnly
if (s.tradeForm.ioc === true) {
s.tradeForm.ioc = !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
if (s.tradeForm.postOnly === true) {
s.tradeForm.postOnly = !ioc
}
s.tradeForm.postOnly = postOnly
})
setSavedCheckboxSettings({
...savedCheckboxSettings,
ioc: ioc,
post: postOnly,
})
},
[savedCheckboxSettings]
)
useEffect(() => {
const { ioc, post } = savedCheckboxSettings
set((s) => {
s.tradeForm.ioc = ioc
s.tradeForm.postOnly = post
})
}, [])
@ -174,15 +213,21 @@ const AdvancedTradeForm = () => {
})
}, [])
const handleSetMargin = useCallback((e: ChangeEvent<HTMLInputElement>) => {
const handleSetMargin = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
if (!e.target.checked) {
set((s) => {
s.tradeForm.quoteSize = ''
s.tradeForm.baseSize = ''
})
}
setUseMargin(e.target.checked)
}, [])
setSavedCheckboxSettings({
...savedCheckboxSettings,
margin: 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>
)
}

2
utils/constants.ts
View File

@ -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'