1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/dropdowns/network-dropdown.js

382 lines
12 KiB
JavaScript
Raw Normal View History

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { compose } from 'redux';
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
import Button from '../../ui/button';
import * as actions from '../../../store/actions';
import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
import {
LOCALHOST_RPC_URL,
NETWORK_TYPES,
} from '../../../../shared/constants/network';
import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
2020-10-29 00:10:41 +01:00
import ColorIndicator from '../../ui/color-indicator';
import { COLORS, SIZES } from '../../../helpers/constants/design-system';
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
import { getShowTestNetworks } from '../../../selectors';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import {
ADD_POPULAR_CUSTOM_NETWORK,
ADVANCED_ROUTE,
} from '../../../helpers/constants/routes';
import IconCheck from '../../ui/icon/icon-check';
import { Dropdown, DropdownMenuItem } from './dropdown';
// classes from nodes of the toggle element.
const notToggleElementClassnames = [
'menu-icon',
'network-name',
'network-indicator',
'network-caret',
'network-component',
'modal-container__footer-button',
];
const DROP_DOWN_MENU_ITEM_STYLE = {
fontSize: '16px',
lineHeight: '20px',
padding: '16px',
};
2020-11-03 00:41:28 +01:00
function mapStateToProps(state) {
return {
provider: state.metamask.provider,
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
shouldShowTestNetworks: getShowTestNetworks(state),
frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
networkDropdownOpen: state.appState.networkDropdownOpen,
showTestnetMessageInDropdown: state.metamask.showTestnetMessageInDropdown,
};
}
2020-11-03 00:41:28 +01:00
function mapDispatchToProps(dispatch) {
return {
setProviderType: (type) => {
dispatch(actions.setProviderType(type));
},
setRpcTarget: (target, chainId, ticker, nickname) => {
dispatch(actions.setRpcTarget(target, chainId, ticker, nickname));
},
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
displayInvalidCustomNetworkAlert: (networkName) => {
dispatch(displayInvalidCustomNetworkAlert(networkName));
},
showConfirmDeleteNetworkModal: ({ target, onConfirm }) => {
2020-11-03 00:41:28 +01:00
return dispatch(
actions.showModal({
name: 'CONFIRM_DELETE_NETWORK',
target,
onConfirm,
}),
);
},
hideTestNetMessage: () => actions.hideTestNetMessage(),
};
}
class NetworkDropdown extends Component {
static contextTypes = {
t: PropTypes.func,
2022-03-29 15:46:24 +02:00
trackEvent: PropTypes.func,
};
static propTypes = {
provider: PropTypes.shape({
2020-02-24 19:54:35 +01:00
nickname: PropTypes.string,
rpcUrl: PropTypes.string,
type: PropTypes.string,
ticker: PropTypes.string,
}).isRequired,
setProviderType: PropTypes.func.isRequired,
setRpcTarget: PropTypes.func.isRequired,
hideNetworkDropdown: PropTypes.func.isRequired,
frequentRpcListDetail: PropTypes.array.isRequired,
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
shouldShowTestNetworks: PropTypes.bool,
networkDropdownOpen: PropTypes.bool.isRequired,
displayInvalidCustomNetworkAlert: PropTypes.func.isRequired,
showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
showTestnetMessageInDropdown: PropTypes.bool.isRequired,
hideTestNetMessage: PropTypes.func.isRequired,
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
history: PropTypes.object,
dropdownStyles: PropTypes.object,
hideElementsForOnboarding: PropTypes.bool,
onAddClick: PropTypes.func,
};
2020-11-03 00:41:28 +01:00
handleClick(newProviderType) {
const {
provider: { type: providerType },
setProviderType,
} = this.props;
2022-03-29 15:46:24 +02:00
const { trackEvent } = this.context;
2022-03-29 15:46:24 +02:00
trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: EVENT_NAMES.NAV_NETWORK_SWITCHED,
2022-03-29 15:46:24 +02:00
properties: {
from_network: providerType,
to_network: newProviderType,
},
});
setProviderType(newProviderType);
}
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
renderAddCustomButton() {
const { onAddClick } = this.props;
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
return (
<div className="network__add-network-button">
<Button
type="secondary"
onClick={() => {
if (onAddClick) {
onAddClick();
} else {
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? global.platform.openExtensionInBrowser(
ADD_POPULAR_CUSTOM_NETWORK,
)
: this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
}
this.props.hideNetworkDropdown();
}}
>
{this.context.t('addNetwork')}
</Button>
</div>
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
);
}
renderCustomRpcList(rpcListDetail, provider, opts = {}) {
const reversedRpcListDetail = rpcListDetail.slice().reverse();
return reversedRpcListDetail.map((entry) => {
const { rpcUrl, chainId, ticker = 'ETH', nickname = '' } = entry;
2020-11-03 00:41:28 +01:00
const isCurrentRpcTarget =
provider.type === NETWORK_TYPES.RPC && rpcUrl === provider.rpcUrl;
return (
<DropdownMenuItem
key={`common${rpcUrl}`}
closeMenu={() => this.props.hideNetworkDropdown()}
onClick={() => {
if (isPrefixedFormattedHexString(chainId)) {
this.props.setRpcTarget(rpcUrl, chainId, ticker, nickname);
} else {
this.props.displayInvalidCustomNetworkAlert(nickname || rpcUrl);
}
}}
style={{
fontSize: '16px',
lineHeight: '20px',
padding: '16px',
}}
>
2020-11-03 00:41:28 +01:00
{isCurrentRpcTarget ? (
<IconCheck color="var(--color-success-default)" />
2020-11-03 00:41:28 +01:00
) : (
<div className="network-check__transparent"></div>
)}
<ColorIndicator
color={opts.isLocalHost ? 'localhost' : COLORS.ICON_MUTED}
size={SIZES.LG}
type={ColorIndicator.TYPES.FILLED}
2020-11-03 00:41:28 +01:00
/>
<span
className="network-name-item"
data-testid={`${nickname}-network-item`}
style={{
color: isCurrentRpcTarget
? 'var(--color-text-default)'
: 'var(--color-text-alternative)',
}}
>
{nickname || rpcUrl}
</span>
2020-11-03 00:41:28 +01:00
{isCurrentRpcTarget ? null : (
<i
className="fa fa-times delete"
onClick={(e) => {
e.stopPropagation();
2020-11-03 00:41:28 +01:00
this.props.showConfirmDeleteNetworkModal({
target: rpcUrl,
onConfirm: () => undefined,
});
2020-11-03 00:41:28 +01:00
}}
/>
)}
</DropdownMenuItem>
);
});
}
Metametrics (#6171) * Add metametrics provider and util. * Add backend api and state for participating in metametrics. * Add frontend action for participating in metametrics. * Add metametrics opt-in screen. * Add metametrics events to first time flow. * Add metametrics events for route changes * Add metametrics events for send and confirm screens * Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen * Ensures each log in is measured as a new visit by metametrics. * Ensure metametrics is called with an empty string for dimensions params if specified * Adds opt in metametrics modal after unlock for existing users * Adds settings page toggle for opting in and out of MetaMetrics * Switch metametrics dimensions to page level scope * Lint, test and translation fixes for metametrics. * Update design for metametrics opt-in screen * Complete responsive styling of metametrics-opt-in modal * Use new chart image on metrics opt in screens * Incorporate the metametrics opt-in screen into the new onboarding flow * Update e2e tests to accomodate metametrics changes * Mock out metametrics network requests in integration tests * Fix tx-list integration test to support metametrics provider. * Send number of tokens and accounts data with every metametrics event. * Update metametrics event descriptor schema and add new events. * Fix import tos bug and send gas button bug due to metametrics changes. * Various small fixes on the metametrics branch. * Add origin custom variable type to metametrics.util * Fix names of onboarding complete actions (metametrics). * Fix names of Metrics Options actions (metametrics). * Clean up code related to metametrics. * Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base * Don't send a second metrics event if user has gone back during first time flow. * Collect metametrics on going back from onboarding create/import. * Add missing custom variable constants for metametrics * Fix metametrics provider * Make height of opt-in modal responsive. * Adjust text content for opt-in modal. * Update metametrics event names and clean up code in opt-in-modal * Put phishing warning step next to last in onboarding flow * Link terms of service on create and import screens of first time flow * Add subtext to options on the onboarding select action screen. * Fix styling of bullet points on end of onboarding screen. * Combine phishing warning and congratulations screens. * Fix placement of users if unlocking after an incomplete onboarding import flow. * Fix capitalization in opt-in screen * Fix last onboarding screen translations * Add link to 'Learn More' on the last screen of onboarding * Code clean up: metametrics branch * Update e2e tests for phishing warning step removal * e2e tests passing on metametrics branch * Different tracking urls for metametrics on development and prod
2019-03-05 16:45:01 +01:00
2020-11-03 00:41:28 +01:00
getNetworkName() {
const { provider } = this.props;
const providerName = provider.type;
const { t } = this.context;
switch (providerName) {
case NETWORK_TYPES.MAINNET:
return t('mainnet');
case NETWORK_TYPES.GOERLI:
return t('goerli');
case NETWORK_TYPES.SEPOLIA:
return t('sepolia');
case NETWORK_TYPES.LOCALHOST:
return t('localhost');
default:
return provider.nickname || t('unknownNetwork');
}
}
renderNetworkEntry(network) {
const {
provider: { type: providerType },
} = this.props;
return (
<DropdownMenuItem
key={network}
closeMenu={this.props.hideNetworkDropdown}
onClick={() => this.handleClick(network)}
style={DROP_DOWN_MENU_ITEM_STYLE}
>
{providerType === network ? (
<IconCheck color="var(--color-success-default)" />
) : (
<div className="network-check__transparent"></div>
)}
<ColorIndicator
color={network}
size={SIZES.LG}
type={ColorIndicator.TYPES.FILLED}
/>
<span
className="network-name-item"
data-testid={`${network}-network-item`}
style={{
color:
providerType === network
? 'var(--color-text-default)'
: 'var(--color-text-alternative)',
}}
>
{this.context.t(network)}
</span>
</DropdownMenuItem>
);
}
2020-11-03 00:41:28 +01:00
render() {
const {
history,
hideElementsForOnboarding,
hideNetworkDropdown,
shouldShowTestNetworks,
showTestnetMessageInDropdown,
hideTestNetMessage,
} = this.props;
const rpcListDetail = this.props.frequentRpcListDetail;
const rpcListDetailWithoutLocalHost = rpcListDetail.filter(
(rpc) => rpc.rpcUrl !== LOCALHOST_RPC_URL,
);
const rpcListDetailForLocalHost = rpcListDetail.filter(
(rpc) => rpc.rpcUrl === LOCALHOST_RPC_URL,
);
const isOpen = this.props.networkDropdownOpen;
const { t } = this.context;
return (
<Dropdown
isOpen={isOpen}
onClickOutside={(event) => {
const { classList } = event.target;
const isInClassList = (className) => classList.contains(className);
2022-07-31 20:26:40 +02:00
const notToggleElementIndex =
notToggleElementClassnames.findIndex(isInClassList);
if (notToggleElementIndex === -1) {
event.stopPropagation();
hideNetworkDropdown();
}
}}
containerClassName="network-droppo"
zIndex={55}
style={
this.props.dropdownStyles || {
position: 'absolute',
top: '58px',
width: '309px',
zIndex: '55',
}
}
innerStyle={{
padding: '16px 0',
}}
>
<div className="network-dropdown-header">
{hideElementsForOnboarding ? null : (
<div className="network-dropdown-title">{t('networks')}</div>
)}
{hideElementsForOnboarding ? null : (
<div className="network-dropdown-divider" />
)}
{showTestnetMessageInDropdown && !hideElementsForOnboarding ? (
<div className="network-dropdown-content">
{t('toggleTestNetworks', [
<a
href="#"
key="advancedSettingsLink"
className="network-dropdown-content--link"
onClick={(e) => {
e.preventDefault();
hideNetworkDropdown();
history.push(`${ADVANCED_ROUTE}#show-testnets`);
}}
>
{t('showHide')}
</a>,
])}
<Button
onClick={hideTestNetMessage}
className="network-dropdown-content--dismiss"
>
{t('dismiss')}
</Button>
</div>
) : null}
</div>
<div className="network-dropdown-list">
{this.renderNetworkEntry(NETWORK_TYPES.MAINNET)}
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
{this.renderCustomRpcList(
rpcListDetailWithoutLocalHost,
this.props.provider,
)}
{shouldShowTestNetworks && (
<>
{this.renderNetworkEntry(NETWORK_TYPES.GOERLI)}
{this.renderNetworkEntry(NETWORK_TYPES.SEPOLIA)}
{this.renderCustomRpcList(
rpcListDetailForLocalHost,
this.props.provider,
{ isLocalHost: true },
)}
</>
)}
</div>
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
{this.renderAddCustomButton()}
</Dropdown>
);
}
}
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps),
)(NetworkDropdown);