diff --git a/src/components/NFTPage/CollectorMessageList/Identity.vue b/src/components/NFTPage/CollectorMessageList/Identity.vue index 1d789922f..18cca1434 100644 --- a/src/components/NFTPage/CollectorMessageList/Identity.vue +++ b/src/components/NFTPage/CollectorMessageList/Identity.vue @@ -31,7 +31,7 @@ />

- {{ userDisplayNameFull | ellipsisCollectorAddress }} + {{ formattedUserDisplayNameFull }}

@@ -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() { diff --git a/src/util/ui.js b/src/util/ui.js index cb0e5a8aa..eb07f4e21 100644 --- a/src/util/ui.js +++ b/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; }