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

package/src/shared/address-view.ts

@@ -0,0 +1,385 @@
+import { Task } from '@lit/task'
+import { useAddressResolver } from '@lukso/transaction-view-headless'
+import makeBlockie from 'ethereum-blockies-base64'
+import { html } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+
+// Import LUKSO web components
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+/**
+ * Address text view component (text only, no image)
+ *
+ * A text-only address display component that shows name and/or address.
+ * Use alongside <icon-view> for complete address presentation.
+ *
+ * @example
+ * ```html
+ * <address-view
+ *   address="0x1234..."
+ *   size="medium"
+ * ></address-view>
+ * ```
+ */
+@safeCustomElement('address-view')
+export class AddressView extends CoreLitElement {
+  /**
+   * The address to display (required)
+   */
+  @property() address!: string
+
+  /**
+   * Display size
+   */
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'small'
+
+  /**
+   * Whether to show only the name (no address)
+   */
+  @property({ type: Boolean, attribute: 'name-only' }) nameOnly = false
+
+  /**
+   * Whether to show only the address (no name)
+   */
+  @property({ type: Boolean, attribute: 'address-only' }) addressOnly = false
+
+  /**
+   * Card view: render with bordered container, header label and copy button
+   */
+  @property({ type: Boolean, attribute: 'is-card-view' }) isCardView = false
+
+  /**
+   * Optional label to show in card header (only when isCardView)
+   */
+  @property() label?: string
+
+  /**
+   * Whether to show a copy button (only relevant for card view)
+   */
+  @property({ type: Boolean, attribute: 'show-copy-button' }) showCopyButton =
+    false
+
+  /**
+   * Maximum width for the display (in pixels)
+   */
+  @property({ type: Number, attribute: 'max-width' }) maxWidth = 200
+
+  /**
+   * Whether to show the small identicon next to the name/address
+   */
+  @property({ type: Boolean, attribute: 'show-identicon' }) showIdenticon = true
+
+  /**
+   * Address text color token (e.g., "red-55")
+   */
+  @property({ type: String, attribute: 'address-color' }) addressColor?: string
+
+  /**
+   * Name text color token (e.g., "blue-50")
+   */
+  @property({ type: String, attribute: 'name-color' }) nameColor?: string
+
+  // Internal state
+  @state() private isLoadingAddress = false
+  @state() private identicon?: string
+
+  // Composables
+  private addressResolver = useAddressResolver()
+
+  // Task for resolving address data
+  private addressTask = new Task(this, {
+    task: async ([address], { signal }) => {
+      if (!address) return null
+
+      this.isLoadingAddress = true
+      try {
+        // Pass the full compound address to resolver (e.g., "0x123...-0x456...")
+        const resolved = await this.addressResolver.resolveAddress(address)
+        this.requestUpdate() // Force re-render after resolution
+        return resolved
+      } catch (error) {
+        return null
+      } finally {
+        this.isLoadingAddress = false
+      }
+    },
+    args: () => [this.address],
+  })
+
+  /**
+   * Get the display address (first segment only for compound addresses)
+   * e.g., "0x123...-0x456..." becomes "0x123..."
+   */
+  private get displayAddress(): string {
+    return this.address.split('-')[0]
+  }
+
+  /**
+   * Get display name for the address
+   */
+  private getDisplayName(): string {
+    const resolved = this.addressTask.value
+
+    if (!resolved) {
+      return this.isLoadingAddress ? 'Loading...' : 'Anonymous'
+    }
+    const computedName = this.addressResolver.formatDisplayName(resolved)
+    return this.label || computedName || 'Anonymous'
+  }
+
+  /**
+   * Check if this is a contract address (non-profile)
+   */
+  private get isContract(): boolean {
+    const resolved = this.addressTask.value
+    return resolved ? resolved.__gqltype !== 'Profile' : false
+  }
+
+  /**
+   * Check if this should show the address hash (profiles show hash, contracts don't)
+   */
+  private get shouldShowAddressHash(): boolean {
+    const resolved = this.addressTask.value
+    return resolved ? resolved.__gqltype === 'Profile' : true // Default to true for fallback
+  }
+
+  /**
+   * Get prefix for the address display
+   */
+  private get addressPrefix(): string {
+    const resolved = this.addressTask.value
+    return resolved?.hasProfile ? '@' : ''
+  }
+
+  /**
+   * Check if should show name colors
+   */
+  private get shouldShowNameColor(): boolean {
+    const resolved = this.addressTask.value
+    return resolved ? this.addressResolver.shouldShowNameColor(resolved) : true
+  }
+
+  /**
+   * Handle address click
+   */
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('address-click', {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value,
+        },
+        bubbles: true,
+      })
+    )
+  }
+
+  /** Generate identicon when address changes */
+  protected willUpdate(changed: Map<string, unknown>) {
+    if (changed.has('address') && this.address) {
+      try {
+        this.identicon = makeBlockie(this.displayAddress.toLowerCase())
+      } catch {
+        this.identicon = undefined
+      }
+    }
+  }
+
+  /** Copy the display address to clipboard (card view) */
+  private handleCopy(event?: Event) {
+    // Prevent triggering parent click handlers
+    if (event) event.stopPropagation()
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.displayAddress)
+      this.dispatchEvent(
+        new CustomEvent('address-copied', {
+          detail: { address: this.displayAddress },
+          bubbles: true,
+        })
+      )
+    }
+  }
+
+  /** ========== RENDER HELPERS (Use Cases) ========== */
+  /** Pixel size mapping for identicon based on component size */
+  private getIdenticonSizePx(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 10
+      case 'small':
+        return 12
+      case 'medium':
+        return 14
+      case 'large':
+        return 16
+      default:
+        return 14
+    }
+  }
+  /**
+   * Render only the name (and optionally the address hash when allowed for profiles)
+   */
+  private renderNameOnly(displayName: string) {
+    return html`
+      <!-- Name Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `
+  }
+
+  /**
+   * Render only the raw address (no name)
+   */
+  private renderAddressOnly() {
+    return html`
+      <!-- Address Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        address=${this.displayAddress}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        has-name-color="false"
+        ?has-address-color=${this.shouldShowNameColor}
+      ></lukso-username>
+    `
+  }
+
+  /**
+   * Render both name and (conditionally) the address hash (profiles show hash, contracts may hide it)
+   */
+  private renderNameAndAddress(displayName: string) {
+    return html`
+      <!-- Name + Address Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `
+  }
+
+  private renderIdenticon() {
+    if (!this.showIdenticon || !this.identicon) return ''
+    const size = this.getIdenticonSizePx()
+    return html`
+      <div class="inline-flex items-center justify-center align-middle">
+        <img
+          class="inline-block rounded-full ring-1 ring-neutral-90 shrink-0"
+          src=${this.identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;image-rendering:pixelated;"
+        />
+      </div>
+    `
+  }
+
+  /** 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'
+    }
+  }
+
+  private renderDisplayName() {
+    const displayName = this.getDisplayName()
+    return this.label
+      ? html`<div class="inline-flex items-center gap-2 font-semibold text-neutral-20 ${this.getLabelClass()}">${
+          this.label
+        }</div>`
+      : html`<lukso-username
+              class="inline-block align-middle"
+              name=${displayName}
+              size=${this.size}
+              ?has-name-color=${this.shouldShowNameColor}
+            ></lukso-username>`
+  }
+
+  /**
+   * Decide which of the three core inline variants to render
+   */
+  private renderInlineVariant(displayName: string) {
+    if (this.nameOnly) return this.renderNameOnly(displayName)
+    if (this.addressOnly) return this.renderAddressOnly()
+    return this.renderNameAndAddress(displayName)
+  }
+
+  override render() {
+    const displayName = this.getDisplayName()
+    // Card view layout
+    if (this.isCardView) {
+      return html`
+        <div class="block border border-neutral-90 rounded-xl py-3 px-4 bg-neutral-100 min-w-[280px]" @click=${
+          this.handleClick
+        }>
+          <div class="flex items-center justify-between mb-2">
+          <div class="inline-flex items-center font-normal gap-1">
+            ${this.renderIdenticon()}
+            ${this.renderDisplayName()}
+          </div>
+            ${
+              this.showCopyButton
+                ? html`<button
+                  class="bg-neutral-100 border-0 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 address"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>`
+                : html``
+            }
+          </div>
+          <div class="font-semibold text-neutral-20 break-all flex items-center gap-2">
+            
+            <lukso-username
+              address=${this.displayAddress}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              has-name-color="false"
+              slice-by="24"
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          </div>
+        </div>
+      `
+    }
+
+    // Inline/simple view (default)
+    return html`
+      <div class="inline-flex items-center cursor-pointer gap-1" @click=${this.handleClick}>
+        ${this.renderIdenticon()}
+        <!-- Inline Variants -->
+        ${this.renderInlineVariant(displayName)}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'address-view': AddressView
+  }
+}

package/src/shared/custom-select.ts

@@ -0,0 +1,164 @@
+import { html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+import './load-web-components'
+import makeBlockie from 'ethereum-blockies-base64'
+import { CoreLitElement } from '../styles'
+
+export interface SelectOption {
+  value: string
+  label: string
+  disabled: boolean
+}
+
+@safeCustomElement('custom-option')
+export class CustomOption extends CoreLitElement {
+  @property({ type: Boolean, reflect: true }) selected = false
+  @property({ type: Boolean, reflect: true }) disabled = false
+  @property({ type: Boolean, reflect: true }) hoverable = true
+
+  override render() {
+    const base =
+      'flex flex-row flex-1 items-center px-2 py-1 gap-2 h-7 rounded-md border-0 cursor-pointer text-[14px] text-neutral-20 w-full justify-between'
+    const hover = this.hoverable ? ' hover:bg-neutral-95' : ''
+    const selected = this.selected ? ' bg-neutral-90 rounded' : ''
+    const disabled = this.disabled ? ' text-neutral-60 cursor-not-allowed' : ''
+    return html`<button class="${base}${hover}${selected}${disabled}" ?disabled=${this.disabled}><slot></slot></button>`
+  }
+}
+
+@safeCustomElement('custom-select')
+export class CustomSelect extends CoreLitElement {
+  @property() value?: string
+  @property({ type: Boolean }) open = false
+  @property({ type: Array }) options: SelectOption[] = []
+  @property({ type: String }) size: 'x-small' | 'small' | 'medium' | 'large' =
+    'small'
+
+  private toggleOpen() {
+    this.open = !this.open
+  }
+
+  private close() {
+    this.open = false
+  }
+
+  private onOptionClick(opt: SelectOption) {
+    if (opt.disabled) return
+    this.value = opt.value
+    this.dispatchEvent(new Event('change', { bubbles: true }))
+    this.close()
+  }
+
+  private onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') this.close()
+  }
+
+  private onOutsideClick = (e: MouseEvent) => {
+    if (!this.open) return
+    const path = e.composedPath() as Array<EventTarget & Element>
+    if (!path.includes(this)) this.close()
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    window.addEventListener('click', this.onOutsideClick, { capture: true })
+  }
+
+  override disconnectedCallback(): void {
+    window.removeEventListener('click', this.onOutsideClick, { capture: true })
+    super.disconnectedCallback()
+  }
+
+  override updated() {
+    // reflect initial selected by value
+    const selectedOption = this.getSelectedOption()
+    if (selectedOption) {
+      this.value = selectedOption.value
+    }
+  }
+
+  private getSelectedOption() {
+    return this.options.find((o) => o.value === this.value)
+  }
+
+  private getIdenticonSizePx(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 10
+      case 'small':
+        return 12
+      case 'medium':
+        return 14
+      case 'large':
+        return 16
+      default:
+        return 14
+    }
+  }
+
+  private renderIdenticon(address: string) {
+    const size = this.getIdenticonSizePx()
+    const identicon = makeBlockie(address.toLowerCase())
+    return html`
+      <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+        <img
+          class="block"
+          src=${identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;"
+        />
+      </div>
+    `
+  }
+
+  private renderOptionLabel(option: SelectOption) {
+    return option.value.startsWith('0x')
+      ? html`<div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">${this.renderIdenticon(
+          option.value
+        )} <span class="whitespace-nowrap overflow-hidden text-ellipsis text-[14px]">${
+          option.label
+        }</span></div>`
+      : html`<url-view url=${option.value} label=${option.label} size="x-small"></url-view>`
+  }
+
+  override render() {
+    const selectedOption = this.getSelectedOption()
+    return html`
+      <div class="relative w-full min-w-[360px]" @keydown=${this.onKeyDown}>
+        <button class="box-border flex flex-row flex-1 w-full items-center h-[29px] bg-white border border-neutral-90 rounded-lg text-neutral-20 cursor-pointer justify-between" @click=${
+          this.toggleOpen
+        } aria-haspopup="listbox" aria-expanded=${this.open}>
+            <custom-option is-full-width .hoverable=${false}>
+            <div class="flex flex-row flex-1 items-center justify-between">
+              <span>${selectedOption ? this.renderOptionLabel(selectedOption) : 'Select option'}</span>
+              <lukso-icon class="transition-transform ${this.open ? 'rotate-180' : ''}" name="arrow-down-sm" size="small" color="neutral-20" aria-hidden="true">
+            </lukso-icon>
+            </div>
+          </custom-option>
+        </button>
+
+        ${
+          this.open && this.options.length > 0
+            ? html`<div class="absolute left-0 top-[calc(100%+8px)] w-full bg-white border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] rounded-xl p-2.5 flex flex-col gap-1 z-[1000] overflow-hidden box-border" role="listbox">
+              ${this.options.map(
+                (
+                  opt
+                ) => html`<custom-option .selected=${opt.value === this.value} .disabled=${opt.disabled} @click=${() => this.onOptionClick(opt)}>
+              ${this.renderOptionLabel(opt)}
+              </custom-option>`
+              )}
+            </div>`
+            : ''
+        }
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'custom-select': CustomSelect
+    'custom-option': CustomOption
+  }
+}

