diff --git a/packages/app/public/guide/refer/1.png b/packages/app/public/guide/refer/1.png new file mode 100644 index 00000000..ae0dfcfc Binary files /dev/null and b/packages/app/public/guide/refer/1.png differ diff --git a/packages/app/public/guide/refer/2.png b/packages/app/public/guide/refer/2.png new file mode 100644 index 00000000..9a0fb2d1 Binary files /dev/null and b/packages/app/public/guide/refer/2.png differ diff --git a/packages/app/src/common/container/TopicContainer.tsx b/packages/app/src/common/container/TopicContainer.tsx index ddf31252..e25449b6 100644 --- a/packages/app/src/common/container/TopicContainer.tsx +++ b/packages/app/src/common/container/TopicContainer.tsx @@ -36,7 +36,7 @@ const _TopicContainer: ForwardRefRenderFunction< > = ({ children, titleContents, className, active = false, ...rest }, ref) => (
] + [ZenModeSettings, Dispatch>] >([ { showBGImage: false, @@ -50,7 +50,9 @@ const ZenModeProvider: FC<{ children: ReactNode }> = ({ children }) => { ); }; -const useZenMode = (): [ZenModeSettings, Dispatch] => - useContext(ZenModeContext); +const useZenMode = (): [ + ZenModeSettings, + Dispatch> +] => useContext(ZenModeContext); export { ZenModeProvider, useZenMode }; diff --git a/packages/app/src/forest/ForestApp.tsx b/packages/app/src/forest/ForestApp.tsx index 1040d0e1..d98edb76 100644 --- a/packages/app/src/forest/ForestApp.tsx +++ b/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 > = ({ 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(); diff --git a/packages/app/src/grow/GrowApp.tsx b/packages/app/src/grow/GrowApp.tsx index b98a791b..1703dd72 100644 --- a/packages/app/src/grow/GrowApp.tsx +++ b/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 = ({ children }) => (
@@ -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(() => {}); diff --git a/packages/app/src/guide/components/GuideSelector.tsx b/packages/app/src/guide/components/GuideSelector.tsx index adbadcfe..7fa13638 100644 --- a/packages/app/src/guide/components/GuideSelector.tsx +++ b/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 ; case AppRoute.Connect: return ; + case AppRoute.Referral: + return ; default: return <>; } diff --git a/packages/app/src/guide/content/ReferGuide.tsx b/packages/app/src/guide/content/ReferGuide.tsx new file mode 100644 index 00000000..d4fb5fbc --- /dev/null +++ b/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/refer/1.png", + children: <>Share your referral link with friends to build your forest!, + }, + { + image: "guide/refer/2.png", + children: ( +
+ 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. +
+ ), + }, +]; + +export const ReferGuide: FC = () => { + return ; +}; diff --git a/packages/app/src/hub/HubApp.tsx b/packages/app/src/hub/HubApp.tsx index cf1ba064..d06bd456 100644 --- a/packages/app/src/hub/HubApp.tsx +++ b/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 ( diff --git a/packages/app/src/hub/hooks/useScreenOrientation.ts b/packages/app/src/hub/hooks/useScreenOrientation.ts new file mode 100644 index 00000000..99699fdb --- /dev/null +++ b/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", + }; +}; diff --git a/packages/app/src/locking/LockingApp.tsx b/packages/app/src/locking/LockingApp.tsx index 8edda43c..7ccdf9f3 100644 --- a/packages/app/src/locking/LockingApp.tsx +++ b/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(); diff --git a/packages/app/src/referral/ReferralApp.tsx b/packages/app/src/referral/ReferralApp.tsx index 1d16c985..80822d86 100644 --- a/packages/app/src/referral/ReferralApp.tsx +++ b/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 = () => (
@@ -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<
-
)} diff --git a/packages/app/src/referral/ReferralOptions.tsx b/packages/app/src/referral/ReferralOptions.tsx index 362c1377..b7f9b49f 100644 --- a/packages/app/src/referral/ReferralOptions.tsx +++ b/packages/app/src/referral/ReferralOptions.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,15 +6,11 @@ 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 ( diff --git a/packages/app/src/staking/StakingApp.tsx b/packages/app/src/staking/StakingApp.tsx index b4052629..54e9eaa6 100644 --- a/packages/app/src/staking/StakingApp.tsx +++ b/packages/app/src/staking/StakingApp.tsx @@ -7,6 +7,7 @@ import { AppRoute } from "../Routes"; import { useHelp } from "../common/context/HelpContext"; import { useNavigate } from "react-router-dom"; import { useWallet } from "@solana/wallet-adapter-react"; +import { useScreenOrientation } from "../hub/hooks/useScreenOrientation"; const _StakingApp: ForwardRefRenderFunction< HTMLDivElement, @@ -14,6 +15,7 @@ const _StakingApp: ForwardRefRenderFunction< > = ({ className, active = false, ...rest }, ref) => { const { currentHelpRoute } = useHelp(); const [, updateZenMode] = useZenMode(); + const { screenType } = useScreenOrientation(); const navigate = useNavigate(); const wallet = useWallet(); @@ -23,23 +25,22 @@ const _StakingApp: ForwardRefRenderFunction< useEffect(() => { if (currentHelpRoute !== AppRoute.Stake) return; // we are not on the stake page, so don't update zen mode - updateZenMode({ + updateZenMode((prev) => ({ + ...prev, showBGImage: false, showHelpButton: true, - showExternalLinks: false, + showExternalLinks: screenType !== "mobilePortrait", showWallet: active, - }); + })); }, [active, currentHelpRoute]); return (
-
- -
+
); }; diff --git a/packages/app/src/staking/pages/StakeDashboard.tsx b/packages/app/src/staking/pages/StakeDashboard.tsx index 18255191..6f6f05c3 100644 --- a/packages/app/src/staking/pages/StakeDashboard.tsx +++ b/packages/app/src/staking/pages/StakeDashboard.tsx @@ -135,7 +135,7 @@ const StakeDashboard: FC = () => { }; return ( -
+
{ className="flex items-center text-green justify-center mb-8" >
- Lock + Lock