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

package/src/examples/vue-to-lit-compilation.ts

@@ -0,0 +1,358 @@
+/**
+ * "Let the developers suffer" - The Compilation Escape Hatch 😈
+ *
+ * If developers really complain about writing Lit components,
+ * we can let them write Vue/React and compile to Lit!
+ *
+ * This gives us the best of both worlds:
+ * - Developers get to write in their preferred framework
+ * - End users get universal web components
+ * - We still only ship ONE implementation per component
+ */
+
+export const VueToLitCompilation = {
+  // Developer writes Vue (comfortable)
+  source: `
+<!-- LSP7Transfer.vue - Developer writes this -->
+<template>
+  <div class="lsp7-transfer">
+    <div class="transfer-flow">
+      <AddressDisplay 
+        :address="transaction.from"
+        :resolved="addressData[transaction.from]"
+        @click="$emit('address-click', transaction.from)"
+      />
+      <div class="arrow">→</div>
+      <AddressDisplay 
+        :address="transaction.to"
+        :resolved="addressData[transaction.to]"
+      />
+    </div>
+
+    <div class="amount">
+      {{ formatAmount(transaction.amount) }} {{ transaction.symbol }}
+    </div>
+
+    <div v-if="showActions" class="actions">
+      <button @click="$emit('reject', transaction)">Reject</button>
+      <button @click="$emit('approve', transaction)">Approve</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTransactionView } from '@lukso/transaction-view-headless'
+
+const props = defineProps(['transaction', 'showActions'])
+const emit = defineEmits(['approve', 'reject', 'address-click'])
+
+const { addressData, formatAmount } = useTransactionView(props.transaction, {
+  framework: 'lit' // Still uses headless system
+})
+</script>
+
+<style scoped>
+.lsp7-transfer { padding: 16px; }
+.transfer-flow { display: flex; align-items: center; gap: 12px; }
+.amount { font-size: 18px; font-weight: bold; }
+</style>`,
+
+  // Build tool compiles to Lit (universal)
+  compiled: `
+// lsp7-transfer-view.ts - Build tool generates this
+import { LitElement, html, css } from 'lit'
+import { customElement, property } 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
+
+  private addressData = {}
+  private formatAmount = (x) => x
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    if (this.transaction) {
+      const viewData = await useTransactionView(this.transaction, {
+        framework: 'lit'
+      })
+      this.addressData = viewData.addressData
+      this.formatAmount = viewData.formatAmount
+      this.requestUpdate()
+    }
+  }
+
+  override render() {
+    return html\`
+      <div class="lsp7-transfer">
+        <div class="transfer-flow">
+          <address-display 
+            .address=\${this.transaction.from}
+            .resolved=\${this.addressData[this.transaction.from]}
+            @click=\${() => this._emit('address-click', this.transaction.from)}
+          ></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._emit('reject', this.transaction)}>
+              Reject
+            </button>
+            <button @click=\${() => this._emit('approve', this.transaction)}>
+              Approve
+            </button>
+          </div>
+        \` : ''}
+      </div>
+    \`
+  }
+
+  static styles = css\`
+    .lsp7-transfer { padding: 16px; }
+    .transfer-flow { display: flex; align-items: center; gap: 12px; }
+    .amount { font-size: 18px; font-weight: bold; }
+  \`
+
+  private _emit(eventName, detail) {
+    this.dispatchEvent(new CustomEvent(eventName, { detail, bubbles: true }))
+  }
+}`,
+}
+
+/**
+ * React to Lit compilation (using existing tools)
+ */
+export const ReactToLitCompilation = {
+  // Developer writes React
+  source: `
+// LSP7Transfer.jsx - Developer writes this
+import { useTransactionView } from '@lukso/transaction-view-headless'
+
+export function LSP7Transfer({ transaction, showActions, onApprove, onReject, onAddressClick }) {
+  const { addressData, formatAmount } = useTransactionView(transaction, {
+    framework: 'lit'
+  })
+
+  return (
+    <div className="lsp7-transfer">
+      <div className="transfer-flow">
+        <AddressDisplay 
+          address={transaction.from}
+          resolved={addressData[transaction.from]}
+          onClick={() => onAddressClick?.(transaction.from)}
+        />
+        <div className="arrow">→</div>
+        <AddressDisplay 
+          address={transaction.to}
+          resolved={addressData[transaction.to]}
+        />
+      </div>
+
+      <div className="amount">
+        {formatAmount(transaction.amount)} {transaction.symbol}
+      </div>
+
+      {showActions && (
+        <div className="actions">
+          <button onClick={() => onReject?.(transaction)}>Reject</button>
+          <button onClick={() => onApprove?.(transaction)}>Approve</button>
+        </div>
+      )}
+    </div>
+  )
+}`,
+
+  // Tools like @lit-labs/react-to-lit could handle compilation
+  compiled: `// Same Lit output as above, but compiled from React`,
+}
+
+/**
+ * Existing tools for compilation approaches
+ */
+export const ExistingTools = {
+  vueToWebComponents: `
+// Vue has built-in web component compilation!
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    output: {
+      libraryTarget: 'system'
+    }
+  }
+}
+
+// Build command
+vue-cli-service build --target lib --name lsp7-transfer src/LSP7Transfer.vue
+
+// Outputs: Custom element that works everywhere!`,
+
+  reactToWebComponents: `
+// Multiple options for React -> Web Components:
+
+// 1. Stencil.js (most mature)
+import { Component, Prop, h } from '@stencil/core'
+
+@Component({ tag: 'lsp7-transfer-view' })
+export class LSP7Transfer {
+  @Prop() transaction: any
+  
+  render() {
+    return <div>...</div> // JSX works in Stencil
+  }
+}
+
+// 2. @lit-labs/react (experimental)
+// 3. Preact with custom elements
+// 4. React 18's upcoming web components support`,
+
+  buildToolIntegration: `
+// Custom build tool integration
+// packages/decoder-web-components/build.config.js
+
+export default {
+  input: {
+    'vue-components': './src/vue/**/*.vue',
+    'react-components': './src/react/**/*.jsx'
+  },
+  
+  plugins: [
+    vueToLit(), // Custom plugin
+    reactToLit(), // Custom plugin
+  ],
+  
+  output: {
+    dir: 'dist/web-components',
+    format: 'es'
+  }
+}
+
+// Result: Universal web components from familiar source code`,
+}
+
+/**
+ * The developer experience strategy
+ */
+export const DeveloperExperienceStrategy = {
+  // Phase 1: Start with Lit (for the brave)
+  phase1: `
+Let experienced developers write Lit directly:
+- Better performance (no compilation overhead)
+- Full control over web component lifecycle
+- Direct access to Shadow DOM features
+- Learning opportunity for modern web standards`,
+
+  // Phase 2: Compilation escape hatch (for the complainers)
+  phase2: `
+If developers really complain:
+- Vue developers can write .vue files
+- React developers can write JSX
+- Build tool compiles to Lit web components
+- Everyone gets the same universal output
+- "You can write Vue, but you're shipping Lit" 😈`,
+
+  // Phase 3: Best of both worlds
+  phase3: `
+Mixed approach:
+- Complex components: Write in Lit (full control)
+- Simple components: Write in Vue/React (faster development)  
+- Build system handles compilation
+- All output universal web components
+- Developers pick their poison per component`,
+}
+
+/**
+ * Package structure with compilation support
+ */
+export const CompilationPackageStructure = `
+packages/
+├── decoder-headless/                    # Business logic
+│
+├── decoder-web-components/              # The universal output
+│   ├── dist/                           # Compiled web components
+│   │   ├── lsp7-transfer-view.js       # Universal web component
+│   │   ├── lsp8-transfer-view.js       # Works in all frameworks
+│   │   └── execute-batch-view.js       # Ships to production
+│   │
+│   ├── src/                            # Source can be mixed!
+│   │   ├── lit/                        # Hand-written Lit (performance-critical)
+│   │   │   └── complex-transaction.ts  # When you need full control
+│   │   ├── vue/                        # Vue source (developer-friendly)
+│   │   │   ├── LSP7Transfer.vue        # Compiled to web component
+│   │   │   └── LSP8Transfer.vue        # Vue DX, Lit output
+│   │   └── react/                      # React source (developer-friendly)
+│   │       └── ExecuteBatch.jsx        # JSX DX, Lit output
+│   │
+│   ├── build.config.js                 # Handles all compilation
+│   └── package.json
+│
+└── decoder-react-native/               # Mobile native (no compilation)
+    └── src/                            # Pure React Native
+        ├── LSP7Transfer.jsx
+        └── ExecuteBatch.jsx
+`
+
+/**
+ * The ultimate developer suffering mitigation strategy 😈
+ */
+export const DeveloperSufferingMitigation = `
+🎭 THE STRATEGY: "Suffer Now, Benefit Later"
+
+Level 1 - The Brave: Write Lit directly
+- Get full control and best performance
+- Learn modern web standards
+- Become web component experts
+- Suffer the learning curve BUT gain superpowers
+
+Level 2 - The Practical: Use compilation
+- Write Vue/React (comfortable)  
+- Build tool outputs Lit (universal)
+- Get universality without the learning curve
+- Slight build complexity but familiar DX
+
+Level 3 - The Lazy: Use existing tools
+- Vue's built-in web component build
+- Stencil for React-like JSX
+- Let tooling handle the suffering
+
+RESULT: 
+- Developers get to choose their suffering level
+- Users always get universal web components  
+- Maintainers only ship one implementation per platform
+- Everyone wins (eventually) 🎉
+
+The suffering is temporary, but the universality is forever! 😈✨
+`
+
+export const Conclusion = `
+🤯 THIS IS ACTUALLY BRILLIANT:
+
+1. Ship universal web components (Lit output)
+2. Let developers write in their preferred framework (Vue/React source)  
+3. Build tools handle the compilation (tooling suffers so humans don't have to)
+4. React Native stays native (mobile optimization)
+5. Everyone gets what they want:
+   - Users: Universal components that work everywhere
+   - Vue devs: Can write .vue files
+   - React devs: Can write JSX  
+   - Maintainers: Only ship 2 implementations
+   - Framework wars: Become irrelevant 😎
+
+The compilation approach gives you the BEST of both worlds:
+- Developer Experience: Write in familiar frameworks
+- User Experience: Universal web components
+- Maintenance Experience: Minimal implementations
+
+Let them write Vue, ship Lit. Let them write React, ship Lit.
+The frameworks become implementation details! 🎭
+`

package/src/hooks/useAddressQuery.ts

@@ -0,0 +1,135 @@
+/**
+ * TanStack Query integration for address resolution
+ * Provides proper cache keys and query functions
+ */
+
+import type { ResolvedAddress } from './useAddressResolution'
+import { resolveAddress, resolveAddresses } from './useAddressResolution'
+
+/**
+ * Create TanStack Query key for address resolution
+ */
+export function getAddressQueryKey(
+  address: string,
+  chainId?: number
+): (string | number)[] {
+  // Include chainId to ensure cache isolation per chain
+  return ['address', address.toLowerCase(), chainId || 'current']
+}
+
+/**
+ * Create TanStack Query key for batch address resolution
+ */
+export function getAddressesQueryKey(
+  addresses: string[],
+  chainId?: number
+): (string | number)[] {
+  // Sort addresses for consistent cache keys
+  const sortedAddresses = [...addresses]
+    .map((addr) => addr.toLowerCase())
+    .sort()
+  return ['addresses', sortedAddresses.join(','), chainId || 'current']
+}
+
+/**
+ * Query function for single address resolution
+ */
+export async function queryAddress({
+  queryKey,
+}: {
+  queryKey: (string | number)[]
+}): Promise<ResolvedAddress> {
+  const [, address, chainIdOrCurrent] = queryKey
+  const chainId =
+    chainIdOrCurrent === 'current' ? undefined : (chainIdOrCurrent as number)
+
+  return resolveAddress(address as string, chainId)
+}
+
+/**
+ * Query function for batch address resolution
+ */
+export async function queryAddresses({
+  queryKey,
+}: {
+  queryKey: (string | number)[]
+}): Promise<Map<string, ResolvedAddress>> {
+  const [, addressesStr, chainIdOrCurrent] = queryKey
+  const chainId =
+    chainIdOrCurrent === 'current' ? undefined : (chainIdOrCurrent as number)
+  const addresses = (addressesStr as string).split(',')
+
+  return resolveAddresses(addresses, chainId)
+}
+
+/**
+ * Helper for React TanStack Query usage
+ */
+export const addressQueryOptions = {
+  /**
+   * Single address query options
+   */
+  single: (address: string, chainId?: number) => ({
+    queryKey: getAddressQueryKey(address, chainId),
+    queryFn: queryAddress,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+  }),
+
+  /**
+   * Batch addresses query options
+   */
+  batch: (addresses: string[], chainId?: number) => ({
+    queryKey: getAddressesQueryKey(addresses, chainId),
+    queryFn: queryAddresses,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 10 * 60 * 1000, // 10 minutes
+  }),
+}
+
+/**
+ * Helper for Vue TanStack Query usage
+ */
+export const addressQueryOptionsVue = {
+  /**
+   * Single address query options for Vue Query
+   */
+  single: (address: string, chainId?: number) => ({
+    queryKey: getAddressQueryKey(address, chainId),
+    queryFn: queryAddress,
+    staleTime: 5 * 60 * 1000,
+    cacheTime: 10 * 60 * 1000, // Vue Query still uses cacheTime
+  }),
+
+  /**
+   * Batch addresses query options for Vue Query
+   */
+  batch: (addresses: string[], chainId?: number) => ({
+    queryKey: getAddressesQueryKey(addresses, chainId),
+    queryFn: queryAddresses,
+    staleTime: 5 * 60 * 1000,
+    cacheTime: 10 * 60 * 1000,
+  }),
+}
+
+/**
+ * Invalidate address cache for a specific chain
+ * Useful when switching chains
+ */
+export function getInvalidateAddressesPattern(
+  chainId?: number
+): (string | number)[] {
+  return ['address', chainId || 'current']
+}
+
+/**
+ * Get all possible query keys for an address across all chains
+ * Useful for invalidating cache when address profile changes
+ */
+export function getAllAddressQueryKeys(address: string): (string | number)[][] {
+  return [
+    ['address', address.toLowerCase(), 'current'],
+    ['address', address.toLowerCase(), 42], // mainnet
+    ['address', address.toLowerCase(), 4201], // testnet
+  ]
+}