Cookies Banner

apps/hub/src/app/Providers.tsx

@@ -6,6 +6,7 @@ import { BeraWagmi } from "@bera/wagmi";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 
+import CookiesSettingsBanner from "~/components/cookies-banner";
 import { ThemeProvider } from "~/components/theme-provider";
 
 export default function Providers({ children }: PropsWithChildren<any>) {
@@ -31,6 +32,7 @@ export default function Providers({ children }: PropsWithChildren<any>) {
               themes={["dark"]}
             >
               {children}
+              <CookiesSettingsBanner />
             </ThemeProvider>
           </BlockTimeProvider>
         </BeraJsProvider>

apps/hub/src/components/cookies-banner.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Tooltip } from "@bera/shared-ui";
+import { Button } from "@bera/ui/button";
+import posthog from "posthog-js";
+import { createPortal } from "react-dom";
+import { useLocalStorage } from "usehooks-ts";
+
+import { LOCAL_STORAGE_KEYS } from "~/utils/constants";
+
+export enum COOKIES_SETTING {
+  OPT_IN = "opt_in",
+  OPT_OUT = "opt_out",
+  UNDECIDED = "undecided",
+}
+
+export default function CookiesSettingsBanner() {
+  const [cookiesOptOut, setCookiesOptOut] = useLocalStorage<number | string>(
+    LOCAL_STORAGE_KEYS.COOKIES_OPT_OUT,
+    COOKIES_SETTING.UNDECIDED,
+  );
+
+  const handleAccept = () => {
+    setCookiesOptOut(COOKIES_SETTING.OPT_IN);
+    posthog.set_config({
+      persistence: "localStorage+cookie",
+      autocapture: true,
+    });
+    posthog.opt_in_capturing();
+  };
+
+  const handleReject = () => {
+    setCookiesOptOut(COOKIES_SETTING.OPT_OUT);
+    posthog.set_config({ persistence: "memory", autocapture: false });
+    posthog.opt_out_capturing();
+  };
+
+  if (
+    cookiesOptOut === COOKIES_SETTING.OPT_IN ||
+    cookiesOptOut === COOKIES_SETTING.OPT_OUT
+  ) {
+    return null;
+  }
+
+  // NOTE: we only display this when mounted client-side.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const banner = (
+    <div className="border-1 fixed bottom-4 left-2 right-2 z-50 flex flex-col gap-4 rounded-md border-muted-foreground bg-muted p-4 text-white shadow-lg md:left-4 md:right-4 md:flex-row md:items-center">
+      <h4 className="flex flex-1 items-center gap-1 font-sans leading-none">
+        Accept Tracking Cookies
+        <Tooltip text="We use tracking cookies to understand how you use the product and help us improve it." />
+      </h4>
+      <div className="flex gap-2 ">
+        <Button
+          variant="primary"
+          className="h-8 px-4 font-sans"
+          onClick={handleAccept}
+        >
+          Accept cookies
+        </Button>
+        <Button
+          variant="secondary"
+          className="h-8 px-4 font-sans"
+          onClick={handleReject}
+        >
+          Reject cookies
+        </Button>
+      </div>
+    </div>
+  );
+  return mounted ? createPortal(banner, document.body) : null;
+}

apps/hub/src/utils/constants.ts

@@ -8,6 +8,7 @@ export enum LOCAL_STORAGE_KEYS {
   DEADLINE_TYPE = "DEADLINE_TYPE",
   DEADLINE_VALUE = "DEADLINE_VALUE",
   CLAIM_REWARDS_RECIPIENT = "CLAIM_REWARDS_RECIPIENT",
+  COOKIES_OPT_OUT = "COOKIES_OPT_OUT",
 }
 
 // TODO (BFE-400): this and settings.tsx are defining similar things (mostly for the swap-settings & settings inputs)