Feat/use ellipsys sign for addresses

src/components/TextTrimmer.vue

@@ -0,0 +1,106 @@
+<template>
+  <span class="left" ref="left">{{ trimmedText }}</span>
+  <span class="ok">...{{ rightText }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    text: String
+  },
+  data() {
+    return {
+      leftWidth: 0,
+      leftScrollWidth: 0,
+      trimmedText: ''
+    }
+  },
+
+  mounted() {
+    this.leftText = this.text.slice(0, -8)
+    this.rightText = this.text.slice(-8)
+
+    window.addEventListener('resize', this.calculateTrimmedText)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.calculateTrimmedText)
+  },
+  methods: {
+    // calculateTrimmedText() {
+    //   // this.leftWidth = this.$refs.left.clientWidth
+    //   // console.log(' Ширина :', this.leftWidth)
+
+    //   // this.leftScrollWidth = this.$refs.left.scrollWidth
+    //   // console.log(' scrollWidth :', this.leftScrollWidth)
+
+    //   // if (this.leftScrollWidth > this.leftWidth) {
+    //   //   this.trimmedText = this.leftText.substring(
+    //   //     0,
+    //   //     Math.floor((this.leftText.length * this.leftWidth) / this.leftScrollWidth)
+    //   //   )
+    //   // } else {
+    //   //   this.trimmedText = this.leftText
+    //   // }
+    //   clearTimeout(this.resizeTimer) // Очистим предыдущий таймер, если он есть
+
+    //   this.resizeTimer = setTimeout(() => {
+    //     const containerWidth = this.$refs.left.clientWidth
+    //     const originalWidth = this.$refs.left.scrollWidth
+
+    //     if (originalWidth > containerWidth) {
+    //       const ratio = containerWidth / originalWidth
+    //       const visibleCharacters = Math.floor(this.leftText.length * ratio)
+    //       this.trimmedText = this.leftText.substring(0, visibleCharacters - 3) + '...'
+    //     } else {
+    //       this.trimmedText = this.leftText
+    //     }
+    //   }, 200)
+    // }
+    calculateTrimmedText() {
+      clearTimeout(this.resizeTimer)
+
+      this.resizeTimer = setTimeout(() => {
+        const containerWidth = this.$refs.left.clientWidth
+        console.log('clientWidth', containerWidth)
+        const originalWidth = this.$refs.left.scrollWidth
+        console.log('scrollWidth', originalWidth)
+
+        if (originalWidth > containerWidth) {
+          let visibleCharacters = 0
+          for (let i = 0; i < this.leftText.length; i++) {
+            const textWidth = this.measureTextWidth(this.leftText.substring(0, i + 1))
+            if (textWidth <= containerWidth) {
+              visibleCharacters = i + 1
+            } else {
+              break
+            }
+          }
+          this.trimmedText = this.leftText.substring(0, visibleCharacters - 1)
+        } else {
+          this.trimmedText = this.leftText
+        }
+      }, 300)
+    },
+    measureTextWidth(text) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      context.font =
+        getComputedStyle(this.$refs.left).fontSize +
+        ' ' +
+        getComputedStyle(this.$refs.left).fontFamily
+      return context.measureText(text).width
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ok {
+  display: inline-block;
+}
+
+.left {
+  display: inline-block;
+  overflow: hidden;
+}
+</style>

src/components/TransactionListItem.vue

@@ -12,11 +12,14 @@
       </template>
 
       <v-list-item-title v-if="partnerName">
-        <span class="a-text-regular-enlarged">{{ partnerName }}</span>
-        <span class="a-text-explanation-enlarged"> ({{ partnerId }})</span>
+        <span class="a-text-regular-enlarged-name">{{ partnerName }}</span>
+        <span class="a-text-explanation-enlarged">({{ address }})</span>
       </v-list-item-title>
       <v-list-item-title v-else>
-        <span class="a-text-regular-enlarged">{{ partnerId }}</span>
+        <span class="a-text-regular-enlarged">
+          <span class="addressLeft">{{ addressLeft }}</span>
+          <span class="addressRight">{{ addressRight }}</span>
+        </span>
       </v-list-item-title>
 
       <v-list-item-title>
@@ -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);

src/components/WalletCard.vue

