Merge branch 'deployment' into dev

Author: GusevPM

.dockerignore

@@ -0,0 +1,12 @@
+node_modules/
+.nuxt/
+.output/
+dist/
+
+pnpm-lock.yaml
+
+.git/
+.gitignore
+
+.dockerignore
+Dockerfile

.github/workflows/docker-build.yml

@@ -0,0 +1,31 @@
+name: Build and Push Docker Image
+
+on:
+  workflow_dispatch:
+# on:
+#   push:
+#     tags:
+#       - 'v*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build Docker Image
+        run: |
+          docker build -t ghcr.io/${{ github.repository }}:${{ github.ref_name }} .
+
+      - name: Push Docker Image to GitHub Container Registry
+        run: |
+          docker push ghcr.io/${{ github.repository }}:${{ github.ref_name }}

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20
+
+WORKDIR /app
+
+COPY . .
+
+ENV NODE_OPTIONS="--max-old-space-size=4096"
+
+RUN npm install --legacy-peer-deps
+RUN npm run build
+
+CMD ["npm", "run", "start"]

README.md

@@ -11,7 +11,6 @@ Clone the repository and run on the root folder:
 pnpm i
 pnpm dev
 ```
-
 ### Node.js Server
 
 When running `nuxt build` with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.
@@ -41,3 +40,57 @@ module.exports = {
 Also, you can use different [presets](https://nuxt.com/docs/getting-started/deployment#hosting-providers). E.g. **Cloudflare Pages**: `cloudflare_pages`.
 
 Note, some providers do not support server-side rendering.
+
+---
+
+### Docker Setup
+
+You can also run the application in Docker.
+Build the image and run the container:
+```
+docker build -t celenium-app
+docker run -p 3000:3000 --env-file .env celenium-app
+```
+Make sure to create a ```.env``` file in the root directory or pass the required environment variables directly with ```-e```.
+
+### Run with Docker Compose  
+Start with:
+```
+docker-compose up -d
+```
+
+By default:  
+- Builds the image from the local `Dockerfile`  
+- Runs the app on `127.0.0.1:3000`  
+- Automatically restarts the container on failure  
+- Uses `npm run start` as the startup command  
+- Limits logs (10 MB per file, max 5 files)  
+
+If you want to use a prebuilt image from **GitHub Container Registry**, specify a tag:  
+- `TAG=latest docker-compose up -d`  
+
+---
+
+### Environment Variables
+
+#### Required for App Startup
+- **NUXT_PUBLIC_API_DEV** — indexer API (e.g. `https://api.localhost:9876/v1`).
+- **NUXT_PUBLIC_WSS_DEV** — webSocket endpoint (e.g. `wss://api.localhost:9876/v1/ws`).
+- **NUXT_PUBLIC_SELFHOSTED** — set to `true` when running in self-hosted mode.
+
+#### Blobstream Configuration
+- **NUXT_PUBLIC_BLOBSTREAM_MAINNET** — API for blobstream data.
+
+#### Faucet Configuration
+- **NUXT_PUBLIC_FAUCET_ADDRESS** — faucet address.
+- **NUXT_PUBLIC_FAUCET_MOCHA** — faucet API for the Mocha network.
+- **NUXT_PUBLIC_FAUCET_ARABICA** — faucet API for the Arabica network.
+- **NUXT_PUBLIC_FAUCET_MAMMOTH** — faucet API for the Mammoth network.
+
+#### External Services Configuration
+- **NUXT_PUBLIC_BLOCKSCOUT** — used to check whether a batch exists in Blockscout. If found, a dedicated button will appear on the blob form/page.
+- **NUXT_PUBLIC_NODE_STATS** — provides statistics about node types, versions, and geographic distribution across the Celestia ecosystem.
+- **NUXT_PUBLIC_QUOTE** — provides price data. It is used to display the current TIA price in the header and to convert all values from TIA to USD.
+- **NUXT_PUBLIC_ROLLUP_RANKING** — fetches rollup ranking data displayed on the rollup leaderboard, individual rollup pages, and a dedicated rollup ranking page. The ranking page also includes detailed calculations, as well as repository and commit statistics.  
+- **NUXT_PUBLIC_GITHUB** — required for retrieving repository statistics on a rollup ranking page.
+- **NUXT_PUBLIC_TVL** — provides TVL (Total Value Locked) statistics for rollups and TVS (Total Value Secured) for the Celestia network. These values are displayed in the header, on the statistics page, and on individual rollup pages.

