feat: marketplace toast component (#149)

* feat: marketplace toast component

* feat: controller toaster demo

* feat: catch controller toast events

* feat: use preset color in toasts

* fix: fixed confirming transaction toast icon

* chore: ported toasts to sonner

* chore: use single toaster component

* chore: handle toast close button

* chore: optional toaster id

* feat: added txHash to transaction toast

* fix: toaster layout review

* feat: collapse transaction toasts

* feat: catch controller network switch event

* fix: draft achievement layout

* fix: fixed toasts font size

* chore: review suggestions

* fix: fixed build

Author: rsodre

.storybook/preview.tsx

@@ -3,7 +3,6 @@ import { Preview, ReactRenderer } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { themes } from "@storybook/theming";
 import { SonnerToaster } from "../src/components/primitives/sonner";
-import { Toaster } from "../src/components/primitives/toast/toaster";
 
 import "../src/index.css";
 import { useThemeEffect } from "../src/hooks/theme";
@@ -61,8 +60,9 @@ const preview: Preview = {
       return (
         <>
           <Story />
-          <SonnerToaster />
-          <Toaster />
+          {Story().type.name !== "ControllerToasterDemo" &&
+            <SonnerToaster />
+          }
         </>
       )
     },

package.json

@@ -151,7 +151,7 @@
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.7",
     "starknet": "^8.5.4",
     "viem": "^2.21.32"
   },

pnpm-lock.yaml

@@ -47,6 +47,7 @@ export * from "./singular-oval";
 export * from "./singular-shape";
 export * from "./space-invader";
 export * from "./sparkles";
+export * from "./sparkles-draft";
 export * from "./stack-diamond";
 export * from "./stack-oval";
 export * from "./stack-shape";

src/components/icons/state/index.ts

@@ -55,6 +55,7 @@ export * from "./spinner-pixel";
 export * from "./spinner";
 export * from "./times-circle";
 export * from "./times";
+export * from "./transaction";
 export * from "./transfer";
 export * from "./trash";
 export * from "./verified";

src/components/icons/state/sparkles-draft.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, memo } from "react";
+import { iconVariants } from "../utils";
+import { IconProps } from "../types";
+
+export const TransactionIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(
+    ({ className, size, ...props }, forwardedRef) => (
+      <svg
+        viewBox="0 0 11 9"
+        className={iconVariants({ size, className })}
+        ref={forwardedRef}
+        {...props}
+      >
+        <path
+          d="M5.31833 0.000198737C5.565 -0.00646793 5.78333 0.155199 5.84833 0.393532L7.08167 4.91353L7.37667 4.32353C7.55667 3.96187 7.92667 3.73353 8.33 3.73353H10.1333C10.4283 3.73353 10.6667 3.97187 10.6667 4.26687C10.6667 4.56187 10.4283 4.8002 10.1333 4.8002H8.33L7.41 6.63853C7.31167 6.83687 7.1 6.95187 6.88 6.9302C6.66 6.90853 6.47667 6.75353 6.41833 6.5402L5.395 2.78853L4.255 8.11187C4.20333 8.35187 3.99667 8.5252 3.75167 8.53353C3.50667 8.54187 3.28833 8.38187 3.22167 8.14687L2.265 4.8002H0.533333C0.238333 4.8002 0 4.56187 0 4.26687C0 3.97187 0.238333 3.73353 0.533333 3.73353H2.265C2.74167 3.73353 3.16 4.04853 3.29 4.50687L3.66 5.8002L4.81167 0.421865C4.86333 0.181865 5.07333 0.0068654 5.31833 0.000198737Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  ),
+);
+
+TransactionIcon.displayName = "TransactionIcon";

src/components/icons/utility/index.ts

@@ -1,34 +1,40 @@
 "use client";
 
 import { useMemo } from "react";
-import { Toaster as Sonner } from "sonner";
+import { Toaster as SonnerToster } from "sonner";
+import { ControllerPresetProvider } from "@/utils/context/presets";
 
-type SonnerToasterProps = React.ComponentProps<typeof Sonner>;
+type SonnerToasterProps = React.ComponentProps<typeof SonnerToster> & {
+  toasterId?: string;
+};
 
-const SonnerToaster = ({ ...props }: SonnerToasterProps) => {
+const SonnerToaster = ({ toasterId, ...props }: SonnerToasterProps) => {
   const theme = useMemo(
     () => localStorage.getItem("vite-ui-colorScheme") ?? "system",
     [],
   );
 
   return (
-    <Sonner
-      theme={theme as SonnerToasterProps["theme"]}
-      className="toaster group"
-      duration={1000}
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-foreground-400",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-background-200 group-[.toast]:text-foreground-400",
-        },
-      }}
-      {...props}
-    />
+    <ControllerPresetProvider>
+      <SonnerToster
+        theme={theme as SonnerToasterProps["theme"]}
+        className="toaster group"
+        duration={1000}
+        id={toasterId}
+        toastOptions={{
+          classNames: {
+            toast:
+              "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg rounded-lg",
+            description: "group-[.toast]:text-foreground-400",
+            actionButton:
+              "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            cancelButton:
+              "group-[.toast]:bg-background-200 group-[.toast]:text-foreground-400",
+          },
+        }}
+        {...props}
+      />
+    </ControllerPresetProvider>
   );
 };
 

