mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #12098 from MetaMask/dev_12088
Scroll all inputs into view when clicking Advanced options in gas edit modal
This commit is contained in:
commit
9e4b43defd
@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
@ -70,6 +70,8 @@ export default function EditGasDisplay({
|
||||
txParamsHaveBeenCustomized,
|
||||
}) {
|
||||
const t = useContext(I18nContext);
|
||||
const scrollRef = useRef(null);
|
||||
|
||||
const isMainnet = useSelector(getIsMainnet);
|
||||
const networkAndAccountSupport1559 = useSelector(
|
||||
checkNetworkAndAccountSupports1559,
|
||||
@ -87,6 +89,12 @@ export default function EditGasDisplay({
|
||||
showAdvancedInlineGasIfPossible,
|
||||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (showAdvancedForm && scrollRef.current) {
|
||||
scrollRef.current.scrollIntoView();
|
||||
}
|
||||
}, [showAdvancedForm]);
|
||||
|
||||
const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame(
|
||||
transaction,
|
||||
);
|
||||
@ -285,6 +293,7 @@ export default function EditGasDisplay({
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div ref={scrollRef} className="edit-gas-display__scroll-bottom" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -67,4 +67,9 @@
|
||||
position: relative;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&__scroll-bottom {
|
||||
margin-bottom: -20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user