♻️ Reuse ellipsis functions for memo name

src/components/NFTPage/CollectorMessageList/Identity.vue

@@ -31,7 +31,7 @@
     />
     <div>
       <p class="text-like-green hover:underline" align="center">
-        {{ userDisplayNameFull | ellipsisCollectorAddress }}
+        {{ formattedUserDisplayNameFull }}
       </p>
     </div>
   </component>
@@ -41,15 +41,12 @@
 import { mapActions } from 'vuex';
 
 import { createUserInfoMixin } from '~/mixins/user-info';
-import { ellipsisCollectorAddress } from '~/util/ui';
+import { ellipsis } from '~/util/ui';
 
 const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
 
 export default {
   name: 'NFTPageCollectorMessageListIdentity',
-  filters: {
-    ellipsisCollectorAddress,
-  },
   mixins: [userInfoMixin],
   props: {
     walletAddress: {
@@ -85,6 +82,9 @@ export default {
         query: { tab: this.isCreatedTab ? 'created' : 'collected' },
       });
     },
+    formattedUserDisplayNameFull() {
+      return ellipsis(this.userDisplayNameFull, 13, 0);
+    },
   },
   watch: {
     walletAddress() {

src/util/ui.js

@@ -9,29 +9,15 @@ const largeNumFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 2,
 });
 
-export function ellipsis(value) {
-  if (value) {
-    const len = value.length;
-    const dots = '...';
-    if (!value) return '';
-    if (value.length > 20) {
-      return value.substring(0, 8) + dots + value.substring(len - 6, len);
-    }
-    return value;
-  }
-  return value;
-}
+export function ellipsis(value, maxLength = 20, endLength = 6) {
+  if (!value) return '';
+  const len = value.length;
+  const dots = '...';
 
-export function ellipsisCollectorAddress(value) {
-  if (value) {
-    const len = value.length;
-    const dots = '...';
-    if (!value) return '';
-    if (value.length > 10) {
-      return value.substring(0, 8) + dots;
-    }
-    return value;
+  if (len > maxLength) {
+    return value.substring(0, 8) + dots + value.substring(len - endLength, len);
   }
+
   return value;
 }