@lukso/transaction-view-core 0.4.1 → 0.5.0-dev.5ea12c5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.4.1",
+  "version": "0.5.0-dev.5ea12c5",
   "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.2.0",
-    "@lukso/transaction-view-headless": "0.3.1"
+    "@lukso/transaction-decoder": "1.3.0-dev.5ea12c5",
+    "@lukso/transaction-view-headless": "0.4.0-dev.5ea12c5"
   },
   "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,7 +11,7 @@ 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'
@@ -73,13 +73,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 +96,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 ''
@@ -392,7 +372,7 @@ export class AssetCard extends CoreLitElement {
             ${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>

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/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/index.ts

@@ -37,4 +37,4 @@ export type {
   ViewContext,
 } from '@lukso/transaction-view-headless'
 // Release update
-// build 2
+// build 1

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) {

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)

package/src/shared/notification-view.ts

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

package/src/shared/progress-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 
@@ -42,15 +42,6 @@ export class ProgressView extends CoreLitElement {
     `
   }
 
-  private renderAddressLabel() {
-    return html`
-      <value-view
-        .value=${this.address}
-        .unit=${this.unit}
-      ></value-view>
-    `
-  }
-
   override render() {
     const isError = (this.className || '').split(/\s+/).includes('error')
     return html`

package/src/shared/scroll-to-bottom-button.ts

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

package/src/shared/signal-controller.ts

@@ -90,7 +90,9 @@ export class MultiSignalController implements ReactiveController {
   }
 
   hostDisconnected() {
-    this.unsubscribes.forEach((unsubscribe) => unsubscribe())
+    this.unsubscribes.forEach((unsubscribe) => {
+      unsubscribe()
+    })
     this.unsubscribes = []
   }
 

package/src/shared/transaction-view-controller.ts

@@ -255,7 +255,7 @@ export function useTransactionView(
 /**
  * Controller for working with transaction signals from the decoder
  */
-export class TransactionSignalController<T = any>
+export class TransactionSignalController<_T = any>
   implements ReactiveController
 {
   private host: ReactiveControllerHost

package/src/shared/url-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
@@ -56,7 +56,7 @@ export class UrlView extends CoreLitElement {
         .replace(/-/g, ' ')
         .replace(/\b\w/g, (c) => c.toUpperCase())
 
-      if (this.label && this.label.trim()) {
+      if (this.label?.trim()) {
         this.displayName = this.label.trim()
       } else {
         this.displayName = hostnamePretty || this.url
@@ -64,7 +64,7 @@ export class UrlView extends CoreLitElement {
     } catch {
       this.favicon = undefined
       // Fallback to raw string if URL parse fails
-      this.displayName = this.label && this.label.trim() ? this.label : this.url
+      this.displayName = this.label?.trim() ? this.label : this.url
     }
   }
 

package/src/shared/value-view.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
-import { css, html } from 'lit'
+import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { safeCustomElement } from './safe-custom-element'
@@ -111,13 +111,6 @@ export class ValueView extends CoreLitElement {
    */
   @property() address?: string
 
-  // Internal state for resolved metadata
-  @state() private resolvedMetadata?: {
-    symbol?: string
-    decimals?: number
-    name?: string
-  }
-
   // Tracks whether the component has any slotted content
   @state() private _hasSlotContent = false
 
@@ -219,15 +212,16 @@ export class ValueView extends CoreLitElement {
     if (value === undefined) return 'undefined'
 
     switch (effectiveType) {
-      case 'currency':
+      case 'currency': {
         const { numeric, symbol } = this.getCurrencyParts()
         return `${numeric} ${symbol}`
+      }
 
       case 'bigint':
         if (typeof value === 'bigint') {
-          return value.toString() + 'n'
+          return `${value.toString()}n`
         }
-        return String(value) + 'n'
+        return `${String(value)}n`
 
       case 'boolean':
         return value ? 'true' : 'false'
@@ -270,7 +264,7 @@ export class ValueView extends CoreLitElement {
     try {
       if (typeof value === 'bigint') {
         numeric = formatUnits(value, effectiveDecimals)
-      } else if (typeof value === 'string' && !isNaN(Number(value))) {
+      } else if (typeof value === 'string' && !Number.isNaN(Number(value))) {
         const bigintValue = BigInt(value)
         numeric = formatUnits(bigintValue, effectiveDecimals)
       }

package/src/styles/styles.css

@@ -1 +1 @@
-@import "@lukso/web-components/dist/styles/main.css";
+@import "@lukso/web-components/tools/styles/main.css";

package/src/vue-entry.ts

@@ -12,4 +12,3 @@ export type {
 // Also re-export the core functionality
 export * from './registry/index.js'
 export * from './shared/index.js'
-export * from './vue/index.js'

package/tsup.config.ts

@@ -1,6 +1,6 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
 import autoprefixer from 'autoprefixer'
-import { readFileSync } from 'fs'
-import { dirname, resolve } from 'path'
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
 import tailwindcss from 'tailwindcss'
@@ -37,7 +37,7 @@ export default defineConfig({
           // Return with a special virtual path marker that the onLoad hook can recognize
           // Use 'file' namespace to ensure esbuild calls our onLoad handler
           return {
-            path: resolvedPath + '?__raw__',
+            path: `${resolvedPath}?__raw__`,
             namespace: 'file',
           }
         })