fix: Prefer token symbol to token name (#27693)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

The petnames component defaults to show the name of the token instead of
the symbol. Adding `preferContractSymbol` to the component overrides it
to show the token symbol instead, for brevity.

The PR adds the prop to petnames components inside tx simulations and
the address row component.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27693?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3371

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.

ui/components/app/confirm/info/row/address.tsx

@@ -44,7 +44,11 @@ export const ConfirmInfoRowAddress = memo(
           // component can support variations. See this comment for context: //
           // https://github.com/MetaMask/metamask-extension/pull/23487#discussion_r1525055546
           isPetNamesEnabled && !isSnapUsingThis ? (
-            <Name value={hexAddress} type={NameType.ETHEREUM_ADDRESS} />
+            <Name
+              value={hexAddress}
+              type={NameType.ETHEREUM_ADDRESS}
+              preferContractSymbol
+            />
           ) : (
             <>
               <Box

ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx

@@ -87,6 +87,7 @@ export const ApproveStaticSimulation = () => {
           <Name
             value={transactionMeta.txParams.to as string}
             type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
           />
         </Box>
       </Box>

ui/pages/confirmations/components/confirm/info/approve/revoke-static-simulation/revoke-static-simulation.tsx

@@ -23,6 +23,7 @@ export const RevokeStaticSimulation = () => {
           <Name
             value={transactionMeta.txParams.to as string}
             type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
           />
         </Box>
       </Box>
@@ -36,6 +37,7 @@ export const RevokeStaticSimulation = () => {
           <Name
             value={transactionMeta.txParams.from as string}
             type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
           />
         </Box>
       </Box>

ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/revoke-set-approval-for-all-static-simulation/revoke-set-approval-for-all-static-simulation.tsx

@@ -29,6 +29,7 @@ export const RevokeSetApprovalForAllStaticSimulation = ({
           <Name
             value={transactionMeta.txParams.to as string}
             type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
           />
         </Box>
       </Box>
@@ -39,7 +40,11 @@ export const RevokeSetApprovalForAllStaticSimulation = ({
     <ConfirmInfoRow label={t('permissionFrom')}>
       <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
         <Box display={Display.Flex} alignItems={AlignItems.center}>
-          <Name value={spender} type={NameType.ETHEREUM_ADDRESS} />
+          <Name
+            value={spender}
+            type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
+          />
         </Box>
       </Box>
     </ConfirmInfoRow>

ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx

@@ -47,6 +47,7 @@ export const SetApprovalForAllStaticSimulation = () => {
           <Name
             value={transactionMeta.txParams.to as string}
             type={NameType.ETHEREUM_ADDRESS}
+            preferContractSymbol
           />
         </Box>
       </Box>

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx

@@ -116,7 +116,11 @@ const PermitSimulationValueDisplay: React.FC<
             </Text>
           </Tooltip>
         </Box>
-        <Name value={tokenContract} type={NameType.ETHEREUM_ADDRESS} />
+        <Name
+          value={tokenContract}
+          type={NameType.ETHEREUM_ADDRESS}
+          preferContractSymbol
+        />
       </Box>
       <Box>
         {fiatValue && <IndividualFiatDisplay fiatAmount={fiatValue} shorten />}