feat: edit networks UI redesign (MetaMask#10040)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR adds the ability to edit networks.
This PR also includes Salim's work from the
feat-edit-delete-network-menu branch.

For a short demo please view this loom:
https://www.loom.com/share/1192d8d7846845e69da9894def13aeeb
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes:

## **Manual testing steps**

1. Click the network selector at the center top of the screen, a bottom
sheet comes up with a list of networks
2. On the right side of enabled networks, a 3 dot icon is displayed as a
'more' menu, tap it to edit the network
3. The edit form shows up pre-filled with the network details to be
edited

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: salimtb <salim.toubal@outlook.com>

.storybook/storybook.requires.js

@@ -116,6 +116,7 @@ const getStories = () => {
     './app/component-library/components-temp/TagColored/TagColored.stories.tsx': require('../app/component-library/components-temp/TagColored/TagColored.stories.tsx'),
     './app/components/UI/Name/Name.stories.tsx': require('../app/components/UI/Name/Name.stories.tsx'),
     "./app/components/UI/SimulationDetails/SimulationDetails.stories.tsx": require("../app/components/UI/SimulationDetails/SimulationDetails.stories.tsx"),
+    "./app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.stories.tsx": require("../app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.stories.tsx"),
   };
 };
 

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.constants.ts

@@ -0,0 +1,34 @@
+// External dependencies.
+import { IconName } from '../../../component-library/components/Icons/Icon';
+import {
+  AvatarVariant,
+  AvatarAccountType,
+} from '../../../component-library/components/Avatars/Avatar';
+import { AvatarProps } from '../../../component-library/components/Avatars/Avatar/Avatar.types';
+
+// Internal dependencies.
+import { CellSelectWithMenuProps } from './CellSelectWithMenu.types';
+
+// Sample consts
+const SAMPLE_CELLSELECT_WITH_BUTTON_TITLE = 'Orangefox.eth';
+const SAMPLE_CELLSELECT_WITH_BUTTON_SECONDARYTEXT =
+  '0x2990079bcdEe240329a520d2444386FC119da21a';
+const SAMPLE_CELLSELECT_WITH_BUTTON_TERTIARY_TEXT = 'Updated 1 sec ago';
+const SAMPLE_CELLSELECT_WITH_BUTTON_TAGLABEL = 'Imported';
+const SAMPLE_CELLSELECT_WITH_BUTTON_AVATARPROPS: AvatarProps = {
+  variant: AvatarVariant.Account,
+  accountAddress: '0x2990079bcdEe240329a520d2444386FC119da21a',
+  type: AvatarAccountType.JazzIcon,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const SAMPLE_CELLSELECT_WITH_BUTTON_PROPS: CellSelectWithMenuProps = {
+  title: SAMPLE_CELLSELECT_WITH_BUTTON_TITLE,
+  secondaryText: SAMPLE_CELLSELECT_WITH_BUTTON_SECONDARYTEXT,
+  tertiaryText: SAMPLE_CELLSELECT_WITH_BUTTON_TERTIARY_TEXT,
+  tagLabel: SAMPLE_CELLSELECT_WITH_BUTTON_TAGLABEL,
+  avatarProps: SAMPLE_CELLSELECT_WITH_BUTTON_AVATARPROPS,
+  isSelected: false,
+  isDisabled: false,
+  buttonIcon: IconName.MoreVertical,
+};

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.stories.tsx

@@ -0,0 +1,41 @@
+// Internal dependencies.
+import { default as CellSelectWithMenu } from './CellSelectWithMenu';
+import { SAMPLE_CELLSELECT_WITH_BUTTON_PROPS } from './CellSelectWithMenu.constants';
+
+const CellSelectWithMenuMeta = {
+  title: 'Component Library / Cells',
+  component: CellSelectWithMenu,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.title,
+    },
+    secondaryText: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.secondaryText,
+    },
+    tertiaryText: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.tertiaryText,
+    },
+    tagLabel: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.tagLabel,
+    },
+    isSelected: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.isSelected,
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.isDisabled,
+    },
+  },
+};
+export default CellSelectWithMenuMeta;
+
+export const CellMultiSelectWithMenu = {
+  args: {
+    avatarProps: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.avatarProps,
+  },
+};

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.styles.ts

