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

package/src/examples/context-aware-views.ts

@@ -0,0 +1,300 @@
+import { LoaderHelpers } from '../registry/view-loader'
+import type { ViewContext } from '../types/view-contexts'
+import type { ViewDefinition } from '../types/view-matching'
+
+/**
+ * Context-aware views using our optimized Lit + React Native strategy
+ *
+ * Example showing how the same transaction type can have different views
+ * based on context, using our suffering economics optimized approach.
+ */
+export const ContextAwareViews: ViewDefinition[] = [
+  // LSP7 Transfer - Approval Context (High Security, Detailed)
+  {
+    id: 'lsp7-transfer-approval',
+    name: 'LSP7 Transfer Approval',
+    description: 'Security-focused view for approving LSP7 transfers',
+    priority: 120, // Higher than generic LSP7 views
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      context: 'approval',
+      contextRequirements: {
+        detailLevel: 'full',
+        emphasizeSecurity: true,
+        showActions: true,
+      },
+    },
+    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',
+      },
+    },
+  },
+
+  // LSP7 Transfer - Feed Context (Compact, Quick Scan)
+  {
+    id: 'lsp7-transfer-feed',
+    name: 'LSP7 Transfer Feed Item',
+    description: 'Compact view for activity feeds',
+    priority: 110,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      context: ['feed', 'list'],
+      contextRequirements: {
+        detailLevel: 'summary',
+        maxHeight: 80, // pixels
+        expandable: true,
+      },
+    },
+    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/feed/LSP7TransferFeed'
+        ),
+        component: 'LSP7TransferFeed',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // LSP7 Transfer - Detail Context (Complete Information)
+  {
+    id: 'lsp7-transfer-detail',
+    name: 'LSP7 Transfer Detail',
+    description: 'Complete transaction details view',
+    priority: 100,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+      context: 'detail',
+      contextRequirements: {
+        detailLevel: 'full',
+      },
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp7-transfer-detail'),
+        component: 'lsp7-transfer-detail',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/detail/LSP7TransferDetail'
+        ),
+        component: 'LSP7TransferDetail',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Execute Batch - Different views for different contexts
+  {
+    id: 'execute-batch-approval',
+    name: 'Batch Execution Approval',
+    description: 'Detailed batch approval with risk analysis',
+    priority: 150,
+    criteria: {
+      recordType: 'executeBatch',
+      context: 'approval',
+      contextRequirements: {
+        detailLevel: 'full',
+        emphasizeSecurity: true,
+        showActions: true,
+      },
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('execute-batch-approval'),
+        component: 'execute-batch-approval',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/approval/ExecuteBatchApproval'
+        ),
+        component: 'ExecuteBatchApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'execute-batch-feed',
+    name: 'Batch Execution Summary',
+    description: 'Compact batch summary for feeds',
+    priority: 120,
+    criteria: {
+      recordType: 'executeBatch',
+      context: ['feed', 'list'],
+      contextRequirements: {
+        detailLevel: 'summary',
+        expandable: true,
+      },
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('execute-batch-compact'),
+        component: 'execute-batch-compact',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/feed/ExecuteBatchFeed'
+        ),
+        component: 'ExecuteBatchFeed',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  // Fallback views for each context
+  {
+    id: 'generic-approval',
+    name: 'Generic Approval View',
+    description: 'Fallback approval view for unknown transaction types',
+    priority: 10,
+    criteria: {
+      context: 'approval',
+      customMatcher: () => true,
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('generic-approval'),
+        component: 'generic-approval',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/approval/GenericApproval'
+        ),
+        component: 'GenericApproval',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'generic-feed',
+    name: 'Generic Feed Item',
+    description: 'Fallback feed view for unknown transaction types',
+    priority: 5,
+    criteria: {
+      context: ['feed', 'list'],
+      customMatcher: () => true,
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('generic-feed'),
+        component: 'generic-feed',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/feed/GenericFeed'
+        ),
+        component: 'GenericFeed',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+]
+
+/**
+ * Usage examples showing how context affects view selection
+ * with our optimized Lit + React Native approach
+ */
+export const UsageExamples = {
+  // In an approval flow (Lit web component)
+  approvalFlowWeb: `
+    // Any web framework (Vue, React, Angular, Svelte, etc.)
+    import '@lukso/decoder-web-components'
+    
+    const { bestMatch } = useTransactionView(transaction, {
+      framework: 'lit',
+      context: 'approval',
+      contextRequirements: {
+        detailLevel: 'full',
+        emphasizeSecurity: true,
+        showActions: true
+      }
+    })
+    
+    // Returns: lsp7-transfer-approval (priority 120)
+    // Usage in any web framework:
+    <lsp7-transfer-approval 
+      .transaction="\${transaction}"
+      @approve="\${handleApprove}"
+    ></lsp7-transfer-approval>
+  `,
+
+  // In an approval flow (React Native)
+  approvalFlowMobile: `
+    // React Native
+    import { LSP7TransferApproval } from '@lukso/decoder-rn-views'
+    
+    const { bestMatch } = useTransactionView(transaction, {
+      framework: rn,
+      context: 'approval'
+    })
+    
+    // Returns: lsp7-transfer-approval (priority 120)
+    <LSP7TransferApproval 
+      transaction={transaction}
+      onApprove={handleApprove}
+      style={styles.transaction}
+    />
+  `,
+
+  // In an activity feed
+  activityFeed: `
+    const { bestMatch } = useTransactionView(transaction, {
+      framework: 'lit', // or rn
+      context: 'feed',
+      contextRequirements: {
+        detailLevel: 'summary',
+        maxHeight: 80
+      }
+    })
+    // Returns: lsp7-transfer-compact (priority 110)
+  `,
+
+  // Transaction detail page
+  detailPage: `
+    const { bestMatch } = useTransactionView(transaction, {
+      framework: 'lit', // or rn
+      context: 'detail',
+      contextRequirements: {
+        detailLevel: 'full'
+      }
+    })
+    // Returns: lsp7-transfer-detail (priority 100)
+  `,
+}
+
+/**
+ * Benefits of context-aware views with optimized framework strategy
+ */
+export const Benefits = [
+  '✅ Context-specific UX optimization (approval vs feed)',
+  '✅ Universal web compatibility through Lit components',
+  '✅ Native mobile performance through React Native',
+  '✅ Only 2 implementations to maintain per context',
+  '✅ Automatic framework compatibility for all web frameworks',
+  '✅ 50% reduction in developer suffering vs traditional approach',
+]

package/src/examples/example-views.ts

@@ -0,0 +1,197 @@
+import { LoaderHelpers } from '../registry/view-loader'
+import type { ViewDefinition } from '../types/view-matching'
+
+/**
+ * Example view definitions showing different matching patterns and loading strategies
+ */
+export const ExampleViews: ViewDefinition[] = [
+  {
+    id: 'lsp7-transfer',
+    name: 'LSP7 Token Transfer',
+    description: 'Standard view for LSP7 token transfers',
+    priority: 100,
+    criteria: {
+      recordType: 'lsp7-transfer',
+      standard: 'LSP7',
+    },
+    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',
+      },
+    },
+  },
+
+  {
+    id: 'lsp8-transfer',
+    name: 'LSP8 NFT Transfer',
+    description: 'Standard view for LSP8 NFT transfers',
+    priority: 100,
+    criteria: {
+      recordType: 'lsp8-transfer',
+      standard: 'LSP8',
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('lsp8-transfer-view'),
+        component: 'lsp8-transfer-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/LSP8Transfer'
+        ),
+        component: 'LSP8Transfer',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'set-data',
+    name: 'Set Data Operation',
+    description: 'View for LSP0 setData operations',
+    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'),
+        component: 'SetData',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'execute-batch',
+    name: 'Execute Batch',
+    description: 'View for batch execution operations',
+    priority: 95,
+    criteria: {
+      functionName: 'executeBatch',
+      recordType: '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'
+        ),
+        component: 'ExecuteBatch',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'generic-execute',
+    name: 'Generic Execute',
+    description: 'Fallback view for execute operations',
+    priority: 50, // Lower priority than specific views
+    criteria: {
+      functionName: 'execute',
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.litComponent('generic-execute-view'),
+        component: 'generic-execute-view',
+        package: '@lukso/decoder-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@lukso/decoder-rn-views/GenericExecute'
+        ),
+        component: 'GenericExecute',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'custom-contract-specific',
+    name: 'Custom Contract View',
+    description: 'Specialized view for a specific contract',
+    priority: 200, // Higher priority than generic views
+    criteria: {
+      contractAddress: '0x1234567890123456789012345678901234567890',
+      customMatcher: (transaction) => {
+        // Custom logic for complex matching
+        if (!transaction.value) return false
+        return BigInt(transaction.value) > BigInt('1000000000000000000') // > 1 ETH
+      },
+    },
+    frameworks: {
+      lit: {
+        loader: LoaderHelpers.custom(async () => {
+          // Custom loading logic for special cases
+          // This would be a real path in actual implementation
+          return { name: 'SpecialContractView' }
+        }),
+        component: 'special-contract-view',
+        package: '@my-app/custom-web-components',
+      },
+      rn: {
+        loader: LoaderHelpers.rnComponent(
+          '@my-app/custom-rn-views/SpecialContractView'
+        ),
+        component: 'SpecialContractView',
+        package: '@my-app/custom-rn-views',
+      },
+    },
+  },
+
+  {
+    id: 'fallback-transaction',
+    name: 'Generic Transaction View',
+    description:
+      "Fallback view for any transaction that doesn't match specific criteria",
+    priority: 1, // Lowest priority - only matches if nothing else does
+    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'
+        ),
+        component: 'GenericTransaction',
+        package: '@lukso/decoder-rn-views',
+      },
+    },
+  },
+]
+
+/**
+ * Example of how views would be registered at app startup
+ */
+export function registerExampleViews(registry: any) {
+  for (const view of ExampleViews) {
+    registry.register(view)
+  }
+}