diff --git a/src/components/ChartsNavigation.vue b/src/components/ChartsNavigation.vue
index 91bb00217..eb09adfac 100644
--- a/src/components/ChartsNavigation.vue
+++ b/src/components/ChartsNavigation.vue
@@ -16,6 +16,11 @@
class="charts-navigation__link">
Smart Contracts
+
+ Names
+
diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
index a2703d5c4..830e8f1a7 100644
--- a/src/components/ContractsChartPanel.vue
+++ b/src/components/ContractsChartPanel.vue
@@ -44,9 +44,11 @@ await useAsyncData(async() => {
return true
})
-watch(selectedRange, async() => {
- await loadContractsStatistics()
-})
+if (process.client) {
+ watch(selectedRange, async() => {
+ await loadContractsStatistics()
+ })
+}
async function loadContractsStatistics() {
await fetchContractsStatistics(
diff --git a/src/components/KeyblocksChartPanel.vue b/src/components/KeyblocksChartPanel.vue
index 176788325..e3e5e4b2e 100644
--- a/src/components/KeyblocksChartPanel.vue
+++ b/src/components/KeyblocksChartPanel.vue
@@ -35,9 +35,11 @@ await useAsyncData(async() => {
return true
})
-watch(selectedRange, async() => {
- await loadKeyblockStatistics()
-})
+if (process.client) {
+ watch(selectedRange, async() => {
+ await loadKeyblockStatistics()
+ })
+}
async function loadKeyblockStatistics() {
await fetchKeyblocksStatistics(
diff --git a/src/components/NamesChartPanel.vue b/src/components/NamesChartPanel.vue
index 9b9a463d2..2f952a2ea 100644
--- a/src/components/NamesChartPanel.vue
+++ b/src/components/NamesChartPanel.vue
@@ -22,14 +22,21 @@
diff --git a/src/pages/names/index.vue b/src/pages/names/index.vue
index c6261acc8..0a5cf45f9 100644
--- a/src/pages/names/index.vue
+++ b/src/pages/names/index.vue
@@ -15,7 +15,9 @@
-
+
@@ -42,6 +44,7 @@ import { useNamesStore } from '@/stores/names'
import PageHeader from '@/components/PageHeader'
import { namesHints } from '@/utils/hints/namesHints'
import { isDesktop } from '@/utils/screen'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
const TAB_KEYS = ['active', 'in-auction', 'expired']
diff --git a/src/stores/charts.js b/src/stores/charts.js
index 6e984a3cb..22d80ce05 100644
--- a/src/stores/charts.js
+++ b/src/stores/charts.js
@@ -9,6 +9,7 @@ export const useChartsStore = defineStore('charts', () => {
const transactionsStatistics = ref(null)
const keyblocksStatistics = ref(null)
const contractsStatistics = ref(null)
+ const namesStatistics = ref(null)
async function fetchTransactionsStatistics(interval, limit, customInterval, txType) {
transactionsStatistics.value = null
@@ -51,12 +52,27 @@ export const useChartsStore = defineStore('charts', () => {
contractsStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
}
+ async function fetchNamesStatistics(interval, limit, customInterval) {
+ namesStatistics.value = null
+
+ const intervalSlug = customInterval
+ ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+ : `?interval_by=${interval}&limit=${limit}`
+
+ const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/names${intervalSlug}`)
+
+ // remove last interval from the response not to show current interval that is being built
+ namesStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
+ }
+
return {
keyblocksStatistics,
transactionsStatistics,
contractsStatistics,
+ namesStatistics,
fetchKeyblocksStatistics,
fetchTransactionsStatistics,
fetchContractsStatistics,
+ fetchNamesStatistics,
}
})
diff --git a/src/stores/names.js b/src/stores/names.js
index 8619b125a..b6e0a26fc 100644
--- a/src/stores/names.js
+++ b/src/stores/names.js
@@ -13,7 +13,6 @@ export const useNamesStore = defineStore('names', () => {
const rawInAuctionNames = ref(null)
const rawExpiredNames = ref(null)
const rawRecentlyActivatedNames = ref(null)
- const namesStatistics = ref(null)
const activeNames = computed(() => {
return rawActiveNames.value
@@ -74,19 +73,6 @@ export const useNamesStore = defineStore('names', () => {
rawRecentlyActivatedNames.value = data.data
}
- async function fetchNamesStatistics(interval, limit, customInterval) {
- namesStatistics.value = null
-
- const slug = customInterval
- ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
- : `?interval_by=${interval}&limit=${limit}`
-
- const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/names${slug}`)
-
- // remove last interval from the response not to show current interval that is being built
- namesStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
- }
-
return {
rawActiveNames,
rawInAuctionNames,
@@ -97,12 +83,10 @@ export const useNamesStore = defineStore('names', () => {
auctionsEndingSoon,
expiredNames,
recentlyActivatedNames,
- namesStatistics,
fetchNamesDetails,
fetchActiveNames,
fetchInAuctionNames,
fetchExpiredNames,
fetchRecentlyActivatedNames,
- fetchNamesStatistics,
}
})