fix: long token names breaking ui

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

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
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
@@ -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
@@ -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