Set static max h to session detail accordion

packages/keychain/src/components/DeploymentRequired.tsx

@@ -68,11 +68,10 @@ export function DeploymentRequired({
         <Content alignItems="center">
           {status === Status.DEPLOYING && (
             <Link
-              href={`https://${
-                account.chainId === constants.StarknetChainId.SN_SEPOLIA
+              href={`https://${account.chainId === constants.StarknetChainId.SN_SEPOLIA
                   ? "sepolia."
                   : undefined
-              }starkscan.co/tx/${deployHash}`}
+                }starkscan.co/tx/${deployHash}`}
               isExternal
             >
               <Button variant="link" mt={10} rightIcon={<ExternalIcon />}>

packages/keychain/src/components/SignMessage.tsx

@@ -95,6 +95,38 @@ export function SignMessage({
             });
           })()}
         </Flex>
+        <Flex direction="column" align="start" gap="18px" w="full">
+          {(() => {
+            if (!messageData) return <></>;
+            const ptName = messageData.primaryType;
+            const pt = messageData.types[ptName];
+            const values = (typeName: string) => {
+              const v = messageData.message[typeName];
+              if (typeof v === "object") {
+                return Object.entries(v).map(([key, value]) => {
+                  return (
+                    <Text key={key}>
+                      <Text as="span" opacity="50%" textTransform="capitalize">
+                        {key}:
+                      </Text>{" "}
+                      {value as string}
+                    </Text>
+                  );
+                });
+              } else {
+                return <Text>{v as string}</Text>;
+              }
+            };
+
+            return pt.map((typ) => {
+              return (
+                <DataContainer key={typ.name} title={typ.name}>
+                  {values(typ.name)}
+                </DataContainer>
+              );
+            });
+          })()}
+        </Flex>
       </Content>
 
       <Footer>

packages/keychain/src/components/layout/Container/index.tsx

