@luxexchange/notifications 1.0.0

package/src/notification-renderer/implementations/createNotificationRenderer.ts

@@ -0,0 +1,16 @@
+import { type InAppNotification } from '@luxfi/api'
+import { type NotificationRenderer } from '@luxfi/notifications/src/notification-renderer/NotificationRenderer'
+
+export function createNotificationRenderer(ctx: {
+  render: (notification: InAppNotification) => () => void
+  canRender: (notification: InAppNotification) => boolean
+}): NotificationRenderer {
+  return {
+    render: (notification: InAppNotification): (() => void) => {
+      return ctx.render(notification)
+    },
+    canRender: (notification: InAppNotification): boolean => {
+      return ctx.canRender(notification)
+    },
+  }
+}

package/src/notification-renderer/utils/iconUtils.ts

@@ -0,0 +1,103 @@
+import type { GeneratedIcon } from '@luxfi/ui/src/components/factories/createIcon'
+import { AlertTriangle } from '@luxfi/ui/src/components/icons/AlertTriangle'
+import { Bell } from '@luxfi/ui/src/components/icons/Bell'
+import { Chart } from '@luxfi/ui/src/components/icons/Chart'
+import { CheckCircleFilled } from '@luxfi/ui/src/components/icons/CheckCircleFilled'
+import { Coin } from '@luxfi/ui/src/components/icons/Coin'
+import { CoinConvert } from '@luxfi/ui/src/components/icons/CoinConvert'
+import { EthMini } from '@luxfi/ui/src/components/icons/EthMini'
+import { Gas } from '@luxfi/ui/src/components/icons/Gas'
+import { Gift } from '@luxfi/ui/src/components/icons/Gift'
+import { Globe } from '@luxfi/ui/src/components/icons/Globe'
+import { InfoCircleFilled } from '@luxfi/ui/src/components/icons/InfoCircleFilled'
+import { Lightning } from '@luxfi/ui/src/components/icons/Lightning'
+import { Rocket } from '@luxfi/ui/src/components/icons/Rocket'
+import { SendAction } from '@luxfi/ui/src/components/icons/SendAction'
+import { ShieldCheck } from '@luxfi/ui/src/components/icons/ShieldCheck'
+import { Star } from '@luxfi/ui/src/components/icons/Star'
+import { Wallet } from '@luxfi/ui/src/components/icons/Wallet'
+
+/**
+ * Map of custom icon names to their corresponding icon components.
+ * Used for parsing notification icon links in the format "custom:<iconName>" or "custom:<iconName>-$<colorToken>".
+ */
+export const CUSTOM_ICON_MAP: Record<string, GeneratedIcon> = {
+  lightning: Lightning,
+  wallet: Wallet,
+  chart: Chart,
+  gas: Gas,
+  coin: Coin,
+  'coin-convert': CoinConvert,
+  ethereum: EthMini,
+  rocket: Rocket,
+  star: Star,
+  gift: Gift,
+  check: CheckCircleFilled,
+  info: InfoCircleFilled,
+  shield: ShieldCheck,
+  bell: Bell,
+  send: SendAction,
+  globe: Globe,
+  // Alert/warning icons
+  'alert-triangle': AlertTriangle,
+  'caution-triangle': AlertTriangle,
+}
+
+export interface ParsedCustomIcon {
+  iconName: string
+  colorToken: string | undefined
+  IconComponent: GeneratedIcon | undefined
+}
+
+/**
+ * Parses a custom icon link string and returns the icon component and color token.
+ *
+ * Supports two formats:
+ * - "custom:<iconName>" - Returns icon with no color token (use default)
+ * - "custom:<iconName>-$<colorToken>" - Returns icon with specified color token
+ *
+ * @example
+ * parseCustomIconLink("custom:globe") // { iconName: "globe", colorToken: undefined, IconComponent: Globe }
+ * parseCustomIconLink("custom:lightning-$accent1") // { iconName: "lightning", colorToken: "$accent1", IconComponent: Lightning }
+ * parseCustomIconLink("https://example.com/icon.png") // { iconName: "", colorToken: undefined, IconComponent: undefined }
+ */
+export function parseCustomIconLink(iconLink: string | undefined): ParsedCustomIcon {
+  if (!iconLink || typeof iconLink !== 'string' || !iconLink.startsWith('custom:')) {
+    return { iconName: '', colorToken: undefined, IconComponent: undefined }
+  }
+
+  // Remove "custom:" prefix
+  const customPart = iconLink.slice(7)
+
+  // Check for color token format: "iconName-$colorToken"
+  const colorTokenMatch = customPart.match(/^(.+)-(\$\w+)$/)
+  if (colorTokenMatch && colorTokenMatch[1] && colorTokenMatch[2]) {
+    const iconName = colorTokenMatch[1]
+    const colorToken = colorTokenMatch[2]
+    return {
+      iconName,
+      colorToken,
+      IconComponent: CUSTOM_ICON_MAP[iconName],
+    }
+  }
+
+  // Simple format: just "iconName"
+  const iconName = customPart.toLowerCase()
+  return {
+    iconName,
+    colorToken: undefined,
+    IconComponent: CUSTOM_ICON_MAP[iconName],
+  }
+}
+
+/**
+ * Gets the icon component for a custom icon link, returning undefined if not found.
+ *
+ * @example
+ * getCustomIconComponent("custom:globe") // Globe
+ * getCustomIconComponent("custom:lightning-$accent1") // Lightning
+ * getCustomIconComponent("https://example.com/icon.png") // undefined
+ */
+export function getCustomIconComponent(iconLink: string | undefined): GeneratedIcon | undefined {
+  return parseCustomIconLink(iconLink).IconComponent
+}

