2021-02-04 19:15:23 +01:00
|
|
|
import EventEmitter from 'events';
|
|
|
|
import React, { useState, useEffect, useRef, useContext } from 'react';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { shuffle } from 'lodash';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
navigateBackToBuildQuote,
|
|
|
|
getFetchParams,
|
|
|
|
getQuotesFetchStartTime,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../../ducks/swaps/swaps';
|
2021-05-13 21:26:08 +02:00
|
|
|
import {
|
|
|
|
isHardwareWallet,
|
|
|
|
getHardwareWalletType,
|
|
|
|
} from '../../../selectors/selectors';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics.new';
|
|
|
|
import Mascot from '../../../components/ui/mascot';
|
|
|
|
import SwapsFooter from '../swaps-footer';
|
|
|
|
import BackgroundAnimation from './background-animation';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
export default function LoadingSwapsQuotes({
|
2020-10-06 20:28:38 +02:00
|
|
|
aggregatorMetadata,
|
|
|
|
loadingComplete,
|
|
|
|
onDone,
|
|
|
|
}) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const metaMetricsEvent = useContext(MetaMetricsContext);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const history = useHistory();
|
|
|
|
const animationEventEmitter = useRef(new EventEmitter());
|
|
|
|
|
|
|
|
const fetchParams = useSelector(getFetchParams);
|
|
|
|
const quotesFetchStartTime = useSelector(getQuotesFetchStartTime);
|
2021-05-13 21:26:08 +02:00
|
|
|
const hardwareWalletUsed = useSelector(isHardwareWallet);
|
|
|
|
const hardwareWalletType = useSelector(getHardwareWalletType);
|
2020-10-06 20:28:38 +02:00
|
|
|
const quotesRequestCancelledEventConfig = {
|
|
|
|
event: 'Quotes Request Cancelled',
|
|
|
|
category: 'swaps',
|
2020-11-10 16:49:01 +01:00
|
|
|
sensitiveProperties: {
|
2020-10-06 20:28:38 +02:00
|
|
|
token_from: fetchParams?.sourceTokenInfo?.symbol,
|
|
|
|
token_from_amount: fetchParams?.value,
|
|
|
|
request_type: fetchParams?.balanceError,
|
|
|
|
token_to: fetchParams?.destinationTokenInfo?.symbol,
|
|
|
|
slippage: fetchParams?.slippage,
|
|
|
|
custom_slippage: fetchParams?.slippage !== 2,
|
|
|
|
response_time: Date.now() - quotesFetchStartTime,
|
2021-05-13 21:26:08 +02:00
|
|
|
is_hardware_wallet: hardwareWalletUsed,
|
|
|
|
hardware_wallet_type: hardwareWalletType,
|
2020-10-06 20:28:38 +02:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const [aggregatorNames] = useState(() =>
|
|
|
|
shuffle(Object.keys(aggregatorMetadata)),
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
const numberOfQuotes = aggregatorNames.length;
|
|
|
|
const mascotContainer = useRef();
|
|
|
|
const currentMascotContainer = mascotContainer.current;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const [quoteCount, updateQuoteCount] = useState(0);
|
|
|
|
const [midPointTarget, setMidpointTarget] = useState(null);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
let timeoutLength;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
// The below logic simulates a sequential loading of the aggregator quotes, even though we are fetching them all with a single call.
|
|
|
|
// This is to give the user a sense of progress. The callback passed to `setTimeout` updates the quoteCount and therefore causes
|
|
|
|
// a new logo to be shown, the fox to look at that logo, the logo bar and aggregator name to update.
|
|
|
|
|
2021-02-23 17:51:19 +01:00
|
|
|
if (loadingComplete) {
|
|
|
|
// If loading is complete, but the quoteCount is not, we quickly display the remaining logos/names/fox looks. 0.2s each
|
2021-09-15 15:13:18 +02:00
|
|
|
timeoutLength = 20;
|
2020-10-06 20:28:38 +02:00
|
|
|
} else {
|
|
|
|
// If loading is not complete, we display remaining logos/names/fox looks at random intervals between 0.5s and 2s, to simulate the
|
|
|
|
// sort of loading a user would experience in most async scenarios
|
2021-02-04 19:15:23 +01:00
|
|
|
timeoutLength = 500 + Math.floor(Math.random() * 1500);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
|
|
|
const quoteCountTimeout = setTimeout(() => {
|
|
|
|
if (quoteCount < numberOfQuotes) {
|
2021-02-04 19:15:23 +01:00
|
|
|
updateQuoteCount(quoteCount + 1);
|
2020-10-06 20:28:38 +02:00
|
|
|
} else if (quoteCount === numberOfQuotes && loadingComplete) {
|
2021-02-04 19:15:23 +01:00
|
|
|
onDone();
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
}, timeoutLength);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
return function cleanup() {
|
2021-02-04 19:15:23 +01:00
|
|
|
clearTimeout(quoteCountTimeout);
|
|
|
|
};
|
|
|
|
}, [quoteCount, loadingComplete, onDone, numberOfQuotes]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (currentMascotContainer) {
|
2020-11-03 00:41:28 +01:00
|
|
|
const {
|
|
|
|
top,
|
|
|
|
left,
|
|
|
|
width,
|
|
|
|
height,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = currentMascotContainer.getBoundingClientRect();
|
|
|
|
const center = { x: left + width / 2, y: top + height / 2 };
|
|
|
|
setMidpointTarget(center);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
}, [currentMascotContainer]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="loading-swaps-quotes">
|
|
|
|
<div className="loading-swaps-quotes__content">
|
|
|
|
<>
|
|
|
|
<div className="loading-swaps-quotes__quote-counter">
|
|
|
|
<span>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('swapQuoteNofN', [
|
|
|
|
Math.min(quoteCount + 1, numberOfQuotes),
|
|
|
|
numberOfQuotes,
|
|
|
|
])}
|
2020-10-06 20:28:38 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="loading-swaps-quotes__quote-name-check">
|
2021-09-15 15:13:18 +02:00
|
|
|
<span>{t('swapFetchingQuotes')}</span>
|
2020-10-06 20:28:38 +02:00
|
|
|
</div>
|
|
|
|
<div className="loading-swaps-quotes__loading-bar-container">
|
|
|
|
<div
|
|
|
|
className="loading-swaps-quotes__loading-bar"
|
|
|
|
style={{
|
|
|
|
width: `${(100 / numberOfQuotes) * quoteCount}%`,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
<div className="loading-swaps-quotes__animation">
|
|
|
|
<BackgroundAnimation />
|
|
|
|
<div
|
|
|
|
className="loading-swaps-quotes__mascot-container"
|
|
|
|
ref={mascotContainer}
|
|
|
|
>
|
|
|
|
<Mascot
|
|
|
|
animationEventEmitter={animationEventEmitter.current}
|
|
|
|
width="90"
|
|
|
|
height="90"
|
|
|
|
followMouse={false}
|
2021-09-15 15:13:18 +02:00
|
|
|
lookAtTarget={midPointTarget}
|
2020-10-06 20:28:38 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<SwapsFooter
|
|
|
|
submitText={t('back')}
|
|
|
|
onSubmit={async () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
metaMetricsEvent(quotesRequestCancelledEventConfig);
|
|
|
|
await dispatch(navigateBackToBuildQuote(history));
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
hideCancel
|
|
|
|
/>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
LoadingSwapsQuotes.propTypes = {
|
|
|
|
loadingComplete: PropTypes.bool.isRequired,
|
|
|
|
onDone: PropTypes.func.isRequired,
|
2020-11-03 00:41:28 +01:00
|
|
|
aggregatorMetadata: PropTypes.objectOf(
|
|
|
|
PropTypes.shape({
|
2021-08-03 21:09:39 +02:00
|
|
|
title: PropTypes.string,
|
2020-11-03 00:41:28 +01:00
|
|
|
color: PropTypes.string,
|
|
|
|
icon: PropTypes.string,
|
|
|
|
}),
|
|
|
|
),
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|