fix: UI fixes

.github/workflows/stg-pipeline-mainnet.yml

@@ -135,7 +135,10 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          msg: Deployed to https://pr-${{ env.PR_NUMBER }}-aescan.${{ env.ENV }}.service.aepps.com and https://pr-${{ env.PR_NUMBER }}-aescan-testnet.${{ env.ENV }}.service.aepps.com
+          msg: |
+            ## 🧪 Preview Links 🔎️
+            Mainnet: https://pr-${{ env.PR_NUMBER }}-aescan.${{ env.ENV }}.service.aepps.com
+            Testnet: https://pr-${{ env.PR_NUMBER }}-aescan-testnet.${{ env.ENV }}.service.aepps.com
           check_for_duplicate_msg: true
 
       - name: Push changes

.github/workflows/stg-pipeline-testnet.yml

@@ -132,7 +132,10 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          msg: Deployed to https://pr-${{ env.PR_NUMBER }}-aescan.${{ env.ENV }}.service.aepps.com and https://pr-${{ env.PR_NUMBER }}-aescan-testnet.${{ env.ENV }}.service.aepps.com
+          msg: |
+            ## 🧪️ Preview Links 🔎️
+            Mainnet: https://pr-${{ env.PR_NUMBER }}-aescan.${{ env.ENV }}.service.aepps.com
+            Testnet: https://pr-${{ env.PR_NUMBER }}-aescan-testnet.${{ env.ENV }}.service.aepps.com
           check_for_duplicate_msg: true
 
       - name: Push changes

cypress.config.ts

@@ -26,5 +26,5 @@ export default defineConfig({
   },
   viewportWidth: 1280,
   viewportHeight: 720,
-  defaultCommandTimeout: 120000,
+  defaultCommandTimeout: 180000,
 })

cypress/e2e/app/homepage.cy.js

