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

package/src/examples/optimized-view-definitions.ts

@@ -0,0 +1,408 @@
+import { LoaderHelpers } from '../registry/view-loader'
+import type { ViewDefinition } from '../types/view-matching'
+
+/**
+ * Optimized View Definitions: Suffering Economics in Action
+ *
+ * Following our mathematical proof that 2 strategic implementations
+ * provide superior outcomes to 4+ framework-specific implementations,
+ * these view definitions demonstrate the practical application of
+ * Suffering Economics optimization.
+ */
+
+export const OptimizedViewDefinitions: ViewDefinition[] = [
+  // LSP7 Transfer: Universal web + Mobile native
+  {
+    id: 'lsp7-transfer-optimized',
+    name: 'LSP7 Transfer (Suffering Optimized)',
+    description:
+      'Universal web component + native mobile, 2x less suffering than traditional approach',
+    priority: 100,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+    },
+    frameworks: {
+      // Universal web compatibility (works in Vue, React, Angular, Svelte, etc.)
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp7-transfer-view'),
+        component: 'lsp7-transfer-view',
+        package: '@lukso/decoder-web-components',
+      },
+      // Mobile-native optimization
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/LSP7Transfer.jsx'
+        ),
+        component: 'LSP7Transfer',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // LSP8 Transfer: Context-aware versions
+  {
+    id: 'lsp8-transfer-approval',
+    name: 'LSP8 Transfer (Approval Context)',
+    description: 'Security-focused approval view for NFT transfers',
+    priority: 120,
+    criteria: {
+      recordType: 'lsp8-transfer',
+      standard: 'LSP8',
+      context: 'approval',
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp8-transfer-approval'),
+        component: 'lsp8-transfer-approval',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/approval/LSP8TransferApproval.jsx'
+        ),
+        component: 'LSP8TransferApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'lsp8-transfer-feed',
+    name: 'LSP8 Transfer (Feed Context)',
+    description: 'Compact view for activity feeds',
+    priority: 110,
+    criteria: {
+      recordType: 'lsp8-transfer',
+      standard: 'LSP8',
+      context: ['feed', 'list'],
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp8-transfer-compact'),
+        component: 'lsp8-transfer-compact',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/feed/LSP8TransferFeed.jsx'
+        ),
+        component: 'LSP8TransferFeed',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Execute Batch: Complex transaction handling
+  {
+    id: 'execute-batch-universal',
+    name: 'Execute Batch (Universal)',
+    description:
+      'Expandable batch transaction view with child transaction support',
+    priority: 100,
+    criteria: {
+      recordType: 'executeBatch',
+      functionName: 'executeBatch',
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('execute-batch-view'),
+        component: 'execute-batch-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/ExecuteBatch.jsx'
+        ),
+        component: 'ExecuteBatch',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Set Data: Key-value operations
+  {
+    id: 'set-data-detailed',
+    name: 'Set Data Operation',
+    description: 'Key-value display with expandable details',
+    priority: 90,
+    criteria: {
+      functionName: 'setData',
+      recordType: 'set-data',
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('set-data-view'),
+        component: 'set-data-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/SetData.jsx'
+        ),
+        component: 'SetData',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // High-value transaction: Custom matching logic
+  {
+    id: 'high-value-transfer',
+    name: 'High-Value Transfer Warning',
+    description:
+      'Special handling for high-value transfers (>1 ETH equivalent)',
+    priority: 150, // Higher priority to catch high-value transfers
+    criteria: {
+      functionName: 'transfer',
+      customMatcher: (transaction) => {
+        if (!transaction.value) return false
+        return BigInt(transaction.value) > BigInt('1000000000000000000') // > 1 ETH
+      },
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('high-value-transfer-warning'),
+        component: 'high-value-transfer-warning',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/HighValueTransfer.jsx'
+        ),
+        component: 'HighValueTransfer',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Universal fallback: Catches everything else
+  {
+    id: 'generic-transaction-fallback',
+    name: 'Generic Transaction (Universal Fallback)',
+    description: 'Fallback view for unknown transaction types',
+    priority: 10, // Lowest priority
+    criteria: {
+      // No specific criteria = matches everything
+      customMatcher: () => true,
+    },
+    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.jsx'
+        ),
+        component: 'GenericTransaction',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Context-specific fallbacks
+  {
+    id: 'generic-approval-fallback',
+    name: 'Generic Approval (Context Fallback)',
+    description: 'Fallback for unknown transactions in approval context',
+    priority: 15,
+    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.jsx'
+        ),
+        component: 'GenericApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+]
+
+/**
+ * Usage examples demonstrating the suffering reduction in practice
+ */
+export const UsageExamples = {
+  // Vue usage (universal web component)
+  vueUsage: `
+<!-- Vue: Uses Lit web component seamlessly -->
+<template>
+  <div class="transaction-container">
+    <lsp7-transfer-view 
+      :transaction="transaction"
+      :show-actions="showActions"
+      @approve="handleApprove"
+      @reject="handleReject"
+      @address-click="handleAddressClick"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@lukso/decoder-web-components' // Registers all web components
+
+const props = defineProps(['transaction', 'showActions'])
+const emit = defineEmits(['approve', 'reject', 'address-click'])
+
+const handleApprove = (event) => emit('approve', event.detail)
+const handleReject = (event) => emit('reject', event.detail)  
+const handleAddressClick = (event) => emit('address-click', event.detail)
+</script>
+
+<!-- Vue developers barely notice it's a web component! -->`,
+
+  // React usage (with @lit-labs/react wrapper)
+  reactUsage: `
+// React: Seamless integration via wrapper
+import { LSP7Transfer } from '@lukso/decoder-react-wrappers'
+
+function TransactionApproval({ transaction, showActions }) {
+  const handleApprove = (transactionData) => {
+    console.log('Approved:', transactionData)
+  }
+
+  return (
+    <div className="transaction-container">
+      <LSP7Transfer 
+        transaction={transaction}
+        showActions={showActions}
+        onApprove={handleApprove}
+        onReject={handleReject}
+        onAddressClick={handleAddressClick}
+      />
+    </div>
+  )
+}
+
+// Feels like a normal React component, but it's actually a Lit web component!`,
+
+  // React Native usage (native components)
+  reactNativeUsage: `
+// React Native: Platform-optimized native components
+import { LSP7Transfer } from '@lukso/decoder-rn-views'
+import { View, StyleSheet } from rn
+
+function TransactionScreen({ transaction, showActions }) {
+  const handleApprove = (transactionData) => {
+    console.log('Approved:', transactionData)
+  }
+
+  return (
+    <View style={styles.container}>
+      <LSP7Transfer 
+        transaction={transaction}
+        showActions={showActions}
+        onApprove={handleApprove}
+        onReject={handleReject}
+        style={styles.transaction}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  transaction: { marginVertical: 8 }
+})`,
+
+  // Headless usage (framework-agnostic business logic)
+  headlessUsage: `
+// Headless system: Framework-agnostic business logic
+import { useTransactionView, getGlobalRegistry } from '@lukso/transaction-view-headless'
+
+// Register views once at app startup
+const registry = getGlobalRegistry()
+OptimizedViewDefinitions.forEach(view => registry.register(view))
+
+// Use in any framework
+function SomeComponent({ transaction }) {
+  const { bestMatch, component, addressData } = useTransactionView(transaction, {
+    framework: 'lit', // or rn
+    context: 'approval',
+    autoLoad: true
+  })
+
+  // bestMatch.view.id = 'lsp7-transfer-optimized'  
+  // component = the loaded web component or React Native component
+  // addressData = resolved address information (shared business logic)
+}`,
+
+  // Multi-framework deployment
+  deploymentExample: `
+// Same components work across ALL frameworks!
+
+// Vue app
+import '@lukso/decoder-web-components'
+// Uses: <lsp7-transfer-view>
+
+// React app  
+import '@lukso/decoder-react-wrappers'
+// Uses: <LSP7Transfer> (wrapper around web component)
+
+// Angular app
+import '@lukso/decoder-web-components'
+// Uses: <lsp7-transfer-view> with CUSTOM_ELEMENTS_SCHEMA
+
+// Svelte app
+import '@lukso/decoder-web-components'  
+// Uses: <lsp7-transfer-view> with native web component support
+
+// React Native app
+import { LSP7Transfer } from '@lukso/decoder-rn-views'
+// Uses: Native mobile components
+
+// Vanilla HTML
+<script type="module" src="./decoder-web-components.js"></script>
+<lsp7-transfer-view transaction="..."></lsp7-transfer-view>
+
+ONE implementation, UNIVERSAL compatibility! 🎯`,
+}
+
+/**
+ * Benefits realized through this optimization
+ */
+export const RealizedBenefits = [
+  '✅ 2x less suffering: 2 implementations instead of 4+',
+  '✅ Universal web compatibility: Works in ALL web frameworks',
+  '✅ Native mobile optimization: React Native performance',
+  '✅ Future-proof: New frameworks automatically supported',
+  '✅ Reduced maintenance: 2 codebases instead of 6+',
+  '✅ Consistent UX: Same components everywhere',
+  '✅ Better performance: Native web standards + native mobile',
+  '✅ Developer smugness: Mathematical superiority proven 📊',
+]
+
+/**
+ * Migration strategy from traditional multi-framework approach
+ */
+export const MigrationStrategy = `
+Phase 1: Implement Lit web components
+- Convert existing Vue/React components to Lit
+- Maintain backward compatibility through wrappers
+- Suffering level: Moderate (learning Lit)
+
+Phase 2: Optimize React Native components  
+- Replace web-in-webview with native components
+- Use StyleSheet and platform-specific optimizations
+- Suffering level: Low (familiar React patterns)
+
+Phase 3: Remove framework-specific implementations
+- Delete Vue/React/Angular specific components
+- Keep only Lit + React Native
+- Suffering level: Negative (maintenance burden removed!)
+
+Phase 4: Enjoy mathematical superiority
+- Deploy universal components everywhere
+- Watch competitors maintain 6+ implementations
+- Suffering level: Smugness overflow error 😎
+`