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

package/src/components/asset-card.ts

@@ -0,0 +1,426 @@
+import { html } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { when } from 'lit/directives/when.js'
+
+import '../shared/icon-view.js'
+import '../shared/address-view.js'
+import '../shared/value-view.js'
+import '../shared/image-list.js'
+// Import LUKSO web components
+import '@lukso/web-components'
+import { Task } from '@lit/task'
+import {
+  ResolvedAddress,
+  useAddressResolver,
+} from '@lukso/transaction-view-headless'
+import { safeCustomElement } from '../shared/safe-custom-element.js'
+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}`
+}
+
+/**
+ * Asset card component for displaying token/NFT information
+ * Replaces the DigitalAssetInfo helper component
+ */
+@safeCustomElement('asset-card')
+export class AssetCard extends CoreLitElement {
+  @property() address: string | undefined
+
+  @property({ type: String, attribute: 'token-id' })
+  tokenId: string | undefined
+
+  @property({ type: String })
+  amount: string | undefined
+
+  /** Function name associated with the asset (e.g., "LSP4DigitalAsset") */
+  @property({ type: String, attribute: 'function-name' })
+  functionName: string | undefined
+
+  /** Standard associated with the asset (e.g., "LSP4") */
+  @property({ type: String, attribute: 'standard' })
+  standard: string | undefined
+
+  /** Function icon name */
+  @property({ type: String, attribute: 'function-icon' })
+  functionIcon: string = 'code-outline'
+
+  @property({ type: String })
+  size: 'small' | 'medium' | 'large' = 'medium'
+
+  @property({ type: Boolean, attribute: 'show-info-button' })
+  showInfoButton = true
+
+  @property({ type: Boolean, attribute: 'show-creator' })
+  showCreator = true
+
+  @state()
+  private displayDetails = false
+
+  @state()
+  private _resolvedData?: ResolvedAddress
+
+  @state()
+  private _imageError = false
+
+  private _handleImageError() {
+    this._imageError = true
+  }
+
+  private _handleInfoClick() {
+    this.displayDetails = !this.displayDetails
+  }
+
+  // Composables
+  private addressResolver = useAddressResolver()
+
+  private _resolutionTask = new Task(this, {
+    task: async ([address]) => {
+      if (!address) return null
+
+      const { resolveAddress } = this.addressResolver
+      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
+  }
+
+  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 _renderAddressSection() {
+    const data = this._resolutionTask.value
+    if (!data) return ''
+
+    return html`
+      <div class="flex items-center justify-between cursor-pointer">
+        ${when(
+          data.lsp4TokenSymbol,
+          () => html`
+             <address-view
+              address=${this._extractBaseAddress(data.address)}
+              size="medium"
+              max-width=${100}
+              .showIdenticon=${false}
+              ?is-card-view=${false}
+              ?show-copy-button=${false}
+              address-color="neutral-60"
+            ></address-view>
+          `
+        )}
+        ${when(
+          this.showInfoButton,
+          () => html`
+          <lukso-icon name="information" size="small" @click=${this._handleInfoClick}></lukso-icon>
+          `
+        )}
+      </div>
+    `
+  }
+
+  private _renderCreatorSection() {
+    const owner = (this._resolvedData as any)?.owner_id
+    const creators = (this._resolvedData as any)?.lsp4Creators || []
+    const resolvedCreator = owner || creators[0]?.profile_id
+    if (!resolvedCreator) return ''
+
+    return html`
+        <div class="gap-2">
+          <div class="text-neutral-60 text-[12px] font-normal">Created by</div>
+          <div class="flex justify-center flex-col gap-1 text-[12px] font-bold font-mono">
+            <icon-view
+              address=${owner}
+              size="small"
+              name-position="beside"
+            ></icon-view>
+          </div>
+        </div>
+      `
+  }
+
+  private _renderContractAddress() {
+    const data = this._resolutionTask.value
+
+    return html`
+        <div class="section">
+           ${when(
+             data.lsp4TokenSymbol,
+             () => html`
+             <address-view
+              address=${data.address}
+              size="medium"
+              label=${data.lsp4TokenName}
+              max-width=${100}
+              .showIdenticon=${false}
+              ?is-card-view=${true}
+              ?show-copy-button=${true}
+              address-color="neutral-60"
+            ></address-view>
+          `
+           )}
+        </div>
+      `
+  }
+
+  private _renderAssetLongName() {
+    const data = this._resolutionTask.value
+
+    return html`
+          ${when(
+            data?.lsp4TokenName,
+            () => html`
+              <value-view 
+                ?is-card-view=${true}
+                ?show-copy-button=${true}
+                value=${data.lsp4TokenName}
+                label="Token Name"
+              ></value-view>
+            `
+          )}
+        `
+  }
+
+  private _renderAssetSymbol() {
+    const data = this._resolutionTask.value
+
+    return html`
+          ${when(
+            data?.lsp4TokenSymbol,
+            () => html`
+              <value-view 
+                ?is-card-view=${true}
+                ?show-copy-button=${true}
+                value=${data.lsp4TokenSymbol}
+                label="Symbol"
+              ></value-view>
+            `
+          )}
+        `
+  }
+
+  private get displayedTokenId() {
+    const formattedTokenId = (this._resolvedData as any)?.formattedTokenId
+    const displayTokenId = formattedTokenId ? `${formattedTokenId}` : ''
+    if (displayTokenId) return displayTokenId
+    // If its a collection, do not show tokenId
+    return this.tokenId && !this._resolvedData?.isCollection
+      ? `${parseInt(this.tokenId, 16)}`
+      : undefined
+  }
+
+  private _renderTokenId() {
+    const displayTokenId = this.displayedTokenId
+    if (!displayTokenId) return ''
+
+    return html`
+        <value-view 
+          ?is-card-view=${true}
+          ?show-copy-button=${true}
+          value=${displayTokenId}
+          label="Token ID"
+        ></value-view>
+      `
+  }
+
+  private _renderDescription() {
+    const description = (this._resolvedData as any)?.description
+    if (!description) return ''
+
+    return html`
+        <value-view 
+          ?is-card-view=${true}
+          ?show-copy-button=${true}
+          value=${description}
+          label="Description"
+        >
+        </value-view>
+      `
+  }
+
+  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 === 0) return ''
+
+    return html`
+          <image-list
+            address=${this.address}
+            image-hint="images"
+            size="medium"
+            ?is-card-view=${true}
+          ></image-list>
+      `
+  }
+
+  private _renderAssets() {
+    const assets = (this._resolvedData as any)?.assets || []
+    if (assets.length === 0) 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 _renderStandards() {
+    return html`
+        <div class="flex justify-between items-center my-4">
+          <function-name-view 
+          label=${this.functionName}
+          size="small"
+          icon=${this.functionIcon ? this.functionIcon : 'code-outline'}
+          ></function-name-view>
+          <function-name-view label=${this._resolvedData?.standard} size="small"></function-name-view>
+        </div>
+      `
+  }
+
+  private _renderTokenDetails() {
+    if (!this.displayDetails) return ''
+    return html`
+      <div class="p-4 mt-6 flex flex-col border border-neutral-90 rounded-xl gap-4">
+          ${this._renderContractAddress()}
+          ${this._renderAssetLongName()}
+          ${this._renderAssetSymbol()}
+          ${this._renderTokenId()}
+          ${this._renderDescription()}
+          ${this._renderLinks()}
+          ${this._renderImages()}
+          ${this._renderAssets()}
+      </div>
+    `
+  }
+
+  private renderFormattedTokenIdBadge() {
+    if (!this.displayedTokenId) return ''
+    return html`
+      <span class="absolute top-3 left-3 z-10 text-[12px] text-neutral-20 font-mono font-bold bg-neutral-98 px-2 rounded-full">#${this.displayedTokenId}</span>
+    `
+  }
+
+  render() {
+    return html`
+    <div >
+      ${this._renderStandards()}
+    <div class="mt-6 flex-col">
+      <div class="flex items-center justify-center gap-4">
+        <div class="flex justify-end w-[48%]">
+          <div class="border relative border-neutral-90 rounded-xl">
+          ${this.renderFormattedTokenIdBadge()}
+            <div class="p-2 relative">
+              <icon-view
+                address="${this.address}"
+                size="2x-large"
+                .showName=${false}
+              ></icon-view>
+            </div>
+            <div style="height: 1px;" class="bg-neutral-90 w-full"></div>
+            <div class="px-2">
+              ${this._renderAddressSection()}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1 w-[51%]">
+          <div class="text-[14px] font-bold text-neutral-20">
+            ${this._resolvedData?.lsp4TokenName || 'UNKNOWN'}
+          </div>
+          <div class="text-[17px] font-semibold text-neutral-20">
+            ${when(
+              this.amount,
+              () => html`
+                <span class="">${formatUnits(BigInt(this.amount!), this._resolvedData?.decimals)}</span>
+                <span class="ml-1 text-neutral-60 max-w-[60px] whitespace-nowrap overflow-hidden text-ellipsis text-[14px] font-semibold">${
+                  this._resolvedData?.lsp4TokenSymbol || ''
+                }</span>
+              `,
+              () => html`${this._resolvedData?.lsp4TokenSymbol || ''}`
+            )}
+          </div>
+          
+           ${when(
+             this.displayedTokenId,
+             () =>
+               html`<div class="text-[14px] font-medium text-neutral-60"><span class="font-bold">#${this.displayedTokenId}</span></div>`
+           )}
+          <div class="mt-4">
+          ${when(this.showCreator, () => this._renderCreatorSection())}
+          </div>
+        </div>
+      </div>
+      <div class="border-neutral-90 pt-2">
+        ${this._renderTokenDetails()}
+      </div>
+    </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'asset-card': AssetCard
+  }
+}

