Improve policy list scrolling (#346)

* MAKE SCROLLING BETTER * fix * update example with more policies to showcase the fix * Change overflow scroll to auto --------- Co-authored-by: JunichiSugiura <[email protected]>
cartridge-gg · Jun 11, 2024 · be10223 · be10223
1 parent 8e255a3
commit be10223
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/examples/starknet-react-next/src/components/StarknetProvider.tsx b/examples/starknet-react-next/src/components/StarknetProvider.tsx
@@ -42,12 +42,24 @@ const connectors = [
       {
         target: ETH_TOKEN_ADDRESS,
         method: "approve",
-        description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+        description:
+          "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
       },
       {
         target: ETH_TOKEN_ADDRESS,
         method: "transfer",
-        // description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+      },
+      {
+        target: ETH_TOKEN_ADDRESS,
+        method: "mint",
+      },
+      {
+        target: ETH_TOKEN_ADDRESS,
+        method: "burn",
+      },
+      {
+        target: ETH_TOKEN_ADDRESS,
+        method: "allowance",
       },
     ],
     {

diff --git a/packages/keychain/src/components/layout/Footer/SessionDetails.tsx b/packages/keychain/src/components/layout/Footer/SessionDetails.tsx
@@ -12,26 +12,27 @@ import { CodeUtilIcon, WedgeRightIcon } from "@cartridge/ui";
 import { motion } from "framer-motion";
 import { usePolicies } from "hooks/connection";
 
-export function SessionDetails({
-  isOpen,
-}: {
-  isOpen: boolean;
-}) {
+export function SessionDetails() {
   const policies = usePolicies();
 
   return (
     <VStack
+      borderRadius="md"
+      overflowY="hidden"
+      rowGap="0.1rem"
+      minH="min-content"
       marginY={4}
       alignItems="flex"
       as={motion.div}
-      layoutScroll
+      // Setting the initial display to `none` prevents the
+      // div from being visible on the first render
+      // which otherwise would cause a 'bouncy' effect.
+      display="none"
       animate={{
-        display: isOpen ? "flex" : "none",
-        transition: { delay: 0.3 },
+        display: "flex",
       }}
-      display="none"
     >
-      <VStack align="flex-start" borderTopRadius="md" bg="solid.primary" p={3}>
+      <VStack align="flex-start" bg="solid.primary" p={3}>
         <Text
           color="text.secondaryAccent"
           fontSize="xs"
@@ -42,10 +43,13 @@ export function SessionDetails({
         </Text>
       </VStack>
 
-      <Accordion w="full" allowMultiple position="relative" top={-2}>
+      <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}
           >

diff --git a/packages/keychain/src/components/layout/Footer/index.tsx b/packages/keychain/src/components/layout/Footer/index.tsx
@@ -58,19 +58,7 @@ export function Footer({
         layout="position"
         animate={{ height, transition: { bounce: 0 } }}
       >
-        <VStack
-          pt={6}
-          align="stretch"
-          w="full"
-          h="full"
-          overflowY={isOpen ? "auto" : "hidden"}
-          css={{
-            "::-webkit-scrollbar": {
-              display: "none",
-            },
-            msOverflowStyle: "none",
-          }}
-        >
+        <VStack pt={6} align="stretch" w="full" h="full" overflowY="hidden">
           <HStack align="flex-start">
             <TransactionSummary
               isSlot={isSlot}
@@ -100,7 +88,7 @@ export function Footer({
           </HStack>
 
           {isOpen && (
-            <SessionDetails isOpen={isOpen} />
+            <SessionDetails />
           )}
         </VStack>