1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.js
Filip Sekulic 43f7a44c25
Adding popular custom network integration (#14557)
* Initial push

* Refactored the code

* Additional code

* Removed the unused message

* Added a tooltip

* Fixed tests

* Lint fix

* Added style to a tooltip

* Fix e2e test failure

* Lint fix and code revert

* Fix e2e test

* Fixed paddings

* Fixed paddings

* CSS fix

* Minified svg files

* Applied requested changes

* Fixed theme issue

* Code revert

* Added back overridden code

* Icon problem fixed

* Lint fix

* Replaced H3 with H4

* Added unit test

* Added breadcrumbs

* Added const props for networks

* Lint fix

* Lint fix

* Added toggle button for showing the custom network list and resolved few issues

* Fixed routes

* Refactored a piece of code

* Enabled searching for the newly created option

* Fixed unit test

* Updated theme
2022-06-30 13:49:07 -02:30

55 lines
1.8 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import {
ADD_NETWORK_ROUTE,
ADD_POPULAR_CUSTOM_NETWORK,
} from '../../../../helpers/constants/routes';
import Button from '../../../../components/ui/button';
import { getIsCustomNetworkListEnabled } from '../../../../selectors';
const NetworksFormSubheader = ({ addNewNetwork }) => {
const t = useI18nContext();
const history = useHistory();
const addPopularNetworkFeatureToggledOn = useSelector(
getIsCustomNetworkListEnabled,
);
return addNewNetwork ? (
<div className="networks-tab__subheader">
<span className="networks-tab__sub-header-text">{t('networks')}</span>
<span className="networks-tab__sub-header-text">{' > '}</span>
<div className="networks-tab__sub-header-text">{t('addANetwork')}</div>
<span>{' > '}</span>
<div className="networks-tab__subheader--break">
{t('addANetworkManually')}
</div>
</div>
) : (
<div className="settings-page__sub-header">
<span className="settings-page__sub-header-text">{t('networks')}</span>
<div className="networks-tab__add-network-header-button-wrapper">
<Button
type="primary"
onClick={(event) => {
event.preventDefault();
addPopularNetworkFeatureToggledOn
? history.push(ADD_POPULAR_CUSTOM_NETWORK)
: history.push(ADD_NETWORK_ROUTE);
}}
>
{t('addANetwork')}
</Button>
</div>
</div>
);
};
NetworksFormSubheader.propTypes = {
addNewNetwork: PropTypes.bool.isRequired,
};
export default NetworksFormSubheader;