feat: Address value component for use in re-designed confirmation pag…

…es (#11815)

## **Description**
Address value component for use in re-designed confirmation pages

## **Related issues**

Fixes: #11793

## **Manual testing steps**

1. Enable re-designs locally
2. Go to test dapp
3. Open personal sign page
4. Navigate to network header info section

## **Screenshots/Recordings**
TODO

## **Pre-merge author checklist**

- [X] 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).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] 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.

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

@@ -9,6 +9,7 @@ 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';
 
 // todo: use value component for address, network, currency value
@@ -23,7 +24,9 @@ const AccountNetworkInfoExpanded = () => {
  return (
  <View>
  <InfoSection>
- <InfoRow label={strings('confirm.account')}>{accountAddress}</InfoRow>
+ <InfoRow label={strings('confirm.account')}>
+ <Address address={accountAddress}></Address>
+ </InfoRow>
  <InfoRow label={strings('confirm.balance')}>{accountBalance}</InfoRow>
  </InfoSection>
  <InfoSection>

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

@@ -49,19 +49,52 @@ exports[`AccountNetworkInfoExpanded should match snapshot for personal sign 1`]
  Account
  </Text>
  </View>
- <Text
+ <View
  style={
  {
- "color": "#141618",
- "fontFamily": "EuclidCircularB-Regular",
- "fontSize": 14,
- "fontWeight": "400",
- "marginTop": 8,
+ "alignItems": "center",
+ "alignSelf": "center",
+ "backgroundColor": "#f2f4f6",
+ "borderRadius": 99,
+ "flexDirection": "row",
+ "gap": 5,
+ "paddingLeft": 8,
+ "paddingRight": 8,
+ "paddingVertical": 4,
  }
  }
  >
- 0x935E73EDb9fF52E23BaC7F7e043A1ecD06d05477
- </Text>
+ <SvgMock
+ color="#141618"
+ height={20}
+ name="Question"
+ style={
+ {
+ "height": 20,
+ "width": 20,
+ }
+ }
+ width={20}
+ />
+ <Text
+ accessibilityRole="text"
+ ellipsizeMode="middle"
+ numberOfLines={1}
+ style={
+ {
+ "color": "#141618",
+ "flexShrink": 1,
+ "fontFamily": "EuclidCircularB-Regular",
+ "fontSize": 14,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 22,
+ }
+ }
+ >
+ 0x935E7...05477
+ </Text>
+ </View>
  </View>
  <View
  style={

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../../../../util/test/initial-root-state';
+import {
+ MOCK_ACCOUNTS_CONTROLLER_STATE,
+ MOCK_ADDRESS_1,
+} from '../../../../../../../../util/test/accountsControllerTestUtils';
+
+import Address from './Address';
+
+const mockInitialState = {
+ engine: {
+ backgroundState: {
+ ...backgroundState,
+ AccountsController: {
+ ...MOCK_ACCOUNTS_CONTROLLER_STATE,
+ },
+ },
+ },
+};
+
+describe('InfoAddress', () => {
+ it('should match snapshot', async () => {
+ const container = renderWithProvider(<Address address={MOCK_ADDRESS_1} />, {
+ state: mockInitialState,
+ });
+ expect(container).toMatchSnapshot();
+ });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Name from '../../../../../../../UI/Name';
+import { NameType } from '../../../../../../../UI/Name/Name.types';
+
+interface AddressProps {
+ address: string;
+}
+
+const Address = ({ address }: AddressProps) => (
+ <Name type={NameType.EthereumAddress} value={address} />
+);
+
+export default Address;

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/__snapshots__/Address.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoAddress should match snapshot 1`] = `
+<View
+ style={
+ {
+ "alignItems": "center",
+ "alignSelf": "center",
+ "backgroundColor": "#f2f4f6",
+ "borderRadius": 99,
+ "flexDirection": "row",
+ "gap": 5,
+ "paddingLeft": 8,
+ "paddingRight": 8,
+ "paddingVertical": 4,
+ }
+ }
+>
+ <SvgMock
+ color="#141618"
+ height={20}
+ name="Question"
+ style={
+ {
+ "height": 20,
+ "width": 20,
+ }
+ }
+ width={20}
+ />
+ <Text
+ accessibilityRole="text"
+ ellipsizeMode="middle"
+ numberOfLines={1}
+ style={
+ {
+ "color": "#141618",
+ "flexShrink": 1,
+ "fontFamily": "EuclidCircularB-Regular",
+ "fontSize": 14,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 22,
+ }
+ }
+ >
+ 0xC4955...4D272
+ </Text>
+</View>
+`;

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import InfoURL from './index';
+import InfoURL from './InfoURL';
 
 describe('InfoURL', () => {
  it('should display url as expected', async () => {