ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update logic for button state

Browse Source
This commit is contained in:
ian-jh 2019-07-24 14:53:36 -04:00
parent 2ceffda8f9
commit 8c3b2bff8d
2 changed files with 62 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/TransactionDetails/index.js
View File

@ -260,8 +260,10 @@ export default function TransactionDetails(props) {
<SlippageRow> <SlippageRow>
<Option <Option
onClick={() => { onClick={() => {
checkAcceptablePercentValue(0.1) updateSlippage(0.1)
setWarningType('none')
setActiveIndex(1) setActiveIndex(1)
props.setcustomSlippageError('valid')
setplaceHolder('Custom') setplaceHolder('Custom')
}} }}
active={activeIndex === 1 ? true : false} active={activeIndex === 1 ? true : false}
@ -270,8 +272,10 @@ export default function TransactionDetails(props) {
</Option> </Option>
<Option <Option
onClick={() => { onClick={() => {
checkAcceptablePercentValue(1) updateSlippage(1)
setWarningType('none')
setActiveIndex(2) setActiveIndex(2)
props.setcustomSlippageError('valid')
setplaceHolder('Custom') setplaceHolder('Custom')
}} }}
active={activeIndex === 2 ? true : false} active={activeIndex === 2 ? true : false}
@ -280,8 +284,10 @@ export default function TransactionDetails(props) {
</Option> </Option>
<OptionLarge <OptionLarge
onClick={() => { onClick={() => {
checkAcceptablePercentValue(2) updateSlippage(2)
setWarningType('none')
setActiveIndex(3) setActiveIndex(3)
props.setcustomSlippageError('valid')
setplaceHolder('Custom') setplaceHolder('Custom')
}} }}
active={activeIndex === 3 ? true : false} active={activeIndex === 3 ? true : false}
@ -301,11 +307,23 @@ export default function TransactionDetails(props) {
parseInput(e) parseInput(e)
}} }}
active={activeIndex === 4 ? true : false} active={activeIndex === 4 ? true : false}
warning={warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : ''} warning={
warningType === 'emptyInput'
? ''
: warningType !== 'none' && warningType !== 'riskyEntryLow'
? 'red'
: ''
}
/> />
<Percent <Percent
color={ color={
warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : activeIndex !== 4 ? 'faded' : '' warningType === 'emptyInput'
? 'faded'
: warningType !== 'none' && warningType !== 'riskyEntryLow'
? 'red'
: activeIndex !== 4
? 'faded'
: ''
} }
> >
% %
@ -313,11 +331,20 @@ export default function TransactionDetails(props) {
</InputGroup> </InputGroup>
</SlippageRow> </SlippageRow>
<SlippageRow> <SlippageRow>
<BottomError color={warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : ''}> <BottomError
color={
warningType === 'emptyInput'
? ''
: warningType !== 'none' && warningType !== 'riskyEntryLow'
? 'red'
: ''
}
>
{warningType === 'emptyInput' ? 'Enter a slippage percentage.' : ''}
{warningType === 'invalidEntry' ? 'Please input a valid percentage.' : ''} {warningType === 'invalidEntry' ? 'Please input a valid percentage.' : ''}
{warningType === 'invalidEntryBound' ? 'Pleae select value less than 50%' : ''} {warningType === 'invalidEntryBound' ? 'Pleae select value less than 50%' : ''}
{warningType === 'riskyEntryHigh' ? 'Youre at risk of being front-run.' : ''} {warningType === 'riskyEntryHigh' ? 'Your transaction may be frontrun.' : ''}
{warningType === 'riskyEntryLow' ? 'Youre transaction may fail.' : ''} {warningType === 'riskyEntryLow' ? 'Your transaction may fail.' : ''}
</BottomError> </BottomError>
</SlippageRow> </SlippageRow>
</SlippageSelector> </SlippageSelector>
@ -329,9 +356,14 @@ export default function TransactionDetails(props) {
const parseInput = e => { const parseInput = e => {
let input = e.target.value let input = e.target.value
if (input === '') {
setUserInput(input)
props.setcustomSlippageError('invalid')
return setWarningType('emptyInput')
}
//check for decimal //check for decimal
var isValid = /^[+]?\d*\.?\d{1,2}$/.test(input) || /^[+]?\d*\.$/.test(input) let isValid = /^[+]?\d*\.?\d{1,2}$/.test(input) || /^[+]?\d*\.$/.test(input)
var decimalLimit = /^\d+\.?\d{0,2}$/.test(input) || input === '' let decimalLimit = /^\d+\.?\d{0,2}$/.test(input) || input === ''
if (decimalLimit) { if (decimalLimit) {
setUserInput(input) setUserInput(input)
} else { } else {
@ -348,21 +380,28 @@ export default function TransactionDetails(props) {
setTimeout(function() { setTimeout(function() {
setWarningType('none') setWarningType('none')
if (input < 0 || input > 50) { if (input < 0 || input > 50) {
props.setcustomSlippageError('invalid')
return setWarningType('invalidEntryBound') return setWarningType('invalidEntryBound')
} }
if (input >= 0 && input < 0.1) { if (input >= 0 && input < 0.1) {
props.setcustomSlippageError('valid')
setWarningType('riskyEntryLow') setWarningType('riskyEntryLow')
} }
if (input >= 5) { if (input >= 5) {
console.log('doing it')
props.setcustomSlippageError('warning')
setWarningType('riskyEntryHigh') setWarningType('riskyEntryHigh')
} }
let num = parseFloat((input * 100).toFixed(2)) updateSlippage(input)
props.setRawSlippage(num)
props.setRawTokenSlippage(num)
}, 300) }, 300)
} }
const updateSlippage = newSlippage => {
let numParsed = parseFloat((newSlippage * 100).toFixed(2))
props.setRawSlippage(numParsed)
props.setRawTokenSlippage(numParsed)
}
const b = text => <Bold>{text}</Bold> const b = text => <Bold>{text}</Bold>
const renderTransactionDetails = () => { const renderTransactionDetails = () => {

11
src/pages/Swap/index.js
View File

@ -561,6 +561,8 @@ export default function Swap({ initialCurrency }) {
}) })
} }
const [customSlippageError, setcustomSlippageError] = useState('')
return ( return (
<> <>
<CurrencyInputPanel <CurrencyInputPanel
@ -664,10 +666,15 @@ export default function Swap({ initialCurrency }) {
dependentDecimals={dependentDecimals} dependentDecimals={dependentDecimals}
independentDecimals={independentDecimals} independentDecimals={independentDecimals}
percentSlippageFormatted={percentSlippageFormatted} percentSlippageFormatted={percentSlippageFormatted}
setcustomSlippageError={setcustomSlippageError}
/> />
<Flex> <Flex>
<Button disabled={!isValid} onClick={onSwap} warning={highSlippageWarning}> <Button
{highSlippageWarning ? t('swapAnyway') : t('swap')} disabled={!isValid || customSlippageError === 'invalid'}
onClick={onSwap}
warning={highSlippageWarning || customSlippageError === 'warning'}
>
{highSlippageWarning || customSlippageError === 'warning' ? t('swapAnyway') : t('swap')}
</Button> </Button>
</Flex> </Flex>
</> </>