Add settings button on header

packages/controller/src/controller.ts

@@ -80,6 +80,7 @@ export default class ControllerProvider extends BaseProvider {
           this.profile = profile;
         },
         methods: {
+          openSettings: this.openSettings.bind(this),
           openPurchaseCredits: this.openPurchaseCredits.bind(this),
           openExecute: normalize(() => this.openExecute.bind(this)),
         },
@@ -172,6 +173,7 @@ export default class ControllerProvider extends BaseProvider {
       console.error(new NotReadyToConnect().message);
       return null;
     }
+    this.iframes.profile?.close();
     this.iframes.keychain.open();
     const res = await this.keychain.openSettings();
     this.iframes.keychain.close();

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

@@ -1,21 +1,9 @@
-import {
-  Button,
-  VStack,
-  Text,
-  HStack,
-  UnorderedList,
-  ListItem,
-} from "@chakra-ui/react";
-import { Container, Content, Footer } from "components/layout";
-import { GearIcon, TrashIcon } from "@cartridge/ui";
-import { useConnection } from "hooks/connection";
-import { useCallback, useEffect, useState } from "react";
-import { useExternalOwners } from "hooks/external";
-import { formatAddress } from "@cartridge/utils";
+import { Button } from "@chakra-ui/react";
+import { GearIcon } from "@cartridge/ui";
+import { useState } from "react";
+import { Container, Footer } from "components/layout";
 import { Recovery } from "./Recovery";
 import { Delegate } from "./Delegate";
