feat: hyperchains support

.env.example

@@ -1,33 +1,66 @@
-#MAINNET
-NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
-NUXT_PUBLIC_SENTRY_DSN=
+# ------ MAINNET ------
+
+# Required
 NUXT_PUBLIC_APP_DOMAIN=localhost:8080
 NUXT_PUBLIC_MIDDLEWARE_URL=https://mainnet.aeternity.io/mdw
 NUXT_PUBLIC_NODE_URL=https://mainnet.aeternity.io
 NUXT_PUBLIC_WEBSOCKET_URL=wss://mainnet.aeternity.io/mdw/v3/websocket
+NUXT_PUBLIC_NETWORK_ID=ae_mainnet
 NUXT_PUBLIC_NETWORK_NAME=MAINNET
+
+# Alternative Network
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME=TESTNET
-NUXT_PUBLIC_NETWORK_ID=ae_mainnet
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL=http://localhost:8081
+
+# DEX
 NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-mainnet.prd.service.aepps.com
 NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW;ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3'
+
+# Smart Contract Verification
 NUXT_PUBLIC_CONTRACT_VERIFICATION_SERVICE_URL=https://scv-gateway.dev.service.aepps.com
+
+# Market stats
+NUXT_PUBLIC_ENABLE_MARKET_STATS=true
+
+# Nodes
+NUXT_PUBLIC_NODES_BACKEND_URL=http://138.68.22.27:3113/v2/debug/network
+
+# Other
 NUXT_PUBLIC_AE_TOKEN_ID=ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa
 NUXT_PUBLIC_DEBUG_MODE=false
+NUXT_PUBLIC_PLAUSIBLE_URL=
+NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
+NUXT_PUBLIC_SENTRY_DSN=
 
+# ------ TESTNET ------
 
-#TESTNET
-#NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
-#NUXT_PUBLIC_SENTRY_DSN=
-#NUXT_PUBLIC_APP_DOMAIN="http://localhost:8080"
-#NUXT_PUBLIC_MIDDLEWARE_URL="https://testnet.aeternity.io/mdw"
-#NUXT_PUBLIC_NODE_URL="https://testnet.aeternity.io"
-#NUXT_PUBLIC_WEBSOCKET_URL="wss://testnet.aeternity.io/mdw/v3/websocket"
-#NUXT_PUBLIC_NETWORK_NAME="TESTNET"
-#NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME="MAINNET"
+# Required
+#NUXT_PUBLIC_APP_DOMAIN=localhost:8080
+#NUXT_PUBLIC_MIDDLEWARE_URL=https://testnet.aeternity.io/mdw
+#NUXT_PUBLIC_NODE_URL=https://testnet.aeternity.io
+#NUXT_PUBLIC_WEBSOCKET_URL=wss://testnet.aeternity.io/mdw/v3/websocket
+#NUXT_PUBLIC_NETWORK_NAME=TESTNET
 #NUXT_PUBLIC_NETWORK_ID="ae_uat"
-#NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL="http://localhost:8081"
+
+# Alternative network
+#NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME="MAINNET"
+
+# DEX
 #NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-testnet.prd.service.aepps.com
 #NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_NhbxN8wg8NLkGuzwRNDQhMDKSKBwDAQgxQawK7tkigi2aC7i9;ct_MLXQEP12MBn99HL6WDaiTqDbG4bJQ3Q9Bzr57oLfvEkghvpFb'
+
+# Smart Contract Verification
 #NUXT_PUBLIC_CONTRACT_VERIFICATION_SERVICE_URL="https://scv-gateway-testnet.dev.service.aepps.com"
-#NUXT_PUBLIC_AE_TOKEN_ID=ct_JDp175ruWd7mQggeHewSLS1PFXt9AzThCDaFedxon8mF8xTRF
+
+# Market stats
+#NUXT_PUBLIC_ENABLE_MARKET_STATS=true
+
+# Nodes
+#NUXT_PUBLIC_NODES_BACKEND_URL=http://138.68.22.27:3113/v2/debug/network
+
+# Other
+#NUXT_PUBLIC_AE_TOKEN_ID=
+#NUXT_PUBLIC_DEBUG_MODE=false
+#NUXT_PUBLIC_PLAUSIBLE_URL=
+#NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
+#NUXT_PUBLIC_SENTRY_DSN=

nuxt.config.ts

@@ -2,6 +2,13 @@ import fs from 'fs/promises'
 import { compileTemplate } from 'vue/compiler-sfc'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 
