diff --git a/src/components/TextTrimmer.vue b/src/components/TextTrimmer.vue new file mode 100644 index 000000000..a3fc86b91 --- /dev/null +++ b/src/components/TextTrimmer.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/components/TransactionListItem.vue b/src/components/TransactionListItem.vue index d0cd99ac1..b8c1a57ff 100644 --- a/src/components/TransactionListItem.vue +++ b/src/components/TransactionListItem.vue @@ -12,11 +12,14 @@ - {{ partnerName }} - ({{ partnerId }}) + {{ partnerName }} + ({{ address }}) - {{ partnerId }} + + {{ addressLeft }} + {{ addressRight }} + @@ -117,6 +120,17 @@ export default { partnerId() { return isStringEqualCI(this.senderId, this.userId) ? this.recipientId : this.senderId }, + addressLeft() { + return this.partnerId.substring(0, this.partnerId.length - 10) + }, + addressRight() { + return this.partnerId.substring(this.partnerId.length - 10) + }, + address() { + return this.partnerId.length > 20 + ? this.partnerId.slice(0, 16) + '...' + this.addressRight + : this.partnerId + }, // Partner's ADM address, if found. Else, returns 'undefined' partnerAdmId() { const admTx = this.getAdmTx @@ -245,6 +259,18 @@ export default { @import '@/assets/styles/themes/adamant/_mixins.scss'; @import '@/assets/styles/settings/_colors.scss'; +.addressLeft { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.addressRight { + display: inline-block; +} +.a-text-regular-enlarged { + display: flex; +} .transaction-item { &__rates { color: hsla(0, 0%, 100%, 0.7); diff --git a/src/components/WalletCard.vue b/src/components/WalletCard.vue index 6cf6d02a2..5f519a668 100644 --- a/src/components/WalletCard.vue +++ b/src/components/WalletCard.vue @@ -6,7 +6,7 @@ {{ $t('home.wallet_crypto', { crypto: cryptoName }) }} - {{ address }} +