@@ -0,0 +1,35 @@
+// Third library dependencies.
+import { StyleSheet, ViewStyle } from 'react-native';
+
+// External dependencies.
+import { CellSelectWithMenuStyleSheetVars } from './CellSelectWithMenu.types';
+
+// Internal dependencies.
+import { Theme } from '../../../util/theme/models';
+
+/**
+ * Style sheet function for CellSelect component.
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: CellSelectWithMenuStyleSheetVars;
+}) => {
+  const { vars } = params;
+  const { style } = vars;
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        padding: 16,
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
+  });
+};
+
+export default styleSheet;

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import CellSelectWithMenu from './CellSelectWithMenu';
+import { CellModalSelectorsIDs } from '../../../../e2e/selectors/Modals/CellModal.selectors';
+
+import { SAMPLE_CELLSELECT_WITH_BUTTON_PROPS } from './CellSelectWithMenu.constants';
+
+describe('CellSelectWithMenu', () => {
+  it('should render with default settings correctly', () => {
+    const wrapper = render(
+      <CellSelectWithMenu {...SAMPLE_CELLSELECT_WITH_BUTTON_PROPS} />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render CellSelectWithMenu', () => {
+    const { queryByTestId } = render(
+      <CellSelectWithMenu {...SAMPLE_CELLSELECT_WITH_BUTTON_PROPS} />,
+    );
+    // Adjust the testID to match the one used in CellSelectWithMenu, if different
+    expect(queryByTestId(CellModalSelectorsIDs.MULTISELECT)).not.toBe(null);
+  });
+});

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+
+// Third library dependencies.
+import React from 'react';
+
+// External dependencies.
+import { useStyles } from '../../hooks';
+import CellBase from '../../../component-library/components/Cells/Cell/foundation/CellBase';
+
+// Internal dependencies.
+import styleSheet from './CellSelectWithMenu.styles';
+import { CellSelectWithMenuProps } from './CellSelectWithMenu.types';
+import { CellModalSelectorsIDs } from '../../../../e2e/selectors/Modals/CellModal.selectors';
+import ListItemMultiSelectButton from '../ListItemMultiSelectButton/ListItemMultiSelectButton';
+
+const CellSelectWithMenu = ({
+  style,
+  avatarProps,
+  title,
+  secondaryText,
+  tertiaryText,
+  tagLabel,
+  isSelected = false,
+  children,
+  ...props
+}: CellSelectWithMenuProps) => {
+  const { styles } = useStyles(styleSheet, { style });
+
+  return (
+    <ListItemMultiSelectButton
+      isSelected={isSelected}
+      style={styles.base}
+      testID={CellModalSelectorsIDs.MULTISELECT}
+      {...props}
+    >
+      <CellBase
+        avatarProps={avatarProps}
+        title={title}
+        secondaryText={secondaryText}
+        tertiaryText={tertiaryText}
+        tagLabel={tagLabel}
+        style={style}
+      >
+        {children}
+      </CellBase>
+    </ListItemMultiSelectButton>
+  );
+};
+
+export default CellSelectWithMenu;

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.types.ts

@@ -0,0 +1,18 @@
+// External dependencies.
+import { CellBaseProps } from '../../../component-library/components/Cells/Cell/foundation/CellBase/CellBase.types';
+import { ListItemMultiSelectButtonProps } from '../ListItemMultiSelectButton/ListItemMultiSelectButton.types';
+
+/**
+ * Cell Account Select  component props.
+ */
+export interface CellSelectWithMenuProps
+  extends CellBaseProps,
+    Omit<ListItemMultiSelectButtonProps, 'children'> {}
+
+/**
+ * Style sheet input parameters.
+ */
+export type CellSelectWithMenuStyleSheetVars = Pick<
+  CellSelectWithMenuProps,
+  'style'
+>;