fix: long token names breaking ui

packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue

@@ -5,18 +5,10 @@
 
       <div class="nft-select-list__token-info-name">
         <h4>
-          {{
-            item.name.length > 40
-              ? item.name.substring(0, 40) + '...'
-              : item.name
-          }}
+          {{ $filters.truncate(item.name, 25) }}
         </h4>
         <p>
-          {{
-            item.collectionName.length > 50
-              ? item.collectionName.substring(0, 50) + '...'
-              : item.collectionName
-          }}
+          {{ $filters.truncate(item.collectionName, 50) }}
         </p>
       </div>
     </div>

packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue

@@ -6,18 +6,10 @@
       </div>
       <div class="send-nft-select__info">
         <h5>
-          {{
-            item.name.length > 25
-              ? item.name.substring(0, 25) + '...'
-              : item.name
-          }}
+          {{ $filters.truncate(item.name, 25) }}
         </h5>
         <p>
-          {{
-            item.collectionName.length > 50
-              ? item.collectionName.substring(0, 50) + '...'
-              : item.collectionName
-          }}
+          {{ $filters.truncate(item.collectionName, 50) }}
         </p>
       </div>
 

packages/extension/src/ui/action/types/filters.ts

@@ -4,6 +4,7 @@ import {
   replaceWithEllipsis,
   formatFiatValue,
   formatFloatingPointValue,
+  truncate
 } from '../utils/filters';
 declare global {
   namespace $filters {
@@ -12,6 +13,7 @@ declare global {
       replaceWithEllipsis,
       formatFiatValue,
       formatFloatingPointValue,
+      truncate
     };
   }
 }

packages/extension/src/ui/action/utils/filters.ts

@@ -16,6 +16,14 @@ export const replaceWithEllipsis = (
     value.substring(value.length - keepRight, value.length)
   );
 };
+
+
+export const truncate = (value: string, length: number): string => {
+  if (!value) return '';
+  value = value.toString();
+  return value.length > length ? value.substring(0, length) + '...' : value;
+}
+
 export const formatDuration = (
   duration: moment.Duration,
   date: number,

packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue

@@ -5,7 +5,9 @@
         <img :src="token.icon" @error="imageLoadError" />
       </div>
       <div class="assets-select-list__token-info-name">
-        <h4>{{ token.name }}</h4>
+        <h4>
+          {{ $filters.truncate(token.name, 25) }}
+        </h4>
         <p>
           {{ balance ? $filters.formatFloatingPointValue(balance).value : '~' }}
           <span>{{ token.symbol }}</span>

packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue

@@ -111,11 +111,7 @@
               fromBase(activity.value, activity.token.decimals),
             ).value
           }}
-          <span>{{
-            activity.token.symbol.length > 40
-              ? activity.token.symbol.substring(0, 40) + '...'
-              : activity.token.symbol
-          }}</span>
+          <span>{{ $filters.truncate(activity.token.symbol, 40) }}</span>
         </h4>
         <p>$ {{ $filters.formatFiatValue(getFiatValue).value }}</p>
       </div>

packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue

@@ -4,7 +4,9 @@
       <img :src="token.logoURI" alt="" @error="imageLoadError" />
     </div>
     <div class="swap-token-select__info">
-      <h5>{{ token.name }}</h5>
+      <h5>
+        {{ $filters.truncate(token.name, 25) }}
+      </h5>
       <p>
         {{
           tokenBalance