chore: xchain tx details use short names (#29413)

<!--
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**

<!--
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/29413?quickstart=1)

This PR uses short names for networks to improve spacing.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Do a bridge tx
2. Click on bridge tx in Activity
3. Observe shorter names

## **Screenshots/Recordings**

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

### **Before**

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

![Screenshot 2024-12-20 at 5 19
46 PM](https://github.com/user-attachments/assets/2fb314ba-a926-4992-91c1-97cda321fae3)

![Screenshot 2024-12-20 at 5 19
54 PM](https://github.com/user-attachments/assets/47eea644-a60f-4a87-b7dd-4fd17ad2609b)


### **After**

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

![Screenshot 2024-12-20 at 5 20
13 PM](https://github.com/user-attachments/assets/714ffbd6-caa4-4e0f-8e31-248f72e8b6af)
![Screenshot 2024-12-20 at 5 20
20 PM](https://github.com/user-attachments/assets/54dfc06c-c53d-4f1d-86d7-e73335b2f1d9)


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] 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
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

Author: infiniteflower

ui/hooks/useTransactionDisplayData.js

@@ -40,6 +40,7 @@ import { selectBridgeHistoryForAccount } from '../ducks/bridge-status/selectors'
 import { useBridgeTokenDisplayData } from '../pages/bridge/hooks/useBridgeTokenDisplayData';
 import { formatAmount } from '../pages/confirmations/components/simulation-details/formatAmount';
 import { getIntlLocale } from '../ducks/locale/locale';
+import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../shared/constants/bridge';
 import { useI18nContext } from './useI18nContext';
 import { useTokenFiatAmount } from './useTokenFiatAmount';
 import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
@@ -122,7 +123,7 @@ export function useTransactionDisplayData(transactionGroup) {
     bridgeHistoryItem,
     srcTxMeta: transactionGroup.initialTransaction,
   });
-  const destChainName = destNetwork?.name;
+  const destChainName = NETWORK_TO_SHORT_NETWORK_NAME_MAP[destNetwork?.chainId];
 
   const { initialTransaction, primaryTransaction } = transactionGroup;
   // initialTransaction contains the data we need to derive the primary purpose of this transaction group

ui/pages/bridge/transaction-details/bridge-step-description.tsx

@@ -20,6 +20,10 @@ import {
   TextColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  AllowedBridgeChainIds,
+  NETWORK_TO_SHORT_NETWORK_NAME_MAP,
+} from '../../../../shared/constants/bridge';
 
 type I18nFunction = (
   key: string,
@@ -49,14 +53,19 @@ const getBridgeActionText = (
     ? networkConfigurationsByChainId[hexDestChainId]
     : undefined;
 
+  const destChainName =
+    NETWORK_TO_SHORT_NETWORK_NAME_MAP[
+      destNetworkConfiguration?.chainId as AllowedBridgeChainIds
+    ];
+
   return stepStatus === StatusTypes.COMPLETE
     ? t('bridgeStepActionBridgeComplete', [
         step.destAsset.symbol,
-        destNetworkConfiguration?.name,
+        destChainName,
       ])
     : t('bridgeStepActionBridgePending', [
         step.destAsset.symbol,
-        destNetworkConfiguration?.name,
+        destChainName,
       ]);
 };
 

ui/pages/bridge/transaction-details/transaction-detail-row.tsx

@@ -7,6 +7,7 @@ import {
   AlignItems,
   TextAlign,
   TextVariant,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 
 type TransactionDetailRowProps = {
@@ -20,21 +21,24 @@ export default function TransactionDetailRow({
 }: TransactionDetailRowProps) {
   return (
     <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
-      <Box style={{ maxWidth: '40%' }} paddingRight={1}>
-        <Text variant={TextVariant.bodyMd}>{title}</Text>
-      </Box>
-      <Box
+      <Text
+        width={BlockSize.OneFourth}
+        paddingRight={1}
+        variant={TextVariant.bodyMd}
+      >
+        {title}
+      </Text>
+      <Text
         display={Display.Flex}
+        width={BlockSize.ThreeFourths}
         flexDirection={FlexDirection.Column}
         alignItems={AlignItems.flexEnd}
         textAlign={TextAlign.Right}
         paddingLeft={1}
-        style={{
-          maxWidth: '60%',
-        }}
+        variant={TextVariant.bodyMd}
       >
-        <Text variant={TextVariant.bodyMd}>{value}</Text>
-      </Box>
+        {value}
+      </Text>
     </Box>
   );
 }

ui/pages/bridge/transaction-details/transaction-details.tsx

@@ -39,6 +39,8 @@ import {
   AlignItems,
   Display,
   FlexDirection,
+  FlexWrap,
+  JustifyContent,
   TextColor,
   TextTransform,
 } from '../../../helpers/constants/design-system';
@@ -57,6 +59,10 @@ import { formatAmount } from '../../confirmations/components/simulation-details/
 import { getIntlLocale } from '../../../ducks/locale/locale';
 import { TransactionGroup } from '../../../hooks/bridge/useBridgeTxHistoryData';
 import TransactionActivityLog from '../../../components/app/transaction-activity-log';
+import {
+  NETWORK_TO_SHORT_NETWORK_NAME_MAP,
+  AllowedBridgeChainIds,
+} from '../../../../shared/constants/bridge';
 import TransactionDetailRow from './transaction-detail-row';
 import BridgeExplorerLinks from './bridge-explorer-links';
 import BridgeStepList from './bridge-step-list';
@@ -207,8 +213,14 @@ const CrossChainSwapTxDetails = () => {
       ]
     : undefined;
 
-  const srcNetworkName = srcNetwork?.name;
-  const destNetworkName = destNetwork?.name;
+  const srcNetworkName =
+    NETWORK_TO_SHORT_NETWORK_NAME_MAP[
+      srcNetwork?.chainId as AllowedBridgeChainIds
+    ];
+  const destNetworkName =
+    NETWORK_TO_SHORT_NETWORK_NAME_MAP[
+      destNetwork?.chainId as AllowedBridgeChainIds
+    ];
 
   const data = srcChainTxMeta
     ? getTransactionBreakdownData({
@@ -354,6 +366,8 @@ const CrossChainSwapTxDetails = () => {
                   display={Display.Flex}
                   gap={1}
                   alignItems={AlignItems.center}
+                  flexWrap={FlexWrap.Wrap}
+                  justifyContent={JustifyContent.flexEnd}
                 >
                   {srcNetworkIconName}
                   <Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
@@ -385,6 +399,8 @@ const CrossChainSwapTxDetails = () => {
                   display={Display.Flex}
                   gap={1}
                   alignItems={AlignItems.center}
+                  flexWrap={FlexWrap.Wrap}
+                  justifyContent={JustifyContent.flexEnd}
                 >
                   {t('bridgeTxDetailsTokenAmountOnChain', [
                     bridgeAmountSent,
@@ -401,6 +417,8 @@ const CrossChainSwapTxDetails = () => {
                   display={Display.Flex}
                   gap={1}
                   alignItems={AlignItems.center}
+                  flexWrap={FlexWrap.Wrap}
+                  justifyContent={JustifyContent.flexEnd}
                 >
                   {t('bridgeTxDetailsTokenAmountOnChain', [
                     bridgeAmountReceived,