feat: network value component for re-designed confirmation pages

app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap

@@ -326,7 +326,7 @@ exports[`Confirm should match snapshot for personal sign 1`] = `
                     }
                   }
                 >
-                  Ethereum Main Network
+                  Mainnet
                 </Text>
               </View>
             </View>

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx

@@ -10,20 +10,18 @@ import Badge, {
   BadgeVariant,
 } from '../../../../../../../component-library/components/Badges/Badge';
 import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper';
-import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
+import { selectChainId } from '../../../../../../../selectors/networkController';
 import { useStyles } from '../../../../../../../component-library/hooks';
-import {
-  selectNetworkImageSource,
-  selectNetworkName,
-} from '../../../../../../../selectors/networkInfos';
+import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
 import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useApprovalRequest from '../../../../hooks/useApprovalRequest';
+import useNetworkInfo from '../../../../hooks/useNetworkInfo';
 import styleSheet from './AccountNetworkInfoCollapsed.styles';
 
 const AccountNetworkInfoCollapsed = () => {
   const { approvalRequest } = useApprovalRequest();
-  const networkName = useSelector(selectNetworkName);
-  const networkImage = useSelector(selectNetworkImageSource);
+  const chainId = useSelector(selectChainId);
+  const { networkName, networkImage } = useNetworkInfo(chainId);
   const useBlockieIcon = useSelector(
     (state: RootState) => state.settings.useBlockieIcon,
   );

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/__snapshots__/AccountNetworkInfoCollapsed.test.tsx.snap

@@ -154,7 +154,7 @@ exports[`AccountNetworkInfoCollapsed should match snapshot for personal sign 1`]
         }
       }
     >
-      Ethereum Main Network
+      Mainnet
     </Text>
   </View>
 </View>

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.tsx

@@ -3,19 +3,21 @@ import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { strings } from '../../../../../../../../locales/i18n';
-import { selectProviderConfig } from '../../../../../../../selectors/networkController';
-import { selectNetworkName } from '../../../../../../../selectors/networkInfos';
+import {
+  selectChainId,
+  selectProviderConfig,
+} from '../../../../../../../selectors/networkController';
 import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useApprovalRequest from '../../../../hooks/useApprovalRequest';
 import InfoSection from '../../../UI/InfoRow/InfoSection';
 import InfoRow from '../../../UI/InfoRow';
 import Address from '../../../UI/InfoRow/InfoValue/Address';
-import InfoURL from '../../../UI/InfoRow/InfoValue/InfoURL';
+import DisplayURL from '../../../UI/InfoRow/InfoValue/DisplayURL';
+import Network from '../../../UI/InfoRow/InfoValue/Network';
 
-// todo: use value component for address, network, currency value
 const AccountNetworkInfoExpanded = () => {
   const { approvalRequest } = useApprovalRequest();
-  const networkName = useSelector(selectNetworkName);
+  const chainId = useSelector(selectChainId);
   const { rpcUrl: networkRpcUrl, type: networkType } =
     useSelector(selectProviderConfig);
   const fromAddress = approvalRequest?.requestData?.from;
@@ -35,10 +37,10 @@ const AccountNetworkInfoExpanded = () => {
           // todo: add tooltip content when available
           tooltip={strings('confirm.network')}
         >
-          {networkName}
+          <Network chainId={chainId} />
         </InfoRow>
         <InfoRow label={strings('confirm.rpc_url')}>
-          <InfoURL
+          <DisplayURL
             url={networkRpcUrl ?? `https://${networkType}.infura.io/v3/`}
           />
         </InfoRow>

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/__snapshots__/AccountNetworkInfoExpanded.test.tsx.snap

@@ -256,19 +256,61 @@ exports[`AccountNetworkInfoExpanded should match snapshot for personal sign 1`]
           />
         </View>
       </View>
-      <Text
+      <View
         style={
           {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "marginTop": 8,
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "row",
           }
         }
       >
