From aae994e8058ffc70d194cdac1fee385a9bd46e82 Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Fri, 10 Jan 2025 17:18:44 +0900 Subject: [PATCH 01/12] Replace layout wrapper with TW classes --- .../connect/create/CreateController.tsx | 3 +- .../src/components/layout/container/index.tsx | 112 ++++++------------ 2 files changed, 36 insertions(+), 79 deletions(-) diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx index a04e2d81e..aac07ca0b 100644 --- a/packages/keychain/src/components/connect/create/CreateController.tsx +++ b/packages/keychain/src/components/connect/create/CreateController.tsx @@ -1,6 +1,6 @@ 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"; @@ -8,7 +8,6 @@ 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"; diff --git a/packages/keychain/src/components/layout/container/index.tsx b/packages/keychain/src/components/layout/container/index.tsx index fa9abc6e7..0a145ba76 100644 --- a/packages/keychain/src/components/layout/container/index.tsx +++ b/packages/keychain/src/components/layout/container/index.tsx @@ -1,11 +1,3 @@ -import { - Container as ChakraContainer, - VStack, - StyleProps, - Flex, - Show, -} from "@chakra-ui/react"; -import { motion } from "framer-motion"; import { PropsWithChildren, createContext, useContext, useState } from "react"; import { Header, HeaderProps } from "./header"; import { useDisclosure } from "@cartridge/ui-next"; @@ -20,88 +12,54 @@ export function Container({ icon, title, description, - variant, + variant = "compressed", + className, }: { variant?: LayoutVariant; } & PropsWithChildren & - StyleProps & - HeaderProps) { - return ( - -
+ HeaderProps & { className?: string }) { + const [height, setHeight] = useState(0); - {children} - + const { isOpen, onToggle } = useDisclosure(); + return ( + + +
+
{children}
+ + ); } export const FOOTER_HEIGHT = 40; export const PORTAL_WINDOW_HEIGHT = 600; -function Wrapper({ - variant = "compressed", - children, - ...rest -}: React.PropsWithChildren & { variant?: LayoutVariant }) { - const [height, setHeight] = useState(0); - const { isOpen, onToggle } = useDisclosure(); - +function ResponsiveWrapper({ children }: PropsWithChildren) { return ( - - {/** Show as full page */} - - + <> + {/* for desktop */} +
+
{children} - - +
+
- {/** Show as modal */} - - - - {children} - - - - + {/* device smaller than desktop width */} +
+ {children} +
+ ); } From 0ce253df2fac4ac25cd205f311f19c17566e6826 Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Fri, 10 Jan 2025 17:19:11 +0900 Subject: [PATCH 02/12] Replace layout footer with TW classes --- .../src/components/layout/footer/index.tsx | 76 ++++++------------- .../transaction/ConfirmTransaction.tsx | 4 +- 2 files changed, 25 insertions(+), 55 deletions(-) diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/packages/keychain/src/components/layout/footer/index.tsx index 24a3dccd7..e72f7e7dc 100644 --- a/packages/keychain/src/components/layout/footer/index.tsx +++ b/packages/keychain/src/components/layout/footer/index.tsx @@ -1,24 +1,22 @@ -import { HStack, VStack, Text } from "@chakra-ui/react"; -import React, { forwardRef, memo, useEffect, useRef } from "react"; -import { FOOTER_HEIGHT, useLayout } from "@/components/layout"; -import { Link } from "react-router-dom"; +import { forwardRef, memo, PropsWithChildren, useEffect, useRef } from "react"; +import { useLayout } from "@/components/layout"; import { cn } from "@cartridge/ui-next"; +import { Link } from "react-router-dom"; export function Footer({ children, + className, showCatridgeLogo, -}: React.PropsWithChildren & { - showCatridgeLogo?: boolean; -}) { +}: PropsWithChildren & { className?: string; showCatridgeLogo?: boolean }) { const ref = useRef(null); const { footer } = useLayout(); useEffect(() => { if (!ref.current) return; - const observer = new ResizeObserver((entries) => { - for (const entry of entries) { - footer.setHeight(entry.contentRect.height); + const observer = new ResizeObserver(() => { + if (ref.current && ref.current?.offsetHeight > 0) { + footer.setHeight(ref.current?.offsetHeight); } }); @@ -34,54 +32,28 @@ export function Footer({ }, [footer.isOpen]); return ( - - - {children} - +
{children}
{showCatridgeLogo && ( - - - - by - + +
by
- + )} - + ); } @@ -135,12 +107,12 @@ export const CartridgeLogo = memo( ), ); -const ControllerIcon = ({ height = 16 }: { height?: number }) => ( +const ControllerIcon = () => ( ( /> ); - -export const FOOTER_MIN_HEIGHT = 252; diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx index eeb23e83a..2a2009707 100644 --- a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx +++ b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx @@ -1,5 +1,5 @@ import { ResponseCodes, toArray } from "@cartridge/controller"; -import { Content, FOOTER_MIN_HEIGHT } from "@/components/layout"; +import { Content } from "@/components/layout"; import { TransactionDuoIcon } from "@cartridge/ui-next"; import { useConnection } from "@/hooks/connection"; import { TransactionSummary } from "@/components/transaction/TransactionSummary"; @@ -39,7 +39,7 @@ export function ConfirmTransaction() { transactionsDetail={ctx.transactionsDetail} onSubmit={onSubmit} > - + From e4af7e0f66fd13f8cf8af5a57b6554ba71ac54d6 Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Fri, 10 Jan 2025 17:33:21 +0900 Subject: [PATCH 03/12] Remove chakra components from layout Content --- .../src/components/DeployController.tsx | 4 ++-- .../keychain/src/components/ErrorBoundary.tsx | 2 +- .../src/components/connect/CreateSession.tsx | 2 +- .../connect/create/CreateController.tsx | 2 +- .../src/components/funding/DepositEth.tsx | 2 +- .../components/funding/PurchaseCredits.tsx | 2 +- .../src/components/layout/Content.tsx | 21 ++++++++++++------- .../src/components/layout/container/index.tsx | 4 ++-- .../src/components/layout/footer/index.tsx | 7 +++++-- 9 files changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx index 687a29f53..d185d8552 100644 --- 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}`} > - + {deployHash && controller && ( - + {deployHash && controller && ( } > - +

{error.message}

diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx index 8165cafb9..c8af9c6ce 100644 --- a/packages/keychain/src/components/connect/CreateSession.tsx +++ b/packages/keychain/src/components/connect/CreateSession.tsx @@ -118,7 +118,7 @@ export function CreateSession({ } }} > - + {policies?.verified ? ( - +
- + diff --git a/packages/keychain/src/components/funding/PurchaseCredits.tsx b/packages/keychain/src/components/funding/PurchaseCredits.tsx index 4cf267d82..61db5c63c 100644 --- 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} > - + +
{children} - +
); } diff --git a/packages/keychain/src/components/layout/container/index.tsx b/packages/keychain/src/components/layout/container/index.tsx index 0a145ba76..914095b8b 100644 --- a/packages/keychain/src/components/layout/container/index.tsx +++ b/packages/keychain/src/components/layout/container/index.tsx @@ -49,14 +49,14 @@ function ResponsiveWrapper({ children }: PropsWithChildren) { return ( <> {/* for desktop */} -
+
{children}
{/* device smaller than desktop width */} -
+
{children}
diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/packages/keychain/src/components/layout/footer/index.tsx index e72f7e7dc..84684585b 100644 --- a/packages/keychain/src/components/layout/footer/index.tsx +++ b/packages/keychain/src/components/layout/footer/index.tsx @@ -16,7 +16,10 @@ export function Footer({ const observer = new ResizeObserver(() => { if (ref.current && ref.current?.offsetHeight > 0) { - footer.setHeight(ref.current?.offsetHeight); + document.documentElement.style.setProperty( + "--footer-height", + `${ref.current.offsetHeight}px`, + ); } }); @@ -40,7 +43,7 @@ export function Footer({ )} ref={ref} > -
{children}
+
{children}
{showCatridgeLogo && ( Date: Fri, 10 Jan 2025 17:42:38 +0900 Subject: [PATCH 04/12] Remove layout context --- packages/keychain/index.html | 2 +- .../src/components/funding/StripeCheckout.tsx | 2 +- .../keychain/src/components/funding/index.tsx | 2 +- .../container/header/Banner.stories.tsx | 18 ----- .../layout/container/header/Banner.tsx | 14 +++- .../src/components/layout/container/index.tsx | 77 ++++--------------- .../src/components/layout/footer/index.tsx | 8 +- 7 files changed, 32 insertions(+), 91 deletions(-) diff --git a/packages/keychain/index.html b/packages/keychain/index.html index 1c96ade2e..62608acd4 100644 --- a/packages/keychain/index.html +++ b/packages/keychain/index.html @@ -50,7 +50,7 @@ })(); - +
diff --git a/packages/keychain/src/components/funding/StripeCheckout.tsx b/packages/keychain/src/components/funding/StripeCheckout.tsx index e421673ce..4138533e4 100644 --- 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={} onBack={onBack} > - +
} icon={} > - +