feat: display snap name

app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx

@@ -11,7 +11,6 @@ import {
   ACCOUNT_BASE_TEST_ID,
 } from './AccountBase.constants';
 import styles from './AccountBase.styles';
-import { strings } from '../../../../../locales/i18n';
 import { AccountBaseProps } from './AccountBase.types';
 
 const AccountBase = ({
@@ -56,7 +55,7 @@ const AccountBase = ({
               variant={TextVariant.BodyMDBold}
               style={styles.accountNameLabelText}
             >
-              {strings(accountTypeLabel)}
+              {accountTypeLabel}
             </Text>
         </View>
         )}

app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx

@@ -9,14 +9,12 @@ import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
 import Text, { TextVariant } from '../../Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import { useStyles } from '../../../hooks';
-import { strings } from '../../../../../locales/i18n';
 
 // Internal dependencies.
 import PickerBase from '../PickerBase';
 import { PickerAccountProps } from './PickerAccount.types';
 import styleSheet from './PickerAccount.styles';
 import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
-import { AccountListViewSelectorsIDs } from '../../../../../e2e/selectors/AccountListView.selectors';
 
 const PickerAccount: React.ForwardRefRenderFunction<
   TouchableOpacity,
@@ -56,15 +54,6 @@ const PickerAccount: React.ForwardRefRenderFunction<
         >
           {accountName}
         </Text>
-        {accountTypeLabel && (
-          <Text
-            variant={TextVariant.BodySM}
-            style={styles.accountNameLabelText}
-            testID={AccountListViewSelectorsIDs.ACCOUNT_TYPE_LABEL}
-          >
-            {strings(accountTypeLabel)}
-          </Text>
-        )}
         {showAddress && (
           <Text variant={TextVariant.BodyMD} style={styles.accountAddressLabel}>
             {shortenedAddress}

app/components/UI/AccountInfoCard/index.js

@@ -233,7 +233,7 @@ class AccountInfoCard extends PureComponent {
         {accountLabelTag && (
           <View style={styles.tag}>
             <Text variant={TextVariant.BodySMBold} style={styles.tagText}>
-              {strings(accountLabelTag)}
+              {accountLabelTag}
             </Text>
           </View>
         )}

app/components/UI/AccountOverview/index.js

@@ -417,7 +417,7 @@ class AccountOverview extends PureComponent {
                         variant={TextVariant.BodySMBold}
                         style={styles.tagText}
                       >
-                        {strings(accountLabelTag)}
+                        {accountLabelTag}
                       </Text>
                     </View>
                   )}

app/components/UI/AccountSelectorList/AccountSelector.test.tsx

@@ -205,11 +205,11 @@ describe('AccountSelectorList', () => {
       expect(within(accountNameItems[1]).getByText('Account 2')).toBeDefined();
     });
   });
-  it('renders "Snaps (beta)" tag for Snap accounts', async () => {
-    const mockAccountsWithSnap = createMockAccountsControllerStateWithSnap([
-      MOCK_ADDRESS_1,
-      MOCK_ADDRESS_2,
-    ]);
+  it('renders the snap name tag for Snap accounts', async () => {
+    const mockAccountsWithSnap = createMockAccountsControllerStateWithSnap(
+      [MOCK_ADDRESS_1, MOCK_ADDRESS_2],
+      'MetaMask Simple Snap Keyring',
+    );
 
     const stateWithSnapAccount = {
       ...initialState,
@@ -225,7 +225,7 @@ describe('AccountSelectorList', () => {
     const { queryByText } = renderComponent(stateWithSnapAccount);
 
     await waitFor(async () => {
-      const snapTag = await queryByText('Snaps (beta)');
+      const snapTag = await queryByText('MetaMask Simple Snap Keyring');
       expect(snapTag).toBeDefined();
     });
   });

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

@@ -15,8 +15,8 @@ import Text from '../../../component-library/components/Texts/Text';
 import AvatarGroup from '../../../component-library/components/Avatars/AvatarGroup';
 import {
   formatAddress,
-  safeToChecksumAddress,
   getLabelTextByAddress,
+  safeToChecksumAddress,
 } from '../../../util/address';
 import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
 import { isDefaultAccountName } from '../../../util/ENSUtils';
@@ -200,7 +200,7 @@ const AccountSelectorList = ({
             type: accountAvatarType,
             accountAddress: address,
           }}
-          tagLabel={tagLabel ? strings(tagLabel) : tagLabel}
+          tagLabel={tagLabel}
           disabled={isDisabled}
           style={cellStyle}
         >

app/components/UI/AddressInputs/index.js

@@ -178,11 +178,7 @@ const createStyles = (colors, layout = 'horizontal') => {
   });
 };
 
-const AddressName = ({
-  toAddressName,
-  confusableCollection = [],
-  accountLabel,
-}) => {
+const AddressName = ({ toAddressName, confusableCollection = [] }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   if (confusableCollection.length) {
@@ -214,22 +210,13 @@ const AddressName = ({
       <Text style={styles.textAddress} numberOfLines={1}>
         {toAddressName}
       </Text>
-      {accountLabel && (
-        <Text
-          variant={TextVariant.BodySMBold}
-          style={styles.accountNameLabelText}
-        >
-          {strings(accountLabel)}
-        </Text>
-      )}
     </View>
   );
 };
 
 AddressName.propTypes = {
   toAddressName: PropTypes.string,
   confusableCollection: PropTypes.array,
-  accountLabel: PropTypes.string,
 };
 
 export const AddressTo = (props) => {
@@ -252,7 +239,6 @@ export const AddressTo = (props) => {
     isFromAddressBook = false,
     layout = 'horizontal',
   } = props;
-  const accountLabel = getLabelTextByAddress(toSelectedAddress);
   const { colors, themeAppearance } = useTheme();
   const styles = createStyles(colors, layout);
 
@@ -292,7 +278,6 @@ export const AddressTo = (props) => {
                     <AddressName
                       toAddressName={toAddressName}
                       confusableCollection={confusableCollection}
-                      accountLabel={accountLabel}
                     />
                   )}
                   <View style={styles.addressWrapper}>
@@ -414,7 +399,6 @@ export const AddressTo = (props) => {
                     <AddressName
                       toAddressName={toAddressName}
                       confusableCollection={confusableCollection}
-                      accountLabel={accountLabel}
                     />
 
                     <View style={styles.addressWrapper}>
@@ -582,7 +566,6 @@ export const AddressFrom = (props) => {
     fromAccountAddress,
     layout = 'horizontal',
   } = props;
-  const accountLabel = getLabelTextByAddress(fromAccountAddress);
   const { colors } = useTheme();
   const styles = createStyles(colors, layout);
 
@@ -603,14 +586,6 @@ export const AddressFrom = (props) => {
         <View style={[baseStyles.flexGrow, styles.address]}>
           <View style={styles.accountNameLabel}>
             <Text style={styles.textAddress}>{fromAccountName}</Text>
-            {accountLabel && (
-              <Text
-                variant={TextVariant.BodySMBold}
-                style={styles.accountNameLabelText}
-              >
-                {strings(accountLabel)}
-              </Text>
-            )}
           </View>
           <Text style={styles.textBalance}>{`${strings(
             'transactions.address_from_balance',

app/components/UI/DrawerView/index.js

@@ -490,7 +490,7 @@ class DrawerView extends PureComponent {
     return label ? (
       <View style={[styles.importedWrapper]}>
         <Text numberOfLines={1} style={styles.importedText}>
-          {strings(label)}
+          {label}
         </Text>
       </View>
     ) : null;

app/components/Views/AccountConnect/AccountConnectSingle/AccountConnectSingle.tsx

@@ -146,7 +146,7 @@ const AccountConnectSingle = ({
           type: accountAvatarType,
           accountAddress: address,
         }}
-        tagLabel={tagLabel ? strings(tagLabel) : ''}
+        tagLabel={tagLabel || ''}
         disabled={isLoading}
         style={isLoading && styles.disabled}
       >