add allo version switch button to the footer (#2895)

* add allo version switch button to the footer

* enable Allo switch button if VERCEL_ENV === "preview"

* check `typeof window` before using localStorage for configOverrides

* remove unused check on VERCEL_ENV

* add the common pkg to the tailwind config in Builder

packages/builder/tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   // if this is not set it will default to user's operating system preferences
   darkMode: "class",
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "../common/src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
       boxShadow: {

packages/common/src/components/Footer.tsx

@@ -2,7 +2,7 @@ import Discord from "../icons/Discord";
 import Support from "../icons/Support";
 import Github from "../icons/Github";
 import Gitbook from "../icons/Gitbook";
-import { getConfig } from "../config";
+import { getConfig, setLocalStorageConfigOverride } from "../config";
 
 const navigation = [
   {
@@ -31,17 +31,35 @@ const navigation = [
   },
 ];
 
+const config = getConfig();
 const COMMIT_HASH = process.env.REACT_APP_GIT_SHA ?? "localhost";
-const ALLO_VERSION = getConfig().allo.version;
+const ALLO_VERSION = config.allo.version;
+
+function switchAlloVersion(version: string) {
+  setLocalStorageConfigOverride("allo-version", version);
+  window.location.reload();
+}
 
 export default function Footer() {
+  const alloVersionAlternative =
+    ALLO_VERSION === "allo-v1" ? "allo-v2" : "allo-v1";
+
   return (
-    <footer className={"p-3 px-8 flex flex-row justify-between items-center"}>
+    <footer
+      className={
+        "p-3 px-8 flex flex-row justify-between items-center relative z-10"
+      }
+    >
       <div className={"text-gray-500 text-xs"}>
-        build{" "}
-        <pre className={"inline"}>
-          {COMMIT_HASH} {ALLO_VERSION}
-        </pre>
+        build {COMMIT_HASH}-{ALLO_VERSION}
+        {config.appEnv === "development" && (
+          <button
+            className="ml-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            onClick={() => switchAlloVersion(alloVersionAlternative)}
+          >
+            Switch to {alloVersionAlternative}
+          </button>
+        )}
       </div>
       <div className="flex flex-row-reverse justify-between py-12 overflow-hidden">
         <div className="flex justify-around space-x-4 md:order-1">

packages/common/src/config.ts

@@ -40,8 +40,50 @@ export type Config = {
   };
 };
 
+type LocalStorageConfigOverrides = Record<string, string>;
+
 let config: Config | null = null;
 
+function getLocalStorageConfigOverrides(): LocalStorageConfigOverrides {
+  if (typeof window === "undefined") {
+    return {};
+  }
+
+  const configOverrides =
+    window.localStorage.getItem("configOverrides") || "{}";
+  return JSON.parse(configOverrides);
+}
+
+export function setLocalStorageConfigOverride(key: string, value: string) {
+  if (typeof window === "undefined") {
+    throw new Error("window is not defined");
+  }
+
+  const configOverrides = getLocalStorageConfigOverrides();
+  configOverrides[key] = value;
+  window.localStorage.setItem(
+    "configOverrides",
+    JSON.stringify(configOverrides)
+  );
+}
+
+function overrideConfigFromLocalStorage(config: Config): Config {
+  const configOverrides = getLocalStorageConfigOverrides();
+
+  const alloVersion = z
+    .enum(["allo-v1", "allo-v2"])
+    .catch(() => config.allo.version)
+    .parse(configOverrides["allo-version"]);
+
+  return {
+    ...config,
+    allo: {
+      ...config.allo,
+      version: alloVersion,
+    },
+  };
+}
+
 export function getConfig(): Config {
   if (config !== null) {
     return config;
@@ -158,5 +200,9 @@ export function getConfig(): Config {
     },
   };
 
+  if (config.appEnv === "development") {
+    config = overrideConfigFromLocalStorage(config);
+  }
+
   return config;
 }

packages/grant-explorer/src/features/common/DefaultLayout.tsx

@@ -36,6 +36,12 @@ export function GradientLayout({
       </div>
 
       <Footer />
+
+      {
+        // FIXME: this is the wrong way to make a gradient for the main content
+        // since it's a div that's covering the full page and any other content
+        // without a higher z-index is not clickable.
+      }
       <div
         className="min-h-screen absolute inset-0"
         style={{