package/src/shared/function-name-view.ts

@@ -0,0 +1,89 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+/**
+ * Compact function name badge with icon
+ * Props:
+ * - label (deprecated): text to display; use default slot instead
+ * - icon: lukso-icon name
+ * - size: x-small | small | medium | large (affects paddings and font)
+ * - color: optional lukso-icon color token (e.g., "blue-50")
+ */
+@safeCustomElement('function-name-view')
+export class FunctionNameView extends CoreLitElement {
+  /**
+   * Deprecated: Prefer slot content for the label. Will be used as fallback
+   * when no slot is provided to maintain backward compatibility.
+   */
+  @property() label = ''
+  @property() icon: string = 'user'
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'small'
+  @property({ attribute: 'color' }) color?: string
+
+  private getPadding(): string {
+    switch (this.size) {
+      case 'x-small':
+        return '2px 8px'
+      case 'small':
+        return '4px 10px'
+      case 'medium':
+        return '6px 12px'
+      case 'large':
+        return '8px 14px'
+      default:
+        return '4px 10px'
+    }
+  }
+
+  private getFontSize(): string {
+    switch (this.size) {
+      case 'x-small':
+        return '12px'
+      case 'small':
+        return '14px'
+      case 'medium':
+        return '16px'
+      case 'large':
+        return '18px'
+      default:
+        return '14px'
+    }
+  }
+
+  private getIconSize(): 'x-small' | 'small' | 'medium' | 'large' {
+    return this.size
+  }
+
+  private getHeight(): string {
+    switch (this.size) {
+      case 'x-small':
+        return 'h-6'
+      case 'small':
+        return 'h-8'
+      case 'medium':
+        return 'h-10'
+      case 'large':
+        return 'h-12'
+      default:
+        return 'h-8'
+    }
+  }
+
+  override render() {
+    return html`
+      <div class="inline-flex ${this.getHeight()} items-center gap-2 bg-neutral-90 text-neutral-20 rounded-xl leading-none font-semibold" style="padding:${this.getPadding()}; font-size:${this.getFontSize()};">
+        <lukso-icon name=${this.icon} size=${this.getIconSize()} color=${this.color || ''}></lukso-icon>
+        <span class="whitespace-nowrap"><slot>${this.label}</slot></span>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'function-name-view': FunctionNameView
+  }
+}