Sunset chakra components from layout (#1267)

* Replace layout wrapper with TW classes * Replace layout footer with TW classes * Remove chakra components from layout Content * Remove layout context * Fix footer height * Fix content height * Remove chakra components from layout header * Prevent client-side cross-site scripting via user defined image src * Add snapshot updates * Fix topbar padding * Float network right even without close/back button * Update snapshots --------- Co-authored-by: Tarrence van As <[email protected]>
cartridge-gg · Jan 14, 2025 · cec808a · cec808a
1 parent 168bd74
commit cec808a
Show file tree

Hide file tree

Showing 45 changed files with 224 additions and 393 deletions.
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?",
   },
 };