Allows game dev to set policy description (#330)

* Allow game dev to add description for each policy * Move expandable button * Remove fingerprint icon from login button * Fix slot auth layout
cartridge-gg · May 31, 2024 · 8af30ef · 8af30ef
1 parent 5d7b83c
commit 8af30ef
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 93 deletions.
diff --git a/examples/starknet-react-next/src/components/StarknetProvider.tsx b/examples/starknet-react-next/src/components/StarknetProvider.tsx
@@ -42,10 +42,12 @@ const connectors = [
       {
         target: ETH_TOKEN_ADDRESS,
         method: "approve",
+        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."
       },
     ],
     {

diff --git a/packages/controller/src/types.ts b/packages/controller/src/types.ts
@@ -41,6 +41,7 @@ export type Session = {
 export type Policy = {
   target: string;
   method?: string;
+  description?: string;
 };
 
 export enum ResponseCodes {

diff --git a/packages/keychain/src/components/Auth/Login.tsx b/packages/keychain/src/components/Auth/Login.tsx
@@ -1,4 +1,4 @@
-import { Field, FingerprintIcon } from "@cartridge/ui";
+import { Field } from "@cartridge/ui";
 import { VStack, Button } from "@chakra-ui/react";
 import { Container } from "../Container";
 import { Form as FormikForm, Field as FormikField, Formik } from "formik";
@@ -103,7 +103,10 @@ export function Login({
               description="Enter your Controller username"
             />
 
-            <VStack align="stretch" pb={error ? PORTAL_FOOTER_MIN_HEIGHT : undefined}>
+            <VStack
+              align="stretch"
+              pb={error ? PORTAL_FOOTER_MIN_HEIGHT : undefined}
+            >
               <FormikField
                 name="username"
                 placeholder="Username"
@@ -135,7 +138,6 @@ export function Login({
                 type="submit"
                 colorScheme="colorful"
                 isLoading={isLoading}
-                leftIcon={<FingerprintIcon fontSize="2xl" />}
               >
                 Log in
               </Button>

diff --git a/packages/keychain/src/components/Container/index.tsx b/packages/keychain/src/components/Container/index.tsx
@@ -52,14 +52,14 @@ export function Container({
         justify="center"
         minH={FOOTER_HEIGHT / 4}
         bottom={0}
-        position="fixed"
+        position={["fixed", "fixed", "absolute"]}
       >
         <CartridgeIcon fontSize="sm" />
         <Text fontSize="xs" color="currentColor">
           Controller by Cartridge
         </Text>
       </HStack>
-    </Wrapper>
+    </Wrapper >
   );
 }
 
@@ -85,9 +85,14 @@ function Wrapper({ children }: React.PropsWithChildren) {
 
       {/** Show as modal  */}
       <Show above="md">
-        <Flex w="100vw" m={0} p={0} alignItems="center">
+        <Flex w="100vw" h="100vh" p={0} align="center">
           <ChakraContainer
             w="432px"
+            h="600px"
+            borderWidth={1}
+            borderColor="solid.primaryAccent"
+            verticalAlign="middle"
+            // m="auto auto"
             bg="solid.bg"
             p={0}
             as={motion.div}

diff --git a/packages/keychain/src/components/PortalFooter/SessionDetails.tsx b/packages/keychain/src/components/PortalFooter/SessionDetails.tsx
@@ -13,11 +13,9 @@ import { Policy } from "@cartridge/controller";
 import { motion } from "framer-motion";
 
 export function SessionDetails({
-  hostname,
   policies,
   isOpen,
 }: {
-  hostname: string;
   policies: Policy[];
   isOpen: boolean;
 }) {
@@ -37,13 +35,7 @@ export function SessionDetails({
       }}
       display="none"
     >
-      <VStack
-        align="flex-start"
-        borderTopRadius="md"
-        bg="solid.primary"
-        p={3}
-        m={0}
-      >
+      <VStack align="flex-start" borderTopRadius="md" bg="solid.primary" p={3}>
         <Text
           color="text.secondaryAccent"
           fontSize="xs"
@@ -52,17 +44,14 @@ export function SessionDetails({
         >
           Session details
         </Text>
-        <Text color="text.secondaryAccent" fontSize="xs">
-          Allow {hostname} to execute following actions on your behalf
-        </Text>
       </VStack>
 
-      <Accordion w="full" allowMultiple position="relative" top={-4}>
+      <Accordion w="full" allowMultiple position="relative" top={-2}>
         {policies.map((p, i) => (
           <AccordionItem
             key={p.target + p.method}
             borderBottomRadius={i === policies.length - 1 ? "md" : "none"}
-            isDisabled // disable until action metadata is supported
+            isDisabled={!p.description}
           >
             {({ isExpanded }) => (
               <>
@@ -73,22 +62,25 @@ export function SessionDetails({
                   }}
                 >
                   <HStack>
-                    {<CodeUtilIcon boxSize={4} />}
+                    <CodeUtilIcon boxSize={4} />
                     <Text>{p.method}</Text>
                   </HStack>
 
                   <Spacer />
 
-                  <WedgeRightIcon
-                    fontSize="2xl"
-                    transform={isExpanded ? "rotate(90deg)" : undefined}
-                    transition="all 0.2s ease"
-                    color="text.secondary"
-                    display="none" // here also
-                  />
+                  {p.description && (
+                    <WedgeRightIcon
+                      fontSize="2xl"
+                      transform={isExpanded ? "rotate(90deg)" : undefined}
+                      transition="all 0.2s ease"
+                      color="text.secondary"
+                    />
+                  )}
                 </AccordionButton>
 
-                <AccordionPanel>TODO: description</AccordionPanel>
+                {p.description && (
+                  <AccordionPanel>{p.description}</AccordionPanel>
+                )}
               </>
             )}
           </AccordionItem>

diff --git a/packages/keychain/src/components/PortalFooter/TransactionSummary.tsx b/packages/keychain/src/components/PortalFooter/TransactionSummary.tsx
@@ -1,13 +1,7 @@
 import { HStack, VStack, Text, Link, IconProps } from "@chakra-ui/react";
-import {
-  CodeUtilIcon,
-  JoystickIcon,
-  LockIcon,
-  WrenchIcon,
-} from "@cartridge/ui";
+import { LockIcon, WrenchIcon } from "@cartridge/ui";
 
 export function TransactionSummary({
-  isSignup,
   isSlot,
   showTerm,
   hostname,
@@ -19,18 +13,15 @@ export function TransactionSummary({
 }) {
   return (
     <VStack align="flex-start">
-      {isSignup && (
-        <Summary
-          Icon={JoystickIcon}
-          title="Create a new Cartridge Controller"
-        />
-      )}
-
       {hostname && (
-        <Summary Icon={CodeUtilIcon}>
-          Create a session for{" "}
+        <Summary>
+          Create a session for <LockIcon color="text.secondaryAccent" />
+          <Text color="text.secondaryAccent" as="span" fontWeight="bold">
+            {hostname}{" "}
+          </Text>
+          and allow the game to{" "}
           <Text color="text.secondaryAccent" as="span" fontWeight="bold">
-            {hostname}
+            perform actions on your behalf
           </Text>
         </Summary>
       )}
@@ -73,12 +64,12 @@ export function Summary({
   title,
   children,
 }: React.PropsWithChildren & {
-  Icon: React.ComponentType<IconProps>;
+  Icon?: React.ComponentType<IconProps>;
   title?: string;
 }) {
   return (
     <HStack align="flex-start" color="text.secondary" fontSize="xs">
-      <Icon boxSize={4} />
+      {Icon && <Icon boxSize={4} />}
 
       <Text color="text.secondary" fontSize="xs">
         {title || children}

diff --git a/packages/keychain/src/components/PortalFooter/index.tsx b/packages/keychain/src/components/PortalFooter/index.tsx
@@ -1,5 +1,5 @@
 import {
-  Box,
+  HStack,
   IconButton,
   Spacer,
   VStack,
@@ -63,42 +63,12 @@ export function PortalFooter({
       p={4}
       pt={0}
       borderTopWidth={1}
-      borderColor="solid.tertiary"
+      borderColor="solid.spacer"
       zIndex="999999"
       as={motion.div}
       layout="position"
       animate={{ height, transition: { bounce: 0 } }}
     >
-      {isExpandable && (
-        <Box // mimic top border
-          w="50px"
-          h="25px"
-          bg="solid.accent"
-          borderRadius="50px 50px 0 0"
-          position="absolute"
-          left="calc(50% - 50px / 2)"
-          top="calc(-50px / 2)"
-        >
-          <IconButton
-            left="1px"
-            top="1px"
-            aria-label="Expand footer"
-            icon={
-              <WedgeUpIcon
-                boxSize={10}
-                color="text.secondary"
-                transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
-              />
-            }
-            size="lg"
-            variant="round"
-            bg="solid.bg"
-            zIndex="999999"
-            onClick={onToggle}
-          />
-        </Box>
-      )}
-
       <VStack
         pt={6}
         align="stretch"
@@ -112,19 +82,36 @@ export function PortalFooter({
           msOverflowStyle: "none",
         }}
       >
-        <TransactionSummary
-          isSignup={isSignup}
-          isSlot={isSlot}
-          showTerm={showTerm}
-          hostname={hostname}
-        />
-
-        {isOpen && hostname && policies && (
-          <SessionDetails
+        <HStack align="center">
+          <TransactionSummary
+            isSignup={isSignup}
+            isSlot={isSlot}
+            showTerm={showTerm}
             hostname={hostname}
-            policies={policies}
-            isOpen={isOpen}
           />
+
+          <Spacer />
+
+          {isExpandable && (
+            <IconButton
+              aria-label="Expand footer"
+              icon={
+                <WedgeUpIcon
+                  boxSize={8}
+                  color="text.secondary"
+                  transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
+                />
+              }
+              size="sm"
+              bg="solid.primary"
+              zIndex="999999"
+              onClick={onToggle}
+            />
+          )}
+        </HStack>
+
+        {isOpen && policies && (
+          <SessionDetails policies={policies} isOpen={isOpen} />
         )}
 
         {/* TODO: starter pack

diff --git a/packages/keychain/src/pages/slot/auth/consent.tsx b/packages/keychain/src/pages/slot/auth/consent.tsx
@@ -1,5 +1,4 @@
 import Controller from "utils/controller";
-import { PlugActiveDuoIcon } from "@cartridge/ui";
 import { Button, Text } from "@chakra-ui/react";
 import { Container, PortalBanner, PortalFooter } from "components";
 import { NextPage } from "next";
@@ -32,7 +31,6 @@ const Consent: NextPage = () => {
   return (
     <Container hideAccount>
       <PortalBanner
-        Icon={PlugActiveDuoIcon}
         title="Requesting Permission"
         description={
           <>