Logout when user click close on upgrade screen

packages/keychain/src/components/Provider/connection.tsx

@@ -23,7 +23,7 @@ export type ConnectionContextValue = {
   setController: (controller: Controller) => void;
   closeModal: () => void;
   openModal: () => void;
-  logout: (context: ConnectionCtx) => void;
+  logout: () => void;
   openSettings: () => void;
 };
 

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

@@ -4,15 +4,16 @@ import { useState } from "react";
 import { Container, Footer } from "components/layout";
 import { Recovery } from "./Recovery";
 import { Delegate } from "./Delegate";
+import { useConnection } from "hooks/connection";
 
 enum State {
   SETTINGS,
   RECOVERY,
   DELEGATE,
 }
 
-export function Settings({ onLogout }: { onLogout: () => void }) {
-  // const { controller, context, setContext } = useConnection();
+export function Settings() {
+  const { logout } = useConnection();
   const [state, setState] = useState<State>(State.SETTINGS);
   // const [delegateAccount, setDelegateAccount] = useState("");
 
@@ -159,7 +160,7 @@ export function Settings({ onLogout }: { onLogout: () => void }) {
         </VStack>
       </Content> */}
       <Footer>
-        <Button w="full" onClick={onLogout}>
+        <Button w="full" onClick={logout}>
           Log out
         </Button>
       </Footer>

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

@@ -1,21 +1,27 @@
 import { Button } from "@chakra-ui/react";
 import { Container, Footer } from "components/layout";
 import { LogoutDuoIcon } from "@cartridge/ui";
+import { useConnection } from "hooks/connection";
+import { ResponseCodes } from "@cartridge/controller";
 
-export function Logout({
-  onConfirm,
-  onCancel,
-}: {
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
+export function Logout() {
+  const { context, logout } = useConnection();
   return (
     <Container Icon={LogoutDuoIcon} title="Log Out" description="Are you sure?">
       <Footer>
-        <Button colorScheme="colorful" onClick={onConfirm}>
+        <Button colorScheme="colorful" onClick={logout}>
           Log Out
         </Button>
-        <Button onClick={onCancel}>Cancel</Button>
+        <Button
+          onClick={() => {
+            context.resolve({
+              code: ResponseCodes.CANCELED,
+              message: "User cancelled logout",
+            });
+          }}
+        >
+          Cancel
+        </Button>
       </Footer>
     </Container>
   );

packages/keychain/src/components/layout/Container/Header/CloseButton.tsx

@@ -2,9 +2,17 @@ import { TimesIcon } from "@cartridge/ui";
 import { isIframe } from "@cartridge/utils";
 import { IconButton } from "@chakra-ui/react";
 import { useConnection } from "hooks/connection";
+import { useCallback } from "react";
 
 export function CloseButton() {
-  const { closeModal } = useConnection();
+  const { upgrade, logout, closeModal } = useConnection();
+
+  const onClose = useCallback(() => {
+    if (upgrade.available) {
+      logout();
+    }
+    closeModal();
+  }, [upgrade.available, logout, closeModal]);
 
   if (!isIframe()) {
     return null;
@@ -19,7 +27,7 @@ export function CloseButton() {
         opacity: 0.75,
       }}
       icon={<TimesIcon fontSize={24} />}
-      onClick={closeModal}
+      onClick={onClose}
     />
   );
 }

packages/keychain/src/hooks/connection.ts

@@ -4,7 +4,6 @@ import Controller from "utils/controller";
 import {
   connectToController,
   ConnectionCtx,
-  LogoutCtx,
   OpenSettingsCtx,
 } from "utils/connection";
 import { getChainName, isIframe } from "@cartridge/utils";
@@ -155,14 +154,15 @@ export function useConnectionValue() {
     }
   }, [rpcUrl, controller]);
 
-  const logout = useCallback((context: ConnectionCtx) => {
-    setContext({
-      origin: context.origin,
-      type: "logout",
-      resolve: context.resolve,
-      reject: context.reject,
-    } as LogoutCtx);
-  }, []);
+  const logout = useCallback(() => {
+    window.controller?.disconnect();
+    setController(undefined);
+
+    context.resolve({
+      code: ResponseCodes.NOT_CONNECTED,
+      message: "User logged out",
+    });
+  }, [context, setController]);
 
   const openSettings = useCallback(() => {
     setContext({

packages/keychain/src/pages/index.tsx

@@ -4,12 +4,7 @@ import { ResponseCodes } from "@cartridge/controller";
 import { DeployController, ConfirmTransaction, SignMessage } from "components";
 import { CreateController, CreateSession, Logout } from "components/connect";
 import { useConnection } from "hooks/connection";
-import {
-  DeployCtx,
-  LogoutCtx,
-  OpenSettingsCtx,
-  SignMessageCtx,
-} from "utils/connection";
+import { DeployCtx, SignMessageCtx } from "utils/connection";
 import { LoginMode } from "components/connect/types";
 import { ErrorPage } from "components/ErrorBoundary";
 import { Settings } from "components/Settings";
@@ -19,8 +14,7 @@ import { useEffect } from "react";
 import { usePostHog } from "posthog-js/react";
 
 function Home() {
-  const { context, controller, setController, error, policies, upgrade } =
-    useConnection();
+  const { context, controller, error, policies, upgrade } = useConnection();
   const posthog = usePostHog();
 
   useEffect(() => {
@@ -85,26 +79,7 @@ function Home() {
     case "logout": {
       posthog?.capture("Call Logout");
 
-      const ctx = context as LogoutCtx;
-      return (
-        <Logout
-          onConfirm={() => {
-            window.controller?.disconnect();
-            setController(undefined);
-
-            ctx.resolve({
-              code: ResponseCodes.NOT_CONNECTED,
-              message: "User logged out",
-            });
-          }}
-          onCancel={() =>
-            ctx.resolve({
-              code: ResponseCodes.CANCELED,
-              message: "User cancelled logout",
-            })
-          }
-        />
-      );
+      return <Logout />;
     }
     case "sign-message": {
       posthog?.capture("Call Sign Message");
@@ -147,20 +122,7 @@ function Home() {
     case "open-settings": {
       posthog?.capture("Call Open Settings");
 
-      const ctx = context as OpenSettingsCtx;
-      return (
-        <Settings
-          onLogout={() => {
-            window.controller?.disconnect();
-            setController(undefined);
-
-            ctx.resolve({
-              code: ResponseCodes.NOT_CONNECTED,
-              message: "User logged out",
-            });
-          }}
-        />
-      );
+      return <Settings />;
     }
     case "open-purchase-credits": {
       posthog?.capture("Call Purchase Credits");