feat: auto close controller (placeholder)

Author: rsodre

client/src/components/ui/marketplace/token-detail/TokenFooterActions.tsx

@@ -3,6 +3,7 @@ import type { OrderModel } from "@cartridge/arcade";
 import { useAtomValue } from "@effect-atom/atom-react";
 import { orderWithUsdAtom } from "@/effect/atoms/marketplace";
 import { PriceFooter } from "../../modules/price-footer";
+import { useControllerCloseAfterToast } from "@/hooks/controller";
 
 interface TokenFooterActionsProps {
   isOwner: boolean;
@@ -76,6 +77,7 @@ export function TokenFooterActions({
   handleSend,
 }: TokenFooterActionsProps) {
   const orderWithUsd = useAtomValue(orderWithUsdAtom(order));
+  useControllerCloseAfterToast();
 
   if (!isOwner && !isListed) {
     return null;

client/src/hooks/controller.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAccount } from "@starknet-react/core";
+import {
+  CONTROLLER_TOAST_MESSAGE_TYPE,
+  type ToastOptions,
+} from "@cartridge/ui";
+import type ControllerConnector from "@cartridge/connector/controller";
+
+export function useControllerUsername(): string | undefined {
+  const { account, connector } = useAccount();
+  const [username, setUSername] = useState<string>();
+  useEffect(() => {
+    if (account && connector) {
+      (connector as ControllerConnector)
+        .username()
+        ?.then((u) => setUSername(u));
+    }
+  }, [account, connector]);
+  return username;
+}
+
+export function useControllerCloseAfterToast() {
+  const { connector } = useAccount();
+  useEffect(() => {
+    if (!connector) return;
+
+    const eventHandler = (event: any) => {
+      const options =
+        event.data.type === CONTROLLER_TOAST_MESSAGE_TYPE
+          ? (event.data.options as ToastOptions)
+          : undefined;
+
+      if (options?.safeToClose) {
+        // TODO: enable when controller is updated
+        console.log("Can safely close Controller...");
+        // (connector as ControllerConnector).close();
+      }
+    };
+
+    window.addEventListener("message", eventHandler);
+    return () => {
+      window.removeEventListener("message", eventHandler);
+    };
+  }, [connector]);
+}

client/src/hooks/marketplace-actions-handlers.ts

@@ -9,7 +9,7 @@ import { useConnectionViewModel } from "@/features/connection";
 import { useTokenContracts } from "@/effect/hooks/tokens";
 import { CollectionType } from "@/effect/atoms/tokens";
 import type { OrderModel } from "@cartridge/arcade";
-import { useUsername } from "@/hooks/username";
+import { useControllerUsername } from "@/hooks/controller";
 import { useArcade } from "./arcade";
 
 export type ActionHandlerParams = {
@@ -258,7 +258,7 @@ function useControllerPathBuilder(
 ): (params: MakeControllerViewPathParams) => string | undefined {
   const { trackEvent, events } = useAnalytics();
 
-  const username = useUsername();
+  const username = useControllerUsername();
 
   const collections = useTokenContracts();
 

client/src/hooks/username.ts

@@ -1,17 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAccount } from "@starknet-react/core";
-import type ControllerConnector from "@cartridge/connector/controller";
-
-export function useUsername(): string | undefined {
-  const { account, connector } = useAccount();
-  const [username, setUSername] = useState<string>();
-  useEffect(() => {
-    if (account && connector) {
-      (connector as ControllerConnector)
-        .username()
-        ?.then((u) => setUSername(u));
-    }
-  }, [account, connector]);
-
-  return username;
-}