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

package/src/examples/opt-in-context-examples.ts

@@ -0,0 +1,372 @@
+import { LoaderHelpers } from '../registry/view-loader'
+import type { ViewContext } from '../types/view-contexts'
+import type { ViewDefinition } from '../types/view-matching'
+
+/**
+ * Examples showing how context support is opt-in with our optimized Lit + React Native strategy
+ */
+export const OptInContextExamples: ViewDefinition[] = [
+  // UNIVERSAL VIEW - Works in any context (no context specified)
+  {
+    id: 'lsp7-transfer-universal',
+    name: 'LSP7 Transfer (Universal)',
+    description: 'Works in any context - approval, feed, detail, etc.',
+    priority: 80,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      // No context specified = matches any context
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp7-transfer-view'),
+        component: 'lsp7-transfer-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/LSP7Transfer'
+        ),
+        component: 'LSP7Transfer',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // CONTEXT-SPECIFIC VIEW - Only works in approval context
+  {
+    id: 'lsp7-transfer-approval-only',
+    name: 'LSP7 Transfer (Approval Only)',
+    description: 'Specialized for approval context only',
+    priority: 120, // Higher priority when context matches
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      context: 'approval', // Opt-in: ONLY matches approval context
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp7-transfer-approval'),
+        component: 'lsp7-transfer-approval',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/approval/LSP7TransferApproval'
+        ),
+        component: 'LSP7TransferApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // MULTI-CONTEXT VIEW - Supports multiple contexts
+  {
+    id: 'lsp7-transfer-compact',
+    name: 'LSP7 Transfer (Compact)',
+    description: 'Optimized for feed and list contexts',
+    priority: 110,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      context: ['feed', 'list'], // Opt-in: Only these two contexts
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp7-transfer-compact'),
+        component: 'lsp7-transfer-compact',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/compact/LSP7TransferCompact'
+        ),
+        component: 'LSP7TransferCompact',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // FALLBACK VIEW - Universal fallback
+  {
+    id: 'generic-transaction-universal',
+    name: 'Generic Transaction (Universal)',
+    description: 'Fallback for any transaction in any context',
+    priority: 10,
+    criteria: {
+      customMatcher: () => true,
+      // No context = universal fallback
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('generic-transaction-view'),
+        component: 'generic-transaction-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/GenericTransaction'
+        ),
+        component: 'GenericTransaction',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // CONTEXT-AWARE FALLBACK - Context-specific fallback
+  {
+    id: 'generic-approval-fallback',
+    name: 'Generic Approval Fallback',
+    description: 'Fallback for unknown transactions in approval context',
+    priority: 15, // Slightly higher than universal fallback
+    criteria: {
+      context: 'approval',
+      customMatcher: () => true,
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('generic-approval-view'),
+        component: 'generic-approval-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/approval/GenericApproval'
+        ),
+        component: 'GenericApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+]
+
+/**
+ * Examples of how view selection works with opt-in context using our optimized strategy
+ */
+export const SelectionExamples = {
+  // Example 1: Request WITH context (Lit web component)
+  withApprovalContextWeb: `
+    // Request: LSP7 transfer in approval context (any web framework)
+    findMatchingViews(lsp7Transaction, views, { 
+      framework: 'lit',
+      context: 'approval' 
+    })
+    
+    // Results (in priority order):
+    // 1. lsp7-transfer-approval-only  (score: ~95%, priority: 120) ✅ Perfect match
+    // 2. lsp7-transfer-universal      (score: ~70%, priority: 80)  ⚠️  Universal (slight penalty)
+    // 3. generic-approval-fallback    (score: ~20%, priority: 15)  ⚠️  Fallback
+    // 4. generic-transaction-universal (score: ~18%, priority: 10) ⚠️  Universal fallback
+    
+    // Winner: lsp7-transfer-approval-only (context-specific Lit component)
+    // Works in Vue: <lsp7-transfer-approval :transaction="tx" @approve="handle" />
+    // Works in React: <lsp7-transfer-approval ref={el => el.transaction = tx} />
+    // Works in Angular: <lsp7-transfer-approval [transaction]="tx" (approve)="handle($event)" />
+  `,
+
+  // Example 1: Request WITH context (React Native)
+  withApprovalContextMobile: `
+    // Request: LSP7 transfer in approval context (React Native)
+    findMatchingViews(lsp7Transaction, views, { 
+      framework: rn,
+      context: 'approval' 
+    })
+    
+    // Results: Same scoring, different components
+    // Winner: LSP7TransferApproval React Native component
+    <LSP7TransferApproval 
+      transaction={transaction}
+      onApprove={handleApprove}
+      style={styles.approvalView}
+    />
+  `,
+
+  withFeedContext: `
+    // Request: LSP7 transfer in feed context  
+    findMatchingViews(lsp7Transaction, views, { 
+      framework: 'lit', // or rn
+      context: 'feed' 
+    })
+    
+    // Results:
+    // 1. lsp7-transfer-compact        (score: ~95%, priority: 110) ✅ Perfect match (feed is in context array)
+    // 2. lsp7-transfer-universal      (score: ~70%, priority: 80)  ⚠️  Universal (slight penalty)
+    // 3. generic-transaction-universal (score: ~18%, priority: 10) ⚠️  Universal fallback
+    
+    // Note: lsp7-transfer-approval-only gets score ~9.5% (heavily penalized - wrong context)
+    // Winner: lsp7-transfer-compact (multi-context view)
+  `,
+
+  // Example 2: Request WITHOUT context
+  withoutContext: `
+    // Request: LSP7 transfer with no context specified
+    findMatchingViews(lsp7Transaction, views, { 
+      framework: 'lit' // or rn
+      // No context specified
+    })
+    
+    // Results:
+    // 1. lsp7-transfer-universal      (score: 75%, priority: 80)  ✅ Perfect - universal view
+    // 2. generic-transaction-universal (score: 20%, priority: 10) ⚠️  Universal fallback
+    
+    // Context-specific views get heavily penalized (~10% of normal score):
+    // - lsp7-transfer-approval-only   (score: ~9.5%)  ❌ Requires context
+    // - lsp7-transfer-compact         (score: ~9.5%)  ❌ Requires context  
+    
+    // Winner: lsp7-transfer-universal (designed to work anywhere)
+  `,
+
+  unknownTransaction: `
+    // Request: Unknown transaction type in approval context
+    findMatchingViews(unknownTransaction, views, { 
+      framework: 'lit', // or rn
+      context: 'approval' 
+    })
+    
+    // Results:
+    // 1. generic-approval-fallback    (score: ~20%, priority: 15) ✅ Context-aware fallback
+    // 2. generic-transaction-universal (score: ~18%, priority: 10) ⚠️  Universal fallback
+    
+    // Winner: generic-approval-fallback (better for approval context)
+  `,
+}
+
+/**
+ * Migration strategy for existing views using our optimized approach
+ */
+export const MigrationStrategy = `
+/**
+ * MIGRATION STRATEGY: Gradual Context Adoption with Suffering Reduction
+ * 
+ * Phase 1: Convert to Lit + React Native (Suffering Reduction)
+ * - Convert existing Vue/React/Angular views to Lit web components
+ * - Convert existing mobile views to React Native
+ * - Immediate 50% reduction in maintenance overhead
+ * - All existing views continue to work unchanged (universal contexts)
+ * 
+ * Phase 2: Add context-specific views gradually  
+ * - Add approval-specific views for security-critical transactions
+ * - Add compact views for feeds/lists
+ * - Context-specific views get higher priority when context matches
+ * - Universal views remain as fallbacks
+ * 
+ * Phase 3: Optimize and celebrate
+ * - Monitor usage patterns and optimize popular views
+ * - Remove unused universal views if fully replaced by context-specific ones
+ * - Enjoy the mathematical superiority of 2x less suffering
+ * 
+ * Benefits:
+ * - Zero breaking changes during migration
+ * - Gradual adoption with immediate suffering reduction
+ * - Better UX where it matters most (approval flows)
+ * - Universal web compatibility automatically achieved
+ * - Native mobile performance from day one
+ * 
+ * Result: Developer suffering reduced by 50%, user experience improved by ∞%
+ */
+`
+
+/**
+ * Web framework integration examples with Lit components
+ */
+export const WebFrameworkIntegration = {
+  vue: `
+<!-- Vue: Lit web components work seamlessly -->
+<template>
+  <div class="transaction-container">
+    <lsp7-transfer-approval 
+      :transaction="transaction"
+      :show-actions="true"
+      @approve="handleApprove"
+      @reject="handleReject"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@lukso/decoder-web-components'
+// Vue developers barely notice it's a web component!
+</script>`,
+
+  react: `
+// React: Use Lit components with refs
+import { useRef, useEffect } from 'react'
+import '@lukso/decoder-web-components'
+
+function TransactionApproval({ transaction, onApprove }) {
+  const elementRef = useRef(null)
+
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    element.transaction = transaction
+    element.addEventListener('approve', (e) => onApprove(e.detail))
+    
+    return () => {
+      element.removeEventListener('approve', onApprove)
+    }
+  }, [transaction, onApprove])
+
+  return <lsp7-transfer-approval ref={elementRef} />
+}`,
+
+  angular: `
+// Angular: Web components work with CUSTOM_ELEMENTS_SCHEMA
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import '@lukso/decoder-web-components'
+
+@Component({
+  template: \`
+    <lsp7-transfer-approval 
+      [transaction]="transaction"
+      [showActions]="true"
+      (approve)="handleApprove($event)"
+    ></lsp7-transfer-approval>
+  \`,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TransactionComponent {
+  // Angular treats web components as first-class citizens
+}`,
+
+  svelte: `
+<!-- Svelte: Excellent web component support -->
+<script>
+  import '@lukso/decoder-web-components'
+  
+  export let transaction
+  
+  function handleApprove(event) {
+    console.log('Approved:', event.detail)
+  }
+</script>
+
+<lsp7-transfer-approval 
+  {transaction}
+  showActions={true}
+  on:approve={handleApprove}
+/>`,
+
+  reactNative: `
+// React Native: Native components for optimal mobile performance
+import { LSP7TransferApproval } from '@lukso/decoder-rn-views'
+import { StyleSheet } from rn
+
+function TransactionScreen({ transaction }) {
+  return (
+    <LSP7TransferApproval 
+      transaction={transaction}
+      onApprove={handleApprove}
+      style={styles.transaction}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  transaction: {
+    padding: 16,
+    marginVertical: 8
+  }
+})`,
+}