[UI] Display commit hash + 404 page design

.gitignore

@@ -36,11 +36,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# env variables
-/public/settings/env-config.js
-
-# generated Git info
-/src/generated/gitInfo.ts
+# test files
 /test-results/
 /playwright-report/
 /blob-report/

Dockerfile

@@ -4,7 +4,8 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV PORT 80
 WORKDIR /app
 COPY . .
-
+# Passing env var to be used on client side
+ARG NEXT_PUBLIC_COMMIT_HASH
 RUN yarn install
 RUN yarn build
 

Makefile

@@ -9,7 +9,7 @@ TAG ?= stellar/laboratory:$(LABEL)
 BUILD_DATE := $(shell date -u +%FT%TZ)
 
 docker-build:
-	$(SUDO) docker build --pull --label org.opencontainers.image.created="$(BUILD_DATE)" -t $(TAG) .
+	$(SUDO) docker build --pull --label org.opencontainers.image.created="$(BUILD_DATE)" -t $(TAG) --build-arg=NEXT_PUBLIC_COMMIT_HASH="$(shell git rev-parse --short HEAD)" .
 
 docker-push:
 	$(SUDO) docker push $(TAG)

package.json

@@ -7,7 +7,7 @@
     "node": ">=20.0.0"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "export NEXT_PUBLIC_COMMIT_HASH=$(git rev-parse --short HEAD) && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -16,8 +16,7 @@
     "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
     "prepare": "husky",
     "pre-commit": "yarn lint-staged",
-    "pre-push": "yarn lint:ts && yarn test",
-    "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
+    "pre-push": "yarn lint:ts && yarn test"
   },
   "dependencies": {
     "@creit.tech/stellar-wallets-kit": "^0.8.2",

src/app/not-found.tsx

@@ -1,18 +1,45 @@
 "use client";
 
-import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button, Card, Heading, Icon, Text } from "@stellar/design-system";
 
 import { Routes } from "@/constants/routes";
 import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+import { Box } from "@/components/layout/Box";
 
-// TODO: update 404
-// TODO: keep searchParams
 export default function NotFound() {
+  const router = useRouter();
+
+  const handleBackClick = () => {
+    router.push(Routes.ROOT);
+  };
+
   return (
     <LayoutContentContainer>
-      <h2>Not Found</h2>
-      <p>Could not find requested resource</p>
-      <Link href={Routes.ROOT}>Return Home</Link>
+      <Card>
+        <Box gap="xl" align="start">
+          <Box gap="md">
+            <Heading as="h2" size="xs" weight="medium">
+              Error 404 - Page not found
+            </Heading>
+
+            <Text size="sm" as="p">
+              Oops! The page you’re looking for doesn’t exist. It might have
+              been removed, had its name changed, or is temporarily unavailable.
+            </Text>
+          </Box>
+
+          <Button
+            size="sm"
+            variant="secondary"
+            icon={<Icon.ArrowLeft />}
+            iconPosition="left"
+            onClick={handleBackClick}
+          >
+            Back to home
+          </Button>
+        </Box>
+      </Card>
     </LayoutContentContainer>
   );
 }

src/app/page.tsx

@@ -6,6 +6,8 @@ import { NextLink } from "@/components/NextLink";
 import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
 import { InfoCards } from "@/components/InfoCards";
 import { SdsLink } from "@/components/SdsLink";
+import { Box } from "@/components/layout/Box";
+
 import { Routes } from "@/constants/routes";
 import { openUrl } from "@/helpers/openUrl";
 
@@ -90,18 +92,24 @@ export default function Introduction() {
       <InfoCards infoCards={infoCards} />
 
       <div className="IntroFooter">
-        <SdsLink
-          href="https://www.stellar.org/privacy-policy"
-          variant="secondary"
-        >
-          Privacy Policy
-        </SdsLink>
-        <SdsLink
-          href="https://www.stellar.org/terms-of-service"
-          variant="secondary"
-        >
-          Terms of Service
-        </SdsLink>
+        <Box gap="sm" direction="row">
+          <SdsLink
+            href="https://www.stellar.org/privacy-policy"
+            variant="secondary"
+          >
+            Privacy Policy
+          </SdsLink>
+          <SdsLink
+            href="https://www.stellar.org/terms-of-service"
+            variant="secondary"
+          >
+            Terms of Service
+          </SdsLink>
+        </Box>
+
+        {process.env.NEXT_PUBLIC_COMMIT_HASH ? (
+          <div>{`Commit hash: ${process.env.NEXT_PUBLIC_COMMIT_HASH}`}</div>
+        ) : null}
       </div>
     </LayoutContentContainer>
   );

src/styles/globals.scss

@@ -405,6 +405,7 @@
   flex: 1;
   display: flex;
   align-items: flex-end;
+  justify-content: space-between;
   gap: pxToRem(12px);
   font-size: pxToRem(14px);
   line-height: pxToRem(20px);