Add Telegram alerts bot link to monitoring frontend footer

.github/workflows/frontend-dev.yaml

@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Build Docker image
-        run: docker build -f frontend/Dockerfile -t ${{ env.DOCKER_TAGS }} .
+        run: docker build --build-arg VITE_DEPLOYMENT_ENV=dev -f frontend/Dockerfile -t ${{ env.DOCKER_TAGS }} .
 
   deploy:
     name: Deploy Frontend to DEV
@@ -54,6 +54,8 @@ jobs:
           push: true
           tags: ${{ env.DOCKER_TAGS }}
           platforms: linux/arm64
+          build-args: |
+            VITE_DEPLOYMENT_ENV=dev
 
       - name: Install cloudflared
         run: |

.github/workflows/frontend-prd.yaml

@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Build Docker image
-        run: docker build -f frontend/Dockerfile -t ${{ env.DOCKER_TAGS }} .
+        run: docker build --build-arg VITE_DEPLOYMENT_ENV=prd -f frontend/Dockerfile -t ${{ env.DOCKER_TAGS }} .
 
   deploy:
     name: Deploy Frontend to PRD
@@ -54,6 +54,8 @@ jobs:
           push: true
           tags: ${{ env.DOCKER_TAGS }}
           platforms: linux/arm64
+          build-args: |
+            VITE_DEPLOYMENT_ENV=prd
 
       - name: Install cloudflared
         run: |

frontend/Dockerfile

@@ -6,6 +6,8 @@ COPY frontend/ .
 COPY shared/ /app/shared/
 ARG VITE_API_BASE_URL=/api
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+ARG VITE_DEPLOYMENT_ENV
+ENV VITE_DEPLOYMENT_ENV=$VITE_DEPLOYMENT_ENV
 RUN npm run build
 
 FROM nginx:alpine

frontend/src/App.tsx

@@ -6,13 +6,14 @@ import { ChallengesTable } from './components/ChallengesTable';
 import { BridgesTable } from './components/BridgesTable';
 import { MintersTable } from './components/MintersTable';
 import { HealthStatus } from './components/HealthStatus';
+import { Footer } from './components/Footer';
 
 function App() {
 	const { health, jusd, positions, collateral, challenges, minters } = useApi();
 
 	return (
-		<div className="min-h-screen bg-neutral-950 text-gray-100">
-			<div className="max-w-7xl mx-auto p-4 space-y-6 text-sm mb-8">
+		<div className="min-h-screen bg-neutral-950 text-gray-100 flex flex-col">
+			<div className="flex-1 max-w-7xl w-full mx-auto p-4 space-y-6 text-sm">
 				<HealthStatus {...health} />
 				<SystemOverview {...jusd} minters={minters} />
 				<PositionsTable data={positions} />
@@ -21,6 +22,7 @@ function App() {
 				<BridgesTable data={minters} />
 				<MintersTable data={minters} />
 			</div>
+			<Footer />
 		</div>
 	);
 }

frontend/src/components/Footer.tsx

@@ -0,0 +1,36 @@
+import { DEPLOYMENT_ENV, resolveChain, TELEGRAM_BOT } from '../constants';
+
+export function Footer() {
+	const botUrl = TELEGRAM_BOT[resolveChain()][DEPLOYMENT_ENV];
+
+	return (
+		<footer className="border-t border-neutral-800 mt-8">
+			<div className="max-w-7xl mx-auto px-4 py-6 flex items-center justify-end gap-3 text-sm">
+				<a
+					href={botUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					title="Telegram alerts bot"
+					aria-label="Telegram alerts bot"
+					className="inline-flex items-center gap-2 text-gray-400 hover:text-gray-100 transition-colors"
+				>
+					<TelegramIcon className="w-5 h-5" />
+					<span>Get alerts</span>
+				</a>
+			</div>
+		</footer>
+	);
+}
+
+function TelegramIcon({ className = '' }: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			className={`fill-current ${className}`}
+			aria-hidden="true"
+		>
+			<path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z" />
+		</svg>
+	);
+}

frontend/src/constants.ts

@@ -0,0 +1,26 @@
+export type DeploymentEnv = 'prd' | 'dev';
+export type Chain = 'mainnet' | 'testnet';
+
+const rawDeploymentEnv = import.meta.env.VITE_DEPLOYMENT_ENV;
+if (rawDeploymentEnv !== 'prd' && rawDeploymentEnv !== 'dev') {
+	throw new Error(`VITE_DEPLOYMENT_ENV must be "prd" or "dev" (got: "${rawDeploymentEnv}")`);
+}
+export const DEPLOYMENT_ENV: DeploymentEnv = rawDeploymentEnv;
+
+export const TELEGRAM_BOT = {
+	mainnet: {
+		prd: 'https://t.me/juicedollar_monitor_prd_bot',
+		dev: 'https://t.me/juicedollar_monitor_dev_bot',
+	},
+	testnet: {
+		prd: 'https://t.me/juicedollar_monitor_tst_prd_bot',
+		dev: 'https://t.me/juicedollar_monitor_tst_dev_bot',
+	},
+} as const;
+
+export function resolveChain(): Chain {
+	if (typeof window === 'undefined') {
+		throw new Error('resolveChain() requires window.location');
+	}
+	return window.location.hostname.includes('testnet') ? 'testnet' : 'mainnet';
+}

frontend/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_API_BASE_URL?: string;
+	readonly VITE_DEPLOYMENT_ENV?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}