Skip to content

Commit

Permalink
Bugfixes for orientation, zen mode and final touches to referrals
Browse files Browse the repository at this point in the history
  • Loading branch information
dankelleher committed Oct 17, 2023
1 parent c3af3f7 commit 85f491e
Show file tree
Hide file tree
Showing 15 changed files with 123 additions and 63 deletions.
Binary file added packages/app/public/guide/refer/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/app/public/guide/refer/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/app/src/common/container/TopicContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
10 changes: 6 additions & 4 deletions packages/app/src/common/context/ZenModeContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 };
12 changes: 7 additions & 5 deletions packages/app/src/forest/ForestApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();
Expand Down
9 changes: 6 additions & 3 deletions packages/app/src/grow/GrowApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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(() => {});
Expand Down
3 changes: 3 additions & 0 deletions packages/app/src/guide/components/GuideSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -26,6 +27,8 @@ export const GuideSelector: FC = () => {
return <StakeGuide />;
case AppRoute.Connect:
return <ConnectGuide />;
case AppRoute.Referral:
return <ReferGuide />;
default:
return <></>;
}
Expand Down
23 changes: 23 additions & 0 deletions packages/app/src/guide/content/ReferGuide.tsx
Original file line number Diff line number Diff line change
@@ -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: (
<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} />;
};
59 changes: 34 additions & 25 deletions packages/app/src/hub/HubApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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();

Expand All @@ -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]);
Expand Down Expand Up @@ -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 (
Expand Down
17 changes: 17 additions & 0 deletions packages/app/src/hub/hooks/useScreenOrientation.ts
Original file line number Diff line number Diff line change
@@ -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",
};
};
9 changes: 6 additions & 3 deletions packages/app/src/locking/LockingApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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();
Expand Down
11 changes: 6 additions & 5 deletions packages/app/src/referral/ReferralApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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();
Expand All @@ -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 (
Expand All @@ -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>
)}
Expand Down
12 changes: 4 additions & 8 deletions packages/app/src/referral/ReferralOptions.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
Loading

0 comments on commit 85f491e

Please sign in to comment.