cartridge-gg · tarrencev · Dec 4, 2024 · Dec 3, 2024
diff --git a/packages/keychain/.storybook/preview.tsx b/packages/keychain/.storybook/preview.tsx
@@ -40,6 +40,7 @@ const preview: Preview = {
       },
     },
     preset: "cartridge",
+    colorMode: "dark",
   },
   decorators: [
     (Story, { parameters }) => (
@@ -84,13 +85,12 @@ function Provider({
   const presetId = parameters.preset || "cartridge";
   const preset = defaultPresets[presetId];
   const chakraTheme = useChakraTheme(preset);
-  console.log(preset);
   const ctrlTheme: ControllerTheme = {
     id: preset.id,
     name: preset.name,
     icon: preset.icon,
     cover: preset.cover,
-    colorMode: "dark",
+    colorMode: parameters.colorMode || "dark",
   };
   const connection = useMockedConnection(parameters.connection);
 

diff --git a/packages/keychain/src/components/SessionSummary.tsx b/packages/keychain/src/components/SessionSummary.tsx
@@ -181,7 +181,7 @@ function Contract({
         <AccordionItem value="item-1">
           <CardContent>
             <AccordionTrigger>
-              You are agreeing to automate{" "}
+              Approve{" "}
               <span className="text-accent-foreground font-bold">
                 {policies.length} {policies.length > 1 ? "methods" : "method"}
               </span>

diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -1,7 +1,7 @@
 import { Container, Content, Footer } from "components/layout";
 import { BigNumberish, shortString } from "starknet";
 import { ControllerError } from "utils/connection";
-import { Button } from "@chakra-ui/react";
+import { Button, VStack } from "@chakra-ui/react";
 import { useCallback, useEffect, useState } from "react";
 import { useConnection } from "hooks/connection";
 import { ControllerErrorAlert } from "components/ErrorAlert";
@@ -19,7 +19,7 @@ export function CreateSession({
   onConnect: (transaction_hash?: string) => void;
   isUpdate?: boolean;
 }) {
-  const { controller, policies, upgrade, chainId } = useConnection();
+  const { controller, policies, upgrade, chainId, logout } = useConnection();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
   const [expiresAt] = useState<bigint>(SESSION_EXPIRATION);
@@ -78,6 +78,11 @@ export function CreateSession({
       description={
         isUpdate && "The policies were updated, please update existing session"
       }
+      onClose={() => {
+        if (!isUpdate) {
+          logout();
+        }
+      }}
     >
       <Content gap={6}>
         <SessionConsent />
@@ -89,14 +94,24 @@ export function CreateSession({
           <ControllerErrorAlert error={error} />
         )}
         {!error && (
-          <Button
-            colorScheme="colorful"
-            isDisabled={isDisabled || isConnecting}
-            isLoading={isConnecting}
-            onClick={() => onCreateSession()}
-          >
-            {isUpdate ? "update" : "create"} session
-          </Button>
+          <VStack spacing={4} width="full">
+            <Button
+              colorScheme="colorful"
+              isDisabled={isDisabled || isConnecting}
+              isLoading={isConnecting}
+              onClick={() => onCreateSession()}
+              width="full"
+            >
+              {isUpdate ? "update" : "create"} session
+            </Button>
+            <Button
+              onClick={() => onConnect()}
+              isDisabled={isConnecting}
+              width="full"
+            >
+              Skip
+            </Button>
+          </VStack>
         )}
       </Footer>
     </Container>

diff --git a/packages/keychain/src/components/connect/create/CreateController.stories.tsx b/packages/keychain/src/components/connect/create/CreateController.stories.tsx
@@ -34,6 +34,31 @@ export const Default: Story = {
   },
 };
 
+export const WithLightMode: Story = {
+  parameters: {
+    colorMode: "light",
+  },
+  args: {
+    theme: {
+      id: "cartridge",
+      name: "Cartridge",
+    },
+    usernameField: {
+      value: "",
+      error: undefined,
+    },
+    validation: {
+      status: "valid",
+      exists: false,
+    },
+    isLoading: false,
+    onUsernameChange: () => {},
+    onUsernameFocus: () => {},
+    onUsernameClear: () => {},
+    onSubmit: () => {},
+  },
+};
+
 export const WithTheme: Story = {
   parameters: {
     preset: "eternum",

diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -42,7 +42,7 @@ export function CreateControllerView({
       title={
         theme.id === "cartridge" ? "Play with Controller" : `Play ${theme.name}`
       }
-      description="Use your Controller to seamlessly play games and earn rewards"
+      description="Connect your Controller"
     >
       <form
         style={{ width: "100%" }}

diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -17,7 +17,7 @@ export function StatusTray({
         flexDirection="row"
         alignItems="flex-start"
         padding="8px 15px"
-        bg="#242824"
+        bg="solid.secondary"
         marginTop="-1rem"
         paddingTop="15px"
         borderBottomRadius="4px"
@@ -44,7 +44,7 @@ export function StatusTray({
       flexDirection="row"
       alignItems="flex-start"
       padding="8px 12px"
-      bg="#242824"
+      bg="solid.secondary"
       marginTop="-1rem"
       paddingTop="15px"
       borderBottomRadius="4px"

diff --git a/packages/keychain/src/components/layout/Container/Header/Banner.tsx b/packages/keychain/src/components/layout/Container/Header/Banner.tsx
@@ -51,7 +51,7 @@ export function Banner({ Icon, icon, title, description }: BannerProps) {
               left: 0,
               right: 0,
               bottom: 0,
-              background: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #161A17 100%)`,
+              background: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--chakra-colors-solid-bg) 100%)`,
               pointerEvents: "none",
             }}
           >

diff --git a/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx b/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx
@@ -4,15 +4,20 @@ import { IconButton } from "@chakra-ui/react";
 import { useConnection } from "hooks/connection";
 import { useCallback } from "react";
 
-export function CloseButton() {
+export function CloseButton({ onClose }: { onClose?: () => void }) {
   const { upgrade, logout, closeModal } = useConnection();
 
-  const onClose = useCallback(() => {
+  const handleClose = useCallback(() => {
     if (upgrade.available) {
       logout();
     }
+
+    if (onClose) {
+      onClose();
+    }
+
     closeModal();
-  }, [upgrade.available, logout, closeModal]);
+  }, [upgrade.available, logout, closeModal, onClose]);
 
   if (!isIframe()) {
     return null;
@@ -23,11 +28,10 @@ export function CloseButton() {
       aria-label="Close Controller"
       bg="solid.bg"
       _hover={{
-        bg: "solid.bg",
-        opacity: 0.75,
+        bg: "hsl(var(solid.primary)/0.75)",
       }}
       icon={<TimesIcon fontSize={24} />}
-      onClick={onClose}
+      onClick={handleClose}
     />
   );
 }
diff --git a/packages/keychain/src/components/layout/Container/Header/NetworkStatus.tsx b/packages/keychain/src/components/layout/Container/Header/NetworkStatus.tsx
@@ -23,14 +23,15 @@ export function NetworkStatus() {
       color="text.primary"
     >
       <Button
-        size="sm"
-        bg="solid.primary"
+        px="12px"
+        py="10px"
+        bg="solid.bg"
         fontSize="xs"
         fontFamily="Inter"
-        _hover={{ bg: "solid.primary", opacity: 0.7 }}
+        _hover={{ bg: "hsl(var(solid.primary)/0.75)" }}
         iconSpacing={1.5}
         leftIcon={
-          <Circle size={5} bg="solid.primary">
+          <Circle size={5}>
             {(() => {
               switch (chainId) {
                 case constants.StarknetChainId.SN_MAIN:

diff --git a/packages/keychain/src/components/layout/Container/Header/TopBar.tsx b/packages/keychain/src/components/layout/Container/Header/TopBar.tsx
@@ -9,9 +9,10 @@ import { useMemo } from "react";
 export type TopBarProps = {
   onBack?: () => void;
   hideAccount?: boolean;
+  onClose?: () => void;
 };
 
-export function TopBar({ onBack, hideAccount }: TopBarProps) {
+export function TopBar({ onBack, hideAccount, onClose }: TopBarProps) {
   const { openSettings, context } = useConnection();
   const showSettings = useMemo(
     () => !context || !["connect", "open-settings"].includes(context.type),
@@ -31,7 +32,11 @@ export function TopBar({ onBack, hideAccount }: TopBarProps) {
       h={TOP_BAR_HEIGHT / 4}
       p={2}
     >
-      {onBack ? <BackButton onClick={onBack} /> : <CloseButton />}
+      {onBack ? (
+        <BackButton onClick={onBack} />
+      ) : (
+        <CloseButton onClose={onClose} />
+      )}
 
       <Spacer />
 

diff --git a/packages/keychain/src/components/layout/Container/Header/index.tsx b/packages/keychain/src/components/layout/Container/Header/index.tsx
@@ -4,11 +4,16 @@ import { TopBar, TopBarProps } from "./TopBar";
 
 export type HeaderProps = TopBarProps & BannerProps;
 
-export function Header({ onBack, hideAccount, ...bannerProps }: HeaderProps) {
+export function Header({
+  onBack,
+  hideAccount,
+  onClose,
+  ...bannerProps
+}: HeaderProps & { onClose?: () => void }) {
   return (
     <Box position="sticky" top={0} w="full" zIndex={1} bg="solid.bg">
       <Banner {...bannerProps} />
-      <TopBar onBack={onBack} hideAccount={hideAccount} />
+      <TopBar onBack={onBack} onClose={onClose} hideAccount={hideAccount} />
     </Box>
   );
 }
diff --git a/packages/keychain/src/components/layout/Container/index.tsx b/packages/keychain/src/components/layout/Container/index.tsx
@@ -13,6 +13,7 @@ import { Header, HeaderProps } from "./Header";
 export function Container({
   children,
   onBack,
+  onClose,
   hideAccount,
   Icon,
   icon,
@@ -28,6 +29,7 @@ export function Container({
     <Wrapper variant={variant}>
       <Header
         onBack={onBack}
+        onClose={onClose}
         hideAccount={hideAccount}
         Icon={Icon}
         icon={icon}

diff --git a/packages/ui-next/src/stories/accordion.stories.tsx b/packages/ui-next/src/stories/accordion.stories.tsx
@@ -28,7 +28,7 @@ function Accordion() {
     <UIAccordion type="single" collapsible>
       <AccordionItem value="item-1">
         <AccordionTrigger>
-          You are agreeing to automate{" "}
+          Approve{" "}
           <span className="text-accent-foreground font-bold">2 methods</span>
         </AccordionTrigger>
         <AccordionContent className="gap-px">