103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import { XMarkIcon } from '@heroicons/react/20/solid'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import mangoStore from '@store/mangoStore'
|
|
import ButtonGroup from '../forms/ButtonGroup'
|
|
import Input from '../forms/Input'
|
|
import Button, { IconButton, LinkButton } from '../shared/Button'
|
|
|
|
const slippagePresets = ['0.1', '0.5', '1', '2']
|
|
|
|
const SwapSettings = ({ onClose }: { onClose: () => void }) => {
|
|
const { t } = useTranslation(['common', 'settings', 'swap'])
|
|
const slippage = mangoStore((s) => s.swap.slippage)
|
|
const set = mangoStore((s) => s.set)
|
|
const focusRef = useRef<HTMLButtonElement>(null)
|
|
|
|
const [showCustomSlippageForm, setShowCustomSlippageForm] = useState(false)
|
|
const [inputValue, setInputValue] = useState(slippage.toString())
|
|
|
|
useEffect(() => {
|
|
if (!slippagePresets.includes(slippage.toString())) {
|
|
setShowCustomSlippageForm(true)
|
|
}
|
|
}, [])
|
|
|
|
const handleSetSlippage = (slippage: string, close?: boolean) => {
|
|
set((s) => {
|
|
s.swap.slippage = parseFloat(slippage)
|
|
})
|
|
if (close) {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (focusRef?.current) {
|
|
focusRef.current.focus()
|
|
}
|
|
}, [focusRef])
|
|
|
|
return (
|
|
<>
|
|
<h3 className="mb-3">{t('settings')}</h3>
|
|
<IconButton
|
|
className="absolute right-2 top-2"
|
|
onClick={onClose}
|
|
hideBg
|
|
ref={focusRef}
|
|
>
|
|
<XMarkIcon className="h-6 w-6" />
|
|
</IconButton>
|
|
|
|
<div className="mt-4">
|
|
<div className="mb-2 flex justify-between">
|
|
<p className="text-th-fgd-2">{t('swap:max-slippage')}</p>
|
|
<LinkButton
|
|
onClick={() => setShowCustomSlippageForm(!showCustomSlippageForm)}
|
|
>
|
|
{showCustomSlippageForm ? t('swap:preset') : t('settings:custom')}
|
|
</LinkButton>
|
|
</div>
|
|
{showCustomSlippageForm ? (
|
|
<>
|
|
<Input
|
|
type="text"
|
|
placeholder="0.00"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
suffix="%"
|
|
/>
|
|
<Button
|
|
disabled={
|
|
!inputValue ||
|
|
isNaN(Number(inputValue)) ||
|
|
parseFloat(inputValue) <= 0
|
|
}
|
|
className="mt-4"
|
|
onClick={() => handleSetSlippage(inputValue, true)}
|
|
>
|
|
{t('save')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ButtonGroup
|
|
activeValue={slippage.toString()}
|
|
className="h-10 font-mono"
|
|
onChange={(v) => handleSetSlippage(v)}
|
|
unit="%"
|
|
values={slippagePresets}
|
|
/>
|
|
<Button className="mt-4" onClick={() => onClose()}>
|
|
{t('save')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SwapSettings
|