diff --git a/public/images/tom_alerts.png b/public/images/tom_alerts.png new file mode 100644 index 00000000..102a511c Binary files /dev/null and b/public/images/tom_alerts.png differ diff --git a/src/common/components/organisms/InfoBanner.tsx b/src/common/components/organisms/InfoBanner.tsx new file mode 100644 index 00000000..75f0b2fe --- /dev/null +++ b/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 ( + + +
+
+ rocket +

{message}

+
+ + + +
+
+ +
+ ); +} diff --git a/src/common/components/templates/Space.tsx b/src/common/components/templates/Space.tsx index 6ce6cbfc..df327084 100644 --- a/src/common/components/templates/Space.tsx +++ b/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; @@ -106,6 +107,9 @@ export default function Space({
+
+ +
{!isUndefined(profile) ? (
{profile}
) : null} diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts index cad76c39..5d352a4b 100644 --- a/src/fidgets/index.ts +++ b/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 = { //