1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/pages/swaps/countdown-timer/countdown-timer.js

116 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-10-06 20:28:38 +02:00
import React, { useState, useEffect, useContext, useRef } from 'react'
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'
const TIMER_BASE = 60000
// 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
2020-11-03 00:41:28 +01:00
function getNewTimer(currentTime, timeStarted, timeBaseStart) {
2020-10-06 20:28:38 +02:00
const timeAlreadyElapsed = currentTime - timeStarted
return timeBaseStart - timeAlreadyElapsed
}
2020-11-03 00:41:28 +01:00
function decreaseTimerByOne(timer) {
2020-10-06 20:28:38 +02:00
return Math.max(timer - 1000, 0)
}
2020-11-03 00:41:28 +01:00
function timeBelowWarningTime(timer, warningTime) {
2020-10-06 20:28:38 +02:00
const [warningTimeMinutes, warningTimeSeconds] = warningTime.split(':')
2020-11-03 00:41:28 +01:00
return (
timer <=
(Number(warningTimeMinutes) * 60 + Number(warningTimeSeconds)) * 1000
)
2020-10-06 20:28:38 +02:00
}
2020-11-03 00:41:28 +01:00
export default function CountdownTimer({
2020-10-06 20:28:38 +02:00
timeStarted,
timeOnly,
timerBase = TIMER_BASE,
warningTime,
labelKey,
infoTooltipLabelKey,
}) {
const t = useContext(I18nContext)
const intervalRef = useRef()
const initialTimeStartedRef = useRef()
const [currentTime, setCurrentTime] = useState(() => Date.now())
2020-11-03 00:41:28 +01:00
const [timer, setTimer] = useState(() =>
getNewTimer(currentTime, timeStarted, timerBase),
)
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (intervalRef.current === undefined) {
intervalRef.current = setInterval(() => {
setTimer(decreaseTimerByOne)
}, 1000)
}
2020-11-03 00:41:28 +01:00
return function cleanup() {
2020-10-06 20:28:38 +02:00
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, timerBase))
clearInterval(intervalRef.current)
intervalRef.current = setInterval(() => {
setTimer(decreaseTimerByOne)
}, 1000)
}
}, [timeStarted, timer, timerBase])
const formattedTimer = Duration.fromMillis(timer).toFormat('m:ss')
let time
if (timeOnly) {
time = <div className="countdown-timer__time">{formattedTimer}</div>
} else if (labelKey) {
2020-11-03 00:41:28 +01:00
time = t(labelKey, [
<div key="countdown-time-1" className="countdown-timer__time">
{formattedTimer}
</div>,
])
2020-10-06 20:28:38 +02:00
}
return (
<div className="countdown-timer">
<div
className={classnames('countdown-timer__timer-container', {
2020-11-03 00:41:28 +01:00
'countdown-timer__timer-container--warning':
warningTime && timeBelowWarningTime(timer, warningTime),
2020-10-06 20:28:38 +02:00
})}
>
{time}
</div>
2020-11-03 00:41:28 +01:00
{!timeOnly && infoTooltipLabelKey ? (
<InfoTooltip position="bottom" contentText={t(infoTooltipLabelKey)} />
) : null}
2020-10-06 20:28:38 +02:00
</div>
)
}
CountdownTimer.propTypes = {
timeStarted: PropTypes.number,
timeOnly: PropTypes.bool,
timerBase: PropTypes.number,
warningTime: PropTypes.string,
labelKey: PropTypes.string,
infoTooltipLabelKey: PropTypes.string,
}