Remove layout context

cartridge-gg · Jan 10, 2025 · 4690833 · 4690833
1 parent 68db5dc
commit 4690833
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 71 deletions.
diff --git a/packages/keychain/index.html b/packages/keychain/index.html
@@ -50,7 +50,7 @@
       })();
     </script>
   </head>
-  <body class="h-screen bg-background text-foreground">
+  <body class="h-screen bg-background text-foreground overflow-y-auto">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/packages/keychain/src/components/layout/container/header/Banner.tsx b/packages/keychain/src/components/layout/container/header/Banner.tsx
@@ -9,7 +9,6 @@ import {
   HStack,
 } from "@chakra-ui/react";
 import { useControllerTheme } from "@/hooks/theme";
-import { useLayoutVariant } from "../";
 import { TOP_BAR_HEIGHT } from "./TopBar";
 import { IconProps } from "@cartridge/ui-next";
 
@@ -18,10 +17,19 @@ export type BannerProps = {
   icon?: React.ReactElement;
   title: string | React.ReactElement;
   description?: string | React.ReactElement;
+  variant?: BannerVariant;
 };
-export function Banner({ Icon, icon, title, description }: BannerProps) {
+
+export type BannerVariant = "expanded" | "compressed";
+
+export function Banner({
+  Icon,
+  icon,
+  title,
+  description,
+  variant = "compressed",
+}: BannerProps) {
   const theme = useControllerTheme();
-  const variant = useLayoutVariant();
 
   switch (variant) {
     case "expanded":

diff --git a/packages/keychain/src/components/layout/container/index.tsx b/packages/keychain/src/components/layout/container/index.tsx
@@ -1,6 +1,5 @@
-import { PropsWithChildren, createContext, useContext, useState } from "react";
+import { PropsWithChildren } from "react";
 import { Header, HeaderProps } from "./header";
-import { useDisclosure } from "@cartridge/ui-next";
 
 export function Container({
   children,
@@ -12,39 +11,27 @@ export function Container({
   icon,
   title,
   description,
-  variant = "compressed",
   className,
-}: {
-  variant?: LayoutVariant;
-} & PropsWithChildren &
-  HeaderProps & { className?: string }) {
-  const [height, setHeight] = useState(0);
-
-  const { isOpen, onToggle } = useDisclosure();
+  variant,
+}: PropsWithChildren & HeaderProps & { className?: string }) {
   return (
-    <LayoutContext.Provider
-      value={{ variant, footer: { height, setHeight, isOpen, onToggle } }}
-    >
-      <ResponsiveWrapper>
-        <Header
-          onBack={onBack}
-          onClose={onClose}
-          hideAccount={hideAccount}
-          hideNetwork={hideNetwork}
-          Icon={Icon}
-          icon={icon}
-          title={title}
-          description={description}
-        />
-        <div className={className}>{children}</div>
-      </ResponsiveWrapper>
-    </LayoutContext.Provider>
+    <ResponsiveWrapper>
+      <Header
+        onBack={onBack}
+        onClose={onClose}
+        hideAccount={hideAccount}
+        hideNetwork={hideNetwork}
+        Icon={Icon}
+        icon={icon}
+        title={title}
+        description={description}
+        variant={variant}
+      />
+      <div className={className}>{children}</div>
+    </ResponsiveWrapper>
   );
 }
 
-export const FOOTER_HEIGHT = 40;
-export const PORTAL_WINDOW_HEIGHT = 600;
-
 function ResponsiveWrapper({ children }: PropsWithChildren) {
   return (
     <>
@@ -62,33 +49,3 @@ function ResponsiveWrapper({ children }: PropsWithChildren) {
     </>
   );
 }
-
-export const LayoutContext = createContext<LayoutContextValue>({
-  variant: "expanded",
-  footer: {
-    height: 0,
-    setHeight: () => {},
-    isOpen: false,
-    onToggle: () => {},
-  },
-});
-
-export type LayoutContextValue = {
-  variant: LayoutVariant;
-  footer: {
-    height: number;
-    setHeight: (height: number) => void;
-    isOpen: boolean;
-    onToggle: () => void;
-  };
-};
-
-export type LayoutVariant = "expanded" | "compressed";
-
-export function useLayout() {
-  return useContext(LayoutContext);
-}
-
-export function useLayoutVariant(): LayoutVariant {
-  return useLayout().variant;
-}
diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/packages/keychain/src/components/layout/footer/index.tsx
@@ -1,5 +1,4 @@
 import { forwardRef, memo, PropsWithChildren, useEffect, useRef } from "react";
-import { useLayout } from "@/components/layout";
 import { cn } from "@cartridge/ui-next";
 import { Link } from "react-router-dom";
 
@@ -9,7 +8,6 @@ export function Footer({
   showCatridgeLogo,
 }: PropsWithChildren & { className?: string; showCatridgeLogo?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const { footer } = useLayout();
 
   useEffect(() => {
     if (!ref.current) return;
@@ -28,11 +26,7 @@ export function Footer({
     return () => {
       observer.disconnect();
     };
-  }, [footer]);
-
-  useEffect(() => {
-    window.document.body.style.overflowY = footer.isOpen ? "hidden" : "auto";
-  }, [footer.isOpen]);
+  }, []);
 
   return (
     <div