src/components/icons/utility/transaction.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  showErrorToast,
+  showSuccessToast,
+  showTransactionToast,
+  showMarketplaceToast,
+  showAchievementToast,
+  showNetworkSwitchToast,
+} from "@/components/primitives/toast/specialized-toasts";
+import { useToast, ToasterToast } from "./use-toast";
+import {
+  ToastPosition,
+  ErrorToastOptions,
+  SuccessToastOptions,
+  TransactionToastOptions,
+  MarketplaceToastOptions,
+  AchievementToastOptions,
+  CONTROLLER_TOAST_MESSAGE_TYPE,
+  NetworkSwitchToastOptions,
+} from "./types";
+import { SonnerToaster } from "@/components/primitives/sonner";
+
+export type ControllerNotificationTypes =
+  | "error"
+  | "success"
+  | "network-switch"
+  | "transaction"
+  | "marketplace"
+  | "achievement";
+
+export function ControllerToaster({
+  position = "bottom-right",
+  disabledTypes = [],
+  collapseTransactions,
+  toasterId,
+}: {
+  position?: ToastPosition;
+  disabledTypes?: ControllerNotificationTypes[];
+  collapseTransactions?: boolean;
+  toasterId?: string | undefined;
+}) {
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const eventHandler = (event: any) => {
+      const variant =
+        event.data.type === CONTROLLER_TOAST_MESSAGE_TYPE
+          ? event.data.options.variant
+          : undefined;
+      if (!variant) return;
+
+      if (variant == "error" && !disabledTypes.includes("error")) {
+        const options = event.data.options as ErrorToastOptions;
+        toast(
+          showErrorToast({
+            ...options,
+            toasterId,
+          }) as ToasterToast,
+        );
+      } else if (variant == "success" && !disabledTypes.includes("success")) {
+        const options = event.data.options as SuccessToastOptions;
+        toast(
+          showSuccessToast({
+            ...options,
+            toasterId,
+          }) as ToasterToast,
+        );
+      } else if (
+        variant == "network-switch" &&
+        !disabledTypes.includes("network-switch")
+      ) {
+        const options = event.data.options as NetworkSwitchToastOptions;
+        toast(
+          showNetworkSwitchToast({
+            ...options,
+            toasterId,
+          }) as ToasterToast,
+        );
+      } else if (
+        variant == "transaction" &&
+        !disabledTypes.includes("transaction")
+      ) {
+        const options = event.data.options as TransactionToastOptions;
+        toast(
+          showTransactionToast({
+            ...options,
+            isExpanded:
+              collapseTransactions !== undefined ? !collapseTransactions : true,
+            duration: options.status == "confirming" ? 0 : options.duration,
+            toasterId,
+            toastId: options.txHash || undefined,
+          }) as ToasterToast,
+        );
+      } else if (
+        variant == "marketplace" &&
+        !disabledTypes.includes("marketplace")
+      ) {
+        const options = event.data.options as MarketplaceToastOptions;
+        toast(
+          showMarketplaceToast({
+            title: `${options.action[0].toUpperCase()}${options.action.slice(1)}`,
+            ...options,
+            toasterId,
+          }) as ToasterToast,
+        );
+      } else if (
+        variant == "achievement" &&
+        !disabledTypes.includes("achievement")
+      ) {
+        const options = event.data.options as AchievementToastOptions;
+        toast(
+          showAchievementToast({
+            ...options,
+            toasterId,
+          }) as ToasterToast,
+        );
+      }
+    };
+    window.addEventListener("message", eventHandler);
+    return () => {
+      window.removeEventListener("message", eventHandler);
+    };
+  }, [disabledTypes.join(","), collapseTransactions, toasterId]);
+
+  return <SonnerToaster position={position} toasterId={toasterId} />;
+}

src/components/primitives/sonner.tsx

@@ -1,7 +1,4 @@
-// Re-export existing toast primitives
 export * from "./toast";
-export * from "./toaster";
 export * from "./use-toast";
-
-// Export new specialized toast components
+export * from "./controller-toaster";
 export * from "./specialized-toasts";