fix(Feed): tooltip for tia price

Author: xdeq

components/Feed.vue

@@ -1,4 +1,7 @@
 <script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
 /** Services */
 import { comma, formatBytes, abbreviate } from "@/services/utils"
 
@@ -14,6 +17,7 @@ const appStore = useAppStore()
 
 const head = computed(() => appStore.head)
 
+const series = ref([])
 const price = reactive({
 	value: 0,
 	diff: 0,
@@ -24,8 +28,9 @@ onMounted(async () => {
 	const dataPrice = await fetchPrice()
 	const dataSeries = await fetchPriceSeries()
 	price.value = parseFloat(dataPrice.close)
+	series.value = dataSeries
 
-	const prevDayClosePrice = parseFloat(dataSeries[1].close)
+	const prevDayClosePrice = parseFloat(series.value[1].close)
 	price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
 	price.side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
 })
@@ -106,26 +111,39 @@ onMounted(async () => {
 				</Tooltip>
 			</Flex>
 
-			<Flex align="center" gap="6" :class="$style.stat">
-				<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
+			<Tooltip position="end">
+				<Flex align="center" gap="6" :class="$style.stat">
+					<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
 
-				<Flex align="center" gap="4">
-					<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
+					<Flex align="center" gap="4">
+						<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
 
-					<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
-					<Skeleton v-else w="36" h="12" />
-				</Flex>
+						<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
+						<Skeleton v-else w="36" h="12" />
+					</Flex>
 
-				<Flex v-if="price.diff" align="center" gap="4">
-					<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
-					<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
+					<Flex v-if="price.diff" align="center" gap="4">
+						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
+						<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
 
-					<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
-						{{ price.diff.toFixed(2) }}%</Text
-					>
+						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
+							{{ price.diff.toFixed(2) }}%</Text
+						>
+					</Flex>
+					<Skeleton v-else w="50" h="12" />
 				</Flex>
-				<Skeleton v-else w="50" h="12" />
-			</Flex>
+
+				<template #content>
+					<Flex direction="column" gap="6">
+						Price diff from the previous day
+
+						<Flex align="center" gap="4">
+							<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
+							<Text color="primary">${{ series[1].close }}</Text>
+						</Flex>
+					</Flex>
+				</template>
+			</Tooltip>
 		</Flex>
 	</Flex>
 </template>