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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.5.0-dev.5916302",
+  "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.3.0-dev.5916302",
-    "@lukso/transaction-view-headless": "0.4.0-dev.5916302"
+    "@lukso/transaction-decoder": "1.3.0-dev.5ea12c5",
+    "@lukso/transaction-view-headless": "0.4.0-dev.5ea12c5"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

package/src/components/asset-card.ts

@@ -16,7 +16,21 @@ import {
 } 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
 
@@ -194,7 +211,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 +278,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 +292,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 +309,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 +334,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,47 +345,30 @@ 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`
@@ -388,14 +379,20 @@ export class AssetCard extends CoreLitElement {
               `,
               () => 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/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/shared/image-list.ts

@@ -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/notification-view.ts

@@ -58,7 +58,7 @@ export class NotificationView extends CoreLitElement {
     return html`
       <div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
         <div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
-        <lukso-icon name="${this.renderIcon()}" size="small" color="${this.getVariantColor()}"></lukso-icon>
+        <lukso-icon name="${this.renderIcon()}" size="large" color="${this.getVariantColor()}"></lukso-icon>
         </div>
         <div class="text-[14px] flex flex-col gap-1.5">
           ${
@@ -66,7 +66,7 @@ export class NotificationView extends CoreLitElement {
               ? html`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>`
               : ''
           }
-          <div class="text-neutral-20"><slot>${this.message}</slot></div>
+          <div class="text-neutral-30"><slot>${this.message}</slot></div>
           ${
             this.acknowledgeable
               ? html`

package/src/shared/value-view.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
-import { html, type TemplateResult } 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'
@@ -8,7 +8,21 @@ import { safeCustomElement } from './safe-custom-element'
 // Import LUKSO web components
 import './load-web-components'
 import { CoreLitElement } from '../styles'
-import { formatUnits } from '../utils'
+
+// 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}`
+}
 
 /**
  * Value display component
@@ -33,7 +47,7 @@ export class ValueView extends CoreLitElement {
    * The value to display (required)
    * Can be string, number, boolean, or bigint
    */
-  @property() value?: TemplateResult | string | number | boolean | bigint | null
+  @property() value?: string | number | boolean | bigint | null
 
   /**
    * The key name (used for special formatting logic)
@@ -84,7 +98,7 @@ export class ValueView extends CoreLitElement {
   /**
    * Optional label to show in card header
    */
-  @property() label?: string | TemplateResult
+  @property() label?: string
 
   /**
    * Maximum width for truncation
@@ -366,7 +380,7 @@ export class ValueView extends CoreLitElement {
 
       if (effectiveType === 'currency') {
         const { numeric, symbol } = this.getCurrencyParts()
-        if (this.label) {
+        if (this.label && this.label.trim() !== '') {
           headerText = this.label
           contentTemplate = html`
               <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>

package/src/utils.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { formatUnits, parseBigInt } from './utils.js'
-
-describe('formatUnits', () => {
-  it('returns integer string when remainder is zero', () => {
-    expect(formatUnits(1000000000000000000n)).toBe('1')
-    expect(formatUnits(5000n, 3)).toBe('5')
-  })
-
-  it('formats values with fractional part respecting decimals', () => {
-    expect(formatUnits(123000000000000000n)).toBe('0.123')
-    expect(formatUnits(987654321n, 6)).toBe('987.654321')
-  })
-
-  it('trims trailing zeros in fractional part', () => {
-    expect(formatUnits(120n, 2)).toBe('1.2')
-    expect(formatUnits(1001000n, 6)).toBe('1.001')
-  })
-
-  it('handles zero value', () => {
-    expect(formatUnits(0n)).toBe('0')
-  })
-})
-
-describe('parseBigInt', () => {
-  it('parses decimal and hex strings with optional suffix', () => {
-    expect(parseBigInt('42')).toBe(42n)
-    expect(parseBigInt('0x10')).toBe(16n)
-    expect(parseBigInt('21n')).toBe(21n)
-    expect(parseBigInt('  0xFFn  ')).toBe(255n)
-  })
-
-  it('returns bigint directly or from integer numbers', () => {
-    const value = 123n
-    expect(parseBigInt(value)).toBe(value)
-    expect(parseBigInt(9007199254740991)).toBe(9007199254740991n)
-  })
-
-  it('returns undefined for invalid inputs', () => {
-    expect(parseBigInt('')).toBeUndefined()
-    expect(parseBigInt('1.5')).toBeUndefined()
-    expect(parseBigInt('0xG')).toBeUndefined()
-    expect(parseBigInt(1.1)).toBeUndefined()
-    expect(parseBigInt(null)).toBeUndefined()
-    expect(parseBigInt(undefined)).toBeUndefined()
-  })
-})

package/src/utils.ts

@@ -1,82 +0,0 @@
-// Value formatting utilities
-/**
- * Convert a token amount from base units (bigint) to a decimal string.
- *
- * - Handles arbitrary `decimals` without floating point precision loss.
- * - Trims trailing zeros in the fractional part.
- * - Returns only the integer part when remainder is zero.
- *
- * @param value - The amount in base units as a bigint (e.g., wei for ETH).
- * @param decimals - Number of decimal places the token uses (default 18).
- * @returns A human-readable decimal string.
- *
- * @example
- * // 1 ether in wei
- * formatUnits(1000000000000000000n) // '1'
- *
- * @example
- * // 1.23 tokens with 2 decimals
- * formatUnits(123n, 2) // '1.23'
- *
- * @example
- * // No remainder: return integer part only
- * formatUnits(2000000000000000000n) // '2'
- */
-export 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}`
-}
-
-function isBigIntString(str: string): boolean {
-  const trimmed = str.trim()
-  if (trimmed.endsWith('n'))
-    return /^[0-9]+n$/.test(trimmed) || /^0x[0-9a-fA-F]+n$/.test(trimmed)
-  return /^[0-9]+$/.test(trimmed) || /^0x[0-9a-fA-F]+$/.test(trimmed)
-}
-
-/**
- * Parse loose bigint inputs coming from attributes, JSON, or user input.
- *
- * - Accepts bigint literals (`123n`), decimal/hex strings, and integers.
- * - Trims whitespace and optional trailing `n` suffix.
- * - Returns `undefined` for invalid formats (floats, empty strings, non-numeric text).
- *
- * @param value - Source value to parse (string | number | bigint | null | undefined).
- * @returns BigInt when parsing succeeds, otherwise `undefined`.
- *
- * @example
- * parseBigInt('42') // 42n
- * @example
- * parseBigInt('0x10n') // 16n
- * @example
- * parseBigInt(1000n) // 1000n (passthrough)
- * @example
- * parseBigInt('1.5') // undefined (decimals not allowed)
- */
-export function parseBigInt(
-  value: string | number | bigint | null | undefined
-): bigint | undefined {
-  if (!value) return undefined
-  if (typeof value === 'bigint') return value
-  if (typeof value === 'number') {
-    if (!Number.isInteger(value)) return undefined
-    return BigInt(value)
-  }
-  const trimmed = value.trim()
-  const cleaned = trimmed.endsWith('n') ? trimmed.slice(0, -1) : trimmed
-  if (!isBigIntString(cleaned)) return undefined
-  try {
-    return BigInt(cleaned)
-  } catch {
-    return undefined
-  }
-}