Bugfixes for orientation, zen mode and final touches to referrals

packages/app/src/common/container/TopicContainer.tsx

@@ -36,7 +36,7 @@ const _TopicContainer: ForwardRefRenderFunction<
 > = ({ children, titleContents, className, active = false, ...rest }, ref) => (
   <div
     className={clx(
-      "container mx-auto flex flex-col justify-start items-center",
+      "relative flex flex-col justify-start items-center",
       className
     )}
     ref={ref}

packages/app/src/common/context/ZenModeContext.tsx

@@ -8,15 +8,15 @@ import {
   useEffect,
 } from "react";
 
-interface ZenModeSettings {
+export interface ZenModeSettings {
   showBGImage: boolean;
   showExternalLinks: boolean;
   showHelpButton: boolean;
   showWallet: boolean;
 }
 
 const ZenModeContext = createContext<
-  [ZenModeSettings, Dispatch<ZenModeSettings>]
+  [ZenModeSettings, Dispatch<React.SetStateAction<ZenModeSettings>>]
 >([
   {
     showBGImage: false,
@@ -50,7 +50,9 @@ const ZenModeProvider: FC<{ children: ReactNode }> = ({ children }) => {
   );
 };
 
-const useZenMode = (): [ZenModeSettings, Dispatch<ZenModeSettings>] =>
-  useContext(ZenModeContext);
+const useZenMode = (): [
+  ZenModeSettings,
+  Dispatch<React.SetStateAction<ZenModeSettings>>
+] => useContext(ZenModeContext);
 
 export { ZenModeProvider, useZenMode };

packages/app/src/forest/ForestApp.tsx

@@ -22,6 +22,7 @@ import { ForestLink } from "./ForestLink";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { type ParentRelationship, type TreeNode } from "../api/types";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
+import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const ForestTree: FC<{ details: TreeComponent; style?: CSSProperties }> = ({
   details,
@@ -98,16 +99,17 @@ const _ForestApp: ForwardRefRenderFunction<
   HTMLDivElement,
   { className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
 > = ({ className, active = false, ...rest }, ref) => {
-  const [zenMode, updateZenMode] = useZenMode();
+  const [, updateZenMode] = useZenMode();
   const { currentHelpRoute } = useHelp();
+  const { screenType } = useScreenOrientation();
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Forest) return; // we are not on the forest page, so don't update zen mode
-    updateZenMode({
-      ...zenMode,
+    updateZenMode((prev) => ({
+      ...prev,
       showHelpButton: true,
-      showExternalLinks: false,
+      showExternalLinks: screenType !== "mobilePortrait",
       showWallet: false,
-    });
+    }));
   }, [active, currentHelpRoute]);
 
   const navigate = useNavigate();

packages/app/src/grow/GrowApp.tsx

@@ -25,6 +25,7 @@ import { partners } from "./partners";
 import { PartnerButton } from "./components/PartnerButton";
 import { OrgButtonContent } from "./OrgButtonContent";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
+import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const Placeholder: FC<PropsWithChildren> = ({ children }) => (
   <div className="transition-all text-xl font-medium text-center text-green hover:text-green-light border border-green hover:border-green-light p-8 rounded-md w-40 h-40 hover:scale-105 hover:brightness-105">
@@ -43,18 +44,20 @@ const _GrowApp: ForwardRefRenderFunction<
 
   const navigate = useNavigate();
   const wallet = useWallet();
+  const { screenType } = useScreenOrientation();
   useEffect(() => {
     if (!wallet.connected && active) navigate("/");
   }, [active, wallet.connected]);
 
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Grow) return; // we are not on the grow page, so don't update zen mode
-    updateZenMode({
+    updateZenMode((prev) => ({
+      ...prev,
       showBGImage: false,
       showHelpButton: true,
-      showExternalLinks: false,
+      showExternalLinks: screenType !== "mobilePortrait",
       showWallet: active,
-    });
+    }));
   }, [active, currentHelpRoute]);
 
   const sendGSolModal = useModal(() => {});

packages/app/src/guide/components/GuideSelector.tsx

@@ -7,6 +7,7 @@ import { StakeGuide } from "../content/StakeGuide";
 import { useHelp } from "../../common/context/HelpContext";
 import { AppRoute } from "../../Routes";
 import { ConnectGuide } from "../content/ConnectGuide";
+import { ReferGuide } from "../content/ReferGuide";
 
 export const GuideSelector: FC = () => {
   const { currentHelpRoute } = useHelp();
@@ -26,6 +27,8 @@ export const GuideSelector: FC = () => {
       return <StakeGuide />;
     case AppRoute.Connect:
       return <ConnectGuide />;
+    case AppRoute.Referral:
+      return <ReferGuide />;
     default:
       return <></>;
   }

packages/app/src/guide/content/ReferGuide.tsx

@@ -0,0 +1,23 @@
+import { type FC } from "react";
+import { BaseGuide } from "../components/BaseGuide";
+import { type GuideEntryProps } from "../components/GuideEntry";
+
+const entries: GuideEntryProps[] = [
+  {
+    image: "guide/stake/1.png",
+    children: <>Share your referral link with friends to build your forest!</>,
+  },
+  {
+    image: "guide/refer/2.png",
+    children: (
+      <div className="py-8">
+        The more people stake at least 0.1 gSOL using your link, the more trees
+        grow in your forest, and the higher you climb the leaderboard.
+      </div>
+    ),
+  },
+];
+
+export const ReferGuide: FC = () => {
+  return <BaseGuide entries={entries} />;
+};

packages/app/src/hub/HubApp.tsx

@@ -22,6 +22,7 @@ import { useForest } from "../common/context/forestContext";
 import { useHelp } from "../common/context/HelpContext";
 import { AppRoute } from "../Routes";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
+import { useScreenOrientation } from "./hooks/useScreenOrientation";
 
 const LINK_CHEVRON_SIZE = 32;
 
@@ -31,7 +32,7 @@ const _HubApp: ForwardRefRenderFunction<
 > = ({ className, active = false, ...rest }, ref) => {
   const wallet = useWallet();
   const { setCurrentHelpRoute, currentHelpRoute } = useHelp();
-  const [zenMode, updateZenMode] = useZenMode();
+  const [, updateZenMode] = useZenMode();
   const { myTree } = useForest();
   const { totalCarbon } = useCarbon();
 
@@ -40,6 +41,7 @@ const _HubApp: ForwardRefRenderFunction<
   const [showHubNav, updateShowHubNav] = useState(false);
 
   const wasHubNavShown = useRef(false);
+  const { screenType } = useScreenOrientation();
   const showWalletButton = useMemo(() => {
     return wallet.connected && showHubNav;
   }, [wallet.connected, showHubNav]);
@@ -76,46 +78,53 @@ const _HubApp: ForwardRefRenderFunction<
 
   // Once intro is done, and tree data available show hub
   useEffect(() => {
-    if (introLeft && myTree) {
-      const tid = setTimeout(() => {
-        if (!wasHubNavShown.current) updateShowHubNav(true);
-      }, 5000);
+    console.log("ShowHub useEffect");
+    if (myTree) {
+      const showNavTid = setTimeout(() => {
+        console.log("ShowHub useEffect timeout");
+        if (!wasHubNavShown.current) {
+          updateShowHubNav(true);
+        } else {
+          console.log("ShowHub useEffect timeout else", {
+            wasHubNavShown: wasHubNavShown.current,
+          });
+        }
+      }, 3000);
+
+      const showLinksTid = setTimeout(() => {
+        console.log("showLinks useEffect timeout");
+        updateZenMode((prev) => ({
+          ...prev,
+          showExternalLinks: screenType !== "mobilePortrait",
+        }));
+      }, 6000);
 
       return () => {
-        clearTimeout(tid);
+        console.log("ShowHub useEffect cleanup");
+        clearTimeout(showNavTid);
+        clearTimeout(showLinksTid);
       };
+    } else {
+      console.log("ShowHub useEffect else", { introLeft, myTree });
     }
   }, [myTree, introLeft]);
 
   useEffect(() => {
     if (showHubNav) wasHubNavShown.current = true;
-    updateZenMode({
-      ...zenMode,
+    updateZenMode((prev) => ({
+      ...prev,
       showHelpButton: showHubNav,
-      showExternalLinks: false,
       showWallet: showWalletButton,
-    });
+    }));
   }, [showHubNav, showWalletButton]);
 
-  useEffect(() => {
-    setTimeout(() => {
-      updateZenMode({
-        ...zenMode,
-        showHelpButton: true,
-        showExternalLinks: true,
-        showWallet: false,
-      });
-    }, 3000);
-  }, []);
-
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Hub) return; // we are not on the hub page, so don't update zen mode
-    updateZenMode({
-      ...zenMode,
+    updateZenMode((prev) => ({
+      ...prev,
       showHelpButton: showHubNav,
-      showExternalLinks: false,
       showWallet: showWalletButton,
-    });
+    }));
   }, [active, currentHelpRoute, showHubNav, showWalletButton]);
 
   return (

packages/app/src/hub/hooks/useScreenOrientation.ts

@@ -0,0 +1,17 @@
+import { useWindowSize } from "usehooks-ts";
+import { useMemo } from "react";
+import { isMobilePortrait } from "../../common/utils";
+
+export const useScreenOrientation = (): {
+  screenType: "mobilePortrait" | "landscapeOrDesktop";
+} => {
+  const windowSize = useWindowSize();
+  const isPortrait = useMemo(
+    () => isMobilePortrait(windowSize.width),
+    [windowSize]
+  );
+
+  return {
+    screenType: isPortrait ? "mobilePortrait" : "landscapeOrDesktop",
+  };
+};

packages/app/src/locking/LockingApp.tsx

@@ -31,6 +31,7 @@ import { LockForm } from "./LockForm";
 import { LockingSuccessModal } from "./LockingSuccessModal";
 import { useInfoModal } from "../common/hooks/useInfoModal";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
+import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 // one full epoch has passed since the lock was created
 const canBeUnlocked = (details: Details | undefined): boolean => {
@@ -56,18 +57,20 @@ const _LockingApp: ForwardRefRenderFunction<
   const { refresh } = useNFTs();
   const navigate = useNavigate();
   const wallet = useWallet();
+  const { screenType } = useScreenOrientation();
   useEffect(() => {
     if (!wallet.connected && active) navigate("/");
   }, [active, wallet.connected]);
 
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Lock) return; // we are not on the lock page, so don't update zen mode
-    updateZenMode({
+    updateZenMode((prev) => ({
+      ...prev,
       showBGImage: false,
       showHelpButton: true,
-      showExternalLinks: false,
       showWallet: active,
-    });
+      showExternalLinks: screenType !== "mobilePortrait",
+    }));
   }, [active, currentHelpRoute]);
 
   const { client, details, loading } = useSunriseStake();

packages/app/src/referral/ReferralApp.tsx

@@ -17,9 +17,9 @@ import { LinkWithQuery } from "../common/components/LinkWithQuery";
 import { TopicContainer } from "../common/container/TopicContainer";
 import { Card } from "../common/container/Card";
 import { ReferralOptions } from "./ReferralOptions";
-import { ReferralLink } from "./ReferralLink";
 import { isMobilePortrait } from "../common/utils";
 import { useWindowSize } from "usehooks-ts";
+import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const Title: FC = () => (
   <div className="topic-title w-full mt-8">
@@ -59,6 +59,7 @@ const _ReferralApp: ForwardRefRenderFunction<
 > = ({ className, active = false, ...rest }, ref) => {
   const { currentHelpRoute } = useHelp();
   const [, updateZenMode] = useZenMode();
+  const { screenType } = useScreenOrientation();
 
   const navigate = useNavigate();
   const wallet = useWallet();
@@ -73,12 +74,13 @@ const _ReferralApp: ForwardRefRenderFunction<
 
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Lock) return; // we are not on the lock page, so don't update zen mode
-    updateZenMode({
+    updateZenMode((prev) => ({
+      ...prev,
       showBGImage: false,
       showHelpButton: true,
-      showExternalLinks: false,
       showWallet: active,
-    });
+      showExternalLinks: screenType !== "mobilePortrait",
+    }));
   }, [active, currentHelpRoute]);
 
   return (
@@ -101,7 +103,6 @@ const _ReferralApp: ForwardRefRenderFunction<
         <div className="mx-4 mb-3 flex flex-col items-center">
           <Wrapper>
             <ReferralOptions link={link} />
-            <ReferralLink link={link} />
           </Wrapper>
         </div>
       )}

packages/app/src/referral/ReferralOptions.tsx

@@ -1,20 +1,16 @@
-import React, { type FC, useMemo } from "react";
+import React, { type FC } from "react";
 import { ShareButton } from "./ShareButton";
 import { FaShareSquare } from "react-icons/fa";
 import { Tweet } from "../common/components/Tweet";
 import { CopyButton } from "./CopyButton";
 import { Card } from "../common/container/Card";
 import { ReferTweetButton } from "./ReferTweetButton";
 import { QRCodeCard } from "./QRCodeCard";
-import { isMobilePortrait } from "../common/utils";
-import { useWindowSize } from "usehooks-ts";
+import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 export const ReferralOptions: FC<{ link: string }> = ({ link }) => {
-  const windowSize = useWindowSize();
-  const isPortrait = useMemo(
-    () => isMobilePortrait(windowSize.width),
-    [windowSize]
-  );
+  const { screenType } = useScreenOrientation();
+  const isPortrait = screenType === "mobilePortrait";
   const shareSupported = window.navigator?.canShare?.();
 
   return (