updated components with Multichain Prefix (#19593)

ui/components/app/asset-list/asset-list.js

@@ -23,8 +23,8 @@ import {
 import DetectedToken from '../detected-token/detected-token';
 import {
   DetectedTokensBanner,
-  MultichainTokenListItem,
-  MultichainImportTokenLink,
+  TokenListItem,
+  ImportTokenLink,
 } from '../../multichain';
 
 const AssetList = ({ onClickAsset }) => {
@@ -72,7 +72,7 @@ const AssetList = ({ onClickAsset }) => {
   const title = tokenData?.name || primaryCurrencyProperties.suffix;
   return (
     <>
-      <MultichainTokenListItem
+      <TokenListItem
         onClick={() => onClickAsset(nativeCurrency)}
         title={title}
         primary={
@@ -103,7 +103,7 @@ const AssetList = ({ onClickAsset }) => {
         />
       ) : null}
       <Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
-        <MultichainImportTokenLink margin={4} />
+        <ImportTokenLink margin={4} />
       </Box>
       {showDetectedTokens && (
         <DetectedToken setShowDetectedTokens={setShowDetectedTokens} />

ui/components/app/connected-status-indicator/connected-status-indicator.js

@@ -17,7 +17,7 @@ import {
   getOriginOfCurrentTab,
   getSelectedAddress,
 } from '../../../selectors';
-import { MultichainConnectedSiteMenu } from '../../multichain';
+import { ConnectedSiteMenu } from '../../multichain';
 
 export default function ConnectedStatusIndicator({ onClick }) {
   const t = useI18nContext();
@@ -52,7 +52,7 @@ export default function ConnectedStatusIndicator({ onClick }) {
       : t('tooltipSatusNotConnected');
 
   return (
-    <MultichainConnectedSiteMenu
+    <ConnectedSiteMenu
       status={status}
       globalMenuColor={globalMenuColor}
       text={tooltipText}

ui/components/app/token-cell/token-cell.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { getTokenList } from '../../../selectors';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
-import { MultichainTokenListItem } from '../../multichain';
+import { TokenListItem } from '../../multichain';
 
 export default function TokenCell({ address, image, symbol, string, onClick }) {
   const tokenList = useSelector(getTokenList);
@@ -15,7 +15,7 @@ export default function TokenCell({ address, image, symbol, string, onClick }) {
   const formattedFiat = useTokenFiatAmount(address, string, symbol);
 
   return (
-    <MultichainTokenListItem
+    <TokenListItem
       onClick={() => onClick(address)}
       tokenSymbol={symbol}
       tokenImage={tokenImage}

ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Multichain Connected Site Menu should render the site menu in connected state 1`] = `
+exports[`Connected Site Menu should render the site menu in connected state 1`] = `
 <div>
   <button
     class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
@@ -37,7 +37,7 @@ exports[`Multichain Connected Site Menu should render the site menu in connected
 </div>
 `;
 
-exports[`Multichain Connected Site Menu should render the site menu in not connected state 1`] = `
+exports[`Connected Site Menu should render the site menu in not connected state 1`] = `
 <div>
   <button
     class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
@@ -74,7 +74,7 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
 </div>
 `;
 
-exports[`Multichain Connected Site Menu should render the site menu in not connected to current account state 1`] = `
+exports[`Connected Site Menu should render the site menu in not connected to current account state 1`] = `
 <div>
   <button
     class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"

ui/components/multichain/connected-site-menu/connected-site-menu.js

@@ -26,7 +26,7 @@ import { getSelectedIdentity } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
-export const MultichainConnectedSiteMenu = ({
+export const ConnectedSiteMenu = ({
   className,
   globalMenuColor,
   status,
@@ -92,9 +92,9 @@ export const MultichainConnectedSiteMenu = ({
   );
 };
 
-MultichainConnectedSiteMenu.propTypes = {
+ConnectedSiteMenu.propTypes = {
   /**
-   * Additional classNames to be added to the MultichainConnectedSiteMenu
+   * Additional classNames to be added to the ConnectedSiteMenu
    */
   className: PropTypes.string,
   /**

ui/components/multichain/connected-site-menu/connected-site-menu.stories.js

@@ -8,11 +8,11 @@ import {
   BackgroundColor,
   Color,
 } from '../../../helpers/constants/design-system';
-import { MultichainConnectedSiteMenu } from './multichain-connected-site-menu';
+import { ConnectedSiteMenu } from './connected-site-menu';
 
 export default {
-  title: 'Components/Multichain/MultichainConnectedSiteMenu',
-  component: MultichainConnectedSiteMenu,
+  title: 'Components/Multichain/ConnectedSiteMenu',
+  component: ConnectedSiteMenu,
   argTypes: {
     globalMenuColor: {
       control: 'text',
@@ -31,7 +31,7 @@ export default {
 };
 
 const Template = (args) => {
-  return <MultichainConnectedSiteMenu {...args} />;
+  return <ConnectedSiteMenu {...args} />;
 };
 
 export const DefaultStory = Template.bind({});

ui/components/multichain/connected-site-menu/connected-site-menu.test.js

@@ -10,9 +10,9 @@ import {
   BackgroundColor,
   Color,
 } from '../../../helpers/constants/design-system';
-import { MultichainConnectedSiteMenu } from './multichain-connected-site-menu';
+import { ConnectedSiteMenu } from './connected-site-menu';
 
-describe('Multichain Connected Site Menu', () => {
+describe('Connected Site Menu', () => {
   const selectedAddress = '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b';
 
   const identities = {
@@ -51,7 +51,7 @@ describe('Multichain Connected Site Menu', () => {
     };
     const store = configureMockStore()(mockStore);
     const { getByTestId, container } = renderWithProvider(
-      <MultichainConnectedSiteMenu {...props} />,
+      <ConnectedSiteMenu {...props} />,
       store,
     );
     expect(getByTestId('connection-menu')).toBeDefined();
@@ -64,7 +64,7 @@ describe('Multichain Connected Site Menu', () => {
     };
     const store = configureMockStore()(mockStore);
     const { getByTestId, container } = renderWithProvider(
-      <MultichainConnectedSiteMenu {...props} />,
+      <ConnectedSiteMenu {...props} />,
       store,
     );
     expect(getByTestId('connection-menu')).toBeDefined();
@@ -78,7 +78,7 @@ describe('Multichain Connected Site Menu', () => {
     };
     const store = configureMockStore()(mockStore);
     const { getByTestId, container } = renderWithProvider(
-      <MultichainConnectedSiteMenu {...props} />,
+      <ConnectedSiteMenu {...props} />,
       store,
     );
     expect(getByTestId('connection-menu')).toBeDefined();

ui/components/multichain/connected-site-menu/index.js

@@ -0,0 +1 @@
+export { ConnectedSiteMenu } from './connected-site-menu';

ui/components/multichain/import-token-link/import-token-link.js

@@ -23,7 +23,7 @@ import {
   getIsTokenDetectionInactiveOnMainnet,
 } from '../../../selectors';
 
-export const MultichainImportTokenLink = ({ className, ...props }) => {
+export const ImportTokenLink = ({ className, ...props }) => {
   const trackEvent = useContext(MetaMetricsContext);
   const t = useI18nContext();
   const history = useHistory();
@@ -82,7 +82,7 @@ export const MultichainImportTokenLink = ({ className, ...props }) => {
   );
 };
 
-MultichainImportTokenLink.propTypes = {
+ImportTokenLink.propTypes = {
   /**
    * An additional className to apply to the TokenList.
    */

ui/components/multichain/import-token-link/import-token-link.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ImportTokenLink } from './import-token-link';
+
+export default {
+  title: 'Components/Multichain/ImportTokenLink',
+  component: ImportTokenLink,
+};
+
+export const DefaultStory = () => <ImportTokenLink />;
+
+DefaultStory.storyName = 'Default';

ui/components/multichain/import-token-link/import-token-link.test.js

@@ -3,7 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import { fireEvent, screen } from '@testing-library/react';
 import { detectNewTokens } from '../../../store/actions';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import { MultichainImportTokenLink } from './multichain-import-token-link';
+import { ImportTokenLink } from './import-token-link';
 
 const mockPushHistory = jest.fn();
 
@@ -34,10 +34,7 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    const { container } = renderWithProvider(
-      <MultichainImportTokenLink />,
-      store,
-    );
+    const { container } = renderWithProvider(<ImportTokenLink />, store);
 
     expect(container).toMatchSnapshot();
   });
@@ -53,10 +50,7 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    const { container } = renderWithProvider(
-      <MultichainImportTokenLink />,
-      store,
-    );
+    const { container } = renderWithProvider(<ImportTokenLink />, store);
 
     expect(container).toMatchSnapshot();
   });
@@ -72,7 +66,7 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    renderWithProvider(<MultichainImportTokenLink />, store);
+    renderWithProvider(<ImportTokenLink />, store);
 
     const refreshList = screen.getByTestId('refresh-list-button');
     fireEvent.click(refreshList);
@@ -91,7 +85,7 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    renderWithProvider(<MultichainImportTokenLink />, store);
+    renderWithProvider(<ImportTokenLink />, store);
 
     const importToken = screen.getByTestId('import-token-button');
     fireEvent.click(importToken);

ui/components/multichain/import-token-link/index.js

@@ -0,0 +1 @@
+export { ImportTokenLink } from './import-token-link';

ui/components/multichain/index.js

@@ -5,10 +5,10 @@ export { AccountPicker } from './account-picker';
 export { AppHeader } from './app-header';
 export { DetectedTokensBanner } from './detected-token-banner';
 export { GlobalMenu } from './global-menu';
-export { MultichainImportTokenLink } from './multichain-import-token-link';
-export { MultichainTokenListItem } from './multichain-token-list-item';
+export { ImportTokenLink } from './import-token-link';
+export { TokenListItem } from './token-list-item';
 export { AddressCopyButton } from './address-copy-button';
-export { MultichainConnectedSiteMenu } from './multichain-connected-site-menu';
+export { ConnectedSiteMenu } from './connected-site-menu';
 export { NetworkListItem } from './network-list-item';
 export { NetworkListMenu } from './network-list-menu';
 export { ProductTour } from './product-tour-popover';

ui/components/multichain/multichain-components.scss

@@ -9,9 +9,9 @@
 @import 'account-list-menu/index';
 @import 'account-picker/index';
 @import 'app-header/app-header';
-@import 'multichain-connected-site-menu/index';
+@import 'connected-site-menu/index';
 @import 'account-list-menu/';
-@import 'multichain-token-list-item/multichain-token-list-item';
+@import 'token-list-item/token-list-item';
 @import 'network-list-item/';
 @import 'network-list-menu/';
 @import 'product-tour-popover/product-tour-popover';

ui/components/multichain/multichain-connected-site-menu/index.js

@@ -1 +0,0 @@
-export { MultichainConnectedSiteMenu } from './multichain-connected-site-menu';

ui/components/multichain/multichain-import-token-link/index.js

@@ -1 +0,0 @@
-export { MultichainImportTokenLink } from './multichain-import-token-link';

ui/components/multichain/multichain-import-token-link/multichain-import-token-link.stories.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { MultichainImportTokenLink } from './multichain-import-token-link';
-
-export default {
-  title: 'Components/Multichain/MultichainImportTokenLink',
-  component: MultichainImportTokenLink,
-};
-
-export const DefaultStory = () => <MultichainImportTokenLink />;
-
-DefaultStory.storyName = 'Default';

ui/components/multichain/multichain-token-list-item/index.js

@@ -1 +0,0 @@
-export { MultichainTokenListItem } from './multichain-token-list-item';

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MultichainTokenListItem should render correctly 1`] = `
+exports[`TokenListItem should render correctly 1`] = `
 <div>
   <div
     class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"

ui/components/multichain/token-list-item/index.js

@@ -0,0 +1 @@
+export { TokenListItem } from './token-list-item';

ui/components/multichain/token-list-item/token-list-item.js

@@ -30,7 +30,7 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 
-export const MultichainTokenListItem = ({
+export const TokenListItem = ({
   className,
   onClick,
   tokenSymbol,
@@ -150,13 +150,13 @@ export const MultichainTokenListItem = ({
   );
 };
 
-MultichainTokenListItem.propTypes = {
+TokenListItem.propTypes = {
   /**
    * An additional className to apply to the TokenList.
    */
   className: PropTypes.string,
   /**
-   * The onClick handler to be passed to the MultichainTokenListItem component
+   * The onClick handler to be passed to the TokenListItem component
    */
   onClick: PropTypes.func,
   /**

ui/components/multichain/token-list-item/token-list-item.stories.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import testData from '../../../../.storybook/test-data';
 import configureStore from '../../../store/store';
-import { MultichainTokenListItem } from './multichain-token-list-item';
+import { TokenListItem } from './token-list-item';
 
 export default {
   title: 'Components/Multichain/MultichainTokenListItem',
-  component: MultichainTokenListItem,
+  component: TokenListItem,
   argTypes: {
     tokenSymbol: {
       control: 'text',
@@ -43,7 +43,7 @@ const customNetworkData = {
 const customNetworkStore = configureStore(customNetworkData);
 
 const Template = (args) => {
-  return <MultichainTokenListItem {...args} />;
+  return <TokenListItem {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
@@ -52,7 +52,7 @@ export const ChaosStory = (args) => (
   <div
     style={{ width: '336px', border: '1px solid var(--color-border-muted)' }}
   >
-    <MultichainTokenListItem {...args} />
+    <TokenListItem {...args} />
   </div>
 );
 ChaosStory.storyName = 'ChaosStory';

ui/components/multichain/token-list-item/token-list-item.test.js

@@ -3,7 +3,7 @@ import configureMockStore from 'redux-mock-store';
 
 import { fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import { MultichainTokenListItem } from './multichain-token-list-item';
+import { TokenListItem } from './token-list-item';
 
 const state = {
   metamask: {
@@ -18,14 +18,14 @@ const state = {
   },
 };
 
-describe('MultichainTokenListItem', () => {
+describe('TokenListItem', () => {
   const props = {
     onClick: jest.fn(),
   };
   it('should render correctly', () => {
     const store = configureMockStore()(state);
     const { getByTestId, container } = renderWithProvider(
-      <MultichainTokenListItem />,
+      <TokenListItem />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toBeDefined();
@@ -35,7 +35,7 @@ describe('MultichainTokenListItem', () => {
   it('should render with custom className', () => {
     const store = configureMockStore()(state);
     const { getByTestId } = renderWithProvider(
-      <MultichainTokenListItem className="multichain-token-list-item-test" />,
+      <TokenListItem className="multichain-token-list-item-test" />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toHaveClass(
@@ -46,7 +46,7 @@ describe('MultichainTokenListItem', () => {
   it('handles click action and fires onClick', () => {
     const store = configureMockStore()(state);
     const { queryByTestId } = renderWithProvider(
-      <MultichainTokenListItem {...props} />,
+      <TokenListItem {...props} />,
       store,
     );
 

ui/pages/routes/routes.component.js

@@ -27,7 +27,7 @@ import LoadingNetwork from '../../components/app/loading-network-screen';
 import { Modal } from '../../components/app/modals';
 import Alert from '../../components/ui/alert';
 import {
-  AppHeader as MultichainAppHeader,
+  AppHeader,
   AccountListMenu,
   NetworkListMenu,
   AccountDetails,
@@ -535,7 +535,7 @@ export default class Routes extends Component {
         <QRHardwarePopover />
         <Modal />
         <Alert visible={this.props.alertOpen} msg={alertMessage} />
-        {!this.hideAppHeader() && <MultichainAppHeader location={location} />}
+        {!this.hideAppHeader() && <AppHeader location={location} />}
         {this.showOnboardingHeader() && <OnboardingAppHeader />}
         {
           ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)