feat: Reuse PanelHeader in AppPanel (#502)

src/components/AuctionsPanel.vue → src/components/DashboardAuctionsPanel.vue

@@ -1,6 +1,6 @@
 <template>
-  <app-panel class="auctions-panel">
-    <panel-header
+  <app-panel class="dashboard-auctions-panel">
+    <dashboard-panel-header
       level="h3"
       title="AUCTIONS ENDING SOON"
       icon-name="aens-name"
@@ -10,21 +10,18 @@
         an auction is automatically triggered. The auction duration is currently dependent on the length of the
         name. The shorter the name, the longer the auction lives.
       </template>
-    </panel-header>
-    <auctions-table class="auctions-panel__table"/>
-    <auctions-swiper class="auctions-panel__swiper"/>
+    </dashboard-panel-header>
+    <dashboard-auctions-table class="dashboard-auctions-panel__table"/>
+    <dashboard-auctions-swiper class="dashboard-auctions-panel__swiper"/>
   </app-panel>
 </template>
 
 <script setup>
 import AppPanel from '@/components/AppPanel'
-import PanelHeader from '@/components/PanelHeader'
-import AuctionsSwiper from '@/components/AuctionsSwiper'
-import AuctionsTable from '@/components/AuctionsTable'
 </script>
 
 <style scoped>
-.auctions-panel {
+.dashboard-auctions-panel {
   padding: var(--space-3) var(--space-1);
   @media (--desktop) {
     padding: var(--space-4);

src/components/AuctionsSwiper.vue → src/components/DashboardAuctionsSwiper.vue

@@ -4,47 +4,47 @@
       <table>
         <tbody>
           <tr>
-            <th class="auctions-swiper__header">
+            <th class="dashboard-auctions-swiper__header">
               <app-tooltip>
                 Name
                 <template #tooltip>
                   {{ namesHints.name }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="auctions-swiper__data">
+            <td class="dashboard-auctions-swiper__data">
               <app-link
                 :to="`/names/${auction.name}`"
-                class="auctions-swiper__name u-ellipsis">
+                class="dashboard-auctions-swiper__name u-ellipsis">
                 {{ auction.name }}
               </app-link>
             </td>
           </tr>
           <tr>
-            <th class="auctions-swiper__header">
+            <th class="dashboard-auctions-swiper__header">
               <app-tooltip>
                 Highest Bidder
                 <template #tooltip>
                   {{ namesHints.bidder }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="auctions-swiper__data">
+            <td class="dashboard-auctions-swiper__data">
               <value-hash-ellipsed
                 :hash="auction.highestBidder"
                 :link-to="`/accounts/${auction.highestBidder}`"/>
             </td>
           </tr>
           <tr>
-            <th class="auctions-swiper__header">
+            <th class="dashboard-auctions-swiper__header">
               <app-tooltip>
                 Bid
                 <template #tooltip>
                   {{ namesHints.bid }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="auctions-swiper__data">
+            <td class="dashboard-auctions-swiper__data">
               {{ formatAePrice(auction.bid) }}
             </td>
           </tr>
@@ -57,7 +57,7 @@
                 </template>
               </app-tooltip>
             </th>
-            <td class="auctions-swiper__data">
+            <td class="dashboard-auctions-swiper__data">
               <app-link
                 :to="`/keyblocks/${auction.expirationHeight}`">
                 {{ auction.expirationHeight }}
@@ -86,7 +86,7 @@ const { auctionsEndingSoon } = storeToRefs(useNamesStore())
 </script>
 
 <style scoped>
-.auctions-swiper {
+.dashboard-auctions-swiper {
   &__header {
     border-bottom: 1px solid var(--color-midnight-25);
   }

src/components/AuctionsTable.vue → src/components/DashboardAuctionsTable.vue

@@ -28,27 +28,27 @@
         :key="auction.name">
         <td>
           <div>
-            <span class="auctions-table__label">Name:</span>
+            <span class="dashboard-auctions-table__label">Name:</span>
             <app-link
               :to="`/names/${auction.name}`"
-              class="auctions-table__chain-name u-ellipsis">
+              class="dashboard-auctions-table__chain-name u-ellipsis">
               {{ auction.name }}
             </app-link>
           </div>
           <div>
-            <span class="auctions-table__label">Highest Bidder: </span>
+            <span class="dashboard-auctions-table__label">Highest Bidder: </span>
             <value-hash-ellipsed
               :link-to="`/accounts/${auction.highestBidder}`"
               :hash="auction.highestBidder"/>
           </div>
         </td>
         <td>
-          <div class="auctions-table__value">
+          <div class="dashboard-auctions-table__value">
             {{ formatAePrice(auction.bid) }}
           </div>
         </td>
         <td>
-          <div class="auctions-table__blocks">
+          <div class="dashboard-auctions-table__blocks">
             <app-link
               :to="`/keyblocks/${auction.expirationHeight}`">
               {{ auction.expirationHeight }}
@@ -75,7 +75,7 @@ const { auctionsEndingSoon } = storeToRefs(useNamesStore())
 </script>
 
 <style scoped>
-.auctions-table {
+.dashboard-auctions-table {
   &__chain-name {
     display: inline-block;
     width: 160px;

src/components/BlockchainPanel.vue → src/components/DashboardKeyblockPanel.vue

@@ -1,57 +1,57 @@
 <template>
-  <app-panel class="blockchain-panel">
-    <div class="blockchain-panel__container">
-      <panel-header
+  <app-panel class="dashboard-keyblock-panel">
+    <div class="dashboard-keyblock-panel__container">
+      <dashboard-panel-header
         level="h3"
-        class="blockchain-panel__panel-header"
+        class="dashboard-keyblock-panel__dashboard-panel-header"
         title="KEYBLOCKS"
         icon-name="latest-keyblock">
         <template #header>
-          <div class="blockchain-panel__summary blockchain-panel__summary--desktop">
+          <div class="dashboard-keyblock-panel__summary dashboard-keyblock-panel__summary--desktop">
             Microblocks in selected keyblock:
-            <span class="blockchain-panel__count">
+            <span class="dashboard-keyblock-panel__count">
               {{ selectedKeyblock?.microBlocksCount }}
             </span>
           </div>
-          <div class="blockchain-panel__summary blockchain-panel__summary--desktop">
+          <div class="dashboard-keyblock-panel__summary dashboard-keyblock-panel__summary--desktop">
             Total transactions in selected keyblock:
-            <span class="blockchain-panel__count">
+            <span class="dashboard-keyblock-panel__count">
               {{ selectedKeyblockTransactionsCount }}
             </span>
           </div>
         </template>
         <template #tooltip>
           {{ keyblocksHints.keyblock }}
         </template>
-      </panel-header>
+      </dashboard-panel-header>
 
       <keyblock-sequence
         v-if="keyblocks"
-        class="blockchain-panel__keyblock-sequence"
+        class="dashboard-keyblock-panel__keyblock-sequence"
         :keyblocks="keyblocks"/>
 
-      <div class="blockchain-panel__summary">
+      <div class="dashboard-keyblock-panel__summary">
         Microblocks in selected keyblock:
-        <span class="blockchain-panel__count">
+        <span class="dashboard-keyblock-panel__count">
           {{ selectedKeyblock?.microBlocksCount }}
         </span>
       </div>
-      <div class="blockchain-panel__summary">
+      <div class="dashboard-keyblock-panel__summary">
         Transactions in this microblock:
-        <span class="blockchain-panel__count">
+        <span class="dashboard-keyblock-panel__count">
           {{ selectedKeyblockTransactionsCount }}
         </span>
       </div>
 
       <keyblock-table
         v-if="selectedKeyblock"
-        class="blockchain-panel__keyblock-table"
+        class="dashboard-keyblock-panel__keyblock-table"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
 
       <keyblock-table-condensed
         v-if="selectedKeyblock"
-        class="blockchain-panel__keyblock-table-condensed"
+        class="dashboard-keyblock-panel__keyblock-table-condensed"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
     </div>
@@ -66,7 +66,6 @@ import AppPanel from '@/components/AppPanel'
 import KeyblockTableCondensed from '@/components/KeyblockTableCondensed'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 import KeyblockTable from '@/components/KeyblockTable'
-import PanelHeader from '@/components/PanelHeader'
 import KeyblockSequence from '@/components/KeyblockSequence'
 import DashboardMicroblocksPanel from '@/components/DashboardMicroblocksPanel'
 
@@ -79,7 +78,7 @@ const {
 </script>
 
 <style scoped>
-.blockchain-panel {
+.dashboard-keyblock-panel {
   width: 100%;
 
   &__container {
@@ -88,7 +87,7 @@ const {
     }
   }
 
-  &__panel-header {
+  &__dashboard-panel-header {
     margin-bottom: var(--space-2);
     @media (--desktop) {
       margin-bottom: var(--space-4);

src/components/DashboardMicroblocksPanel.vue

@@ -1,9 +1,9 @@
 <template>
   <app-panel class="dashboard-microblocks-panel">
     <div class="dashboard-microblocks-panel__container">
-      <panel-header
+      <dashboard-panel-header
         level="h4"
-        class="dashboard-microblocks-panel__panel-header"
+        class="dashboard-microblocks-panel__dashboard-panel-header"
         title="MICROBLOCKS"
         icon-name="microblocks">
         <template #tooltip>
@@ -17,7 +17,7 @@
             </span>
           </div>
         </template>
-      </panel-header>
+      </dashboard-panel-header>
 
       <div class="dashboard-microblocks-panel__summary">
         Transactions in this microblock:
@@ -41,7 +41,6 @@ import { microblocksHints } from '@/utils/hints/microblocksHints'
 import AppPanel from '@/components/AppPanel'
 import DashboardTransactionPanel from '@/components/DashboardTransactionPanel'
 import MicroblocksSequence from '@/components/MicroblocksSequence'
-import PanelHeader from '@/components/PanelHeader'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 
 const { selectedKeyblockMicroblocks, selectedMicroblockTransactionsCount } = storeToRefs(
@@ -58,7 +57,7 @@ const { selectedKeyblockMicroblocks, selectedMicroblockTransactionsCount } = sto
     padding: var(--space-3) var(--space-3) var(--space-3);
   }
 
-  &__panel-header {
+  &__dashboard-panel-header {
     margin-bottom: var(--space-2);
     @media (--desktop) {
       margin-bottom: var(--space-3);

src/components/NamesPanel.vue → src/components/DashboardNamesPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <app-panel class="names-panel">
-    <panel-header
+    <dashboard-panel-header
       level="h3"
       title="NAMES RECENTLY ACTIVATED"
       icon-name="aens-name"
@@ -9,22 +9,18 @@
         These ÆNS names have recently been activated directly by a claim (name length > 12) or implicitly
         through an expired auction (name length &lt;= 12).
       </template>
-    </panel-header>
-    <names-table class="names-panel__table"/>
-    <names-swiper class="names-panel__swiper"/>
+    </dashboard-panel-header>
+    <dashboard-names-table class="dashboard-names-panel__table"/>
+    <dashboard-names-swiper class="dashboard-names-panel__swiper"/>
   </app-panel>
 </template>
 
 <script setup>
 import AppPanel from '@/components/AppPanel'
-
-import PanelHeader from '@/components/PanelHeader'
-import NamesSwiper from '@/components/NamesSwiper'
-import NamesTable from '@/components/NamesTable'
 </script>
 
 <style scoped>
-.names-panel {
+.dashboard-names-panel {
   padding: var(--space-3) var(--space-1);
   @media (--desktop) {
     padding: var(--space-4);

src/components/NamesSwiper.vue → src/components/DashboardNamesSwiper.vue

@@ -4,47 +4,47 @@
       <table>
         <tbody>
           <tr>
-            <th class="names-swiper__header">
+            <th class="dashboard-names-swiper__header">
               <app-tooltip>
                 Name
                 <template #tooltip>
                   {{ namesHints.name }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="names-swiper__data">
+            <td class="dashboard-names-swiper__data">
               <app-link
                 :to="`/names/${name.name}`"
-                class="names-swiper__name u-ellipsis">
+                class="dashboard-names-swiper__name u-ellipsis">
                 {{ name.name }}
               </app-link>
             </td>
           </tr>
           <tr>
-            <th class="names-swiper__header">
+            <th class="dashboard-names-swiper__header">
               <app-tooltip>
                 Claimed by
                 <template #tooltip>
                   {{ namesHints.owner }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="names-swiper__data">
+            <td class="dashboard-names-swiper__data">
               <value-hash-ellipsed
                 :link-to="`/accounts/${name.address}`"
                 :hash="name.address"/>
             </td>
           </tr>
           <tr>
-            <th class="names-swiper__header">
+            <th class="dashboard-names-swiper__header">
               <app-tooltip>
                 Price
                 <template #tooltip>
                   {{ namesHints.activationPrice }}
                 </template>
               </app-tooltip>
             </th>
-            <td class="names-swiper__data">
+            <td class="dashboard-names-swiper__data">
               {{ formatNullable(formatAePrice(name.price)) }}
             </td>
           </tr>
@@ -57,7 +57,7 @@
                 </template>
               </app-tooltip>
             </th>
-            <td class="names-swiper__data">
+            <td class="dashboard-names-swiper__data">
               <app-link
                 :to="`/keyblocks/${name.activatedHeight}`">
                 {{ name.activatedHeight }}
@@ -85,7 +85,7 @@ const { recentlyActivatedNames } = storeToRefs(useNamesStore())
 </script>
 
 <style scoped>
-.names-swiper {
+.dashboard-names-swiper {
   &__header {
     border-bottom: 1px solid var(--color-midnight-25);
   }