diff --git a/packages/keychain/index.html b/packages/keychain/index.html
index 1c96ade2e..62608acd4 100644
--- a/packages/keychain/index.html
+++ b/packages/keychain/index.html
@@ -50,7 +50,7 @@
})();
-
+
diff --git a/packages/keychain/src/components/layout/container/header/Banner.tsx b/packages/keychain/src/components/layout/container/header/Banner.tsx
index 27b396c9c..b359516c6 100644
--- 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
index 914095b8b..07fcbdea3 100644
--- 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 (
-
-
-
- {children}
-
-
+
+
+ {children}
+
);
}
-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({
- 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
index 84684585b..698c26c41 100644
--- 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(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 (