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

package/src/examples/lit-plus-rn-strategy.ts

@@ -0,0 +1,448 @@
+/**
+ * The "Crazy" Strategy: Lit + React Native Only
+ *
+ * Why this might actually be genius:
+ * - Lit Web Components work in ANY web framework (Vue, React, Svelte, etc.)
+ * - React Native handles the mobile-native use case
+ * - Only TWO implementations to maintain instead of 4+
+ * - Web Components are framework-agnostic by design
+ */
+
+export const LitPlusRNStrategy = {
+  // The core insight: Web Components are truly universal
+  litUniversality: `
+<!-- Works in vanilla HTML -->
+<lsp7-transfer-view 
+  .transaction="\${transaction}"
+  @approve="\${handleApprove}"
+></lsp7-transfer-view>
+
+<!-- Works in Vue -->
+<template>
+  <lsp7-transfer-view 
+    :transaction="transaction"
+    @approve="handleApprove"
+  />
+</template>
+
+<!-- Works in React -->
+function App() {
+  return (
+    <lsp7-transfer-view 
+      ref={el => el.transaction = transaction}
+      onApprove={handleApprove}
+    />
+  )
+}
+
+<!-- Works in Svelte -->
+<lsp7-transfer-view 
+  transaction={transaction}
+  on:approve={handleApprove}
+/>
+
+<!-- Works in Angular -->
+<lsp7-transfer-view 
+  [transaction]="transaction"
+  (approve)="handleApprove($event)"
+></lsp7-transfer-view>`,
+
+  // React Native stays separate (it has to)
+  reactNativeReality: `
+// React Native - still needs its own implementation
+import { View, Text, TouchableOpacity } from rn
+
+export function LSP7Transfer({ transaction, onApprove }) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.amount}>
+        {transaction.amount} {transaction.symbol}  
+      </Text>
+      <TouchableOpacity onPress={() => onApprove(transaction)}>
+        <Text>Approve</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+// This can't be a web component - different runtime entirely
+`,
+}
+
+/**
+ * Package structure: Simplified to just 2 implementations
+ */
+export const SimplifiedPackageStructure = `
+packages/
+├── decoder-headless/              # Framework-agnostic business logic ⭐
+├── decoder-web-components/        # Lit Web Components (works everywhere on web) 🌐
+└── decoder-react-native/          # React Native components (mobile only) 📱
+
+That's it! Just 3 packages instead of 5+.
+`
+
+/**
+ * How each web framework would use Lit components
+ */
+export const WebFrameworkIntegration = {
+  vue: `
+<!-- Vue: Just use the web component -->
+<template>
+  <div class="transaction-view">
+    <lsp7-transfer-view 
+      :transaction="transaction"
+      :show-actions="showActions"
+      @approve="handleApprove"
+      @reject="handleReject"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@lukso/decoder-web-components' // Registers all components
+
+const props = defineProps(['transaction', 'showActions'])
+const emit = defineEmits(['approve', 'reject'])
+
+const handleApprove = (event) => emit('approve', event.detail)
+const handleReject = (event) => emit('reject', event.detail)
+</script>
+
+<!-- Vue developers barely notice it's a web component! -->`,
+
+  react: `
+// React: Use web component with proper event binding
+import { useRef, useEffect } from 'react'
+import '@lukso/decoder-web-components'
+
+export function TransactionView({ transaction, showActions, onApprove, onReject }) {
+  const elementRef = useRef(null)
+
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    // Set complex properties via JS (not HTML attributes)
+    element.transaction = transaction
+    element.showActions = showActions
+
+    // Listen to custom events
+    const handleApprove = (e) => onApprove?.(e.detail)
+    const handleReject = (e) => onReject?.(e.detail)
+
+    element.addEventListener('approve', handleApprove)
+    element.addEventListener('reject', handleReject)
+
+    return () => {
+      element.removeEventListener('approve', handleApprove)
+      element.removeEventListener('reject', handleReject)
+    }
+  }, [transaction, showActions, onApprove, onReject])
+
+  return <lsp7-transfer-view ref={elementRef} />
+}
+
+// Or use a React wrapper library like @lit-labs/react`,
+
+  reactWithWrapper: `
+// Even better: Use @lit-labs/react for automatic wrapping
+import { createComponent } from '@lit-labs/react'
+import { LSP7TransferView } from '@lukso/decoder-web-components'
+
+// Automatically generates React wrapper with proper TypeScript
+export const LSP7Transfer = createComponent({
+  tagName: 'lsp7-transfer-view',
+  elementClass: LSP7TransferView,
+  react: React,
+  events: {
+    onApprove: 'approve',
+    onReject: 'reject'
+  }
+})
+
+// Now use like a normal React component:
+<LSP7Transfer 
+  transaction={transaction}
+  showActions={showActions}
+  onApprove={handleApprove}
+  onReject={handleReject}
+/>`,
+
+  svelte: `
+<!-- Svelte: Web components just work -->
+<script>
+  import '@lukso/decoder-web-components'
+  
+  export let transaction
+  export let showActions = false
+  
+  function handleApprove(event) {
+    console.log('Approved:', event.detail)
+  }
+</script>
+
+<lsp7-transfer-view 
+  {transaction}
+  {showActions}
+  on:approve={handleApprove}
+/>
+
+<!-- Svelte has excellent web component support -->`,
+
+  angular: `
+// Angular: Register web components in module
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import '@lukso/decoder-web-components'
+
+@Component({
+  template: \`
+    <lsp7-transfer-view 
+      [transaction]="transaction"
+      [showActions]="showActions"
+      (approve)="handleApprove($event)"
+      (reject)="handleReject($event)"
+    ></lsp7-transfer-view>
+  \`,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TransactionComponent {
+  // Angular treats web components as first-class citizens
+}`,
+}
+
+/**
+ * The Lit implementation - write once, run everywhere (on web)
+ */
+export const LitImplementation = `
+// lsp7-transfer-view.ts - The ONE web implementation
+import { LitElement, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { useTransactionView } from '@lukso/transaction-view-headless'
+
+@customElement('lsp7-transfer-view')
+export class LSP7TransferView extends LitElement {
+  @property({ type: Object }) transaction = null
+  @property({ type: Boolean }) showActions = false
+  @property({ type: String }) context = 'detail'
+
+  @state() private addressData = {}
+  @state() private isLoading = true
+  @state() private formatAmount = (x) => x
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    
+    if (this.transaction) {
+      await this.loadTransactionData()
+    }
+  }
+
+  override async updated(changedProperties) {
+    if (changedProperties.has('transaction') && this.transaction) {
+      await this.loadTransactionData()
+    }
+  }
+
+  private async loadTransactionData() {
+    this.isLoading = true
+    
+    try {
+      const viewData = await useTransactionView(this.transaction, {
+        framework: 'lit',
+        context: this.context
+      })
+      
+      this.addressData = viewData.addressData
+      this.formatAmount = viewData.formatAmount
+    } finally {
+      this.isLoading = false
+    }
+  }
+
+  override render() {
+    if (this.isLoading) {
+      return html\`<div class="loading">Loading transaction...</div>\`
+    }
+
+    return html\`
+      <div class="lsp7-transfer">
+        <div class="transfer-flow">
+          <address-display 
+            .address=\${this.transaction.from}
+            .resolved=\${this.addressData[this.transaction.from]}
+            @click=\${this._onAddressClick}
+          ></address-display>
+          
+          <div class="arrow">→</div>
+          
+          <address-display 
+            .address=\${this.transaction.to}
+            .resolved=\${this.addressData[this.transaction.to]}
+          ></address-display>
+        </div>
+
+        <div class="amount">
+          \${this.formatAmount(this.transaction.amount)} \${this.transaction.symbol}
+        </div>
+
+        \${this.showActions ? html\`
+          <div class="actions">
+            <button @click=\${this._onReject} class="reject-btn">
+              Reject
+            </button>
+            <button @click=\${this._onApprove} class="approve-btn">
+              Approve
+            </button>
+          </div>
+        \` : ''}
+      </div>
+    \`
+  }
+
+  static styles = css\`
+    :host {
+      display: block;
+      padding: 16px;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+    }
+
+    .transfer-flow {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .amount {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+
+    .actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    button {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .approve-btn {
+      background: #4caf50;
+      color: white;
+    }
+
+    .reject-btn {
+      background: #f44336;
+      color: white;
+    }
+  \`
+
+  private _onApprove() {
+    this.dispatchEvent(new CustomEvent('approve', {
+      detail: this.transaction,
+      bubbles: true
+    }))
+  }
+
+  private _onReject() {
+    this.dispatchEvent(new CustomEvent('reject', {
+      detail: this.transaction,
+      bubbles: true
+    }))
+  }
+
+  private _onAddressClick(event) {
+    this.dispatchEvent(new CustomEvent('address-click', {
+      detail: event.detail,
+      bubbles: true
+    }))
+  }
+}`
+
+/**
+ * Benefits of this "crazy" approach
+ */
+export const Benefits = [
+  '✅ Write web UI once, works in ALL web frameworks',
+  '✅ Only 2 implementations to maintain (Lit + RN)',
+  '✅ Future-proof - new web frameworks automatically supported',
+  '✅ Better performance - native web components',
+  '✅ No framework lock-in for web usage',
+  '✅ All business logic still shared via headless',
+  '✅ Shadow DOM provides true style encapsulation',
+  '✅ Can be used in micro-frontends easily',
+]
+
+/**
+ * Potential concerns and solutions
+ */
+export const ConcernsAndSolutions = {
+  concern1: {
+    issue: 'React developers might not like web components',
+    solution: `Use @lit-labs/react for seamless React integration:
+    
+    import { LSP7Transfer } from '@lukso/decoder-react-wrappers'
+    
+    // Feels like a normal React component
+    <LSP7Transfer transaction={tx} onApprove={handleApprove} />`,
+  },
+
+  concern2: {
+    issue: 'TypeScript integration might be tricky',
+    solution: `Generate TypeScript declarations for all web components:
+    
+    // Generated types
+    declare global {
+      namespace JSX {
+        interface IntrinsicElements {
+          'lsp7-transfer-view': LSP7TransferViewProps
+        }
+      }
+    }`,
+  },
+
+  concern3: {
+    issue: 'Bundle size concerns',
+    solution: `Tree shake unused components:
+    
+    // Only import what you need
+    import '@lukso/decoder-web-components/lsp7-transfer-view'
+    
+    // Not the entire component library`,
+  },
+
+  concern4: {
+    issue: 'Framework-specific styling integration',
+    solution: `CSS custom properties for theming:
+    
+    lsp7-transfer-view {
+      --primary-color: var(--vue-primary, #42b883);
+      --border-radius: var(--app-border-radius, 8px);
+    }`,
+  },
+}
+
+export const Conclusion = `
+🤯 This "crazy" idea might actually be GENIUS:
+
+Instead of maintaining 4+ framework implementations:
+- ✅ 1 Lit implementation (works in Vue, React, Svelte, Angular, vanilla)
+- ✅ 1 React Native implementation (mobile)
+- ✅ 1 headless system (shared business logic)
+
+Total: 3 packages instead of 5+
+
+The web components approach gives you TRUE framework universality,
+not the fake kind where you're fighting against each framework's quirks.
+
+And React Native gets its own native-optimized implementation because
+mobile deserves better than web-in-a-box.
+
+This might be the perfect balance of code reuse and platform optimization! 🎯
+`