components/Feed.vue

@@ -5,6 +5,7 @@ import { DateTime } from "luxon"
 /** Services */
 import { abbreviate, capitilize, comma, formatBytes, isMainnet, roundTo } from "@/services/utils"
 import { getRankCategory } from "@/services/constants/rollups"
+import { quoteServiceURL, rollupRankingServiceURL } from "@/services/config"
 
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
@@ -30,36 +31,43 @@ const price = reactive({
 	diff: 0,
 	side: null,
 })
+const showPrice = ref(!!quoteServiceURL())
 const topRollup = ref(null)
+const showTopRollup = ref(isMainnet() && !!rollupRankingServiceURL())
 const tvs = computed(() => appStore.tvs)
 const txCount24h = ref(0)
 const bytesInBlocks24h = ref(0)
 
 onMounted(async () => {
-	const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
-	series.value = dataSeries
-	appStore.currentPrice = series.value[0]
-	price.value = parseFloat(series.value[0].close)
-
-	const prevDayClosePrice = parseFloat(series.value[1].close)
-	price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
-	let side = "stay"
-	if (price.value - prevDayClosePrice !== 0) {
-		side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
+	if (showPrice.value) {
+		const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
+		if (dataSeries.length) {
+			series.value = dataSeries
+			appStore.currentPrice = series.value[0]
+			price.value = parseFloat(series.value[0].close)
+
+			const prevDayClosePrice = parseFloat(series.value[1].close)
+			price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
+			let side = "stay"
+			if (price.value - prevDayClosePrice !== 0) {
+				side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
+			}
+			price.side = side
+		}
 	}
-	price.side = side
-
-	const _topRollups = await fetchRollupsRanking({ limit: 1 })
-	if (_topRollups.length) {
-		const _r = _topRollups[0]
-		topRollup.value = {
-			..._r,
-			category: getRankCategory(roundTo(_r.rank / 10, 0)),
-			name: _r.slug.split("-").map(el => capitilize(el)).join(" "),
+
+	if (showTopRollup.value) {
+		const _topRollups = await fetchRollupsRanking({ limit: 1 })
+		if (_topRollups.length) {
+			const _r = _topRollups[0]
+			topRollup.value = {
+				..._r,
+				category: getRankCategory(roundTo(_r.rank / 10, 0)),
+				name: _r.slug.split("-").map(el => capitilize(el)).join(" "),
+			}
 		}
 	}
 	
-	
 	const _tvs = await fetchTVS({ period: null })
 	if (_tvs.value) {
 		appStore.tvs = _tvs.value
@@ -82,7 +90,7 @@ onMounted(async () => {
 	<Flex tag="section" justify="center" wide :class="$style.wrapper">
 		<Flex align="center" justify="between" gap="24" wide :class="$style.container">
 			<Flex align="center" gap="12" :class="$style.stats">
-				<template v-if="isMainnet()">
+				<template v-if="showTopRollup">
 					<NuxtLink :to="`/rollup/rank/${topRollup?.slug}`">
 						<Tooltip>
 							<Flex align="center" gap="6" :class="$style.stat">
@@ -190,7 +198,7 @@ onMounted(async () => {
 				</Tooltip>
 			</Flex>
 
-			<Tooltip position="end">
+			<Tooltip v-if="showPrice" position="end">
 				<Flex align="center" gap="6" :class="$style.stat">
 					<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
 

components/LeftSidebar.vue

@@ -11,6 +11,8 @@ import NavLink from "@/components/modules/navigation/NavLink.vue"
 import { getNetworkName } from "@/services/utils/general"
 import { StatusMap } from "@/services/constants/node"
 import { isMainnet, isMobile } from "@/services/utils"
+import { nodeStatsURL } from "@/services/config"
+import { isSelfhosted } from "@/services/config.js"
 
 /** Store */
 import { useAppStore } from "@/store/app.store"
@@ -95,7 +97,7 @@ const mainLinks = reactive([
 				name: "Nodes",
 				path: "/stats?tab=nodes",
 				queryParam: { tab: "nodes" },
-				show: isMainnet(),
+				show: isMainnet() && !!nodeStatsURL(),
 			},
 		],
 	},
@@ -300,7 +302,7 @@ const handleOnClose = () => {
 				<Text v-else size="12" weight="600" color="tertiary">{{ nodeStore.percentage.toFixed(0) }}%</Text>
 			</Flex>
 
-			<Dropdown position="end" fullWidth>
+			<Dropdown position="end" fullWidth :disabled="isSelfhosted()">
 				<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
 					<Flex align="center" gap="8">
 						<Icon name="globe" size="14" :color="head.synced ? 'brand' : 'red'" />

components/modals/BlobModal.vue

@@ -214,7 +214,7 @@ const handlePreviewContent = () => {
 
 							<Flex direction="column" align="center" gap="8">
 								<Text size="13" weight="600" color="secondary">Download not started</Text>
-								<Text size="12" weight="500" color="tertiary">Auto download for data over 1 Mb is paused</Text>
+								<Text size="12" weight="500" color="tertiary">Auto download for data over 1 MiB is paused</Text>
 							</Flex>
 
 							<Text @click="handleLoadAnyway" size="12" weight="600" color="tertiary" :class="$style.load_btn"

components/modules/ibc/NotableStats.vue

@@ -29,18 +29,18 @@ props.ibcData.rawChainsStats.forEach((chainStats) => {
 		largestChain.value = chainStats
 	}
 })
-const largestTransfer = props.ibcData.rawSummary.largest_transfer
-const busiestChannel = props.ibcData.rawSummary.busiest_channel
+const largestTransfer = props.ibcData.rawSummary?.largest_transfer
+const busiestChannel = props.ibcData.rawSummary?.busiest_channel
 
 const handleOpenTransferModal = (transfer) => {
 	cacheStore.current.transfer = transfer
 	modalsStore.open("ibcTransfer")
 }
 
 const getChainName = (target) => {
-	return largestTransfer[target].hash.startsWith("celestia")
+	return largestTransfer[target]?.hash?.startsWith("celestia")
 		? "Celestia"
-		: IbcChainName[largestTransfer.chain_id] ?? largestTransfer.chain_id
+		: IbcChainName[largestTransfer?.chain_id] ?? largestTransfer?.chain_id
 }
 </script>
 
@@ -67,7 +67,7 @@ const getChainName = (target) => {
 			<template #content> The amount shown is the chain flow, sent and received tokens </template>
 		</Tooltip>
 
-		<Flex @click="handleOpenTransferModal(largestTransfer)" wide direction="column" gap="12" :class="[$style.card, $style.hoverable]">
+		<Flex v-if="largestTransfer" @click="handleOpenTransferModal(largestTransfer)" wide direction="column" gap="12" :class="[$style.card, $style.hoverable]">
 			<Flex align="center" justify="between">
 				<Flex align="center" gap="8">
 					<Icon name="arrow-circle-broken-right" size="14" color="brand" />
@@ -97,12 +97,12 @@ const getChainName = (target) => {
 			</Flex>
 
 			<Text size="15" weight="600" color="primary">
-				{{ busiestChannel.channel_id }}
-				<Text size="12" color="tertiary">{{ IbcChainName[busiestChannel.chain_id] ?? "Unknown" }}</Text>
+				{{ busiestChannel ? busiestChannel.channel_id : "" }}
+				<Text size="12" color="tertiary">{{ busiestChannel ? IbcChainName[busiestChannel.chain_id] ?? "Unknown" : "Unknown" }}</Text>
 			</Text>
 
 			<Text size="13" weight="500" color="support">
-				<Text color="tertiary" mono>{{ comma(busiestChannel.transfers_count) }} transfers</Text>
+				<Text color="tertiary" mono>{{ comma(busiestChannel?.transfers_count ?? "") }} transfers</Text>
 			</Text>
 		</Flex>
 	</Flex>

components/modules/rollup/RollupOverview.vue

@@ -18,6 +18,7 @@ import NamespacesTable from "./tables/NamespacesTable.vue"
 import { capitilize, comma, formatBytes, hexToRgba, isMainnet, roundTo, truncateDecimalPart } from "@/services/utils"
 import { exportToCSV } from "@/services/utils/export"
 import { getRankCategory } from "@/services/constants/rollups"
+import { rollupRankingServiceURL } from "@/services/config"
 
 /** API */
 import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces, fetchRollupRankingBySlug } from "@/services/api/rollup"
@@ -61,6 +62,7 @@ const blobs = ref([])
 const rollupColor = ref()
 const rollupColorAlpha = ref()
 const rollupRanking = ref()
+const showRanking = ref(false)
 
 const tagNames = ref(["stack", "type", "vm", "provider", "category"])
 const tags = computed(() =>
@@ -177,7 +179,9 @@ onMounted(async () => {
 	rollupColor.value = hexToRgba(props.rollup.color, 1)
 	rollupColorAlpha.value = hexToRgba(props.rollup.color, 0)
 
-	if (isMainnet()) {
+	showRanking.value = isMainnet() && rollupRankingServiceURL()
+
+	if (showRanking.value) {
 		const data = await fetchRollupRankingBySlug(props.rollup?.slug)
 		if (data.slug) {
 			rollupRanking.value = {
@@ -291,7 +295,7 @@ const handleCSVDownload = async (value) => {
 			</Flex>
 
 			<Flex align="center" gap="12">
-				<Button v-if="isMainnet()" :link="`/rollup/rank/${rollup.slug}`" type="secondary" size="mini">
+				<Button v-if="showRanking" :link="`/rollup/rank/${rollup.slug}`" type="secondary" size="mini">
 					<Icon name="laurel" size="12" color="secondary" />
 
 					<Text>Activity Rank</Text>
@@ -348,8 +352,7 @@ const handleCSVDownload = async (value) => {
 								<img id="logo" :src="rollup.logo" :class="$style.rollup_logo" />
 							</Flex>
 
-							<Flex v-if="isMainnet()" align="start" :style="{ height: '100%' }">
-								<!-- <Tooltip position="end" :disabled="!rollupRanking?.rank?.category?.color"> -->
+							<Flex v-if="showRanking" align="start" :style="{ height: '100%' }">
 								<Tooltip position="end">
 									<Icon
 										name="laurel"
@@ -763,6 +766,7 @@ const handleCSVDownload = async (value) => {
 
 		text-overflow: ellipsis;
 		overflow: hidden;
+		line-clamp: 3;
 		-webkit-line-clamp: 3;
 		-webkit-box-orient: vertical;
 	}

components/modules/stats/GeoMap.vue

@@ -268,7 +268,7 @@ const buildChart = async (chart) => {
 	let legendValues = []
 	let legendGroup, legendCitiesMarkers, legendCitiesLabels
 	if (!isMobile()) {
-		if (chartView.value === "countries") {
+		if (chartView.value === "countries" && countryMaxAmount) {
 			legendGroup = svg
 				.append("g")
 				.attr("transform", `translate(${legend.marginLeft}, ${height - legend.marginBottom})`)