Initial commit with 🏗️ create-eth @ 2.0.4

2026-01-11 17:24:19 +07:00
commit 64378512ba
128 changed files with 27844 additions and 0 deletions
--- a/packages/nextjs/utils/scaffold-eth/notification.tsx
+++ b/packages/nextjs/utils/scaffold-eth/notification.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { Toast, ToastPosition, toast } from "react-hot-toast";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from "@heroicons/react/24/solid";
+
+type NotificationProps = {
+  content: React.ReactNode;
+  status: "success" | "info" | "loading" | "error" | "warning";
+  duration?: number;
+  icon?: string;
+  position?: ToastPosition;
+};
+
+type NotificationOptions = {
+  duration?: number;
+  icon?: string;
+  position?: ToastPosition;
+};
+
+const ENUM_STATUSES = {
+  success: <CheckCircleIcon className="w-7 text-success" />,
+  loading: <span className="w-6 loading loading-spinner"></span>,
+  error: <ExclamationCircleIcon className="w-7 text-error" />,
+  info: <InformationCircleIcon className="w-7 text-info" />,
+  warning: <ExclamationTriangleIcon className="w-7 text-warning" />,
+};
+
+const DEFAULT_DURATION = 3000;
+const DEFAULT_POSITION: ToastPosition = "top-center";
+
+/**
+ * Custom Notification
+ */
+const Notification = ({
+  content,
+  status,
+  duration = DEFAULT_DURATION,
+  icon,
+  position = DEFAULT_POSITION,
+}: NotificationProps) => {
+  return toast.custom(
+    (t: Toast) => (
+      <div
+        className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        ${
+          position.substring(0, 3) == "top"
+            ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`
+            : `hover:-translate-y-1 ${t.visible ? "bottom-0" : "-bottom-96"}`
+        }`}
+      >
+        <div className="leading-[0] self-center">{icon ? icon : ENUM_STATUSES[status]}</div>
+        <div className={`overflow-x-hidden break-words whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
+
+        <div className={`cursor-pointer text-lg ${icon ? "mt-1" : ""}`} onClick={() => toast.dismiss(t.id)}>
+          <XMarkIcon className="w-6 cursor-pointer" onClick={() => toast.remove(t.id)} />
+        </div>
+      </div>
+    ),
+    {
+      duration: status === "loading" ? Infinity : duration,
+      position,
+    },
+  );
+};
+
+export const notification = {
+  success: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "success", ...options });
+  },
+  info: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "info", ...options });
+  },
+  warning: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "warning", ...options });
+  },
+  error: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "error", ...options });
+  },
+  loading: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "loading", ...options });
+  },
+  remove: (toastId: string) => {
+    toast.remove(toastId);
+  },
+};