|
|
@ -44,17 +44,11 @@ export default function CurrencyInput({ |
|
|
|
|
|
|
|
|
|
|
|
const [isSwapped, setSwapped] = useState(false); |
|
|
|
const [isSwapped, setSwapped] = useState(false); |
|
|
|
const [newHexValue, setNewHexValue] = useState(hexValue); |
|
|
|
const [newHexValue, setNewHexValue] = useState(hexValue); |
|
|
|
|
|
|
|
const [shouldDisplayFiat, setShouldDisplayFiat] = useState(featureSecondary); |
|
|
|
const shouldUseFiat = () => { |
|
|
|
const shouldUseFiat = hideSecondary ? false : Boolean(shouldDisplayFiat); |
|
|
|
if (hideSecondary) { |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return Boolean(featureSecondary); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getDecimalValue = () => { |
|
|
|
const getDecimalValue = () => { |
|
|
|
const decimalValueString = shouldUseFiat() |
|
|
|
const decimalValueString = shouldUseFiat |
|
|
|
? getValueFromWeiHex({ |
|
|
|
? getValueFromWeiHex({ |
|
|
|
value: hexValue, |
|
|
|
value: hexValue, |
|
|
|
toCurrency: secondaryCurrency, |
|
|
|
toCurrency: secondaryCurrency, |
|
|
@ -71,22 +65,15 @@ export default function CurrencyInput({ |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const initialDecimalValue = hexValue ? getDecimalValue() : 0; |
|
|
|
const initialDecimalValue = hexValue ? getDecimalValue() : 0; |
|
|
|
const [decimalValue, setDecimalValue] = useState(initialDecimalValue); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
setNewHexValue(hexValue); |
|
|
|
|
|
|
|
const newDecimalValue = getDecimalValue(); |
|
|
|
|
|
|
|
setDecimalValue(newDecimalValue); |
|
|
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
}, [hexValue]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const swap = async () => { |
|
|
|
const swap = async () => { |
|
|
|
await onPreferenceToggle(); |
|
|
|
await onPreferenceToggle(); |
|
|
|
setSwapped(!isSwapped); |
|
|
|
setSwapped(!isSwapped); |
|
|
|
|
|
|
|
setShouldDisplayFiat(!shouldDisplayFiat); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleChange = (newDecimalValue) => { |
|
|
|
const handleChange = (newDecimalValue) => { |
|
|
|
const hexValueNew = shouldUseFiat() |
|
|
|
const hexValueNew = shouldUseFiat |
|
|
|
? getWeiHexFromDecimalValue({ |
|
|
|
? getWeiHexFromDecimalValue({ |
|
|
|
value: newDecimalValue, |
|
|
|
value: newDecimalValue, |
|
|
|
fromCurrency: secondaryCurrency, |
|
|
|
fromCurrency: secondaryCurrency, |
|
|
@ -101,17 +88,20 @@ export default function CurrencyInput({ |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
setNewHexValue(hexValueNew); |
|
|
|
setNewHexValue(hexValueNew); |
|
|
|
setDecimalValue(newDecimalValue); |
|
|
|
|
|
|
|
onChange(hexValueNew); |
|
|
|
onChange(hexValueNew); |
|
|
|
setSwapped(!isSwapped); |
|
|
|
setSwapped(!isSwapped); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (isSwapped) { |
|
|
|
setNewHexValue(hexValue); |
|
|
|
handleChange(decimalValue); |
|
|
|
}, [hexValue]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (featureSecondary) { |
|
|
|
|
|
|
|
handleChange(initialDecimalValue); |
|
|
|
} |
|
|
|
} |
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
}, [isSwapped]); |
|
|
|
}, [featureSecondary, initialDecimalValue]); |
|
|
|
|
|
|
|
|
|
|
|
const renderConversionComponent = () => { |
|
|
|
const renderConversionComponent = () => { |
|
|
|
let currency, numberOfDecimals; |
|
|
|
let currency, numberOfDecimals; |
|
|
@ -124,7 +114,7 @@ export default function CurrencyInput({ |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (shouldUseFiat()) { |
|
|
|
if (shouldUseFiat) { |
|
|
|
// Display ETH
|
|
|
|
// Display ETH
|
|
|
|
currency = preferredCurrency || ETH; |
|
|
|
currency = preferredCurrency || ETH; |
|
|
|
numberOfDecimals = 8; |
|
|
|
numberOfDecimals = 8; |
|
|
@ -156,9 +146,9 @@ export default function CurrencyInput({ |
|
|
|
onChange, |
|
|
|
onChange, |
|
|
|
onPreferenceToggle, |
|
|
|
onPreferenceToggle, |
|
|
|
}} |
|
|
|
}} |
|
|
|
suffix={shouldUseFiat() ? secondarySuffix : primarySuffix} |
|
|
|
suffix={shouldUseFiat ? secondarySuffix : primarySuffix} |
|
|
|
onChange={handleChange} |
|
|
|
onChange={handleChange} |
|
|
|
value={decimalValue} |
|
|
|
value={initialDecimalValue} |
|
|
|
actionComponent={ |
|
|
|
actionComponent={ |
|
|
|
<button className="currency-input__swap-component" onClick={swap}> |
|
|
|
<button className="currency-input__swap-component" onClick={swap}> |
|
|
|
<i className="fa fa-retweet fa-lg" /> |
|
|
|
<i className="fa fa-retweet fa-lg" /> |
|
|
|