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

package/package.json

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

package/src/components/asset-card.ts

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

@@ -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/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="large" color="${this.getVariantColor()}"></lukso-icon>
+        <lukso-icon name="${this.renderIcon()}" size="small" 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-30"><slot>${this.message}</slot></div>
+          <div class="text-neutral-20"><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 } from 'lit'
+import { html, type TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { safeCustomElement } from './safe-custom-element'
@@ -8,21 +8,7 @@ import { safeCustomElement } from './safe-custom-element'
 // Import LUKSO web components
 import './load-web-components'
 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 } from '../utils'
 
 /**
  * Value display component
@@ -47,7 +33,7 @@ export class ValueView extends CoreLitElement {
    * The value to display (required)
    * Can be string, number, boolean, or bigint
    */
-  @property() value?: string | number | boolean | bigint | null
+  @property() value?: TemplateResult | string | number | boolean | bigint | null
 
   /**
    * The key name (used for special formatting logic)
@@ -98,7 +84,7 @@ export class ValueView extends CoreLitElement {
   /**
    * Optional label to show in card header
    */
-  @property() label?: string
+  @property() label?: string | TemplateResult
 
   /**
    * Maximum width for truncation
@@ -380,7 +366,7 @@ export class ValueView extends CoreLitElement {
 
       if (effectiveType === 'currency') {
         const { numeric, symbol } = this.getCurrencyParts()
-        if (this.label && this.label.trim() !== '') {
+        if (this.label) {
           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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,82 @@
+// 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
+  }
+}