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 { .page-container__footer {
margin-top: auto; 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 { I18nContext } from '../../../contexts/i18n';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component'; import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import LoadingHeartBeat from '../../ui/loading-heartbeat';
export default function TransactionDetail({ rows = [], onEdit }) { export default function TransactionDetail({ rows = [], onEdit }) {
const t = useContext(I18nContext); const t = useContext(I18nContext);
return ( return (
<div className="transaction-detail"> <div className="transaction-detail">
{process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
{onEdit && ( {onEdit && (
<div className="transaction-detail-edit"> <div className="transaction-detail-edit">
<button onClick={onEdit}>{t('edit')}</button> <button onClick={onEdit}>{t('edit')}</button>

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

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

7
ui/hooks/useShouldAnimateGasEstimations.js
View File

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

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