fix conflict

apps/server/src/AppModule.ts

@@ -2,6 +2,7 @@ import { Module } from "@nestjs/common";
 import { appConfig, ENV_VALIDATION_SCHEMA } from "./AppConfig";
 import { UserModule } from "./user/UserModule";
 import { ConfigModule } from "@nestjs/config";
+import { HealthModule } from "./health/PrismaHealthModule";
 
 @Module({
   imports: [
@@ -11,6 +12,7 @@ import { ConfigModule } from "@nestjs/config";
       validationSchema: ENV_VALIDATION_SCHEMA,
     }),
     UserModule,
+    HealthModule,
   ],
 })
 export class AppModule {}

apps/server/src/PrismaModule.ts

@@ -0,0 +1,8 @@
+import { Module } from "@nestjs/common";
+import { PrismaService } from "./PrismaService";
+
+@Module({
+  exports: [PrismaService],
+  providers: [PrismaService],
+})
+export class PrismaModule {}

apps/server/src/health/PrismaHealth.ts

@@ -0,0 +1,23 @@
+import { Injectable } from "@nestjs/common";
+import {
+  HealthCheckError,
+  HealthIndicator,
+  HealthIndicatorResult,
+} from "@nestjs/terminus";
+
+import { PrismaService } from "../PrismaService";
+
+@Injectable()
+export class PrismaHealthIndicator extends HealthIndicator {
+  constructor(private readonly prismaService: PrismaService) {
+    super();
+  }
+
+  async isHealthy(key: string): Promise<HealthIndicatorResult> {
+    return this.prismaService.$queryRaw`SELECT 1`
+      .then(() => this.getStatus(key, true))
+      .catch((e) => {
+        throw new HealthCheckError(e.message, this.getStatus(key, false, e));
+      });
+  }
+}

apps/server/src/health/PrismaHealthController.ts

@@ -0,0 +1,19 @@
+import { Controller, Get } from "@nestjs/common";
+import { HealthCheck, HealthCheckService } from "@nestjs/terminus";
+import { SkipThrottle } from "@nestjs/throttler";
+import { PrismaHealthIndicator } from "./PrismaHealth";
+
+@Controller("health")
+export class HealthController {
+  constructor(
+    private health: HealthCheckService,
+    private prisma: PrismaHealthIndicator,
+  ) {}
+
+  @SkipThrottle()
+  @Get()
+  @HealthCheck()
+  check() {
+    return this.health.check([() => this.prisma.isHealthy("database")]);
+  }
+}

apps/server/src/health/PrismaHealthModule.ts

@@ -0,0 +1,12 @@
+import { Module } from "@nestjs/common";
+import { TerminusModule } from "@nestjs/terminus";
+import { PrismaModule } from "../PrismaModule";
+import { HealthController } from "./PrismaHealthController";
+import { PrismaHealthIndicator } from "./PrismaHealth";
+
+@Module({
+  imports: [TerminusModule, PrismaModule],
+  controllers: [HealthController],
+  providers: [PrismaHealthIndicator],
+})
+export class HealthModule {}

apps/web/cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+});

apps/web/cypress/support/commands.ts

@@ -0,0 +1 @@
+import "@testing-library/cypress/add-commands";

apps/web/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import "./commands";

apps/web/cypress/support/index.ts

@@ -0,0 +1 @@
+declare namespace Cypress {}

apps/web/package.json

@@ -6,7 +6,9 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "cypress:open": "cypress open",
+    "cypress:run": "TZ=UTC cypress run --headless --browser chrome"
   },
   "dependencies": {
     "@defichain/whale-api-client": "^4.0.7",
@@ -31,10 +33,13 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.12.34",
     "@netlify/plugin-lighthouse": "^6.0.0",
     "@netlify/plugin-nextjs": "^4.41.3",
+    "@testing-library/cypress": "^10.0.1",
     "@types/node": "^20",
     "autoprefixer": "^10.4.16",
+    "cypress": "^13.7.2",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1"
   }

apps/web/src/app/app/components/AppFooter.tsx

