cartridge-gg · tarrencev · Jan 14, 2025 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025
diff --git a/...chain/__image_snapshots__/components-connect-authenticate--default-chromium.png b/...chain/__image_snapshots__/components-connect-authenticate--default-chromium.png
diff --git a/...ge_snapshots__/components-connect-create-createcontroller--default-chromium.png b/...ge_snapshots__/components-connect-create-createcontroller--default-chromium.png
diff --git a/...s__/components-connect-create-createcontroller--with-generic-error-chromium.png b/...s__/components-connect-create-createcontroller--with-generic-error-chromium.png
diff --git a/...hots__/components-connect-create-createcontroller--with-light-mode-chromium.png b/...hots__/components-connect-create-createcontroller--with-light-mode-chromium.png
diff --git a/...snapshots__/components-connect-create-createcontroller--with-theme-chromium.png b/...snapshots__/components-connect-create-createcontroller--with-theme-chromium.png
diff --git a/...s__/components-connect-create-createcontroller--with-timeout-error-chromium.png b/...s__/components-connect-create-createcontroller--with-timeout-error-chromium.png
diff --git a/.../components-connect-create-createcontroller--with-validation-error-chromium.png b/.../components-connect-create-createcontroller--with-validation-error-chromium.png
diff --git a/...hain/__image_snapshots__/components-connect-createsession--default-chromium.png b/...hain/__image_snapshots__/components-connect-createsession--default-chromium.png
diff --git a/.../__image_snapshots__/components-connect-createsession--with-preset-chromium.png b/.../__image_snapshots__/components-connect-createsession--with-preset-chromium.png
diff --git a/...s/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png b/...s/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png
diff --git a/.../keychain/__image_snapshots__/components-deploycontroller--default-chromium.png b/.../keychain/__image_snapshots__/components-deploycontroller--default-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png b/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png
diff --git a/...ages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png b/...ages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-failure--default-chromium.png b/packages/keychain/__image_snapshots__/components-failure--default-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-funding--default-chromium.png b/packages/keychain/__image_snapshots__/components-funding--default-chromium.png
diff --git a/...eychain/__image_snapshots__/components-funding-depositeth--default-chromium.png b/...eychain/__image_snapshots__/components-funding-depositeth--default-chromium.png
diff --git a/...in/__image_snapshots__/components-funding-purchasecredits--default-chromium.png b/...in/__image_snapshots__/components-funding-purchasecredits--default-chromium.png
diff --git a/...ge_snapshots__/components-layout-container-header-banner--expanded-chromium.png b/...ge_snapshots__/components-layout-container-header-banner--expanded-chromium.png
diff --git a/...s__/components-layout-container-header-banner--icon-component-prop-chromium.png b/...s__/components-layout-container-header-banner--icon-component-prop-chromium.png
diff --git a/...ots__/components-layout-container-header-banner--icon-element-prop-chromium.png b/...ots__/components-layout-container-header-banner--icon-element-prop-chromium.png
diff --git a/...shots__/components-layout-container-header-banner--very-long-title-chromium.png b/...shots__/components-layout-container-header-banner--very-long-title-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-pending--default-chromium.png b/packages/keychain/__image_snapshots__/components-pending--default-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png
diff --git a/...keychain/__image_snapshots__/components-settings-delegate--default-chromium.png b/...keychain/__image_snapshots__/components-settings-delegate--default-chromium.png
diff --git a/...keychain/__image_snapshots__/components-settings-recovery--default-chromium.png b/...keychain/__image_snapshots__/components-settings-recovery--default-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png b/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png
diff --git a/...age_snapshots__/components-transaction-confirmtransaction--default-chromium.png b/...age_snapshots__/components-transaction-confirmtransaction--default-chromium.png
diff --git a/..._snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png b/..._snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png
diff --git a/packages/keychain/index.html b/packages/keychain/index.html
@@ -50,7 +50,7 @@
       })();
     </script>
   </head>
