From 2bda957fb2b08a7e6b9394752f3ce39f6bd6c847 Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Thu, 23 Nov 2023 12:13:29 +0100
Subject: [PATCH] feat: translate known addresses (#573)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
---
 package.json                                  |  3 +-
 src/components/AccountDetailsPanel.vue        | 20 ++----------
 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          | 32 ++++---------------
 src/utils/constants.js                        | 16 ++++++++++
 src/utils/format.js                           | 10 ++++++
 13 files changed, 70 insertions(+), 195 deletions(-)

diff --git a/package.json b/package.json
index 156cec73e..a666dbb37 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,5 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ],
-  "packageManager": "yarn@4.0.1"
+  ]
 }
diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index b52d87237..3e0e90e58 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -10,11 +10,11 @@
 
       <copy-chip
         :label="accountDetails.id"
-        class="account-details-panel__copy-chip"/>
+        class="u-hidden-mobile"/>
       <copy-chip
         :label="formatEllipseHash(accountDetails.id)"
         :clipboard-text="accountDetails.id"
-        class="account-details-panel__copy-chip-ellipse"/>
+        class="u-hidden-desktop"/>
     </template>
     <p
       v-if="accountDetails.notExistent"
@@ -113,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, formatEllipseHash, formatNullable, formatNumber } from '@/utils/format'
+import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 
@@ -161,20 +161,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/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 3dbb5e231..42216a33b 100644
--- a/src/components/ValueHashEllipsed.vue
+++ b/src/components/ValueHashEllipsed.vue
@@ -1,30 +1,30 @@
 <template>
   <span>
-    <span class="value-hash-ellipsed">
+    <span class="u-hidden-desktop">
       <app-link
         v-if="linkTo"
         :to="linkTo">
-        {{ formatEllipseHash(hash) }}
+        {{ formatKnownAddress(hash) }}
       </app-link>
       <app-tooltip v-else>
-        {{ formatEllipseHash(hash) }}
+        {{ formatKnownAddress(hash) }}
         <template #tooltip>
           {{ hash }}
         </template>
       </app-tooltip>
     </span>
 
-    <span class="value-hash-ellipsed--desktop">
+    <span class="u-hidden-mobile">
       <app-tooltip v-if="linkTo">
         <app-link :to="linkTo">
-          {{ formatEllipseHash(hash) }}
+          {{ formatKnownAddress(hash) }}
         </app-link>
         <template #tooltip>
           {{ hash }}
         </template>
       </app-tooltip>
       <app-tooltip v-else>
-        {{ formatEllipseHash(hash) }}
+        {{ formatKnownAddress(hash) }}
         <template #tooltip>
           {{ hash }}
         </template>
@@ -34,10 +34,6 @@
 </template>
 
 <script setup>
-import AppTooltip from '@/components/AppTooltip'
-import { formatEllipseHash } from '@/utils/format'
-import AppLink from '@/components/AppLink'
-
 defineProps({
   hash: {
     type: String,
@@ -49,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>
diff --git a/src/utils/constants.js b/src/utils/constants.js
index a9a70c401..a01a45571 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: 'Gate.io' },
+  { 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' },
+]
diff --git a/src/utils/format.js b/src/utils/format.js
index 7c44399d9..7b0840e0e 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 = true) {
+  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
+  }
+}