wip

MetaMask · Feb 19, 2025 · 3af7ce9 · 3af7ce9
1 parent edaa96c
commit 3af7ce9
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 21 deletions.
diff --git a/app/components/UI/Name/Name.tsx b/app/components/UI/Name/Name.tsx
@@ -1,21 +1,23 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { TextProps, View, ViewStyle } from 'react-native';
-
-import { useStyles } from '../../../component-library/hooks';
-import Text, {
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
+import Badge, { BadgeVariant } from '../../../component-library/components/Badges/Badge';
 import Icon, {
   IconName,
 } from '../../../component-library/components/Icons/Icon';
+import Text, {
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../component-library/hooks';
+import images from '../../../images/image-icons';
 import { renderShortAddress } from '../../../util/address';
 import useDisplayName, {
   DisplayNameVariant,
 } from '../../hooks/DisplayName/useDisplayName';
 import Identicon from '../Identicon';
-import { NameProperties, NameType } from './Name.types';
 import styleSheet from './Name.styles';
+import { NameProperties, NameType } from './Name.types';
 
 const NameLabel: React.FC<{
   displayNameVariant: DisplayNameVariant;
@@ -59,7 +61,7 @@ const Name: React.FC<NameProperties> = ({
     throw new Error('Unsupported NameType: ' + type);
   }
 
-  const { image, name, variant } = useDisplayName({
+  const { image, name, variant, isFirstPartyContractName } = useDisplayName({
     preferContractSymbol,
     type,
     value,
@@ -74,16 +76,33 @@ const Name: React.FC<NameProperties> = ({
     return <UnknownEthereumAddress address={value} style={style} />;
   }
 
+  const MAX_CHAR_LENGTH = 21;
+  const MIDDLE_SECTION_ELLIPSIS = '...';
+  const truncatedName =
+    name && name.length > MAX_CHAR_LENGTH
+      ? `${name.slice(0, (MAX_CHAR_LENGTH - MIDDLE_SECTION_ELLIPSIS.length) / 2)}${MIDDLE_SECTION_ELLIPSIS}${name.slice(-(MAX_CHAR_LENGTH - MIDDLE_SECTION_ELLIPSIS.length) / 2)}`
+      : name;
+
+
   return (
     <View style={[styles.base, style]}>
-      <Identicon
+      {isFirstPartyContractName ? (
+        <Badge
+          size={AvatarSize.Xs}
+          imageSource={images.FOX_LOGO}
+          variant={BadgeVariant.Network}
+          isScaled={false}
+        />
+      ) : (
+        <Identicon
         address={value}
         diameter={16}
         imageUri={image}
         customStyle={styles.image}
-      />
+        />
+      )}
       <NameLabel displayNameVariant={variant} ellipsizeMode="tail">
-        {name}
+        {truncatedName}
       </NameLabel>
     </View>
   );

diff --git a/...mponents/Views/confirmations/components/Confirm/AdvancedDetails/AdvancedDetails.styles.ts b/...mponents/Views/confirmations/components/Confirm/AdvancedDetails/AdvancedDetails.styles.ts
@@ -2,14 +2,14 @@ import { StyleSheet } from 'react-native';
 
 const styleSheet = () =>
   StyleSheet.create({
-    container:{
-      paddingVertical: 8
+    container: {
+      paddingVertical: 8,
     },
     networkContainer: {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
-    }
+    },
   });
 
 export default styleSheet;
diff --git a/app/components/Views/confirmations/components/Confirm/AdvancedDetails/AdvancedDetails.tsx b/app/components/Views/confirmations/components/Confirm/AdvancedDetails/AdvancedDetails.tsx
@@ -12,6 +12,7 @@ import { NameType } from '../../../../../UI/Name/Name.types';
 import { useTransactionMetadataRequest } from '../../../hooks/useTransactionMetadataRequest';
 import InfoRow from '../../UI/InfoRow';
 import InfoSectionAccordion from '../../UI/InfoSectionAccordion';
+import InfoRowDivider from '../InfoRowDivider';
 import styleSheet from './AdvancedDetails.styles';
 
 const AdvancedDetails = () => {
@@ -39,6 +40,7 @@ const AdvancedDetails = () => {
             variation={CHAIN_IDS.MAINNET}
           />
         </InfoRow>
+        <InfoRowDivider />
         <InfoRow
           label={strings('confirm.label.network')}
         >

diff --git a/...components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.styles.ts b/...components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.styles.ts
@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    infoRowDivider:{
+      height: 1,
+      backgroundColor: theme.colors.border.muted,
+      marginVertical: 8,
+      marginLeft: -8,
+      marginRight: -8,
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.test.tsx b/app/components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.test.tsx
diff --git a/app/components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.tsx b/app/components/Views/confirmations/components/Confirm/InfoRowDivider/InfoRowDivider.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useStyles } from '../../../../../../component-library/hooks';
+import styleSheet from './InfoRowDivider.styles';
+
+const InfoRowDivider = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.infoRowDivider} />
+  );
+};
+
+export default InfoRowDivider;
diff --git a/app/components/Views/confirmations/components/Confirm/InfoRowDivider/index.ts b/app/components/Views/confirmations/components/Confirm/InfoRowDivider/index.ts
@@ -0,0 +1 @@
+export { default } from './InfoRowDivider';
diff --git a/...nts/Views/confirmations/components/UI/InfoSectionAccordion/InfoSectionAccordion.styles.ts b/...nts/Views/confirmations/components/UI/InfoSectionAccordion/InfoSectionAccordion.styles.ts
@@ -16,7 +16,8 @@ const styleSheet = (params: { theme: Theme }) => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      padding: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 16,
     },
     headerTitle: {
       color: theme.colors.text.default,

diff --git a/app/components/hooks/DisplayName/useDisplayName.ts b/app/components/hooks/DisplayName/useDisplayName.ts
@@ -16,6 +16,7 @@ export interface UseDisplayNameResponse {
   image?: string;
   name?: string;
   variant: DisplayNameVariant;
+  isFirstPartyContractName?: boolean;
 }
 
 /**
@@ -83,20 +84,23 @@ export function useDisplayNames(
       nftNames[index] || {};
 
     const name =
-      watchedNftName ||
       firstPartyContractName ||
+      watchedNftName ||
       erc20Token?.name ||
       nftCollectionName;
 
     const image = erc20Token?.image || nftCollectionImage;
 
+    const isFirstPartyContractName = firstPartyContractName !== undefined;
+
     return {
       contractDisplayName: erc20Token?.name,
       image,
       name,
       variant: name
         ? DisplayNameVariant.Recognized
         : DisplayNameVariant.Unknown,
+      isFirstPartyContractName,
     };
   });
 }

diff --git a/app/constants/first-party-contracts.ts b/app/constants/first-party-contracts.ts
@@ -5,19 +5,19 @@ import { NETWORKS_CHAIN_ID } from './network';
  * A map of first-party contract names to their addresses on various chains.
  */
 const FIRST_PARTY_CONTRACT_NAMES: Record<string, Record<Hex, Hex>> = {
-  'MetaMask Validator Staking': {
+  'Validator Staking': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0xDc71aFFC862fceB6aD32BE58E098423A7727bEbd',
   },
-  'MetaMask Pooled Staking': {
+  'Pooled Staking': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0x4FEF9D741011476750A243aC70b9789a63dd47Df',
   },
-  'MetaMask Third Party Staking': {
+  'Third Party Staking': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0x1f6692E78dDE07FF8da75769B6d7c716215bC7D0',
   },
-  'MetaMask Pool Staking (v1)': {
+  'Pool Staking (v1)': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0xc7bE520a13dC023A1b34C03F4Abdab8A43653F7B',
   },
-  'MetaMask Bridge': {
+  'Bridge': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0x0439e60F02a8900a951603950d8D4527f400C3f1',
     [NETWORKS_CHAIN_ID.OPTIMISM]: '0xB90357f2b86dbfD59c3502215d4060f71DF8ca0e',
     [NETWORKS_CHAIN_ID.BSC]: '0xaEc23140408534b378bf5832defc426dF8604B59',
@@ -31,7 +31,7 @@ const FIRST_PARTY_CONTRACT_NAMES: Record<string, Record<Hex, Hex>> = {
     [NETWORKS_CHAIN_ID.BASE]: '0xa20ECbC821fB54064aa7B5C6aC81173b8b34Df71',
     [NETWORKS_CHAIN_ID.ARBITRUM]: '0x23981fC34e69eeDFE2BD9a0a9fCb0719Fe09DbFC',
   },
-  'MetaMask Swaps': {
+  'Swaps': {
     [NETWORKS_CHAIN_ID.MAINNET]: '0x881D40237659C251811CEC9c364ef91dC08D300C',
     [NETWORKS_CHAIN_ID.BSC]: '0x1a1ec25DC08e98e5E93F1104B5e5cdD298707d31',
     [NETWORKS_CHAIN_ID.POLYGON]: '0x1a1ec25DC08e98e5E93F1104B5e5cdD298707d31',

diff --git a/app/images/image-icons.js b/app/images/image-icons.js
@@ -14,6 +14,7 @@ import LINEA_MAINNET from './linea-mainnet-logo.png';
 import APE_TOKEN from './ape-token.png';
 import GRAVITY from './gravity.png';
 import KAIA_MAINNET from './kaia.png';
+import FOX_LOGO from '../../app/images/branding/fox.png';
 
 export default {
   PALM,
@@ -34,4 +35,5 @@ export default {
   G: GRAVITY,
   'KAIA-MAINNET': KAIA_MAINNET,
   'KAIA-KAIROS-TESTNET': KAIA_MAINNET,
+  FOX_LOGO,
 };