@@ -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