Share keychain layout component with profile via ui package

packages/keychain/src/components/DeployController.tsx

@@ -3,14 +3,17 @@ import {
   TransactionExecutionStatus,
   TransactionFinalityStatus,
 } from "starknet";
-import { Container, Footer, Content } from "@/components/layout";
 import { useCallback, useEffect, useState } from "react";
 import {
+  LayoutContainer,
+  LayoutFooter,
+  LayoutContent,
   CheckIcon,
   ExternalIcon,
   Spinner,
   WandIcon,
   Button,
+  LayoutHeader,
 } from "@cartridge/ui-next";
 import { Funding } from "./funding";
 import { useConnection } from "@/hooks/connection";
@@ -29,7 +32,8 @@ export function DeployController({
   onClose: () => void;
   ctrlError?: ControllerError;
 }) {
-  const { controller, chainName, hasPrefundRequest } = useConnection();
+  const { closeModal, chainId, controller, chainName, hasPrefundRequest } =
+    useConnection();
   const { deploySelf, isDeploying } = useDeploy();
   const [deployHash, setDeployHash] = useState<string>();
   const [error, setError] = useState<Error>();
@@ -103,11 +107,15 @@ export function DeployController({
 
   if (isLoading) {
     return (
-      <Container
-        variant="expanded"
-        title="Checking account balance..."
-        icon={<Spinner size="xl" />}
-      />
+      <LayoutContainer>
+        <LayoutHeader
+          variant="expanded"
+          title="Checking account balance..."
+          icon={<Spinner size="xl" />}
+          closeModal={closeModal}
+          chainId={chainId}
+        />
+      </LayoutContainer>
     );
   }
 
@@ -129,13 +137,16 @@ export function DeployController({
       );
     case "deploy":
       return (
-        <Container
-          variant="expanded"
-          icon={<WandIcon variant="line" size="lg" />}
-          title="Deploy Controller"
-          description="This will initialize your controller on the new network"
-        >
-          <Content>
+        <LayoutContainer>
+          <LayoutHeader
+            variant="expanded"
+            icon={<WandIcon variant="line" size="lg" />}
+            title="Deploy Controller"
+            description="This will initialize your controller on the new network"
+            closeModal={closeModal}
+            chainId={chainId}
+          />
+          <LayoutContent>
             <TransactionSummary
               calls={[
                 {
@@ -145,9 +156,9 @@ export function DeployController({
                 },
               ]}
             />
-          </Content>
+          </LayoutContent>
 
-          <Footer>
+          <LayoutFooter>
             {error ? (
               <ErrorAlert
                 title="Something went wrong"
@@ -159,26 +170,29 @@ export function DeployController({
             <Button onClick={onDeploy} isLoading={isDeploying}>
               DEPLOY
             </Button>
-          </Footer>
-        </Container>
+          </LayoutFooter>
+        </LayoutContainer>
       );
     case "deploying":
       return (
-        <Container
-          variant="expanded"
-          icon={<Spinner size="xl" />}
-          title="Deploying Controller"
-          description={`Your controller is being deployed on ${chainName}`}
-        >
-          <Content className="items-center">
+        <LayoutContainer>
+          <LayoutHeader
+            variant="expanded"
+            icon={<Spinner size="xl" />}
+            title="Deploying Controller"
+            description={`Your controller is being deployed on ${chainName}`}
+            closeModal={closeModal}
+            chainId={chainId}
+          />
+          <LayoutContent>
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
                 txHash={deployHash}
               />
             )}
-          </Content>
-          <Footer>
+          </LayoutContent>
+          <LayoutFooter>
             {error ? (
               <ErrorAlert
                 title="Something went wrong"
@@ -190,26 +204,29 @@ export function DeployController({
             <Button onClick={onDeploy} isLoading={isDeploying}>
               continue
             </Button>
-          </Footer>
-        </Container>
+          </LayoutFooter>
+        </LayoutContainer>
       );
     case "deployed":
       return (
-        <Container
-          variant="expanded"
-          Icon={CheckIcon}
-          title="Success!"
-          description={`Your controller has been deployed on ${chainName}`}
-        >
-          <Content className="items-center">
+        <LayoutContainer>
+          <LayoutHeader
+            variant="expanded"
+            Icon={CheckIcon}
+            title="Success!"
+            description={`Your controller has been deployed on ${chainName}`}
+            closeModal={closeModal}
+            chainId={chainId}
+          />
+          <LayoutContent className="items-center">
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
                 txHash={deployHash}
               />
             )}
-          </Content>
-          <Footer>
+          </LayoutContent>
+          <LayoutFooter>
             {error ? (
               <ErrorAlert
                 title="Something went wrong"
@@ -219,8 +236,8 @@ export function DeployController({
               <ControllerErrorAlert error={ctrlError} />
             ) : null}
             <Button onClick={onClose}>continue</Button>
-          </Footer>
-        </Container>
+          </LayoutFooter>
+        </LayoutContainer>
       );
   }
 }

packages/keychain/src/components/ErrorBoundary.tsx

@@ -1,6 +1,13 @@
 import React, { PropsWithChildren } from "react";
-import { Container, Content, Footer } from "./layout";
-import { AlertIcon, ExternalIcon, Button } from "@cartridge/ui-next";
+import {
+  LayoutContainer,
+  LayoutContent,
+  LayoutFooter,
+  AlertIcon,
+  ExternalIcon,
+  Button,
+  LayoutHeader,
+} from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
@@ -30,7 +37,7 @@ export class ErrorBoundary extends React.Component<
 }
 
 export function ErrorPage({ error }: { error: Error }) {
-  const { closeModal } = useConnection();
+  const { closeModal, chainId } = useConnection();
 
   const posthog = usePostHog();
 
@@ -41,14 +48,17 @@ export function ErrorPage({ error }: { error: Error }) {
   }, [error, posthog]);
 
   return (
-    <Container
-      variant="expanded"
-      title="Uh oh!"
-      description="Something went wrong"
-      Icon={AlertIcon}
-    >
-      <Content className="gap-4">
-        <div className="flex w-full px-4 py-6 bg-background-100 border border-background-200 rounded">
+    <LayoutContainer>
+      <LayoutHeader
+        variant="expanded"
+        title="Uh oh!"
+        description="Something went wrong"
+        Icon={AlertIcon}
+        onClose={closeModal}
+        chainId={chainId}
+      />
+      <LayoutContent className="gap-4">
+        <div className="flex w-full px-4 py-6 bg-secondary border border-background-200 rounded">
           <p className="w-full text-sm">{error.message}</p>
         </div>
 
@@ -64,13 +74,13 @@ export function ErrorPage({ error }: { error: Error }) {
             <ExternalIcon size="sm" />
           </Link>
         </div>
-      </Content>
+      </LayoutContent>
 
-      <Footer>
+      <LayoutFooter>
         <Button variant="secondary" onClick={closeModal}>
           close
         </Button>
-      </Footer>
-    </Container>
+      </LayoutFooter>
+    </LayoutContainer>
   );
 }

packages/keychain/src/components/ExecutionContainer.tsx

@@ -1,14 +1,18 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { Button } from "@cartridge/ui-next";
-import { Container, Footer } from "@/components/layout";
+import {
+  Button,
+  HeaderProps,
+  LayoutContainer,
+  LayoutFooter,
+  LayoutHeader,
+} from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { ControllerError } from "@/utils/connection";
 import { ControllerErrorAlert, ErrorAlert } from "@/components/ErrorAlert";
 import { Fees } from "./Fees";
 import { Funding } from "./funding";
 import { DeployController } from "./DeployController";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
-import { BannerProps } from "./layout/container/header/Banner";
 import { parseControllerError } from "@/utils/connection/execute";
 import isEqual from "lodash/isEqual";
 
@@ -40,8 +44,8 @@ export function ExecutionContainer({
   buttonText = "SUBMIT",
   children,
 }: ExecutionContainerProps &
-  Pick<BannerProps, "title" | "description" | "icon">) {
-  const { controller } = useConnection();
+  Pick<HeaderProps, "title" | "description" | "icon">) {
+  const { controller, closeModal, chainId, openSettings } = useConnection();
   const [maxFee, setMaxFee] = useState<bigint | null>(null);
   const [ctrlError, setCtrlError] = useState<ControllerError | undefined>(
     executionError,
@@ -159,9 +163,17 @@ export function ExecutionContainer({
   }
 
   return (
-    <Container title={title} description={description} icon={icon}>
+    <LayoutContainer>
+      <LayoutHeader
+        title={title}
+        description={description}
+        icon={icon}
+        onClose={closeModal}
+        chainId={chainId}
+        openSettings={openSettings}
+      />
       {children}
-      <Footer>
+      <LayoutFooter>
         {(() => {
           switch (ctrlError?.code) {
             case ErrorCode.CartridgeControllerNotDeployed:
@@ -220,7 +232,7 @@ export function ExecutionContainer({
               );
           }
         })()}
-      </Footer>
-    </Container>
+      </LayoutFooter>
+    </LayoutContainer>
   );
 }

packages/keychain/src/components/SignMessage.tsx

@@ -1,15 +1,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { shortString, Signature, TypedData } from "starknet";
-import { Container, Footer, Content } from "@/components/layout";
 import {
+  LayoutContainer,
+  LayoutFooter,
+  LayoutContent,
   Button,
   Card,
   CardHeader,
   CardTitle,
   CardListContent,
   CardListItem,
+  LayoutHeader,
 } from "@cartridge/ui-next";
-import { useController } from "@/hooks/controller";
+import { useConnection } from "@/hooks/connection";
 
 export function SignMessage({
   origin,
@@ -22,7 +25,7 @@ export function SignMessage({
   onSign: (sig: Signature) => void;
   onCancel: () => void;
 }) {
-  const { controller } = useController();
+  const { closeModal, chainId, openSettings, controller } = useConnection();
   const [messageData, setMessageData] = useState<TypedData>();
 
   useEffect(() => {
@@ -65,12 +68,16 @@ export function SignMessage({
   }, [controller, onSign, typedData]);
 
   return (
-    <Container
-      title="Signature Request"
-      description={`${hostname} is asking you to sign a message`}
-    >
-      {messageData && (
-        <Content>
+    <LayoutContainer>
+      <LayoutHeader
+        title="Signature Request"
+        description={`${hostname} is asking you to sign a message`}
+        chainId={chainId}
+        onClose={closeModal}
+        openSettings={openSettings}
+      />
+      <LayoutContent>
+        {messageData && (
           <div className="flex flex-col w-full gap-4 text-sm">
             {messageData.types[messageData.primaryType].map((typ) => (
               <Card key={typ.name}>
@@ -105,16 +112,16 @@ export function SignMessage({
               </Card>
             ))}
           </div>
-        </Content>
-      )}
+        )}
+      </LayoutContent>
 
-      <Footer>
+      <LayoutFooter>
         <Button onClick={onConfirm}>sign</Button>
 
         <Button variant="secondary" onClick={onCancel}>
           reject
         </Button>
-      </Footer>
-    </Container>
+      </LayoutFooter>
+    </LayoutContainer>
   );
 }