feat: add truncate filter, use everywhere necessary

enkryptcom · Jan 3, 2025 · c8af63c · c8af63c
1 parent 3f5e189
commit c8af63c
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 35 deletions.
diff --git a/.../providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue b/.../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
@@ -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
@@ -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
@@ -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/...s/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue b/...s/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/...xtension/src/ui/action/views/network-activity/components/network-activity-transaction.vue b/...xtension/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
@@ -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>
         {{