1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/loading-network-screen/loading-network-screen.component.js
Victorien Gauch a04fa20f96
feat: add the ConsenSys zkEVM (Linea) as a default network (#17875)
* feat: add the consensys zkEVM as a default network

* fix: change infuraNetworkStatus in navigate-txs file

* fix: remove account tracker for zkEVM + remove zkEVM from infura list

* fix: change consensys zkevm name to linea + change rpc url for linea network

* fix: rebase conflicts

* feat: add new colors for linea goerli network

* feat: add new function inside network dropdown to render non infura networks

* feat: add feature toggle for linea network

* fix: add new unit test

---------

Co-authored-by: Dan J Miller <danjm.com@gmail.com>
2023-03-21 13:58:38 -02:30

173 lines
4.9 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from '../../ui/button';
import LoadingScreen from '../../ui/loading-screen';
import { SECOND } from '../../../../shared/constants/time';
import { NETWORK_TYPES } from '../../../../shared/constants/network';
export default class LoadingNetworkScreen extends PureComponent {
state = {
showErrorScreen: false,
};
static contextTypes = {
t: PropTypes.func,
};
static propTypes = {
loadingMessage: PropTypes.string,
cancelTime: PropTypes.number,
provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
showNetworkDropdown: PropTypes.func,
setProviderArgs: PropTypes.array,
setProviderType: PropTypes.func,
rollbackToPreviousProvider: PropTypes.func,
isNetworkLoading: PropTypes.bool,
showDeprecatedRpcUrlWarning: PropTypes.bool,
};
componentDidMount = () => {
this.cancelCallTimeout = setTimeout(
this.cancelCall,
this.props.cancelTime || SECOND * 15,
);
};
getConnectingLabel = function (loadingMessage) {
if (loadingMessage) {
return loadingMessage;
}
const { provider, providerId } = this.props;
const providerName = provider.type;
const { t } = this.context;
switch (providerName) {
case NETWORK_TYPES.MAINNET:
return t('connectingToMainnet');
case NETWORK_TYPES.GOERLI:
return t('connectingToGoerli');
case NETWORK_TYPES.SEPOLIA:
return t('connectingToSepolia');
case NETWORK_TYPES.LINEA_TESTNET:
return t('connectingToLineaTestnet');
default:
return t('connectingTo', [providerId]);
}
};
renderDeprecatedRpcUrlWarning = () => {
const { showNetworkDropdown } = this.props;
return (
<div className="loading-overlay__error-screen">
<span className="loading-overlay__emoji">&#128542;</span>
<span>{this.context.t('currentRpcUrlDeprecated')}</span>
<div className="loading-overlay__error-buttons">
<Button
type="secondary"
onClick={() => {
window.clearTimeout(this.cancelCallTimeout);
showNetworkDropdown();
}}
>
{this.context.t('switchNetworks')}
</Button>
</div>
</div>
);
};
renderErrorScreenContent = () => {
const { showNetworkDropdown, setProviderArgs, setProviderType } =
this.props;
return (
<div className="loading-overlay__error-screen">
<span className="loading-overlay__emoji">&#128542;</span>
<span>{this.context.t('somethingWentWrong')}</span>
<div className="loading-overlay__error-buttons">
<Button
type="secondary"
onClick={() => {
window.clearTimeout(this.cancelCallTimeout);
showNetworkDropdown();
}}
>
{this.context.t('switchNetworks')}
</Button>
<Button
type="primary"
onClick={() => {
this.setState({ showErrorScreen: false });
setProviderType(...setProviderArgs);
window.clearTimeout(this.cancelCallTimeout);
this.cancelCallTimeout = setTimeout(
this.cancelCall,
this.props.cancelTime || SECOND * 15,
);
}}
>
{this.context.t('tryAgain')}
</Button>
</div>
</div>
);
};
cancelCall = () => {
const { isNetworkLoading } = this.props;
if (isNetworkLoading) {
this.setState({ showErrorScreen: true });
}
};
componentDidUpdate = (prevProps) => {
const { provider } = this.props;
const { provider: prevProvider } = prevProps;
if (provider.type !== prevProvider.type) {
window.clearTimeout(this.cancelCallTimeout);
this.setState({ showErrorScreen: false });
this.cancelCallTimeout = setTimeout(
this.cancelCall,
this.props.cancelTime || SECOND * 15,
);
}
};
componentWillUnmount = () => {
window.clearTimeout(this.cancelCallTimeout);
};
render() {
const { rollbackToPreviousProvider, showDeprecatedRpcUrlWarning } =
this.props;
let loadingMessageToRender;
if (this.state.showErrorScreen) {
loadingMessageToRender = this.renderErrorScreenContent();
} else if (showDeprecatedRpcUrlWarning) {
loadingMessageToRender = this.renderDeprecatedRpcUrlWarning();
} else {
loadingMessageToRender = this.getConnectingLabel(
this.props.loadingMessage,
);
}
return (
<LoadingScreen
header={
<div
className="page-container__header-close"
onClick={rollbackToPreviousProvider}
/>
}
showLoadingSpinner={!this.state.showErrorScreen}
loadingMessage={loadingMessageToRender}
/>
);
}
}