package/src/examples/lsp7-custom-matcher-examples.ts

@@ -0,0 +1,174 @@
+import { LoaderHelpers } from '../registry/view-loader'
+import type { ViewDefinition } from '../types/view-matching'
+
+/**
+ * Example view definitions demonstrating custom matcher usage for LSP7 tokens.
+ * These examples show how to distinguish between different LSP7 token types
+ * (Token vs NFT vs Collection) using the result.custom metadata populated
+ * by the LSP7 enhancer.
+ */
+
+/**
+ * View for LSP7 Token transfers (tokenType === 0)
+ * Displays token-specific UI with amount, balance, etc.
+ */
+export const LSP7TokenTransferView: ViewDefinition = {
+  id: 'lsp7-token-transfer',
+  name: 'LSP7 Token Transfer',
+  description: 'Optimized view for fungible LSP7 token transfers',
+  priority: 100,
+  criteria: {
+    standard: 'LSP7',
+    functionName: 'transfer',
+    customMatcher: (tx) => {
+      let matches = 0
+      // Check if it's a token (tokenType === 0)
+      if (tx.custom?.tokenType === 0) matches++
+      if (tx.custom?.isToken === true) matches++
+      return matches
+    },
+  },
+  frameworks: {
+    lit: {
+      loader: LoaderHelpers.litComponent('lsp7-token-transfer-view'),
+      component: 'lsp7-token-transfer-view',
+      package: '@lukso/transaction-view-components',
+    },
+  },
+}
+
+/**
+ * View for LSP7 NFT transfers (tokenType === 1)
+ * Displays NFT-specific UI with collectible metadata
+ */
+export const LSP7NFTTransferView: ViewDefinition = {
+  id: 'lsp7-nft-transfer',
+  name: 'LSP7 NFT Transfer',
+  description: 'Optimized view for LSP7 NFT/collectible transfers',
+  priority: 100,
+  criteria: {
+    standard: 'LSP7',
+    functionName: 'transfer',
+    customMatcher: (tx) => {
+      let matches = 0
+      // Check if it's an NFT (tokenType === 1)
+      if (tx.custom?.tokenType === 1) matches++
+      if (tx.custom?.isNFT === true) matches++
+      return matches
+    },
+  },
+  frameworks: {
+    lit: {
+      loader: LoaderHelpers.litComponent('lsp7-nft-transfer-view'),
+      component: 'lsp7-nft-transfer-view',
+      package: '@lukso/transaction-view-components',
+    },
+  },
+}
+
+/**
+ * View for LSP7 Collection transfers (tokenType === 2)
+ * Displays collection-specific UI
+ */
+export const LSP7CollectionTransferView: ViewDefinition = {
+  id: 'lsp7-collection-transfer',
+  name: 'LSP7 Collection Transfer',
+  description: 'Optimized view for LSP7 collection transfers',
+  priority: 100,
+  criteria: {
+    standard: 'LSP7',
+    functionName: 'transfer',
+    customMatcher: (tx) => {
+      let matches = 0
+      // Check if it's a collection (tokenType === 2)
+      if (tx.custom?.tokenType === 2) matches++
+      if (tx.custom?.isCollection === true) matches++
+      return matches
+    },
+  },
+  frameworks: {
+    lit: {
+      loader: LoaderHelpers.litComponent('lsp7-collection-transfer-view'),
+      component: 'lsp7-collection-transfer-view',
+      package: '@lukso/transaction-view-components',
+    },
+  },
+}
+
+/**
+ * Generic fallback view for LSP7 transfers without metadata
+ * This will match when the custom metadata is not available or
+ * when none of the specific views match.
+ */
+export const LSP7GenericTransferView: ViewDefinition = {
+  id: 'lsp7-generic-transfer',
+  name: 'LSP7 Transfer',
+  description: 'Generic view for LSP7 transfers (fallback)',
+  priority: 50, // Lower priority than specific views
+  criteria: {
+    standard: 'LSP7',
+    functionName: 'transfer',
+    // No customMatcher - matches all LSP7 transfers regardless of metadata
+  },
+  frameworks: {
+    lit: {
+      loader: LoaderHelpers.litComponent('lsp7-transfer-view'),
+      component: 'lsp7-transfer-view',
+      package: '@lukso/transaction-view-components',
+    },
+  },
+}
+
+/**
+ * Example of combining multiple criteria with custom matching
+ * This view matches large token transfers (> 1000 units) to a specific contract
+ */
+export const LSP7LargeTokenTransferView: ViewDefinition = {
+  id: 'lsp7-large-token-transfer',
+  name: 'LSP7 Large Token Transfer',
+  description: 'Special view for large token transfers',
+  priority: 150, // Higher priority than generic token transfer view
+  criteria: {
+    standard: 'LSP7',
+    functionName: 'transfer',
+    customMatcher: (tx) => {
+      let matches = 0
+
+      // Must be a token
+      if (tx.custom?.isToken === true) matches++
+
+      // Check if transfer amount is large (> 1000 tokens)
+      // Assuming amount is stored in args[2] or a specific field
+      const amount = tx.args?.[2]?.value as bigint | undefined
+      if (amount && amount > BigInt('1000000000000000000000')) {
+        // > 1000 tokens (18 decimals)
+        matches++
+      }
+
+      // Additional criteria can be added
+      if (tx.value && BigInt(tx.value) > 0) {
+        matches++ // Has native token value attached
+      }
+
+      return matches
+    },
+  },
+  frameworks: {
+    lit: {
+      loader: LoaderHelpers.litComponent('lsp7-large-transfer-view'),
+      component: 'lsp7-large-transfer-view',
+      package: '@lukso/transaction-view-components',
+    },
+  },
+}
+
+/**
+ * All LSP7 custom matcher examples
+ */
+export const LSP7CustomMatcherExamples: ViewDefinition[] = [
+  LSP7TokenTransferView,
+  LSP7NFTTransferView,
+  LSP7CollectionTransferView,
+  LSP7GenericTransferView,
+  LSP7LargeTokenTransferView,
+]