-import { CallData } from "starknet";
-import { ExecuteCtx } from "utils/connection";
 
 enum State {
   SETTINGS,
@@ -24,54 +12,54 @@ enum State {
 }
 
 export function Settings({ onLogout }: { onLogout: () => void }) {
-  const { controller, context, setContext } = useConnection();
+  // const { controller, context, setContext } = useConnection();
   const [state, setState] = useState<State>(State.SETTINGS);
-  const [delegateAccount, setDelegateAccount] = useState("");
+  // const [delegateAccount, setDelegateAccount] = useState("");
 
-  useEffect(() => {
-    const init = async () => {
-      const delegate = await controller.delegateAccount();
-      setDelegateAccount(delegate);
-    };
-    init();
-  }, [controller]);
+  // useEffect(() => {
+  //   const init = async () => {
+  //     const delegate = await controller.delegateAccount();
+  //     setDelegateAccount(delegate);
+  //   };
+  //   init();
+  // }, [controller]);
 
-  const { externalOwners } = useExternalOwners();
+  // const { externalOwners } = useExternalOwners();
 
-  const onRemoveExternalOwner = useCallback(
-    (externalOwnerAddress: string) => {
-      setContext({
-        origin: context.origin,
-        transactions: [
-          {
-            contractAddress: controller.address,
-            entrypoint: "remove_external_owner",
-            calldata: CallData.compile([externalOwnerAddress]),
-          },
-        ],
-        type: "execute",
-        resolve: context.resolve,
-        reject: context.reject,
-      } as ExecuteCtx);
-    },
-    [controller, context, setContext],
-  );
+  // const onRemoveExternalOwner = useCallback(
+  //   (externalOwnerAddress: string) => {
+  //     setContext({
+  //       origin: context.origin,
+  //       transactions: [
+  //         {
+  //           contractAddress: controller.address,
+  //           entrypoint: "remove_external_owner",
+  //           calldata: CallData.compile([externalOwnerAddress]),
+  //         },
+  //       ],
+  //       type: "execute",
+  //       resolve: context.resolve,
+  //       reject: context.reject,
+  //     } as ExecuteCtx);
+  //   },
+  //   [controller, context, setContext],
+  // );
 
-  const onRemoveDelegate = useCallback(() => {
-    setContext({
-      origin: context.origin,
-      transactions: [
-        {
-          contractAddress: controller.address,
-          entrypoint: "set_delegate_account",
-          calldata: CallData.compile(["0x0"]),
-        },
-      ],
-      type: "execute",
-      resolve: context.resolve,
-      reject: context.reject,
-    } as ExecuteCtx);
-  }, [controller, context, setContext]);
+  // const onRemoveDelegate = useCallback(() => {
+  //   setContext({
+  //     origin: context.origin,
+  //     transactions: [
+  //       {
+  //         contractAddress: controller.address,
+  //         entrypoint: "set_delegate_account",
+  //         calldata: CallData.compile(["0x0"]),
+  //       },
+  //     ],
+  //     type: "execute",
+  //     resolve: context.resolve,
+  //     reject: context.reject,
+  //   } as ExecuteCtx);
+  // }, [controller, context, setContext]);
 
   if (state === State.RECOVERY) {
     return <Recovery onBack={() => setState(State.SETTINGS)} />;
@@ -83,9 +71,9 @@ export function Settings({ onLogout }: { onLogout: () => void }) {
 
   return (
     <Container variant="compressed" title="Controller Settings" Icon={GearIcon}>
-      <Content>
+      {/* <Content>
         <VStack gap="30px" w="full">
-          {/* <VStack>
+          <VStack>
             {controller.cartridge.hasSession(
               controller.cartridge.session(),
             ) ? (
@@ -101,7 +89,7 @@ export function Settings({ onLogout }: { onLogout: () => void }) {
             >
               Clear Session
             </Button> 
-          </VStack> */}
+          </VStack>
 
           <VStack w="full" alignItems="flex-start">
             <Text fontWeight="bold" color="text.secondary">
@@ -169,7 +157,7 @@ export function Settings({ onLogout }: { onLogout: () => void }) {
             )}
           </VStack>
         </VStack>
-      </Content>
+      </Content> */}
       <Footer>
         <Button w="full" onClick={onLogout}>
           Log out

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

@@ -4,15 +4,20 @@ import { NetworkStatus } from "./NetworkStatus";
 import { SettingsButton } from "./SettingsButton";
 import { BackButton } from "./BackButton";
 import { useConnection } from "hooks/connection";
+import { useMemo } from "react";
 
 export type TopBarProps = {
   onBack?: () => void;
   hideAccount?: boolean;
-  showSettings?: boolean;
 };
 
-export function TopBar({ onBack, hideAccount, showSettings }: TopBarProps) {
-  const { openSettings } = useConnection();
+export function TopBar({ onBack, hideAccount }: TopBarProps) {
+  const { openSettings, context } = useConnection();
+  const showSettings = useMemo(
+    () => !context || !["connect", "open-settings"].includes(context.type),
+    [context],
+  );
+
   return (
     <HStack
       w="full"

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

@@ -4,20 +4,11 @@ import { TopBar, TopBarProps } from "./TopBar";
 
 export type HeaderProps = TopBarProps & BannerProps;
 
-export function Header({
-  onBack,
-  hideAccount,
-  showSettings,
-  ...bannerProps
-}: HeaderProps) {
+export function Header({ onBack, hideAccount, ...bannerProps }: HeaderProps) {
   return (
     <Box position="sticky" top={0} w="full" zIndex={1} bg="solid.bg">
       <Banner {...bannerProps} />
-      <TopBar
-        onBack={onBack}
-        hideAccount={hideAccount}
-        showSettings={showSettings}
-      />
+      <TopBar onBack={onBack} hideAccount={hideAccount} />
     </Box>
   );
 }

packages/keychain/src/components/layout/Container/index.tsx

@@ -14,7 +14,6 @@ export function Container({
   children,
   onBack,
   hideAccount,
-  showSettings,
   Icon,
   icon,
   title,
@@ -30,7 +29,6 @@ export function Container({
       <Header
         onBack={onBack}
         hideAccount={hideAccount}
-        showSettings={showSettings}
         Icon={Icon}
         icon={icon}
         title={title}

packages/keychain/src/hooks/connection.ts

@@ -166,7 +166,7 @@ export function useConnectionValue() {
 
   const openSettings = useCallback(() => {
     setContext({
-      origin,
+      origin: context.origin || origin,
       type: "open-settings",
       resolve: context.resolve,
       reject: context.reject,

packages/keychain/src/pages/index.tsx

@@ -34,7 +34,7 @@ function Home() {
         },
       });
     }
-  }, [context?.origin]);
+  }, [context?.origin, posthog]);
 
   if (window.self === window.top || !context?.origin) {
     return <></>;

packages/profile/src/components/context/connection.tsx

@@ -27,13 +27,15 @@ type ConnectionContextType = {
 
 type ParentMethods = {
   close: () => void;
+  openSettings: () => void;
   openPurchaseCredits: () => void;
   openExecute: (calls: Call[]) => void;
 };
 
 const initialState: ConnectionContextType = {
   parent: {
     close: () => {},
+    openSettings: () => {},
     openPurchaseCredits: () => {},
     openExecute: () => {},
   },

packages/profile/src/components/layout/index.tsx

@@ -1,4 +1,4 @@
-import { Button, cn, TimesIcon, Network } from "@cartridge/ui-next";
+import { Button, cn, TimesIcon, Network, DotsIcon } from "@cartridge/ui-next";
 import { PropsWithChildren, useCallback } from "react";
 import { useConnection } from "@/hooks/context";
 import { isIframe } from "@cartridge/utils";
@@ -28,9 +28,13 @@ export function LayoutContainer({
 
         <div className="flex gap-2">
           <Network chainId={chainId} />
-          {/* <Button variant="icon" size="icon">
+          <Button
+            variant="icon"
+            size="icon"
+            onClick={() => parent.openSettings()}
+          >
             <DotsIcon />
-          </Button> */}
+          </Button>
         </div>
       </div>