Prevent long list of session details to push down footer buttons (#371)

cartridge-gg · Jun 14, 2024 · c10853c · c10853c
1 parent 6192c38
commit c10853c
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 92 deletions.
diff --git a/packages/keychain/src/Policies.tsx b/packages/keychain/src/Policies.tsx
@@ -0,0 +1,87 @@
+import {
+  HStack,
+  VStack,
+  Text,
+  AccordionButton,
+  AccordionItem,
+  Accordion,
+  Spacer,
+  AccordionPanel,
+  Box,
+} from "@chakra-ui/react";
+import { CodeUtilIcon, WedgeRightIcon } from "@cartridge/ui";
+import { Policy } from "@cartridge/controller";
+
+export function Policies({
+  title,
+  policies,
+}: {
+  title: string;
+  policies: Policy[];
+}) {
+  return (
+    <Box position="relative">
+      <VStack
+        align="flex-start"
+        bg="solid.primary"
+        p={3}
+        position="sticky"
+        top={0}
+        zIndex={1}
+      >
+        <Text
+          color="text.secondaryAccent"
+          fontSize="xs"
+          fontWeight="bold"
+          casing="uppercase"
+        >
+          {title}
+        </Text>
+      </VStack>
+
+      <Accordion w="full" allowMultiple overflowY="auto">
+        {policies.map((p, i) => (
+          <AccordionItem
+            key={p.target + p.method}
+            // The container already set border radius (for top & bottom), but we
+            // set the bottom radius for the last item here because for certain
+            // browsers' scrolling behaviour (eg Firefox) just to make it look nicer.
+            borderBottomRadius={i === policies.length - 1 ? "md" : "none"}
+            isDisabled={!p.description}
+          >
+            {({ isExpanded }) => (
+              <>
+                <AccordionButton
+                  _disabled={{
+                    cursor: "auto",
+                    opacity: 1,
+                  }}
+                >
+                  <HStack>
+                    <CodeUtilIcon boxSize={4} />
+                    <Text>{p.method}</Text>
+                  </HStack>
+
+                  <Spacer />
+
+                  {p.description && (
+                    <WedgeRightIcon
+                      fontSize="2xl"
+                      transform={isExpanded ? "rotate(90deg)" : undefined}
+                      transition="all 0.2s ease"
+                      color="text.secondary"
+                    />
+                  )}
+                </AccordionButton>
+
+                {p.description && (
+                  <AccordionPanel>{p.description}</AccordionPanel>
+                )}
+              </>
+            )}
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Box>
+  );
+}
diff --git a/packages/keychain/src/components/layout/Footer/SessionDetails.tsx b/packages/keychain/src/components/layout/Footer/SessionDetails.tsx
@@ -1,23 +1,10 @@
-import {
-  HStack,
-  VStack,
-  Text,
-  AccordionButton,
-  AccordionItem,
-  Accordion,
-  Spacer,
-  AccordionPanel,
-} from "@chakra-ui/react";
-import { CodeUtilIcon, WedgeRightIcon } from "@cartridge/ui";
+import { VStack } from "@chakra-ui/react";
 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";
+import { Policies } from "Policies";
 
 export function SessionDetails() {
   const policies = usePolicies();
-  const { footerHeight } = useLayout();
 
   return (
     <VStack
@@ -36,69 +23,7 @@ export function SessionDetails() {
         display: "flex",
       }}
     >
-      <VStack align="flex-start" bg="solid.primary" p={3}>
-        <Text
-          color="text.secondaryAccent"
-          fontSize="xs"
-          fontWeight="bold"
-          casing="uppercase"
-        >
-          Session details
-        </Text>
-      </VStack>
-
-      <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}
-            // The container already set border radius (for top & bottom), but we
-            // set the bottom radius for the last item here because for certain
-            // browsers' scrolling behaviour (eg Firefox) just to make it look nicer.
-            borderBottomRadius={i === policies.length - 1 ? "md" : "none"}
-            isDisabled={!p.description}
-          >
-            {({ isExpanded }) => (
-              <>
-                <AccordionButton
-                  _disabled={{
-                    cursor: "auto",
-                    opacity: 1,
-                  }}
-                >
-                  <HStack>
-                    <CodeUtilIcon boxSize={4} />
-                    <Text>{p.method}</Text>
-                  </HStack>
-
-                  <Spacer />
-
-                  {p.description && (
-                    <WedgeRightIcon
-                      fontSize="2xl"
-                      transform={isExpanded ? "rotate(90deg)" : undefined}
-                      transition="all 0.2s ease"
-                      color="text.secondary"
-                    />
-                  )}
-                </AccordionButton>
-
-                {p.description && (
-                  <AccordionPanel>{p.description}</AccordionPanel>
-                )}
-              </>
-            )}
-          </AccordionItem>
-        ))}
-      </Accordion>
+      <Policies title="Session Details" policies={policies} />
     </VStack>
   );
 }
diff --git a/packages/keychain/src/components/layout/Footer/index.tsx b/packages/keychain/src/components/layout/Footer/index.tsx
@@ -44,22 +44,16 @@ export function Footer({
     () => (origin ? new URL(origin).hostname : undefined),
     [origin],
   );
-  const height = useMemo(
-    () =>
-      isOpen
-        ? `${
-            (isIframe() ? window.innerHeight : PORTAL_WINDOW_HEIGHT) -
-            TOP_BAR_HEIGHT
-          }px`
-        : "auto",
-    [isOpen],
-  );
+  const maxH = `${
+    (isIframe() ? window.innerHeight : PORTAL_WINDOW_HEIGHT) - TOP_BAR_HEIGHT
+  }px`;
+  const { footerHeight } = useLayout();
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current || !!footerHeight) return;
 
     setFooterHeight(ref.current.clientHeight);
-  }, [setFooterHeight]);
+  }, [setFooterHeight, footerHeight]);
 
   return (
     <VStack
@@ -70,7 +64,8 @@ export function Footer({
       gap={0}
       as={motion.div}
       layout="position"
-      animate={{ height, transition: { bounce: 0 } }}
+      className="whatever"
+      animate={{ height: isOpen ? maxH : "auto", transition: { bounce: 0 } }}
       overflow="hidden"
       ref={ref}
     >
@@ -80,8 +75,9 @@ export function Footer({
         bg="solid.bg"
         borderTopWidth={1}
         borderColor="solid.spacer"
-        h="full"
         px={4}
+        flex={1}
+        h={`calc(${maxH} - ${footerHeight}px)`}
       >
         <HStack align="flex-start" pt={isExpandable ? 6 : 0}>
           <TransactionSummary