1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-18 07:23:21 +01:00
metamask-extension/ui/pages/swaps/countdown-timer/countdown-timer.js
Daniel c8b697687f
Swaps UI redesign for the View Quote page (#12950)
* Update EIP-1559 UI on the View Quote page (WIP)

* UI redesign for the View Quote page in Swaps, update tests,  refactoring

* Update styles for the View Quote page

* Improve scrolling and styling for the View Quote page

* Update snapshots

* Fix a scrolling issue

* Use Ethereum mainnet for swaps API calls if it's Rinkeby

* UI / content updates on the View Quote page

* Remove unused content in Swaps

* Fix an ESLint issue

* Update UTs with the latest content

* Renaming

* Remove 2 more unused content strings
2021-12-07 00:21:26 -03:30

123 lines
3.7 KiB
JavaScript

import React, { useState, useEffect, useContext, useRef } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Duration } from 'luxon';
import { I18nContext } from '../../../contexts/i18n';
import InfoTooltip from '../../../components/ui/info-tooltip';
import { getSwapsQuoteRefreshTime } from '../../../ducks/swaps/swaps';
import { SECOND } from '../../../../shared/constants/time';
import TimerIcon from './timer-icon';
// Return the mm:ss start time of the countdown timer.
// If time has elapsed between `timeStarted` the time current time,
// then that elapsed time will be subtracted from the timer before
// rendering
function getNewTimer(currentTime, timeStarted, timeBaseStart) {
const timeAlreadyElapsed = currentTime - timeStarted;
return timeBaseStart - timeAlreadyElapsed;
}
function decreaseTimerByOne(timer) {
return Math.max(timer - SECOND, 0);
}
function timeBelowWarningTime(timer, warningTime) {
const [warningTimeMinutes, warningTimeSeconds] = warningTime.split(':');
return (
timer <=
(Number(warningTimeMinutes) * 60 + Number(warningTimeSeconds)) * SECOND
);
}
export default function CountdownTimer({
timeStarted,
timeOnly,
timerBase,
warningTime,
labelKey,
infoTooltipLabelKey,
}) {
const t = useContext(I18nContext);
const intervalRef = useRef();
const initialTimeStartedRef = useRef();
const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
const timerStart = Number(timerBase) || swapsQuoteRefreshTime;
const [currentTime, setCurrentTime] = useState(() => Date.now());
const [timer, setTimer] = useState(() =>
getNewTimer(currentTime, timeStarted, timerStart),
);
useEffect(() => {
if (intervalRef.current === undefined) {
intervalRef.current = setInterval(() => {
setTimer(decreaseTimerByOne);
}, SECOND);
}
return function cleanup() {
clearInterval(intervalRef.current);
};
}, []);
// Reset the timer that timer has hit '0:00' and the timeStarted prop has changed
useEffect(() => {
if (!initialTimeStartedRef.current) {
initialTimeStartedRef.current = timeStarted || Date.now();
}
if (timer === 0 && timeStarted !== initialTimeStartedRef.current) {
initialTimeStartedRef.current = timeStarted;
const newCurrentTime = Date.now();
setCurrentTime(newCurrentTime);
setTimer(getNewTimer(newCurrentTime, timeStarted, timerStart));
clearInterval(intervalRef.current);
intervalRef.current = setInterval(() => {
setTimer(decreaseTimerByOne);
}, SECOND);
}
}, [timeStarted, timer, timerStart]);
const formattedTimer = Duration.fromMillis(timer).toFormat('m:ss');
let time;
if (timeOnly) {
time = <div className="countdown-timer__time">{formattedTimer}</div>;
} else if (labelKey) {
time = t(labelKey, [
<div key="countdown-time-1" className="countdown-timer__time">
{formattedTimer}
</div>,
]);
}
return (
<div className="countdown-timer">
<div
data-testid="countdown-timer__timer-container"
className={classnames('countdown-timer__timer-container', {
'countdown-timer__timer-container--warning':
warningTime && timeBelowWarningTime(timer, warningTime),
})}
>
<TimerIcon />
{time}
</div>
{!timeOnly && infoTooltipLabelKey ? (
<InfoTooltip position="bottom" contentText={t(infoTooltipLabelKey)} />
) : null}
</div>
);
}
CountdownTimer.propTypes = {
timeStarted: PropTypes.number,
timeOnly: PropTypes.bool,
timerBase: PropTypes.number,
warningTime: PropTypes.string,
labelKey: PropTypes.string,
infoTooltipLabelKey: PropTypes.string,
};