m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Show STX switch for wrapping / unwrapping (#14225)

Browse Source
This commit is contained in:
Daniel 2022-03-30 10:02:55 +02:00 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 Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/pages/swaps/build-quote/build-quote.js
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
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,
};