Marketplace toasts (#274)

* chore: update @cartridge/ui, controller dependencies

* feat: added <ControllerToaster>

* chore: unlist calls contract directly

* feat: auto close controller (placeholder)

Author: rsodre

client/package.json

@@ -31,6 +31,7 @@
     "@cartridge/penpal": "^6.2.3",
     "@cartridge/presets": "catalog:",
     "@cartridge/ui": "catalog:",
+    "@dojoengine/core": "catalog:",
     "@dojoengine/grpc": "catalog:",
     "@dojoengine/react": "catalog:",
     "@dojoengine/sdk": "catalog:",
@@ -74,7 +75,7 @@
     "react-player": "^2.16.0",
     "react-router-dom": "^6.27.0",
     "react-youtube": "^10.1.0",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.7",
     "starknet": "catalog:",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
@@ -121,4 +122,4 @@
     "@storybook/addon-docs": "^10.2.8"
   },
   "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
-}
+}

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/features/marketplace/items/useMarketplaceItemsViewModel.ts

@@ -308,7 +308,7 @@ export function useMarketplaceItemsViewModel({
 
   const handlePurchaseCallback = useHandlePurchaseCallback(handlerParams);
   const handleListCallback = useHandleListCallback(handlerParams);
-  const handleUnlistCallback = useHandleUnlistCallback(handlerParams);
+  const handleUnlistCallback = useHandleUnlistCallback();
   const handleSendCallback = useHandleSendCallback(handlerParams);
 
   const handlePurchase = useCallback(
@@ -335,6 +335,7 @@ export function useMarketplaceItemsViewModel({
       handleUnlistCallback(
         collectionAddress,
         tokens.map((token) => token.token_id ?? "").filter(Boolean),
+        tokens.map((token) => token.orders[0].order),
       ),
     [collectionAddress, handleUnlistCallback],
   );

client/src/features/marketplace/token-detail/useTokenDetailViewModel.ts

@@ -18,6 +18,7 @@ import {
   useHandleListCallback,
   useHandleSendCallback,
   useHandleUnlistCallback,
+  useHandleUnlistViewCallback,
 } from "@/hooks/marketplace-actions-handlers";
 import { useProject } from "@/hooks/project";
 
@@ -196,7 +197,8 @@ export function useTokenDetailViewModel({
 
   const handlePurchaseCallback = useHandlePurchaseCallback(handlerParams);
   const handleListCallback = useHandleListCallback(handlerParams);
-  const handleUnlistCallback = useHandleUnlistCallback(handlerParams);
+  const handleUnlistCallback = useHandleUnlistCallback();
+  const handleUnlistViewCallback = useHandleUnlistViewCallback(handlerParams);
   const handleSendCallback = useHandleSendCallback(handlerParams);
 
   const handlePurchase = useCallback(async () => {
@@ -210,7 +212,11 @@ export function useTokenDetailViewModel({
   }, [handleListCallback, collectionAddress, tokenId]);
 
   const handleUnlist = useCallback(async () => {
-    handleUnlistCallback(collectionAddress, [tokenId]);
+    if (lowestOrder) {
+      handleUnlistCallback(collectionAddress, [tokenId], [lowestOrder]);
+    } else {
+      handleUnlistViewCallback(collectionAddress, [tokenId]);
+    }
   }, [handleUnlistCallback, collectionAddress, tokenId]);
 
   const handleSend = useCallback(async () => {

client/src/hooks/controller.ts

@@ -0,0 +1,46 @@
+"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) {
+        const controller = (connector as ControllerConnector)?.controller;
+        controller?.close();
+      }
+    };
+
+    window.addEventListener("message", eventHandler);
+    return () => {
+      window.removeEventListener("message", eventHandler);
+    };
+  }, [connector]);
+}

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

@@ -1,14 +1,16 @@
 import { useCallback } from "react";
 import { useAccount, useConnect } from "@starknet-react/core";
+import { getContractByName } from "@dojoengine/core";
 import { DEFAULT_PRESET, DEFAULT_PROJECT } from "@/constants";
-import { addAddressPadding } from "starknet";
+import { addAddressPadding, type Call, CallData } from "starknet";
 import { useAnalytics } from "@/hooks/useAnalytics";
 import type ControllerConnector from "@cartridge/connector/controller";
 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 = {
   project?: string;
@@ -21,8 +23,6 @@ export function useHandlePurchaseCallback(
   collectionAddress: string,
   tokenIds: string[],
   orders: OrderModel[],
-  preset?: string,
-  project?: string,
 ) => Promise<void> {
   const { address } = useAccount();
   const { trackEvent, events } = useAnalytics();
@@ -138,22 +138,47 @@ export function useHandleListViewCallback(
   );
 }
 
-export function useHandleUnlistCallback(
-  presetParams?: ActionHandlerParams,
-): (collectionAddress: string, tokenIds: string[]) => Promise<void> {
-  const pathBuilder = useControllerPathBuilder(presetParams);
-  const openController = useOpenControllerAtPathCallback();
+export function useHandleUnlistCallback(): (
+  collectionAddress: string,
+  tokenIds: string[],
+  orders: OrderModel[],
+) => Promise<void> {
+  const { provider } = useArcade();
+  const openController = useOpenControllerExecuteCallback();
   return useCallback(
-    async (collectionAddress: string, tokenIds: string[]) => {
-      const path = pathBuilder({
-        // viewType: "unlist", // TODO: /unlist is not implemented in the controller
-        viewType: "unlistView",
-        collectionAddress,
-        tokenIds,
-      });
-      return openController(path);
+    async (
+      collectionAddress: string,
+      tokenIds: string[],
+      orders: OrderModel[],
+    ) => {
+      // TODO: /unlist is not implemented in the controller
+      // const path = pathBuilder({
+      //   viewType: "unlist",
+      //   collectionAddress,
+      //   tokenIds,
+      // });
+
+      // call the execute endpoint directly
+      const contract = getContractByName(
+        provider.manifest,
+        "ARCADE",
+        "Marketplace",
+      );
+      const contractAddress = contract?.address ?? "0x0";
+      const callData = new CallData(provider.manifest.abis);
+      const calls: Call[] = orders.map((order, index) => ({
+        entrypoint: "cancel",
+        contractAddress,
+        calldata: callData.compile("cancel", [
+          order.id,
+          collectionAddress,
+          `0x${tokenIds[index]}`,
+        ]),
+      }));
+
+      return openController(calls);
     },
-    [pathBuilder, openController],
+    [openController],
   );
 }
 
@@ -233,7 +258,7 @@ function useControllerPathBuilder(
 ): (params: MakeControllerViewPathParams) => string | undefined {
   const { trackEvent, events } = useAnalytics();
 
-  const username = useUsername();
+  const username = useControllerUsername();
 
   const collections = useTokenContracts();
 
@@ -348,3 +373,35 @@ export function useOpenControllerAtPathCallback(): (
 
   return callback;
 }
+
+export function useOpenControllerExecuteCallback(): (
+  calls: Call[],
+) => Promise<void> {
+  const { connector } = useConnect();
+  const { isConnected } = useAccount();
+  const { onConnect, isConnectDisabled } = useConnectionViewModel();
+
+  const callback = useCallback(
+    async (calls: Call[]) => {
+      if (!calls || calls.length === 0) return;
+
+      if (!isConnected) {
+        if (isConnectDisabled) {
+          return;
+        }
+        await onConnect();
+      }
+
+      const controller = (connector as ControllerConnector)?.controller;
+      if (!controller) {
+        console.error("Connector not initialized");
+        return;
+      }
+
+      controller.openExecute(calls);
+    },
+    [connector, isConnected, isConnectDisabled],
+  );
+
+  return callback;
+}

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;
-}

client/src/routes/__root.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from "react";
 import { Outlet, createRootRoute, useMatches } from "@tanstack/react-router";
 import { Template } from "@/components/template";
-import { SonnerToaster } from "@cartridge/ui";
+import { ControllerToaster } from "@cartridge/ui";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { useNavigationContext } from "@/features/navigation";
 import { useArcade } from "@/hooks/arcade";
@@ -35,9 +35,9 @@ function RootComponent() {
           <Outlet />
         </Template>
       )}
-      <SonnerToaster position="top-center" />
+      <ControllerToaster position="bottom-right" />
       {import.meta.env.DEV ? (
-        <TanStackRouterDevtools position="bottom-right" />
+        <TanStackRouterDevtools position="bottom-left" />
       ) : null}
     </>
   );