Skip to content

Commit

Permalink
Fix hub
Browse files Browse the repository at this point in the history
  • Loading branch information
ronnyhaase committed Oct 22, 2023
1 parent 6b8178e commit 7263f99
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 126 deletions.
18 changes: 13 additions & 5 deletions packages/app/src/common/components/tree/DynamicTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,20 @@ const width = (index: number, total: number): string => {
};

export const DynamicTree: FC<{
className?: string;
details: TreeComponent;
style?: CSSProperties;
islandHeight?: number;
onClick?: () => void;
className?: string;
style?: CSSProperties;
variant?: "sm" | "md";
}> = ({ details, style = {}, onClick, className = "", variant = "md" }) => {
}> = ({
className = "",
details,
islandHeight = 300,
onClick,
style = {},
variant = "md",
}) => {
const { level, species } = details.metadata.type;

const treeImages = [];
Expand Down Expand Up @@ -119,8 +127,8 @@ export const DynamicTree: FC<{
<Island
className={
variant === "sm"
? "w-[300px] h-[300px] scale-50"
: "w-[300px] h-[300px]"
? `w-[300px] h-[${islandHeight}px] scale-50`
: `w-[300px] h-[${islandHeight}px]`
}
>
{components}
Expand Down
243 changes: 123 additions & 120 deletions packages/app/src/hub/HubApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,105 +128,39 @@ const _HubApp: ForwardRefRenderFunction<
return (
<div
className={clx(
"flex flex-col items-center justify-center pb-12 text-center text-green",
"flex flex-col items-center justify-center pt-2 pb-10 text-center text-green",
className
)}
ref={ref}
{...rest}
>
<div className="w-full max-h-full m-auto overflow-auto">
<Spinner
className={
(introLeft && !showHub) || totalCarbon === undefined
? "block"
: "hidden"
}
/>
<HubIntro
show={showIntro}
onEnter={() => {
updateIntroLeft(false);
}}
onLeft={() => {
updateIntroLeft(true);
}}
/>
<div className={showHub ? "block" : "hidden"}>
<div className="flex justify-center">
<LinkWithQuery
to="/forest"
className={clx(
"hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<div className="flex items-center nowrap text-2xl">
<IoChevronBackOutline
className="inline"
size={LINK_CHEVRON_SIZE}
/>
<span>Forest</span>
</div>
</LinkWithQuery>
{myTree && (
<DynamicTree
details={myTree}
className={`FloatingTree mb-8`}
onClick={() => {
updateShowHubNav(!showHubNav);
}}
/>
)}
<LinkWithQuery
to="/grow"
className={clx(
"hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<div className="flex relative items-center nowrap text-2xl">
<span>Grow</span>
<IoChevronForwardOutline
className="inline"
size={LINK_CHEVRON_SIZE}
/>
</div>
</LinkWithQuery>
</div>
<div className="w-full mt-2 text-center">
{myTree?.metadata?.type?.level !== undefined &&
myTree?.metadata?.type?.level > 0 ? (
<div
<div className="flex justify-center">
<Spinner
className={
(introLeft && !showHub) || totalCarbon === undefined
? "block"
: "hidden"
}
/>
<HubIntro
show={showIntro}
onEnter={() => {
updateIntroLeft(false);
}}
onLeft={() => {
updateIntroLeft(true);
}}
/>
<div className={showHub ? "block max-w-sm pb-5" : "hidden"}>
<div className="flex justify-center">
<LinkWithQuery
to="/forest"
className={clx(
"transition-opacity ease-in duration-500",
"hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<LinkWithQuery to="/stake">
<Button variant="outline" size="lg">
{stakeButtonMessage}
</Button>
</LinkWithQuery>
</div>
) : (
<div
className={clx(
"transition-opacity ease-in duration-500",
showHub ? "opacity-100" : "opacity-0"
)}
>
<LinkWithQuery to="/stake">
<Button variant="outline">{stakeButtonMessage}</Button>
</LinkWithQuery>
</div>
)}
<div
className={clx(
"flex md:hidden justify-between my-4 transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<LinkWithQuery to="/forest" className="flex items-center">
<div className="flex items-center nowrap text-2xl">
<IoChevronBackOutline
className="inline"
Expand All @@ -235,8 +169,24 @@ const _HubApp: ForwardRefRenderFunction<
<span>Forest</span>
</div>
</LinkWithQuery>
<LinkWithQuery to="/grow" className="flex items-center">
<div className="flex items-center nowrap text-2xl relative">
{myTree && (
<DynamicTree
className={`FloatingTree mb-8`}
details={myTree}
islandHeight={400}
onClick={() => {
updateShowHubNav(!showHubNav);
}}
/>
)}
<LinkWithQuery
to="/grow"
className={clx(
"hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<div className="flex relative items-center nowrap text-2xl">
<span>Grow</span>
<IoChevronForwardOutline
className="inline"
Expand All @@ -245,38 +195,91 @@ const _HubApp: ForwardRefRenderFunction<
</div>
</LinkWithQuery>
</div>
<div
className={clx(
"transition-opacity ease-in duration-500 flex flex-row",
showHubNav ? "opacity-100" : "opacity-0"
<div className="w-full mt-2 text-center">
{myTree?.metadata?.type?.level !== undefined &&
myTree?.metadata?.type?.level > 0 ? (
<div
className={clx(
"transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<LinkWithQuery to="/stake">
<Button variant="outline" size="lg">
{stakeButtonMessage}
</Button>
</LinkWithQuery>
</div>
) : (
<div
className={clx(
"transition-opacity ease-in duration-500",
showHub ? "opacity-100" : "opacity-0"
)}
>
<LinkWithQuery to="/stake">
<Button variant="outline">{stakeButtonMessage}</Button>
</LinkWithQuery>
</div>
)}
>
<LinkWithQuery
to="/lock"
className="block w-full mt-4 leading-none"
<div
className={clx(
"flex md:hidden justify-between my-4 transition-opacity ease-in duration-500",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<div className="relative inline-block">
<span className="text-2xl">Lock</span>
</div>
<br />
<IoChevronDownOutline
className="inline-block"
size={LINK_CHEVRON_SIZE}
/>
</LinkWithQuery>
<LinkWithQuery
to="/referral"
className="block w-full mt-4 leading-none"
<LinkWithQuery to="/forest" className="flex items-center">
<div className="flex items-center nowrap text-2xl">
<IoChevronBackOutline
className="inline"
size={LINK_CHEVRON_SIZE}
/>
<span>Forest</span>
</div>
</LinkWithQuery>
<LinkWithQuery to="/grow" className="flex items-center">
<div className="flex items-center nowrap text-2xl relative">
<span>Grow</span>
<IoChevronForwardOutline
className="inline"
size={LINK_CHEVRON_SIZE}
/>
</div>
</LinkWithQuery>
</div>
<div
className={clx(
"transition-opacity ease-in duration-500 flex flex-row",
showHubNav ? "opacity-100" : "opacity-0"
)}
>
<div className="relative inline-block">
<span className="text-2xl">Referral</span>
</div>
<br />
<IoChevronDownOutline
className="inline-block -rotate-45"
size={LINK_CHEVRON_SIZE}
/>
</LinkWithQuery>
<LinkWithQuery
to="/lock"
className="block w-full mt-4 leading-none"
>
<div className="relative inline-block">
<span className="text-2xl">Lock</span>
</div>
<br />
<IoChevronDownOutline
className="inline-block"
size={LINK_CHEVRON_SIZE}
/>
</LinkWithQuery>
<LinkWithQuery
to="/referral"
className="block w-full mt-4 leading-none"
>
<div className="relative inline-block">
<span className="text-2xl">Referral</span>
</div>
<br />
<IoChevronDownOutline
className="inline-block -rotate-45"
size={LINK_CHEVRON_SIZE}
/>
</LinkWithQuery>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/locking/LockingApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ const _LockingApp: ForwardRefRenderFunction<
</LinkWithQuery>
</div>
{myTree && details?.impactNFTDetails === undefined && (
<DynamicTree details={myTree} variant="sm" />
<DynamicTree className="-mb-11" details={myTree} variant="sm" />
)}
{details?.lockDetails === undefined && (
<div className="mb-3 justify-center content-center items-center">
Expand Down

0 comments on commit 7263f99

Please sign in to comment.