From dd951f9389f37b8ba58509b307d9214c46b74558 Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Wed, 20 Nov 2024 18:29:42 +0100 Subject: [PATCH] Logout when user click close on upgarde screen --- .../src/components/Provider/connection.tsx | 2 +- .../src/components/Settings/index.tsx | 7 +-- .../src/components/connect/Logout.tsx | 24 ++++++---- .../layout/Container/Header/CloseButton.tsx | 12 ++++- packages/keychain/src/hooks/connection.ts | 18 ++++---- packages/keychain/src/pages/index.tsx | 46 ++----------------- 6 files changed, 43 insertions(+), 66 deletions(-) diff --git a/packages/keychain/src/components/Provider/connection.tsx b/packages/keychain/src/components/Provider/connection.tsx index f20059c36..10f6c3596 100644 --- a/packages/keychain/src/components/Provider/connection.tsx +++ b/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; }; diff --git a/packages/keychain/src/components/Settings/index.tsx b/packages/keychain/src/components/Settings/index.tsx index a3554cc7d..ec21500ce 100644 --- a/packages/keychain/src/components/Settings/index.tsx +++ b/packages/keychain/src/components/Settings/index.tsx @@ -4,6 +4,7 @@ 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, @@ -11,8 +12,8 @@ enum State { DELEGATE, } -export function Settings({ onLogout }: { onLogout: () => void }) { - // const { controller, context, setContext } = useConnection(); +export function Settings() { + const { logout } = useConnection(); const [state, setState] = useState(State.SETTINGS); // const [delegateAccount, setDelegateAccount] = useState(""); @@ -159,7 +160,7 @@ export function Settings({ onLogout }: { onLogout: () => void }) { */}
-
diff --git a/packages/keychain/src/components/connect/Logout.tsx b/packages/keychain/src/components/connect/Logout.tsx index 24b5a25f2..7aee4ff79 100644 --- a/packages/keychain/src/components/connect/Logout.tsx +++ b/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 (
- - +
); diff --git a/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx b/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx index 82aa3e6fb..3139fa4da 100644 --- a/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx +++ b/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={} - onClick={closeModal} + onClick={onClose} /> ); } diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts index 3ebaae3c7..18fa8912a 100644 --- a/packages/keychain/src/hooks/connection.ts +++ b/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({ diff --git a/packages/keychain/src/pages/index.tsx b/packages/keychain/src/pages/index.tsx index 2bf6a8e4f..5b6ebf8fd 100644 --- a/packages/keychain/src/pages/index.tsx +++ b/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 ( - { - 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 ; } 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 ( - { - window.controller?.disconnect(); - setController(undefined); - - ctx.resolve({ - code: ResponseCodes.NOT_CONNECTED, - message: "User logged out", - }); - }} - /> - ); + return ; } case "open-purchase-credits": { posthog?.capture("Call Purchase Credits");