mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 04:37:13 +01:00
6c84e9604c
* Enable "Add Popular Network" feature by default * Fixing e2e tests * Attempt to fix e2e tests * Revert "Attempt to fix e2e tests" This reverts commit d88e8944b8df8f7c3075753f8d8b3480439f8e30. * Get e2e tests passing Co-authored-by: Dan J Miller <danjm.com@gmail.com>
147 lines
4.7 KiB
JavaScript
147 lines
4.7 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { useLocation, useHistory } from 'react-router-dom';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import {
|
|
ADD_POPULAR_CUSTOM_NETWORK,
|
|
NETWORKS_FORM_ROUTE,
|
|
} from '../../../helpers/constants/routes';
|
|
import { setSelectedSettingsRpcUrl } from '../../../store/actions';
|
|
import Button from '../../../components/ui/button';
|
|
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
|
|
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
|
|
import {
|
|
getFrequentRpcListDetail,
|
|
getNetworksTabSelectedRpcUrl,
|
|
getProvider,
|
|
} from '../../../selectors';
|
|
import {
|
|
NETWORK_TYPES,
|
|
TEST_CHAINS,
|
|
} from '../../../../shared/constants/network';
|
|
import { defaultNetworksData } from './networks-tab.constants';
|
|
import NetworksTabContent from './networks-tab-content';
|
|
import NetworksForm from './networks-form';
|
|
import NetworksFormSubheader from './networks-tab-subheader';
|
|
|
|
const defaultNetworks = defaultNetworksData.map((network) => ({
|
|
...network,
|
|
viewOnly: true,
|
|
isATestNetwork: TEST_CHAINS.includes(network.chainId),
|
|
}));
|
|
|
|
const NetworksTab = ({ addNewNetwork }) => {
|
|
const t = useI18nContext();
|
|
const dispatch = useDispatch();
|
|
const { pathname } = useLocation();
|
|
const history = useHistory();
|
|
|
|
const environmentType = getEnvironmentType();
|
|
const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
|
|
const shouldRenderNetworkForm =
|
|
isFullScreen ||
|
|
Boolean(pathname.match(NETWORKS_FORM_ROUTE)) ||
|
|
window.location.hash.split('#')[2] === 'blockExplorerUrl';
|
|
|
|
const frequentRpcListDetail = useSelector(getFrequentRpcListDetail);
|
|
const provider = useSelector(getProvider);
|
|
const networksTabSelectedRpcUrl = useSelector(getNetworksTabSelectedRpcUrl);
|
|
|
|
const frequentRpcNetworkListDetails = frequentRpcListDetail.map((rpc) => {
|
|
return {
|
|
label: rpc.nickname,
|
|
iconColor: 'var(--color-icon-alternative)',
|
|
providerType: NETWORK_TYPES.RPC,
|
|
rpcUrl: rpc.rpcUrl,
|
|
chainId: rpc.chainId,
|
|
ticker: rpc.ticker,
|
|
blockExplorerUrl: rpc.rpcPrefs?.blockExplorerUrl || '',
|
|
isATestNetwork: TEST_CHAINS.includes(rpc.chainId),
|
|
};
|
|
});
|
|
|
|
const networksToRender = [
|
|
...defaultNetworks,
|
|
...frequentRpcNetworkListDetails,
|
|
];
|
|
let selectedNetwork =
|
|
networksToRender.find(
|
|
(network) => network.rpcUrl === networksTabSelectedRpcUrl,
|
|
) || {};
|
|
const networkIsSelected = Boolean(selectedNetwork.rpcUrl);
|
|
|
|
let networkDefaultedToProvider = false;
|
|
if (!networkIsSelected) {
|
|
selectedNetwork =
|
|
networksToRender.find((network) => {
|
|
return (
|
|
network.rpcUrl === provider.rpcUrl ||
|
|
(network.providerType !== NETWORK_TYPES.RPC &&
|
|
network.providerType === provider.type)
|
|
);
|
|
}) || {};
|
|
networkDefaultedToProvider = true;
|
|
}
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
dispatch(setSelectedSettingsRpcUrl(''));
|
|
};
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<div className="networks-tab__body">
|
|
{isFullScreen ? (
|
|
<NetworksFormSubheader addNewNetwork={addNewNetwork} />
|
|
) : null}
|
|
<div
|
|
className={classnames('networks-tab__content', {
|
|
'networks-tab__content--with-networks-list-popup-footer':
|
|
!isFullScreen && !shouldRenderNetworkForm,
|
|
})}
|
|
>
|
|
{addNewNetwork ? (
|
|
<NetworksForm
|
|
networksToRender={networksToRender}
|
|
addNewNetwork={addNewNetwork}
|
|
/>
|
|
) : (
|
|
<>
|
|
<NetworksTabContent
|
|
networkDefaultedToProvider={networkDefaultedToProvider}
|
|
networkIsSelected={networkIsSelected}
|
|
networksToRender={networksToRender}
|
|
providerUrl={provider.rpcUrl}
|
|
selectedNetwork={selectedNetwork}
|
|
shouldRenderNetworkForm={shouldRenderNetworkForm}
|
|
/>
|
|
{!isFullScreen && !shouldRenderNetworkForm ? (
|
|
<div className="networks-tab__networks-list-popup-footer">
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
isFullScreen
|
|
? history.push(ADD_POPULAR_CUSTOM_NETWORK)
|
|
: global.platform.openExtensionInBrowser(
|
|
ADD_POPULAR_CUSTOM_NETWORK,
|
|
);
|
|
}}
|
|
>
|
|
{t('addNetwork')}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
NetworksTab.propTypes = {
|
|
addNewNetwork: PropTypes.bool,
|
|
};
|
|
export default NetworksTab;
|