package/src/components/contract-card.ts

@@ -0,0 +1,238 @@
+import { Task } from '@lit/task'
+import {
+  type ResolvedAddress,
+  useAddressResolver,
+  useImageLoader,
+} from '@lukso/transaction-view-headless'
+import { css, html, LitElement, nothing } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { safeCustomElement } from '../shared/safe-custom-element'
+import '../shared/load-web-components'
+
+/**
+ * ContractCard Component
+ *
+ * A wrapper around lukso-card that auto-resolves contract/token metadata from an address or address-tokenId.
+ * Provides the same variants and styling as lukso-card with automatic data population.
+ *
+ * @example
+ * ```html
+ * <!-- Basic contract card -->
+ * <contract-card address="0x1234..."></contract-card>
+ *
+ * <!-- Profile variant with token ID -->
+ * <contract-card
+ *   address="0x1234..."
+ *   variant="profile"
+ * ></contract-card>
+ *
+ * <!-- With custom slots -->
+ * <contract-card address="0x1234..." variant="with-header">
+ *   <div slot="header">Custom Header</div>
+ *   <div slot="content">Custom Content</div>
+ * </contract-card>
+ * ```
+ *
+ * @slot header - Custom header content (for with-header variant)
+ * @slot content - Custom content area
+ * @slot bottom - Bottom slot content
+ *
+ * @fires address-click - Fired when the card is clicked (if clickable=true)
+ */
+@safeCustomElement('contract-card')
+export class ContractCard extends LitElement {
+  /**
+   * Contract address or address-tokenId format
+   */
+  @property() address!: string
+
+  /**
+   * Pre-resolved address data (optional, for performance optimization)
+   */
+  @property({ type: Object }) resolved?: ResolvedAddress
+
+  /**
+   * Card variant (maps to lukso-card variants)
+   * - basic: Simple card with content slot
+   * - with-header: Card with header and content sections
+   * - profile: Profile card layout
+   * - profile-2: Alternative profile layout
+   * - hero: Large hero-style card
+   * - dapp: DApp-specific card layout
+   */
+  @property() variant:
+    | 'basic'
+    | 'with-header'
+    | 'profile'
+    | 'profile-2'
+    | 'hero'
+    | 'dapp' = 'basic'
+
+  /**
+   * Border radius size
+   */
+  @property({ attribute: 'border-radius' }) borderRadius:
+    | 'small'
+    | 'medium'
+    | 'none' = 'medium'
+
+  /**
+   * Shadow size
+   */
+  @property() shadow: 'small' | 'medium' | 'large' = 'large'
+
+  /**
+   * Card width in pixels
+   */
+  @property({ type: Number }) width?: number
+
+  /**
+   * Card height in pixels
+   */
+  @property({ type: Number }) height?: number
+
+  /**
+   * Whether the card is hoverable
+   */
+  @property({ type: Boolean, attribute: 'is-hoverable' }) isHoverable = false
+
+  /**
+   * Whether the card has an overlay
+   */
+  @property({ type: Boolean, attribute: 'has-overlay' }) hasOverlay = false
+
+  /**
+   * Custom CSS class for the card
+   */
+  @property({ attribute: 'custom-class' }) customClass = ''
+
+  /**
+   * Custom CSS class for the header
+   */
+  @property({ attribute: 'header-class' }) headerClass = ''
+
+  @state() private _resolvedData?: ResolvedAddress
+  @state() private _profileImageUrl?: string
+  @state() private _backgroundImageUrl?: string
+
+  private _resolutionTask = new Task(this, {
+    task: async ([address, resolved]) => {
+      if (resolved) {
+        this._resolvedData = resolved
+        return resolved
+      }
+
+      const { resolveAddress } = useAddressResolver()
+      const baseAddress = this._extractBaseAddress(address as string)
+      const data = await resolveAddress(baseAddress)
+      this._resolvedData = data
+      return data
+    },
+    args: () => [this.address, this.resolved] as const,
+  })
+
+  private _profileImageTask = new Task(this, {
+    task: async ([resolved]) => {
+      const { loadProfileImage } = useImageLoader()
+      const data = resolved || this._resolvedData
+
+      if (!data) return null
+
+      const image = await loadProfileImage(data, {
+        width: 256,
+        height: 256,
+        dpr: window.devicePixelRatio || 1,
+      })
+
+      if (image?.src) {
+        this._profileImageUrl = image.src
+      }
+
+      return image
+    },
+    args: () => [this._resolvedData] as const,
+  })
+
+  private _backgroundImageTask = new Task(this, {
+    task: async ([resolved]) => {
+      const { loadBackgroundImage } = useImageLoader()
+      const data = resolved || this._resolvedData
+
+      if (!data) return null
+
+      const image = await loadBackgroundImage(data, {
+        width: 800,
+        height: 200,
+        dpr: window.devicePixelRatio || 1,
+      })
+
+      if (image?.src) {
+        this._backgroundImageUrl = image.src
+      }
+
+      return image
+    },
+    args: () => [this._resolvedData] as const,
+  })
+
+  private _extractBaseAddress(addressOrComposite: string): string {
+    return addressOrComposite.split('-')[0]
+  }
+
+  private _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('address-click', {
+        detail: {
+          address: this.address,
+          resolved: this._resolvedData,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `
+
+  render() {
+    const baseAddress = this._extractBaseAddress(this.address)
+    // is-eoa should ONLY be true when there's no __gqltype at all (actual EOA with no on-chain data)
+    // For Profiles, Tokens, NFTs - they all have __gqltype, so is-eoa should be false
+    // This ensures lukso-card shows the resolved profile-url image instead of blockie identicon
+    const isEoa = !this._resolvedData?.__gqltype
+
+    return html`
+      <lukso-card
+        variant="${this.variant}"
+        border-radius="${this.borderRadius}"
+        shadow="${this.shadow}"
+        ?is-hoverable="${this.isHoverable}"
+        ?has-overlay="${this.hasOverlay}"
+        ?is-eoa="${isEoa}"
+        custom-class="${this.customClass}"
+        header-class="${this.headerClass}"
+        profile-url="${this._profileImageUrl || ''}"
+        background-url="${this._backgroundImageUrl || ''}"
+        profile-address="${baseAddress}"
+        .width="${this.width}"
+        .height="${this.height}"
+        @click="${this._handleClick}"
+      >
+        <!-- Pass through all slots -->
+        <slot name="header" slot="header"></slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="bottom" slot="bottom"></slot>
+      </lukso-card>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'contract-card': ContractCard
+  }
+}