@l.x/notifications 1.0.3 → 1.0.5

package/src/notification-renderer/components/InlineBannerNotification.tsx

@@ -0,0 +1,123 @@
+import { BackgroundType } from '@luxamm/client-notification-service/dist/lx/notificationservice/v1/api_pb'
+import type { InAppNotification } from '@l.x/api'
+import {
+  BannerTemplate,
+  type BannerTemplateButton,
+} from '@l.x/notifications/src/notification-renderer/components/BannerTemplate'
+import { parseCustomIconLink } from '@l.x/notifications/src/notification-renderer/utils/iconUtils'
+import { type NotificationClickTarget } from '@l.x/notifications/src/notification-service/NotificationService'
+import { memo, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const BANNER_ICON_SIZE = 40
+
+interface InlineBannerNotificationProps {
+  notification: InAppNotification
+  onNotificationClick?: (notificationId: string, target: NotificationClickTarget) => void
+  /** Override the default banner width. Use '100%' for full-width. */
+  width?: number | string
+  /** Enable button rendering. Defaults to false (web only). */
+  renderButton?: boolean
+}
+
+/**
+ * InlineBannerNotification component
+ *
+ * A wrapper around BannerTemplate for rendering notification API-driven banners.
+ * Can be used inline (extension/mobile) or in fixed position (web).
+ * Delegates click handling to the NotificationService.
+ *
+ * Features:
+ * - Maps notification API types to BannerTemplate props
+ * - Delegates click actions to NotificationService via onNotificationClick
+ * - Extracts background images and icons from notification content
+ *
+ * Notification API Type Mapping:
+ * - content.title → Banner title
+ * - content.subtitle → Banner description
+ * - content.background.link → Background image URL (when backgroundType is IMAGE)
+ * - content.background.backgroundOnClick → Handled by NotificationService
+ */
+export const InlineBannerNotification = memo(function InlineBannerNotification({
+  notification,
+  onNotificationClick,
+  width,
+  renderButton = false,
+}: InlineBannerNotificationProps) {
+  const { t, i18n } = useTranslation()
+  const content = notification.content
+
+  const handleClose = (): void => {
+    onNotificationClick?.(notification.id, { type: 'dismiss' })
+  }
+
+  const hasBackgroundClick = !!content?.background?.backgroundOnClick
+
+  const handleBannerPress = (): void => {
+    onNotificationClick?.(notification.id, { type: 'background' })
+  }
+
+  const backgroundImageUrl = useMemo(() => {
+    const background = content?.background
+    if (background && background.backgroundType === BackgroundType.IMAGE && background.link) {
+      return background.link
+    }
+    return undefined
+  }, [content?.background])
+
+  const darkModeBackgroundImageUrl = useMemo(() => {
+    const background = content?.background
+    if (background && background.backgroundType === BackgroundType.IMAGE && background.darkModeLink) {
+      return background.darkModeLink
+    }
+    return undefined
+  }, [content?.background])
+
+  const customIcon = useMemo(() => {
+    const parsed = parseCustomIconLink(content?.iconLink)
+    if (!parsed.IconComponent) {
+      return undefined
+    }
+    const Icon = parsed.IconComponent
+    return <Icon size={BANNER_ICON_SIZE} color={parsed.colorToken ?? '$neutral1'} />
+  }, [content?.iconLink])
+
+  const button = useMemo((): BannerTemplateButton | undefined => {
+    if (!renderButton) {
+      return undefined
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const firstButton = content?.buttons?.[0]
+    if (!firstButton) {
+      return undefined
+    }
+
+    // Translate known i18n keys, otherwise use raw text
+    const buttonText = i18n.exists(firstButton.text) ? t(firstButton.text) : firstButton.text
+
+    return {
+      text: buttonText,
+      isPrimary: firstButton.isPrimary ?? false,
+      onPress: (): void => {
+        onNotificationClick?.(notification.id, { type: 'button', index: 0 })
+      },
+    }
+  }, [renderButton, content?.buttons, notification.id, onNotificationClick, t, i18n])
+
+  return (
+    <BannerTemplate
+      backgroundImageUrl={backgroundImageUrl}
+      darkModeBackgroundImageUrl={darkModeBackgroundImageUrl}
+      icon={customIcon}
+      iconUrl={customIcon ? undefined : content?.iconLink}
+      darkModeIconUrl={customIcon ? undefined : content?.darkModeIconLink}
+      title={content?.title ?? ''}
+      subtitle={content?.subtitle ?? ''}
+      width={width}
+      button={button}
+      onClose={handleClose}
+      onPress={hasBackgroundClick ? handleBannerPress : undefined}
+    />
+  )
+})

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

@@ -0,0 +1,16 @@
+import { type InAppNotification } from '@l.x/api'
+import { type NotificationRenderer } from '@l.x/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 'ui/src/components/factories/createIcon'
+import { AlertTriangle } from 'ui/src/components/icons/AlertTriangle'
+import { Bell } from 'ui/src/components/icons/Bell'
+import { Chart } from 'ui/src/components/icons/Chart'
+import { CheckCircleFilled } from 'ui/src/components/icons/CheckCircleFilled'
+import { Coin } from 'ui/src/components/icons/Coin'
+import { CoinConvert } from 'ui/src/components/icons/CoinConvert'
+import { EthMini } from 'ui/src/components/icons/EthMini'
+import { Gas } from 'ui/src/components/icons/Gas'
+import { Gift } from 'ui/src/components/icons/Gift'
+import { Globe } from 'ui/src/components/icons/Globe'
+import { InfoCircleFilled } from 'ui/src/components/icons/InfoCircleFilled'
+import { Lightning } from 'ui/src/components/icons/Lightning'
+import { Rocket } from 'ui/src/components/icons/Rocket'
+import { SendAction } from 'ui/src/components/icons/SendAction'
+import { ShieldCheck } from 'ui/src/components/icons/ShieldCheck'
+import { Star } from 'ui/src/components/icons/Star'
+import { Wallet } from '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,49 @@
+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
+  // Trigger an immediate re-poll on all data sources that support it
+  refresh(): Promise<void>
+  // Cleanup and teardown
+  destroy(): void
+}