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 @@
+
+ {{ trimmedText }}
+ ...{{ rightText }}
+
+
+
+
+
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 }}
+
@@ -47,6 +47,7 @@