518 lines
17 KiB
TypeScript
518 lines
17 KiB
TypeScript
import ButtonGroup from '@components/forms/ButtonGroup'
|
|
import Checkbox from '@components/forms/Checkbox'
|
|
import Input from '@components/forms/Input'
|
|
import Label from '@components/forms/Label'
|
|
import { HotKey } from '@components/settings/HotKeysSettings'
|
|
import Button from '@components/shared/Button'
|
|
import InlineNotification from '@components/shared/InlineNotification'
|
|
import Modal from '@components/shared/Modal'
|
|
import TabUnderline from '@components/shared/TabUnderline'
|
|
import Tooltip from '@components/shared/Tooltip'
|
|
import { CheckIcon } from '@heroicons/react/20/solid'
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { ModalProps } from 'types/modal'
|
|
import { HOT_KEYS_KEY } from 'utils/constants'
|
|
|
|
type FormErrors = Partial<Record<keyof HotKeyForm, string>>
|
|
|
|
type HotKeyForm = {
|
|
custom?: string
|
|
name?: string
|
|
baseKey: string
|
|
triggerKey: string
|
|
price: string
|
|
side: 'buy' | 'sell'
|
|
size: string
|
|
sizeType: 'percentage' | 'notional'
|
|
orderType: 'limit' | 'market'
|
|
ioc: boolean
|
|
post: boolean
|
|
margin: boolean
|
|
reduce: boolean
|
|
}
|
|
|
|
type TEMPLATE = {
|
|
custom?: string
|
|
price: string
|
|
side: 'buy' | 'sell'
|
|
size: string
|
|
sizeType: 'percentage' | 'notional'
|
|
orderType: 'limit' | 'market'
|
|
ioc: boolean
|
|
post: boolean
|
|
margin: boolean
|
|
reduce: boolean
|
|
}
|
|
|
|
type CUSTOM_TEMPLATE = {
|
|
custom: string
|
|
side?: 'buy' | 'sell'
|
|
orderType?: 'limit' | 'market'
|
|
reduce?: boolean
|
|
}
|
|
|
|
export enum HOTKEY_TEMPLATES {
|
|
CLOSE_LONG = 'Market close long position',
|
|
CLOSE_SHORT = 'Market close short position',
|
|
CLOSE_ALL_PERP = 'Market close all perp positions',
|
|
}
|
|
|
|
const TEMPLATE_BUTTON_CLASSES =
|
|
'flex w-full items-center justify-between border-t border-th-bkg-3 p-4 focus:outline-none md:hover:bg-th-bkg-2'
|
|
|
|
const DEFAULT_FORM_VALUES: HotKeyForm = {
|
|
custom: '',
|
|
name: '',
|
|
baseKey: 'shift',
|
|
triggerKey: '',
|
|
price: '',
|
|
side: 'buy',
|
|
size: '',
|
|
sizeType: 'percentage',
|
|
orderType: 'limit',
|
|
ioc: false,
|
|
post: false,
|
|
margin: false,
|
|
reduce: false,
|
|
}
|
|
|
|
const CLOSE_LONG: CUSTOM_TEMPLATE = {
|
|
custom: HOTKEY_TEMPLATES.CLOSE_LONG,
|
|
side: 'sell',
|
|
orderType: 'market',
|
|
reduce: true,
|
|
}
|
|
|
|
const CLOSE_SHORT: CUSTOM_TEMPLATE = {
|
|
custom: HOTKEY_TEMPLATES.CLOSE_SHORT,
|
|
side: 'buy',
|
|
orderType: 'market',
|
|
reduce: true,
|
|
}
|
|
|
|
const CLOSE_ALL_PERP: CUSTOM_TEMPLATE = {
|
|
custom: HOTKEY_TEMPLATES.CLOSE_ALL_PERP,
|
|
}
|
|
|
|
const TABS = ['settings:templates', 'settings:custom']
|
|
|
|
const HotKeyModal = ({ isOpen, onClose }: ModalProps) => {
|
|
const { t } = useTranslation(['common', 'settings', 'trade'])
|
|
const [activeTab, setActiveTab] = useState('settings:templates')
|
|
const [selectedTemplate, setSelectedTemplate] = useState<
|
|
HOTKEY_TEMPLATES | ''
|
|
>('')
|
|
const [hotKeys, setHotKeys] = useLocalStorageState<HotKey[]>(HOT_KEYS_KEY, [])
|
|
const [hotKeyForm, setHotKeyForm] = useState<HotKeyForm>({
|
|
...DEFAULT_FORM_VALUES,
|
|
})
|
|
const [formErrors, setFormErrors] = useState<FormErrors>({})
|
|
|
|
const handleSwitchTab = (tab: string) => {
|
|
setActiveTab(tab)
|
|
setHotKeyForm({
|
|
...DEFAULT_FORM_VALUES,
|
|
name: hotKeyForm.name,
|
|
triggerKey: hotKeyForm.triggerKey,
|
|
})
|
|
setFormErrors({})
|
|
setSelectedTemplate('')
|
|
}
|
|
|
|
const handleSetForm = (propertyName: string, value: string | boolean) => {
|
|
setFormErrors({})
|
|
setHotKeyForm((prevState) => ({ ...prevState, [propertyName]: value }))
|
|
}
|
|
|
|
const handleSetTemplate = (
|
|
template: TEMPLATE | CUSTOM_TEMPLATE,
|
|
templateName: HOTKEY_TEMPLATES,
|
|
) => {
|
|
setFormErrors({})
|
|
setHotKeyForm((prevState) => ({ ...prevState, ...template }))
|
|
setSelectedTemplate(templateName)
|
|
}
|
|
|
|
const handlePostOnlyChange = (postOnly: boolean) => {
|
|
if (postOnly) {
|
|
handleSetForm('ioc', !postOnly)
|
|
}
|
|
handleSetForm('post', postOnly)
|
|
}
|
|
|
|
const handleIocChange = (ioc: boolean) => {
|
|
if (ioc) {
|
|
handleSetForm('post', !ioc)
|
|
}
|
|
handleSetForm('ioc', ioc)
|
|
}
|
|
|
|
const isFormValid = (form: HotKeyForm) => {
|
|
const invalidFields: FormErrors = {}
|
|
setFormErrors({})
|
|
const triggerKey: (keyof HotKeyForm)[] = ['triggerKey']
|
|
const requiredFields: (keyof HotKeyForm)[] = ['size', 'price', 'triggerKey']
|
|
const numberFields: (keyof HotKeyForm)[] = ['size', 'price']
|
|
const alphanumericRegex = /^[a-zA-Z0-9]+$/
|
|
for (const key of triggerKey) {
|
|
const value = form[key] as string
|
|
if (value.length > 1) {
|
|
invalidFields[key] = t('settings:error-too-many-characters')
|
|
}
|
|
if (!alphanumericRegex.test(value)) {
|
|
invalidFields[key] = t('settings:error-alphanumeric-only')
|
|
}
|
|
}
|
|
for (const key of requiredFields) {
|
|
const value = form[key] as string
|
|
if (!value) {
|
|
if (hotKeyForm.orderType === 'market') {
|
|
if (key !== 'price') {
|
|
invalidFields[key] = t('settings:error-required-field')
|
|
}
|
|
} else {
|
|
invalidFields[key] = t('settings:error-required-field')
|
|
}
|
|
}
|
|
}
|
|
for (const key of numberFields) {
|
|
const value = form[key] as string
|
|
if (value) {
|
|
if (isNaN(parseFloat(value))) {
|
|
invalidFields[key] = t('settings:error-must-be-number')
|
|
}
|
|
if (parseFloat(value) < 0) {
|
|
invalidFields[key] = t('settings:error-must-be-above-zero')
|
|
}
|
|
if (parseFloat(value) > 100) {
|
|
if (key === 'price') {
|
|
invalidFields[key] = t('settings:error-must-be-below-100')
|
|
} else {
|
|
if (hotKeyForm.sizeType === 'percentage') {
|
|
invalidFields[key] = t('settings:error-must-be-below-100')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const newKeySequence = `${form.baseKey}+${form.triggerKey}`
|
|
const keyExists = hotKeys.find((k) => k.keySequence === newKeySequence)
|
|
if (keyExists) {
|
|
invalidFields.triggerKey = t('settings:error-key-in-use')
|
|
}
|
|
if (Object.keys(invalidFields).length) {
|
|
setFormErrors(invalidFields)
|
|
}
|
|
return invalidFields
|
|
}
|
|
|
|
const handleSave = () => {
|
|
const invalidFields = isFormValid(hotKeyForm)
|
|
if (Object.keys(invalidFields).length && !hotKeyForm.custom) {
|
|
return
|
|
}
|
|
const name = hotKeyForm.name ? hotKeyForm.name : selectedTemplate || ''
|
|
const newHotKey = !hotKeyForm.custom
|
|
? {
|
|
keySequence: `${hotKeyForm.baseKey}+${hotKeyForm.triggerKey}`,
|
|
custom: hotKeyForm.custom,
|
|
name: name,
|
|
orderSide: hotKeyForm.side,
|
|
orderSizeType: hotKeyForm.sizeType,
|
|
orderSize: hotKeyForm.size,
|
|
orderType: hotKeyForm.orderType,
|
|
orderPrice: hotKeyForm.price,
|
|
ioc: hotKeyForm.ioc,
|
|
margin: hotKeyForm.margin,
|
|
postOnly: hotKeyForm.post,
|
|
reduceOnly: hotKeyForm.reduce,
|
|
}
|
|
: {
|
|
keySequence: `${hotKeyForm.baseKey}+${hotKeyForm.triggerKey}`,
|
|
custom: hotKeyForm.custom,
|
|
name: name,
|
|
orderSide: hotKeyForm.side,
|
|
orderType: hotKeyForm.orderType,
|
|
reduceOnly: hotKeyForm.reduce,
|
|
}
|
|
setHotKeys([...hotKeys, newHotKey])
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
panelClassNames="md:max-h-[calc(100vh-10%)] overflow-y-auto thin-scroll"
|
|
>
|
|
<>
|
|
<h2 className="mb-4 text-center">{t('settings:new-hot-key')}</h2>
|
|
<div className="mb-4">
|
|
<Label text={t('settings:base-key')} />
|
|
<ButtonGroup
|
|
activeValue={hotKeyForm.baseKey}
|
|
onChange={(key) => handleSetForm('baseKey', key)}
|
|
values={['shift', 'ctrl']}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<Label text={t('settings:trigger-key')} />
|
|
<Input
|
|
hasError={formErrors.triggerKey !== undefined}
|
|
type="text"
|
|
value={hotKeyForm.triggerKey}
|
|
onChange={(e) =>
|
|
handleSetForm('triggerKey', e.target.value.toLowerCase())
|
|
}
|
|
/>
|
|
{formErrors.triggerKey ? (
|
|
<div className="mt-1">
|
|
<InlineNotification
|
|
type="error"
|
|
desc={formErrors.triggerKey}
|
|
hideBorder
|
|
hidePadding
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="mb-4">
|
|
<Label text={t('settings:nickname')} optional />
|
|
<Input
|
|
type="text"
|
|
value={hotKeyForm.name || ''}
|
|
onChange={(e) =>
|
|
handleSetForm('name', e.target.value.toLowerCase())
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="pb-2">
|
|
<TabUnderline
|
|
activeValue={activeTab}
|
|
values={TABS}
|
|
onChange={(v) => handleSwitchTab(v)}
|
|
/>
|
|
</div>
|
|
{activeTab === 'settings:templates' ? (
|
|
<div className="border-b border-th-bkg-3">
|
|
<button
|
|
className={TEMPLATE_BUTTON_CLASSES}
|
|
onClick={() =>
|
|
handleSetTemplate(CLOSE_LONG, HOTKEY_TEMPLATES.CLOSE_LONG)
|
|
}
|
|
>
|
|
<span className="text-th-fgd-2">
|
|
{HOTKEY_TEMPLATES.CLOSE_LONG}
|
|
</span>
|
|
<TemplateCheckMark
|
|
isActive={selectedTemplate === HOTKEY_TEMPLATES.CLOSE_LONG}
|
|
/>
|
|
</button>
|
|
<button
|
|
className={TEMPLATE_BUTTON_CLASSES}
|
|
onClick={() =>
|
|
handleSetTemplate(CLOSE_SHORT, HOTKEY_TEMPLATES.CLOSE_SHORT)
|
|
}
|
|
>
|
|
<span className="text-th-fgd-2">
|
|
{HOTKEY_TEMPLATES.CLOSE_SHORT}
|
|
</span>
|
|
<TemplateCheckMark
|
|
isActive={selectedTemplate === HOTKEY_TEMPLATES.CLOSE_SHORT}
|
|
/>
|
|
</button>
|
|
<button
|
|
className={TEMPLATE_BUTTON_CLASSES}
|
|
onClick={() =>
|
|
handleSetTemplate(
|
|
CLOSE_ALL_PERP,
|
|
HOTKEY_TEMPLATES.CLOSE_ALL_PERP,
|
|
)
|
|
}
|
|
>
|
|
<span className="text-th-fgd-2">
|
|
{HOTKEY_TEMPLATES.CLOSE_ALL_PERP}
|
|
</span>
|
|
<TemplateCheckMark
|
|
isActive={selectedTemplate === HOTKEY_TEMPLATES.CLOSE_ALL_PERP}
|
|
/>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="mb-4">
|
|
<Label text={t('settings:order-side')} />
|
|
<ButtonGroup
|
|
activeValue={hotKeyForm.side}
|
|
names={[t('buy'), t('sell')]}
|
|
onChange={(side) => handleSetForm('side', side)}
|
|
values={['buy', 'sell']}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<Label text={t('trade:order-type')} />
|
|
<ButtonGroup
|
|
activeValue={hotKeyForm.orderType}
|
|
names={[t('trade:limit'), t('market')]}
|
|
onChange={(type) => handleSetForm('orderType', type)}
|
|
values={['limit', 'market']}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<Label text={t('settings:order-size-type')} />
|
|
<ButtonGroup
|
|
activeValue={hotKeyForm.sizeType}
|
|
names={[t('settings:percentage'), t('settings:notional')]}
|
|
onChange={(type) => handleSetForm('sizeType', type)}
|
|
values={['percentage', 'notional']}
|
|
/>
|
|
</div>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="w-full">
|
|
<Tooltip
|
|
content={
|
|
hotKeyForm.sizeType === 'notional'
|
|
? t('settings:tooltip-hot-key-notional-size')
|
|
: t('settings:tooltip-hot-key-percentage-size')
|
|
}
|
|
>
|
|
<Label className="tooltip-underline" text={t('trade:size')} />
|
|
</Tooltip>
|
|
<Input
|
|
hasError={formErrors.size !== undefined}
|
|
type="text"
|
|
value={hotKeyForm.size}
|
|
onChange={(e) => handleSetForm('size', e.target.value)}
|
|
suffix={hotKeyForm.sizeType === 'percentage' ? '%' : 'USD'}
|
|
/>
|
|
{formErrors.size ? (
|
|
<div className="mt-1">
|
|
<InlineNotification
|
|
type="error"
|
|
desc={formErrors.size}
|
|
hideBorder
|
|
hidePadding
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{hotKeyForm.orderType === 'limit' ? (
|
|
<div className="w-full">
|
|
<Tooltip content={t('settings:tooltip-hot-key-price')}>
|
|
<Label className="tooltip-underline" text={t('price')} />
|
|
</Tooltip>
|
|
<Input
|
|
hasError={formErrors.price !== undefined}
|
|
type="text"
|
|
value={hotKeyForm.price}
|
|
onChange={(e) => handleSetForm('price', e.target.value)}
|
|
placeholder="e.g. 1%"
|
|
suffix="%"
|
|
/>
|
|
{formErrors.price ? (
|
|
<div className="mt-1">
|
|
<InlineNotification
|
|
type="error"
|
|
desc={formErrors.price}
|
|
hideBorder
|
|
hidePadding
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap md:flex-nowrap">
|
|
{hotKeyForm.orderType === 'limit' ? (
|
|
<div className="flex">
|
|
<div className="mr-3 mt-4" id="trade-step-six">
|
|
<Tooltip
|
|
className="hidden md:block"
|
|
delay={100}
|
|
content={t('trade:tooltip-post')}
|
|
>
|
|
<Checkbox
|
|
checked={hotKeyForm.post}
|
|
onChange={(e) => handlePostOnlyChange(e.target.checked)}
|
|
>
|
|
{t('trade:post')}
|
|
</Checkbox>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="mr-3 mt-4" id="trade-step-seven">
|
|
<Tooltip
|
|
className="hidden md:block"
|
|
delay={100}
|
|
content={t('trade:tooltip-ioc')}
|
|
>
|
|
<div className="flex items-center text-xs text-th-fgd-3">
|
|
<Checkbox
|
|
checked={hotKeyForm.ioc}
|
|
onChange={(e) => handleIocChange(e.target.checked)}
|
|
>
|
|
IOC
|
|
</Checkbox>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="mr-3 mt-4" id="trade-step-eight">
|
|
<Tooltip
|
|
className="hidden md:block"
|
|
delay={100}
|
|
content={t('trade:tooltip-enable-margin')}
|
|
>
|
|
<Checkbox
|
|
checked={hotKeyForm.margin}
|
|
onChange={(e) => handleSetForm('margin', e.target.checked)}
|
|
>
|
|
{t('trade:margin')}
|
|
</Checkbox>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="mr-3 mt-4">
|
|
<Tooltip
|
|
className="hidden md:block"
|
|
delay={100}
|
|
content={
|
|
'Reduce will only decrease the size of an open position. This is often used for closing a position.'
|
|
}
|
|
>
|
|
<div className="flex items-center text-xs text-th-fgd-3">
|
|
<Checkbox
|
|
checked={hotKeyForm.reduce}
|
|
onChange={(e) =>
|
|
handleSetForm('reduce', e.target.checked)
|
|
}
|
|
>
|
|
{t('trade:reduce-only')}
|
|
</Checkbox>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
<Button className="mt-6 w-full" onClick={handleSave}>
|
|
{t('settings:save-hot-key')}
|
|
</Button>
|
|
</>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default HotKeyModal
|
|
|
|
const TemplateCheckMark = ({ isActive }: { isActive: boolean }) => {
|
|
return isActive ? (
|
|
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-success">
|
|
<CheckIcon className="h-4 w-4 text-th-bkg-1" />
|
|
</div>
|
|
) : (
|
|
<div className="h-5 w-5 rounded-full bg-th-bkg-4" />
|
|
)
|
|
}
|