feat: notification component ui

packages/ui/postcss.config.cjs

@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: {
+      config: "tailwind.config.cjs",
+    },
     autoprefixer: {},
   },
 }

packages/ui/src/components/ActivityToast/ActivityToast.tsx

@@ -0,0 +1,152 @@
+import { FC, useEffect, useMemo, useState } from "react"
+import { CloseIcon } from "../../icons/CloseIcon"
+
+type vertical = "top" | "center" | "bottom"
+type horizontal = "left" | "center" | "right"
+
+interface ActivityToastProps {
+  action: string
+  description: string
+  showToast?: boolean
+  closeToast: () => void
+  duration?: 1000 | 2000 | 3000 | 4000 | 5000
+  vertical?: vertical
+  horizontal?: horizontal
+}
+
+const durationMap = {
+  1000: "duration-1000",
+  2000: "duration-2000",
+  3000: "duration-3000",
+  4000: "duration-4000",
+  5000: "duration-5000",
+}
+
+const ActivityToast: FC<ActivityToastProps> = ({
+  action,
+  description,
+  showToast,
+  closeToast,
+  duration = 5000,
+  vertical = "bottom",
+  horizontal = "center",
+}) => {
+  return showToast ? (
+    <ActivityToastComponent
+      action={action}
+      description={description}
+      closeToast={closeToast}
+      duration={duration}
+      vertical={vertical}
+      horizontal={horizontal}
+    />
+  ) : null
+}
+
+const ActivityToastComponent: FC<ActivityToastProps> = ({
+  action,
+  description,
+  closeToast,
+  duration = 5000,
+  vertical = "bottom",
+  horizontal = "center",
+}) => {
+  const [isActive, setIsActive] = useState(true)
+  useEffect(() => {
+    // ensure that the toast is visible, setting the width to full for the progression bar
+    setTimeout(() => setIsActive(false), 10)
+    const timeout = setTimeout(() => closeToast(), duration)
+    return () => {
+      closeToast()
+      clearTimeout(timeout)
+    }
+  }, [])
+
+  const position = useMemo(() => {
+    let v, h
+
+    switch (horizontal) {
+      case "left":
+        h = `left-2`
+        break
+      case "center":
+        h = `left-2/4 transform -translate-x-2/4`
+        break
+      case "right":
+        h = `right-2`
+        break
+      default:
+        h = `left-2/4`
+        break
+    }
+
+    switch (vertical) {
+      case "top":
+        v = `top-2`
+        break
+      case "center":
+        v = `top-2/4 transform -translate-y-2/4`
+        break
+      case "bottom":
+        v = `bottom-2`
+        break
+      default:
+        v = `top-2/4`
+        break
+    }
+
+    return `${v} ${h}`
+  }, [vertical, horizontal])
+
+  return (
+    <div className={`fixed ${position}`}>
+      <div className="relative p-5 bg-white rounded-lg overflow-hidden shadow-lg border border-solid border-neutrals.200 w-96">
+        <div className="flex flex-1">
+          <div className="flex flex-col justify-center mr-4">
+            {/* TODO: remove hardcode - decide how to manage icons in notifications */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.9016 10.564C17.3511 10.1351 17.3679 9.423 16.939 8.97345C16.5101 8.52389 15.798 8.50713 15.3484 8.93601L10.6225 13.4445L8.65225 11.5617C8.20306 11.1324 7.49093 11.1486 7.06167 11.5978C6.63241 12.0469 6.64856 12.7591 7.09775 13.1883L9.84463 15.8133C10.2792 16.2286 10.9635 16.2289 11.3984 15.814L16.9016 10.564Z"
+                fill="#08A681"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 1.875C6.40812 1.875 1.875 6.40812 1.875 12C1.875 17.5919 6.40812 22.125 12 22.125C17.5919 22.125 22.125 17.5919 22.125 12C22.125 6.40812 17.5919 1.875 12 1.875ZM4.125 12C4.125 7.65076 7.65076 4.125 12 4.125C16.3492 4.125 19.875 7.65076 19.875 12C19.875 16.3492 16.3492 19.875 12 19.875C7.65076 19.875 4.125 16.3492 4.125 12Z"
+                fill="#08A681"
+              />
+            </svg>
+          </div>
+          <div className="flex flex-col items-start">
+            <h5 className="font-barlow text-xl leading-6 font-semibold">
+              {action}
+            </h5>
+            <p className="font-barlow text-base text-start leading-5 font-medium text-neutral-600 mt-0.5 mb-1">
+              {description}
+            </p>
+          </div>
+
+          <div className="flex flex-1" />
+
+          <div className="flex flex-col justify-center items-end relative w-6">
+            <CloseIcon cursor="pointer" onClick={closeToast} />
+          </div>
+        </div>
+        <div
+          className={`absolute bottom-0 left-0 right-0 h-1 transition-all ${
+            durationMap[duration]
+          } ease-linear ${isActive ? "w-full" : "w-0"}`}
+          style={{ backgroundColor: "#197AA6" }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { ActivityToast }

packages/ui/src/components/Notifications/NotificationButton.tsx

@@ -0,0 +1,72 @@
+import { FC, useEffect, useRef, useState } from "react"
+import { BellIcon } from "../../icons/BellIcon"
+import { NotificationMenu } from "./NotificationMenu"
+
+interface Notification {
+  action: string
+  description: string
+  isUnread?: boolean
+  time: string
+}
+
+interface NotificationButtonProps {
+  address?: string
+  hasNotifications?: boolean
+  notifications: Notification[]
+}
+
+const NotificationButton: FC<NotificationButtonProps> = ({
+  hasNotifications,
+  notifications,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const toggleMenu = () => {
+    setIsOpen((prev) => !prev)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <div className="relative inline-block" ref={ref}>
+      <button
+        onClick={toggleMenu}
+        className="flex items-center justify-center shadow-list-item rounded-lg h-10 w-10 bg-white"
+      >
+        <div className="relative">
+          <BellIcon className="w-6 h-6" />
+          {hasNotifications && (
+            <div className="w-[10px] h-[10px] absolute top-0 right-1 rounded-full p-1 z-10 bg-white">
+              <div className="w-2 h-2 bg-[#29C5FF] rounded-full absolute transform -translate-y-2/3"></div>
+            </div>
+          )}
+        </div>
+      </button>
+      <div
+        className={`absolute top-10 mt-0.5 w-50 rounded-lg shadow-lg z-20 text-black bg-white ${
+          !isOpen ? "hidden" : ""
+        }`}
+      >
+        <NotificationMenu
+          notifications={notifications}
+          toggleMenu={toggleMenu}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { NotificationButton }

packages/ui/src/components/Notifications/NotificationItem.tsx

@@ -0,0 +1,70 @@
+import { FC } from "react"
+
+interface NotificationItemProps {
+  action: string
+  description: string
+  isUnread?: boolean
+  time: string
+}
+
+const NotificationItem: FC<NotificationItemProps> = ({
+  action,
+  description,
+  isUnread,
+  time,
+}) => {
+  return (
+    <button
+      onClick={() => console.log("TODO")}
+      className="flex items-center px-6 py-5 border border-solid border-neutrals.200 rounded-lg w-full hover:bg-[#F0F0F0]"
+    >
+      <div className="flex flex-1">
+        <div className="flex flex-col justify-center mr-4">
+          {/* TODO: remove hardcode - decide how to manage icons in notifications */}
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16.9016 10.564C17.3511 10.1351 17.3679 9.423 16.939 8.97345C16.5101 8.52389 15.798 8.50713 15.3484 8.93601L10.6225 13.4445L8.65225 11.5617C8.20306 11.1324 7.49093 11.1486 7.06167 11.5978C6.63241 12.0469 6.64856 12.7591 7.09775 13.1883L9.84463 15.8133C10.2792 16.2286 10.9635 16.2289 11.3984 15.814L16.9016 10.564Z"
+              fill="#08A681"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M12 1.875C6.40812 1.875 1.875 6.40812 1.875 12C1.875 17.5919 6.40812 22.125 12 22.125C17.5919 22.125 22.125 17.5919 22.125 12C22.125 6.40812 17.5919 1.875 12 1.875ZM4.125 12C4.125 7.65076 7.65076 4.125 12 4.125C16.3492 4.125 19.875 7.65076 19.875 12C19.875 16.3492 16.3492 19.875 12 19.875C7.65076 19.875 4.125 16.3492 4.125 12Z"
+              fill="#08A681"
+            />
+          </svg>
+        </div>
+        <div className="flex flex-col items-start">
+          <h5 className="font-barlow text-xl leading-6 font-semibold">
+            {action}
+          </h5>
+          <p className="font-barlow text-base text-start leading-5 font-medium text-neutral-600 mt-0.5 mb-1">
+            {description}
+          </p>
+          <p className="font-barlow text-xs leading-4 font-normal text-neutral-400">
+            {time}
+          </p>
+        </div>
+
+        <div className="flex flex-1" />
+
+        <div className="flex flex-col justify-center items-end relative w-6">
+          {isUnread && (
+            <div
+              className="rounded-full w-2.5 h-2.5 mt-2"
+              style={{ backgroundColor: "#29C5FF" }}
+            />
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export { NotificationItem }