@@ -6,7 +6,7 @@
           {{ $t('home.wallet_crypto', { crypto: cryptoName }) }}
         </v-list-item-title>
         <v-list-item-subtitle :class="`${className}__subtitle`">
-          {{ address }}
+          <TextTrimmer :text="address"></TextTrimmer>
         </v-list-item-subtitle>
 
         <template #append>
@@ -47,13 +47,15 @@
 </template>
 
 <script>
+import TextTrimmer from './TextTrimmer.vue'
 import ShareURIDialog from '@/components/ShareURIDialog.vue'
 import WalletCardListActions from '@/components/WalletCardListActions.vue'
 import { Cryptos } from '@/lib/constants'
 import currency from '@/filters/currencyAmountWithSymbol'
 
 export default {
   components: {
+    TextTrimmer,
     ShareURIDialog,
     WalletCardListActions
   },
@@ -91,6 +93,12 @@ export default {
     },
     isADM() {
       return this.crypto === Cryptos.ADM
+    },
+    addressLeft() {
+      return this.address.substring(0, this.address.length - 10)
+    },
+    addressRight() {
+      return this.address.substring(this.address.length - 10)
     }
   },
   methods: {
@@ -112,7 +120,7 @@ export default {
     @include a-text-regular-enlarged();
     line-height: 24px;
     word-break: break-word;
-    display: block;
+    display: flex;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -121,6 +129,15 @@ export default {
       color: inherit;
     }
   }
+  &__addressLeft {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__addressRight {
+    display: inline-block;
+  }
   &__list {
     padding: 8px 0 0;
   }

src/components/transactions/TransactionTemplate.vue

@@ -134,12 +134,19 @@
         <v-list-item @click="copyToClipboard(sender)">
           <template #prepend>
             <v-list-item-title :class="`${className}__title`">
-              {{ $t('transaction.sender') }}
-            </v-list-item-title>
+              {{ $t('transaction.sender') }}</v-list-item-title
+            >
           </template>
 
-          <div :class="`${className}__value`">
-            {{ senderFormatted || placeholder }}
+          <div v-if="senderFormatted" :class="`${className}__value`">
+            <div :class="`${className}__address`">
+              <div :class="`${className}__left`">{{ senderLeft }}</div>
+              <div :class="`${className}__right`">{{ senderRight }}</div>
+            </div>
+          </div>
+
+          <div v-else :class="`${className}__value`">
+            {{ placeholder }}
           </div>
         </v-list-item>
 
@@ -151,9 +158,14 @@
               {{ $t('transaction.recipient') }}
             </v-list-item-title>
           </template>
-
-          <div :class="`${className}__value`">
-            {{ recipientFormatted || placeholder }}
+          <div v-if="recipientFormatted" :class="`${className}__value`">
+            <div :class="`${className}__address`">
+              <div :class="`${className}__left`">{{ recipientLeft }}</div>
+              <div :class="`${className}__right`">{{ recipientRight }}</div>
+            </div>
+          </div>
+          <div v-else :class="`${className}__value`">
+            {{ placeholder }}
           </div>
         </v-list-item>
 
@@ -325,6 +337,18 @@ export default {
     },
     rate() {
       return this.$store.getters['rate/rate'](this.amountNumber, this.crypto)
+    },
+    senderLeft() {
+      return this.senderFormatted.substring(0, this.senderFormatted.length - 10)
+    },
+    senderRight() {
+      return this.senderFormatted.substring(this.senderFormatted.length - 10)
+    },
+    recipientLeft() {
+      return this.recipientFormatted.substring(0, this.recipientFormatted.length - 10)
+    },
+    recipientRight() {
+      return this.recipientFormatted.substring(this.recipientFormatted.length - 10)
     }
   },
   watch: {
@@ -393,6 +417,7 @@ export default {
 
 .transaction-view {
   &__title {
+    margin-right: 16px;
     font-weight: 300;
   }
   &__titlecontent {
@@ -407,6 +432,19 @@ export default {
     max-width: 100%;
     width: 100%;
   }
+  &__address {
+    display: flex;
+    justify-content: flex-end;
+  }
+  &__left {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__right {
+    display: inline-block;
+  }
   &__toolbar {
     :deep(.v-toolbar__title) div {
       text-overflow: ellipsis;