Merge branch 'dev-mainnet' into dev

Author: GusevPM

components/modules/rollup/RollupCharts.vue

@@ -33,7 +33,7 @@ const props = defineProps({
 	},
 })
 
-const rollupColor = ref(hexToRgba(props.rollup.color, 1))
+const rollupColor = computed(() => hexToRgba(props.rollup.color, 1))
 
 /** Chart settings */
 const selectedPeriodIdx = ref(2)

components/modules/rollup/RollupOverview.vue

@@ -61,6 +61,10 @@ const blobs = ref([])
 
 const rollupColor = ref()
 const rollupColorAlpha = ref()
+function calcRollupColor() {
+	rollupColor.value = hexToRgba(props.rollup.color, 1)
+	rollupColorAlpha.value = hexToRgba(props.rollup.color, 0)
+}
 const rollupRanking = ref()
 const showRanking = ref(false)
 
@@ -176,8 +180,7 @@ onMounted(async () => {
 		},
 	})
 
-	rollupColor.value = hexToRgba(props.rollup.color, 1)
-	rollupColorAlpha.value = hexToRgba(props.rollup.color, 0)
+	calcRollupColor()
 
 	showRanking.value = isMainnet() && rollupRankingServiceURL()
 
@@ -232,6 +235,11 @@ watch(
 	},
 )
 
+watch(
+	() => props.rollup?.color,
+	() => calcRollupColor(),
+)
+
 const periods = ref([
 	{
 		title: "Last 1 hour",

components/shared/ChartOnEntityPage.vue

@@ -137,7 +137,7 @@ const getXAxisLabels = (start, tvl = false) => {
 }
 
 watch(
-	() => [data.value, props.chartView, props.loadLastValue],
+	() => [data.value, props.chartView, props.color, props.loadLastValue],
 	async () => {
 		await nextTick()
 
@@ -220,7 +220,11 @@ onBeforeUnmount(() => {
 				<div v-if="showTooltip" :class="$style.tooltip_wrapper">
 					<div
 						v-if="chartView === 'line'"
-						:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+						:style="{
+							transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)`,
+							background: color,
+							boxShadow: `0 0 0 4px color-mix(in srgb, ${color} 40%, transparent)`,
+						}"
 						:class="$style.dot"
 					/>
 					<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
@@ -320,8 +324,6 @@ onBeforeUnmount(() => {
 		width: 6px;
 		height: 6px;
 		border-radius: 50px;
-		background: var(--brand);
-		box-shadow: 0 0 0 4px var(--dark-mint);
 		transition: all 0.15s ease;
 	}
 

pages/rollup/[slug].vue

@@ -10,7 +10,9 @@ import { fetchRollupBySlug } from "@/services/api/rollup"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
+import { useAppStore } from "@/store/app.store"
 import { useCacheStore } from "@/store/cache.store"
+const appStore = useAppStore()
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -23,9 +25,21 @@ if (!rawRollup.value) {
 	router.push("/rollups")
 } else {
 	rollup.value = rawRollup.value
+	patchRollupColor()
 	cacheStore.current.rollup = rollup.value
 }
 
+function patchRollupColor() {
+	if (!rollup.value) return
+
+	if (appStore.theme === "light" && rollup.value.color === "#FFFFFF") {
+		rollup.value.originColor = rollup.value.color
+		rollup.value.color = "#8b8c8d"
+	} else if (rollup.value.originColor) {
+		rollup.value.color = rollup.value.originColor
+	}
+}
+
 defineOgImageComponent("RollupImage", {
 	title: "Rollup",
 	rollup: rollup.value,
@@ -71,6 +85,11 @@ useHead({
 		},
 	],
 })
+
+watch(
+	() => appStore.theme,
+	() => patchRollupColor(),
+)
 </script>
 
 <template>

pages/rollups/index.vue

@@ -31,7 +31,9 @@ import { rollupRankingServiceURL } from "@/services/config"
 import { fetchRollups, fetchRollupsRanking } from "@/services/api/rollup"
 
 /** Stores */
+import { useAppStore } from "@/store/app.store"
 import { useEnumStore } from "@/store/enums.store"
+const appStore = useAppStore()
 const enumStore = useEnumStore()
 
 useHead({
@@ -289,17 +291,19 @@ const getRollups = async () => {
 				ranking[rank.slug] = rank
 			})
 
-			rollups.value = data.map((r) => {
-				const rank = ranking[r.slug]
-				if (!rank) return r
-
-				return {
-					...r,
-					rank: +rank.rank,
-					rounded_rank: roundTo(rank.rank / 10, 0),
-					rank_category: getRankCategory(roundTo(rank.rank / 10, 0)),
-				}
-			})
+			if (data.length) {
+				rollups.value = data.map((r) => {
+					const rank = ranking[r.slug]
+					if (!rank) return r
+
+					return {
+						...r,
+						rank: +rank.rank,
+						rounded_rank: roundTo(rank.rank / 10, 0),
+						rank_category: getRankCategory(roundTo(rank.rank / 10, 0)),
+					}
+				})
+			}
 		}
 	}
 
@@ -310,6 +314,12 @@ const getRollups = async () => {
 	}
 }
 const processRollups = () => {
+	if (!rollups.value?.length) {
+		processedRollups.value = []
+		isRefetching.value = false
+		return
+	}
+
 	isRefetching.value = true
 
 	const selected = Object.keys(filters).reduce((acc, key) => {

services/utils/general.js

@@ -142,7 +142,7 @@ export const getNetworkName = () => {
 }
 
 export const isMainnet = () => {
-	return getNetworkName() === "Mainnet" || isSelfhosted()
+	return true
 }
 
 export const isMac = () => {