+const routesWithConditions = {
+  '/dex-trades': process.env.DEX_BACKEND_URL === 'true',
+  '/nodes': process.env.NODES_BACKEND_URL === 'true',
+  '/contract-verification/**': process.env.CONTRACT_VERIFICATION_SERVICE_URL === 'true',
+  '/tokens/AE': process.env.ENABLE_MARKET_STATS === 'true',
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   srcDir: './src',
@@ -12,7 +19,6 @@ export default defineNuxtConfig({
   nitro: {
     routeRules: {
       '/proxy/avatar/**': { proxy: 'https://avatars.z52da5wt.xyz/**', cors: true },
-      '/proxy/nodes': { proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true },
       '/proxy/gate': { proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true },
       '/proxy/mexc': { proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true },
       '/proxy/coinw': { proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true },
@@ -27,7 +33,7 @@ export default defineNuxtConfig({
     dirs: ['./stores'],
   },
   plausible: {
-    apiHost: 'https://plausible.dev.service.aepps.com',
+    apiHost: process.env.PLAUSIBLE_URL,
     trackLocalhost: false,
   },
   appConfig: {
@@ -50,9 +56,11 @@ export default defineNuxtConfig({
       DEBUG_MODE: process.env.DEBUG_MODE,
       CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
       SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
+      PLAUSIBLE_URL: process.env.PLAUSIBLE_URL,
+      ENABLE_MARKET_STATS: process.env.ENABLE_MARKET_STATS,
+      NODES_BACKEND_URL: process.env.NODES_BACKEND_URL,
     },
   },
-
   postcss: {
     plugins: {
       autoprefixer: {},
@@ -64,6 +72,12 @@ export default defineNuxtConfig({
       'postcss-nested': {},
     },
   },
+  routeRules: Object.fromEntries(
+    Object.entries(routesWithConditions).map(([route, isEnabled]) => [
+      route,
+      isEnabled ? {} : { redirect: '/' },
+    ]),
+  ),
   sourcemap: true,
   vite: {
     build: { target: 'es2020' },
@@ -106,7 +120,6 @@ export default defineNuxtConfig({
       }),
     ],
   },
-
   monacoEditor: {
     locale: 'en',
     componentName: {

src/app.vue

@@ -100,7 +100,7 @@ if (process.client) {
 useHead({
   titleTemplate: pageTitle =>
     pageTitle
-      ? `${pageTitle} ${route.params.id} | ${APP_TITLE_SHORT}`
+      ? `${pageTitle} ${route.params.id || ''} | ${APP_TITLE_SHORT}`
       : APP_TITLE,
 })
 

src/components/AccountActivityTypeCell.vue

@@ -6,10 +6,14 @@
 
 <script setup>
 import { useRuntimeConfig } from 'nuxt/app'
+import { storeToRefs } from 'pinia'
 import { ADD_LIQUIDITY_CONTRACT_CALLS, REMOVE_LIQUIDITY_CONTRACT_CALLS, SWAP_CONTRACT_CALLS } from '@/utils/constants'
+import { useAppStore } from '@/stores/app'
 
 const { SH_DEX_CONTRACTS } = useRuntimeConfig().public
 
+const { currency } = storeToRefs(useAppStore())
+
 const props = defineProps({
   accountDetails: {
     type: Object,
@@ -26,7 +30,7 @@ const tx = computed(() => props.activity.payload?.tx)
 const activityType = computed(() => {
   switch (props.activity.type) {
   case 'SpendTxEvent':
-    return 'AE'
+    return currency.value.symbol
   case 'NamePreclaimTxEvent':
   case 'NameClaimTxEvent':
   case 'NameTransferTxEvent':
@@ -66,7 +70,7 @@ const activityType = computed(() => {
     return 'Wrapped Transaction'
   case 'InternalTransferEvent':
     if (props.activity.payload.kind === 'reward_block') {
-      return 'AE'
+      return currency.value.symbol
     } else if (
       SH_DEX_CONTRACTS.includes(props.activity.payload.contractId)) {
       return 'SH-DEX'

src/components/AppHero.vue

@@ -14,7 +14,9 @@
           <the-search-bar class="hero__search-bar"/>
         </div>
       </div>
-      <market-stats class="hero__market-stats"/>
+      <market-stats
+        v-if="featureFlags.marketStats"
+        class="hero__market-stats"/>
       <stats-panel/>
     </div>
   </div>
@@ -24,6 +26,9 @@
 import TheSearchBar from '@/components/TheSearchBar'
 import StatsPanel from '@/components/StatsPanel'
 import MarketStats from '@/components/MarketStats'
+import useFeatureFlags from '@/composables/useFeatureFlags'
+
+const featureFlags = useFeatureFlags()
 </script>
 
 <style scoped>

src/components/DashboardAuctionsPanel.vue

@@ -22,7 +22,7 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import AppPanel from '@/components/AppPanel'
-import { useNamesStore } from '~/stores/names'
+import { useNamesStore } from '@/stores/names'
 
 const { auctionsEndingSoon } = storeToRefs(useNamesStore())
 

src/components/DashboardMicroblocksPanel.vue

@@ -9,8 +9,11 @@
         <template #tooltip>
           {{ microblocksHints.microblock }}
         </template>
-        <template #header>
-          <div class="dashboard-microblocks-panel__summary dashboard-microblocks-panel__summary--desktop">
+        <template
+          v-if="selectedMicroblockTransactionsCount > 0"
+          #header>
+          <div
+            class="dashboard-microblocks-panel__summary dashboard-microblocks-panel__summary--desktop">
             Transactions in this microblock:
             <span class="dashboard-microblocks-panel__count">
               {{ selectedMicroblockTransactionsCount }}
@@ -26,12 +29,12 @@
         </span>
       </div>
     </div>
-
     <microblocks-sequence
-      v-if="selectedKeyblockMicroblocks"
+      v-if="selectedKeyblockMicroblocks.length > 0"
       class="dashboard-microblocks-panel__microblock-sequence"
       :microblocks="selectedKeyblockMicroblocks"/>
-    <dashboard-transaction-panel/>
+    <dashboard-transaction-panel v-if="selectedKeyblockMicroblocks.length > 0"/>
+    <blank-state v-else/>
   </app-panel>
 </template>
 
@@ -43,9 +46,8 @@ import DashboardTransactionPanel from '@/components/DashboardTransactionPanel'
 import MicroblocksSequence from '@/components/MicroblocksSequence'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 
-const { selectedKeyblockMicroblocks, selectedMicroblockTransactionsCount } = storeToRefs(
-  useRecentBlocksStore(),
-)
+const { selectedKeyblockMicroblocks, selectedMicroblockTransactionsCount } =
+  storeToRefs(useRecentBlocksStore())
 </script>
 
 <style scoped>

src/components/DashboardNamesPanel.vue

@@ -10,13 +10,20 @@
         through an expired auction (name length <= 12).
       </template>
     </dashboard-panel-header>
-    <dashboard-names-table class="u-hidden-mobile"/>
-    <dashboard-names-swiper class="u-hidden-desktop"/>
+    <template v-if="!!recentlyActivatedNames.length">
+      <dashboard-names-table class="u-hidden-mobile"/>
+      <dashboard-names-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 { recentlyActivatedNames } = storeToRefs(useNamesStore())
 </script>
 
 <style scoped>

src/components/DashboardStateChannelsPanel.vue

@@ -9,13 +9,21 @@
         {{ stateChannelsHints.stateChannel }}
       </template>
     </dashboard-panel-header>
-    <dashboard-state-channels-table class="u-hidden-mobile"/>
-    <dashboard-state-channels-swiper class="u-hidden-desktop"/>
+    <template v-if="!!stateChannels.length">
+      <dashboard-state-channels-table class="u-hidden-mobile"/>
+      <dashboard-state-channels-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 { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
+import { useDashboardStateChannelsStore } from '@/stores/dashboardStateChannels'
+
+const { stateChannels } = storeToRefs(useDashboardStateChannelsStore())
 </script>
 
 <style scoped>

src/components/MenuItem.vue

@@ -10,7 +10,7 @@
       v-show="menu.isActive"
       class="menu-item__list">
       <li
-        v-for="submenu in menu.submenu"
+        v-for="submenu in visibleSubmenus"
         :key="submenu.name">
         <app-link
           v-if="!submenu.isDisabled"
@@ -36,12 +36,14 @@
 </template>
 
 <script setup>
-defineProps({
+const props = defineProps({
   menu: {
     type: Object,
     required: true,
   },
 })
+
+const visibleSubmenus = computed(() => props.menu.submenu.filter(submenu => !submenu.hidden))
 </script>
 
 <style scoped>

src/components/NetworkSelect.vue

@@ -42,6 +42,6 @@ const navigate = selectedOption => window.location.replace(selectedOption.url)
 
 <style scoped>
 .network-select {
-  width: 110px;
+  width: auto;
 }
 </style>

src/components/PriceLabel.vue

@@ -41,9 +41,13 @@
 
 <script setup>
 import { useRuntimeConfig } from 'nuxt/app'
+import { storeToRefs } from 'pinia'
 import { formatNullable } from '@/utils/format'
+import { useAppStore } from '@/stores/app'
 import AppTooltip from '@/components/AppTooltip'
 
+const { currency: defaultCurrency } = storeToRefs(useAppStore())
+
 const props = defineProps({
   price: {
     type: [String, Number],
@@ -55,11 +59,11 @@ const props = defineProps({
   },
   currency: {
     type: String,
-    default: 'AE',
+    default: null,
   },
   hasIcon: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   hasLink: {
     type: Boolean,
@@ -80,6 +84,10 @@ const priceRounded = computed(() =>
 const price = computed(() =>
   formatNullable(formatAePrice(props.price, null)),
 )
+
+const currency = computed(() =>
+  props.currency || defaultCurrency.value.symbol,
+)
 </script>
 
 <style scoped>

src/components/StatsPanel.vue

@@ -231,7 +231,7 @@ const {
 } = storeToRefs(useRecentBlocksStore())
 
 const isLoading = computed(() => {
-  return !(transactionsCount.value && latestReward.value)
+  return transactionsCount.value === null || latestReward.value === null
 })
 
 </script>