From 3f5e189ce6f3955d9186661850605105f0410aec Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 3 Jan 2025 11:02:47 -0800
Subject: [PATCH 1/2] fix: long token names breaking ui

---
 .../components/assets-select-list-item.vue                | 8 +++++++-
 .../views/swap/components/swap-token-select/index.vue     | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
index 473a908f3..1f0bab437 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
@@ -5,7 +5,13 @@
         <img :src="token.icon" @error="imageLoadError" />
       </div>
       <div class="assets-select-list__token-info-name">
-        <h4>{{ token.name }}</h4>
+        <h4>
+          {{
+            token.name.length > 25
+              ? token.name.substring(0, 25) + '...'
+              : token.name
+          }}
+        </h4>
         <p>
           {{ balance ? $filters.formatFloatingPointValue(balance).value : '~' }}
           <span>{{ token.symbol }}</span>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
index 6e17c5560..e72c9ee07 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
@@ -4,7 +4,13 @@
       <img :src="token.logoURI" alt="" @error="imageLoadError" />
     </div>
     <div class="swap-token-select__info">
-      <h5>{{ token.name }}</h5>
+      <h5>
+        {{
+          token.name.length > 25
+            ? token.name.substring(0, 25) + '...'
+            : token.name
+        }}
+      </h5>
       <p>
         {{
           tokenBalance

From c8af63c1afa0e063ef51f3413984982e16fbc2bd Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 3 Jan 2025 11:28:29 -0800
Subject: [PATCH 2/2] feat: add truncate filter, use everywhere necessary

---
 .../components/nft-select-list-item.vue              | 12 ++----------
 .../common/ui/send-transaction/send-nft-select.vue   | 12 ++----------
 packages/extension/src/ui/action/types/filters.ts    |  2 ++
 packages/extension/src/ui/action/utils/filters.ts    |  8 ++++++++
 .../components/assets-select-list-item.vue           |  6 +-----
 .../components/network-activity-transaction.vue      |  6 +-----
 .../swap/components/swap-token-select/index.vue      |  6 +-----
 7 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue b/packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue
index 06e126c82..3f4187917 100644
--- a/packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue
+++ b/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>
diff --git a/packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue b/packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue
index 809fcbb3d..9c07b8b2e 100644
--- a/packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue
+++ b/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>
 
diff --git a/packages/extension/src/ui/action/types/filters.ts b/packages/extension/src/ui/action/types/filters.ts
index 7033e46bf..bce420d08 100644
--- a/packages/extension/src/ui/action/types/filters.ts
+++ b/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
     };
   }
 }
diff --git a/packages/extension/src/ui/action/utils/filters.ts b/packages/extension/src/ui/action/utils/filters.ts
index 017e5ff9f..9cd4a793a 100644
--- a/packages/extension/src/ui/action/utils/filters.ts
+++ b/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,
diff --git a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
index 1f0bab437..af3692c3c 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
@@ -6,11 +6,7 @@
       </div>
       <div class="assets-select-list__token-info-name">
         <h4>
-          {{
-            token.name.length > 25
-              ? token.name.substring(0, 25) + '...'
-              : token.name
-          }}
+          {{ $filters.truncate(token.name, 25) }}
         </h4>
         <p>
           {{ balance ? $filters.formatFloatingPointValue(balance).value : '~' }}
diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
index 1f81a6f8a..09fd0f0e5 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
+++ b/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>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
index e72c9ee07..6f1be6c1c 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
@@ -5,11 +5,7 @@
     </div>
     <div class="swap-token-select__info">
       <h5>
-        {{
-          token.name.length > 25
-            ? token.name.substring(0, 25) + '...'
-            : token.name
-        }}
+        {{ $filters.truncate(token.name, 25) }}
       </h5>
       <p>
         {{