mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
This commit is contained in:
parent
760b51cfac
commit
24551b7e9c
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import InfoTooltip from '../info-tooltip';
|
import InfoTooltip from '../info-tooltip';
|
||||||
@ -30,7 +30,26 @@ export default function ActionableMessage({
|
|||||||
iconFillColor = '',
|
iconFillColor = '',
|
||||||
roundedButtons,
|
roundedButtons,
|
||||||
dataTestId,
|
dataTestId,
|
||||||
|
autoHideTime = 0,
|
||||||
}) {
|
}) {
|
||||||
|
const [shouldDisplay, setShouldDisplay] = useState(true);
|
||||||
|
useEffect(
|
||||||
|
function () {
|
||||||
|
if (autoHideTime === 0) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setShouldDisplay(false);
|
||||||
|
}, autoHideTime);
|
||||||
|
|
||||||
|
return function () {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
[autoHideTime],
|
||||||
|
);
|
||||||
|
|
||||||
const actionableMessageClassName = classnames(
|
const actionableMessageClassName = classnames(
|
||||||
'actionable-message',
|
'actionable-message',
|
||||||
typeHash[type],
|
typeHash[type],
|
||||||
@ -42,6 +61,10 @@ export default function ActionableMessage({
|
|||||||
const onlyOneAction =
|
const onlyOneAction =
|
||||||
(primaryAction && !secondaryAction) || (secondaryAction && !primaryAction);
|
(primaryAction && !secondaryAction) || (secondaryAction && !primaryAction);
|
||||||
|
|
||||||
|
if (!shouldDisplay) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={actionableMessageClassName} data-testid={dataTestId}>
|
<div className={actionableMessageClassName} data-testid={dataTestId}>
|
||||||
{useIcon ? icon || <InfoTooltipIcon fillColor={iconFillColor} /> : null}
|
{useIcon ? icon || <InfoTooltipIcon fillColor={iconFillColor} /> : null}
|
||||||
@ -163,4 +186,8 @@ ActionableMessage.propTypes = {
|
|||||||
*/
|
*/
|
||||||
roundedButtons: PropTypes.bool,
|
roundedButtons: PropTypes.bool,
|
||||||
dataTestId: PropTypes.string,
|
dataTestId: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* Whether the actionable message should auto-hide itself after a given amount of time
|
||||||
|
*/
|
||||||
|
autoHideTime: PropTypes.number,
|
||||||
};
|
};
|
||||||
|
@ -30,6 +30,7 @@ import {
|
|||||||
DISPLAY,
|
DISPLAY,
|
||||||
COLORS,
|
COLORS,
|
||||||
} from '../../helpers/constants/design-system';
|
} from '../../helpers/constants/design-system';
|
||||||
|
import { SECOND } from '../../../shared/constants/time';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ASSET_ROUTE,
|
ASSET_ROUTE,
|
||||||
@ -312,6 +313,7 @@ export default class Home extends PureComponent {
|
|||||||
<ActionableMessage
|
<ActionableMessage
|
||||||
type="success"
|
type="success"
|
||||||
className="home__new-network-notification"
|
className="home__new-network-notification"
|
||||||
|
autoHideTime={5 * SECOND}
|
||||||
message={
|
message={
|
||||||
<Box display={DISPLAY.INLINE_FLEX}>
|
<Box display={DISPLAY.INLINE_FLEX}>
|
||||||
<i className="fa fa-check-circle home__new-nft-notification-icon" />
|
<i className="fa fa-check-circle home__new-nft-notification-icon" />
|
||||||
|
Loading…
Reference in New Issue
Block a user