m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 11:28:51 +01:00
Code

Merge pull request #12098 from MetaMask/dev_12088

Browse Source 
Scroll all inputs into view when clicking Advanced options in gas edit modal
This commit is contained in:
ryanml 2021-09-14 19:59:08 -07:00 committed by GitHub
commit 9e4b43defd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/components/app/edit-gas-display/edit-gas-display.component.js
View File

@ -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>
);
}

5
ui/components/app/edit-gas-display/index.scss
View File

@ -67,4 +67,9 @@
position: relative;
margin-top: 4px;
}
&__scroll-bottom {
margin-bottom: -20px;
margin-top: 20px;
}
}