@@ -5,6 +5,7 @@ describe('homepage', () => {
     cy.get('.stats-panel').should('be.visible')
     cy.get('.dashboard-state-channels-panel table').should('be.visible')
     cy.get('.dashboard-auctions-panel')
+
       .should('satisfy', elements => {
         return Array.from(elements[0].childNodes).some(element => {
           if (element.localName === 'table' || element.className === 'blank-state') {

nuxt.config.ts

@@ -22,7 +22,6 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@nuxtjs/plausible',
     'nuxt-monaco-editor',
-    'nuxt-booster',
   ],
   imports: {
     dirs: ['./stores'],

package.json

@@ -21,7 +21,7 @@
     "lint": "yarn lint:js && yarn lint:style",
     "lint:ci": "yarn lint:js --max-warnings=0 && yarn lint:style --mw 0",
     "lint:fix": "yarn lint:js --fix && yarn lint:style --fix",
-    "lint:js": "eslint",
+    "lint:js": "eslint --ext .ts,.js,.vue src",
     "lint:style": "stylelint \"./src/**/*.vue\" \"src/**/*.css\"",
     "reinstall": "rm -rf node_modules/ && yarn cache clean && yarn install",
     "reset": "yarn reinstall && yarn dev",
@@ -46,7 +46,6 @@
     "floating-vue": "^5.2.2",
     "luxon": "^3.4.4",
     "memory-cache": "^0.2.0",
-    "nuxt-booster": "^3.0.16",
     "pinia": "^2.1.7",
     "swiper": "^11.1.5",
     "vue": "^3.4.31",
@@ -61,7 +60,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
-    "cypress": "^13.13.0",
+    "cypress": "^13.14.2",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",

src/assets/styles/elements/_table.css

@@ -51,6 +51,15 @@ td:last-of-type {
 
 tr:last-of-type td {
   border-bottom: 0;
-  padding-bottom: 0;
 }
 
+tbody tr:hover td {
+  background: var(--color-snow);
+}
+
+tbody tr:hover th {
+  background: var(--color-snow);
+}
+
+
+

src/components/AccountDetailsPanel.vue

@@ -166,7 +166,7 @@ const accountNodeUrl = computed(() =>
 const sanitizedPrice = computed(() =>
   price.value
     ? `$${formatNumber(props.accountDetails.balance * price.value, 2, 2)}`
-    : '---',
+    : 'N/A',
 )
 </script>
 

src/components/AeCoinPanel.vue

@@ -14,7 +14,7 @@
               <img
                 class="ae-coin-panel__icon"
                 alt="æ token"
-                src="@/assets/ae-token.svg">
+                src="@/assets/ae-logo.svg">
               <copy-chip label="AE"/>
             </div>
           </td>

src/components/AppTabs.vue

@@ -80,7 +80,7 @@ function selectTab(tabIndex) {
     line-height: 22px;
     cursor: pointer;
     padding: var(--space-1);
-    background: var(--color-midnight-15);
+    background: #dededeA5;
     color: var(--color-midnight-55);
     border-radius: 4px 4px 0 0;
     letter-spacing: 0.003em;

src/components/DashboardAuctionsPanel.vue

@@ -11,13 +11,21 @@
         name. The shorter the name, the longer the auction lives.
       </template>
     </dashboard-panel-header>
-    <dashboard-auctions-table class="u-hidden-mobile"/>
-    <dashboard-auctions-swiper class="u-hidden-desktop"/>
+    <template v-if="!!auctionsEndingSoon.length">
+      <dashboard-auctions-table class="u-hidden-mobile"/>
+      <dashboard-auctions-swiper class="u-hidden-desktop"/>
+    </template>
+    <blank-state v-else/>
   </app-panel>
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
 import AppPanel from '@/components/AppPanel'
+import { useNamesStore } from '~/stores/names'
+
+const { auctionsEndingSoon } = storeToRefs(useNamesStore())
+
 </script>
 
 <style scoped>

src/components/DashboardKeyblockTable.vue

@@ -62,23 +62,13 @@
         <td class="dashboard-keyblock-table__data">
           <timestamp-label :timestamp="keyblock.mined"/>
         </td>
-        <th class="dashboard-keyblock-table__column-end">
-          BRI Reward
-          <hint-tooltip class="dashboard-keyblock-table__tooltip">
-            {{ keyblocksHints.briReward }}
-          </hint-tooltip>
-        </th>
-        <td class="dashboard-keyblock-table__data">
-          <price-label :price="formatNullable(stats?.devReward, null)"/>
-        </td>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script setup>
 import { keyblocksHints } from '@/utils/hints/keyblocksHints'
-import { formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import HintTooltip from '@/components/HintTooltip'
 

src/components/DashboardKeyblockTableCondensed.vue

@@ -64,24 +64,12 @@
           <price-label :price="stats?.blockReward"/>
         </td>
       </tr>
-      <tr class="dashboard-keyblock-table-condensed__row">
-        <th class="dashboard-keyblock-table-condensed__header">
-          BRI Reward
-          <hint-tooltip class="dashboard-keyblock-table-condensed__tooltip">
-            {{ keyblocksHints.briReward }}
-          </hint-tooltip>
-        </th>
-        <td class="dashboard-keyblock-table-condensed__data">
-          <price-label :price="formatNullable(stats?.devReward, null)"/>
-        </td>
-      </tr>
     </tbody>
   </table>
 </template>
 
 <script setup>
 import { keyblocksHints } from '@/utils/hints/keyblocksHints'
-import { formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 defineProps({

src/components/DashboardStateChannelsPanel.vue

@@ -2,7 +2,7 @@
   <app-panel class="dashboard-state-channels-panel">
     <dashboard-panel-header
       level="h3"
-      title="STATE CHANNELS"
+      title="LATEST ACTIVE STATE CHANNELS"
       icon-name="state-channel"
       show-all-link="/state-channels">
       <template #tooltip>

src/components/DexTradesPanel.vue

@@ -20,7 +20,7 @@ import { useDexTradesStore } from '@/stores/dexTrades'
 const dexTradesStore = useDexTradesStore()
 const { trades } = storeToRefs(dexTradesStore)
 const { fetchDexTrades } = dexTradesStore
-await useAsyncData(async () => {
+await useAsyncData(async() => {
   await fetchDexTrades()
   return true
 })

src/components/DexTradesTable.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script setup>
-import { dexTradesHints } from "@/utils/hints/dexTradesHints";
+import { dexTradesHints } from '@/utils/hints/dexTradesHints'
 
 defineProps({
   trades: {