@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/src/components/description-view.ts

@@ -0,0 +1,605 @@
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { when } from 'lit/directives/when.js'
+import { safeCustomElement } from '../shared/safe-custom-element'
+
+// Import the EnhancedInfo type from the decoder package
+type EnhancedInfo = {
+  address: `0x${string}`
+  standard?: string
+  tokenId?: `0x${string}`
+  name?: string
+  __gqltype?: 'Profile' | 'Asset' | 'Token'
+  [key: string]: unknown
+}
+
+export interface TransactionInfo {
+  /** Transaction hash */
+  hash?: string
+  /** Block number */
+  blockNumber?: bigint | string
+  /** Block timestamp */
+  timestamp?: bigint | string | Date
+  /** Gas used */
+  gasUsed?: bigint | string
+  /** Gas price */
+  gasPrice?: bigint | string
+  /** Transaction status */
+  status?: 'success' | 'failed' | 'pending'
+  /** Network/chain name */
+  network?: string
+}
+
+export interface DescriptionItem {
+  /** Label for the description item */
+  label: string
+  /** Value to display */
+  value: string
+  /** Optional secondary value or subtitle */
+  subtitle?: string
+  /** Whether this item is highlighted */
+  highlighted?: boolean
+  /** Whether to show copy button */
+  copyable?: boolean
+  /** Custom icon for this item */
+  icon?: string
+  /** Link URL if this item should be clickable */
+  link?: string
+}
+
+export interface DescriptionViewData {
+  /** Main title/heading */
+  title?: string
+  /** Main description text */
+  description?: string
+  /** Address key (format: "ADDRESS" or "ADDRESS-TOKENID") */
+  address?: string
+  /** Value being transferred */
+  value?: bigint | string
+  /** Raw transaction object */
+  transaction?: any // DecoderResult type from decoder package
+  /** Enhanced info from decoder (contains metadata) */
+  enhancedInfo?: EnhancedInfo
+  /** Transaction-specific information */
+  transactionInfo?: TransactionInfo
+  /** Additional custom items to display */
+  customItems?: DescriptionItem[]
+  /** Transaction type for styling */
+  type?: 'transfer' | 'mint' | 'burn' | 'approve' | 'execute' | 'deploy'
+  /** Loading state */
+  loading?: boolean
+}
+
+/**
+ * Description view component for displaying transaction details and metadata
+ * Provides flexible key-value display with support for various transaction types
+ */
+@safeCustomElement('description-view')
+export class DescriptionView extends LitElement {
+  @property({ type: Object })
+  data: DescriptionViewData = {}
+
+  @property({ type: String })
+  variant: 'default' | 'compact' | 'detailed' = 'default'
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    .description-container {
+      background: white;
+      border-radius: 12px;
+      padding: 16px;
+      border: 1px solid #e5e7eb;
+    }
+
+    .compact .description-container {
+      padding: 12px;
+      border-radius: 8px;
+    }
+
+    .detailed .description-container {
+      padding: 20px;
+      border-radius: 16px;
+    }
+
+    .header {
+      margin-bottom: 16px;
+    }
+
+    .compact .header {
+      margin-bottom: 12px;
+    }
+
+    .detailed .header {
+      margin-bottom: 20px;
+    }
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0 0 8px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .compact .title {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+
+    .detailed .title {
+      font-size: 18px;
+      margin-bottom: 12px;
+    }
+
+    .type-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .type-badge.transfer {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    .type-badge.mint {
+      background: #d1fae5;
+      color: #059669;
+    }
+
+    .type-badge.burn {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+
+    .type-badge.approve {
+      background: #fef3c7;
+      color: #d97706;
+    }
+
+    .type-badge.execute {
+      background: #e0e7ff;
+      color: #4338ca;
+    }
+
+    .type-badge.deploy {
+      background: #f3e8ff;
+      color: #7c3aed;
+    }
+
+    .description {
+      font-size: 14px;
+      line-height: 1.5;
+      color: #6b7280;
+      margin: 0;
+    }
+
+    .compact .description {
+      font-size: 13px;
+    }
+
+    .detailed .description {
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .items-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .compact .items-list {
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .detailed .items-list {
+      gap: 16px;
+      margin-top: 20px;
+    }
+
+    .description-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 12px;
+      background: #f9fafb;
+      border-radius: 8px;
+      border: 1px solid #e5e7eb;
+      transition: all 0.2s ease;
+    }
+
+    .compact .description-item {
+      padding: 8px;
+      border-radius: 6px;
+    }
+
+    .detailed .description-item {
+      padding: 16px;
+      border-radius: 12px;
+    }
+
+    .description-item.highlighted {
+      background: #eff6ff;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+    }
+
+    .description-item.clickable {
+      cursor: pointer;
+    }
+
+    .description-item.clickable:hover {
+      background: #f3f4f6;
+      border-color: #d1d5db;
+    }
+
+    .description-item.highlighted.clickable:hover {
+      background: #dbeafe;
+    }
+
+    .item-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #374151;
+      flex-shrink: 0;
+      min-width: 0;
+    }
+
+    .compact .item-label {
+      font-size: 12px;
+      gap: 6px;
+    }
+
+    .detailed .item-label {
+      font-size: 14px;
+    }
+
+    .item-icon {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .item-value-section {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+      min-width: 0;
+      flex: 1;
+      margin-left: 12px;
+    }
+
+    .item-value {
+      font-size: 14px;
+      font-weight: 500;
+      color: #111827;
+      word-break: break-all;
+      text-align: right;
+    }
+
+    .compact .item-value {
+      font-size: 13px;
+    }
+
+    .detailed .item-value {
+      font-size: 15px;
+    }
+
+    .item-subtitle {
+      font-size: 12px;
+      color: #6b7280;
+      text-align: right;
+    }
+
+    .compact .item-subtitle {
+      font-size: 11px;
+    }
+
+    .item-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 8px;
+    }
+
+    .copy-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #6b7280;
+      transition: all 0.2s ease;
+      font-size: 14px;
+    }
+
+    .copy-button:hover {
+      background-color: #e5e7eb;
+      color: #374151;
+    }
+
+    .external-link {
+      color: #3b82f6;
+      text-decoration: none;
+      font-size: 14px;
+    }
+
+    .external-link:hover {
+      text-decoration: underline;
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 20px;
+      color: #6b7280;
+    }
+
+    .loading-spinner {
+      font-size: 24px;
+      margin-bottom: 12px;
+    }
+
+    .loading-text {
+      font-size: 14px;
+    }
+  `
+
+  private _copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text)
+      this.dispatchEvent(
+        new CustomEvent('copied', {
+          detail: { text },
+        })
+      )
+    }
+  }
+
+  private _handleItemClick(item: DescriptionItem) {
+    if (item.link) {
+      window.open(item.link, '_blank', 'noopener,noreferrer')
+    }
+    this.dispatchEvent(
+      new CustomEvent('item-click', {
+        detail: { item },
+      })
+    )
+  }
+
+  private _renderHeader() {
+    if (!this.data.title && !this.data.description && !this.data.type) return ''
+
+    return html`
+      <div class="header">
+        ${when(
+          this.data.title,
+          () => html`
+            <h2 class="title">
+              ${this.data.title}
+              ${when(
+                this.data.type,
+                () => html`
+                  <span class="type-badge ${this.data.type}">
+                    ${this.data.type}
+                  </span>
+                `
+              )}
+            </h2>
+          `
+        )}
+        
+        ${when(
+          this.data.description,
+          () => html`
+            <p class="description">${this.data.description}</p>
+          `
+        )}
+      </div>
+    `
+  }
+
+  private _renderItems() {
+    // Build items from various data sources
+    const items: DescriptionItem[] = []
+
+    // Add address information
+    if (this.data.address) {
+      const [contractAddress, tokenId] = this.data.address.split('-')
+
+      items.push({
+        label: 'Contract Address',
+        value: contractAddress,
+        icon: '📄',
+        copyable: true,
+      })
+
+      if (tokenId) {
+        items.push({
+          label: 'Token ID',
+          value: `#${tokenId}`,
+          subtitle: tokenId,
+          icon: '🏷️',
+          copyable: true,
+        })
+      }
+    }
+
+    // Add value information
+    if (this.data.value) {
+      items.push({
+        label: 'Amount',
+        value: this.data.value.toString(),
+        icon: '💰',
+        highlighted: true,
+      })
+    }
+
+    // Add transaction information
+    if (this.data.transactionInfo) {
+      const txInfo = this.data.transactionInfo
+
+      if (txInfo.hash) {
+        items.push({
+          label: 'Transaction Hash',
+          value: txInfo.hash,
+          icon: '🔗',
+          copyable: true,
+        })
+      }
+
+      if (txInfo.blockNumber) {
+        items.push({
+          label: 'Block Number',
+          value: txInfo.blockNumber.toString(),
+          icon: '🧱',
+        })
+      }
+
+      if (txInfo.status) {
+        items.push({
+          label: 'Status',
+          value: txInfo.status.charAt(0).toUpperCase() + txInfo.status.slice(1),
+          icon:
+            txInfo.status === 'success'
+              ? '✅'
+              : txInfo.status === 'failed'
+                ? '❌'
+                : '⏳',
+          highlighted: txInfo.status !== 'success',
+        })
+      }
+    }
+
+    // Add enhanced info metadata
+    if (this.data.enhancedInfo) {
+      const info = this.data.enhancedInfo
+
+      if (info.name) {
+        items.push({
+          label: 'Asset Name',
+          value: info.name,
+          icon: '🏷️',
+        })
+      }
+
+      if (info.standard) {
+        items.push({
+          label: 'Standard',
+          value: info.standard,
+          icon: '📋',
+        })
+      }
+    }
+
+    // Add custom items
+    if (this.data.customItems?.length) {
+      items.push(...this.data.customItems)
+    }
+
+    if (!items.length) return ''
+
+    return html`
+      <div class="items-list">
+        ${repeat(
+          items,
+          (item) => `${item.label}-${item.value}`,
+          (item) => html`
+            <div
+              class="description-item ${item.highlighted ? 'highlighted' : ''} ${item.link ? 'clickable' : ''}"
+              @click=${item.link ? () => this._handleItemClick(item) : undefined}
+            >
+              <div class="item-label">
+                ${when(
+                  item.icon,
+                  () => html`<span class="item-icon">${item.icon}</span>`
+                )}
+                ${item.label}
+              </div>
+              
+              <div class="item-value-section">
+                <div class="item-value">
+                  ${
+                    item.link
+                      ? html`<a class="external-link" href="${item.link}" target="_blank" rel="noopener noreferrer">${item.value}</a>`
+                      : item.value
+                  }
+                </div>
+                ${when(
+                  item.subtitle,
+                  () => html`<div class="item-subtitle">${item.subtitle}</div>`
+                )}
+              </div>
+              
+              <div class="item-actions">
+                ${when(
+                  item.copyable,
+                  () => html`
+                    <button
+                      class="copy-button"
+                      @click=${(e: Event) => {
+                        e.stopPropagation()
+                        this._copyToClipboard(item.value)
+                      }}
+                      title="Copy to clipboard"
+                    >
+                      📋
+                    </button>
+                  `
+                )}
+              </div>
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+
+  render() {
+    if (this.data.loading) {
+      return html`
+        <div class="description-container">
+          <div class="loading-state">
+            <div class="loading-spinner">⏳</div>
+            <div class="loading-text">Loading details...</div>
+          </div>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="${this.variant} description-view">
+        <div class="description-container">
+          ${this._renderHeader()}
+          ${this._renderItems()}
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'description-view': DescriptionView
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Components index - imports all components to ensure they are registered as custom elements
+ */
+
+// Import all Lit components to ensure they are defined as custom elements
+import './universal-token-view.js'
+import './asset-card.js'
+import './info-panel.js'
+import './description-view.js'
+import './contract-card.js'
+import './transaction-playback.js'
+import './permissions-block.js'
+
+// Import shared components
+import '../shared/address-display.js'
+import '../shared/address-view.js'
+import '../shared/value-view.js'
+
+// This file is imported dynamically to ensure all web components are registered
+// when the transaction view system is initialized