Dev

.github/workflows/license.yml

@@ -13,8 +13,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - run: yarn --frozen-lockfile --production
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
       - uses: daynin/[email protected]
         with:
           exclude-private-packages: true

app.vue

@@ -10,12 +10,21 @@ import CommandMenu from "@/components/cmd/CommandMenu.vue"
 
 /** Store */
 import { useAppStore } from "@/store/app"
+import { useBookmarksStore } from "@/store/bookmarks"
 const appStore = useAppStore()
+const bookmarksStore = useBookmarksStore()
+bookmarksStore.$subscribe((mutation, state) => {
+	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
+})
 
 onMounted(async () => {
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
+	if (localStorage.bookmarks) {
+		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
+	}
+
 	Socket.init()
 
 	const data = await fetchHead()

assets/styles/base.scss

@@ -32,7 +32,7 @@ $grayscale: (
 
 	/* General */
 	--brand: #924dff;
-	--blue: #0b84fe;
+	--blue: #076acd;
 	--red: #eb5757;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
@@ -50,6 +50,9 @@ $grayscale: (
 	--btn-white-bg: rgba(255, 255, 255, 90%);
 	--btn-white-bg-hover: rgba(255, 255, 255, 75%);
 	--btn-white-bg-active: rgba(255, 255, 255, 90%);
+	--btn-red-bg: rgba(235, 87, 87, 100%);
+	--btn-red-bg-hover: rgba(235, 87, 87, 75%);
+	--btn-red-bg-active: rgba(235, 87, 87, 90%);
 	--btn-secondary-bg: rgba(255, 255, 255, 8%);
 	--btn-secondary-bg-hover: rgba(255, 255, 255, 10%);
 	--btn-secondary-bg-active: rgba(255, 255, 255, 7%);

components/Feed.vue

@@ -1,15 +1,39 @@
 <script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
 /** Services */
 import { comma, formatBytes, abbreviate } from "@/services/utils"
 
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
 
+/** API */
+import { fetchPrice, fetchPriceSeries } from "@/services/api/stats"
+
 /** Store */
 import { useAppStore } from "@/store/app"
 const appStore = useAppStore()
 
 const head = computed(() => appStore.head)
+
+const series = ref([])
+const price = reactive({
+	value: 0,
+	diff: 0,
+	side: null,
+})
+
+onMounted(async () => {
+	const dataPrice = await fetchPrice()
+	const dataSeries = await fetchPriceSeries()
+	price.value = parseFloat(dataPrice.close)
+	series.value = dataSeries
+
+	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"
+})
 </script>
 
 <template>
@@ -86,6 +110,46 @@ const head = computed(() => appStore.head)
 					<template #content> {{ comma(head.total_fee) }} UTIA </template>
 				</Tooltip>
 			</Flex>
+
+			<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>
+
+						<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="red" />
+
+						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'red'" noWrap>
+							{{ price.diff.toFixed(2) }}%</Text
+						>
+					</Flex>
+					<Skeleton v-else w="50" h="12" />
+				</Flex>
+
+				<template #content>
+					<Flex direction="column" gap="6">
+						<Flex align="center" gap="4">
+							<Text color="primary">Price diff from the previous day</Text>
+						</Flex>
+
+						<Flex align="center" gap="4">
+							<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
+							<Text color="primary">${{ parseFloat(series[1].close).toFixed(2) }}</Text>
+						</Flex>
+
+						<Flex align="center" gap="4">
+							<Text size="11" color="tertiary">Binance quotes</Text>
+						</Flex>
+					</Flex>
+				</template>
+			</Tooltip>
 		</Flex>
 	</Flex>
 </template>

components/Flex.vue

@@ -1,4 +1,5 @@
 <script setup>
+/** Vendor */
 import { ref, computed } from "vue"
 
 const wrapper = ref(null)

components/TheFooter.vue

@@ -64,31 +64,39 @@ const handleChangeTheme = (theme) => {
 				<Flex align="center" gap="8">
 					<Icon name="logo" size="14" color="tertiary" />
 					<Text size="13" weight="500" color="secondary">Celenium</Text>
-					<Text size="13" weight="500" color="tertiary">- Celestia Explorer, {{ new Date().getFullYear() }}</Text>
-				</Flex>
-
-				<Flex align="center" gap="16">
+					<Text size="13" weight="500" color="tertiary">-</Text>
+					<Text size="13" weight="500" color="tertiary">Celestia Explorer</Text>
 					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
 						<Flex>
-							<Text size="12" weight="600" color="support">
-								Version <Text color="tertiary">{{ appConfig.version }}</Text>
-							</Text>
+							<Text size="13" weight="500" color="support">v</Text>
+							<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
 						</Flex>
 					</a>
 				</Flex>
 
-				<NuxtLink to="https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5">
-					<Flex align="center" gap="8">
-						<Text size="12" weight="500" color="support">Donations: </Text>
-						<Text size="12" weight="500" color="tertiary">celestia</Text>
-						<Flex align="center" gap="3">
-							<div v-for="dot in 3" class="dot" />
+				<Flex align="center" gap="8">
+					<NuxtLink to="https://www.pklab.io/terms" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary">Terms of Use</Text>
+					</NuxtLink>
+					<NuxtLink to="https://www.pklab.io/privacy" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary">Privacy Policy</Text>
+					</NuxtLink>
+				</Flex>
+
+				<Flex align="center" gap="8">
+					<Text size="12" weight="500" color="support">Donations:</Text>
+					<a :href="`https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5`" target="_blank">
+						<Flex>
+							<Text size="12" weight="500" color="tertiary">TIA</Text>
 						</Flex>
-						<Text size="12" weight="500" color="tertiary">wevu augt h7f5</Text>
-					</Flex>
-				</NuxtLink>
+					</a>
+					<a :href="`https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761`" target="_blank">
+						<Flex>
+							<Text size="12" weight="500" color="tertiary">ETH</Text>
+						</Flex>
+					</a>
+				</Flex>
 			</Flex>
-
 			<Flex direction="column" align="end" gap="16">
 				<Flex align="center" gap="16">
 					<Dropdown side="top">

components/TheHeader.vue

@@ -25,6 +25,22 @@ const showPopup = ref(false)
 
 const head = computed(() => appStore.head)
 
+const featurePreviewMode = ref(false)
+const isWalletAvailable = ref(false)
+
+const account = ref("")
+
+const getAccounts = async () => {
+	const offlineSigner = window.getOfflineSigner("celestia")
+	const accounts = await offlineSigner.getAccounts()
+	if (accounts.length) account.value = accounts[0].address
+}
+
+onMounted(async () => {
+	featurePreviewMode.value = localStorage.featurePreview
+	isWalletAvailable.value = !!window.keplr
+})
+
 watch(
 	() => showPopup.value,
 	() => {
@@ -64,6 +80,12 @@ const isActive = (link) => {
 const handleNavigate = (url) => {
 	window.location.replace(url)
 }
+
+const handleConnect = async () => {
+	await window.keplr.enable("celestia")
+
+	getAccounts()
+}
 </script>
 
 <template>
@@ -105,7 +127,7 @@ const handleNavigate = (url) => {
 				</NuxtLink>
 			</Flex>
 
-			<Flex align="center" gap="12">
+			<Flex align="center" gap="8">
 				<Dropdown>
 					<Tooltip v-if="head" position="end">
 						<Flex align="center" gap="8" :class="[$style.network]">
@@ -117,7 +139,6 @@ const handleNavigate = (url) => {
 							<Text color="primary"><template v-if="!head.synced">Not</template> Synced </Text>
 						</template>
 					</Tooltip>
-					<Skeleton v-else w="68" h="12" />
 
 					<template #popup>
 						<DropdownTitle>Network</DropdownTitle>
@@ -142,6 +163,16 @@ const handleNavigate = (url) => {
 						</Flex>
 					</template>
 				</Tooltip>
+
+				<Button
+					v-if="featurePreviewMode"
+					@click="handleConnect"
+					type="white"
+					size="small"
+					:disabled="!isWalletAvailable || account.length"
+				>
+					{{ account ? `celestia...${account.slice(-6)}` : "Connect" }}
+				</Button>
 			</Flex>
 		</Flex>
 
@@ -297,8 +328,8 @@ const handleNavigate = (url) => {
 	height: 28px;
 
 	border-radius: 8px;
-	background: linear-gradient(var(--op-10), var(--op-3));
-	box-shadow: inset 0 0 0 1px var(--op-10), 0 2px 8px rgba(0, 0, 0, 8%);
+	background: var(--op-5);
+	box-shadow: inset 0 0 0 1px var(--op-5);
 
 	padding: 0 12px;