Update version

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymesh-explorer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3005",

src/app/api/version/route.js

@@ -0,0 +1,14 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+export async function GET() {
+  const packageJsonPath = join(process.cwd(), 'package.json');
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+  const { version } = packageJson;
+
+  return new Response(JSON.stringify({ version }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

src/components/shared/layout/AppLayout.tsx

@@ -10,6 +10,7 @@ import { LayoutSearchTextInput } from './LayoutSearchTextInput';
 import { APP_BACKGROUD } from '@/config/images';
 import { GenericLink } from '../common/GenericLink';
 import { POLYMESH_DOCS } from '@/config/constant';
+import { useVersion } from '@/hooks/common/useVersion';
 
 const MainContainer = styled(Container)(() => ({
   color: '#fff',
@@ -49,6 +50,7 @@ export function AppLayout({
   children,
   buttonActionComponent = <NetworkSelector />,
 }: Props) {
+  const { version, loading } = useVersion();
   const pathname = usePathname();
   const isHomePage = pathname === '/';
   const barActions = useMemo(() => {
@@ -104,6 +106,8 @@ export function AppLayout({
           <Box
             component="span"
             sx={{
+              display: 'flex',
+              gap: '20px',
               '& a': {
                 color: '#fff',
                 textDecoration: 'none',
@@ -118,6 +122,9 @@ export function AppLayout({
                 Polymesh Docs
               </GenericLink>
             </Typography>
+            <Typography sx={{ opacity: 0.5 }} variant="caption">
+              V {version || (loading ? '0.0.0' : '0.0.0')}
+            </Typography>
           </Box>
         </Footer>
       </Box>

src/hooks/common/useVersion.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export function useVersion() {
+  const [version, setVersion] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch('/api/version')
+      .then((res) => {
+        if (!res.ok) throw new Error('Error fetching version');
+        return res.json();
+      })
+      .then((data) => {
+        setVersion(data.version);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  return { version, loading, error };
+}