@lukso/transaction-view-headless 0.2.2-dev.a8c9315

package/src/composables/use-image-loader.ts

@@ -0,0 +1,315 @@
+import type { ImageData } from '@lukso/transaction-decoder'
+
+// Force cache invalidation
+console.log(
+  '🔥 LOADING NEW useAddressResolver CODE - should see GraphQL integration'
+)
+
+/**
+ * Image loading configuration for different contexts
+ */
+export interface ImageLoadOptions {
+  width?: number
+  height?: number
+  dpr?: number
+  index?: number
+}
+
+/**
+ * Resolved image result
+ */
+export interface ImageResult {
+  src: string
+  width?: number
+  height?: number
+}
+
+/**
+ * Address/Profile data structure for image resolution
+ * Note: GraphQL pluralizes field names (icons, not icon)
+ */
+export interface AddressImageData {
+  profileImages?: ImageData[]
+  avatar?: ImageData[]
+  icons?: ImageData[] // GraphQL pluralizes to "icons"
+  images?: ImageData[]
+  __gqltype?: string
+}
+
+// Image loading cache for preventing duplicate requests
+const imageLoadCache = new Map<string, Promise<ImageResult | null>>()
+
+/**
+ * Generate cache key for image loading based on image data and options
+ */
+function getImageCacheKey(imageData: any[], options: ImageLoadOptions): string {
+  // Create a stable key based on the image data sources and size requirements
+  const imageUrls = imageData
+    .filter((img) => img?.url || img?.src)
+    .map((img) => img.url || img.src)
+    .sort()
+    .join(',')
+
+  const sizeKey = `${options.width || 32}x${options.height || options.width || 32}@${options.dpr || 1}`
+
+  return `${imageUrls}-${sizeKey}`
+}
+
+/**
+ * Composable for loading images from various sources
+ * Extracted from Vue AddressView component for framework-agnostic use
+ */
+export function useImageLoader() {
+  /**
+   * Load image from GraphQL-resolved image groups using proper size selection
+   */
+  async function loadImage(
+    imageData: any[],
+    options: ImageLoadOptions = {}
+  ): Promise<ImageResult | null> {
+    try {
+      if (!imageData || imageData.length === 0) {
+        return null
+      }
+
+      // Default options
+      const loadOptions = {
+        width: options.width || 32,
+        height: options.height || options.width || 32,
+        dpr:
+          options.dpr ||
+          (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+        ignoreHead: true, // Skip HEAD requests in component context
+      }
+
+      // Check cache first to prevent duplicate requests
+      const cacheKey = getImageCacheKey(imageData, loadOptions)
+      const cachedPromise = imageLoadCache.get(cacheKey)
+      if (cachedPromise) {
+        console.log('📸 loadImage: Using cached promise for', cacheKey)
+        return cachedPromise
+      }
+
+      console.log(
+        '📸 loadImage: Creating new request for',
+        imageData.length,
+        'options:',
+        loadOptions
+      )
+
+      // Create and cache the loading promise
+      const loadingPromise = (async (): Promise<ImageResult | null> => {
+        // Import the proper getImage function from decoder package
+        const { getImage } = await import('@lukso/transaction-decoder')
+
+        const result = await getImage(imageData, loadOptions)
+
+        if (result?.src) {
+          console.log('📸 loadImage: Selected image:', result.src)
+          return {
+            src: result.src,
+            width: result.width,
+            height: result.height,
+          }
+        }
+
+        return null
+      })()
+
+      // Cache the promise
+      imageLoadCache.set(cacheKey, loadingPromise)
+
+      // Clean up cache on completion (success or failure)
+      loadingPromise.finally(() => {
+        // Keep successful results cached, remove failures
+        loadingPromise
+          .then((result) => {
+            if (!result) {
+              imageLoadCache.delete(cacheKey)
+            }
+          })
+          .catch(() => {
+            imageLoadCache.delete(cacheKey)
+          })
+      })
+
+      return loadingPromise
+    } catch (error) {
+      console.warn('Failed to load image:', error)
+      return null
+    }
+  }
+
+  /**
+   * Get profile/avatar image from address data
+   * Priority differs based on type:
+   * - Profiles: profileImages first
+   * - NFTs/Contracts: icons first (GraphQL pluralizes to "icons"), then images
+   * - Avatars are from other contracts (not used yet)
+   */
+  async function loadProfileImage(
+    addressData: AddressImageData,
+    options: ImageLoadOptions = {}
+  ): Promise<ImageResult | null> {
+    // For Profiles, prioritize profileImages
+    if (addressData.__gqltype === 'Profile') {
+      // Try profileImages first
+      if (addressData.profileImages?.length) {
+        const result = await loadImage(addressData.profileImages, options)
+        if (result) return result
+      }
+      // Fallback to icons
+      if (addressData.icons?.length) {
+        const result = await loadImage(addressData.icons, options)
+        if (result) return result
+      }
+      // Fallback to images
+      if (addressData.images?.length) {
+        return loadImage(addressData.images, options)
+      }
+      return null
+    }
+
+    // For NFTs/Contracts, prioritize icons, fallback to images
+    // Tokens/Assets will never have profileImages, so only check icons and images
+    // Try icons first
+    if (addressData.icons?.length) {
+      const result = await loadImage(addressData.icons, options)
+      if (result) return result
+    }
+    // Fallback to images
+    if (addressData.images?.length) {
+      return loadImage(addressData.images, options)
+    }
+
+    return null
+  }
+
+  /**
+   * Load background image from resolved address data
+   */
+  async function loadBackgroundImage(
+    addressData: AddressImageData & { backgroundImages?: any[] },
+    options: ImageLoadOptions = {}
+  ): Promise<ImageResult | null> {
+    const imageGroup = addressData.backgroundImages || []
+    return loadImage(imageGroup, options)
+  }
+
+  /**
+   * Get fallback image based on address type
+   */
+  function getFallbackImage(addressData: AddressImageData): ImageResult {
+    const isProfile = addressData.__gqltype === 'Profile'
+    return {
+      src: isProfile
+        ? '/assets/images/profile-default.svg'
+        : '/assets/images/token-default.svg',
+    }
+  }
+
+  /**
+   * Determine if address represents a contract (has square icon)
+   */
+  function isContractAddress(addressData: AddressImageData): boolean {
+    return addressData.__gqltype !== 'Profile'
+  }
+
+  return {
+    loadImage,
+    loadProfileImage,
+    loadBackgroundImage,
+    getFallbackImage,
+    isContractAddress,
+  }
+}
+
+/**
+ * Composable for address resolution and formatting
+ * Connected to decoder package's GraphQL AddressResolver
+ */
+export function useAddressResolver() {
+  /**
+   * Resolve address data using decoder package integration
+   * Uses the batched address resolution from useAddressResolution
+   */
+  async function resolveAddress(address: string): Promise<any> {
+    console.log('🔥 useAddressResolver.resolveAddress called with:', address)
+
+    try {
+      // Import and use the batched resolution from the hooks
+      const { resolveAddress: batchedResolve } = await import(
+        '../hooks/useAddressResolution'
+      )
+
+      console.log('🔥 useAddressResolver: calling batchedResolve...')
+      const resolved = await batchedResolve(address)
+      console.log('🔥 useAddressResolver: batchedResolve returned:', resolved)
+
+      // Always return something, even if no profile - this ensures we don't return null unnecessarily
+      const result = {
+        // Preserve all image arrays from GraphQL
+        ...resolved,
+        // Override with computed values only if not already set by GraphQL
+        address: resolved.address,
+        name: resolved.name || '',
+        __gqltype:
+          resolved.__gqltype || (resolved.hasProfile ? 'Profile' : 'Contract'),
+      }
+
+      console.log('🔥 useAddressResolver: returning result:', result)
+      return result
+    } catch (error) {
+      console.error('🔥 useAddressResolver: Failed to resolve address:', error)
+
+      // Return a fallback instead of null
+      return {
+        address,
+        name: '',
+        __gqltype: 'Contract',
+        profileImages: [],
+        avatar: [],
+        icon: [],
+      }
+    }
+  }
+
+  /**
+   * Format address display name from resolved data
+   */
+  function formatDisplayName(addressData: any): string {
+    const baseName =
+      addressData.name?.toLowerCase?.() ||
+      addressData.lsp4TokenName ||
+      addressData.baseAsset?.lsp4TokenName ||
+      ''
+
+    const symbol =
+      addressData.lsp4TokenSymbol ||
+      addressData.baseAsset?.lsp4TokenSymbol ||
+      ''
+
+    return symbol ? `${baseName} (${symbol})` : baseName
+  }
+
+  /**
+   * Get address prefix based on type
+   */
+  function getAddressPrefix(addressData: any): string {
+    return addressData.__gqltype !== 'Profile' ? '🪙 ' : '@'
+  }
+
+  /**
+   * Check if address should show name colors
+   */
+  function shouldShowNameColor(addressData: any): boolean {
+    return addressData.__gqltype === 'Profile'
+  }
+
+  return {
+    resolveAddress,
+    formatDisplayName,
+    getAddressPrefix,
+    shouldShowNameColor,
+  }
+}

package/src/composables/use-transaction-playback.ts

@@ -0,0 +1,396 @@
+import type { DecoderResult } from '@lukso/transaction-decoder'
+import type { Chain } from 'viem'
+import { getGlobalRegistry } from '../registry/view-registry'
+import type {
+  ViewMatch,
+  ViewMatchOptions,
+  ViewRegistry,
+} from '../types/view-matching'
+
+/**
+ * Transaction Playback System
+ *
+ * Provides index-based access to transaction views with smart handling of batches:
+ *
+ * **Single Transaction:**
+ * - Index 0: The transaction itself
+ * - Index 1: The transaction itself (same as 0)
+ * - Index 2+: null
+ *
+ * **Batch Transaction (setDataBatch, executeBatch):**
+ * - Index 0: Summary/expandable view of the batch
+ * - Index 1: First child transaction
+ * - Index 2: Second child transaction
+ * - Index N: Nth child transaction
+ *
+ * This design allows UI flexibility:
+ * - Always use index 1 to skip batch summaries
+ * - Use index 0 to show batch overview (optional)
+ * - Navigate batch children by index
+ */
+
+/**
+ * Options for transaction playback
+ */
+export interface TransactionPlaybackOptions extends Partial<ViewMatchOptions> {
+  /** Custom registry to use instead of global */
+  registry?: ViewRegistry
+  /** Fallback view ID if no matches found */
+  fallbackViewId?: string
+  /** Chain for address resolution */
+  chain?: Chain
+}
+
+/**
+ * Result of selecting a view at a specific index
+ */
+export interface PlaybackIndexResult {
+  /** The selected view match (or null if invalid index) */
+  match: ViewMatch | null
+  /** The transaction data for this index */
+  transaction: DecoderResult | null
+  /** Index information */
+  indexInfo: {
+    /** Requested index */
+    requested: number
+    /** Actual index in children array (for batches) */
+    childIndex: number | null
+    /** Whether this is a batch summary view (index 0 of batch) */
+    isBatchSummary: boolean
+    /** Whether this is a valid index */
+    isValid: boolean
+  }
+  /** Batch information (if applicable) */
+  batchInfo: {
+    /** Whether the root transaction is a batch */
+    isBatch: boolean
+    /** Total number of children in batch (0 if not batch) */
+    childCount: number
+    /** Available indices (e.g., [0, 1, 2, 3] for 3-child batch) */
+    availableIndices: number[]
+  }
+}
+
+/**
+ * Complete playback state for a transaction
+ */
+export interface TransactionPlaybackState {
+  /** The root transaction */
+  rootTransaction: DecoderResult
+  /** Whether this is a batch transaction */
+  isBatch: boolean
+  /** Child transactions (empty if not batch) */
+  children: DecoderResult[]
+  /** Total count of available indices */
+  indexCount: number
+  /** Batch information */
+  batchInfo: {
+    /** Whether the root transaction is a batch */
+    isBatch: boolean
+    /** Total number of children in batch (0 if not batch) */
+    childCount: number
+    /** Available indices (e.g., [0, 1, 2, 3] for 3-child batch) */
+    availableIndices: number[]
+  }
+  /** Get view match for a specific index */
+  getViewAtIndex: (index: number) => PlaybackIndexResult
+  /** Get all available views */
+  getAllViews: () => PlaybackIndexResult[]
+}
+
+/**
+ * Check if a transaction is a batch transaction
+ */
+function isBatchTransaction(transaction: DecoderResult): boolean {
+  return (
+    transaction.resultType === 'executeBatch' ||
+    transaction.resultType === 'setDataBatch' ||
+    !!(transaction as any).children?.length
+  )
+}
+
+/**
+ * Get children from a batch transaction
+ */
+function getBatchChildren(transaction: DecoderResult): DecoderResult[] {
+  if (!isBatchTransaction(transaction)) {
+    return []
+  }
+  return (transaction as any).children || []
+}
+
+/**
+ * Core function to select view at a specific index
+ */
+function selectViewAtIndex(
+  rootTransaction: DecoderResult,
+  index: number,
+  options: TransactionPlaybackOptions
+): PlaybackIndexResult {
+  const {
+    registry = getGlobalRegistry(),
+    framework = 'lit',
+    fallbackViewId,
+    minScore = 0,
+    includeFrameworkConfig = true,
+  } = options
+
+  const isBatch = isBatchTransaction(rootTransaction)
+  const children = getBatchChildren(rootTransaction)
+  const childCount = children.length
+
+  // Initialize result
+  const result: PlaybackIndexResult = {
+    match: null,
+    transaction: null,
+    indexInfo: {
+      requested: index,
+      childIndex: null,
+      isBatchSummary: false,
+      isValid: false,
+    },
+    batchInfo: {
+      isBatch,
+      childCount,
+      availableIndices: [],
+    },
+  }
+
+  // Calculate available indices
+  if (isBatch) {
+    // Batch: 0 (summary) + N children
+    result.batchInfo.availableIndices = Array.from(
+      { length: childCount + 1 },
+      (_, i) => i
+    )
+  } else {
+    // Single: 0 and 1 both map to the transaction
+    result.batchInfo.availableIndices = [0, 1]
+  }
+
+  // Validate index
+  if (index < 0) {
+    return result // Invalid: negative index
+  }
+
+  // Handle single transaction
+  if (!isBatch) {
+    if (index === 0 || index === 1) {
+      result.indexInfo.isValid = true
+      result.transaction = rootTransaction
+
+      // Find matching view for the transaction
+      const matchOptions: ViewMatchOptions = {
+        framework: framework as any,
+        minScore,
+        maxMatches: 1,
+        includeFrameworkConfig,
+      }
+
+      const matches = registry.findMatches(rootTransaction, matchOptions)
+      result.match = matches[0] || null
+
+      // Try fallback if no match
+      if (!result.match && fallbackViewId) {
+        const fallbackView = registry.getView(fallbackViewId)
+        if (fallbackView && fallbackView.frameworks[framework]) {
+          result.match = {
+            view: fallbackView,
+            score: 0,
+            matchedCriteria: [],
+            frameworkConfig: includeFrameworkConfig
+              ? fallbackView.frameworks[framework]
+              : undefined,
+          }
+        }
+      }
+
+      return result
+    }
+
+    // Invalid index for single transaction
+    return result
+  }
+
+  // Handle batch transaction
+  if (index === 0) {
+    // Index 0: Batch summary view
+    result.indexInfo.isValid = true
+    result.indexInfo.isBatchSummary = true
+    result.transaction = rootTransaction
+
+    // Find batch summary view
+    const matchOptions: ViewMatchOptions = {
+      framework: framework as any,
+      minScore,
+      maxMatches: 1,
+      includeFrameworkConfig,
+    }
+
+    const matches = registry.findMatches(rootTransaction, matchOptions)
+    result.match = matches[0] || null
+
+    // Try fallback if no match
+    if (!result.match && fallbackViewId) {
+      const fallbackView = registry.getView(fallbackViewId)
+      if (fallbackView && fallbackView.frameworks[framework]) {
+        result.match = {
+          view: fallbackView,
+          score: 0,
+          matchedCriteria: [],
+          frameworkConfig: includeFrameworkConfig
+            ? fallbackView.frameworks[framework]
+            : undefined,
+        }
+      }
+    }
+
+    return result
+  }
+
+  // Index 1+: Child transactions
+  const childIndex = index - 1
+  if (childIndex >= 0 && childIndex < childCount) {
+    result.indexInfo.isValid = true
+    result.indexInfo.childIndex = childIndex
+    result.transaction = children[childIndex]
+
+    // Find matching view for the child transaction
+    const matchOptions: ViewMatchOptions = {
+      framework: framework as any,
+      minScore,
+      maxMatches: 1,
+      includeFrameworkConfig,
+    }
+
+    const matches = registry.findMatches(result.transaction, matchOptions)
+    result.match = matches[0] || null
+
+    // Try fallback if no match
+    if (!result.match && fallbackViewId) {
+      const fallbackView = registry.getView(fallbackViewId)
+      if (fallbackView && fallbackView.frameworks[framework]) {
+        result.match = {
+          view: fallbackView,
+          score: 0,
+          matchedCriteria: [],
+          frameworkConfig: includeFrameworkConfig
+            ? fallbackView.frameworks[framework]
+            : undefined,
+        }
+      }
+    }
+
+    return result
+  }
+
+  // Invalid index for batch
+  return result
+}
+
+/**
+ * Create a playback state for a transaction
+ *
+ * @example
+ * ```typescript
+ * const playback = createTransactionPlayback(transaction, { framework: 'lit' })
+ *
+ * // For single transaction:
+ * playback.getViewAtIndex(0) // Returns the transaction
+ * playback.getViewAtIndex(1) // Returns the transaction (same)
+ * playback.getViewAtIndex(2) // Returns null (invalid)
+ *
+ * // For batch transaction:
+ * playback.getViewAtIndex(0) // Returns batch summary
+ * playback.getViewAtIndex(1) // Returns first child
+ * playback.getViewAtIndex(2) // Returns second child
+ * ```
+ */
+export function createTransactionPlayback(
+  rootTransaction: DecoderResult,
+  options: TransactionPlaybackOptions = {}
+): TransactionPlaybackState {
+  const isBatch = isBatchTransaction(rootTransaction)
+  const children = getBatchChildren(rootTransaction)
+  const childCount = children.length
+  const indexCount = isBatch ? childCount + 1 : 2 // batch: 0 + N, single: 0 and 1
+
+  // Calculate available indices
+  const availableIndices = isBatch
+    ? Array.from({ length: childCount + 1 }, (_, i) => i) // [0, 1, 2, ...]
+    : [0, 1] // Single: 0 and 1 both valid
+
+  return {
+    rootTransaction,
+    isBatch,
+    children,
+    indexCount,
+    batchInfo: {
+      isBatch,
+      childCount,
+      availableIndices,
+    },
+    getViewAtIndex: (index: number) =>
+      selectViewAtIndex(rootTransaction, index, options),
+    getAllViews: () => {
+      const views: PlaybackIndexResult[] = []
+      for (let i = 0; i < indexCount; i++) {
+        views.push(selectViewAtIndex(rootTransaction, i, options))
+      }
+      return views
+    },
+  }
+}
+
+/**
+ * Simplified composable that just returns the view at a specific index
+ *
+ * @example
+ * ```typescript
+ * // Vue
+ * const index = ref(1) // Always show main transaction, skip batch summaries
+ * const result = useTransactionPlayback(transaction, index, { framework: 'lit' })
+ *
+ * // React
+ * const [index, setIndex] = useState(1)
+ * const result = useTransactionPlayback(transaction, index, { framework: 'lit' })
+ * ```
+ */
+export function useTransactionPlayback(
+  rootTransaction: DecoderResult,
+  index: number,
+  options: TransactionPlaybackOptions = {}
+): PlaybackIndexResult {
+  return selectViewAtIndex(rootTransaction, index, options)
+}
+
+/**
+ * Helper to check if an index is valid for a transaction
+ */
+export function isValidPlaybackIndex(
+  transaction: DecoderResult,
+  index: number
+): boolean {
+  const isBatch = isBatchTransaction(transaction)
+
+  if (!isBatch) {
+    return index === 0 || index === 1
+  }
+
+  const childCount = getBatchChildren(transaction).length
+  return index >= 0 && index <= childCount
+}
+
+/**
+ * Helper to get the range of valid indices for a transaction
+ */
+export function getValidPlaybackIndices(transaction: DecoderResult): number[] {
+  const isBatch = isBatchTransaction(transaction)
+
+  if (!isBatch) {
+    return [0, 1]
+  }
+
+  const childCount = getBatchChildren(transaction).length
+  return Array.from({ length: childCount + 1 }, (_, i) => i)
+}