Header update

packages/keychain/.storybook/mock.ts

@@ -48,7 +48,11 @@ export function useMockedConnection({
     openModal: () => {},
     logout: () => {},
     openSettings: () => {},
-    controller: {},
+    controller: {
+      username: () => "test-account",
+      address:
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    },
     upgrade: {},
     ...rest,
   };

packages/keychain/.storybook/provider.tsx

@@ -5,8 +5,8 @@ import { mainnet } from "@starknet-react/chains";
 import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
 import { useThemeEffect } from "@cartridge/ui-next";
 import { BrowserRouter } from "react-router-dom";
-
 import { ConnectionContext } from "../src/components/provider/connection";
+import { UIProvider } from "../src/components/provider/ui";
 import { StoryParameters, useMockedConnection } from "./mock";
 import {
   ControllerThemeContext,
@@ -38,9 +38,11 @@ export function Provider({
     >
       <QueryClientProvider client={queryClient}>
         <ConnectionContext.Provider value={connection}>
-          <ControllerThemeProvider theme={connection.theme}>
-            <BrowserRouter>{children}</BrowserRouter>
-          </ControllerThemeProvider>
+          <UIProvider>
+            <ControllerThemeProvider theme={connection.theme}>
+              <BrowserRouter>{children}</BrowserRouter>
+            </ControllerThemeProvider>
+          </UIProvider>
         </ConnectionContext.Provider>
       </QueryClientProvider>
     </StarknetConfig>

packages/keychain/src/components/DeployController.tsx

@@ -32,8 +32,7 @@ export function DeployController({
   onClose: () => void;
   ctrlError?: ControllerError;
 }) {
-  const { closeModal, chainId, controller, chainName, hasPrefundRequest } =
-    useConnection();
+  const { controller, chainName, hasPrefundRequest } = useConnection();
   const { deploySelf, isDeploying } = useDeploy();
   const [deployHash, setDeployHash] = useState<string>();
   const [error, setError] = useState<Error>();
@@ -112,8 +111,6 @@ export function DeployController({
           variant="expanded"
           title="Checking account balance..."
           icon={<Spinner size="xl" />}
-          closeModal={closeModal}
-          chainId={chainId}
         />
       </LayoutContainer>
     );
@@ -143,8 +140,6 @@ export function DeployController({
             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
@@ -181,8 +176,6 @@ export function DeployController({
             icon={<Spinner size="xl" />}
             title="Deploying Controller"
             description={`Your controller is being deployed on ${chainName}`}
-            closeModal={closeModal}
-            chainId={chainId}
           />
           <LayoutContent>
             {deployHash && controller && (
@@ -215,8 +208,6 @@ export function DeployController({
             Icon={CheckIcon}
             title="Success!"
             description={`Your controller has been deployed on ${chainName}`}
-            closeModal={closeModal}
-            chainId={chainId}
           />
           <LayoutContent className="items-center">
             {deployHash && controller && (

packages/keychain/src/components/ErrorBoundary.tsx

@@ -37,7 +37,7 @@ export class ErrorBoundary extends React.Component<
 }
 
 export function ErrorPage({ error }: { error: Error }) {
-  const { closeModal, chainId } = useConnection();
+  const { closeModal } = useConnection();
 
   const posthog = usePostHog();
 
@@ -54,8 +54,6 @@ export function ErrorPage({ error }: { error: Error }) {
         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-background-100 border border-background-200 rounded">

packages/keychain/src/components/ExecutionContainer.tsx

@@ -45,7 +45,7 @@ export function ExecutionContainer({
   children,
 }: ExecutionContainerProps &
   Pick<HeaderProps, "title" | "description" | "icon">) {
-  const { controller, closeModal, chainId, openSettings } = useConnection();
+  const { controller } = useConnection();
   const [maxFee, setMaxFee] = useState<bigint | null>(null);
   const [ctrlError, setCtrlError] = useState<ControllerError | undefined>(
     executionError,
@@ -164,14 +164,7 @@ export function ExecutionContainer({
 
   return (
     <LayoutContainer>
-      <LayoutHeader
-        title={title}
-        description={description}
-        icon={icon}
-        onClose={closeModal}
-        chainId={chainId}
-        openSettings={openSettings}
-      />
+      <LayoutHeader title={title} description={description} icon={icon} />
       {children}
       <LayoutFooter>
         {(() => {

packages/keychain/src/components/SignMessage.tsx

@@ -25,7 +25,7 @@ export function SignMessage({
   onSign: (sig: Signature) => void;
   onCancel: () => void;
 }) {
-  const { closeModal, chainId, openSettings, controller } = useConnection();
+  const { controller } = useConnection();
   const [messageData, setMessageData] = useState<TypedData>();
 
   useEffect(() => {
@@ -72,9 +72,6 @@ export function SignMessage({
       <LayoutHeader
         title="Signature Request"
         description={`${hostname} is asking you to sign a message`}
-        chainId={chainId}
-        onClose={closeModal}
-        openSettings={openSettings}
       />
       <LayoutContent>
         {messageData && (

packages/keychain/src/components/connect/CreateSession.tsx

@@ -27,7 +27,7 @@
   onConnect: (transaction_hash?: string, expiresAt?: bigint) => void;
   isUpdate?: boolean;
 }) {
-  const { closeModal, controller, upgrade, chainId, theme } = useConnection();
+  const { controller, upgrade, chainId, theme } = useConnection();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isConsent, setIsConsent] = useState(false);
   const [duration, setDuration] = useState<bigint>(DEFAULT_SESSION_DURATION);
@@ -79,7 +79,7 @@
       setError(e as unknown as Error);
       setIsConnecting(false);
     }
   }, [controller, duration, policies, maxFee, onConnect]);
 
   const onSkipSession = useCallback(async () => {
     if (!controller || !policies) return;
@@ -111,8 +111,6 @@
             ? "The policies were updated, please update existing session"
             : undefined
         }
-        onClose={closeModal}
-        chainId={chainId}
       />
       <LayoutContent className="gap-6">
         <SessionConsent isVerified={policies?.verified} />

packages/keychain/src/components/connect/Logout.tsx

@@ -9,17 +9,13 @@ import { useConnection } from "@/hooks/connection";
 import { ResponseCodes } from "@cartridge/controller";
 
 export function Logout() {
-  const { closeModal, chainId, openSettings, context, logout } =
-    useConnection();
+  const { context, logout } = useConnection();
   return (
     <LayoutContainer>
       <LayoutHeader
         Icon={SignOutIcon}
         title="Log Out"
         description="Are you sure?"
-        onClose={closeModal}
-        chainId={chainId}
-        openSettings={openSettings}
       />
       <LayoutFooter>
         <Button onClick={logout}>Log Out</Button>

packages/keychain/src/components/connect/authenticate/Unsupported.tsx

@@ -1,17 +1,12 @@
 import { LayoutContainer, LayoutHeader, AlertIcon } from "@cartridge/ui-next";
-import { useConnection } from "@/hooks/connection";
 
 export function Unsupported({ message }: { message: string }) {
-  const { closeModal, chainId } = useConnection();
-
   return (
     <LayoutContainer>
       <LayoutHeader
         Icon={AlertIcon}
         title="Device is not supported"
         description={message}
-        onClose={closeModal}
-        chainId={chainId}
       />
     </LayoutContainer>
   );

packages/keychain/src/components/connect/authenticate/index.tsx

@@ -10,7 +10,6 @@ import { Unsupported } from "./Unsupported";
 import { doSignup } from "@/hooks/account";
 import { useIsSupported } from "./useIsSupported";
 import { FaceIDImage } from "./FaceID";
-import { useConnection } from "@/hooks/connection";
 
 export type AuthAction = "signup" | "login";
 
@@ -27,7 +26,6 @@ export function Authenticate({
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const { isSupported, message } = useIsSupported();
-  const { closeModal, chainId } = useConnection();
 
   const onAuth = useCallback(async () => {
     setIsLoading(true);
@@ -75,8 +73,6 @@ export function Authenticate({
         variant="expanded"
         title={title}
         description={description}
-        onClose={closeModal}
-        chainId={chainId}
       />
       <LayoutContent className="items-center pb-10">
         <FaceIDImage />

packages/keychain/src/components/connect/create/CreateController.tsx

@@ -19,7 +19,6 @@
 import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
 import { usePostHog } from "@cartridge/utils";
-import { useConnection } from "@/hooks/connection";
 
 interface CreateControllerViewProps {
   theme: VerifiableControllerTheme;
@@ -36,6 +35,7 @@
   onSubmit: () => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
   isInAppBrowser?: boolean;
+  isSlot?: boolean;
 }
 
 export function CreateControllerView({
@@ -45,14 +45,13 @@
   isLoading,
   error,
   isInAppBrowser,
+  isSlot,
   onUsernameChange,
   onUsernameFocus,
   onUsernameClear,
   onSubmit,
   onKeyDown,
 }: CreateControllerViewProps) {
-  const { closeModal, chainId } = useConnection();
-
   return (
     <LayoutContainer>
       <LayoutHeader
@@ -63,8 +62,8 @@
             : `Play ${theme.name}`
         }
         description="Connect your Controller"
-        chainId={chainId}
-        onClose={closeModal}
+        hideNetwork={isSlot}
+        hideSettings
       />
 
       <form
@@ -193,7 +192,7 @@
     loginMode,
   });
 
   const handleFormSubmit = () => {
     if (!usernameField.value) {
       return;
     }
@@ -267,6 +266,7 @@
       isLoading={isLoading}
       error={error}
       isInAppBrowser={isInApp}
+      isSlot={isSlot}
       onUsernameChange={handleUsernameChange}
       onUsernameFocus={handleUsernameFocus}
       onUsernameClear={handleUsernameClear}

packages/keychain/src/components/failure.tsx

@@ -6,10 +6,8 @@ import {
 } from "@cartridge/ui-next";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
-import { useConnection } from "@/hooks/connection";
 
 export function Failure() {
-  const { closeModal, chainId } = useConnection();
   return (
     <LayoutContainer>
       <LayoutHeader
@@ -29,8 +27,7 @@ export function Failure() {
             </Link>
           </>
         }
-        chainId={chainId}
-        onClose={closeModal}
+        hideNetwork
       />
     </LayoutContainer>
   );

packages/keychain/src/components/funding/DepositEth.tsx

@@ -55,7 +55,7 @@ export function DepositEth(innerProps: DepositEthProps) {
 
 function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
   const { connectAsync, connectors, isPending: isConnecting } = useConnect();
-  const { closeModal, controller, chainId } = useConnection();
+  const { controller, chainId } = useConnection();
   const { account: extAccount } = useAccount();
 
   const [dollarAmount, setDollarAmount] = useState<number>(DEFAULT_AMOUNT);
@@ -159,8 +159,6 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
         }
         Icon={EthereumIcon}
         onBack={onBack}
-        chainId={chainId}
-        onClose={closeModal}
       />
 
       <LayoutContent className="gap-6">

packages/keychain/src/components/funding/PurchaseCredits.tsx

@@ -35,7 +35,7 @@ type PurchaseCreditsProps = {
 };
 
 export function PurchaseCredits({ isSlot, onBack }: PurchaseCreditsProps) {
-  const { closeModal, chainId, controller } = useConnection();
+  const { closeModal, controller } = useConnection();
 
   const [clientSecret, setClientSecret] = useState("");
   const [isLoading, setisLoading] = useState<boolean>(false);
@@ -119,8 +119,6 @@ export function PurchaseCredits({ isSlot, onBack }: PurchaseCreditsProps) {
           )
         }
         onBack={state === PurchaseState.SELECTION ? onBack : undefined}
-        chainId={chainId}
-        onClose={closeModal}
       />
       <LayoutContent className="gap-6">
         <Balance showBalances={["credits"]} />

packages/keychain/src/components/funding/StripeCheckout.tsx

@@ -30,7 +30,7 @@ export default function StripeCheckout({
 }: StripeCheckoutProps) {
   const stripe = useStripe();
   const elements = useElements();
-  const { closeModal, chainId, controller } = useConnection();
+  const { controller } = useConnection();
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -88,8 +88,6 @@ export default function StripeCheckout({
         description={controller && <CopyAddress address={controller.address} />}
         icon={<CoinsIcon variant="solid" size="lg" />}
         onBack={onBack}
-        chainId={chainId}
-        onClose={closeModal}
       />
       <LayoutContent className="gap-6">
         <form id="payment-form">

packages/keychain/src/components/funding/index.tsx

@@ -28,7 +28,7 @@ export type FundingProps = {
 };
 
 export function Funding({ title, isSlot, onComplete }: FundingProps) {
-  const { closeModal, chainId, controller } = useConnection();
+  const { controller } = useConnection();
   const [state, setState] = useState<FundingState>(FundingState.SHOW_OPTIONS);
   const showBalances: BalanceType[] = isSlot ? ["credits"] : ["credits", "eth"];
   const showCredits =
@@ -59,8 +59,6 @@ export function Funding({ title, isSlot, onComplete }: FundingProps) {
         title={title || (controller ? `Fund ${controller.username()}` : "")}
         description={controller && <CopyAddress address={controller.address} />}
         icon={<ArrowIcon variant="down" size="lg" />}
-        chainId={chainId}
-        onClose={closeModal}
       />
       <LayoutContent className="gap-6">
         <Balance showBalances={showBalances} />