Merge pull request #91 from celenium-io/lumina

Lumina

Author: GusevPM

app.vue

@@ -13,9 +13,11 @@ import { fetchHead } from "@/services/api/main"
 import { fetchLatestBlocks } from "@/services/api/block"
 
 /** Store */
+import { useNodeStore } from "@/store/node"
 import { useAppStore } from "@/store/app"
 import { useBookmarksStore } from "@/store/bookmarks"
 import { useSettingsStore } from "@/store/settings"
+const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
 const settingsStore = useSettingsStore()
@@ -31,6 +33,10 @@ onMounted(async () => {
 		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
 	}
 
+	if (localStorage.nodeSettings) {
+		nodeStore.settings = JSON.parse(localStorage.nodeSettings)
+	}
+
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
@@ -55,7 +61,7 @@ onMounted(async () => {
 <template>
 	<CommandMenu :show="appStore.showCmd" />
 
-	<NuxtLoadingIndicator height="2" color="#0ade71" />
+	<NuxtLoadingIndicator :height="2" color="#0ade71" />
 	<NuxtLayout>
 		<NuxtPage />
 

assets/icons.json

@@ -28,20 +28,21 @@ $grayscale: (
 	--txt-tertiary: rgba(255, 255, 255, 35%);
 	--txt-support: rgba(255, 255, 255, 15%);
 	--txt-black: rgba(0, 0, 0, 95%);
+	--txt-semiblack: rgba(0, 0, 0, 45%);
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
 	--brand: #18d2a5;
-	--blue: #076acd;
+	--blue: #379bff;
 	--red: #eb5757;
 	--dark-red: #592121;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
-	--yellow: #ffd400;
+	--yellow: #e6c525;
 	--green: #0ade71;
 	--neutral-green: #33a853;
 	--purple: #5856de;
-	--mint: #18D2A5;
+	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 
@@ -110,7 +111,7 @@ $grayscale: (
 	--green: #0ade71;
 	--neutral-green: #33a853;
 	--purple: #5856de;
-	--mint: #18D2A5;
+	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 
@@ -171,7 +172,7 @@ $grayscale: (
 	--green: #26c071;
 	--neutral-green: #33a853;
 	--purple: #5856de;
-	--mint: #18D2A5;
+	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 

assets/styles/base.scss

@@ -55,6 +55,7 @@ $textColors: (
 	"tertiary": "--txt-tertiary",
 	"support": "--txt-support",
 	"black": "--txt-black",
+	"semiblack": "--txt-semiblack",
 	"white": "--txt-white",
 	"blue": "--blue",
 	"orange": "--orange",

assets/styles/text.scss

@@ -0,0 +1,22 @@
+import init, { run_worker } from "@/services/lumina-node-wasm/index.js"
+
+async function worker_main() {
+	let queued = []
+	if (typeof SharedWorkerGlobalScope !== "undefined" && self instanceof SharedWorkerGlobalScope) {
+		onconnect = (event) => {
+			queued.push(event)
+		}
+	} else {
+		onmessage = (event) => {
+			queued.push(event)
+		}
+	}
+
+	await init()
+	await run_worker(queued)
+}
+
+if (typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope) {
+	Error.stackTraceLimit = 99
+	worker_main()
+}

assets/workers/worker.js

@@ -8,11 +8,14 @@ import NavLink from "@/components/modules/navigation/NavLink.vue"
 
 /** Utils */
 import { getNetworkName } from "@/services/utils/general"
+import { StatusMap } from "@/services/constants/node"
 
 /** Store */
 import { useAppStore } from "~/store/app"
+import { useNodeStore } from "~/store/node"
 import { useModalsStore } from "~/store/modals"
 const appStore = useAppStore()
+const nodeStore = useNodeStore()
 const modalsStore = useModalsStore()
 
 const head = computed(() => appStore.lastHead)
@@ -224,15 +227,34 @@ const handleNavigate = (url) => {
 			</Flex>
 		</Flex>
 
-		<Flex direction="column" gap="12" style="margin-right: 20px">
+		<Flex direction="column" gap="16" style="margin-right: 20px">
+			<Flex @click="modalsStore.open('lightNode')" align="center" gap="8" justify="between" :class="$style.light_node_btn">
+				<Flex align="center" gap="8">
+					<Icon
+						v-if="nodeStore.status === StatusMap.Started"
+						name="lumina"
+						size="14"
+						color="brand"
+						:class="$style.light_node_running_icon"
+					/>
+					<Icon v-else name="lumina" size="14" color="secondary" />
+
+					<Text v-if="nodeStore.status === StatusMap.Started" size="13" weight="600" color="primary">Running</Text>
+					<Text size="13" weight="600" color="secondary">Node</Text>
+				</Flex>
+
+				<Icon v-if="nodeStore.status !== StatusMap.Started" name="arrow-narrow-right" size="14" color="secondary" />
+				<Text v-else size="12" weight="600" color="tertiary">{{ nodeStore.percentage.toFixed(0) }}%</Text>
+			</Flex>
+
 			<!-- <Flex justify="end" :class="$style.ad">
-					<Flex justify="end" direction="column" gap="8">
-						<Text size="12" weight="500" color="brand">Introducing Celenium API</Text>
-						<Text size="12" weight="500" height="140" color="secondary">
-							Unlock the power of Celestia: Scalable, Secure and Modular.
-						</Text>
-					</Flex>
-				</Flex> -->
+				<Flex justify="end" direction="column" gap="8">
+					<Text size="12" weight="500" color="brand">Introducing Celenium API</Text>
+					<Text size="12" weight="500" height="140" color="secondary">
+						Unlock the power of Celestia: Scalable, Secure and Modular.
+					</Text>
+				</Flex>
+			</Flex> -->
 
 			<Dropdown position="end" fullWidth>
 				<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
@@ -292,6 +314,7 @@ const handleNavigate = (url) => {
 		display: flex;
 
 		background: var(--app-background);
+		overflow: auto;
 
 		z-index: 100;
 	}
@@ -332,6 +355,22 @@ const handleNavigate = (url) => {
 	}
 }
 
+.light_node_btn {
+	height: 32px;
+
+	cursor: pointer;
+	border-radius: 6px;
+	background: var(--op-5);
+
+	padding: 0 8px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-8);
+	}
+}
+
 .network_selector {
 	height: 32px;
 
@@ -360,6 +399,27 @@ const handleNavigate = (url) => {
 	margin-right: 20px;
 }
 
+.light_node_running_icon {
+	animation: lightNodeIcon 2s ease infinite;
+}
+
+@keyframes lightNodeIcon {
+	0% {
+		opacity: 1;
+		filter: drop-shadow(0 0 8px var(--brand));
+	}
+
+	50% {
+		opacity: 0.3;
+		filter: drop-shadow(0 0 2px var(--brand));
+	}
+
+	100% {
+		opacity: 1;
+		filter: drop-shadow(0 0 8px var(--brand));
+	}
+}
+
 @media (max-width: 1300px) {
 	.close_btn {
 		display: flex;