97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import BigNumber from 'bignumber.js'
|
|
import React, { useCallback, useMemo, useState } from 'react'
|
|
import { Button, Modal, LinkExternal } from '@pancakeswap/uikit'
|
|
import { ModalActions, ModalInput } from 'components/Modal'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import useToast from 'hooks/useToast'
|
|
import { getFullDisplayBalance } from 'utils/formatBalance'
|
|
|
|
interface DepositModalProps {
|
|
min: BigNumber
|
|
max: BigNumber
|
|
onConfirm: (amount: string) => void
|
|
onDismiss?: () => void
|
|
tokenName?: string
|
|
tokenDecimals?: number
|
|
addLiquidityUrl?: string
|
|
}
|
|
|
|
const DepositModal: React.FC<DepositModalProps> = ({
|
|
min,
|
|
max,
|
|
onConfirm,
|
|
onDismiss,
|
|
tokenDecimals = 18,
|
|
tokenName = '',
|
|
addLiquidityUrl,
|
|
}) => {
|
|
const { toastSuccess, toastError, toastWarning } = useToast()
|
|
const [val, setVal] = useState('')
|
|
const [pendingTx, setPendingTx] = useState(false)
|
|
const { t } = useTranslation()
|
|
const fullBalance = useMemo(() => {
|
|
return getFullDisplayBalance(max, tokenDecimals)
|
|
}, [max, tokenDecimals])
|
|
|
|
const handleChange = useCallback(
|
|
(e: React.FormEvent<HTMLInputElement>) => {
|
|
setVal(e.currentTarget.value)
|
|
},
|
|
[setVal],
|
|
)
|
|
|
|
const handleSelectMax = useCallback(() => {
|
|
setVal(fullBalance)
|
|
}, [fullBalance, setVal])
|
|
|
|
return (
|
|
<Modal title={t('Stake tokens')} onDismiss={onDismiss}>
|
|
<ModalInput
|
|
value={val}
|
|
onSelectMax={handleSelectMax}
|
|
onChange={handleChange}
|
|
max={fullBalance}
|
|
symbol={tokenName}
|
|
addLiquidityUrl={addLiquidityUrl}
|
|
inputTitle={t('Stake')}
|
|
/>
|
|
<ModalActions>
|
|
<Button variant="secondary" onClick={onDismiss} width="100%">
|
|
{t('Cancel')}
|
|
</Button>
|
|
<Button
|
|
width="100%"
|
|
disabled={pendingTx || fullBalance === '0' || val === '0'}
|
|
onClick={async () => {
|
|
if (Number(val) < min.toNumber()) {
|
|
toastWarning(t('Hint'), `${t('At least stake ')}${min.toNumber()}`)
|
|
return
|
|
}
|
|
setPendingTx(true)
|
|
try {
|
|
await onConfirm(val)
|
|
toastSuccess(t('Staked!'), t('Your funds have been staked in the farm'))
|
|
onDismiss()
|
|
} catch (e) {
|
|
toastError(
|
|
t('Error'),
|
|
t('Please try again. Confirm the transaction and make sure you are paying enough gas!'),
|
|
)
|
|
console.error(e)
|
|
} finally {
|
|
setPendingTx(false)
|
|
}
|
|
}}
|
|
>
|
|
{pendingTx ? t('Pending Confirmation') : t('Confirm')}
|
|
</Button>
|
|
</ModalActions>
|
|
<LinkExternal href={addLiquidityUrl} style={{ alignSelf: 'center' }}>
|
|
{t('Get %symbol%', { symbol: tokenName })}
|
|
</LinkExternal>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default DepositModal
|