From 3b4ef1a09359a178206ffb5d696bb31c408d5f37 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 14 Nov 2023 11:12:46 +0100
Subject: [PATCH 1/8] translate known addresses

---
 src/components/ValueHashEllipsed.vue | 20 +++++++++++++-------
 src/utils/constants.js               | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/ValueHashEllipsed.vue b/src/components/ValueHashEllipsed.vue
index 3dbb5e231..4e0f77dd1 100644
--- a/src/components/ValueHashEllipsed.vue
+++ b/src/components/ValueHashEllipsed.vue
@@ -4,10 +4,10 @@
       <app-link
         v-if="linkTo"
         :to="linkTo">
-        {{ formatEllipseHash(hash) }}
+        {{ translatedAddress }}
       </app-link>
       <app-tooltip v-else>
-        {{ formatEllipseHash(hash) }}
+        {{ translatedAddress }}
         <template #tooltip>
           {{ hash }}
         </template>
@@ -17,14 +17,14 @@
     <span class="value-hash-ellipsed--desktop">
       <app-tooltip v-if="linkTo">
         <app-link :to="linkTo">
-          {{ formatEllipseHash(hash) }}
+          {{ translatedAddress }}
         </app-link>
         <template #tooltip>
           {{ hash }}
         </template>
       </app-tooltip>
       <app-tooltip v-else>
-        {{ formatEllipseHash(hash) }}
+        {{ translatedAddress }}
         <template #tooltip>
           {{ hash }}
         </template>
@@ -34,11 +34,9 @@
 </template>
 
 <script setup>
-import AppTooltip from '@/components/AppTooltip'
 import { formatEllipseHash } from '@/utils/format'
-import AppLink from '@/components/AppLink'
 