@@ -0,0 +1,97 @@
+import MarbleFiLogo from "@/components/MarbleFiLogo";
+import { Tag } from "@/components/Tag";
+import clsx from "clsx";
+import { FaReddit } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import Link from "next/link";
+
+const footerLinks = [
+  {
+    title: "FAQs",
+    link: "/faqs",
+  },
+  {
+    title: "Documentation",
+    link: "/documentation",
+  },
+  {
+    title: "Terms of Use",
+    link: "/terms-of-use",
+  },
+
+  {
+    title: "Privacy Notice",
+    link: "/privacy-notice",
+  },
+];
+
+export default function AppFooter() {
+  return (
+    <footer className="py-10 md:py-0 max-w-5xl px-5 min-w-fit w-full bottom-0 grid gap-y-5">
+      <section className="flex flex-row items-center w-full justify-between md:py-10 md:border-t md:border-light-1000/10">
+        <div className="flex flex-row items-center md:w-full">
+          <MarbleFiLogo customStyle="w-[101px] h-[23px] md:w-fit sm:h-auto" />
+
+          <div className="md:block hidden">
+            <FooterNaviationLinkWeb />
+          </div>
+        </div>
+        <div className="ml-2 w-full md:w-fit md:justify-end">
+          <Tag
+            text="v1.21"
+            testID="footer-version-tag"
+            customStyle="bg-light-1000/[0.05] px-3 !py-1 mr-2 w-fit"
+          />
+        </div>
+        <div className="flex flex-row items-center gap-x-2">
+          <FaReddit size={24} className="text-light-1000/50" />
+          <FaXTwitter size={24} className="text-light-1000/50" />
+        </div>
+      </section>
+
+      {/*  Mobile view */}
+      <div className="block md:hidden">
+        <FooterNaviationLinkMobile />
+      </div>
+    </footer>
+  );
+}
+
+function FooterNaviationLinkWeb() {
+  return (
+    <div className="flex flex-row divide-light-1000/10 ml-6 w-full">
+      {footerLinks.map((link, index) => (
+        <div key={link.title} className="flex flex-row items-center">
+          <a
+            href={link.link}
+            className={clsx(
+              "text-light-1000/50 font-mono text-sm px-3 text-center border-light-1000/10",
+              { "border-r": index !== footerLinks.length - 1 },
+            )}
+          >
+            {link.title}
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}
+function FooterNaviationLinkMobile() {
+  return (
+    <div className="flex flex-col">
+      {footerLinks.map((link, index) => (
+        <Link
+          key={link.title}
+          className={clsx(
+            "border-b py-2 border-light-1000/10 text-light-1000/50 active:text-opacity-10 text-xs cursor-pointer",
+            { "pt-0": index === 0 },
+            { "pb-0 border-b-0": index === footerLinks.length - 1 },
+          )}
+          href={link.link}
+        >
+          <span className="py-1">{link.title}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}

apps/web/src/app/app/components/AppLayout.tsx

@@ -14,6 +14,7 @@ import {
 import { ContractProvider } from "@/context/ContractContext";
 import { NetworkEnvironmentProvider } from "@/context/NetworkEnvironmentContext";
 import AppHeader from "@/app/app/components/AppHeader";
+import AppFooter from "@/app/app/components/AppFooter";
 
 const config = createConfig(
   getDefaultConfig({
@@ -62,10 +63,13 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
                   <ContractProvider>
                     <div
                       ref={contentRef}
-                      className="flex min-h-screen w-full flex-col items-center pb-8 text-light-1000"
+                      className="flex min-h-screen w-full flex-col items-center text-light-1000"
                     >
                       <AppHeader />
-                      <section className="mx-5 md:mx-12">{children}</section>
+                      <section className="mx-5 md:mx-12 flex-grow">
+                        {children}
+                      </section>
+                      <AppFooter />
                     </div>
                   </ContractProvider>
                 </NetworkEnvironmentProvider>

apps/web/src/components/Footer.tsx

@@ -26,14 +26,14 @@ export default function Footer({
         <figure className="flex flex-row gap-x-5">
           <Image
             data-testid="footer-reddit-icon"
-            src="/assets/icons/reddit.svg"
+            src="/assets/logos/reddit.svg"
             alt="Reddit Icon"
             width={24}
             height={24}
           />
           <Image
             data-testid="footer-x-icon"
-            src="/assets/icons/x.svg"
+            src="/assets/logos/x.svg"
             alt="X Icon"
             width={24}
             height={24}

apps/web/tsconfig.json

@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["cypress", "@testing-library/cypress"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]