fix(15619): permissions summary page shows only network permissions

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

@@ -9,11 +9,17 @@ const createStyles = (params: {
   theme: Theme;
   vars: {
     isRenderedAsBottomSheet: boolean | undefined;
+    nonTabView: boolean | undefined;
+    fullNonTabView: boolean | undefined;
   };
 }) => {
   const { theme, vars } = params;
   const { colors, typography } = theme;
-  const { isRenderedAsBottomSheet } = vars;
+  const { isRenderedAsBottomSheet, nonTabView, fullNonTabView } = vars;
+
+  const tabHeight = fullNonTabView ? 400 : 325;
+  const bottomSheetHeight = isRenderedAsBottomSheet ? undefined : '100%';
+  const height = nonTabView ? tabHeight : bottomSheetHeight;
 
   return StyleSheet.create({
     safeArea: {
@@ -24,12 +30,19 @@ const createStyles = (params: {
       paddingTop: 16,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      height: isRenderedAsBottomSheet ? undefined : '100%',
+      height,
       justifyContent: isRenderedAsBottomSheet ? 'flex-start' : 'space-between',
     },
     contentContainer: {
       flex: 1,
     },
+    container: {
+      marginTop: 16,
+      backgroundColor: colors.background.default,
+      borderRadius: 16,
+      paddingTop: 8,
+      marginHorizontal: 16,
+    },
     title: {
       alignSelf: 'center',
       marginTop: 8,

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

@@ -61,6 +61,7 @@ describe('PermissionsSummary', () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
   it('should render correctly', () => {
     const { toJSON } = renderWithProvider(
       <PermissionsSummary
@@ -97,4 +98,97 @@ describe('PermissionsSummary', () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('should render only the account permissions card when showAccountsOnly is true', () => {
+    const { toJSON } = renderWithProvider(
+      <PermissionsSummary
+        currentPageInformation={{
+          currentEnsName: '',
+          icon: '',
+          url: 'https://app.uniswap.org/',
+        }}
+        showAccountsOnly
+        accounts={[
+          {
+            name: 'Account 2',
+            address: '0x2',
+            isSelected: true,
+            assets: {
+              fiatBalance: '$3200',
+            },
+            caipAccountId: 'eip155:0:0x2',
+            yOffset: 0,
+            type: KeyringTypes.simple,
+          },
+        ]}
+        accountAddresses={['eip155:0:0x2']}
+      />,
+      { state: mockInitialState },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render only the network permissions card when showPermissionsOnly is true', () => {
+    const { toJSON } = renderWithProvider(
+      <PermissionsSummary
+        currentPageInformation={{
+          currentEnsName: '',
+          icon: '',
+          url: 'https://app.uniswap.org/',
+        }}
+        showPermissionsOnly
+        networkAvatars={[
+          {
+            name: 'Ethereum Mainnet',
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            imageSource: require('../../../assets/images/network-avatar.png'),
+            size: AvatarSize.Xs,
+            variant: AvatarVariant.Network,
+          },
+        ]}
+        accounts={[]}
+      />,
+      { state: mockInitialState },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render the tab view when both showAccountsOnly and showPermissionsOnly are false', () => {
+    const { toJSON } = renderWithProvider(
+      <PermissionsSummary
+        currentPageInformation={{
+          currentEnsName: '',
+          icon: '',
+          url: 'https://app.uniswap.org/',
+        }}
+        accounts={[
+          {
+            name: 'Account 2',
+            address: '0x2',
+            isSelected: true,
+            assets: {
+              fiatBalance: '$3200',
+            },
+            caipAccountId: 'eip155:0:0x2',
+            yOffset: 0,
+            type: KeyringTypes.simple,
+          },
+        ]}
+        accountAddresses={['eip155:0:0x2']}
+        networkAvatars={[
+          {
+            name: 'Ethereum Mainnet',
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            imageSource: require('../../../assets/images/network-avatar.png'),
+            size: AvatarSize.Xs,
+            variant: AvatarVariant.Network,
+          },
+        ]}
+        showAccountsOnly={false}
+        showPermissionsOnly={false}
+      />,
+      { state: mockInitialState },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

app/components/UI/PermissionsSummary/PermissionsSummary.tsx

@@ -95,10 +95,17 @@ const PermissionsSummary = ({
   onChooseFromPermittedNetworks = () => undefined,
   setTabIndex = () => undefined,
   tabIndex = 0,
+  showAccountsOnly = false,
+  showPermissionsOnly = false,
 }: PermissionsSummaryProps) => {
+  const nonTabView = showAccountsOnly || showPermissionsOnly;
+  const fullNonTabView = showAccountsOnly && showPermissionsOnly;
+
   const { colors } = useTheme();
   const { styles } = useStyles(styleSheet, {
     isRenderedAsBottomSheet,
+    nonTabView,
+    fullNonTabView,
   });
   const navigation = useNavigation();
   const { navigate } = navigation;
@@ -152,7 +159,9 @@ const PermissionsSummary = ({
     const url = currentPageInformation.url;
     const iconTitle = getHost(currentEnsName || url);
 
-    return isPerDappSelectedNetworkEnabled() && isAlreadyConnected ? (
+    return isPerDappSelectedNetworkEnabled() &&
+      isAlreadyConnected &&
+      !showPermissionsOnly ? (
       <View style={[styles.domainLogoContainer, styles.assetLogoContainer]}>
         <TouchableOpacity
           onPress={switchNetwork}
@@ -606,7 +615,14 @@ const PermissionsSummary = ({
               {strings('permissions.non_permitted_network_description')}
             </TextComponent>
           )}
-          <View style={styles.tabsContainer}>{renderTabsContent()}</View>
+          {!nonTabView ? (
+            <View style={styles.tabsContainer}>{renderTabsContent()}</View>
+          ) : (
+            <View style={styles.container}>
+              {showAccountsOnly && renderAccountPermissionsRequestInfoCard()}
+              {showPermissionsOnly && renderNetworkPermissionsRequestInfoCard()}
+            </View>
+          )}
         </View>
         <View style={styles.bottomButtonsContainer}>
           {isAlreadyConnected && isDisconnectAllShown && (

app/components/UI/PermissionsSummary/PermissionsSummary.types.ts

@@ -32,4 +32,6 @@ export interface PermissionsSummaryProps {
   ensByAccountAddress?: EnsByAccountAddress;
   setTabIndex?: (tabIndex: number) => void;
   tabIndex?: number;
+  showPermissionsOnly?: boolean;
+  showAccountsOnly?: boolean;
 }