TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show STX switch for wrapping / unwrapping (#14225)

Browse Source
feature/default_network_editable
Daniel 3 years ago committed by GitHub
parent 4f1cee4b87
commit 69d7c51c56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 85 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      ui/pages/swaps/build-quote/build-quote.js
  2. 177
      ui/pages/swaps/slippage-buttons/slippage-buttons.js

4
ui/pages/swaps/build-quote/build-quote.js
Unescape View File

@ -825,7 +825,8 @@ export default function BuildQuote({
)} )}
</div> </div>
))} ))}
{!isDirectWrappingEnabled && ( {(smartTransactionsEnabled ||
(!smartTransactionsEnabled && !isDirectWrappingEnabled)) && (
<div className="build-quote__slippage-buttons-container"> <div className="build-quote__slippage-buttons-container">
<SlippageButtons <SlippageButtons
onSelect={(newSlippage) => { onSelect={(newSlippage) => {
@ -837,6 +838,7 @@ export default function BuildQuote({
smartTransactionsOptInStatus={smartTransactionsOptInStatus} smartTransactionsOptInStatus={smartTransactionsOptInStatus}
setSmartTransactionsOptInStatus={setSmartTransactionsOptInStatus} setSmartTransactionsOptInStatus={setSmartTransactionsOptInStatus}
currentSmartTransactionsError={currentSmartTransactionsError} currentSmartTransactionsError={currentSmartTransactionsError}
isDirectWrappingEnabled={isDirectWrappingEnabled}
/> />
</div> </div>
)} )}

177
ui/pages/swaps/slippage-buttons/slippage-buttons.js
Unescape View File

@ -24,6 +24,7 @@ export default function SlippageButtons({
smartTransactionsOptInStatus, smartTransactionsOptInStatus,
setSmartTransactionsOptInStatus, setSmartTransactionsOptInStatus,
currentSmartTransactionsError, currentSmartTransactionsError,
isDirectWrappingEnabled,
}) { }) {
const t = useContext(I18nContext); const t = useContext(I18nContext);
const [customValue, setCustomValue] = useState(() => { const [customValue, setCustomValue] = useState(() => {
@ -103,94 +104,101 @@ export default function SlippageButtons({
<div className="slippage-buttons__content"> <div className="slippage-buttons__content">
{open && ( {open && (
<> <>
<div className="slippage-buttons__dropdown-content"> {!isDirectWrappingEnabled && (
<div className="slippage-buttons__buttons-prefix"> <div className="slippage-buttons__dropdown-content">
<div className="slippage-buttons__prefix-text"> <div className="slippage-buttons__buttons-prefix">
{t('swapsMaxSlippage')} <div className="slippage-buttons__prefix-text">
{t('swapsMaxSlippage')}
</div>
<InfoTooltip
position="top"
contentText={t('swapAdvancedSlippageInfo')}
/>
</div> </div>
<InfoTooltip <ButtonGroup
position="top" defaultActiveButtonIndex={
contentText={t('swapAdvancedSlippageInfo')} activeButtonIndex === 2 && !customValue
/> ? 1
</div> : activeButtonIndex
<ButtonGroup }
defaultActiveButtonIndex={ variant="radiogroup"
activeButtonIndex === 2 && !customValue newActiveButtonIndex={activeButtonIndex}
? 1
: activeButtonIndex
}
variant="radiogroup"
newActiveButtonIndex={activeButtonIndex}
className={classnames(
'button-group',
'slippage-buttons__button-group',
)}
>
<Button
onClick={() => {
setCustomValue('');
setEnteringCustomValue(false);
setActiveButtonIndex(0);
onSelect(2);
}}
>
2%
</Button>
<Button
onClick={() => {
setCustomValue('');
setEnteringCustomValue(false);
setActiveButtonIndex(1);
onSelect(3);
}}
>
3%
</Button>
<Button
className={classnames( className={classnames(
'slippage-buttons__button-group-custom-button', 'button-group',
{ 'slippage-buttons__button-group',
'radio-button--danger': errorText,
},
)} )}
onClick={() => {
setActiveButtonIndex(2);
setEnteringCustomValue(true);
}}
> >
{enteringCustomValue ? ( <Button
<div onClick={() => {
className={classnames('slippage-buttons__custom-input', { setCustomValue('');
'slippage-buttons__custom-input--danger': errorText, setEnteringCustomValue(false);
})} setActiveButtonIndex(0);
> onSelect(2);
<input }}
onChange={(event) => { >
const { value } = event.target; 2%
const isValueNumeric = !isNaN(Number(value)); </Button>
if (isValueNumeric) { <Button
setCustomValue(value); onClick={() => {
onSelect(Number(value)); setCustomValue('');
} setEnteringCustomValue(false);
}} setActiveButtonIndex(1);
type="text" onSelect(3);
maxLength="4" }}
ref={setInputRef} >
onBlur={() => { 3%
setEnteringCustomValue(false); </Button>
}} <Button
value={customValue || ''} className={classnames(
/> 'slippage-buttons__button-group-custom-button',
</div> {
) : ( 'radio-button--danger': errorText,
customValueText },
)} )}
{(customValue || enteringCustomValue) && ( onClick={() => {
<div className="slippage-buttons__percentage-suffix">%</div> setActiveButtonIndex(2);
)} setEnteringCustomValue(true);
</Button> }}
</ButtonGroup> >
</div> {enteringCustomValue ? (
<div
className={classnames(
'slippage-buttons__custom-input',
{
'slippage-buttons__custom-input--danger': errorText,
},
)}
>
<input
onChange={(event) => {
const { value } = event.target;
const isValueNumeric = !isNaN(Number(value));
if (isValueNumeric) {
setCustomValue(value);
onSelect(Number(value));
}
}}
type="text"
maxLength="4"
ref={setInputRef}
onBlur={() => {
setEnteringCustomValue(false);
}}
value={customValue || ''}
/>
</div>
) : (
customValueText
)}
{(customValue || enteringCustomValue) && (
<div className="slippage-buttons__percentage-suffix">
%
</div>
)}
</Button>
</ButtonGroup>
</div>
)}
{smartTransactionsEnabled && ( {smartTransactionsEnabled && (
<Box marginTop={2} display={DISPLAY.FLEX}> <Box marginTop={2} display={DISPLAY.FLEX}>
<Box <Box
@ -246,4 +254,5 @@ SlippageButtons.propTypes = {
smartTransactionsOptInStatus: PropTypes.bool, smartTransactionsOptInStatus: PropTypes.bool,
setSmartTransactionsOptInStatus: PropTypes.func, setSmartTransactionsOptInStatus: PropTypes.func,
currentSmartTransactionsError: PropTypes.string, currentSmartTransactionsError: PropTypes.string,
isDirectWrappingEnabled: PropTypes.bool,
}; };

Write Preview
Loading…
Cancel
Save