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

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

@ -24,6 +24,7 @@ export default function SlippageButtons({
smartTransactionsOptInStatus,
setSmartTransactionsOptInStatus,
currentSmartTransactionsError,
isDirectWrappingEnabled,
}) {
const t = useContext(I18nContext);
const [customValue, setCustomValue] = useState(() => {
@ -103,94 +104,101 @@ export default function SlippageButtons({
<div className="slippage-buttons__content">
{open && (
<>
<div className="slippage-buttons__dropdown-content">
<div className="slippage-buttons__buttons-prefix">
<div className="slippage-buttons__prefix-text">
{t('swapsMaxSlippage')}
{!isDirectWrappingEnabled && (
<div className="slippage-buttons__dropdown-content">
<div className="slippage-buttons__buttons-prefix">
<div className="slippage-buttons__prefix-text">
{t('swapsMaxSlippage')}
</div>
<InfoTooltip
position="top"
contentText={t('swapAdvancedSlippageInfo')}
/>
</div>
<InfoTooltip
position="top"
contentText={t('swapAdvancedSlippageInfo')}
/>
</div>
<ButtonGroup
defaultActiveButtonIndex={
activeButtonIndex === 2 && !customValue
? 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
<ButtonGroup
defaultActiveButtonIndex={
activeButtonIndex === 2 && !customValue
? 1
: activeButtonIndex
}
variant="radiogroup"
newActiveButtonIndex={activeButtonIndex}
className={classnames(
'slippage-buttons__button-group-custom-button',
{
'radio-button--danger': errorText,
},
'button-group',
'slippage-buttons__button-group',
)}
onClick={() => {
setActiveButtonIndex(2);
setEnteringCustomValue(true);
}}
>
{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>
<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(
'slippage-buttons__button-group-custom-button',
{
'radio-button--danger': errorText,
},
)}
onClick={() => {
setActiveButtonIndex(2);
setEnteringCustomValue(true);
}}
>
{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 && (
<Box marginTop={2} display={DISPLAY.FLEX}>
<Box
@ -246,4 +254,5 @@ SlippageButtons.propTypes = {
smartTransactionsOptInStatus: PropTypes.bool,
setSmartTransactionsOptInStatus: PropTypes.func,
currentSmartTransactionsError: PropTypes.string,
isDirectWrappingEnabled: PropTypes.bool,
};

Write Preview
Loading…
Cancel
Save