Fix long nft ids

ui/helpers/utils/util.js

@@ -209,24 +209,29 @@ export function getRandomFileName() {
 }
 
 /**
- * Shortens an Ethereum address for display, preserving the beginning and end.
- * Returns the given address if it is no longer than 10 characters.
- * Shortened addresses are 13 characters long.
+ * Shortens the given string, preserving the beginning and end.
+ * Returns the string it is no longer than truncatedCharLimit.
  *
- * Example output: 0xabcde...12345
- *
- * @param {string} address - The address to shorten.
- * @returns {string} The shortened address, or the original if it was no longer
- * than 10 characters.
+ * @param {string} stringToShorten - The string to shorten.
+ * @param {number} truncatedCharLimit - The maximum length of the string.
+ * @param {number} truncatedStartChars - The number of characters to preserve at the beginning.
+ * @param {number} truncatedEndChars - The number of characters to preserve at the end.
+ * @returns {string} The shortened string.
  */
-export function shortenAddress(address = '') {
-  if (address.length < TRUNCATED_NAME_CHAR_LIMIT) {
-    return address;
+export function shortenAddress(
+  stringToShorten = '',
+  truncatedCharLimit = TRUNCATED_NAME_CHAR_LIMIT,
+  truncatedStartChars = TRUNCATED_ADDRESS_START_CHARS,
+  truncatedEndChars = TRUNCATED_ADDRESS_END_CHARS,
+) {
+  if (stringToShorten.length < truncatedCharLimit) {
+    return stringToShorten;
   }
 
-  return `${address.slice(0, TRUNCATED_ADDRESS_START_CHARS)}...${address.slice(
-    -TRUNCATED_ADDRESS_END_CHARS,
-  )}`;
+  return `${stringToShorten.slice(
+    0,
+    truncatedStartChars,
+  )}...${stringToShorten.slice(-truncatedEndChars)}`;
 }
 
 export function getAccountByAddress(accounts = [], targetAddress) {

ui/pages/confirmations/components/index.scss

@@ -36,3 +36,4 @@
 @import 'transaction-decoding/index';
 @import 'transaction-detail/index';
 @import 'transaction-detail-item/index';
+@import 'simulation-details/index';

ui/pages/confirmations/components/simulation-details/amount-pill.scss

@@ -0,0 +1,3 @@
+.tippy-tooltip.word-break-all-theme .tippy-tooltip-content{
+  word-break: break-all;
+}

ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx

@@ -207,4 +207,20 @@ describe('AmountPill', () => {
       },
     );
   });
+
+  it('renders shortened token id if given id is too long', () => {
+    const longHexadecimalTokenId = '0x11111111111111111111111111111';
+    const longTokenIdInDecimal = '5538449982437149470432529417834769';
+    renderAndExpect(
+      {
+        ...ERC721_ASSET_MOCK,
+        tokenId: longHexadecimalTokenId,
+      },
+      new BigNumber(1),
+      {
+        text: '+ #5538...4769',
+        tooltip: `#${longTokenIdInDecimal}`,
+      },
+    );
+  });
 });

ui/pages/confirmations/components/simulation-details/amount-pill.tsx

@@ -17,6 +17,7 @@ import Tooltip from '../../../../components/ui/tooltip';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 import { AssetIdentifier } from './types';
 import { formatAmount, formatAmountMaxPrecision } from './formatAmount';
+import { shortenAddress as shortenAssetId } from '../../../../helpers/utils/util';
 
 /**
  * Displays a pill with an amount and a background color indicating whether the amount
@@ -53,10 +54,18 @@ export const AmountPill: React.FC<{
   }
 
   if (asset.tokenId) {
-    const tokenIdPart = `#${hexToDecimal(asset.tokenId)}`;
+    const decimalTokenId = hexToDecimal(asset.tokenId);
+    const shortenedDecimalTokenId = shortenAssetId(decimalTokenId, 11, 4, 4);
 
-    amountParts.push(tokenIdPart);
-    tooltipParts.push(tokenIdPart);
+    const shortenedTokenIdPart = `#${shortenedDecimalTokenId}`;
+    const tooltipIdPart = `#${
+      shortenedDecimalTokenId !== decimalTokenId
+        ? decimalTokenId
+        : shortenedDecimalTokenId
+    }`;
+
+    amountParts.push(shortenedTokenIdPart);
+    tooltipParts.push(tooltipIdPart);
   }
 
   return (
@@ -78,6 +87,7 @@ export const AmountPill: React.FC<{
         position="bottom"
         title={tooltipParts.join(' ')}
         wrapperStyle={{ minWidth: 0 }}
+        theme="word-break-all"
         interactive
       >
         <Text ellipsis variant={TextVariant.bodyMd} color={color}>

ui/pages/confirmations/components/simulation-details/index.scss

@@ -0,0 +1 @@
+@import 'amount-pill';