@lukso/transaction-view-core 0.5.0-dev.f500300 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.5.0-dev.f500300",
+  "version": "0.5.0",
   "description": "Core components and hooks for LUKSO transaction display",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -35,8 +35,8 @@
     "@preact/signals-core": "^1.12.1",
     "ethereum-blockies-base64": "^1.0.2",
     "lit": "^3.3.1",
-    "@lukso/transaction-decoder": "1.3.0-dev.f500300",
-    "@lukso/transaction-view-headless": "0.4.0-dev.f500300"
+    "@lukso/transaction-decoder": "1.3.0",
+    "@lukso/transaction-view-headless": "0.4.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
@@ -52,7 +52,6 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "dev-alt": "tsup --watch",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc --noEmit"
+    "clean": "rm -rf dist"
   }
 }

package/src/components/asset-card.ts

@@ -11,12 +11,26 @@ import '../shared/image-list.js'
 import '@lukso/web-components'
 import { Task } from '@lit/task'
 import {
-  type ResolvedAddress,
+  ResolvedAddress,
   useAddressResolver,
 } from '@lukso/transaction-view-headless'
 import { safeCustomElement } from '../shared/safe-custom-element.js'
 import { CoreLitElement } from '../styles'
-import { formatUnits, parseBigInt } from '../utils.js'
+
+// 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
@@ -44,6 +58,9 @@ export class AssetCard extends CoreLitElement {
   @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
 
@@ -56,6 +73,13 @@ export class AssetCard extends CoreLitElement {
   @state()
   private _resolvedData?: ResolvedAddress
 
+  @state()
+  private _imageError = false
+
+  private _handleImageError() {
+    this._imageError = true
+  }
+
   private _handleInfoClick() {
     this.displayDetails = !this.displayDetails
   }
@@ -79,6 +103,19 @@ export class AssetCard extends CoreLitElement {
     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 ''
@@ -194,7 +231,9 @@ export class AssetCard extends CoreLitElement {
     const displayTokenId = formattedTokenId ? `${formattedTokenId}` : ''
     if (displayTokenId) return displayTokenId
     // If its a collection, do not show tokenId
-    return this.tokenId ? `${parseInt(this.tokenId, 16)}` : undefined
+    return this.tokenId && !this._resolvedData?.isCollection
+      ? `${parseInt(this.tokenId, 16)}`
+      : undefined
   }
 
   private _renderTokenId() {
@@ -259,7 +298,6 @@ export class AssetCard extends CoreLitElement {
   private _renderImages() {
     const images = (this._resolvedData as any)?.images || []
     if (images.length === 0) return ''
-    if (!this.address) return ''
 
     return html`
           <image-list
@@ -274,7 +312,6 @@ export class AssetCard extends CoreLitElement {
   private _renderAssets() {
     const assets = (this._resolvedData as any)?.assets || []
     if (assets.length === 0) return ''
-    if (!this.address) return ''
 
     return html`
         <div class="section">
@@ -292,11 +329,11 @@ export class AssetCard extends CoreLitElement {
     return html`
         <div class="flex justify-between items-center my-4">
           <function-name-view 
-            label=${this.functionName || 'Execute'}
-            size="small"
-            icon=${this.functionIcon ? this.functionIcon : 'code-outline'}
+          label=${this.functionName}
+          size="small"
+          icon=${this.functionIcon ? this.functionIcon : 'code-outline'}
           ></function-name-view>
-          <function-name-view label=${this._resolvedData?.standard ?? 'Unknown'} size="small"></function-name-view>
+          <function-name-view label=${this._resolvedData?.standard} size="small"></function-name-view>
         </div>
       `
   }
@@ -317,15 +354,6 @@ export class AssetCard extends CoreLitElement {
     `
   }
 
-  private _formattedAmount() {
-    const data = this._resolutionTask.value
-    const amt = this.amount
-    if (amt === undefined || amt === null || amt === '') return undefined
-    const bigintAmount = parseBigInt(amt as any)
-    if (bigintAmount === undefined) return undefined
-    return formatUnits(bigintAmount, data?.decimals)
-  }
-
   private renderFormattedTokenIdBadge() {
     if (!this.displayedTokenId) return ''
     return html`
@@ -337,65 +365,54 @@ export class AssetCard extends CoreLitElement {
     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">
-                ${when(
-                  this.address,
-                  () => html`
-                    <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 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="">${this._formattedAmount() ?? ''}</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>
-            
+        <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 || 0), this._resolvedData?.decimals)}</span>
+                <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 class="mt-4">
-            ${when(this.showCreator, () => this._renderCreatorSection())}
-            </div>
+          </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 class="border-neutral-90 pt-2">
-          ${this._renderTokenDetails()}
-        </div>
+      </div>
+      <div class="border-neutral-90 pt-2">
+        ${this._renderTokenDetails()}
       </div>
     </div>
     `

package/src/components/contract-card.ts

@@ -1,5 +1,10 @@
-import type { ResolvedAddress } from '@lukso/transaction-view-headless'
-import { css, html, LitElement } from 'lit'
+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'
@@ -110,6 +115,66 @@ export class ContractCard extends LitElement {
   @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]
   }

package/src/components/info-panel.ts

@@ -1,4 +1,8 @@
-import type { ResolvedAddress } from '@lukso/transaction-view-headless'
+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'
@@ -30,9 +34,25 @@ export class InfoPanel extends LitElement {
   @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]
   }

package/src/components/permissions-block.ts

@@ -79,15 +79,13 @@ export class PermissionsBlock extends CoreLitElement {
   }
 
   private renderPermission(p: PermissionLevels) {
-    const nameBase = (p.icon || p.permissionName || '')
-      .toLowerCase()
-      .replace(/_/g, '-')
+    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">
-					<lukso-icon
+					<svg-icon
 						class="active absolute bottom-0 opacity-0 z-[99] transition-opacity duration-200 ${
               p.isActive ? 'opacity-100' : ''
             }"
@@ -95,14 +93,14 @@ export class PermissionsBlock extends CoreLitElement {
 						width="40"
 						height="40"
 						color=${this.color}
-					></lukso-icon>
-					<lukso-icon
+					></svg-icon>
+					<svg-icon
 						class="inactive absolute bottom-0 ${p.isActive ? 'opacity-0' : 'opacity-100'}"
 						name=${inactiveIcon}
 						width="40"
 						height="40"
 						color=${this.color}
-					></lukso-icon>
+					></svg-icon>
 				</div>
 
 				<div>

package/src/components/transaction-playback.ts

@@ -231,7 +231,7 @@ export class TransactionPlayback extends LitElement {
     }
   }
 
-  protected updated(_changedProperties: PropertyValues): void {
+  protected updated(changedProperties: PropertyValues): void {
     // Mount component after render
     if (this.loadedComponent && this.componentContainerRef.value) {
       // Clear existing content
@@ -364,14 +364,14 @@ export class TransactionPlayback extends LitElement {
           () => html`
             <div class="debug-item">
               <span class="debug-label">Child Index:</span>
-              <span class="debug-value">${this.currentResult?.indexInfo.childIndex}</span>
+              <span class="debug-value">${this.currentResult!.indexInfo.childIndex}</span>
             </div>
           `
         )}
         <div class="debug-item">
           <span class="debug-label">Available Indices:</span>
           <span class="debug-value">
-            [${this.playbackState?.batchInfo.availableIndices.join(', ')}]
+            [${this.playbackState!.batchInfo.availableIndices.join(', ')}]
           </span>
         </div>
         ${when(
@@ -379,7 +379,7 @@ export class TransactionPlayback extends LitElement {
           () => html`
             <div class="debug-item">
               <span class="debug-label">Matched View:</span>
-              <span class="debug-value">${this.currentResult?.match?.view.id}</span>
+              <span class="debug-value">${this.currentResult!.match!.view.id}</span>
             </div>
           `
         )}

package/src/shared/address-display.ts

@@ -4,7 +4,7 @@ import {
   useImageLoader,
 } from '@lukso/transaction-view-headless'
 import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 
 // LUKSO web components are loaded dynamically via plugin
@@ -96,14 +96,17 @@ export class AddressDisplay extends LitElement {
     return this.value || this.address || ''
   }
 
+  // Internal state
+  @state() private imageData?: { src: string }
+  @state() private isLoadingImage = false
+
   // Composables
   private imageLoader = useImageLoader()
   private addressResolver = useAddressResolver()
-  isLoadingImage = false
 
   // Task for loading profile image
   private imageTask = new Task(this, {
-    task: async ([resolved]) => {
+    task: async ([resolved], { signal }) => {
       if (!resolved) return null
 
       this.isLoadingImage = true

package/src/shared/address-view.ts

@@ -90,7 +90,7 @@ export class AddressView extends CoreLitElement {
 
   // Task for resolving address data
   private addressTask = new Task(this, {
-    task: async ([address]) => {
+    task: async ([address], { signal }) => {
       if (!address) return null
 
       this.isLoadingAddress = true
@@ -99,7 +99,7 @@ export class AddressView extends CoreLitElement {
         const resolved = await this.addressResolver.resolveAddress(address)
         this.requestUpdate() // Force re-render after resolution
         return resolved
-      } catch (_error) {
+      } catch (error) {
         return null
       } finally {
         this.isLoadingAddress = false
@@ -129,6 +129,22 @@ export class AddressView extends CoreLitElement {
     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
    */

package/src/shared/custom-select.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+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'

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

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'

package/src/shared/gas-provider-view.ts

@@ -1,5 +1,8 @@
+import { Task } from '@lit/task'
+import { useAddressResolver } from '@lukso/transaction-view-headless'
+import makeBlockie from 'ethereum-blockies-base64'
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
@@ -145,7 +148,7 @@ export class GasProviderView extends CoreLitElement {
 
   private displayRelayerResetDate() {
     const date = new Date(this.relayerResetDate)
-    return Number.isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString()
+    return isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString()
   }
 
   override render() {
@@ -175,12 +178,12 @@ export class GasProviderView extends CoreLitElement {
         ? this.controllerAddress
         : (() => {
             const r = this.allRelayers.find(
-              (x) => x.id === this.selectedGasProvider?.id
+              (x) => x.id === this.selectedGasProvider!.id
             )
             return (
               r?.website ||
               r?.apiUrl ||
-              `relayer:${this.selectedGasProvider?.id}`
+              `relayer:${this.selectedGasProvider!.id}`
             )
           })()
       : undefined

package/src/shared/icon-view.ts

@@ -1,11 +1,10 @@
 import { Task } from '@lit/task'
 import {
-  type ImageResult,
   useAddressResolver,
   useImageLoader,
 } from '@lukso/transaction-view-headless'
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 
@@ -116,15 +115,18 @@ export class IconView extends CoreLitElement {
    */
   @property({ type: Number, attribute: 'image-index' }) imageIndex?: number
 
+  // Internal state
+  @state() private imageData?: { src: string }
+  @state() private isLoadingImage = false
+  @state() private isLoadingAddress = false
+
   // Composables
   private imageLoader = useImageLoader()
   private addressResolver = useAddressResolver()
-  isLoadingAddress = false
-  isLoadingImage = false
 
   // Task for resolving address data
   private addressTask = new Task(this, {
-    task: async ([address]) => {
+    task: async ([address], { signal }) => {
       if (!address) return null
 
       this.isLoadingAddress = true
@@ -145,12 +147,12 @@ export class IconView extends CoreLitElement {
 
   // Task for loading profile image
   private imageTask = new Task(this, {
-    task: async ([resolved]) => {
+    task: async ([resolved], { signal }) => {
       if (!resolved) return null
 
       this.isLoadingImage = true
       try {
-        let image: ImageResult | null = null
+        let image
 
         // If imageHint is specified, load directly from that property
         if (this.imageHint && (resolved as any)[this.imageHint]) {

package/src/shared/image-list.ts

@@ -1,7 +1,7 @@
 import { Task } from '@lit/task'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
 import { html } from 'lit'
-import { property, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { safeCustomElement } from './safe-custom-element'
 import './icon-view.js'
@@ -72,7 +72,7 @@ export class ImageList extends CoreLitElement {
 
   // Task for resolving address data
   private addressTask = new Task(this, {
-    task: async ([address]) => {
+    task: async ([address], { signal }) => {
       if (!address) return null
 
       this.isLoading = true
@@ -140,7 +140,7 @@ export class ImageList extends CoreLitElement {
    * Render a single image item
    */
   private renderImageItem(item: any, index: number) {
-    const _itemIndex = item.index !== undefined ? item.index : index
+    const itemIndex = item.index !== undefined ? item.index : index
     const isImage = this.isImageFile(item)
 
     if (isImage) {
@@ -237,6 +237,7 @@ export class ImageList extends CoreLitElement {
         </div>
       `
     }
+
     const grid = html`
       <div class="grid grid-cols-[repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px))] gap-3 p-2">
         ${repeat(

package/src/shared/load-web-components.ts

@@ -34,12 +34,11 @@ const originalDefine =
 
 // Wrap customElements.define to catch duplicate registration errors
 if (typeof customElements !== 'undefined' && originalDefine) {
-  customElements.define = (
+  customElements.define = function (
     name: string,
-    // biome-ignore lint/suspicious/noShadowRestrictedNames: This is the web-components api.
     constructor: CustomElementConstructor,
     options?: ElementDefinitionOptions
-  ) => {
+  ) {
     // Check if already defined
     if (!customElements.get(name)) {
       originalDefine(name, constructor, options)