Merge branch 'main' into chore/custom-span-sentry-tags

MetaMask · Oct 16, 2024 · 6e701cd · 6e701cd
2 parents 6c8ac83 + 8034339
commit 6e701cd
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 10 deletions.
diff --git a/...ents/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.tsx b/...ents/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>

diff --git a/...orkInfo/AccountNetworkInfoExpanded/__snapshots__/AccountNetworkInfoExpanded.test.tsx.snap b/...orkInfo/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={

diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/Address.test.tsx b/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();
+  });
+});
diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/Address.tsx b/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;
diff --git a/...confirmations/components/UI/InfoRow/InfoValue/Address/__snapshots__/Address.test.tsx.snap b/...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>
+`;
diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/index.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/index.ts
@@ -0,0 +1 @@
+export { default } from './Address';
diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx b/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 () => {