feat: hyperchains support (#1003)

.env.example

@@ -1,33 +1,62 @@
-#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
+
+# Feature flags
+NUXT_PUBLIC_ENABLE_MARKET_STATS=true
+NUXT_PUBLIC_ENABLE_NODES=true
+
+# 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
+
+# Feature flags
+#NUXT_PUBLIC_ENABLE_MARKET_STATS=true
+#NUXT_PUBLIC_ENABLE_NODES=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

@@ -27,7 +27,7 @@ export default defineNuxtConfig({
     dirs: ['./stores'],
   },
   plausible: {
-    apiHost: 'https://plausible.dev.service.aepps.com',
+    apiHost: process.env.PLAUSIBLE_URL,
     trackLocalhost: false,
   },
   appConfig: {
@@ -50,9 +50,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,
+      ENABLE_NODES: process.env.ENABLE_NODES,
     },
   },
-
   postcss: {
     plugins: {
       autoprefixer: {},
@@ -106,7 +108,6 @@ export default defineNuxtConfig({
       }),
     ],
   },
-
   monacoEditor: {
     locale: 'en',
     componentName: {

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 { useConfigStore } from '@/stores/config'
 
 const { SH_DEX_CONTRACTS } = useRuntimeConfig().public
 
+const { currency } = storeToRefs(useConfigStore())
+
 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

@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-defineProps({
+const props = defineProps({
   menu: {
     type: Object,
     required: true,

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,7 +41,9 @@
 
 <script setup>
 import { useRuntimeConfig } from 'nuxt/app'
+import { storeToRefs } from 'pinia'
 import { formatNullable } from '@/utils/format'
+import { useConfigStore } from '@/stores/config'
 import AppTooltip from '@/components/AppTooltip'
 
 const props = defineProps({
@@ -55,7 +57,7 @@ const props = defineProps({
   },
   currency: {
     type: String,
-    default: 'AE',
+    default: () => storeToRefs(useConfigStore()).currency.value.symbol,
   },
   hasIcon: {
     type: Boolean,

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>

src/components/TheNavigation.vue

@@ -2,7 +2,7 @@
   <nav class="navigation">
     <ul class="navigation__list">
       <li
-        v-for="menu in menuOptions"
+        v-for="menu in menuOptionsWithSubmenus"
         :key="menu.name"
         class="navigation__item"
         @click="toggle(menu.name)"
@@ -16,6 +16,9 @@
 
 <script setup>
 import { isDesktop } from '@/utils/screen'
+import useFeatureFlags from '@/composables/useFeatureFlags'
+
+const featureFlags = useFeatureFlags()
 
 const menuOptions = ref([{
   name: 'Blockchain',
@@ -44,6 +47,7 @@ const menuOptions = ref([{
     {
       name: 'Nodes',
       path: '/nodes',
+      hidden: !featureFlags.nodes,
     },
     {
       name: 'Oracles',
@@ -53,11 +57,6 @@ const menuOptions = ref([{
       name: 'State Channels',
       path: '/state-channels',
     },
-    {
-      name: 'Hyperchains',
-      path: '/hyperchains',
-      isDisabled: true,
-    },
   ],
 },
 {
@@ -67,6 +66,7 @@ const menuOptions = ref([{
     {
       name: 'AE Coin',
       path: '/tokens/AE',
+      hidden: !featureFlags.marketStats,
     },
     {
       name: 'AEX9 Tokens',
@@ -79,6 +79,7 @@ const menuOptions = ref([{
     {
       name: 'DEX Trades',
       path: '/dex-trades',
+      hidden: !featureFlags.dex,
     },
   ],
 },
@@ -89,6 +90,7 @@ const menuOptions = ref([{
     {
       name: 'Smart Contract Verification',
       path: '/contract-verification',
+      hidden: !featureFlags.smartContractVerification,
     },
   ],
 },
@@ -127,6 +129,15 @@ const menuOptions = ref([{
   ],
 }])
 
+const menuOptionsWithSubmenus = computed(() =>
+  menuOptions.value
+    .map(menuOption => ({
+      ...menuOption,
+      submenu: menuOption.submenu.filter(submenu => !submenu.hidden),
+    }))
+    .filter(menuOption => menuOption.submenu.length > 0),
+)
+
 function open(name) {
   menuOptions.value.find(item => item.name === name).isActive = true
 }