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

package/src/shared/url-view.ts

@@ -0,0 +1,129 @@
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+/**
+ * UrlView - display a URL with favicon/logo and human-friendly name
+ *
+ * Props:
+ * - url (required): full URL like https://example.com/path
+ * - size: x-small | small | medium | large
+ * - label?: optional label displayed above
+ * - showLogo: whether to show favicon/logo (default true)
+ * - logoUrl?: explicit logo URL to use instead of favicon
+ * - maxWidth: name truncation width in px
+ */
+@safeCustomElement('url-view')
+export class UrlView extends CoreLitElement {
+  @property() url!: string
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'small'
+  @property() label?: string
+  @property({ type: Boolean, attribute: 'show-logo' }) showLogo = true
+  @property({ attribute: 'logo-url' }) logoUrl?: string
+  @property({ type: Number, attribute: 'max-width' }) maxWidth = 240
+
+  @state() private favicon?: string
+  @state() private displayName = ''
+  private faviconCandidates: string[] = []
+  private faviconIndex = 0
+
+  protected willUpdate(changed: Map<string, unknown>) {
+    if (changed.has('url') || changed.has('label') || changed.has('logoUrl')) {
+      this.computeMeta()
+    }
+  }
+
+  private computeMeta() {
+    try {
+      const u = new URL(this.url)
+      const origin = u.origin
+      this.faviconCandidates = []
+      if (this.logoUrl) this.faviconCandidates.push(this.logoUrl)
+      this.faviconCandidates.push(
+        `${origin}/favicon.ico`,
+        `${origin}/favicon.png`
+      )
+      this.faviconIndex = 0
+      this.favicon = this.faviconCandidates[this.faviconIndex]
+      const hostname = u.hostname.replace(/^www\./, '')
+      const hostnamePretty = hostname
+        .split('.')
+        .filter(Boolean)
+        .slice(-2)
+        .join(' ')
+        .replace(/-/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase())
+
+      if (this.label && this.label.trim()) {
+        this.displayName = this.label.trim()
+      } else {
+        this.displayName = hostnamePretty || this.url
+      }
+    } catch {
+      this.favicon = undefined
+      // Fallback to raw string if URL parse fails
+      this.displayName = this.label && this.label.trim() ? this.label : this.url
+    }
+  }
+
+  private handleImageError() {
+    this.faviconIndex += 1
+    if (this.faviconIndex < this.faviconCandidates.length) {
+      this.favicon = this.faviconCandidates[this.faviconIndex]
+    } else {
+      this.favicon = undefined
+    }
+  }
+
+  private getSizePixels(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 14
+      case 'small':
+        return 16
+      case 'medium':
+        return 20
+      case 'large':
+        return 24
+      default:
+        return 16
+    }
+  }
+
+  override render() {
+    const sizePx = this.getSizePixels()
+    return html`
+      <div class="inline-flex flex-col gap-1">
+        <div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">
+          ${
+            this.showLogo
+              ? html`
+                <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+                  ${
+                    this.favicon
+                      ? html`<img
+                        src=${this.favicon}
+                        style="width:${sizePx}px;height:${sizePx}px;"
+                        alt="favicon"
+                        @error=${this.handleImageError}
+                      />`
+                      : html`<lukso-icon name="globe" size=${this.size} color="blue-85"></lukso-icon>`
+                  }
+                </div>
+              `
+              : ''
+          }
+          <span class="whitespace-nowrap overflow-hidden text-ellipsis leading-tight" style=${`max-width:${this.maxWidth}px;font-size: ${sizePx}px;`}>${this.displayName}</span>
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'url-view': UrlView
+  }
+}

package/src/shared/value-view.ts

@@ -0,0 +1,510 @@
+import { Task } from '@lit/task'
+import { useAddressResolver } from '@lukso/transaction-view-headless'
+import { css, html } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { when } from 'lit/directives/when.js'
+import { safeCustomElement } from './safe-custom-element'
+
+// Import LUKSO web components
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+// Value formatting utilities
+function formatUnits(value: bigint, decimals = 18): string {
+  const divisor = 10n ** BigInt(decimals)
+  const quotient = value / divisor
+  const remainder = value % divisor
+
+  if (remainder === 0n) {
+    return quotient.toString()
+  }
+
+  const remainderStr = remainder.toString().padStart(decimals, '0')
+  const trimmed = remainderStr.replace(/0+$/, '')
+  return `${quotient}.${trimmed}`
+}
+
+/**
+ * Value display component
+ *
+ * Displays various types of values with appropriate formatting and styling.
+ * Supports numbers, strings, booleans, BigInt values, and special handling
+ * for Ethereum values with currency symbols.
+ *
+ * @example
+ * ```html
+ * <value-view
+ *   value="1000000000000000000"
+ *   type="currency"
+ *   currency-symbol="LYX"
+ *   decimals="18"
+ * ></value-view>
+ * ```
+ */
+@safeCustomElement('value-view')
+export class ValueView extends CoreLitElement {
+  /**
+   * The value to display (required)
+   * Can be string, number, boolean, or bigint
+   */
+  @property() value?: string | number | boolean | bigint | null
+
+  /**
+   * The key name (used for special formatting logic)
+   */
+  @property({ attribute: 'key-name' }) keyName?: string
+
+  @property({ type: String, attribute: 'container-class-names' })
+  containerClassNames?: string
+
+  /**
+   * Value type for formatting
+   */
+  @property() type:
+    | 'string'
+    | 'number'
+    | 'boolean'
+    | 'currency'
+    | 'bigint'
+    | 'address'
+    | 'auto' = 'auto'
+
+  /**
+   * Currency symbol for currency type
+   */
+  @property({ attribute: 'currency-symbol' }) currencySymbol = 'LYX'
+
+  /**
+   * Number of decimals for currency formatting
+   */
+  @property({ type: Number }) decimals = 18
+
+  /**
+   * Display size
+   */
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'medium'
+
+  /**
+   * Whether to show copy button
+   */
+  @property({ type: Boolean, attribute: 'show-copy-button' }) showCopyButton =
+    false
+
+  /**
+   * Render as a card with bordered container and label
+   */
+  @property({ type: Boolean, attribute: 'is-card-view' }) isCardView = false
+
+  /**
+   * Optional label to show in card header
+   */
+  @property() label?: string
+
+  /**
+   * Maximum width for truncation
+   */
+  @property({ type: Number, attribute: 'max-width' }) maxWidth?: number
+
+  /**
+   * Token/contract address for automatic metadata resolution
+   * When provided, ValueView will automatically resolve token symbol and decimals
+   */
+  @property() address?: string
+
+  // Internal state for resolved metadata
+  @state() private resolvedMetadata?: {
+    symbol?: string
+    decimals?: number
+    name?: string
+  }
+
+  // Tracks whether the component has any slotted content
+  @state() private _hasSlotContent = false
+
+  private _onSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement
+    const assigned = slot?.assignedNodes({ flatten: true }) ?? []
+    this._hasSlotContent = assigned.length > 0
+  }
+
+  protected override firstUpdated(): void {
+    const slot = this.renderRoot.querySelector('slot') as HTMLSlotElement | null
+    if (slot) {
+      const assigned = slot.assignedNodes({ flatten: true })
+      this._hasSlotContent = assigned.length > 0
+    }
+  }
+
+  // Address resolution utilities (lazy initialization)
+  private get addressResolver() {
+    try {
+      return useAddressResolver()
+    } catch (error) {
+      console.warn('ValueView: Address resolver not available:', error)
+      return {
+        resolveAddress: async () => null,
+      }
+    }
+  }
+
+  // Task for resolving address metadata
+  private addressTask = new Task(this, {
+    task: async ([address]) => {
+      if (!address) return null
+      try {
+        return this.addressResolver.resolveAddress(address)
+      } catch (error) {
+        console.warn('ValueView: Failed to resolve address metadata:', error)
+        return null
+      }
+    },
+    args: () => [this.address] as const,
+  })
+
+  /**
+   * Get the effective type for the value
+   */
+  private getEffectiveType(): string {
+    if (this.type !== 'auto') return this.type
+
+    const value = this.value
+
+    if (value === null || value === undefined) return 'null'
+    if (typeof value === 'string') return 'string'
+    if (typeof value === 'number') return 'number'
+    if (typeof value === 'boolean') return 'boolean'
+    if (typeof value === 'bigint') {
+      // Special handling for 'value' key - treat as currency
+      if (this.keyName === 'value') return 'currency'
+      return 'bigint'
+    }
+
+    return 'string'
+  }
+
+  /**
+   * Get CSS class for the value type
+   */
+  private getValueClass(): string {
+    const effectiveType = this.getEffectiveType()
+
+    switch (effectiveType) {
+      case 'string':
+        return 'text-success-60'
+      case 'number':
+        return 'text-info-60'
+      case 'boolean':
+        return 'text-error-60'
+      case 'currency':
+        return 'text-warning-60 font-medium'
+      case 'bigint':
+        return 'text-secondary-60'
+      case 'address':
+        return 'text-info-60 font-mono'
+      case 'null':
+        return 'text-neutral-70 italic'
+      default:
+        return 'text-neutral-10'
+    }
+  }
+
+  /**
+   * Format the value for display
+   */
+  private getFormattedValue(): string {
+    const value = this.value
+    const effectiveType = this.getEffectiveType()
+
+    if (value === null) return 'null'
+    if (value === undefined) return 'undefined'
+
+    switch (effectiveType) {
+      case 'currency':
+        const { numeric, symbol } = this.getCurrencyParts()
+        return `${numeric} ${symbol}`
+
+      case 'bigint':
+        if (typeof value === 'bigint') {
+          return value.toString() + 'n'
+        }
+        return String(value) + 'n'
+
+      case 'boolean':
+        return value ? 'true' : 'false'
+
+      case 'number':
+        if (typeof value === 'number') {
+          // Format large numbers with commas
+          return value.toLocaleString()
+        }
+        return String(value)
+
+      case 'string':
+        return String(value)
+
+      case 'null':
+        return 'null'
+
+      default:
+        return String(value)
+    }
+  }
+
+  /**
+   * Compute currency display parts: numeric portion and symbol
+   */
+  private getCurrencyParts(): { numeric: string; symbol: string } {
+    const value = this.value
+    const resolvedData: any = this.addressTask.value
+    const effectiveDecimals = resolvedData?.lsp4TokenSymbol
+      ? (resolvedData.baseAsset?.decimals ??
+        resolvedData.decimals ??
+        this.decimals)
+      : this.decimals
+    const effectiveSymbol =
+      resolvedData?.lsp4TokenSymbol ||
+      resolvedData?.baseAsset?.lsp4TokenSymbol ||
+      this.currencySymbol
+
+    let numeric = String(value ?? '')
+    try {
+      if (typeof value === 'bigint') {
+        numeric = formatUnits(value, effectiveDecimals)
+      } else if (typeof value === 'string' && !isNaN(Number(value))) {
+        const bigintValue = BigInt(value)
+        numeric = formatUnits(bigintValue, effectiveDecimals)
+      }
+    } catch {
+      // fallback to raw string
+      numeric = String(value ?? '')
+    }
+
+    return { numeric, symbol: effectiveSymbol }
+  }
+
+  /** Typography class for numeric value based on size */
+  private getNumericClass(): string {
+    switch (this.size) {
+      case 'x-small':
+        return 'paragraph-ptmono-12-bold'
+      case 'small':
+        return 'paragraph-ptmono-14-bold'
+      case 'medium':
+        return 'paragraph-ptmono-16-bold'
+      case 'large':
+        return 'paragraph-ptmono-24-bold'
+      default:
+        return 'paragraph-ptmono-16-bold'
+    }
+  }
+
+  /** Typography class for currency symbol based on size */
+  private getCurrencyClass(): string {
+    switch (this.size) {
+      case 'x-small':
+        return 'paragraph-inter-12-regular'
+      case 'small':
+        return 'paragraph-inter-14-regular'
+      case 'medium':
+        return 'paragraph-inter-16-regular'
+      case 'large':
+        return 'paragraph-inter-20-regular'
+      default:
+        return 'paragraph-inter-16-regular'
+    }
+  }
+
+  /**
+   * Get size-appropriate font size
+   */
+  private getContainerTextClass(): string {
+    switch (this.size) {
+      case 'x-small':
+        return 'text-[12px]'
+      case 'small':
+        return 'text-[14px]'
+      case 'medium':
+        return 'text-[16px]'
+      case 'large':
+        return 'text-[18px]'
+      default:
+        return 'text-[16px]'
+    }
+  }
+
+  /**
+   * Handle copy to clipboard
+   */
+  private async handleCopy(e?: Event) {
+    if (e) e.stopPropagation()
+    const textToCopy = String(this.value)
+
+    try {
+      await navigator.clipboard.writeText(textToCopy)
+
+      // Dispatch copy event
+      this.dispatchEvent(
+        new CustomEvent('value-copied', {
+          detail: { value: textToCopy },
+          bubbles: true,
+        })
+      )
+
+      // Value copied successfully - UI feedback handled by event
+    } catch (error) {
+      console.error('Failed to copy value:', error)
+    }
+  }
+
+  /**
+   * Handle value click
+   */
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('value-click', {
+        detail: {
+          value: this.value,
+          formattedValue: this.getFormattedValue(),
+          type: this.getEffectiveType(),
+        },
+        bubbles: true,
+      })
+    )
+  }
+
+  override render() {
+    const formattedValue = this.getFormattedValue()
+    const valueClass = this.getValueClass()
+
+    // Card view
+    if (this.isCardView) {
+      const effectiveType = this.getEffectiveType()
+      let headerText = this.label || ''
+      let contentTemplate = html`
+        <span class="inline-block text-wrap min-w-0 text-center">${formattedValue}</span>
+      `
+
+      if (effectiveType === 'currency') {
+        const { numeric, symbol } = this.getCurrencyParts()
+        if (this.label && this.label.trim() !== '') {
+          headerText = this.label
+          contentTemplate = html`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+              <span class="inline-block ${this.getCurrencyClass()}"> ${symbol}</span>
+          `
+        } else {
+          headerText = symbol
+          contentTemplate = html`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+          `
+        }
+      }
+
+      return html`
+          <div
+            class="block border border-neutral-90 rounded-xl bg-white py-3 px-4 min-w-[320px] ${this.containerClassNames || ''}"
+            @click=${this.handleClick}
+            style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ''}"
+          >
+            <div class="flex items-center justify-between mb-2">
+            ${
+              headerText
+                ? html`<div class="${this.getLabelClass()} text-neutral-20 overflow-hidden text-ellipsis whitespace-nowrap">${headerText}</div>`
+                : html``
+            }
+            ${
+              this.showCopyButton
+                ? html`
+                    <button
+                      class="bg-white rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
+                      @click=${(e: Event) => this.handleCopy(e)}
+                      title="Copy value"
+                      aria-label="Copy"
+                    >
+                      <lukso-icon name="copy" size="small"></lukso-icon>
+                    </button>
+                  `
+                : html``
+            }
+          </div>
+            ${when(
+              !this._hasSlotContent,
+              () => html`
+                <div class="font-semibold text-neutral-10 break-words flex items-center gap-2 text-wrap ${
+                  this.getUseMonospace() ? 'font-mono' : ''
+                }">
+                  ${contentTemplate}
+                </div>
+              `
+            )}
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      `
+    }
+
+    // Inline view (default)
+    return html`
+      <div
+        class="inline-flex items-center gap-1.5 cursor-pointer transition-all duration-200 rounded px-1 py-0.5 hover:bg-neutral-95 min-w-[320px] ${this.getContainerTextClass()} ${this.containerClassNames || ''}"
+        @click=${this.handleClick}
+        style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ''}"
+      >
+        <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${valueClass}">
+          ${formattedValue}
+        </span>
+        ${
+          this.showCopyButton
+            ? html`
+                <button
+                  class="inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-neutral-70 p-0.5 rounded transition-all duration-200 hover:text-primary-50 hover:bg-neutral-90 flex-shrink-0"
+                  @click=${(e: Event) => this.handleCopy(e)}
+                  title="Copy value"
+                  aria-label="Copy value to clipboard"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>
+              `
+            : ''
+        }
+      </div>
+    `
+  }
+
+  /** Whether to use monospace font for the value content */
+  private getUseMonospace(): boolean {
+    const t = this.getEffectiveType()
+    if (
+      t === 'address' ||
+      t === 'bigint' ||
+      this.value?.toString().startsWith('0x')
+    )
+      return true
+    if (t === 'string') {
+      const s = String(this.value ?? '')
+      return /^0x[0-9a-fA-F]+$/.test(s) || s.length > 32
+    }
+    return false
+  }
+
+  /** Map size to a typography class for the label */
+  private getLabelClass(): string {
+    switch (this.size) {
+      case 'x-small':
+        return 'paragraph-inter-12-semi-bold'
+      case 'small':
+        return 'heading-inter-14-bold'
+      case 'medium':
+        return 'heading-inter-17-semi-bold'
+      case 'large':
+        return 'heading-inter-21-semi-bold'
+      default:
+        return 'heading-inter-17-semi-bold'
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'value-view': ValueView
+  }
+}

package/src/styles/index.ts

@@ -0,0 +1,28 @@
+// Export the built CSS as a string for components that need to inject styles
+// Tailwind + web-components CSS is compiled into this file by our PostCSS pipeline
+// esbuild-raw-plugin ensures importing CSS returns its raw contents as a string
+
+import output from 'styles.css?raw'
+import { css, LitElement, unsafeCSS } from 'lit'
+
+const style = css`
+  ${unsafeCSS(output)}
+
+  :host([is-inline]) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([is-full-width]) {
+    width: 100%;
+    flex: 1;
+    display: flex;
+  }
+
+`
+
+export class CoreLitElement extends LitElement {
+  static styles = [style]
+}
+
+export default style

package/src/styles/styles.css

@@ -0,0 +1 @@
+@import "@lukso/web-components/dist/styles/main.css";

package/src/vue-entry.ts

@@ -0,0 +1,15 @@
+/**
+ * Vue-specific entry point for transaction view core
+ * Import this when you need Vue integration, to avoid Vue dependency issues in other frameworks
+ */
+
+// Re-export types
+export type { DecoderResult } from '@lukso/transaction-decoder'
+export type {
+  DecoderRecordForSelection,
+  ViewContext,
+} from '@lukso/transaction-view-headless'
+// Also re-export the core functionality
+export * from './registry/index.js'
+export * from './shared/index.js'
+export * from './vue/index.js'

package/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/**
+ * Tailwind v3 config for @lukso/transaction-view-core
+ * Minimal theme extensions to support @lukso/web-components CSS apply tokens
+ * like text-48, leading-58, font-400, font-inter, etc.
+ */
+module.exports = {
+  content: ['./src/**/*.{ts,tsx,js,jsx,vue,html}'],
+  presets: [require('@lukso/web-components/tailwind.config')],
+}