-defineProps({
+const props = defineProps({
   hash: {
     type: String,
     required: true,
@@ -48,6 +46,14 @@ defineProps({
     default: null,
   },
 })
+
+const translatedAddress = computed(() => {
+  if (KNOWN_ADDRESSES.some(address => address.hash === props.hash)) {
+    return KNOWN_ADDRESSES.find(address => address.hash === props.hash).name
+  } else {
+    return formatEllipseHash(props.hash)
+  }
+})
 </script>
 
 <style scoped>
diff --git a/src/utils/constants.js b/src/utils/constants.js
index a9a70c401..9b93d7c1f 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -93,3 +93,19 @@ export const REMOVE_LIQUIDITY_CONTRACT_CALLS = [
   'remove_liquidity',
   'remove_liquidity_ae',
 ]
+export const KNOWN_ADDRESSES = [
+  { hash: 'ak_jgiBUko9fTwg5HQ8nHFoPbjR22TBcg9LK85qsv1mTkcjdszFa', name: 'CoinEx' },
+  { hash: 'ak_6sssiKcg7AywyJkfSdHz52RbDUq5cZe4V4hcvghXnrPz4H4Qg', name: 'Gateio' },
+  { hash: 'ak_3oCNr4upswn5sRVpqdpuiCwxqwRU1tok2xLjLLy9vjvYRdVNd', name: 'MEXC' },
+  { hash: 'ak_dMyzpooJ4oGnBVX35SCvHspJrq55HAAupCwPQTDZmRDT5SSSW', name: 'WeTrue.io' },
+  { hash: 'ak_vKdT14HCiLCxuT3M7vf3QREyUbQTr1u6Pz49ba9EhaD6uDqWs', name: 'Huobi' },
+  { hash: 'ak_dnzaNnchT7f3YT3CtrQ7GUjqGT6VaHzPxpf2efHWPuEAWKcht', name: 'Binance' },
+  { hash: 'ak_wftXwsMheVNA33YWiYLqFNnSSDnYsV9ynqRSnZT8P3kgZG9bn', name: 'Hotbit' },
+  { hash: 'ak_wM8yFU8eSETXU7VSN48HMDmevGoCMiuveQZgkPuRn1nTiRqyv', name: 'WoolyPooly' },
+  { hash: 'ak_dArxCkAsk1mZB1L9CX3cdz1GDN4hN84L3Q8dMLHN4v8cU85TF', name: '2miners' },
+  { hash: 'ak_9MsbDuBTtKegKpj5uSxfPwmJ4YiN6bBdtXici682DgPk8ycpM', name: '2miners.solo' },
+  { hash: 'ak_2KAcA2Pp1nrR8Wkt3FtCkReGzAi8vJ9Snxa4PcmrthVx8AhPe8', name: 'BRI' },
+  { hash: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa', name: 'Superhero DEX' },
+  { hash: 'ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3', name: 'Superhero DEX' },
+  { hash: 'ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW', name: 'Superhero DEX' },
+]

From 8bb7855e7f4780533687819d495610a4a92af5e0 Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Thu, 16 Nov 2023 16:37:01 +0100
Subject: [PATCH 2/8] change name wording

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
---
 src/utils/constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index 9b93d7c1f..a01a45571 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -95,7 +95,7 @@ export const REMOVE_LIQUIDITY_CONTRACT_CALLS = [
 ]
 export const KNOWN_ADDRESSES = [
   { hash: 'ak_jgiBUko9fTwg5HQ8nHFoPbjR22TBcg9LK85qsv1mTkcjdszFa', name: 'CoinEx' },
-  { hash: 'ak_6sssiKcg7AywyJkfSdHz52RbDUq5cZe4V4hcvghXnrPz4H4Qg', name: 'Gateio' },
+  { hash: 'ak_6sssiKcg7AywyJkfSdHz52RbDUq5cZe4V4hcvghXnrPz4H4Qg', name: 'Gate.io' },
   { hash: 'ak_3oCNr4upswn5sRVpqdpuiCwxqwRU1tok2xLjLLy9vjvYRdVNd', name: 'MEXC' },
   { hash: 'ak_dMyzpooJ4oGnBVX35SCvHspJrq55HAAupCwPQTDZmRDT5SSSW', name: 'WeTrue.io' },
   { hash: 'ak_vKdT14HCiLCxuT3M7vf3QREyUbQTr1u6Pz49ba9EhaD6uDqWs', name: 'Huobi' },

From 10eb1b39f4750eed3bf3f8ea9666cbffc4729180 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 16 Nov 2023 17:40:10 +0100
Subject: [PATCH 3/8] add known name to account detail

---
 src/components/AccountDetailsPanel.vue | 25 ++++++-------------------
 src/components/ValueHashEllipsed.vue   | 20 +++++---------------
 src/utils/format.js                    | 10 ++++++++++
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index b52d87237..d8f3590e3 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -9,12 +9,13 @@
       </app-chip>
 
       <copy-chip
-        :label="accountDetails.id"
-        class="account-details-panel__copy-chip"/>
+        :label="formatKnownAddress(accountDetails.id)"
+        :clipboard-text="accountDetails.id"
+        class="u-hidden-mobile"/>
       <copy-chip
-        :label="formatEllipseHash(accountDetails.id)"
+        :label="formatKnownAddress(accountDetails.id, true)"
         :clipboard-text="accountDetails.id"
-        class="account-details-panel__copy-chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
     <p
       v-if="accountDetails.notExistent"
@@ -113,7 +114,7 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatEllipseHash, formatNullable, formatNumber } from '@/utils/format'
+import { formatAePrice, formatEllipseHash, formatKnownAddress, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 
@@ -161,20 +162,6 @@ const sanitizedPrice = computed(() =>
     align-items: center;
   }
 
-  &__copy-chip {
-    display: none;
-
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__copy-chip-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__not-existent {
     margin: 0 0 var(--space-3) 0;
   }
diff --git a/src/components/ValueHashEllipsed.vue b/src/components/ValueHashEllipsed.vue
index 4e0f77dd1..31f45a07e 100644
--- a/src/components/ValueHashEllipsed.vue
+++ b/src/components/ValueHashEllipsed.vue
@@ -4,10 +4,10 @@
       <app-link
         v-if="linkTo"
         :to="linkTo">
-        {{ translatedAddress }}
+        {{ formatKnownAddress(hash) }}
       </app-link>
       <app-tooltip v-else>
-        {{ translatedAddress }}
+        {{ formatKnownAddress(hash) }}
         <template #tooltip>
           {{ hash }}
         </template>
@@ -17,14 +17,14 @@
     <span class="value-hash-ellipsed--desktop">
       <app-tooltip v-if="linkTo">
         <app-link :to="linkTo">
-          {{ translatedAddress }}
+          {{ formatKnownAddress(hash) }}
         </app-link>
         <template #tooltip>
           {{ hash }}
         </template>
       </app-tooltip>
       <app-tooltip v-else>
-        {{ translatedAddress }}
+        {{ formatKnownAddress(hash) }}
         <template #tooltip>
           {{ hash }}
         </template>
@@ -34,9 +34,7 @@
 </template>
 
 <script setup>
-import { formatEllipseHash } from '@/utils/format'
-
-const props = defineProps({
+defineProps({
   hash: {
     type: String,
     required: true,
@@ -46,14 +44,6 @@ const props = defineProps({
     default: null,
   },
 })
-
-const translatedAddress = computed(() => {
-  if (KNOWN_ADDRESSES.some(address => address.hash === props.hash)) {
-    return KNOWN_ADDRESSES.find(address => address.hash === props.hash).name
-  } else {
-    return formatEllipseHash(props.hash)
-  }
-})
 </script>
 
 <style scoped>
diff --git a/src/utils/format.js b/src/utils/format.js
index 7c44399d9..2ed1018c2 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -130,3 +130,13 @@ export function formatIsAuction(name) {
   const suffixLength = 6
   return name.length - suffixLength < auctionLength
 }
+
+export function formatKnownAddress(hash, isEllipsed = false) {
+  if (KNOWN_ADDRESSES.some(address => address.hash === hash)) {
+    return KNOWN_ADDRESSES.find(address => address.hash === hash).name
+  } else if (isEllipsed) {
+    return formatEllipseHash(hash)
+  } else {
+    return hash
+  }
+}

From 0aa19170b3dfa3d6e5b10b099fcde85e8cf71aec Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 16 Nov 2023 17:56:23 +0100
Subject: [PATCH 4/8] replace device conditional classes with utility class

---
 src/components/KeyblockDetailsPanel.vue       | 27 ++++------------
 src/components/MicroblockDetailsPanel.vue     | 23 +++-----------
 src/components/NftsDetailsPanel.vue           | 19 ++----------
 src/components/OracleDetailsPanel.vue         | 23 +++-----------
 src/components/StateChannelDetailsPanel.vue   | 31 +++++--------------
 src/components/TransactionGeneralPanel.vue    | 21 +++----------
 src/components/TransactionTypePanel.vue       | 18 ++---------
 .../TransactionTypeTableSpendTx.vue           | 22 +++----------
 src/components/ValueHashEllipsed.vue          | 20 ++----------
 9 files changed, 36 insertions(+), 168 deletions(-)

diff --git a/src/components/KeyblockDetailsPanel.vue b/src/components/KeyblockDetailsPanel.vue
index cf40624ea..29fa374e9 100644
--- a/src/components/KeyblockDetailsPanel.vue
+++ b/src/components/KeyblockDetailsPanel.vue
@@ -7,11 +7,11 @@
       <div v-if="!keyblockDetails.notExistent">
         <copy-chip
           :label="keyblockDetails.hash"
-          class="keyblock-details-panel__chip"/>
+          class="u-hidden-mobile"/>
         <copy-chip
           :label="formatEllipseHash(keyblockDetails.hash)"
           :clipboard-text="keyblockDetails.hash"
-          class="keyblock-details-panel__chip-ellipse"/>
+          class="u-hidden-desktop"/>
       </div>
     </template>
     <p
@@ -66,10 +66,10 @@
             </hint-tooltip>
           </th>
           <td class="keyblock-details-panel__data">
-            <span class="keyblock-details-panel__hash">
+            <span class="u-hidden-mobile">
               {{ keyblockDetails.miner }}
             </span>
-            <span class="keyblock-details-panel__hash-ellipse">
+            <span class="u-hidden-desktop">
               {{ formatEllipseHash(keyblockDetails.miner) }}
             </span>
           </td>
@@ -83,10 +83,10 @@
           </th>
           <td class="keyblock-details-panel__data">
             <app-link :to="`/accounts/${keyblockDetails.beneficiary}`">
-              <span class="keyblock-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ keyblockDetails.beneficiary }}
               </span>
-              <span class="keyblock-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(keyblockDetails.beneficiary) }}
               </span>
             </app-link>
@@ -229,21 +229,6 @@ const isNextKeyblockMined = computed(() =>
     }
   }
 
-  &__chip,
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__chip-ellipse,
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__not-existent {
     margin: var(--space-3) 0;
   }
diff --git a/src/components/MicroblockDetailsPanel.vue b/src/components/MicroblockDetailsPanel.vue
index 3b1551330..ef162cf1b 100644
--- a/src/components/MicroblockDetailsPanel.vue
+++ b/src/components/MicroblockDetailsPanel.vue
@@ -6,11 +6,11 @@
     <template #header>
       <copy-chip
         :label="microblockDetails.hash"
-        class="microblock-details-panel__chip"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(microblockDetails.hash)"
         :clipboard-text="microblockDetails.hash"
-        class="microblock-details-panel__chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
     <table>
       <tbody>
@@ -23,10 +23,10 @@
           </th>
           <td class="microblock-details-panel__data">
             <app-link :to="`/keyblocks/${microblockDetails.prevKeyHash}`">
-              <span class="microblock-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ microblockDetails.prevKeyHash }}
               </span>
-              <span class="microblock-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(microblockDetails.prevKeyHash) }}
               </span>
             </app-link>
@@ -153,20 +153,5 @@ const microblockMiddlewareUrl = computed(() =>
       margin-right: var(--space-3);
     }
   }
-
-  &__chip,
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__chip-ellipse,
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/NftsDetailsPanel.vue b/src/components/NftsDetailsPanel.vue
index d8d6716db..1b1029f08 100644
--- a/src/components/NftsDetailsPanel.vue
+++ b/src/components/NftsDetailsPanel.vue
@@ -6,11 +6,11 @@
     <template #header>
       <copy-chip
         :label="nftDetails.contractId"
-        class="nfts-details-panel__chip"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(nftDetails.contractId)"
         :clipboard-text="nftDetails.contractId"
-        class="nfts-details-panel__chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
 
     <table>
@@ -145,20 +145,5 @@ defineProps({
     gap: var(--space-1);
     justify-content: flex-end;
   }
-
-  &__chip,
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__chip-ellipse,
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/OracleDetailsPanel.vue b/src/components/OracleDetailsPanel.vue
index b73a307f7..12183b453 100644
--- a/src/components/OracleDetailsPanel.vue
+++ b/src/components/OracleDetailsPanel.vue
@@ -6,11 +6,11 @@
     <template #header>
       <copy-chip
         :label="oracleDetails.id"
-        class="oracle-details-panel__chip"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(oracleDetails.id)"
         :clipboard-text="oracleDetails.id"
-        class="oracle-details-panel__chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
 
     <table>
@@ -133,10 +133,10 @@
           <td class="oracle-details-panel__data">
             <app-link
               :to="`/accounts/${oracleDetails.operator}`">
-              <span class="oracle-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ oracleDetails.operator }}
               </span>
-              <span class="oracle-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(oracleDetails.operator) }}
               </span>
             </app-link>
@@ -225,20 +225,5 @@ const oracleMiddlewareUrl = computed(() =>
       margin-right: var(--space-3);
     }
   }
-
-  &__chip,
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__chip-ellipse,
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/StateChannelDetailsPanel.vue b/src/components/StateChannelDetailsPanel.vue
index eaa97d5a3..4e2db552c 100644
--- a/src/components/StateChannelDetailsPanel.vue
+++ b/src/components/StateChannelDetailsPanel.vue
@@ -6,11 +6,11 @@
     <template #header>
       <copy-chip
         :label="stateChannelDetails.id"
-        class="state-channel-details-panel__chip"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(stateChannelDetails.id)"
         :clipboard-text="stateChannelDetails.id"
-        class="state-channel-details-panel__chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
 
     <table>
@@ -37,10 +37,10 @@
           </th>
           <td class="state-channel-details-panel__data">
             <app-link :to="`/transactions/${stateChannelDetails.createTransactionHash}`">
-              <span class="state-channel-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ stateChannelDetails.createTransactionHash }}
               </span>
-              <span class="state-channel-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(stateChannelDetails.createTransactionHash) }}
               </span>
             </app-link>
@@ -66,10 +66,10 @@
           </th>
           <td class="state-channel-details-panel__data">
             <app-link :to="`/accounts/${stateChannelDetails.initiator}`">
-              <span class="state-channel-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ stateChannelDetails.initiator }}
               </span>
-              <span class="state-channel-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(stateChannelDetails.initiator) }}
               </span>
             </app-link>
@@ -84,10 +84,10 @@
           </th>
           <td class="state-channel-details-panel__data">
             <app-link :to="`/accounts/${stateChannelDetails.responder}`">
-              <span class="state-channel-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ stateChannelDetails.responder }}
               </span>
-              <span class="state-channel-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(stateChannelDetails.responder) }}
               </span>
             </app-link>
@@ -222,20 +222,5 @@ const stateChannelMiddlewareUrl = `${MIDDLEWARE_URL}/v2/channels/${props.stateCh
     display: inline-flex;
     align-items: center;
   }
-
-  &__chip,
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__chip-ellipse,
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/TransactionGeneralPanel.vue b/src/components/TransactionGeneralPanel.vue
index b224b1875..ced50c856 100644
--- a/src/components/TransactionGeneralPanel.vue
+++ b/src/components/TransactionGeneralPanel.vue
@@ -6,11 +6,11 @@
     <template #header>
       <copy-chip
         :label="transactionDetails.hash"
-        class="transaction-general-panel__hash"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(transactionDetails.hash)"
         :clipboard-text="transactionDetails.hash"
-        class="transaction-general-panel__hash-ellipse"/>
+        class="u-hidden-desktop"/>
       <app-chip
         variant="primary"
         size="sm">
@@ -77,12 +77,12 @@
           <td class="transaction-general-panel__data">
             <app-link
               :to="`/microblocks/${transactionDetails.blockHash}`"
-              class="transaction-general-panel__hash">
+              class="u-hidden-mobile">
               {{ transactionDetails.blockHash }}
             </app-link>
             <app-link
               :to="`/microblocks/${transactionDetails.blockHash}`"
-              class="transaction-general-panel__hash-ellipse">
+              class="u-hidden-desktop">
               {{ formatEllipseHash(transactionDetails.blockHash) }}
             </app-link>
           </td>
@@ -219,18 +219,5 @@ const transactionMiddlewareUrl = computed(() => {
       margin-right: var(--space-3);
     }
   }
-
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/TransactionTypePanel.vue b/src/components/TransactionTypePanel.vue
index 8166d7c2a..5332a19e2 100644
--- a/src/components/TransactionTypePanel.vue
+++ b/src/components/TransactionTypePanel.vue
@@ -14,11 +14,11 @@
       <template v-if="transactionData.type === 'PayingForTx'">
         <copy-chip
           :label="transactionData.payerId"
-          class="transaction-type-panel__copy-chip"/>
+          class="u-hidden-mobile"/>
         <copy-chip
           :label="formatEllipseHash(transactionData.payerId)"
           :clipboard-text="transactionData.payerId"
-          class="transaction-type-panel__copy-chip-ellipse"/>
+          class="u-hidden-desktop"/>
         <app-chip variant="primary">
           {{ transactionData.tx.tx.type }}
         </app-chip>
@@ -102,20 +102,6 @@ watch(props.transactionData, () => {
     }
   }
 
-  &__copy-chip {
-    display: none;
-
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-
-  &__copy-chip-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__payer {
     word-wrap: anywhere;
     max-width: 100%;
diff --git a/src/components/TransactionTypeTableSpendTx.vue b/src/components/TransactionTypeTableSpendTx.vue
index 2607e82e3..a0f55988d 100644
--- a/src/components/TransactionTypeTableSpendTx.vue
+++ b/src/components/TransactionTypeTableSpendTx.vue
@@ -10,10 +10,10 @@
         </th>
         <td class="transaction-type-panel-spend-tx__data">
           <app-link :to="`/accounts/${transactionData.senderId}`">
-            <span class="transaction-type-panel-spend-tx__hash">
+            <span class="u-hidden-mobile">
               {{ transactionData.senderId }}
             </span>
-            <span class="transaction-type-panel-spend-tx__hash-ellipse">
+            <span class="u-hidden-desktop">
               {{ formatEllipseHash(transactionData.senderId) }}
             </span>
           </app-link>
@@ -30,10 +30,10 @@
           <app-link
             v-if="!transactionData.recipient"
             :to="`/accounts/${transactionData.recipientId}`">
-            <span class="transaction-type-panel-spend-tx__hash">
+            <span class="u-hidden-mobile">
               {{ transactionData.recipientId }}
             </span>
-            <span class="transaction-type-panel-spend-tx__hash-ellipse">
+            <span class="u-hidden-desktop">
               {{ formatEllipseHash(transactionData.recipientId) }}
             </span>
           </app-link>
@@ -111,19 +111,5 @@ defineProps({
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
-
-  &__hash {
-    display: none;
-
-    @media (--desktop) {
-      display: inline;
-    }
-  }
-
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/ValueHashEllipsed.vue b/src/components/ValueHashEllipsed.vue
index 31f45a07e..42216a33b 100644
--- a/src/components/ValueHashEllipsed.vue
+++ b/src/components/ValueHashEllipsed.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <span class="value-hash-ellipsed">
+    <span class="u-hidden-desktop">
       <app-link
         v-if="linkTo"
         :to="linkTo">
@@ -14,7 +14,7 @@
       </app-tooltip>
     </span>
 
-    <span class="value-hash-ellipsed--desktop">
+    <span class="u-hidden-mobile">
       <app-tooltip v-if="linkTo">
         <app-link :to="linkTo">
           {{ formatKnownAddress(hash) }}
@@ -45,19 +45,3 @@ defineProps({
   },
 })
 </script>
-
-<style scoped>
-.value-hash-ellipsed {
-  display: inline-flex;
-  @media (--desktop) {
-    display: none;
-  }
-
-  &--desktop {
-    display: none;
-    @media (--desktop) {
-      display: inline-flex;
-    }
-  }
-}
-</style>

From ea6a524ad0d4161b2959ddee92aa68d0389017d5 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 16 Nov 2023 18:00:15 +0100
Subject: [PATCH 5/8] remove unused import

---
 src/components/AccountDetailsPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index d8f3590e3..fc2065568 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -114,7 +114,7 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatEllipseHash, formatKnownAddress, formatNullable, formatNumber } from '@/utils/format'
+import { formatAePrice, formatKnownAddress, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 

From c71f7193198e80f2dc461b247a6d10100b2e5fd6 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 16 Nov 2023 18:32:30 +0100
Subject: [PATCH 6/8] fix condition

---
 src/components/AccountDetailsPanel.vue | 4 ++--
 src/utils/format.js                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index fc2065568..7b064db1a 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -9,11 +9,11 @@
       </app-chip>
 
       <copy-chip
-        :label="formatKnownAddress(accountDetails.id)"
+        :label="formatKnownAddress(accountDetails.id, false)"
         :clipboard-text="accountDetails.id"
         class="u-hidden-mobile"/>
       <copy-chip
-        :label="formatKnownAddress(accountDetails.id, true)"
+        :label="formatKnownAddress(accountDetails.id)"
         :clipboard-text="accountDetails.id"
         class="u-hidden-desktop"/>
     </template>
diff --git a/src/utils/format.js b/src/utils/format.js
index 2ed1018c2..7b0840e0e 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -131,7 +131,7 @@ export function formatIsAuction(name) {
   return name.length - suffixLength < auctionLength
 }
 
-export function formatKnownAddress(hash, isEllipsed = false) {
+export function formatKnownAddress(hash, isEllipsed = true) {
   if (KNOWN_ADDRESSES.some(address => address.hash === hash)) {
     return KNOWN_ADDRESSES.find(address => address.hash === hash).name
   } else if (isEllipsed) {

From aea27c436501dc23d6bba7c2a5f9847dab1b73e5 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 22 Nov 2023 13:27:01 +0100
Subject: [PATCH 7/8] remove translated address from account detail

---
 src/components/AccountDetailsPanel.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index 7b064db1a..3e0e90e58 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -9,11 +9,10 @@
       </app-chip>
 
       <copy-chip
-        :label="formatKnownAddress(accountDetails.id, false)"
-        :clipboard-text="accountDetails.id"
+        :label="accountDetails.id"
         class="u-hidden-mobile"/>
       <copy-chip
-        :label="formatKnownAddress(accountDetails.id)"
+        :label="formatEllipseHash(accountDetails.id)"
         :clipboard-text="accountDetails.id"
         class="u-hidden-desktop"/>
     </template>
@@ -114,7 +113,7 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatKnownAddress, formatNullable, formatNumber } from '@/utils/format'
+import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 

From a95540ab21f596290d4a2aa43aa22eff4644320e Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 22 Nov 2023 13:28:25 +0100
Subject: [PATCH 8/8] remove explicit packageManager

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e90ce964e..f144af159 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,5 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ],
-  "packageManager": "yarn@4.0.1"
+  ]
 }