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

Improve flashing behaviour for loading gas estimates (on confirm screen) (#11852)

Browse Source 
* Improve flashing behaviour for loading gas estimates

* Fix typo

* renderHeartBeatIfInTest
This commit is contained in:
Dan J Miller 2021-08-16 20:18:24 -02:30 committed by ryanml
parent b6086ebc17
commit 805859af4d
5 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -88,4 +88,8 @@
.page-container__footer {
margin-top: auto;
}
&__currency-container {
position: relative;
}
}

2
ui/components/app/transaction-detail/transaction-detail.component.js
View File

@ -4,14 +4,12 @@ import PropTypes from 'prop-types';
import { I18nContext } from '../../../contexts/i18n';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import LoadingHeartBeat from '../../ui/loading-heartbeat';
export default function TransactionDetail({ rows = [], onEdit }) {
const t = useContext(I18nContext);
return (
<div className="transaction-detail">
{process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
{onEdit && (
<div className="transaction-detail-edit">
<button onClick={onEdit}>{t('edit')}</button>

8
ui/components/ui/loading-heartbeat/index.scss
View File

@ -19,9 +19,7 @@
}
@keyframes heartbeat {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0.5; }
75% { opacity: 1; }
100% { opacity: 0; }
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}

7
ui/hooks/useShouldAnimateGasEstimations.js
View File

@ -40,7 +40,14 @@ export function useShouldAnimateGasEstimations() {
showLoadingAnimation === true
) {
dispatch(toggleGasLoadingAnimation(true));
}
}, [dispatch, isGasLoadingAnimationActive, showLoadingAnimation]);
useEffect(() => {
if (
isGasLoadingAnimationActive === true &&
showLoadingAnimation === false
) {
setTimeout(() => {
dispatch(toggleGasLoadingAnimation(false));
}, 2000);

18
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -33,6 +33,7 @@ import { toBuffer } from '../../../shared/modules/buffer-utils';
import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component';
import TransactionDetailItem from '../../components/app/transaction-detail-item/transaction-detail-item.component';
import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
import GasTiming from '../../components/app/gas-timing/gas-timing.component';
import { COLORS } from '../../helpers/constants/design-system';
@ -43,6 +44,9 @@ import {
removePollingTokenFromAppState,
} from '../../store/actions';
const renderHeartBeatIfNotInTest = () =>
process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />;
export default class ConfirmTransactionBase extends Component {
static contextTypes = {
t: PropTypes.func,
@ -439,29 +443,41 @@ export default class ConfirmTransactionBase extends Component {
txData.dappSuggestedGasFees ? COLORS.SECONDARY1 : COLORS.BLACK
}
detailText={
<div className="confirm-page-container-content__currency-container">
{renderHeartBeatIfNotInTest()}
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={hexMinimumTransactionFee}
hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
/>
</div>
}
detailTotal={
<div className="confirm-page-container-content__currency-container">
{renderHeartBeatIfNotInTest()}
<UserPreferencedCurrencyDisplay
type={PRIMARY}
value={hexMinimumTransactionFee}
hideLabel={!useNativeCurrencyAsPrimaryCurrency}
/>
</div>
}
subText={t('editGasSubTextFee', [
<b key="editGasSubTextFeeLabel">
{t('editGasSubTextFeeLabel')}
</b>,
<div
key="editGasSubTextFeeValue"
className="confirm-page-container-content__currency-container"
>
{renderHeartBeatIfNotInTest()}
<UserPreferencedCurrencyDisplay
key="editGasSubTextFeeAmount"
type={PRIMARY}
value={hexMaximumTransactionFee}
hideLabel={!useNativeCurrencyAsPrimaryCurrency}
/>,
/>
</div>,
])}
subTitle={
<GasTiming