@lukso/transaction-view-core 0.5.0 → 0.6.0-dev.3b54e9f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.5.0",
+  "version": "0.6.0-dev.3b54e9f",
   "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",
-    "@lukso/transaction-view-headless": "0.4.0"
+    "@lukso/transaction-decoder": "1.3.1-dev.3b54e9f",
+    "@lukso/transaction-view-headless": "0.4.1-dev.3b54e9f"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
@@ -52,6 +52,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "dev-alt": "tsup --watch",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/components/asset-card.ts

@@ -11,26 +11,12 @@ import '../shared/image-list.js'
 import '@lukso/web-components'
 import { Task } from '@lit/task'
 import {
-  ResolvedAddress,
+  type 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}`
-}
+import { formatUnits, parseBigInt } from '../utils.js'
 
 /**
  * Asset card component for displaying token/NFT information
@@ -58,9 +44,6 @@ 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
 
@@ -73,13 +56,6 @@ export class AssetCard extends CoreLitElement {
   @state()
   private _resolvedData?: ResolvedAddress
 
-  @state()
-  private _imageError = false
-
-  private _handleImageError() {
-    this._imageError = true
-  }
-
   private _handleInfoClick() {
     this.displayDetails = !this.displayDetails
   }
@@ -103,19 +79,6 @@ 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 ''
@@ -231,9 +194,7 @@ export class AssetCard extends CoreLitElement {
     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
+    return this.tokenId ? `${parseInt(this.tokenId, 16)}` : undefined
   }
 
   private _renderTokenId() {
@@ -298,6 +259,7 @@ 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
@@ -312,6 +274,7 @@ 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">
@@ -329,11 +292,11 @@ export class AssetCard extends CoreLitElement {
     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'}
+            label=${this.functionName || 'Execute'}
+            size="small"
+            icon=${this.functionIcon ? this.functionIcon : 'code-outline'}
           ></function-name-view>
-          <function-name-view label=${this._resolvedData?.standard} size="small"></function-name-view>
+          <function-name-view label=${this._resolvedData?.standard ?? 'Unknown'} size="small"></function-name-view>
         </div>
       `
   }
@@ -354,6 +317,15 @@ 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`
@@ -365,54 +337,65 @@ 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">
-              <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 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>
           </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">
+          <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>
+            
             ${when(
               this.amount,
               () => html`
-                <span class="">${formatUnits(BigInt(this.amount!), this._resolvedData?.decimals)}</span>
+                <span class="">${formatUnits(BigInt(this.amount || 0), 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 class="mt-4">
+            ${when(this.showCreator, () => this._renderCreatorSection())}
+            </div>
           </div>
         </div>
-      </div>
-      <div class="border-neutral-90 pt-2">
-        ${this._renderTokenDetails()}
+        <div class="border-neutral-90 pt-2">
+          ${this._renderTokenDetails()}
+        </div>
       </div>
     </div>
     `

package/src/components/contract-card.ts

@@ -1,10 +1,5 @@
-import { Task } from '@lit/task'
-import {
-  type ResolvedAddress,
-  useAddressResolver,
-  useImageLoader,
-} from '@lukso/transaction-view-headless'
-import { css, html, LitElement, nothing } from 'lit'
+import type { ResolvedAddress } from '@lukso/transaction-view-headless'
+import { css, html, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { safeCustomElement } from '../shared/safe-custom-element'
 import '../shared/load-web-components'
@@ -115,66 +110,6 @@ 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,8 +1,4 @@
-import { Task } from '@lit/task'
-import {
-  type ResolvedAddress,
-  useAddressResolver,
-} from '@lukso/transaction-view-headless'
+import type { ResolvedAddress } 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'
@@ -34,25 +30,9 @@ 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,13 +79,15 @@ export class PermissionsBlock extends CoreLitElement {
   }
 
   private renderPermission(p: PermissionLevels) {
-    const nameBase = (p.icon || p.permissionName || '').toLowerCase()
+    const nameBase = (p.icon || p.permissionName || '')
+      .toLowerCase()
+      .replace(/_/g, '-')
     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
+					<lukso-icon
 						class="active absolute bottom-0 opacity-0 z-[99] transition-opacity duration-200 ${
               p.isActive ? 'opacity-100' : ''
             }"
@@ -93,14 +95,14 @@ export class PermissionsBlock extends CoreLitElement {
 						width="40"
 						height="40"
 						color=${this.color}
-					></svg-icon>
-					<svg-icon
+					></lukso-icon>
+					<lukso-icon
 						class="inactive absolute bottom-0 ${p.isActive ? 'opacity-0' : 'opacity-100'}"
 						name=${inactiveIcon}
 						width="40"
 						height="40"
 						color=${this.color}
-					></svg-icon>
+					></lukso-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 { customElement, property, state } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 
 // LUKSO web components are loaded dynamically via plugin
@@ -96,17 +96,14 @@ 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], { signal }) => {
+    task: async ([resolved]) => {
       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], { signal }) => {
+    task: async ([address]) => {
       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,22 +129,6 @@ 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 { customElement, property, query, state } from 'lit/decorators.js'
+import { property } 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 { customElement, property } from 'lit/decorators.js'
+import { 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,8 +1,5 @@
-import { Task } from '@lit/task'
-import { useAddressResolver } from '@lukso/transaction-view-headless'
-import makeBlockie from 'ethereum-blockies-base64'
 import { html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
@@ -148,7 +145,7 @@ export class GasProviderView extends CoreLitElement {
 
   private displayRelayerResetDate() {
     const date = new Date(this.relayerResetDate)
-    return isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString()
+    return Number.isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString()
   }
 
   override render() {
@@ -178,12 +175,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,10 +1,11 @@
 import { Task } from '@lit/task'
 import {
+  type ImageResult,
   useAddressResolver,
   useImageLoader,
 } from '@lukso/transaction-view-headless'
 import { html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 
@@ -115,18 +116,15 @@ 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], { signal }) => {
+    task: async ([address]) => {
       if (!address) return null
 
       this.isLoadingAddress = true
@@ -147,12 +145,12 @@ export class IconView extends CoreLitElement {
 
   // Task for loading profile image
   private imageTask = new Task(this, {
-    task: async ([resolved], { signal }) => {
+    task: async ([resolved]) => {
       if (!resolved) return null
 
       this.isLoadingImage = true
       try {
-        let image
+        let image: ImageResult | null = null
 
         // 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 { customElement, property, state } from 'lit/decorators.js'
+import { 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], { signal }) => {
+    task: async ([address]) => {
       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,7 +237,6 @@ 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,11 +34,12 @@ const originalDefine =
 
 // Wrap customElements.define to catch duplicate registration errors
 if (typeof customElements !== 'undefined' && originalDefine) {
-  customElements.define = function (
+  customElements.define = (
     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)