Merge branch 'main' into execute-err

cartridge-gg · May 30, 2024 · 4a7bf3a · 4a7bf3a
2 parents 4de995d + aaa89fa
commit 4a7bf3a
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 54 deletions.
diff --git a/packages/keychain/src/components/Auth/Login.tsx b/packages/keychain/src/components/Auth/Login.tsx
@@ -45,7 +45,12 @@ export function Login({
       } = await fetchAccount(values.username);
 
       try {
-        const controller = new Controller({ address, username: values.username, publicKey, credentialId });
+        const controller = new Controller({
+          address,
+          username: values.username,
+          publicKey,
+          credentialId,
+        });
 
         if (isSlot) {
           await doLogin(values.username, credentialId, publicKey);

diff --git a/packages/keychain/src/components/Auth/Signup.tsx b/packages/keychain/src/components/Auth/Signup.tsx
@@ -133,7 +133,12 @@ function Form({
           },
         } = data;
 
-        const controller = new Controller({ address, username: values.username, publicKey, credentialId });
+        const controller = new Controller({
+          address,
+          username: values.username,
+          publicKey,
+          credentialId,
+        });
 
         controller.account(constants.StarknetChainId.SN_SEPOLIA).status =
           Status.DEPLOYING;

diff --git a/packages/keychain/src/components/Container/Header/index.tsx b/packages/keychain/src/components/Container/Header/index.tsx
@@ -37,9 +37,11 @@ export function Header({
   const theme = useControllerTheme();
   const { colorMode } = useColorMode();
 
-  const cover = useMemo(() =>
-    typeof theme.cover === "string" ? theme.cover : theme.cover[colorMode]
-    , [theme, colorMode])
+  const cover = useMemo(
+    () =>
+      typeof theme.cover === "string" ? theme.cover : theme.cover[colorMode],
+    [theme, colorMode],
+  );
 
   if (!address || hideAccount) {
     return (
@@ -52,9 +54,27 @@ export function Header({
           bgPos="center"
           position="relative"
         >
-          <Center position="absolute" bottom={-ICON_OFFSET / 4} left={0} right={0}>
-            <Flex bg="darkGray.800" borderRadius="lg" h={`${ICON_SIZE}px`} w={`${ICON_SIZE}px`} justify="center" alignItems="center" borderWidth={4} borderColor={colorMode === "dark" ? "solid.bg" : "blueGray.100"}>
-              <Image src={theme.icon} boxSize={ICON_IMAGE_SIZE / 4} alt="Controller Icon" />
+          <Center
+            position="absolute"
+            bottom={-ICON_OFFSET / 4}
+            left={0}
+            right={0}
+          >
+            <Flex
+              bg="darkGray.800"
+              borderRadius="lg"
+              h={`${ICON_SIZE}px`}
+              w={`${ICON_SIZE}px`}
+              justify="center"
+              alignItems="center"
+              borderWidth={4}
+              borderColor={colorMode === "dark" ? "solid.bg" : "blueGray.100"}
+            >
+              <Image
+                src={theme.icon}
+                boxSize={ICON_IMAGE_SIZE / 4}
+                alt="Controller Icon"
+              />
             </Flex>
           </Center>
         </VStack>
@@ -73,11 +93,11 @@ export function Header({
             icon={<ArrowLeftIcon />}
             onClick={onBack}
           />
-        ) :
-          theme.id === "cartridge"
-            ? <CartridgeColorIcon boxSize={8} />
-            : <Image src={theme.icon} boxSize={8} alt="Controller Icon" />
-        }
+        ) : theme.id === "cartridge" ? (
+          <CartridgeColorIcon boxSize={8} />
+        ) : (
+          <Image src={theme.icon} boxSize={8} alt="Controller Icon" />
+        )}
 
         <Spacer />
 
@@ -120,7 +140,7 @@ function Container({
   );
 }
 
-export const BANNER_HEIGHT = 150
-export const ICON_IMAGE_SIZE = 64
-export const ICON_SIZE = 80
-export const ICON_OFFSET = 16
+export const BANNER_HEIGHT = 150;
+export const ICON_IMAGE_SIZE = 64;
+export const ICON_SIZE = 80;
+export const ICON_OFFSET = 16;
diff --git a/packages/keychain/src/components/Error.tsx b/packages/keychain/src/components/Error.tsx
@@ -11,7 +11,7 @@ import {
 import { motion } from "framer-motion";
 
 export function Error({ error }: { error?: Error }) {
-  if (!error) return null
+  if (!error) return null;
 
   return (
     <Accordion
@@ -35,10 +35,7 @@ export function Error({ error }: { error?: Error }) {
           <AccordionIcon boxSize={5} />
         </AccordionButton>
 
-        <AccordionPanel
-          borderTop="1px solid"
-          borderColor="translucent.soft"
-        >
+        <AccordionPanel borderTop="1px solid" borderColor="translucent.soft">
           <VStack align="flex-start">
             <Text color="inherit" fontWeight="bold">
               Error Details

diff --git a/packages/keychain/src/components/PortalFooter/SessionDetails.tsx b/packages/keychain/src/components/PortalFooter/SessionDetails.tsx
@@ -31,7 +31,10 @@ export function SessionDetails({
       alignItems="flex"
       as={motion.div}
       layoutScroll
-      animate={{ display: isOpen ? "flex" : "none", transition: { delay: 0.3 } }}
+      animate={{
+        display: isOpen ? "flex" : "none",
+        transition: { delay: 0.3 },
+      }}
       display="none"
     >
       <VStack

diff --git a/packages/keychain/src/components/PortalFooter/index.tsx b/packages/keychain/src/components/PortalFooter/index.tsx
@@ -11,7 +11,11 @@ import { Policy } from "@cartridge/controller";
 import { SessionDetails } from "./SessionDetails";
 import React, { useMemo } from "react";
 import { FOOTER_HEIGHT } from "components";
-import { BANNER_HEIGHT, ICON_OFFSET, ICON_SIZE } from "components/Container/Header";
+import {
+  BANNER_HEIGHT,
+  ICON_OFFSET,
+  ICON_SIZE,
+} from "components/Container/Header";
 import { motion } from "framer-motion";
 
 export function PortalFooter({
@@ -35,15 +39,19 @@ export function PortalFooter({
     [origin],
   );
 
-  const height = useMemo(() =>
-    isOpen
-      ? `${window.document.body.scrollHeight
-      - BANNER_HEIGHT
-      - FOOTER_HEIGHT
-      + ICON_SIZE / 2
-      - ICON_OFFSET}px`
-      : "auto",
-    [isOpen])
+  const height = useMemo(
+    () =>
+      isOpen
+        ? `${
+            window.document.body.scrollHeight -
+            BANNER_HEIGHT -
+            FOOTER_HEIGHT +
+            ICON_SIZE / 2 -
+            ICON_OFFSET
+          }px`
+        : "auto",
+    [isOpen],
+  );
 
   return (
     <VStack
@@ -90,8 +98,7 @@ export function PortalFooter({
             onClick={onToggle}
           />
         </Box>
-      )
-      }
+      )}
 
       <VStack
         pt={6}
@@ -114,7 +121,11 @@ export function PortalFooter({
         />
 
         {isOpen && hostname && policies && (
-          <SessionDetails hostname={hostname} policies={policies} isOpen={isOpen} />
+          <SessionDetails
+            hostname={hostname}
+            policies={policies}
+            isOpen={isOpen}
+          />
         )}
 
         {/* TODO: starter pack
@@ -148,8 +159,7 @@ export function PortalFooter({
       <VStack align="strech" w="full">
         {children}
       </VStack>
-
-    </VStack >
+    </VStack>
   );
 }
 

diff --git a/packages/keychain/src/components/Provider/index.tsx b/packages/keychain/src/components/Provider/index.tsx
@@ -1,7 +1,11 @@
 import { ChakraProvider, ColorMode } from "@chakra-ui/react";
 import { PropsWithChildren, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { ControllerThemeProvider, useChakraTheme, useControllerThemePreset } from "hooks/theme";
+import {
+  ControllerThemeProvider,
+  useChakraTheme,
+  useControllerThemePreset,
+} from "hooks/theme";
 import { useRouter } from "next/router";
 
 export function Provider({ children }: PropsWithChildren) {
@@ -15,7 +19,7 @@ export function Provider({ children }: PropsWithChildren) {
       name: preset.name,
       icon: preset.icon,
       cover: preset.cover,
-      colorMode: (router.query.colorMode as ColorMode) ?? "dark"
+      colorMode: (router.query.colorMode as ColorMode) ?? "dark",
     }),
     [preset, router.query],
   );
@@ -28,7 +32,7 @@ export function Provider({ children }: PropsWithChildren) {
         </ControllerThemeProvider>
       </QueryClientProvider>
     </ChakraProvider>
-  )
+  );
 }
 
 const queryClient = new QueryClient({

diff --git a/packages/keychain/src/hooks/theme.tsx b/packages/keychain/src/hooks/theme.tsx
@@ -7,20 +7,33 @@ import {
 import { CartridgeTheme } from "@cartridge/ui";
 import { useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useContext, createContext, useMemo, PropsWithChildren, useEffect } from "react";
+import {
+  useContext,
+  createContext,
+  useMemo,
+  PropsWithChildren,
+  useEffect,
+} from "react";
 
 const ControllerThemeContext = createContext<ControllerThemeContext>(undefined);
 
 type ControllerThemeContext = ControllerTheme;
 
-export function ControllerThemeProvider({ value, children }: { value: ControllerThemeContext } & PropsWithChildren) {
+export function ControllerThemeProvider({
+  value,
+  children,
+}: { value: ControllerThemeContext } & PropsWithChildren) {
   const { setColorMode } = useColorMode();
 
   useEffect(() => {
-    setColorMode(value.colorMode)
+    setColorMode(value.colorMode);
   }, [setColorMode, value.colorMode]);
 
-  return <ControllerThemeContext.Provider value={value}>{children}</ControllerThemeContext.Provider>;
+  return (
+    <ControllerThemeContext.Provider value={value}>
+      {children}
+    </ControllerThemeContext.Provider>
+  );
 }
 
 export function useControllerTheme() {
@@ -53,8 +66,7 @@ export function useControllerThemePreset() {
 
 export function useChakraTheme(preset: ControllerThemePreset) {
   return useMemo(
-    () =>
-    ({
+    () => ({
       ...CartridgeTheme,
       semanticTokens: {
         ...CartridgeTheme.semanticTokens,

diff --git a/packages/keychain/src/pages/_app.tsx b/packages/keychain/src/pages/_app.tsx
@@ -11,8 +11,6 @@ const ibmPlexMono = IBM_Plex_Mono({
   subsets: ["latin"],
 });
 
-
-
 export default function Keychain({ Component, pageProps }: AppProps) {
   useGlobalInjection();
   return (
@@ -28,7 +26,10 @@ export default function Keychain({ Component, pageProps }: AppProps) {
         <meta property="twitter:creator" content="@cartridge_gg" />
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="cartridge" />
-        <meta property="theme-color" content={CartridgeTheme.semanticTokens.colors.brand} />
+        <meta
+          property="theme-color"
+          content={CartridgeTheme.semanticTokens.colors.brand}
+        />
       </NextHead>
 
       <style jsx global>{`
@@ -65,7 +66,6 @@ function useGlobalInjection() {
   }, []);
 }
 
-
 declare global {
   interface Window {
     cartridge: {

diff --git a/packages/keychain/src/pages/_document.tsx b/packages/keychain/src/pages/_document.tsx
@@ -1,5 +1,5 @@
-import { ColorModeScript } from '@chakra-ui/react'
-import { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from "@chakra-ui/react";
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -11,5 +11,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }