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

package/COMPONENT_CONVERSION_ANALYSIS.md

@@ -0,0 +1,371 @@
+# Vue to Lit + React Native Component Conversion Analysis
+
+## Current Vue Component Architecture Analysis
+
+### Transaction Components (`components/transactions/`)
+
+**Main Transaction Views:**
+- `LSP7Transfer.vue` - Token transfer view
+- `LSP8Transfer.vue` - NFT transfer view  
+- `SetData.vue` - Data setting operations
+- `SetDataBatch.vue` - Batch data operations
+- Plus ~15 other transaction types
+
+**Transaction Helpers (`TransactionIFrame/helpers/`):**
+- `DigitalAssetInfo.vue` - Asset card with image, name, amount
+- `AddressBox.vue` - Address display boxes
+- `TokenBalance.vue` - Token amount formatting
+- `Title.vue` - Transaction titles with icons
+- `BackPanelAsset.vue` - Expandable asset details
+
+### Shared Components (`components/shared/`)
+
+**Core Display Components:**
+- `AddressView.vue` - Universal address display with profiles
+- `FormattedTokenAmount.vue` - Smart token amount formatting
+- `ProfileCard.vue` - Universal Profile cards
+- `Picture.vue` - Image handling with fallbacks
+- `UserName.vue` - Profile name display
+
+**UI Components:**
+- `Button.vue`, `IconButton.vue` - Buttons
+- `Tooltip/` - Tooltip system
+- `Modal/` - Modal dialogs
+- `Spinner.vue`, `Skeleton.vue` - Loading states
+- `SvgIcon.vue` - Icon system
+
+## Key Architectural Patterns Identified
+
+### 1. **LUKSO Web Components Integration**
+```vue
+<!-- Current: Vue wraps LUKSO web components -->
+<lukso-profile 
+  :profile-address="address"
+  :profile-url="image?.src"
+  size="x-small"
+  has-identicon
+/>
+<lukso-username 
+  :name="name"
+  :address="address"
+  max-width="500"
+/>
+```
+
+### 2. **Complex Async Data Loading**
+```javascript
+// Current: Vue composables with async image loading
+const assetImage = computedAsync(async () => {
+  const imageGroup = props.address?.images?.[0] || []
+  return await getImage(imageGroup, { width: 120, height: 120 })
+})
+```
+
+### 3. **Business Logic Dependencies**
+- Heavy reliance on `~/lib/decoder/types`
+- GraphQL image resolution via `~/lib/graphql`
+- Token conversion utilities
+- Profile/asset data models
+
+### 4. **Styling System**
+- SCSS with design system variables (`var(--neutral-90)`)
+- Typography mixins (`@extend %paragraph-inter-12-medium`)
+- Responsive design patterns
+
+## Conversion Strategy
+
+### Phase 1: Extract Business Logic to decoder-headless
+
+**Move to decoder-headless composables:**
+```typescript
+// @lukso/transaction-view-headless/src/composables/use-asset-info.ts
+export function useAssetInfo(address: string) {
+  // Extract image loading, profile resolution, etc.
+  return {
+    assetImage: async () => getImage(...),
+    profileData: async () => resolveProfile(...),
+    tokenMetadata: async () => getTokenMetadata(...)
+  }
+}
+```
+
+**Benefits:**
+- ✅ Shared between Lit and React Native
+- ✅ Framework-agnostic business logic
+- ✅ Consistent data handling
+
+### Phase 2: Lit Component Conversion
+
+**Transaction Views → Lit Components:**
+```typescript
+// @lukso/decoder-web-components/src/lsp7-transfer-view.ts
+@customElement('lsp7-transfer-view')
+export class LSP7TransferView extends LitElement {
+  @property({ type: Object }) transaction!: DecoderResult
+  @property({ type: Boolean }) showActions = false
+  @property({ type: String }) context = 'detail'
+
+  private assetInfo = new TaskController(this, {
+    task: ([transaction]) => this.loadAssetInfo(transaction),
+    args: () => [this.transaction]
+  })
+
+  render() {
+    return html`
+      <div class="lsp7-transfer">
+        <transaction-title title="Transfer Token" icon="transfer">
+          <div class="lsp-tag">LSP7-DigitalAsset</div>
+        </transaction-title>
+        
+        <digital-asset-info
+          .transaction=${this.transaction}
+          .assetData=${this.assetInfo.value}
+          @toggle-panel=${this.handleTogglePanel}
+        ></digital-asset-info>
+        
+        ${this.showActions ? html`
+          <div class="actions">
+            <button @click=${this.handleReject}>Reject</button>
+            <button @click=${this.handleApprove}>Approve</button>
+          </div>
+        ` : ''}
+      </div>
+    `
+  }
+}
+```
+
+**Shared Components → Lit Components:**
+```typescript
+// @lukso/decoder-web-components/src/shared/address-display.ts
+@customElement('address-display')
+export class AddressDisplay extends LitElement {
+  @property() address!: string
+  @property({ type: Object }) resolved?: ProfileData
+  @property({ type: Boolean }) hasSquareIcon = false
+  @property({ type: String }) size = 'small'
+
+  render() {
+    return html`
+      <div class="address-display">
+        <lukso-profile 
+          profile-address=${this.address}
+          profile-url=${this.resolved?.image?.src}
+          size=${this.size}
+          has-identicon
+          ?is-square=${this.hasSquareIcon}
+        ></lukso-profile>
+        <lukso-username
+          name=${this.resolved?.name || 'Anonymous'}
+          address=${this.address}
+          max-width="200"
+          size=${this.size}
+        ></lukso-username>
+      </div>
+    `
+  }
+}
+```
+
+### Phase 3: React Native Component Conversion
+
+**Transaction Views → React Native:**
+```tsx
+// @lukso/decoder-rn-views/src/LSP7Transfer.tsx
+export function LSP7Transfer({ 
+  transaction, 
+  showActions = false,
+  onApprove,
+  onReject 
+}: LSP7TransferProps) {
+  const { assetImage, profileData, isLoading } = useAssetInfo(transaction)
+
+  return (
+    <View style={styles.container}>
+      <TransactionTitle 
+        title="Transfer Token" 
+        icon="transfer"
+        tag="LSP7-DigitalAsset"
+      />
+      
+      <DigitalAssetInfo
+        transaction={transaction}
+        assetData={assetImage}
+        profileData={profileData}
+        isLoading={isLoading}
+        onTogglePanel={handleTogglePanel}
+      />
+      
+      {showActions && (
+        <View style={styles.actions}>
+          <Button variant="secondary" onPress={onReject}>
+            Reject
+          </Button>
+          <Button variant="primary" onPress={onApprove}>
+            Approve
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+}
+```
+
+**Shared Components → React Native:**
+```tsx
+// @lukso/decoder-rn-views/src/shared/AddressDisplay.tsx  
+export function AddressDisplay({
+  address,
+  resolved,
+  hasSquareIcon = false,
+  size = 'small',
+  onPress
+}: AddressDisplayProps) {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <ProfileImage 
+        address={address}
+        imageUrl={resolved?.image?.src}
+        size={size}
+        hasSquareIcon={hasSquareIcon}
+      />
+      <Text style={[styles.name, sizeStyles[size]]}>
+        {resolved?.name || 'Anonymous'}
+      </Text>
+      <Text style={[styles.address, sizeStyles[size]]}>
+        {formatAddress(address)}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+```
+
+## Component Dependency Analysis
+
+### Critical Shared Dependencies
+
+**1. LUKSO Web Components (`@lukso/web-components`)**
+- Used extensively in Vue components
+- Need Lit equivalents: `<lukso-profile>`, `<lukso-username>`
+- React Native needs native replacements
+
+**2. Image Processing System**
+- `getImage()` with width/height/dpr optimization
+- IPFS image resolution
+- Fallback handling for missing images
+
+**3. Token Amount Formatting**
+- Complex BigNumber calculations
+- Locale-aware formatting
+- Special handling for LYX/LYXt
+- Tooltip for truncated values
+
+**4. Profile/Asset Resolution**
+- GraphQL queries for metadata
+- Universal Profile data structure
+- Asset metadata (LSP4, LSP8)
+
+### Component Conversion Priority
+
+**High Priority (Core Transaction Views):**
+1. `LSP7Transfer` - Most common transaction
+2. `LSP8Transfer` - NFT transfers
+3. `SetData` - Universal Profile updates
+4. `ExecuteBatch` - Complex transactions
+5. `GenericTransaction` - Fallback view
+
+**Medium Priority (Shared Components):**
+1. `AddressDisplay` - Universal address component
+2. `DigitalAssetInfo` - Asset information card
+3. `FormattedTokenAmount` - Token amount display
+4. `TransactionTitle` - Standard transaction headers
+5. `ProfileImage` - Profile avatar handling
+
+**Low Priority (UI Components):**
+1. `Button`, `IconButton` - Basic UI elements
+2. `Tooltip`, `Modal` - Interaction components
+3. `Spinner`, `Skeleton` - Loading states
+4. `SvgIcon` - Icon system
+
+## Migration Challenges & Solutions
+
+### Challenge 1: LUKSO Web Components Dependency
+**Problem:** Vue components heavily use `@lukso/web-components`
+**Solution:** 
+- Lit: Continue using LUKSO web components (compatible)
+- React Native: Implement native equivalents (`ProfileImage`, `UserName`)
+
+### Challenge 2: Complex Async Data Loading
+**Problem:** `computedAsync` and Vue reactivity for data fetching
+**Solution:**
+- Move to decoder-headless composables
+- Lit: Use `@lit/task` for async operations
+- React Native: Use standard React hooks (`useEffect`, `useState`)
+
+### Challenge 3: Styling System Migration
+**Problem:** SCSS variables and mixins
+**Solution:**
+- Lit: Convert to CSS custom properties and CSS-in-JS
+- React Native: Create StyleSheet equivalents
+
+### Challenge 4: Business Logic Extraction
+**Problem:** Vue components have embedded business logic
+**Solution:**
+- Extract to decoder-headless composables
+- Components become pure presentation layer
+- Shared logic between Lit and React Native
+
+## Implementation Roadmap
+
+### Week 1-2: Business Logic Extraction
+- [ ] Extract image loading to `useImageLoader`
+- [ ] Extract profile resolution to `useProfileResolver`  
+- [ ] Extract token formatting to `useTokenFormatter`
+- [ ] Extract transaction parsing to `useTransactionParser`
+
+### Week 3-4: Lit Components (Transaction Views)
+- [ ] `lsp7-transfer-view`
+- [ ] `lsp8-transfer-view`
+- [ ] `set-data-view`
+- [ ] `execute-batch-view`
+- [ ] `generic-transaction-view`
+
+### Week 5-6: Lit Components (Shared)
+- [ ] `address-display`
+- [ ] `digital-asset-info`
+- [ ] `formatted-token-amount`
+- [ ] `transaction-title`
+- [ ] `profile-image`
+
+### Week 7-8: React Native Components (Transaction Views)
+- [ ] `LSP7Transfer`
+- [ ] `LSP8Transfer`
+- [ ] `SetData`
+- [ ] `ExecuteBatch`
+- [ ] `GenericTransaction`
+
+### Week 9-10: React Native Components (Shared)
+- [ ] `AddressDisplay`
+- [ ] `DigitalAssetInfo`
+- [ ] `FormattedTokenAmount`
+- [ ] `TransactionTitle`
+- [ ] `ProfileImage`
+
+## Success Metrics
+
+1. **Functionality Parity**: All Vue component features replicated
+2. **Performance**: Lit components load <100ms, RN components <50ms render
+3. **Bundle Size**: Lit components <50KB gzipped per component
+4. **Type Safety**: 100% TypeScript coverage
+5. **Test Coverage**: >90% for business logic, >80% for components
+
+## Conclusion
+
+The Vue components provide an excellent template for the Lit and React Native implementations. The key to success is:
+
+1. **Extract business logic first** - Move complex data fetching to decoder-headless
+2. **Preserve component interfaces** - Same props/events between frameworks
+3. **Maintain LUKSO compatibility** - Continue using LUKSO web components where possible
+4. **Progressive migration** - Start with core transaction views, add shared components as needed
+
+The existing Vue components are well-structured and will convert cleanly to our optimized architecture! 🎯