tom alerts - pr fix (#294)

src/common/components/organisms/InfoBanner.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { FaTimes } from "react-icons/fa";
+import * as Toast from "@radix-ui/react-toast";
+import { useAppStore } from "@/common/data/stores/app";
+import { useFarcasterSigner } from "@/fidgets/farcaster";
+import { useLoadFarcasterUser } from "@/common/data/queries/farcaster";
+import { first } from "lodash";
+
+export default function InfoToast() {
+  const [isDisplayed, setIsDisplayed] = useState(false);
+  const [message, setMessage] = useState("");
+  const [duration, setDuration] = useState(10000);
+  const router = useRouter();
+  const { pathname, query } = router;
+  const spaceFarcasterName = query.handle;
+  const { fid } = useFarcasterSigner("navigation");
+  const { data } = useLoadFarcasterUser(fid);
+  const user = useMemo(() => first(data?.users), [data]);
+  const username = useMemo(() => user?.username, [user]);
+  const { getIsLoggedIn } = useAppStore((state) => ({
+    getIsLoggedIn: state.getIsAccountReady,
+  }));
+  const isLoggedIn = getIsLoggedIn();
+
+  const checkPageType = (pathname, spaceFarcasterName, username) => {
+    if (pathname === "/homebase") {
+      return {
+        type: "homebase",
+        storedStateKey: "homebaseToastDisplayed",
+        message:
+          "Your homebase is a space that only you can see. Click the paintbrush to customize it 🚀",
+      };
+    } else if (pathname.startsWith("/s/") && spaceFarcasterName === username) {
+      return {
+        type: "profile",
+        storedStateKey: "profileToastDisplayed",
+        message:
+          "This is your profile. Click the paintbrush to customize your space.",
+      };
+    }
+    return null;
+  };
+
+  useEffect(() => {
+    const pageType = checkPageType(pathname, spaceFarcasterName, username);
+    if (pageType) {
+      const storedState = localStorage.getItem(pageType.storedStateKey);
+      if (!storedState && isLoggedIn) {
+        setIsDisplayed(true);
+        setMessage(pageType.message);
+        setDuration(10000);
+      } else {
+        setIsDisplayed(false);
+      }
+    } else {
+      setIsDisplayed(false);
+    }
+  }, [pathname, spaceFarcasterName, username]);
+
+  const closeToast = () => {
+    setIsDisplayed(false);
+    const pageType = checkPageType(pathname, spaceFarcasterName, username);
+    if (pageType) {
+      localStorage.setItem(pageType.storedStateKey, "true");
+    }
+  };
+
+  return (
+    <Toast.Provider>
+      <Toast.Root
+        open={isDisplayed}
+        onOpenChange={setIsDisplayed}
+        duration={duration}
+        className="fixed bottom-4 right-4 p-4 bg-blue-100 border border-blue-300 rounded-md shadow-lg"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <img
+              src="/images/tom_alerts.png"
+              alt="rocket"
+              className="w-8 h-8 object-contain"
+            />
+            <p className="text-blue-600 ml-2">{message}</p>
+          </div>
+          <Toast.Action altText="Close" asChild>
+            <button onClick={closeToast} className="bg-transparent">
+              <FaTimes className="text-blue-600" />
+            </button>
+          </Toast.Action>
+        </div>
+      </Toast.Root>
+      <Toast.Viewport />
+    </Toast.Provider>
+  );
+}

src/common/components/templates/Space.tsx

@@ -11,6 +11,7 @@ import { LayoutFidgets } from "@/fidgets";
 import { UserTheme } from "@/common/lib/theme";
 import CustomHTMLBackground from "@/common/components/molecules/CustomHTMLBackground";
 import { isNil, isUndefined } from "lodash";
+import InfoToast from "../organisms/InfoBanner";
 
 export type SpaceFidgetConfig = {
   instanceConfig: FidgetConfig<FidgetSettings>;
@@ -106,6 +107,9 @@ export default function Space({
       <CustomHTMLBackground html={config.theme?.properties.backgroundHTML} />
       <div className="w-full transition-all duration-100 ease-out h-full">
         <div className="h-full flex flex-col">
+          <div style={{ position: "fixed", zIndex: 9999 }}>
+            <InfoToast />
+          </div>
           {!isUndefined(profile) ? (
             <div className="z-50 bg-white h-40">{profile}</div>
           ) : null}

src/fidgets/index.ts

@@ -10,7 +10,6 @@ import NounishGovernance from "./community/nouns-dao/NounishGovernance";
 import Cast from "./farcaster/Cast";
 import Feed from "./farcaster/Feed";
 import CreateCast from "./farcaster/CreateCast";
-import zoraEmbed from "./zora/zoraEmbed";
 
 export const CompleteFidgets = {
   //