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

package/src/components/info-panel.ts

@@ -0,0 +1,437 @@
+import { Task } from '@lit/task'
+import {
+  type ResolvedAddress,
+  useAddressResolver,
+} from '@lukso/transaction-view-headless'
+import { css, html, LitElement } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { when } from 'lit/directives/when.js'
+import { safeCustomElement } from '../shared/safe-custom-element'
+import '../shared/icon-view.js'
+import '../shared/address-view.js'
+import '../shared/image-list.js'
+
+/**
+ * Expandable info panel for displaying detailed asset information
+ * Auto-resolves data from address or address-tokenId
+ */
+@safeCustomElement('info-panel')
+export class InfoPanel extends LitElement {
+  /**
+   * Address or address-tokenId to display info for
+   */
+  @property({ type: String })
+  address = ''
+
+  @property({ type: Boolean, attribute: 'open' })
+  open = false
+
+  @property({ type: String })
+  standard = ''
+
+  @property({ type: String })
+  type: 'transfer' | 'mint' | 'burn' | 'approve' = 'transfer'
+
+  @state()
+  private _isAnimating = false
+
+  @state()
+  private _resolvedData?: ResolvedAddress
+
+  private _resolutionTask = new Task(this, {
+    task: async ([address]) => {
+      if (!address) return null
+
+      const { resolveAddress } = useAddressResolver()
+      // Resolve the full address (including tokenId if present) to get token-specific data
+      const data = await resolveAddress(address as string)
+      this._resolvedData = data
+      return data
+    },
+    args: () => [this.address] as const,
+  })
+
+  private _extractBaseAddress(addressOrComposite: string): string {
+    return addressOrComposite.split('-')[0]
+  }
+
+  private _extractTokenId(addressOrComposite: string): string | undefined {
+    const parts = addressOrComposite.split('-')
+    return parts.length > 1 ? parts[1] : undefined
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    .panel {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+
+    .panel.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .panel-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 400px;
+      height: 100%;
+      background: white;
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      overflow-y: auto;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+
+    .panel.open .panel-content {
+      transform: translateX(0);
+    }
+
+    .close-button {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: #6b7280;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+    }
+
+    .close-button:hover {
+      background-color: #f3f4f6;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      padding-top: 20px;
+    }
+
+    .header-icon {
+      margin-right: 12px;
+    }
+
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+      text-align: center;
+    }
+
+    .section {
+      margin-bottom: 20px;
+      padding: 16px;
+      background: #f9fafb;
+      border-radius: 12px;
+      border: 1px solid #e5e7eb;
+    }
+
+    .section-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .section-content {
+      font-size: 14px;
+      color: #6b7280;
+      word-break: break-all;
+    }
+
+    .copy-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #6b7280;
+      transition: background-color 0.2s;
+    }
+
+    .copy-button:hover {
+      background-color: #e5e7eb;
+    }
+
+    .links-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .link-item {
+      margin-bottom: 8px;
+    }
+
+    .link-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .external-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: #3b82f6;
+      text-decoration: none;
+      font-size: 14px;
+      padding: 6px 12px;
+      border-radius: 6px;
+      transition: background-color 0.2s;
+    }
+
+    .external-link:hover {
+      background-color: #eff6ff;
+    }
+
+    .description {
+      line-height: 1.6;
+      color: #374151;
+    }
+
+    .loading-placeholder {
+      width: 96px;
+      height: 96px;
+      background: #f3f4f6;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #9ca3af;
+      font-size: 32px;
+    }
+
+    @media (max-width: 640px) {
+      .panel-content {
+        max-width: 100%;
+      }
+    }
+  `
+
+  private _handleClose() {
+    this.dispatchEvent(new CustomEvent('close'))
+  }
+
+  private _copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text)
+      // Could dispatch a 'copied' event here for toast notifications
+      this.dispatchEvent(new CustomEvent('copied', { detail: { text } }))
+    }
+  }
+
+  private _renderHeader() {
+    const name =
+      this._resolvedData?.lsp4TokenName ||
+      this._resolvedData?.name ||
+      'Digital Asset'
+
+    return html`
+      <div class="header">
+        ${when(
+          this.address,
+          () => html`
+            <icon-view
+              address="${this.address}"
+              size="large"
+              class="header-icon"
+            ></icon-view>
+          `,
+          () => html`
+            <div class="loading-placeholder">🪙</div>
+          `
+        )}
+        <div class="header-title">${name}</div>
+      </div>
+    `
+  }
+
+  private _renderContractAddress() {
+    const contractAddress = this._extractBaseAddress(this.address)
+    if (!contractAddress) return ''
+
+    return html`
+      <div class="section">
+        <div class="section-title">
+          📄 Contract Address
+          <button
+            class="copy-button"
+            @click=${() => this._copyToClipboard(contractAddress)}
+            title="Copy to clipboard"
+          >
+            📋
+          </button>
+        </div>
+        <div class="section-content">
+          <address-view
+            .address=${contractAddress}
+            format="truncated"
+          ></address-view>
+        </div>
+      </div>
+    `
+  }
+
+  private _renderTokenId() {
+    const tokenId = this._extractTokenId(this.address)
+    if (!tokenId) return ''
+
+    // Use formattedTokenId if available from resolved data, otherwise use raw tokenId
+    const formattedTokenId = (this._resolvedData as any)?.formattedTokenId
+    const displayTokenId = formattedTokenId
+      ? `#${formattedTokenId}` // Formatted gets # prefix
+      : tokenId || '' // Raw hex without # prefix
+
+    return html`
+      <div class="section">
+        <div class="section-title">
+          🏷️ Token ID
+          <button
+            class="copy-button"
+            @click=${() => this._copyToClipboard(tokenId)}
+            title="Copy to clipboard"
+          >
+            📋
+          </button>
+        </div>
+        <div class="section-content">${displayTokenId}</div>
+      </div>
+    `
+  }
+
+  private _renderDescription() {
+    const description = (this._resolvedData as any)?.description
+    if (!description) return ''
+
+    return html`
+      <div class="section">
+        <div class="section-title">📝 Description</div>
+        <div class="section-content description">${description}</div>
+      </div>
+    `
+  }
+
+  private _renderLinks() {
+    const links = (this._resolvedData as any)?.links || []
+    if (!links.length) return ''
+
+    return html`
+      <div class="section">
+        <div class="section-title">🔗 Links</div>
+        <ul class="links-list">
+          ${repeat(
+            links,
+            (link: any) => link.url,
+            (link: any) => html`
+              <li class="link-item">
+                <a
+                  class="external-link"
+                  href="${link.url}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ${link.title || link.url}
+                  <span>↗</span>
+                </a>
+              </li>
+            `
+          )}
+        </ul>
+      </div>
+    `
+  }
+
+  private _renderImages() {
+    const images = (this._resolvedData as any)?.images || []
+    if (!images.length) return ''
+
+    return html`
+      <div class="section">
+        <div class="section-title">🖼️ Images</div>
+        <image-list
+          address=${this.address}
+          image-hint="images"
+          size="medium"
+        ></image-list>
+      </div>
+    `
+  }
+
+  private _renderAssets() {
+    const assets = (this._resolvedData as any)?.assets || []
+    if (!assets.length) return ''
+
+    return html`
+      <div class="section">
+        <div class="section-title">📦 Assets</div>
+        <image-list
+          address=${this.address}
+          image-hint="assets"
+          size="medium"
+        ></image-list>
+      </div>
+    `
+  }
+
+  private _handleBackdropClick(e: Event) {
+    if (e.target === e.currentTarget) {
+      this._handleClose()
+    }
+  }
+
+  render() {
+    const panelClasses = {
+      panel: true,
+      open: this.open,
+    }
+
+    return html`
+      <div class=${classMap(panelClasses)} @click=${this._handleBackdropClick}>
+        <div class="panel-content" @click=${(e: Event) => e.stopPropagation()}>
+          <button class="close-button" @click=${this._handleClose}>×</button>
+
+          ${this._renderHeader()}
+          ${this._renderContractAddress()}
+          ${this._renderTokenId()}
+          ${this._renderDescription()}
+          ${this._renderLinks()}
+          ${this._renderImages()}
+          ${this._renderAssets()}
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'info-panel': InfoPanel
+  }
+}

package/src/components/permissions-block.ts

@@ -0,0 +1,138 @@
+import { html, nothing } from 'lit'
+import { property } from 'lit/decorators.js'
+import { safeCustomElement } from '../shared/safe-custom-element'
+import { CoreLitElement } from '../styles'
+import '../shared/load-web-components'
+
+export type PermissionLevels = {
+  permissionName: string
+  type: string
+  icon?: string
+  isActive: boolean
+  isForward?: boolean
+  info: string
+}
+
+/**
+ * Permissions block card
+ *
+ * Lit/Web Component equivalent of the provided Vue PermissionsBlock.
+ * - Uses Tailwind utility classes for styling
+ * - Uses LUKSO web components where applicable (lukso-icon)
+ */
+@safeCustomElement('permissions-block')
+export class PermissionsBlock extends CoreLitElement {
+  /** Header icon name */
+  @property({ type: String }) icon: string = ''
+
+  /** Optional action icon name (reserved, not displayed yet) */
+  @property({ type: String, attribute: 'action-icon' }) actionIcon: string = ''
+
+  /** CSS color (e.g., var(--blue-75)) applied to icons */
+  @property({ type: String }) color: string = 'var(--neutral-60)'
+
+  /** Title text */
+  @property({ type: String }) title: string = ''
+
+  /** Description text */
+  @property({ type: String }) description: string = ''
+
+  /** Control identifier used by parent (informational only here) */
+  @property({ type: String }) control: string = ''
+
+  /** Permission levels to render */
+  @property({ type: Array }) permissions: PermissionLevels[] = []
+
+  override render() {
+    return html`
+			<div
+				class="mb-6 p-4 bg-[var(--neutral-100)] border border-[var(--neutral-90)] rounded-lg"
+			>
+				<div class="flex items-center mb-2">
+					${
+            this.icon
+              ? html`<lukso-icon
+								name=${this.icon}
+								size="x-small"
+								color=${this.color}
+							></lukso-icon>`
+              : nothing
+          }
+					<div class="ml-2 heading-inter-14-bold">${this.title}</div>
+				</div>
+
+				${
+          this.description
+            ? html`<div class="text-[var(--neutral-40)] paragraph-inter-12-regular">
+							${this.description}
+						</div>`
+            : nothing
+        }
+
+				<div class="h-px w-full bg-[var(--neutral-90)] mt-4"></div>
+
+				<slot></slot>
+
+				${(this.permissions || []).map((p) => this.renderPermission(p))}
+			</div>
+		`
+  }
+
+  private renderPermission(p: PermissionLevels) {
+    const nameBase = (p.icon || p.permissionName || '').toLowerCase()
+    const activeIcon = `${nameBase}-activated`
+    const inactiveIcon = `${nameBase}-inactive`
+    return html`
+			<div class="mt-4 grid grid-cols-[40px,1fr,20px] gap-x-2 items-start">
+				<div class="relative w-10 h-10">
+					<svg-icon
+						class="active absolute bottom-0 opacity-0 z-[99] transition-opacity duration-200 ${
+              p.isActive ? 'opacity-100' : ''
+            }"
+						name=${activeIcon}
+						width="40"
+						height="40"
+						color=${this.color}
+					></svg-icon>
+					<svg-icon
+						class="inactive absolute bottom-0 ${p.isActive ? 'opacity-0' : 'opacity-100'}"
+						name=${inactiveIcon}
+						width="40"
+						height="40"
+						color=${this.color}
+					></svg-icon>
+				</div>
+
+				<div>
+					<span class="paragraph-inter-12-semi-bold ">${p.type}</span>
+					<div class="paragraph-inter-12-regular">${p.info}</div>
+				</div>
+
+				${
+          p.isActive
+            ? html`<lukso-icon
+							name="complete-filled"
+							width="20"
+							height="20"
+							secondary-color="neutral-100"
+              color="green-54"
+							stroke-width="1.5"
+						></lukso-icon>`
+            : html`<lukso-icon
+							name="cross-outline"
+							width="20"
+							height="20"
+							color="red-65"
+							stroke-width="1.5"
+						></lukso-icon>`
+        }
+			</div>
+		`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'permissions-block': PermissionsBlock
+  }
+}