@@ -6,7 +6,7 @@ import {
   Show,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import { PropsWithChildren, createContext, useContext } from "react";
+import { PropsWithChildren, createContext, useContext, useState } from "react";
 import { Header, HeaderProps } from "./Header";
 
 export function Container({
@@ -47,8 +47,10 @@ function Wrapper({
   children,
   ...rest
 }: React.PropsWithChildren & { variant?: LayoutVariant }) {
+  const [footerHeight, setFooterHeight] = useState(0)
+
   return (
-    <LayoutContext.Provider value={{ variant }}>
+    <LayoutContext.Provider value={{ variant, footerHeight, setFooterHeight }}>
       {/** Show as full page  */}
       <Show below="md">
         <ChakraContainer
@@ -94,14 +96,20 @@ function Wrapper({
   );
 }
 
-const LayoutContext = createContext<LayoutContextValue>({ variant: "default" });
+const LayoutContext = createContext<LayoutContextValue>({ variant: "default", footerHeight: 0, setFooterHeight: () => { } });
 
 type LayoutContextValue = {
   variant: LayoutVariant;
+  footerHeight: number;
+  setFooterHeight: (height: number) => void
 };
 
 type LayoutVariant = "default" | "connect";
 
+export function useLayout() {
+  return useContext(LayoutContext)
+}
+
 export function useLayoutVariant() {
-  return useContext(LayoutContext).variant;
+  return useLayout().variant;
 }

packages/keychain/src/components/layout/Content.tsx

@@ -1,17 +1,12 @@
 import { StackProps, VStack } from "@chakra-ui/react";
-import { FOOTER_HEIGHT } from "./Container";
+import { useLayout } from "./Container";
 
 export function Content({ children, ...stackProps }: StackProps) {
+  const { footerHeight } = useLayout();
+
   return (
-    <VStack
-      w="full"
-      px={4}
-      align="stretch"
-      overflowY="hidden"
-      pb={FOOTER_HEIGHT}
-      {...stackProps}
-    >
+    <VStack w="full" px={4} pb={footerHeight} align="stretch" {...stackProps}>
       {children}
-    </VStack>
+    </VStack >
   );
 }

packages/keychain/src/components/layout/Footer/SessionDetails.tsx

@@ -11,14 +11,19 @@ import {
 import { CodeUtilIcon, WedgeRightIcon } from "@cartridge/ui";
 import { motion } from "framer-motion";
 import { usePolicies } from "hooks/connection";
+import { PORTAL_WINDOW_HEIGHT, useLayout } from "../Container";
+import { isIframe } from "components/connect/utils";
+import { TOP_BAR_HEIGHT } from "../Container/Header/TopBar";
 
 export function SessionDetails() {
   const policies = usePolicies();
+  const { footerHeight } = useLayout();
+
 
   return (
     <VStack
       borderRadius="md"
-      overflowY="hidden"
+      overflowY="auto"
       rowGap="0.1rem"
       minH="min-content"
       marginY={4}
@@ -43,7 +48,14 @@ export function SessionDetails() {
         </Text>
       </VStack>
 
-      <Accordion w="full" allowMultiple overflowY="auto">
+      <Accordion
+        w="full"
+        allowMultiple
+        overflowY="auto"
+        maxH={
+          (isIframe() ? window.innerHeight : PORTAL_WINDOW_HEIGHT) - TOP_BAR_HEIGHT - footerHeight
+        }
+      >
         {policies.map((p, i) => (
           <AccordionItem
             key={p.target + p.method}

packages/keychain/src/components/layout/Footer/index.tsx

@@ -7,10 +7,11 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { CartridgeLogo, WedgeUpIcon } from "@cartridge/ui";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import {
   FOOTER_HEIGHT,
   PORTAL_WINDOW_HEIGHT,
+  useLayout,
   useLayoutVariant,
 } from "components/layout";
 import { motion } from "framer-motion";
@@ -30,29 +31,35 @@ export function Footer({
   showTerm?: boolean;
   createSession?: boolean;
 }) {
+  const { setFooterHeight } = useLayout();
+  const ref = useRef<HTMLDivElement>();
   const { origin, policies } = useConnection();
   const { isOpen, onToggle } = useDisclosure();
+  const variant = useLayoutVariant();
   const isExpandable = useMemo(
-    () => !!origin && !!policies.length,
-    [origin, policies],
+    () => !!origin && !!policies.length && variant === "connect",
+    [origin, policies, variant],
   );
   const hostname = useMemo(
     () => (origin ? new URL(origin).hostname : undefined),
     [origin],
   );
+  const showLogo = useMemo(() => variant === "connect", [variant]);
   const height = useMemo(
     () =>
       isOpen
-        ? `${
-            (isIframe() ? window.innerHeight : PORTAL_WINDOW_HEIGHT) -
-            TOP_BAR_HEIGHT -
-            FOOTER_HEIGHT
-          }px`
+        ? `${(isIframe() ? window.innerHeight : PORTAL_WINDOW_HEIGHT) -
+        TOP_BAR_HEIGHT
+        }px`
         : "auto",
     [isOpen],
   );
-  const variant = useLayoutVariant();
-  const showLogo = useMemo(() => variant === "connect", [variant]);
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    setFooterHeight(ref.current.clientHeight)
+  }, [setFooterHeight])
 
   return (
     <VStack
@@ -61,61 +68,60 @@ export function Footer({
       w="full"
       zIndex={1}
       gap={0}
+      as={motion.div}
+      layout="position"
+      animate={{ height, transition: { bounce: 0 } }}
+      ref={ref}
     >
       <VStack
         w="full"
-        align="flex-start"
+        align="stretch"
         bg="solid.bg"
-        p={4}
-        pt={0}
         borderTopWidth={1}
         borderColor="solid.spacer"
-        as={motion.div}
-        layout="position"
-        animate={{ height, transition: { bounce: 0 } }}
+        h="full"
+        px={4}
       >
-        <VStack align="stretch" w="full" h="full">
-          <HStack align="flex-start" pt={isExpandable ? 6 : 0}>
-            <TransactionSummary
-              isSlot={isSlot}
-              showTerm={showTerm}
-              createSession={createSession}
-              hostname={hostname}
-            />
-
-            <Spacer />
+        <HStack align="flex-start" pt={isExpandable ? 6 : 0}>
+          <TransactionSummary
+            isSlot={isSlot}
+            showTerm={showTerm}
+            createSession={createSession}
+            hostname={hostname}
+          />
 
-            {isExpandable && (
-              <IconButton
-                aria-label="Expand footer"
-                icon={
-                  <WedgeUpIcon
-                    boxSize={8}
-                    color="text.secondary"
-                    transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
-                  />
-                }
-                size="sm"
-                h={8}
-                bg="solid.primary"
-                zIndex={1}
-                onClick={onToggle}
-              />
-            )}
-          </HStack>
+          <Spacer />
 
-          {isOpen && <SessionDetails />}
-        </VStack>
+          {isExpandable && (
+            <IconButton
+              aria-label="Expand footer"
+              icon={
+                <WedgeUpIcon
+                  boxSize={8}
+                  color="text.secondary"
+                  transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
+                />
+              }
+              size="sm"
+              h={8}
+              bg="solid.primary"
+              zIndex={1}
+              onClick={onToggle}
+            />
+          )}
+        </HStack>
 
-        <Spacer />
+        {isOpen && <SessionDetails />}
+      </VStack>
 
-        <VStack align="strech" w="full">
-          {children}
-        </VStack>
+      <VStack justifySelf="flex-end" bg="solid.bg" w="full" align="stretch" p={4}>
+        {children}
       </VStack>
 
       {showLogo && (
         <HStack
+          justifySelf="flex-end"
+          bg="solid.bg"
           w="full"
           borderTopWidth={1}
           borderColor="solid.tertiary"