Swaps timer improvements, optional refresh rates and fix for a notification UI (#14300)

* Set up correct timer value for fetching new quotes

* Show red timer in Swaps if quotes fetching will happen in less than 10s (previously it was 30s)

* Fix a UI issue with the notification close button

* Make stx refresh rates optional, since not every network supports them
feature/default_network_editable
Daniel 3 years ago committed by ryanml
parent 1b4ddf709b
commit 2d24a4d643
  1. 4
      app/scripts/controllers/swaps.js
  2. 13
      ui/pages/swaps/countdown-timer/countdown-timer.js
  3. 2
      ui/pages/swaps/index.scss
  4. 2
      ui/pages/swaps/view-quote/view-quote.js

@ -139,9 +139,7 @@ export default class SwapsController {
if (
!refreshRates ||
typeof refreshRates.quotes !== 'number' ||
typeof refreshRates.quotesPrefetching !== 'number' ||
typeof refreshRates.stxGetTransactions !== 'number' ||
typeof refreshRates.stxBatchStatus !== 'number'
typeof refreshRates.quotesPrefetching !== 'number'
) {
throw new Error(
`MetaMask - invalid response for refreshRates: ${response}`,

@ -5,7 +5,10 @@ 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 {
getSwapsQuoteRefreshTime,
getSwapsQuotePrefetchingRefreshTime,
} from '../../../ducks/swaps/swaps';
import { SECOND } from '../../../../shared/constants/time';
import TimerIcon from './timer-icon';
@ -43,7 +46,13 @@ export default function CountdownTimer({
const initialTimeStartedRef = useRef();
const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
const timerStart = Number(timerBase) || swapsQuoteRefreshTime;
const swapsQuotePrefetchingRefreshTime = useSelector(
getSwapsQuotePrefetchingRefreshTime,
);
const refreshTime = initialTimeStartedRef.current
? swapsQuoteRefreshTime
: swapsQuotePrefetchingRefreshTime;
const timerStart = Number(timerBase) || refreshTime;
const [currentTime, setCurrentTime] = useState(() => Date.now());
const [timer, setTimer] = useState(() =>

@ -121,7 +121,7 @@
flex: 1;
}
&__notification-close-button {
.actionable-message__message &__notification-close-button {
background-color: transparent;
position: absolute;
right: 0;

@ -955,7 +955,7 @@ export default function ViewQuote() {
<div className="view-quote__countdown-timer-container">
<CountdownTimer
timeStarted={quotesLastFetched}
warningTime="0:30"
warningTime="0:10"
labelKey="swapNewQuoteIn"
/>
</div>

Loading…
Cancel
Save