feat(2739): permission summary view gets the ability to disconnect all

.js.env.example

@@ -92,3 +92,5 @@ export MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS="true"
 
 # Multichain Feature flag
 export MULTICHAIN_V1=""
+#Multichain feature flag specific to UI changes
+export MM_MULTICHAIN_V1_ENABLED=""

app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts

@@ -1,29 +1,36 @@
 import { StyleSheet } from 'react-native';
-import Device from '../../../util/device';
 import { Theme } from '../../../util/theme/models';
 
-const createStyles = (params: { theme: Theme }) => {
+const createStyles = (params: {
+  theme: Theme;
+  vars: { isRenderedAsBottomSheet: boolean | undefined };
+}) => {
   const { theme } = params;
+  const { vars } = params;
+
   return StyleSheet.create({
     mainContainer: {
       backgroundColor: theme.colors.background.default,
-      paddingTop: 24,
+      paddingTop: 8,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       minHeight: 200,
-      paddingBottom: Device.isIphoneX() ? 20 : 0,
+      height: vars.isRenderedAsBottomSheet ? undefined : '100%',
+      justifyContent: vars.isRenderedAsBottomSheet
+        ? 'flex-start'
+        : 'space-between',
     },
     title: {
       alignSelf: 'center',
+      marginTop: 8,
       marginBottom: 16,
-      marginTop: 16,
       marginRight: 24,
       marginLeft: 24,
     },
     actionButtonsContainer: {
       flex: 0,
       flexDirection: 'row',
-      padding: 24,
+      paddingHorizontal: 24,
     },
     buttonPositioning: {
       flex: 1,
@@ -37,7 +44,7 @@ const createStyles = (params: { theme: Theme }) => {
     networkPermissionRequestInfoCard: {
       marginHorizontal: 24,
       marginTop: 8,
-      marginBottom: 12,
+      marginBottom: 16,
       alignItems: 'center',
       flexDirection: 'row',
     },
@@ -101,6 +108,18 @@ const createStyles = (params: { theme: Theme }) => {
     editArrow: {
       marginHorizontal: 16,
     },
+    walletIcon: { alignSelf: 'flex-start' },
+    dataIcon: { alignSelf: 'flex-start' },
+    disconnectAllContainer: {
+      marginTop: 16,
+      marginHorizontal: 24,
+      flexDirection: 'row',
+    },
+    disconnectButton: { flex: 1 },
+    editTextContainer: {
+      width: 56,
+      alignItems: 'center',
+    },
   });
 };
 

app/components/UI/PermissionsSummary/PermissionsSummary.test.tsx

@@ -4,6 +4,18 @@ import { backgroundState } from '../../../util/test/initial-root-state';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils';
 
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
 const mockInitialState = {
   wizard: {
     step: 1,
@@ -15,6 +27,7 @@ const mockInitialState = {
     },
   },
 };
+
 describe('PermissionsSummary', () => {
   it('should render correctly', () => {
     const { toJSON } = renderWithProvider(