-        Ethereum Main Network
-      </Text>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 12,
+              "height": 24,
+              "justifyContent": "center",
+              "overflow": "hidden",
+              "width": 24,
+            }
+          }
+        >
+          <Image
+            onError={[Function]}
+            resizeMode="contain"
+            source={
+              {
+                "default": {
+                  "uri": "MockImage",
+                },
+              }
+            }
+            style={
+              {
+                "height": 24,
+                "width": 24,
+              }
+            }
+            testID="network-avatar-image"
+          />
+        </View>
+        <Text
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "marginLeft": 8,
+            }
+          }
+        >
+          Mainnet
+        </Text>
+      </View>
     </View>
     <View
       style={

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/__snapshots__/AccountNetworkInfo.test.tsx.snap

@@ -177,7 +177,7 @@ exports[`AccountNetworkInfo should match snapshot for personal sign 1`] = `
             }
           }
         >
-          Ethereum Main Network
+          Mainnet
         </Text>
       </View>
     </View>

app/components/Views/confirmations/components/Confirm/Info/PersonalSign/PersonalSign.tsx

@@ -4,7 +4,7 @@ import { strings } from '../../../../../../../../locales/i18n';
 import useApprovalRequest from '../../../../hooks/useApprovalRequest';
 import InfoSection from '../../../UI/InfoRow/InfoSection';
 import InfoRow from '../../../UI/InfoRow';
-import InfoURL from '../../../UI/InfoRow/InfoValue/InfoURL';
+import DisplayURL from '../../../UI/InfoRow/InfoValue/DisplayURL';
 import Message from './Message';
 import Simulation from './Simulation';
 
@@ -23,7 +23,7 @@ const PersonalSign = () => {
           label={strings('confirm.request_from')}
           tooltip={strings('confirm.personal_sign_tooltip')}
         >
-          <InfoURL url={approvalRequest.origin} />
+          <DisplayURL url={approvalRequest.origin} />
         </InfoRow>
       </InfoSection>
       <Message />

app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx

@@ -4,7 +4,7 @@ import { StyleProp, Text, TextStyle, View } from 'react-native';
 
 import InfoRow from './InfoRow';
 import InfoSection from './InfoSection';
-import InfoURL from './InfoValue/InfoURL';
+import DisplayURL from './InfoValue/DisplayURL';
 
 const style = {
   container: { padding: 8 },
@@ -30,10 +30,10 @@ storiesOf('Confirmations / InfoRow', module)
       <Text style={style.title as StyleProp<TextStyle>}>URL</Text>
       <InfoSection>
         <InfoRow label="url-key">
-          <InfoURL url="https://google.com" />
+          <DisplayURL url="https://google.com" />
         </InfoRow>
         <InfoRow label="url-key">
-          <InfoURL url="http://google.com" />
+          <DisplayURL url="http://google.com" />
         </InfoRow>
       </InfoSection>
     </View>

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx → app/components/Views/confirmations/components/UI/InfoRow/InfoValue/DisplayURL/DisplayURL.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import InfoURL from './InfoURL';
+import DisplayURL from './DisplayURL';
 
-describe('InfoURL', () => {
+describe('DisplayURL', () => {
   it('should display url as expected', async () => {
-    const container = render(<InfoURL url="https://google.com" />);
+    const container = render(<DisplayURL url="https://google.com" />);
     expect(container).toMatchSnapshot();
   });
 
   it('should show warning if protocol is HTTP', async () => {
-    const { getByText } = render(<InfoURL url="http://google.com" />);
+    const { getByText } = render(<DisplayURL url="http://google.com" />);
     expect(getByText('HTTP')).toBeDefined();
   });
 });

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx → app/components/Views/confirmations/components/UI/InfoRow/InfoValue/DisplayURL/DisplayURL.tsx

@@ -8,20 +8,20 @@ import Icon, {
 } from '../../../../../../../../component-library/components/Icons/Icon';
 import Logger from '../../../../../../../../util/Logger';
 import { useStyles } from '../../../../../../../../component-library/hooks';
-import styleSheet from './InfoURL.styles';
+import styleSheet from './DisplayURL.styles';
 
-interface InfoURLProps {
+interface DisplayURLProps {
   url: string;
 }
 
-const InfoURL = ({ url }: InfoURLProps) => {
+const DisplayURL = ({ url }: DisplayURLProps) => {
   let urlObject;
 
   try {
     urlObject = new URL(url);
   } catch (e) {
     // eslint-disable-next-line no-console
-    Logger.error(e as Error, `InfoURL: new URL(url) cannot parse ${url}`);
+    Logger.error(e as Error, `DisplayURL: new URL(url) cannot parse ${url}`);
   }
 
   const isHTTP = urlObject?.protocol === 'http:';
@@ -47,4 +47,4 @@ const InfoURL = ({ url }: InfoURLProps) => {
   );
 };
 
-export default InfoURL;
+export default DisplayURL;

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/__snapshots__/InfoURL.test.tsx.snap → app/components/Views/confirmations/components/UI/InfoRow/InfoValue/DisplayURL/__snapshots__/DisplayURL.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InfoURL should display url as expected 1`] = `
+exports[`DisplayURL should display url as expected 1`] = `
 <View
   style={
     {

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/DisplayURL/index.ts

@@ -0,0 +1 @@
+export { default } from './DisplayURL';

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+import { Theme } from '../../../../../../../../util/theme/models';
+import { fontStyles } from '../../../../../../../../styles/common';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    value: {
+      color: theme.colors.text.default,
+      ...fontStyles.normal,
+      fontSize: 14,
+      marginLeft: 8,
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.test.tsx

@@ -0,0 +1,33 @@
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import React from 'react';
+
+import renderWithProvider from '../../../../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../../../../util/test/initial-root-state';
+import { mockNetworkState } from '../../../../../../../../util/test/network';
+import Network from './Network';
+
+const mockInitialState = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      NetworkController: {
+        ...mockNetworkState({
+          id: 'mainnet',
+          nickname: 'Ethereum Mainnet',
+          ticker: 'ETH',
+          chainId: CHAIN_IDS.MAINNET,
+        }),
+      },
+    },
+  },
+};
+
+describe('Network', () => {
+  it('should match snapshot', async () => {
+    const container = renderWithProvider(
+      <Network chainId={CHAIN_IDS.MAINNET} />,
+      { state: mockInitialState },
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import Avatar, {
+  AvatarSize,
+  AvatarVariant,
+} from '../../../../../../../../component-library/components/Avatars/Avatar';
+import { useStyles } from '../../../../../../../../component-library/hooks';
+import useNetworkInfo from '../../../../../hooks/useNetworkInfo';
+import styleSheet from './Network.styles';
+
+interface NetworkProps {
+  chainId?: string;
+}
+
+const Network = ({ chainId }: NetworkProps) => {
+  const { networkName, networkImage } = useNetworkInfo(chainId);
+  const { styles } = useStyles(styleSheet, {});
+
+  if (!chainId) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Avatar
+        variant={AvatarVariant.Network}
+        name={networkName}
+        imageSource={networkImage}
+        size={AvatarSize.Sm}
+      />
+      <Text style={styles.value}>{networkName}</Text>
+    </View>
+  );
+};
+
+export default Network;