-  <body class="h-screen bg-background text-foreground">
+  <body class="h-screen bg-background text-foreground overflow-y-auto">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
@@ -170,7 +170,7 @@ export function DeployController({
           title="Deploying Controller"
           description={`Your controller is being deployed on ${chainName}`}
         >
-          <Content alignItems="center">
+          <Content className="items-center">
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
@@ -201,7 +201,7 @@ export function DeployController({
           title="Success!"
           description={`Your controller has been deployed on ${chainName}`}
         >
-          <Content alignItems="center">
+          <Content className="items-center">
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}

diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -46,7 +46,7 @@ export function ErrorPage({ error }: { error: Error }) {
       description="Something went wrong"
       icon={<AlertIcon size="lg" />}
     >
-      <Content gap={4}>
+      <Content className="gap-4">
         <div className="flex w-full px-4 py-6 bg-secondary border border-quaternary rounded">
           <p className="w-full text-sm">{error.message}</p>
         </div>

diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -118,7 +118,7 @@ export function CreateSession({
         }
       }}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <SessionConsent isVerified={policies?.verified} />
         {policies?.verified ? (
           <VerifiedSessionSummary

diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -1,14 +1,13 @@
 import { useRef, useState, useEffect } from "react";
 import { Container, Footer, Content } from "@/components/layout";
-import { Button, cn } from "@cartridge/ui-next";
+import { Button, cn, Input } from "@cartridge/ui-next";
 import { useControllerTheme } from "@/hooks/theme";
 import { usePostHog } from "posthog-js/react";
 import { useDebounce } from "@/hooks/debounce";
 import { useUsernameValidation } from "./useUsernameValidation";
 import { LoginMode } from "../types";
 import { Legal, StatusTray } from ".";
 import { useCreateController } from "./useCreateController";
-import { Input } from "@cartridge/ui-next";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
@@ -58,7 +57,7 @@ export function CreateControllerView({
           if (e.key === "Enter") e.preventDefault();
         }}
       >
-        <Content mb="2rem" gap={0}>
+        <Content className="gap-0">
           <div
             className={cn(
               "border-[#E46958] rounded",

diff --git a/packages/keychain/src/components/funding/DepositEth.tsx b/packages/keychain/src/components/funding/DepositEth.tsx
@@ -155,7 +155,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
       Icon={EthereumIcon}
       onBack={onBack}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["eth"]} />
       </Content>
 

diff --git a/packages/keychain/src/components/funding/PurchaseCredits.tsx b/packages/keychain/src/components/funding/PurchaseCredits.tsx
@@ -131,7 +131,7 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
       }
       onBack={state === PurchaseState.SELECTION ? onBack : undefined}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["credits"]} />
         <ErrorAlert
           variant=""

diff --git a/packages/keychain/src/components/funding/StripeCheckout.tsx b/packages/keychain/src/components/funding/StripeCheckout.tsx
@@ -81,7 +81,7 @@ export default function StripeCheckout({
       icon={<CoinsIcon variant="solid" />}
       onBack={onBack}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <form id="payment-form">
           <PaymentElement
             id="payment-element"

diff --git a/packages/keychain/src/components/funding/index.tsx b/packages/keychain/src/components/funding/index.tsx
@@ -50,7 +50,7 @@ export function Funding({ onComplete, title }: FundingProps) {
       description={controller && <CopyAddress address={controller.address} />}
       icon={<ArrowIcon variant="down" />}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["credits", "eth"]} />
       </Content>
       <Footer>

diff --git a/packages/keychain/src/components/layout/Content.tsx b/packages/keychain/src/components/layout/Content.tsx
@@ -1,12 +1,18 @@
-import { StackProps, VStack } from "@chakra-ui/react";
-import { useLayout } from "./container";
-
-export function Content({ children, ...stackProps }: StackProps) {
-  const { footer } = useLayout();
+import { cn } from "@cartridge/ui-next";
+import { PropsWithChildren } from "react";
 
+export function Content({
+  children,
+  className,
+}: PropsWithChildren & { className?: string }) {
   return (
-    <VStack w="full" px={4} pb={footer.height} align="stretch" {...stackProps}>
+    <div
+      className={cn(
+        "w-full px-4 pb-[var(--footer-height)] flex flex-col items-stretch gap-2",
+        className,
+      )}
+    >
       {children}
-    </VStack>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/layout/container/header/Banner.stories.tsx b/packages/keychain/src/components/layout/container/header/Banner.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Banner } from "./Banner";
-import { LayoutContext } from "..";
+import { EthereumIcon, TransferDuoIcon } from "@cartridge/ui-next";
 
 const meta: Meta<typeof Banner> = {
   component: Banner,
@@ -11,45 +11,41 @@ const meta: Meta<typeof Banner> = {
       values: [{ name: "dark", value: "#161a17" }],
     },
   },
-  decorators: [
-    (Story, context) => (
-      <LayoutContext.Provider
-        value={{
-          variant: context.parameters.variant || "default",
-          footer: {
-            height: 0,
-            setHeight: () => {},
-            isOpen: false,
-            onToggle: () => {},
-          },
-        }}
-      >
-        <Story />
-      </LayoutContext.Provider>
-    ),
-  ],
+  args: {
+    variant: "compressed",
+    title: "Welcome to Keychain",
+    description: "Secure your digital assets",
+  },
 } satisfies Meta<typeof Banner>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Expanded: Story = {
-  parameters: {
+  args: {
     variant: "expanded",
   },
+};
+
+export const Compressed: Story = {};
+
+export const IconComponentProp: Story = {
   args: {
-    title: "Welcome to Keychain",
-    description: "Secure your digital assets",
+    Icon: TransferDuoIcon,
   },
 };
 
-export const Compressed: Story = {
-  parameters: {
-    variant: "compressed",
+export const IconElementProp: Story = {
+  args: {
+    icon: <EthereumIcon />,
   },
+};
+
+export const VeryLongTitle: Story = {
   args: {
-    title: "Welcome to Keychain",
-    description: "Secure your digital assets",
+    title: "This is a very long title that should be truncated",
+    description:
+      "This is a very long description that should be wrapped and demonstrate how text behaves when it extends beyond multiple lines. It's important to test how the UI handles lengthy content to ensure proper wrapping, readability, and overall visual appeal. How does this much longer description look in the component?",
   },
 };