feat(app): add maintenance page and config (#1342)

* feat(app): add maintenance mode page and config

* feat(app): remove /maintenance route

* feat(app): adding more instructions in the app/.env-example for NEXT_PUBLIC_MAINTENANCE_MODE_ON

---------

Co-authored-by: Gerald Iakobinyi-Pich <nutrina9@gmail.com>

app/.env-example.env

@@ -54,6 +54,14 @@ NEXT_PUBLIC_FF_CHAIN_SYNC=on
 NEXT_PUBLIC_EAS_INDEXER_URL=https://sepolia.easscan.org/graphql
 NEXT_PUBLIC_EAS_EXPLORER=https://sepolia.easscan.org
 
-
 NEXT_PUBLIC_ENABLE_TESTNET=on
 
+# NEXT_PUBLIC_MAINTENANCE_MODE_ON contains an JSON array of 2 ISO timestamps, which indicate the maintenance period.
+# Example with mountain time timestamps:
+# NEXT_PUBLIC_MAINTENANCE_MODE_ON=["2023-06-08T17:55:00.000-07:00", "2023-06-08T18:15:00.000-07:00"]
+# Example with UTC timestamps:
+# NEXT_PUBLIC_MAINTENANCE_MODE_ON=["2023-06-07T21:00:00.000Z", "2023-06-08T22:15:00.000Z"]
+# Leave empty if no maintenance is scheduled:
+# NEXT_PUBLIC_MAINTENANCE_MODE_ON=
+NEXT_PUBLIC_MAINTENANCE_MODE_ON=["2023-06-07T21:00:00.000Z", "2023-06-08T22:15:00.000Z"]
+

app/context/userContext.tsx

@@ -22,6 +22,7 @@ import { AccountId } from "caip";
 import { DID } from "dids";
 import { Cacao } from "@didtools/cacao";
 import axios from "axios";
+import { isServerOnMaintenance } from "../utils/helpers";
 
 export type DbAuthTokenStatus = "idle" | "failed" | "connected" | "connecting";
 
@@ -288,15 +289,17 @@ export const UserContextProvider = ({ children }: { children: any }) => {
     }
   };
 
-  // Init onboard to enable hooks
-  useEffect((): void => {
-    setWeb3Onboard(initWeb3Onboard);
-  }, []);
+  if (!isServerOnMaintenance()) {
+    // Init onboard to enable hooks
+    useEffect((): void => {
+      setWeb3Onboard(initWeb3Onboard);
+    }, []);
 
-  // Connect wallet on reload
-  useEffect((): void => {
-    setWalletFromLocalStorage();
-  }, []);
+    // Connect wallet on reload
+    useEffect((): void => {
+      setWalletFromLocalStorage();
+    }, []);
+  }
 
   useEffect((): void => {
     const loadDbAccessToken = async () => {

app/pages/Maintenance.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable react-hooks/exhaustive-deps, @next/next/no-img-element */
+// --- React Methods
+import React from "react";
+
+// --- Components
+import PageRoot from "../components/PageRoot";
+import MinimalHeader from "../components/MinimalHeader";
+import PageWidthGrid, { PAGE_PADDING } from "../components/PageWidthGrid";
+import HeaderContentFooterGrid from "../components/HeaderContentFooterGrid";
+import BodyWrapper from "../components/BodyWrapper";
+
+const Footer = () => (
+  <>
+    <div className="h-20 lg:hidden" />
+    <div className="hidden h-[360px] bg-[url(/assets/backgroundRock.png)] bg-contain bg-top bg-no-repeat lg:block" />
+  </>
+);
+
+export default function Maintenance() {
+  return (
+    <PageRoot className="text-color-2">
+      <HeaderContentFooterGrid>
+        <div className={`${PAGE_PADDING} bg-background`}>
+          <MinimalHeader className={`border-b border-accent-2`} />
+        </div>
+        <BodyWrapper className="mt-8 self-center">
+          <PageWidthGrid>
+            <div className="col-span-4 flex flex-col items-center text-center md:col-start-2 lg:col-start-3 xl:col-span-6 xl:col-start-4">
+              <img src="/assets/gitcoinLogoType.svg" alt="Gitcoin Logo" />
+              <img src="/assets/passportLandingPageLogo.svg" alt="Passport Logo" className="pt-6" />
+              <div className="py-4 font-heading text-2xl text-color-3">Sorry, we&#39;re down for maintenance.</div>
+              <div className="text-base">
+                Gitcoin Passport is currently down for scheduled maintenance. Please check back again as we will be back
+                up shortly. For more information, check{" "}
+                <a
+                  className="text-accent-3 hover:underline"
+                  href="https://twitter.com/gitcoinpassport"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @GitcoinPassport
+                </a>{" "}
+                for updates.
+              </div>
+            </div>
+          </PageWidthGrid>
+        </BodyWrapper>
+        <Footer />
+      </HeaderContentFooterGrid>
+    </PageRoot>
+  );
+}

app/pages/index.tsx

@@ -11,10 +11,12 @@ import Home from "./Home";
 import Welcome from "./Welcome";
 import Dashboard from "./Dashboard";
 import Privacy from "./privacy";
+import Maintenance from "./Maintenance";
 
 // -- Datadog
 import { datadogRum } from "@datadog/browser-rum";
 import { datadogLogs } from "@datadog/browser-logs";
+import { isServerOnMaintenance } from "../utils/helpers";
 
 datadogRum.init({
   applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID || "",
@@ -40,6 +42,10 @@ datadogLogs.init({
 });
 
 const App: NextPage = () => {
+  if (isServerOnMaintenance()) {
+    return <Maintenance />;
+  }
+
   return (
     <div>
       <Router>

app/utils/helpers.tsx

@@ -101,3 +101,25 @@ export const getProviderSpec = (platform: PLATFORM_ID, provider: string): Provid
     ?.find((i) => i.providers.find((p) => p.name == provider))
     ?.providers.find((p) => p.name == provider) as ProviderSpec;
 };
+
+/**
+ * Checks if the server is on maintenance mode.
+ *
+ * @returns True if the server is on maintenance mode, false otherwise.
+ */
+export const isServerOnMaintenance = () => {
+  if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE_ON) {
+    try {
+      const maintenancePeriod = JSON.parse(process.env.NEXT_PUBLIC_MAINTENANCE_MODE_ON);
+      const start = new Date(maintenancePeriod[0]);
+      const end = new Date(maintenancePeriod[1]);
+      const now = new Date();
+
+      return now >= start && now <= end;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  return false;
+};

types/src/index.d.ts

@@ -1,7 +1,6 @@
 import { JsonRpcSigner } from "@ethersproject/providers";
 // BrightId Shared Types
 export { BrightIdProcedureResponse, BrightIdVerificationResponse, BrightIdSponsorshipResponse } from "./brightid";
-import { BigNumber } from "@ethersproject/bignumber";
 
 // Typing for required parts of DIDKit
 export type DIDKitLib = {