feat: translate known addresses (#573)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · Nov 23, 2023 · 2bda957 · 2bda957
1 parent fee89cc
commit 2bda957
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 195 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>