package/src/notification-service/NotificationService.ts

@@ -0,0 +1,47 @@
+import { type NotificationDataSource } from '@luxfi/notifications/src/notification-data-source/NotificationDataSource'
+import { type NotificationProcessor } from '@luxfi/notifications/src/notification-processor/NotificationProcessor'
+import { type NotificationRenderer } from '@luxfi/notifications/src/notification-renderer/NotificationRenderer'
+import { type NotificationTelemetry } from '@luxfi/notifications/src/notification-telemetry/NotificationTelemetry'
+import { type NotificationTracker } from '@luxfi/notifications/src/notification-tracker/NotificationTracker'
+
+/**
+ * Represents what was clicked on a notification
+ */
+export type NotificationClickTarget = { type: 'button'; index: number } | { type: 'background' } | { type: 'dismiss' }
+
+export interface NotificationServiceConfig {
+  // Multiple sources can feed notifications
+  dataSources: NotificationDataSource[]
+  tracker: NotificationTracker
+  processor: NotificationProcessor
+  renderer: NotificationRenderer
+  telemetry?: NotificationTelemetry
+  // Platform-specific handler for navigation/link clicks
+  // Should handle both internal navigation (same-origin) and external links
+  onNavigate?: (url: string) => void
+}
+
+export interface NotificationService {
+  // Initialize and start fetching notifications
+  initialize(): Promise<void>
+  /**
+   * Handle a render failure (e.g., unknown notification style)
+   * Cleans up the render without marking the notification as processed,
+   * allowing it to be re-rendered when correct data arrives
+   */
+  onRenderFailed(notificationId: string): void
+  /**
+   * Handle a click on a notification (button, background, dismiss, or acknowledge)
+   * Executes all actions specified in the onClick array for the clicked target
+   * @param notificationId - ID of the notification that was clicked
+   * @param target - What was clicked (button, background, dismiss, or acknowledge)
+   */
+  onNotificationClick(notificationId: string, target: NotificationClickTarget): void
+  /**
+   * Handle a notification being shown to the user
+   * @param notificationId - ID of the notification that was shown
+   */
+  onNotificationShown(notificationId: string): void
+  // Cleanup and teardown
+  destroy(): void
+}